/* ══ STATUS — o story da casa (22/08/26, ordem do dono) ══════════════════════
   *"vamos diferenciar os de status com uma bolinha rosa mesclando com o nosso
   azul se transformando."*

   ── POR QUE O ANEL PRECISA SER OUTRO ──────────────────────────────────────
   A régua de rostos logo abaixo usa o anel AZUL: ela mostra quem postou hoje, e
   o clique abre um BiP. Este rail mostra quem tem STATUS, e o clique abre uma
   tela cheia que some em horas. Anéis iguais ensinariam que aquele círculo abre
   uma coisa — e metade das vezes abriria outra.

   O MOVIMENTO É INFORMAÇÃO, não enfeite: ele só existe em quem tem status NÃO
   VISTO (`.status-bolha--novo`). Visto tudo, o anel para e vira fio cinza. Sem
   isso tudo brilharia o tempo todo, e nada chamaria atenção. */

/* ── O TRILHO ÚNICO (22/08/26, ordem do dono) ──────────────────────────────
   *"não é para fazer uma segunda linha, é para estar em linha, uma única
   linha."*

   QUEM ROLA É O TRILHO, não os dois rails: com `display: contents`, as caixas
   deles somem do layout e as bolhas de ambos passam a ser filhas diretas daqui
   — uma linha só, um scroll só, e nenhum dos dois JS precisa saber que o outro
   existe. Fundir os dois no mesmo arquivo daria o mesmo resultado na tela e
   amarraria status e "quem postou hoje" para sempre.

   `:not([hidden])` é o detalhe que faz isso funcionar: `display: contents` num
   elemento escondido REVELARIA os filhos dele, porque a caixa que carregava o
   `display:none` deixou de existir. */
.feed-topo-rail {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    overflow-x: auto;
    padding: 8px 2px 6px;
    margin-bottom: 6px;
    scrollbar-width: none;
}

.feed-topo-rail::-webkit-scrollbar {
    display: none;
}

.feed-topo-rail > div:not([hidden]) {
    display: contents;
}

.status-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 4px 6px;
    margin-bottom: 10px;
    scrollbar-width: none;
}

.status-rail::-webkit-scrollbar {
    display: none;
}

/* A MESMA MEDIDA do rosto de conectados (68px / anel de 56): as bolhas dividem
   a linha agora, e duas alturas diferentes na mesma faixa leem como defeito. */
.status-bolha {
    flex: 0 0 auto;
    width: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--font);
}

/* O anel mora no PAI e o `conic-gradient` gira com ele. Uma borda comum não
   serviria: `border` aceita cor, não gradiente cônico — e o que o dono pediu é
   a cor SE TRANSFORMANDO ao redor do rosto. */
.status-bolha__anel {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 3px;
    background: var(--border);
}

/* O ANEL NÃO GIRA MAIS (22/08/26, dono: *"quem é sensível a movimentos vai
   ter vertigem — a borda vai mudando de rosa para azul em movimentos
   circulares suaves, como um fade in e out, as cores se misturando"*).

   O truque: DOIS gradientes cônicos com as cores em posições OPOSTAS (rosa
   onde o outro é azul), um por cima do outro, e só a OPACIDADE do de cima
   respira. No meio do fade os dois se somam e as cores se misturam; nas
   pontas, cada cor "viajou" para o lado do outro gradiente — o olho lê um
   movimento circular, mas nenhum pixel andou. A foto fica PARADA. */
.status-bolha--novo .status-bolha__anel {
    position: relative;
    background: conic-gradient(from 0deg, #E4405F, #4070B0, #E4405F);
}

.status-bolha--novo .status-bolha__anel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #4070B0, #E4405F, #4070B0);
    animation: statusAnelMistura 2.6s ease-in-out infinite alternate;
}

@keyframes statusAnelMistura {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.status-bolha__foto {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
    display: grid;
    place-items: center;
    border: 2px solid var(--surface);
}

.status-bolha__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.status-bolha__inicial {
    font-weight: 700;
    color: var(--text-2);
    font-size: 1.1rem;
}

/* O "+" tem clique PRÓPRIO: na foto abre os meus status, aqui publica um novo.
   Sem os dois destinos, quem já tem status nunca chegaria à janela de publicar. */
/* O "+" FICA POR CIMA DE TUDO (23/08/26, dono: *"quebrou o + do adicionar,
   acabou ficando atrás"*). A foto ganhou `z-index: 1` para passar à frente do
   `::before` do anel (a mistura de cores) — e, sem número próprio, o "+" que
   vem ANTES dela no empilhamento sumiu atrás. Camada declarada, defeito
   fechado: 2 é acima da foto e continua abaixo do visor. */
.status-bolha__mais {
    position: absolute;
    z-index: 2;
    right: -1px;
    bottom: -1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--orkut-bar);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid var(--surface);
}

