/* =============================================================================
   Identidade visual "Workspace · Motiva" (carrega DEPOIS do app.css).

   - Fontes servidas pelo próprio Flask (a CSP bloqueia Google Fonts):
     Manrope (interface), Bricolage Grotesque (títulos), JetBrains Mono (horas/tags).
   - Cores: o tema escolhido no perfil ([data-theme] -> --dm-primary/secondary/
     accent + -rgb) dirige TUDO. Fundos, lateral, cartões, balões, campos e o
     "ao vivo" derivam dessas três cores, então trocar o tema muda o app inteiro.
     O padrão é a Motiva: azul Motiva, marinho do ícone e o ciano da onda do logo,
     sobre fundo preto neutro.
   ============================================================================= */

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 800; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------------------------------------------------------- */
:root:not([data-theme]), [data-theme="padrao"] {
    --dm-primary: #007BBB; --dm-primary-rgb: 0, 123, 187;
    --dm-secondary: #0E2156; --dm-secondary-rgb: 14, 33, 86;
    --dm-accent: #1EC8F2; --dm-accent-rgb: 30, 200, 242;
}
:root, [data-theme] {
    --f-ui: "Manrope", system-ui, sans-serif;
    --f-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, monospace;
    --display-track: -0.02em;

    /* superfícies: quase-preto tingido pela cor secundária do tema */
    --side:      color-mix(in oklab, var(--dm-secondary) 40%, #05070B);
    --dm-rail: var(--side); --dm-col: var(--side);
    --dm-main:   color-mix(in oklab, var(--dm-secondary) 26%, #0B0E13);
    --dm-raised: color-mix(in oklab, var(--dm-secondary) 30%, #141820);
    --tile:      color-mix(in oklab, var(--dm-secondary) 36%, #161B23);
    --input-bg:  color-mix(in oklab, var(--dm-secondary) 24%, #07090D);
    --page-bg: var(--side);
    --dm-bg: var(--side);
    --bubble-in:  color-mix(in oklab, var(--dm-secondary) 34%, #1A1F28);
    --bubble-out: var(--dm-primary);
    --composer-bg: var(--dm-raised);
    --card-bg: var(--dm-raised);

    /* linhas, realces e tons derivados */
    --line: rgba(var(--dm-fg-rgb), 0.09); --line-strong: rgba(var(--dm-fg-rgb), 0.22);
    --item-hover-bg: rgba(var(--dm-fg-rgb), 0.06);
    --item-active-bg: rgba(var(--dm-primary-rgb), 0.22);
    --soft-primary: rgba(var(--dm-primary-rgb), 0.16);
    --tone-primary: color-mix(in oklab, var(--dm-primary) 55%, white);
    --live: var(--dm-accent); --live-rgb: var(--dm-accent-rgb);
    --on-accent: #04121A;

    --r: 10px; --r-lg: 14px; --r-xl: 20px;
    --btn-radius: 10px; --ctrl-shape: 14px;
    --cta-bg: var(--dm-primary);
    --cta-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 8px 20px -12px rgba(var(--dm-primary-rgb), 0.95);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Padrão (Motiva): fundo PRETO neutro; a marca fica nos botões e destaques. */
:root:not([data-theme]), [data-theme="padrao"] {
    --side: #0B0E14;
    --dm-main: #10141B;
    --dm-raised: #171C25;
    --tile: #161B24;
    --input-bg: #0E1219;
    --bubble-in: #1A202B;
}
/* Claro: superfícies claras de verdade (o texto já segue --dm-fg-rgb). */
[data-theme="claro"] {
    --side:      color-mix(in oklab, var(--dm-secondary) 7%, #F2F4F7);
    --dm-main: #FFFFFF; --dm-raised: #FFFFFF;
    --tile:      color-mix(in oklab, var(--dm-secondary) 10%, #EBEEF2);
    --input-bg: #FFFFFF;
    --bubble-in: color-mix(in oklab, var(--dm-secondary) 6%, #F1F3F6);
    --tone-primary: var(--dm-primary);
    --on-accent: #FFFFFF;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* ---------- tipografia e base ------------------------------------------------ */
body, .btn, input, textarea, select, .form-control, .tooltip, .dropdown-menu { font-family: var(--f-ui) !important; }
body { background: var(--page-bg) !important; }
h1, h2, h3, h4, h5, h6, .h5, .h6, .chat-header-name, .channel-col-title, .auth-focus-title,
.profile-card h2, .guest-gate-card h1, .guest-gate-card h2, .call-stage-title {
    font-family: var(--f-display) !important; letter-spacing: var(--display-track);
}

/* ---------- lateral: a lista do contexto ------------------------------------ */
.side .channel-col-header {
    padding: 10px 16px 4px !important; border: 0 !important; box-shadow: none !important;
    font: 700 0.78rem var(--f-ui) !important; letter-spacing: 0;
}
.side .channel-col-title { font: inherit !important; color: rgba(var(--dm-fg-rgb), 0.55) !important; }
.side .channel-col-label { display: none; }
.channel-link { border-radius: var(--r) !important; padding-top: 8px !important; padding-bottom: 8px !important;
    transition: background-color .18s, color .18s; }
.channel-link:hover { background: var(--item-hover-bg) !important; }
.channel-link.active { background: var(--item-active-bg) !important; color: rgb(var(--dm-fg-rgb)) !important; box-shadow: none !important; }
.members-label, .members-section { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.78rem !important; opacity: 0.55; }
.rail-search, .form-control, .form-select {
    border-radius: var(--r) !important; background: var(--input-bg) !important;
    border: 1px solid var(--line) !important; color: inherit;
}
.presence-dot { box-shadow: 0 0 0 2px var(--side); }

/* ---------- conversa: largura de leitura + balões --------------------------- */
.chat-main { background: var(--dm-main); }
.chat-header {
    position: relative; padding: 14px 24px !important;
    border-bottom: 1px solid var(--line) !important; box-shadow: none !important; background: transparent;
}
.chat-header-name { font-size: 1.05rem; }
.chat-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--dm-primary), var(--dm-accent) 35%, transparent 65%); opacity: 0.5;
}
.chat-scroll > * { max-width: 860px; margin-left: auto !important; margin-right: auto !important; }
.channel-start-hash { display: none !important; }
.channel-start { border-bottom: 0 !important; text-align: center; padding-top: 28px !important; }
.channel-start .h5, .channel-start h5 { font-size: 1.15rem !important; opacity: 0.8; }

.msg { margin-top: 14px; padding: 2px 0 !important; background: transparent !important; gap: 10px; border-radius: var(--r); }
.msg.grouped { margin-top: 3px; }
.msg-header { gap: 8px; margin-bottom: 4px; }
.msg-author { font-size: 0.82rem; font-weight: 700; opacity: 0.85; }
/* nomes e títulos na cor de texto do tema (no claro o branco fixo sumia) */
.msg-author, .chat-header-name, .channel-start .h5, .channel-start h5 { color: rgb(var(--dm-fg-rgb)) !important; }
.msg-time { font-family: var(--f-mono) !important; font-size: 0.66rem !important; opacity: 0.65; }
.msg-body { max-width: min(560px, 78%); display: flex; flex-direction: column; align-items: flex-start; }
.msg-text {
    background: var(--bubble-in); padding: 9px 14px; border-radius: 4px 16px 16px 16px;
    border: 1px solid var(--line); line-height: 1.5;
}
.msg.grouped .msg-text { border-radius: 16px; }
/* minhas mensagens: à direita, na cor do tema, sem avatar nem nome */
.msg.mine { flex-direction: row-reverse; }
.msg.mine > .avatar, .msg.mine > img.avatar, .msg.mine > .avatar-spacer, .msg.mine .msg-author { display: none !important; }
.msg.mine .msg-body { align-items: flex-end; }
.msg.mine .msg-text {
    background: var(--bubble-out); color: #fff; border-color: transparent;
    border-radius: 16px 4px 16px 16px; box-shadow: 0 6px 18px -12px rgba(var(--dm-primary-rgb), 0.9);
}
.msg.mine .msg-text a { color: #fff; }
.msg.mine.grouped .msg-text { border-radius: 16px; }
.msg-body { flex: 0 1 auto; }

.composer {
    max-width: 860px; width: calc(100% - 48px); margin: 6px auto 22px !important;
    border-radius: 16px !important; padding: 8px 8px 8px 16px !important;
    border: 1px solid var(--line); background: var(--composer-bg);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9) !important;
}
.composer:focus-within { border-color: rgba(var(--dm-primary-rgb), 0.55); }

/* ---------- botões na cor do tema (texto sempre branco sobre a primária) ---- */
.btn-send, .composer-send { border-radius: var(--btn-radius) !important; background: var(--cta-bg) !important; border: 0 !important; color: #fff !important; }
.dm-call-btn, .btn-primary {
    background: var(--cta-bg) !important; border: 0 !important; border-radius: var(--btn-radius) !important;
    box-shadow: var(--cta-shadow); font-weight: 600; color: #fff !important;
}
.btn-primary:hover, .dm-call-btn:hover { filter: brightness(1.08); }
.btn-outline-secondary { border-radius: var(--btn-radius) !important; border-color: var(--line-strong) !important; color: inherit !important; }

/* ---------- pessoas e perfil ------------------------------------------------- */
.member-item { border-radius: var(--r); padding-top: 6px; padding-bottom: 6px; }
.profile-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.content-pane .profile-grid { max-width: 1000px; margin: 8px auto 0; gap: 18px; align-items: start; }

/* ---------- chamada: dock flutuante; "falando" = cor de destaque ------------ */
.call-stage-controls { background: transparent; border-top: 0 !important; padding-bottom: 18px !important; }
.call-stage-controls .stage-ctrl { background: var(--bubble-in); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.call-stage-controls .stage-ctrl:hover:not(.on):not(.has-board):not(.on-danger):not(.stage-leave) { background: var(--tile); }
/* estados ligados (a regra acima, mais nova, apagava o fundo e o ícone sumia) */
.call-stage-controls .stage-ctrl.on { background: #fff; color: #1c1f2b; }
.call-stage-controls .stage-ctrl.has-board { background: #ffd23f; color: #1c1f2b; }
.call-stage-controls .stage-ctrl.on-danger { background: #f23f42; color: #fff; }
.stage-ctrl { border-radius: var(--ctrl-shape) !important; }
.stage-ctrl.stage-leave { width: 64px; border-radius: var(--btn-radius) !important; background: #E5484D !important; color: #fff !important; }
.video-tile { border-radius: var(--r-lg) !important; }
.video-tile-local { outline-color: rgba(var(--dm-accent-rgb), 0.75) !important; }
.video-tile.speaking { outline: 2px solid var(--live) !important; outline-offset: -2px; box-shadow: 0 0 30px -8px rgba(var(--live-rgb), 0.75) !important; }
.guest-hands { border-color: rgba(var(--live-rgb), 0.45) !important; border-radius: var(--r-lg) !important; }
.guest-gate-card { border-radius: var(--r-xl) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; }

/* ---------- login: título grande + onda sonora sobre o horizonte ------------ */
body:has(.auth-focus) {
    background:
        radial-gradient(ellipse 70% 26% at 50% 100%, rgba(var(--dm-primary-rgb), 0.24), transparent 70%),
        radial-gradient(ellipse 30% 14% at 50% 100%, rgba(var(--live-rgb), 0.16), transparent 70%),
        repeating-linear-gradient(90deg, rgba(var(--dm-fg-rgb), 0.03) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg, rgba(var(--dm-fg-rgb), 0.03) 0 1px, transparent 1px 64px),
        var(--side) !important;
}
body:has(.auth-focus) .auth-blob { display: none; }
.auth-focus { max-width: 360px; }
.auth-focus-head { gap: 0.8rem !important; }
.auth-focus-title { font-size: 2.7rem !important; font-weight: 800 !important; }
.auth-focus-head::after {
    content: ""; display: block; width: 170px; height: 30px;
    background: repeating-linear-gradient(90deg, var(--live) 0 3px, transparent 3px 8px);
    -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 75%);
            mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 75%);
    animation: onda 1.6s linear infinite, pulso 2.4s ease-in-out infinite; opacity: 0.9;
}
@keyframes onda { to { background-position: 16px 0; } }
@keyframes pulso { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
.auth-focus-sub { color: rgba(var(--dm-fg-rgb), 0.58) !important; }
.auth-focus .btn-primary { padding: 0.7rem 1rem; }

/* ---------- Início: um cartão por servidor, com as chamadas ao vivo --------- */
.home-pane { width: 100%; box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: 32px 32px 48px;
    display: grid; gap: 22px; align-content: start; overflow-y: auto; }
.home-hello { margin: 0; font-weight: 800; font-size: 2rem; letter-spacing: -0.03em; color: rgb(var(--dm-fg-rgb)); }
.home-sub { margin: 4px 0 0; color: rgba(var(--dm-fg-rgb), 0.55); }
.home-bar { display: flex; padding: 10px; border-radius: var(--r-lg); background: var(--dm-raised); border: 1px solid var(--line); }
.home-search { width: min(340px, 100%); padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--line);
    background: var(--input-bg); color: inherit; font: 500 0.88rem var(--f-ui); }
.home-search:focus { outline: none; border-color: rgba(var(--dm-primary-rgb), .6); box-shadow: 0 0 0 4px rgba(var(--dm-primary-rgb), .14); }
.home-empty { margin: 0; color: rgba(var(--dm-fg-rgb), 0.5); }
.home-empty-card { padding: 28px; border-radius: var(--r-lg); border: 1px dashed var(--line-strong); color: rgba(var(--dm-fg-rgb), 0.6); }

.srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
.srv-card[hidden], .srv-call[hidden], .srv-none[hidden] { display: none !important; }
.srv-card {
    display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px;
    border-radius: var(--r-lg); background: var(--dm-raised); border: 1px solid var(--line);
    transition: border-color .2s, box-shadow .2s, transform .2s var(--dm-ease);
}
.srv-card:hover { border-color: rgba(var(--dm-primary-rgb), .35); box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .95); transform: translateY(-2px); }
.srv-card.is-live { border-color: rgba(var(--live-rgb), .35); }
.srv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.srv-tag { padding: 3px 8px; border-radius: 6px; background: rgba(var(--dm-primary-rgb), .14); color: var(--tone-primary);
    font: 700 0.7rem var(--f-mono); letter-spacing: .06em; }
.srv-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; color: rgba(var(--dm-fg-rgb), 0.45); background: rgba(var(--dm-fg-rgb), .08); }
.srv-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.srv-card.is-live .srv-live { color: var(--live); background: rgba(var(--live-rgb), .14); }
.srv-card.is-live .srv-live::before { animation: srv-pulse 1.4s ease-in-out infinite; }
@keyframes srv-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--live-rgb), .6); } 50% { box-shadow: 0 0 0 5px rgba(var(--live-rgb), 0); } }
.srv-nome { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.015em; color: rgb(var(--dm-fg-rgb)); text-decoration: none; }
.srv-nome:hover { color: rgb(var(--dm-fg-rgb)); text-decoration: underline; text-underline-offset: 3px; }
.srv-desc { font-size: 0.82rem; color: rgba(var(--dm-fg-rgb), 0.5); }

.srv-calls { display: grid; gap: 8px; margin: 12px 0 4px; min-height: 44px; align-content: start; }
.srv-none { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r);
    border: 1px dashed var(--line-strong); font-size: 0.8rem; color: rgba(var(--dm-fg-rgb), 0.4); }
.srv-call { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r);
    background: rgba(var(--live-rgb), .07); border: 1px solid rgba(var(--live-rgb), .22); }
.srv-call-ico { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
    background: rgba(var(--live-rgb), .16); color: var(--live); }
.srv-call-info { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.srv-call-info b { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(var(--dm-fg-rgb)); }
.srv-call-n { font-size: 0.72rem; color: rgba(var(--dm-fg-rgb), 0.55); }
/* participantes viram uma pilha de avatares (o nome fica no title do voice.js) */
.srv-call .voice-users { display: flex; flex-direction: row-reverse; justify-content: flex-end; padding: 0 !important; margin: 0 !important; }
.srv-call .voice-user { padding: 0 !important; margin: 0 0 0 -8px !important; background: none !important; }
.srv-call .voice-user:last-child { margin-left: 0 !important; }
/* Chamada cheia: os avatares descem para uma linha própria (o "Em chamada ·
   N pessoas" não é mais espremido), no máximo 5 visíveis + "+N" (data-mais,
   posto pelo chat.js). Com row-reverse, o ::before fica na ponta direita. */
.srv-call { flex-wrap: wrap; row-gap: 8px; }
.srv-call .voice-users { flex: 1 0 100%; order: 9; padding-left: 38px !important; }
.srv-call .voice-user:nth-child(n+6) { display: none !important; }
.srv-call .voice-user:nth-child(5) { margin-left: 0 !important; }
.srv-call .voice-users[data-mais]::before {
    content: attr(data-mais); align-self: center; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
    background: rgba(var(--dm-fg-rgb), .1); color: rgba(var(--dm-fg-rgb), .75); font-size: 0.72rem; font-weight: 700;
}
.srv-call .voice-user > :not(.avatar):not(img) { display: none !important; }
.srv-call .voice-user .avatar, .srv-call .voice-user img { width: 24px !important; height: 24px !important; font-size: .55rem !important;
    border: 2px solid var(--dm-raised); border-radius: 50%; }
.srv-call-join { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: var(--btn-radius);
    background: var(--live); color: var(--on-accent) !important; font-weight: 800; font-size: 0.78rem; text-decoration: none; }
.srv-call-join:hover { filter: brightness(1.06); }
.srv-call-join .voice-timer { display: none; }

.srv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.srv-chans { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.srv-chan { padding: 3px 8px; border-radius: 6px; background: rgba(var(--dm-fg-rgb), .08); color: rgba(var(--dm-fg-rgb), 0.75);
    font-size: 0.76rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.srv-chan:hover { background: rgba(var(--dm-fg-rgb), .16); color: rgb(var(--dm-fg-rgb)); }
.srv-chan-mais { font-size: 0.74rem; color: rgba(var(--dm-fg-rgb), 0.45); align-self: center; }
.srv-open { flex: none; font-size: 0.8rem; font-weight: 700; color: var(--tone-primary); text-decoration: none; }
.srv-open:hover { color: rgb(var(--dm-fg-rgb)); }
/* Servidor aberto: cartões de sala (channels/list.html) */
.sala-card .srv-calls { margin-top: 10px; }
.sala-card .srv-top { min-height: 24px; }  /* texto sem selo alinha com os de voz */
.sala-card .voice-timer { display: none; }  /* o cronômetro fica só na lateral */
.sala-card .srv-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srv-tag.sala-tag-texto { background: rgba(var(--dm-fg-rgb), .08); color: rgba(var(--dm-fg-rgb), .7); }
.srv-live.sala-mencao { color: #ff8a8d; background: rgba(229, 72, 77, .16); }
.srv-live.sala-mencao::before { content: "@"; width: auto; height: auto; background: none; }
.srv-live.sala-mencao[hidden] { display: none; }
.sala-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-right: 110px; }
.sala-acoes { display: flex; gap: 8px; }
.sala-acao {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--btn-radius);
    border: 1px solid var(--line-strong); color: rgba(var(--dm-fg-rgb), .85); font: 600 0.84rem var(--f-ui); text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.sala-acao:hover { background: var(--item-hover-bg); color: rgb(var(--dm-fg-rgb)); }
.sala-acao svg { transition: transform .4s var(--ease-fluida, ease); }
.sala-acao:hover svg { transform: rotate(45deg); }
.sala-acao-nova { border-color: transparent; background: rgb(var(--dm-primary-rgb)); color: #fff; }
.sala-acao-nova:hover { background: rgb(var(--dm-primary-rgb)); color: #fff; filter: brightness(1.08); }
.sala-acao-nova:hover svg { transform: rotate(90deg); }
@media (max-width: 760px) { .sala-top { padding-right: 0; } }

/* ---------- Movimento: entradas fluidas, em cascata de opacidade -------------
   Curva "expo out" (rápida no começo, desacelera longa no fim, sem ultrapassar).
   O bloco chega deslizando (16px + leve escala + desfoque que some) e, DENTRO
   dele, as partes acendem em cascata de opacidade: título, texto, conteúdo,
   rodapé. O histórico também acende em cascata, de cima para baixo, nas últimas
   14 mensagens (as que estão na tela; --c = posição entre elas, no _timeline;
   as mais antigas aparecem já no início). Atrasos limitados para lista longa não escorrer. Preenchimento
   'backwards': ao terminar, a animação solta o transform (o hover continua).
   prefers-reduced-motion continua zerando tudo (app.css). */
:root {
    --ease-fluida: cubic-bezier(0.16, 1, 0.3, 1);
    --t-bloco: 0.85s;       /* blocos e cartões */
    --t-item: 0.7s;         /* itens de lista e partes de dentro */
    --passo: 55ms;          /* intervalo da cascata */
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px) scale(0.985); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: none; }
}
@keyframes messageIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); filter: blur(3px); }
    to   { opacity: 1; transform: none; filter: none; }
}
@keyframes entraLado {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes suaveFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes acende { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* blocos da área principal */
.channel-start, .profile-card, .content-pane, .welcome-pane, .dm-pane, .chat-scroll {
    animation: fadeInUp var(--t-bloco) var(--ease-fluida) backwards;
}
.home-pane { animation: none; }
.chat-header { animation: suaveFade 0.6s var(--ease-fluida) backwards; }
.profile-card:nth-child(2) { animation-delay: calc(var(--passo) * 1.5); }
.profile-card:nth-child(3) { animation-delay: calc(var(--passo) * 3); }
.profile-card:nth-child(n+4) { animation-delay: calc(var(--passo) * 4.5); }

/* topo do Início e das Conversas: saudação, subtítulo e busca acendem em sequência */
.home-hello, .home-sub, .home-bar, .dm-panel-title, .dm-vazio {
    animation: acende var(--t-item) var(--ease-fluida) backwards;
}
.home-sub, .dm-vazio { animation-delay: var(--passo); }
.home-bar { animation-delay: calc(var(--passo) * 2); }

/* boas-vindas do servidor: ícone, nome e texto em sequência */
.welcome-pane > * { animation: acende var(--t-item) var(--ease-fluida) backwards; }
.welcome-pane > :nth-child(2) { animation-delay: calc(var(--passo) * 1.5); }
.welcome-pane > :nth-child(n+3) { animation-delay: calc(var(--passo) * 3); }

/* histórico: cascata de opacidade de cima para baixo nas mensagens visíveis */
.chat-scroll { animation-name: suaveFade; }
.msg {
    animation: acende var(--t-item) var(--ease-fluida) backwards;
    animation-delay: calc(var(--c, 0) * 45ms);
}
.msg-in { animation: messageIn 0.7s var(--ease-fluida) backwards; animation-delay: 0ms; }

/* listas (canais, conversas, pessoas): deslizam da esquerda em cascata (até o 10º) */
.channel-link, .voice-channel, .member-item, .dm-link {
    animation: entraLado var(--t-item) var(--ease-fluida) backwards;
    animation-delay: calc(min(var(--i, 0), 10) * var(--passo));
}
.voice-user { animation: entraLado 0.55s var(--ease-fluida) backwards; }
.voice-panel { animation: fadeInUp 0.7s var(--ease-fluida) backwards; }
/* painel "Voz conectada" logo abaixo do perfil: cartão, não faixa */
.side > .voice-panel {
    flex: none; margin: 8px 0 0; border-radius: var(--r, 10px);
    border: 1px solid rgba(31, 157, 85, 0.3); border-top-color: rgba(31, 157, 85, 0.3);
}
.side > .rail-foot { flex: none; }

/* cartões do Início: cascata entre cartões e, dentro de cada um, as partes */
.srv-card { --d: 160ms; animation: fadeInUp var(--t-bloco) var(--ease-fluida) backwards; animation-delay: var(--d); }
.srv-card:nth-child(2) { --d: 250ms; }
.srv-card:nth-child(3) { --d: 340ms; }
.srv-card:nth-child(4) { --d: 430ms; }
.srv-card:nth-child(n+5) { --d: 520ms; }
.srv-card > * { animation: acende var(--t-item) var(--ease-fluida) backwards; }
.srv-card > :nth-child(1) { animation-delay: calc(var(--d) + 80ms); }
.srv-card > :nth-child(2) { animation-delay: calc(var(--d) + 80ms + var(--passo)); }
.srv-card > :nth-child(3) { animation-delay: calc(var(--d) + 80ms + var(--passo) * 2); }
.srv-card > :nth-child(4) { animation-delay: calc(var(--d) + 80ms + var(--passo) * 3); }
.srv-card > :nth-child(n+5) { animation-delay: calc(var(--d) + 80ms + var(--passo) * 4); }

/* "Pessoas" em telas sem cabeçalho: flutua no canto superior direito */
.people-btn.people-float {
    position: absolute; top: 14px; right: 18px; z-index: 6; margin: 0;
    background: var(--dm-raised); box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.9);
}

/* ---------- Conversas: lista à esquerda, conversa à direita ---------------- */
.chat-main { position: relative; }
.dm-split { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }

/* painel da lista */
.dm-panel {
    display: flex; flex-direction: column; min-height: 0; min-width: 0;
    background: color-mix(in oklab, var(--dm-main) 55%, var(--dm-raised));
    border-right: 1px solid var(--line);
}
.dm-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 16px 14px 20px; }
.dm-panel-title {
    margin: 0; font-family: var(--f-display); font-size: 1.45rem; font-weight: 700;
    letter-spacing: var(--display-track); color: rgb(var(--dm-fg-rgb));
}
.dm-panel-act {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid rgba(var(--dm-primary-rgb), 0.3); background: var(--soft-primary); color: var(--tone-primary);
    cursor: pointer; transition: background-color .15s, transform .15s;
}
.dm-panel-act:hover { background: rgba(var(--dm-primary-rgb), 0.26); }
.dm-panel-act:active { transform: scale(0.95); }
.dm-panel-act:focus-visible, .dm-filtro:focus-visible, .dm-link:focus-visible, .dm-icon-btn:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }

.dm-busca { position: relative; display: block; margin: 0 16px; }
.dm-busca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(var(--dm-fg-rgb), 0.45); pointer-events: none; }
.dm-busca input {
    width: 100%; padding: 9px 12px 9px 36px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--input-bg); color: rgb(var(--dm-fg-rgb));
    font: 500 0.86rem var(--f-ui); outline: none; transition: border-color .15s, box-shadow .15s;
}
.dm-busca input::placeholder { color: rgba(var(--dm-fg-rgb), 0.4); }
.dm-busca input:focus { border-color: rgba(var(--dm-primary-rgb), 0.7); box-shadow: 0 0 0 3px rgba(var(--dm-primary-rgb), 0.16); }

.dm-filtros { display: flex; gap: 6px; padding: 12px 16px 6px; }
.dm-filtro {
    padding: 5px 12px; border-radius: 999px; border: 1px solid transparent; background: transparent;
    color: rgba(var(--dm-fg-rgb), 0.6); font: 600 0.8rem var(--f-ui); cursor: pointer;
    transition: background-color .15s, color .15s;
}
.dm-filtro:hover { background: var(--item-hover-bg); color: rgb(var(--dm-fg-rgb)); }
.dm-filtro.on { background: var(--soft-primary); color: var(--tone-primary); border-color: rgba(var(--dm-primary-rgb), 0.25); }

.dm-list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 16px;
}
.dm-sec-label {
    display: flex; align-items: center; gap: 8px; padding: 12px 12px 6px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: rgba(var(--dm-fg-rgb), 0.42);
}
.dm-requests-section { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.dm-requests-section[hidden], .dm-link[hidden], .dm-filtro-vazio[hidden] { display: none; }
.dm-req-count { padding: 1px 7px; border-radius: 999px; background: var(--soft-primary); color: var(--tone-primary); letter-spacing: 0; }
.dm-list .channel-empty, .dm-filtro-vazio { padding: 10px 12px; margin: 0; font-size: 0.85rem; color: rgba(var(--dm-fg-rgb), 0.5); }

/* item da conversa */
.dm-link {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 10px 11px 12px;
    border-radius: 12px; color: rgb(var(--dm-fg-rgb)); text-decoration: none;
    transition: background-color .15s;
}
.dm-link:hover { background: var(--item-hover-bg); color: rgb(var(--dm-fg-rgb)); }
.dm-link.active { background: var(--item-active-bg); }
.dm-link.active::before {
    content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px;
    background: var(--tone-primary);
}
.dm-link .avatar, .dm-link .presence-wrap { flex: none; }
.dm-link .avatar { width: 42px; height: 42px; font-size: 0.82rem; }
.dm-group-avatar { display: grid !important; place-items: center; border-radius: 50%; background: var(--tile) !important; color: var(--tone-primary) !important; }
.dm-item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dm-item-top, .dm-item-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dm-item .channel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 0.9rem; }
.dm-time { flex: none; font-size: 0.72rem; color: rgba(var(--dm-fg-rgb), 0.45); font-variant-numeric: tabular-nums; }
.dm-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: rgba(var(--dm-fg-rgb), 0.55); }
.dm-link.has-unread .dm-time { color: var(--tone-primary); font-weight: 600; }
.dm-link.has-unread .dm-preview { color: rgba(var(--dm-fg-rgb), 0.85); }
.dm-count {
    flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: grid; place-items: center; background: var(--dm-primary); color: #fff;
    font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dm-link .dm-tag { flex: none; }
.dm-link.dm-request { background: rgba(var(--dm-primary-rgb), 0.06); }

/* lado da conversa */
.dm-thread { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dm-head { gap: 12px !important; padding: 14px 20px !important; min-height: 68px; }
.dm-head > .presence-wrap .avatar, .dm-head > .avatar { width: 40px; height: 40px; font-size: 0.8rem; }
.dm-head-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-head-linha { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dm-head .chat-header-name { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.dm-head-tag {
    flex: none; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600;
    background: rgba(var(--dm-fg-rgb), 0.07); color: rgba(var(--dm-fg-rgb), 0.65); text-transform: lowercase;
}
.dm-head-status { font-size: 0.78rem; color: rgba(var(--dm-fg-rgb), 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-head-status[data-presence="online"] .presence-label { color: var(--tone-primary); }
.dm-head-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
/* "Iniciar chamada" no MESMO tamanho do "Pessoas" e logo à esquerda dele */
.dm-head .dm-call-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    background: var(--soft-primary) !important; color: var(--tone-primary) !important;
    border: 1px solid rgba(var(--dm-primary-rgb), 0.3) !important; box-shadow: none;
    font: 600 0.82rem var(--f-ui);
}
.dm-head .dm-call-btn svg { width: 16px; height: 16px; }
.dm-head .dm-head-acoes ~ .people-btn { margin-left: -4px; }  /* 8px de distância, como entre as ações */
.dm-head .dm-call-btn:hover { background: rgba(var(--dm-primary-rgb), 0.26) !important; filter: none; }
.dm-icon-btn {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 0;
    background: none; color: rgba(var(--dm-fg-rgb), 0.6); cursor: pointer; transition: background-color .15s, color .15s;
}
.dm-icon-btn:hover { background: var(--item-hover-bg); color: rgb(var(--dm-fg-rgb)); }
.dm-icon-perigo:hover { background: rgba(242, 63, 66, 0.12); color: #f87171; }

/* conversa: separador de dia, hora dentro do balão, sem nome/avatar no 1:1 */
.msg-dia { display: flex; justify-content: center; margin: 18px auto 6px !important; }
.msg-dia span {
    padding: 4px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
    background: rgba(var(--dm-fg-rgb), 0.06); color: rgba(var(--dm-fg-rgb), 0.6);
}
.msg-stamp { display: none; }
.dm-thread .msg-stamp {
    display: block; margin: 3px -4px -3px 18px; text-align: right;
    font-size: 0.66rem; font-variant-numeric: tabular-nums; opacity: 0.55;
}
.dm-thread .msg.mine .msg-stamp { opacity: 0.75; }
.dm-thread .msg-time { display: none; }
.dm-thread .msg.mine .msg-header { display: none; }
[data-thread="dm"] .msg-header,
[data-thread="dm"] .msg > .avatar, [data-thread="dm"] .msg > img.avatar, [data-thread="dm"] .msg > .avatar-spacer { display: none !important; }
.dm-thread .msg:not(.grouped) { margin-top: 10px; }
.dm-thread .composer { margin-bottom: 8px !important; }
.composer-hint {
    display: flex; justify-content: space-between; gap: 12px;
    width: calc(100% - 48px); max-width: 860px; margin: 0 auto 14px;
    font-size: 0.7rem; color: rgba(var(--dm-fg-rgb), 0.38);
}
.composer-hint-priv { display: inline-flex; align-items: center; gap: 5px; }

/* sem conversa aberta */
.dm-thread-vazia { display: grid; place-items: center; padding: 32px; }
.dm-vazio { max-width: 340px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dm-vazio-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--soft-primary); color: var(--tone-primary); margin-bottom: 6px; }
.dm-vazio-titulo { margin: 0; font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; letter-spacing: var(--display-track); color: rgb(var(--dm-fg-rgb)); }
.dm-vazio-sub { margin: 0 0 8px; font-size: 0.88rem; color: rgba(var(--dm-fg-rgb), 0.55); text-wrap: balance; }

/* Canal de texto: "← Servidor" volta aos cartões de salas (channels/view.html) */
.chat-back {
    flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 180px; margin-right: 6px;
    padding: 5px 11px 5px 8px; border-radius: 999px; border: 1px solid var(--line-strong);
    color: rgba(var(--dm-fg-rgb), .75); font: 600 0.8rem var(--f-ui); text-decoration: none;
    transition: background-color .15s, color .15s, border-color .15s;
}
.chat-back svg { flex: none; transition: transform .2s var(--ease-fluida, ease); }
.chat-back-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-back:hover { background: var(--item-hover-bg); color: rgb(var(--dm-fg-rgb)); border-color: rgba(var(--dm-primary-rgb), .35); }
.chat-back:hover svg { transform: translateX(-3px); }
.chat-back:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
@media (max-width: 760px) { .chat-back { padding: 6px 8px; } .chat-back-nome { display: none; } }

/* "voltar" à lista: só no celular (no computador a lista está ao lado) */
.dm-back {
    display: none; position: absolute; left: 12px; bottom: 16px; z-index: 5;
    width: 42px; height: 42px; place-items: center; border-radius: 14px;
    background: var(--dm-raised); border: 1px solid var(--line-strong); color: rgb(var(--dm-fg-rgb));
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.9); transition: background-color .15s, transform .15s;
}
.dm-back:hover { background: var(--item-active-bg); color: rgb(var(--dm-fg-rgb)); transform: translateX(-2px); }
.dm-back:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }

@media (max-width: 780px) {
    .composer { width: auto !important; margin: 6px 12px 14px !important; }
    /* uma coisa de cada vez: a lista OU a conversa */
    .dm-split { grid-template-columns: minmax(0, 1fr); }
    .dm-split.has-thread .dm-panel { display: none; }
    .dm-split:not(.has-thread) .dm-thread { display: none; }
    .dm-panel { border-right: 0; }
    .dm-panel-top { padding-left: 64px; padding-right: 70px; }  /* botões da lateral e de Pessoas */
    .dm-back { display: grid; }
    .dm-thread .composer { margin-left: 64px !important; }
    .composer-hint { display: none; }
    .dm-head .dm-call-btn span { display: none; }
    .dm-head .dm-call-btn { padding: 6px 9px; }  /* igual ao Pessoas só com ícone */
    /* abre espaço para o botão da lateral (#channel-toggle, fixo à esquerda) */
    .chat-header { padding-left: 60px !important; padding-right: 12px !important; }
    .msg-body { max-width: 86%; }
    .home-pane { padding: 72px 16px 32px; }
    .home-hello { font-size: 1.6rem; }
    .content-pane { padding: 72px 16px 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-focus-head::after, .srv-card.is-live .srv-live::before { animation: none; }
    .srv-card, .srv-card:hover { transition: none; transform: none; }
}