/* =============================================================
   O MENU DA CONVERSA
=============================================================

   Um botão redondo flutuando logo ACIMA do rodapé — sobre a conversa,
   não sobre as respostas rápidas nem sobre o campo de escrever. Ele
   sobe e desce junto com o rodapé quando o teclado do celular entra.

   Ao toque, as ações abrem em leque num quarto de círculo subindo pela
   esquerda: é o espaço livre, o dedo alcança todas na mesma distância
   sem mirar, e nada tampa o que se está lendo para responder.
*/

.mc-leque {
    position: absolute;
    right: 14px;
    bottom: calc(100% + 10px);
    z-index: 60;
}
.mc-leque[hidden] { display: none; }

/* -------------------------------------------------------------
   O BOTÃO
------------------------------------------------------------- */

.mc-fab {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, var(--pop-1), var(--pop-2));
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: color .16s ease, border-color .16s ease,
                transform .2s cubic-bezier(.3, 1.4, .5, 1);
}
.mc-fab:hover { color: var(--text); border-color: var(--accent); }

/* Aberto, o "+" vira "×" girando. Confirma o toque sem precisar de
   outra cor, e diz que o mesmo botão agora fecha. */
.mc-aberto .mc-fab { transform: rotate(135deg); color: var(--accent-hi); }

/* O único estado que precisa ser visto de relance, sem abrir nada: o
   Ramboo está respondendo sozinho agora. */
.mc-selo-auto {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-elev);
}
.mc-selo-auto[hidden] { display: none; }
.mc-automatico .mc-fab { border-color: rgba(var(--accent-rgb), .55); }

/* -------------------------------------------------------------
   AS PÉTALAS
-------------------------------------------------------------
   O ângulo sai do índice: `--i` de 0 a `--n - 1`, varrendo de 180°
   (esquerda) a 90° (cima). Assim o leque se ajeita sozinho com três ou
   com seis ações, sem ninguém reescrever coordenada nenhuma. */

.mc-petalas { position: absolute; inset: 0; }
.mc-petalas[hidden] { display: none; }

.mc-petala {
    --passo: calc(90deg / max(var(--n) - 1, 1));
    --ang: calc(180deg - var(--i) * var(--passo));
    --raio: 56px;
    --x: calc(cos(var(--ang)) * var(--raio));
    --y: calc(sin(var(--ang)) * var(--raio) * -1);

    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--pop-1), var(--pop-2));
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    /* Cada uma entra 34ms depois da anterior: é o que faz parecer que
       saíram DE DENTRO do botão, e não que uma caixa apareceu. */
    animation: mc-brotar .24s cubic-bezier(.25, 1.3, .45, 1) both;
    animation-delay: calc(var(--i) * 34ms);
}
.mc-petala:hover { color: var(--text); border-color: var(--accent); }
.mc-petala-atual { color: var(--accent-hi); border-color: rgba(var(--accent-rgb), .55); }

@keyframes mc-brotar {
    from { opacity: 0; transform: translate(0, 0) scale(.35); }
    to   { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
}

/* Navegador sem cos()/sin() no CSS cai para um leque fixo de até seis
   pétalas. Perde a elegância do cálculo, não perde o menu. */
@supports not (width: calc(cos(45deg) * 10px)) {
    .mc-p0 { --x: -56px; --y:   0px; }
    .mc-p1 { --x: -48px; --y: -28px; }
    .mc-p2 { --x: -28px; --y: -48px; }
    .mc-p3 { --x:   0px; --y: -56px; }
    .mc-p4 { --x: -56px; --y: -56px; }
    .mc-p5 { --x: -92px; --y: -20px; }
}

/* O nome aparece ao lado no computador, onde há espaço sobrando. No
   celular sairia da tela: lá vale o ícone e o toque longo. */
.mc-petala-nome {
    position: absolute;
    right: calc(100% + 8px);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--pop-1);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 3px 9px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease;
}
.mc-petala:hover .mc-petala-nome { opacity: 1; }

@media (max-width: 780px) {
    .mc-leque { right: 12px; }
    .mc-fab, .mc-petala { width: 42px; height: 42px; font-size: 14px; }
    .mc-petala { --raio: 62px; }
    .mc-petala-nome { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-fab { transition: none; }
    .mc-petala {
        animation: none;
        opacity: 1;
        transform: translate(var(--x), var(--y));
    }
}