.status-bolha__nome {
    font-size: 0.72rem;
    color: var(--text-2);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-bolha--novo .status-bolha__nome {
    color: var(--text-1);
    font-weight: 600;
}

/* ── O COMPOSITOR ────────────────────────────────────────────────────────── */

.status-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(10, 12, 16, 0.72);
    display: grid;
    place-items: center;
    padding: 20px;
    overflow-y: auto;
}

.status-modal__caixa {
    width: min(440px, 100%);
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 18px;
    max-height: 92vh;
    overflow-y: auto;
}

.status-modal__topo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.status-modal__topo h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-1);
}

/* O ícone da música é um BOTÃO COM ESTADO: sem faixa é contorno; com faixa
   acende e mostra o nome. Um ícone que não muda deixaria a pessoa sem saber se
   a música pegou. */
.status-modal__musica {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-2);
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    max-width: 160px;
}

.status-modal__musica.is-on {
    border-color: var(--accent);
    color: var(--accent);
}

.status-modal__musica span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-modal__x {
    background: none;
    border: 0;
    color: var(--text-3);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.status-modal__foto {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    max-height: 44vh;
    border-radius: var(--radius);
    border: 1px dashed var(--border);
    background: var(--surface-2);
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 12px;
}

.status-modal__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.status-modal__foto-vazia {
    color: var(--text-3);
    font-size: 0.9rem;
}

.status-modal__legenda {
    resize: none;
    margin-bottom: 14px;
}

.status-modal__rotulo {
    margin: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-modal__opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

/* MARCADA É PREENCHIDA, não só contornada: com cinco opções na linha, um
   contorno a mais some no meio dos outros quatro — e a pessoa precisa saber, de
   relance, quanto tempo o status dela vai viver. */
.status-pilula {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-1);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: var(--font);
}

.status-pilula.is-on {
    background: var(--orkut-bar);
    border-color: var(--orkut-bar);
    color: #fff;
    font-weight: 600;
}

.status-modal__erro {
    margin: 0 0 12px;
    color: var(--red);
    font-size: 0.85rem;
}

.status-modal__rodape {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ── O VISOR ─────────────────────────────────────────────────────────────── */

.status-visor {
    position: fixed;
    inset: 0;
    z-index: 3100;
    background: #000;
    display: grid;
    place-items: center;
    cursor: pointer;
}

/* FOTO INTEIRA (`contain`), como no feed: status é foto de celular, e preencher
   a tela cortaria a cabeça de alguém. */
.status-visor__foto {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.status-visor__topo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px 14px;
    background: linear-gradient(rgba(0, 0, 0, 0.75), transparent);
}

/* Os tracinhos contam QUANTOS são e ONDE estou — não quanto falta de tempo.
   Aqui o relógio é de quem postou (3h, 6h, 12h), não do visor: uma barra de 5
   segundos ensinaria uma pressa que esta rede não tem. */
.status-visor__tracos {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.status-visor__traco {
    flex: 1 1 0;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
}

.status-visor__traco.is-on {
    background: #fff;
}

.status-visor__linha {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* A VISUALIZAÇÃO ÚNICA É AVISADA, e no lugar mais visível que existe: quem está
   vendo precisa saber que aquilo não volta. Sem o aviso, a pessoa avança sem ler
   a legenda e perde o status para sempre — e a culpa pareceria do site. */
.status-visor__nota {
    color: #fff;
    font-size: 1.05rem;
}

.status-visor__unica {
    flex: 1 1 auto;
    color: #FFC978;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-visor__x {
    margin-left: auto;
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.status-visor__rodape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: #fff;
}

.status-visor__legenda {
    margin: 0 0 10px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.status-visor__dono {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
}

.status-visor__dono button {
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .status-bolha--novo .status-bolha__anel::before {
        animation: none;
    }
}

/* ── QUEM VIU (22/08/26) ──────────────────────────────────────────────────
   Painel que sobe do rodapé do visor, POR CIMA da foto. Não é outra página:
   a pessoa está no meio do próprio status e volta para ele — trocar de tela
   para ver quem viu faria perder o lugar. */
.status-quem {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 62%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    cursor: default;
}

.status-quem__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    color: var(--text-1);
    border-bottom: 1px solid var(--border);
}

.status-quem__x {
    background: none;
    border: 0;
    color: var(--text-3);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.status-quem__lista {
    overflow-y: auto;
    padding: 6px 8px 16px;
}

.status-quem__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius);
    color: var(--text-1);
    text-decoration: none;
}

.status-quem__item:hover {
    background: var(--surface-2);
}

.status-quem__item img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.status-quem__item span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.status-quem__item small {
    color: var(--text-3);
    font-size: 0.78rem;
}

/* "Ninguém viu ainda" é a RESPOSTA certa nos primeiros minutos — e é bem
   diferente de um espaço em branco, que se lê como tela quebrada. */
.status-quem__vazio {
    margin: 0;
    padding: 26px 12px;
    text-align: center;
    color: var(--text-3);
    font-size: 0.9rem;
}

.status-visor__dono button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}