:root {
  /* ===== Tema padrão: T_TECH (manual da marca v1; T_ROOM é produto da casa, destaque Azul Neon) =====
     Ink #0A1017 fundo · Steel #16212B cartão · Line #243040 borda · Cloud #E8F1F7 texto · Muted #8A9AA8
     Azul Neon #00B2FF primária · Glow #6EE2FF · Deep #0057D6 · Lucro #19C37D · Perda #FF5A6A · Ouro #F0B429 */
  --bg: #0a1017; --bg-2: #0d151d; --surface: #16212b; --surface-2: #1c2836; --surface-3: #243040; --surface-4: #2e3c4e;
  --border: #243040; --border-2: #2f3f52; --text: #e8f1f7; --text-soft: #c2d0da; --muted: #8a9aa8;
  --accent: #00b2ff; --accent-hover: #6ee2ff; --accent-2: #6ee2ff; --accent-text: #7fd6ff; --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);
  --on-accent: #04121b; --danger: #e12846; --danger-hover: #f04361; --danger-text: #ff8f99; /* 28/10: perigo = o do programa (#e12846; texto separado em --danger-text) */ --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent);
  --ok: #19c37d; --ok-text: #6ee7a8; --warn: #f0b429; --neon: #6ee2ff; --violet: #8f7bff; --violet-text: #b5a8ff;
  --deep: #0057d6;   /* base do gradiente da marca (selos e realces) */
  --tint: #ffffff; --glass: color-mix(in srgb, var(--surface) 80%, transparent); --glass-strong: color-mix(in srgb, var(--bg) 86%, transparent);
  --stage-bg: #070c12; --hero-glow-1: color-mix(in srgb, var(--accent) 55%, transparent); --hero-glow-2: color-mix(in srgb, var(--accent-2) 35%, transparent);
  --radius: 16px; --radius-sm: 10px; --shadow: 0 18px 50px rgba(0, 0, 0, .45); --shadow-sm: 0 6px 18px rgba(0, 0, 0, .28);
  --font: "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Chakra Petch", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  /* ===== escala ÚNICA de botões (24/10/2026): app, pré-entrada, reunião, diálogos, T_CHAT, T_FEED, admin, editor do T_CARD, T_ WORLD =====
     padrão 28 (letra 13, ícone 15) · destaque 32 (só a ação principal da tela) · compacto 24 (ação por item de lista) · só ícone = quadrado do mesmo tamanho.
     Cartão público (cartao.html) tem escala própria (botões grandes de propósito). Celular/toque: bloco "alvo de toque" mais abaixo. */
  --h-btn: 28px; --h-btn-lg: 32px; --h-btn-sm: 24px;
  --f-btn: 13px; --f-btn-lg: 13.5px; --f-btn-sm: 12.5px;
  --i-btn: 15px; --i-btn-lg: 16px; --i-btn-sm: 14px; --i-solo: 16px;
  --h-item: 32px;     /* item de menu, popover e navegação lateral */
  --h-ctrl: 36px;     /* barra de mídia da reunião (.ctrl): um tamanho só */
  --h-campo: 32px;    /* campo de texto sozinho (em linha com botão vale --h-btn) */
  --h-top: var(--h-btn);  /* botões do topo = padrão */
  --alvo-toque: 44px; /* mínimo em celular/toque (área, não o desenho) */
  --accent-fim: #0057d6;  /* ponto final do degradê da marca (#6ee2ff → #00b2ff → #0057d6); cada tema troca */
  --accent-fim-botao: #1977ff;  /* 02/11 (D60): ponto final do degradê SÓ do botão primário, mais claro que o da marca: o texto escuro (--on-accent) sobre o #0057d6 dava 3,0:1; sobre este, 4,6:1 no pior ponto (AA). t_164 mede */
  --fechar: #ff4d6a; --fechar-fundo: #e12846;   /* 28/10: X de fechar (o mesmo vermelho do programa) */
  --danger-icon: #ff5c75;   /* 28/10: ícone/ponto de estado vermelho sobre superfície escura. #e12846 dava 2,92:1 sobre --surface-3 (#243040); #ff5c75 dá 4,48:1 ali e >= 3,45:1 sobre --surface-4 de todos os temas escuros (mínimo 3:1) */
  --grad-primario: linear-gradient(135deg, var(--accent-hover), var(--accent) 55%, var(--accent-fim));
  --grad-botao: linear-gradient(135deg, var(--accent-hover), var(--accent) 55%, var(--accent-fim-botao));   /* botão primário (.btn-primary, .icon-btn.primary): texto AA em todo o degradê */
  color-scheme: dark;
}
[data-theme="terminal"] {
  /* Terminal Trader: grafite com verde de mesa de operação */
  --bg: #07090a; --bg-2: #0c0f10; --surface: #121617; --surface-2: #192022; --surface-3: #222b2d; --surface-4: #2c3739;
  --border: #212a2c; --border-2: #2f3b3e; --text: #e8f0ec; --text-soft: #c3d0ca; --muted: #85958f;
  --accent-fim-botao: #0f8f5e; --accent-fim: #0d7f53; --accent: #19c37d; --accent-hover: #34d994; --accent-2: #f5b84a; --accent-text: #86efbd; --neon: #3cf2a0;
  --stage-bg: #08100d;
}
[data-theme="oceano"] {
  /* Oceano: azul profundo com ciano */
  --bg: #03101a; --bg-2: #061724; --surface: #0a1f2f; --surface-2: #0f2a3d; --surface-3: #16364c; --surface-4: #1e445d;
  --border: #14314a; --border-2: #1f4462; --text: #e6f4fb; --text-soft: #bfdcea; --muted: #7fa3b8;
  --accent-fim-botao: #0483c9; --accent-fim: #0369a1; --accent: #0ea5e9; --accent-hover: #38bdf8; --accent-2: #22d3ee; --accent-text: #7dd3fc; --neon: #67e8f9;
  --stage-bg: #041521;
}
[data-theme="aurora"] {
  /* Aurora: violeta e magenta */
  --bg: #0b0714; --bg-2: #110b1d; --surface: #181027; --surface-2: #211733; --surface-3: #2c1f44; --surface-4: #382955;
  --border: #2a1f3f; --border-2: #3b2c57; --text: #f3eefc; --text-soft: #d7cbee; --muted: #9c8fb8;
  --accent-fim-botao: #9462e3; --accent-fim: #6d28d9; --accent: #a855f7; --accent-hover: #c084fc; --accent-2: #ec4899; --accent-text: #d8b4fe; --neon: #f0abfc;
  --stage-bg: #0e0918;
}
[data-theme="claro"] {
  /* Claro: fundo branco para ambientes iluminados */
  --bg: #f4f6fb; --bg-2: #eceff6; --surface: #ffffff; --surface-2: #f2f4f9; --surface-3: #e5e9f2; --surface-4: #d8deea;
  --border: #dfe3ec; --border-2: #cbd2e0; --text: #0f172a; --text-soft: #334155; --muted: #5d6679;
  --accent-fim-botao: #2338c9; --accent-fim: #2338c9; --accent: #3b5bfd; --accent-hover: #2946e8; --accent-2: #0d9488; --accent-text: #3150f0; --neon: #0284c7;
  --ok: #16a34a; --ok-text: #15803d; --warn: #d97706; --danger: #e12846; --danger-hover: #c01d3a; --danger-text: #be123c;
  --fechar: #e12846; --fechar-fundo: #e12846; --danger-icon: #e12846;   /* claro: #e12846 dá 3,76:1 sobre --surface-3 */
  --violet: #7c3aed; --violet-text: #6d28d9; --tint: #0f172a;
  --on-accent: #ffffff;   /* texto sobre o azul do Claro: o escuro padrão dava 3,7:1 (t_164); o branco dá 5:1 */
  --glass: color-mix(in srgb, var(--branco) 86%, transparent); --glass-strong: color-mix(in srgb, var(--branco) 90%, transparent);
  --stage-bg: #e8ecf4; --shadow: 0 18px 44px rgba(15, 23, 42, .12); --shadow-sm: 0 6px 16px rgba(15, 23, 42, .08);
  color-scheme: light;
}
/* cores FIXAS (iguais em todos os temas): trocam os hex soltos que havia nas regras (decisão 51). Cor que muda com o tema usa as variáveis acima. */
:root {
  --branco: #fff;   /* branco fixo (não muda com o tema; --tint e --on-accent mudam) */
  --preto: #000;   /* preto fixo (máscaras e sombras) */
  --vip: #f5b84a;   /* ouro do T_ VIP */
  --vip-claro: #fbbf24;   /* início do degradê dourado dos botões VIP */
  --vip-fim: #f59e0b;   /* fim do degradê dourado (VIP, cotação, canal) */
  --on-vip: #1a1205;   /* texto sobre o dourado */
  --vip-brilho: #fde68a;   /* brilho da coroa VIP */
  --vip-sombra: #d97706;   /* fim do degradê da coroa VIP */
  --vip-tag: #fcd34d;   /* etiqueta "visível" */
  --hb-fundo: #1a1204;   /* fundo do contador da mão levantada */
  --tag-lock: #ffc56b;   /* texto da etiqueta de sala trancada */
  --ambar-escuro: #92400e;   /* texto de aviso no tema Claro */
  --vela-alta: #22c55e;   /* logo T: corpo da vela de alta */
  --vela-baixa: #f43f5e;   /* logo T: corpo da vela de baixa */
  --vela-alta-pavio: #4ade80;   /* logo T: pavio de alta */
  --vela-baixa-pavio: #fb7185;   /* logo T: pavio de baixa */
  --palco-escuro: #07080c;   /* fundo de vídeo e pré-visualização */
  --papel: #fbfbf8;   /* fundo do quadro branco */
  --sw-bolinha: #cfd4df;   /* bolinha do interruptor */
  --on-neon: #001018;   /* texto sobre o neon */
  --on-ok: #03170a;   /* texto sobre o verde (contador da mão) */
  --on-ok-nav: #04130b;   /* texto sobre o verde (selo ao vivo do menu) */
  --controle-remoto: #ff3d8b;   /* rosa do controle remoto (ponteiro, contorno, clique) */
  --estrela: #f5b301;   /* estrelas da avaliação */
  --azul-neon: #00b2ff;   /* Azul Neon da marca, fixo (--accent muda com o tema) */
  --roxo-grupo: #a855f7;   /* roxo de grupo e de sala */
  --roxo-fim: #7c3aed;   /* fim do degradê roxo */
  --tick-lida: #34b7f1;   /* tique azul de mensagem lida */
  --anx-azul: #3b82f6;   /* ícone de anexo azul */
  --anx-roxo: #8b5cf6;   /* ícone de anexo roxo */
  --anx-rosa: #ec4899;   /* ícone de anexo rosa */
  --anx-verde: #10b981;   /* ícone de anexo verde */
  --laranja-fim: #ea580c;   /* fim do degradê da cotação */
  --vermelho-fim: #ef4444;   /* fim do degradê do canal */
  --magenta: #d946ef;   /* fim do degradê dos recados */
  --av-padrao-a: #3b4a78;   /* avatar padrão: início do degradê */
  --av-padrao-b: #2a6b73;   /* avatar padrão: fim do degradê */
  --marca-fundo-a: #151c38;   /* fundo escuro da marca: início */
  --marca-fundo-b: #070a15;   /* fundo escuro da marca: fim */
  --tx-sv-fundo: #111;   /* fundo da lista de transmissão */
  --fundo-video: #0b0e13;   /* fundo do vídeo na sala (compartilhamento, tela cheia, câmera em destaque) */
  --fundo-balao: #1b2030;   /* fundo do balão de aviso da sala (reserva de --surface-2) */
  --avatar-tile: #1d2330;   /* centro do degradê do avatar do quadro sem câmera */
  --parar-hover: #dc2626;   /* botão 'parar de compartilhar', passando o mouse */
  --borda-lista: #3d475c;   /* borda da lista de pessoas, passando o mouse */
  --hb-hover: #ffc86a;   /* botão da mão levantada, passando o mouse */
  --hb-ambar: #ffd27a;   /* texto âmbar da etiqueta da mão levantada */
  --hb-claro-texto: #8a5a00;   /* texto da mão levantada no tema Claro */
  --timer-fim: #ffd0d4;   /* texto do temporizador acabado */
  --mr-mudo: #ff9aa4;   /* aviso de microfone mudo no controle remoto */
  --convite-wa: #1faa55;   /* botão de convite pelo WhatsApp */
  --convite-wa-hover: #25c262;   /* botão de convite pelo WhatsApp, passando o mouse */
  --privado-texto: #d8ccff;   /* texto do destinatário no chat privado */
  --privado-fundo: #6d4fd8;   /* balão minha mensagem privada */
  --enquete-hover: #5b7cff;   /* borda da opção de enquete, passando o mouse */
  --arq-pdf: #d9434f;   /* ícone de arquivo PDF */
  --arq-xls: #1f9d55;   /* ícone de arquivo de planilha */
  --arq-doc: #3b6fe0;   /* ícone de arquivo de texto */
  --arq-ppt: #e07a2f;   /* ícone de arquivo de apresentação */
  --arq-zip: #7a6a3a;   /* ícone de arquivo compactado */
  --arq-med: #0e9fb3;   /* ícone de arquivo de áudio/vídeo */
  --arq-outro: #5b6478;   /* ícone de arquivo de outro tipo */
  --lousa-baixa: #f04452;   /* ferramenta de baixa da lousa */
  --moldura-fundo: #05080c;   /* moldura do celular na prévia do cartão */
  --moldura-borda: #2a3442;   /* contorno da moldura do celular */
  --preview-fundo: #0a1017;   /* fundo da tela do celular na prévia do cartão */
  --pop-fundo: #111821;   /* fundo do seletor de emoji do editor (reserva de --surface-2) */
  --on-aviso: #1a1300;   /* texto sobre o âmbar (menções e avisos do T_CHAT) */
  --anx-laranja: #f97316;   /* ícone de anexo laranja */
  --anx-laranja-claro: #fdba74;   /* texto do ícone de anexo laranja */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: calc(14px * var(--tl, 1))/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
.muted { color: var(--muted); }
.small { font-size: calc(12.5px * var(--tl, 1)); }
.view { min-height: 100%; }
[data-icon] { display: inline-flex; }
[data-icon] svg { width: 20px; height: 20px; }

/* ---------------- buttons ----------------
   Tamanhos nos tokens do :root (--h-btn 28 · --h-btn-lg 32 · --h-btn-sm 24). Contexto NÃO redefine altura: quem precisa de
   outro tamanho usa .btn-lg (destaque) ou .btn-sm (compacto). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-btn); padding: 0 12px; border-radius: var(--r-btn); border: 1px solid transparent;
  font-size: var(--f-btn); font-weight: 600; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .08s, opacity .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary:disabled { background: var(--surface-3); color: var(--text); box-shadow: none; }   /* 28/10: desligado legível (o degradê apagado ficava ilegível) */
.btn [data-icon] svg, .btn > svg { width: var(--i-btn); height: var(--i-btn); flex: none; }
.icon-btn > svg { width: var(--i-solo); height: var(--i-solo); }
.r-go svg { width: 16px; height: 16px; }
.btn-lg { height: var(--h-btn-lg); padding: 0 14px; font-size: var(--f-btn-lg); }
.btn-lg [data-icon] svg, .btn-lg > svg { width: var(--i-btn-lg); height: var(--i-btn-lg); }
.btn-sm { height: var(--h-btn-sm); padding: 0 9px; font-size: var(--f-btn-sm); gap: 5px; }
.btn-sm [data-icon] svg, .btn-sm > svg { width: var(--i-btn-sm); height: var(--i-btn-sm); }
.btn-block { width: 100%; }
.btn-primary { background: var(--grad-botao); border-color: transparent; color: var(--on-accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 24%, transparent); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 34%, transparent); }
.btn-ghost { background: var(--surface-2); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border-2); }
.link-btn { background: none; border: 0; color: var(--muted); font-size: var(--f-btn-sm); padding: 0 6px; min-height: var(--h-btn-sm); border-radius: var(--r-btn); }
.link-btn:hover { color: var(--text); background: var(--surface-2); }
.icon-btn {
  display: inline-grid; place-items: center; width: var(--h-btn); height: var(--h-btn); border-radius: var(--r-btn);
  background: transparent; border: 0; color: var(--muted);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.primary { background: var(--grad-botao); color: var(--on-accent); }
.icon-btn.primary:hover { filter: brightness(1.08); }
.icon-btn [data-icon] svg { width: var(--i-solo); height: var(--i-solo); }

/* ---------------- top nav ---------------- */
.topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 4vw, 40px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; border-radius: 14px; padding: 4px 8px 4px 4px; margin-left: -4px; transition: background .15s; }
.brand:hover { background: color-mix(in srgb, var(--tint) 3%, transparent); }
.brand-mark {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--branco);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-mark [data-icon] svg { fill: var(--branco); stroke: var(--branco); }
.brand-mark.sm { width: 34px; height: 34px; border-radius: 10px; }
.brand-live {
  position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--bg);
}
/* 18/10: o pulso era box-shadow animado (repintava a página a 60 quadros/s; ~30% de CPU no painel do programa):
   agora um anel por cima, só transform + opacity (a placa de vídeo anima sozinha) */
.brand-live::after, .dot-live::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--ok);
  opacity: 0; pointer-events: none; animation: pulso-anel 2s ease-out infinite; will-change: transform, opacity; }
.dot-live::after { inset: 0; }
@keyframes pulso-anel { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.2); opacity: 0; } }
/* fase 4 (25/10): os outros pulsos que eram box-shadow animado (repintura a cada quadro) viram este anel: um ::after do mesmo
   tamanho, com a cor em --anel-cor e o quanto cresce em --anel-esc; só transform + opacity */
@keyframes anel { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(var(--anel-esc, 1.5)); opacity: 0; } }
.wz-ch-ic::after, .wz-ch-ativa::after, .wz-aovivo.com-gente .av-ic::after, .av-marca.com-gente::after, .preview-flag::after,
.preview-controls .ctrl.off:not(.locked)::after, .acc-rows .cx-tecla.gravando::after, .mq-toque-bt.sim::after, .tool-timer.ended::after,
.wz-radio.no-ar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--anel-cor, var(--ok)); opacity: 0;
  pointer-events: none; animation: anel 1.6s ease-out infinite; }
.fr-vivo::after, .mr-vivo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--danger); opacity: 0; pointer-events: none; animation: pulso-anel 1.8s ease-out infinite; }
.wz-ch-ic, .wz-ch-ativa, .wz-aovivo.com-gente .av-ic, .av-marca.com-gente, .preview-controls .ctrl.off:not(.locked), .acc-rows .cx-tecla.gravando,
.mq-toque-bt.sim, .fr-vivo, .mr-vivo, .wz-radio.no-ar { position: relative; }
.wz-aovivo.com-gente .av-ic::after, .av-marca.com-gente::after { --anel-cor: var(--violet); }
.preview-flag::after, .preview-controls .ctrl.off:not(.locked)::after, .tool-timer.ended::after, .wz-radio.no-ar::after { --anel-cor: var(--danger); }
.acc-rows .cx-tecla.gravando::after { --anel-cor: var(--accent); --anel-esc: 1.1; }
.preview-flag::after, .tool-timer.ended::after { --anel-esc: 1.12; }
.tool-timer.ended::after { --anel-esc: 1.06; }
@media (prefers-reduced-motion: reduce) {
  .brand-live::after, .dot-live::after, .wz-ch-ic::after, .wz-ch-ativa::after, .wz-aovivo.com-gente .av-ic::after, .av-marca.com-gente::after, .preview-flag::after,
  .preview-controls .ctrl.off:not(.locked)::after, .acc-rows .cx-tecla.gravando::after, .mq-toque-bt.sim::after, .tool-timer.ended::after, .wz-radio.no-ar::after,
  .fr-vivo::after, .mr-vivo::after { animation: none; opacity: 0; }
  .ctrl.pending::after { animation: none; }
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name, .room-eyebrow { font-weight: 800; letter-spacing: .08em; font-size: calc(16.5px * var(--tl, 1)); color: var(--text); white-space: nowrap; }
.brand-name b, .room-eyebrow b { font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-name em, .room-eyebrow em { font-style: normal; color: var(--accent-2); margin: 0 .02em; }
.clock { color: var(--muted); font-variant-numeric: tabular-nums; }

/* rodapé discreto "IMMENSUS (C) 2026" (site, menu lateral, entrada e tela "você saiu"): só o nome desenhado da IMMENSUS (SVG da marca, mínimo 90 px de largura), branco puro no escuro e preto puro no tema claro */
.t-foot { display: block; font-size: calc(11px * var(--tl, 1)); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }   /* sem opacity: com ela o contraste ficava abaixo de 4,5:1 (t_164) */
.foot-bottom .t-foot { display: inline; }
.imm-nome { display: inline-block; width: 98px; height: 10.94px; aspect-ratio: 6432 / 718; color: #fff; vertical-align: -1px; flex: none; }
[data-theme="claro"] .imm-nome { color: #000; }
.app-side-foot .t-foot { padding: 12px 12px 4px; font-size: calc(11px * var(--tl, 1)); }
.pj-foot { text-align: center; padding: 0 16px calc(20px + env(safe-area-inset-bottom)); margin-top: -12px; }
.left-foot { margin: 26px 0 0; }

/* ---------------- home ---------------- */
.home {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr); column-gap: clamp(24px, 5vw, 72px); row-gap: 0;
  align-items: center; max-width: 1240px; margin: 0 auto;
  padding: clamp(16px, 5vh, 56px) clamp(16px, 4vw, 40px) 40px;
}
/* esquerda: apresentação no topo e funções logo abaixo; direita: salas */
.home { grid-template-areas: "hero side" "feat side"; align-items: start; }
#view-home { position: relative; overflow: hidden; }
#view-home .topnav { position: relative; z-index: 2; }

/* fundo: brilhos suaves + grade que some nas bordas */
.home-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.home-bg .glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.home-bg .g1 { width: 620px; height: 620px; left: -160px; top: -120px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 65%); }
.home-bg .g2 { width: 560px; height: 560px; right: -140px; top: 22%; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 35%, transparent), transparent 65%); }
.home-bg .grid-lines {
  position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(color-mix(in srgb, var(--tint) 4.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--tint) 4.5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, var(--preto) 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, var(--preto) 20%, transparent 75%);
}

.hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hello { font-size: calc(13px * var(--tl, 1)); color: var(--text); font-weight: 600; }
.hello .wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.4s ease-in-out 1; }
@keyframes wave { 10%, 30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40%, 100% { transform: rotate(0); } }

.h-ic { display: inline-grid !important; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); }
.h-ic svg { width: 15px !important; height: 15px !important; color: var(--accent) !important; }
.h-ic.teal { background: color-mix(in srgb, var(--accent-2) 12%, transparent); }
.h-ic.teal svg { color: var(--accent-2) !important; }


/* apresentação das funções */
/* pré-entrada: reunião rápida que já terminou */
.ended { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: start; padding: 18px; margin-top: 8px; border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 8%, transparent), var(--surface) 70%); }
.ended-ic { display: grid !important; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--danger-soft); color: var(--danger-text); }
.ended-ic svg { width: 20px; height: 20px; }
.ended b { display: block; font-size: calc(15px * var(--tl, 1)); margin-bottom: 4px; }
.ended small { color: var(--muted); font-size: calc(13px * var(--tl, 1)); line-height: 1.5; }
.ended-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.ended-actions .btn { flex: 1 1 160px; }

/* menu do topo */
.site-nav { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 60%, transparent); border: 1px solid var(--border); backdrop-filter: blur(10px); }
.site-nav button { height: var(--h-btn); padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-weight: 600; font-size: calc(13.5px * var(--tl, 1)); transition: color .15s, background .15s; }
.site-nav button:hover { color: var(--text); background: var(--surface-2); }
.site-nav button.active { color: var(--text); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border-2); }
#view-home .topnav { position: sticky; top: 0; z-index: 10; transition: background .2s, box-shadow .2s; }
#view-home .topnav.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--border); }
#view-home { overflow: clip; }
#funcoes, #precos, #contato { scroll-margin-top: 90px; }

.sec-head { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.sec-head h2 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; }
.sec-head p { margin: 0; }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; }
.pc-list li { display: flex; align-items: flex-start; gap: 10px; font-size: calc(13.5px * var(--tl, 1)); color: var(--text-soft); }
.pc-list svg { width: 16px !important; height: 16px !important; color: var(--accent-2); margin-top: 2px; flex: none; }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 860px; margin: 0 auto; }
.contact-card {
  --cc: var(--accent);
  display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 78%, transparent); border: 1px solid var(--border); transition: border-color .2s, transform .2s, box-shadow .2s;
}
.contact-card:hover { border-color: var(--cc); transform: translateY(-2px); box-shadow: 0 12px 34px color-mix(in srgb, var(--cc) 22%, transparent); }
.contact-card.wa { --cc: #25d366; }
.contact-card.tg { --cc: #29a9eb; }
.contact-card.ig { --cc: #e1306c; }
.cc-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; flex: none; color: var(--cc); background: color-mix(in srgb, var(--cc) 14%, transparent); }
.contact-card.ig .cc-ic { color: var(--branco); background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af); }
.cc-ic svg { width: 24px; height: 24px; }
.cc-text { flex: 1; min-width: 0; display: grid; }
.cc-text b { font-size: calc(15px * var(--tl, 1)); }
.cc-text small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); }
.cc-go { color: var(--muted); transition: transform .2s, color .2s; }
.cc-go svg { width: 16px; height: 16px; }
.contact-card:hover .cc-go { color: var(--cc); transform: translateX(3px); }
@media (max-width: 1100px) { .site-nav button { padding: 0 11px; } }
@media (max-width: 900px) {
  #view-home .topnav { flex-wrap: wrap; row-gap: 10px; }
  .site-nav { order: 3; width: 100%; justify-content: space-between; }
  .site-nav button { flex: 1; padding: 0 6px; }
  .contact-grid { grid-template-columns: 1fr; }
  #funcoes, #precos, #contato { scroll-margin-top: 130px; }
}

.home > * { min-width: 0; }
@media (max-width: 900px) {
  .home { grid-template-areas: "hero" "side" "feat"; }
  .home-bg .g1 { width: 420px; height: 420px; }
  .home-bg .g2 { display: none; }
}
@media (max-width: 560px) {
  .home { grid-template-columns: minmax(0, 1fr); }
}
.dot-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.badge.rec .dot-live { background: var(--danger-icon); }
.badge.rec .dot-live::after { background: var(--danger); }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }   /* (era box-shadow: repintava a cada quadro) */
.home h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.05; letter-spacing: -.03em; margin: 22px 0 16px; font-weight: 800; }
.grad { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--muted); font-size: clamp(15px, 1.5vw, 17px); max-width: 520px; margin: 0 0 32px; }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.join-form {
  flex: 1 1 280px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s;
}
.join-form:focus-within { border-color: var(--accent); }
.join-icon { color: var(--muted); }
.join-icon svg { width: 18px; height: 18px; }
.join-form input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; height: 100%; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.empty { text-align: center; color: var(--muted); padding: 28px 12px; }
.empty svg { width: 34px; height: 34px; margin: 0 auto 10px; opacity: .6; }
.empty p { margin: 0; font-size: calc(13px * var(--tl, 1)); }

/* ---------------- prejoin ---------------- */
.prejoin {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: clamp(24px, 4vw, 56px);
  align-items: center; max-width: 1180px; margin: 0 auto; padding: 12px clamp(16px, 4vw, 40px) 40px;
  min-height: calc(100vh - 72px);
}
.preview { padding: 10px; }
.preview-video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--palco-escuro); max-width: 100%; }
.preview-video video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.preview-off { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); background: var(--palco-escuro); }
.preview-off p { margin: 0; }
.preview-controls { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 12px; }
.meter { position: absolute; left: 16px; bottom: 26px; display: flex; gap: 3px; align-items: flex-end; height: 18px; }
.meter i { width: 4px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); transition: height .08s, background .08s; }
.device-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 2px 2px; }
.device-row label { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 10px; height: var(--h-campo); border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.device-row svg { width: 16px; height: 16px; flex: none; }
.device-row select { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); }
select option { background: var(--surface); }
.eyebrow { color: var(--accent-2); font-weight: 600; font-size: calc(13px * var(--tl, 1)); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .08em; }
.prejoin-side h1 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 4px; letter-spacing: -.02em; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-weight: 700; word-break: break-all; }
.pj-form { display: grid; gap: 12px; margin-top: 26px; }
/* volume do som das telas (Configurações) e aviso "você está no mudo" (js/room-rede.js) */
@keyframes mudoIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.error { color: var(--danger-text); background: var(--danger-soft); padding: 10px 12px; border-radius: 10px; margin-top: 14px; font-size: calc(13px * var(--tl, 1)); }
.avatar {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 700;
  background: linear-gradient(135deg, var(--av-padrao-a), var(--av-padrao-b)); color: var(--branco); flex: none; text-transform: uppercase;
}
.avatar-xl { width: 96px; height: 96px; font-size: calc(36px * var(--tl, 1)); }

/* ---------------- controls ---------------- */
.ctrl {
  position: relative; display: inline-grid; place-items: center; width: var(--h-ctrl); height: var(--h-ctrl); border-radius: 50%; background: var(--surface-3); border: 0; color: var(--text); transition: background .15s, transform .08s;
}
.ctrl:hover { background: var(--surface-4); }
.ctrl:active { transform: scale(.96); }
.ctrl svg { width: 18px; height: 18px; }
.ctrl.off { background: var(--danger); color: var(--branco); }
.ctrl.off:hover { background: var(--danger-hover); }
.ctrl.on { background: var(--accent); color: var(--branco); }
.ctrl.on:hover { background: var(--accent-hover); }
.ctrl.danger { background: var(--danger); color: var(--branco); }
.ctrl.wide { width: calc(var(--h-ctrl) * 1.5); }
.ctrl.ghost { background: transparent; color: var(--muted); }
.ctrl.ghost:hover, .ctrl.ghost.active { background: var(--surface-2); color: var(--text); }
.preview-controls .ctrl { background: color-mix(in srgb, var(--surface-2) 88%, transparent); }
.unread { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); border: 2px solid var(--bg); }

/* ---------------- room ---------------- */
.room { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.room-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; min-height: 58px; }
.room-top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.room-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.room-eyebrow { font-size: calc(11px * var(--tl, 1)); letter-spacing: .14em; line-height: 1; }
.room-eyebrow span { color: var(--muted); font-weight: 600; letter-spacing: .06em; }
.room-code {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; min-height: var(--h-btn); padding: 0 6px; margin-left: -6px;
  border: 0; border-radius: 7px; background: none; color: var(--text); transition: background .15s;
}
.room-code strong { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: calc(15px * var(--tl, 1)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-code svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.badge-stat { font-variant-numeric: tabular-nums; color: var(--text); gap: 6px; }
.badge-stat svg { width: 14px; height: 14px; color: var(--muted); }
.room-top-right { display: flex; gap: 8px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 8px; height: var(--h-btn); padding: 0 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: calc(12.5px * var(--tl, 1)); color: var(--muted); }
.badge.rec { color: var(--text); }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.bars i { width: 3px; border-radius: 1px; background: var(--surface-3); }
.bars i:nth-child(1) { height: 4px; } .bars i:nth-child(2) { height: 8px; } .bars i:nth-child(3) { height: 12px; }
.bars.q-excellent i { background: var(--ok); }

.room-body { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 0 12px; }
.stage { flex: 1; min-width: 0; position: relative; display: flex; gap: 12px; }
.spotlight { display: none; flex: 1; min-width: 0; gap: 10px; grid-template-columns: repeat(var(--spot-cols, 1), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.grid {
  flex: 1; min-width: 0; display: grid; gap: 10px; align-content: center; justify-content: center;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, var(--tile-w, 1fr)));
  grid-auto-rows: var(--tile-h, auto);
}
/* cada vídeo no formato da própria imagem (--ar, medido no app.js): em pé fica em pé, deitado fica deitado */
.grid.ajuste { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; }
.grid.ajuste > .tile { flex: none; width: var(--fw, 100%); height: var(--fh, 100%); }

.tile {
  position: relative; overflow: hidden; border-radius: 14px; background: var(--surface);
  border: 2px solid transparent; transition: border-color .15s; min-height: 0; width: 100%; height: 100%;
}
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--palco-escuro); }   /* imagem inteira, sem zoom */
.tile.screen video, .spotlight .tile video { object-fit: contain; }
/* 99,9% de opacidade: o Chrome no Windows deixa de mandar o víeo para o overlay da placa de vídeo, que em GPU
   integrada (AMD/Intel) sai desbotado (preto acinzentado) quando o mouse não está em cima; assim fica sempre nítido */
.tile video, .stage video { opacity: .999; }
.tile.mirror video { transform: scaleX(-1); }
.tile .t-actions { position: absolute; z-index: 7; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }   /* e o canto de redimensionar sai do caminho */
/* soltando a câmera dentro da própria tela compartilhada */
.tile:hover .t-actions { opacity: 1; }
.tile .t-actions button { display: grid; place-items: center; width: var(--h-btn); height: var(--h-btn); border-radius: var(--r-btn); border: 0; background: rgba(8, 10, 14, .78); color: var(--branco); }
.tile .t-actions button:hover { background: rgba(8, 10, 14, .9); }
.tile .t-actions svg { width: 16px; height: 16px; }
.tile .t-actions button.active { background: var(--accent); }

.side { flex: 0 0 340px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-height: 0; overflow: hidden; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--border); }
.side-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* painel único "Mensagens": abas de chat, imagens e arquivos no topo */
.msgs-n { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent-2); color: var(--branco); font-size: calc(10px * var(--tl, 1)); font-weight: 800; }
/* botão da barra de baixo: soma das três abas */
.unread-n { width: auto; min-width: 17px; height: 17px; top: 5px; right: 4px; padding: 0 4px; border-radius: 9px; background: var(--accent-2); color: var(--branco); font: 800 calc(10px * var(--tl, 1))/1 var(--font); display: grid; place-items: center; }
.chat-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.small-empty { margin: auto 0; }
.msg.me { align-self: flex-end; text-align: right; }
.chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.chat-form input { flex: 1; min-width: 0; height: var(--h-btn); padding: 0 12px; border-radius: var(--r-btn); background: var(--bg-2); border: 1px solid var(--border); outline: 0; }
[data-pane="people"] { padding: 12px; gap: 10px; overflow-y: auto; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.dock { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.dock-left, .dock-center, .dock-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dock-right { justify-content: flex-end; }

.audio-unlock, .reconnect { position: fixed; left: 50%; top: 76px; transform: translateX(-50%); z-index: 30; }
.reconnect { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow); }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--surface-3); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- left ---------------- */
.left { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.left-card { padding: 40px 32px; text-align: center; max-width: 440px; width: 100%; }
.left-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--danger-soft); color: var(--danger-icon); margin-bottom: 16px; }
.left-ic svg { width: 28px; height: 28px; }
.left-card h1 { margin: 0 0 6px; font-size: calc(24px * var(--tl, 1)); }
.left-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }

/* ---------------- modal ---------------- */
.check { display: flex; gap: 10px; align-items: center; font-size: calc(13.5px * var(--tl, 1)); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------------- toasts ---------------- */
.toasts { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 50; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--surface-3); border: 1px solid var(--border-2); padding: 10px 16px; border-radius: 12px; box-shadow: var(--shadow); font-size: calc(13.5px * var(--tl, 1)); animation: toastIn .2s ease-out; }
.toast.out { opacity: 0; transform: translateY(6px); transition: .25s; }
/* aviso com ação (ex.: "Quadro limpo · Desfazer") — precisa receber clique */
.toast.has-act { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; padding-right: 8px; }
.toast-act { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 650; font-size: calc(12.5px * var(--tl, 1)); padding: 5px 11px; border-radius: var(--r-sm); }
.toast-act:hover { background: var(--accent); color: var(--branco); }
/* caixinha de texto do sistema (substitui o prompt do navegador) */
.ask-dlg .ask-in { width: 100%; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------------- contas ---------------- */
.topnav-right { display: flex; align-items: center; gap: 14px; }
.account-slot { display: flex; align-items: center; }
.account-btn {
  display: inline-flex; align-items: center; gap: 9px; height: var(--h-btn); padding: 0 12px 0 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: calc(13.5px * var(--tl, 1));
}
.account-btn:hover { background: var(--surface-2); border-color: var(--border-2); }
.account-btn .avatar { width: 22px; height: 22px; font-size: calc(11px * var(--tl, 1)); }
.account-btn.guest { padding: 0 14px; }
.account-btn svg { width: 16px; height: 16px; }
.menu { position: relative; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; }
.menu-pop .menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.menu-pop .menu-head small { display: block; color: var(--muted); font-size: calc(11.5px * var(--tl, 1)); }

.center { text-align: center; }
.modal-inner .center { margin: 0; }

.promo { text-align: center; padding: 10px 8px 4px; color: var(--muted); }
.promo p { margin: 0 0 14px; font-size: calc(13px * var(--tl, 1)); }
.promo .btn { width: 100%; }

.rooms-page { max-width: 1180px; margin: 0 auto; padding: 16px clamp(16px, 4vw, 40px) 60px; }
.rooms-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.rooms-head h1 { margin: 0 0 6px; font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -.02em; }
.rooms-head p.muted { margin: 0; }
.rooms-grid { display: grid; gap: 14px; }
.rooms-grid-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; max-width: calc(var(--n, 3) * 440px + (var(--n, 3) - 1) * 16px); }   /* se ajusta à quantidade: com 1 ou 2 salas a grade encolhe (cartão de no máximo 440 px), sem faixa vazia */
/* barra da página: filtros de grupo (chips) à esquerda e a única ação "Nova sala" à direita */
.rooms-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rooms-bar .group-bar { flex: 1 1 auto; min-width: 0; }
.rooms-bar #btn-room-new { flex: none; margin-left: auto; }

/* grupos (pastas de salas) */
.group-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.g-chip { --gc: var(--muted); transition: border-color .15s, background .15s, color .15s, transform .12s; }
.g-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 10px var(--gc); }
.g-chip:hover { color: var(--text); border-color: var(--border-2); }
.g-chip.active { color: var(--text); border-color: var(--gc); background: color-mix(in srgb, var(--gc) 14%, var(--surface)); }
.g-chip:not([style]).active { border-color: var(--accent); background: var(--accent-soft); }
.g-chip .g-edit { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: -6px; border-radius: 50%; opacity: 0; transition: opacity .15s, background .15s; }
.g-chip:hover .g-edit, .g-chip.active .g-edit { opacity: .8; }
.g-chip .g-edit:hover { opacity: 1; background: var(--surface-3); }
.g-chip .g-edit svg { width: 12px; height: 12px; }
.rooms-ctx { --gc: var(--border-2); display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.rooms-ctx h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: calc(15px * var(--tl, 1)); }
.rooms-ctx h2 small { color: var(--muted); font-weight: 500; font-size: calc(12.5px * var(--tl, 1)); }
.rooms-ctx .g-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--gc); box-shadow: 0 0 12px var(--gc); }
.rooms-ctx-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.rooms-grid-inner[data-grupo] .room-card { border-top: 2px solid color-mix(in srgb, var(--gc) 70%, transparent); }
.group-empty { grid-column: 1 / -1; padding: 22px; border-radius: var(--radius); border: 1px dashed var(--border-2); color: var(--muted); font-size: calc(13px * var(--tl, 1)); text-align: center; }
.room-card[draggable=true] { cursor: grab; }
.room-card.dragging { opacity: .45; }
.dragging-room .rooms-grid-inner[data-drop-group] { outline: 1px dashed var(--border-2); outline-offset: 6px; border-radius: var(--radius); }
.dragging-room .g-chip[data-drop-group] { border-style: dashed; }
.drop-over.rooms-grid-inner { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: var(--radius); }
.drop-over.g-chip { transform: scale(1.06); border-color: var(--gc); color: var(--text); }
.g-chip.g-add { border-style: dashed; }
.g-chip.g-add svg { width: 14px; height: 14px; }
.tag.grp { color: var(--text); background: color-mix(in srgb, var(--gc) 14%, transparent); border-color: color-mix(in srgb, var(--gc) 40%, transparent); }
.tag.grp i { width: 7px; height: 7px; border-radius: 50%; background: var(--gc); }
.color-pick { display: flex; gap: 10px; flex-wrap: wrap; }
.color-pick button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--gc); box-shadow: inset 0 0 0 3px var(--surface); cursor: pointer; transition: transform .12s; }
.color-pick button:hover { transform: scale(1.08); }
.color-pick button.active { border-color: var(--gc); box-shadow: inset 0 0 0 3px var(--surface), 0 0 14px var(--gc); }
@media (max-width: 560px) {
  .rooms-bar { flex-direction: column-reverse; align-items: stretch; }
  .rooms-bar #btn-room-new { margin-left: 0; width: 100%; }
  .group-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; }
  .group-bar::-webkit-scrollbar { display: none; }
  .g-chip { flex: none; }
  .modal-actions { flex-wrap: wrap; }
}
.rooms-empty { padding: 48px 20px; }
.rooms-empty p { margin-bottom: 18px; }
.room-card { padding: 18px; display: flex; flex-direction: column; gap: 14px; transition: border-color .15s, transform .15s; }
.room-card:hover { border-color: var(--border-2); }
.room-card .rc-top { display: flex; align-items: flex-start; gap: 12px; }
.room-card .rc-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent)); color: var(--branco); }
.room-card .rc-ic svg { width: 20px; height: 20px; }
.room-card .rc-main { flex: 1; min-width: 0; }
.room-card h2 { margin: 0 0 2px; font-size: calc(16px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-card .rc-link { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; word-break: break-all; }
.room-card .rc-live { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px * var(--tl, 1)); color: var(--ok); white-space: nowrap; }
.room-card .rc-actions { display: flex; gap: 8px; margin-top: auto; }
.room-card .rc-actions .btn-primary { flex: 1; }
.room-card .rc-actions .icon-btn { background: var(--surface-2); border: 1px solid var(--border); }
.room-card .rc-actions .icon-btn:hover { background: var(--surface-3); }
.room-card .rc-actions .icon-btn.del:hover { color: var(--danger-text); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag.lock { color: var(--tag-lock); background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.tag.hand { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.tag.open { color: var(--ok-text); background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }

.slug-input { display: flex; align-items: center; height: var(--h-campo); border-radius: 12px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.slug-input:focus-within { border-color: var(--accent); }
.slug-prefix { padding: 0 2px 0 12px; color: var(--muted); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: calc(13px * var(--tl, 1)); white-space: nowrap; }
.slug-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; padding: 0 12px 0 0; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.slug-input input:disabled { color: var(--muted); }
.hint { color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.hint.bad { color: var(--danger-text); }

.switch { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); cursor: pointer; }
/* position relative (02/11): o input escondido (absolute) fica preso ao próprio switch; sem isso ele escapava da rolagem do painel
   (Ferramentas encaixado na reunião) e esticava a página inteira, que ganhava barra de rolagem */
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .sw { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--surface-3); transition: background .15s; }
.switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--sw-bolinha); transition: transform .18s, background .15s; }
.switch input:checked + .sw { background: var(--accent); }
.switch input:checked + .sw::after { transform: translateX(16px); background: var(--branco); }
.switch input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-text { display: grid; gap: 2px; }
.switch-text b { display: inline-flex; align-items: center; gap: 6px; font-size: calc(14px * var(--tl, 1)); }
.switch-text b svg { width: 15px; height: 15px; }
.switch-text small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); }

/* ---------------- prejoin: sala personalizada ---------------- */
.pj-link { margin: 0 0 8px; color: var(--muted); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: calc(13px * var(--tl, 1)); }
.pj-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.pj-badges:empty { display: none; }
.waiting { display: flex; align-items: center; gap: 14px; padding: 16px; margin-top: 18px; border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.waiting .spinner { width: 22px; height: 22px; flex: none; }
.waiting div { flex: 1; display: grid; gap: 3px; }
.waiting small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); }
.host-hint { margin: 16px 0 0; font-size: calc(13px * var(--tl, 1)); }
.host-hint .link-btn { color: var(--accent); font-size: calc(13px * var(--tl, 1)); }

/* ---------------- pedidos de entrada (anfitrião) ---------------- */
.requests { position: fixed; top: 70px; right: 16px; z-index: 35; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); }

/* ---------------- acesso da sala (ao vivo) ---------------- */
.room-access { font-weight: 600; gap: 6px; }

/* ---------------- várias telas, mão, reações, moderação ---------------- */
.ctrl-count { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--neon); color: var(--on-neon); font: 800 calc(11px * var(--tl, 1))/18px var(--font); border: 2px solid var(--bg); }

.pop { position: fixed; z-index: 45; padding: 8px; animation: toastIn .15s ease-out; }
.share-pop { width: min(320px, calc(100vw - 24px)); display: grid; gap: 8px; }
.pop-title { font-size: calc(12px * var(--tl, 1)); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 4px 6px 0; }
.pop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px; border-radius: 10px; background: var(--bg-2); }
.pop-row > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.pop-row > span svg { width: 16px; height: 16px; color: var(--accent-2); flex: none; }
.pop-row small { display: block; color: var(--muted); font-weight: 400; font-size: calc(11px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.pop-row .btn { height: var(--h-btn-sm); padding: 0 10px; font-size: calc(12.5px * var(--tl, 1)); }
.pop-row .btn svg { width: var(--i-btn-sm); height: var(--i-btn-sm); }
.pop-row-txt { display: grid; line-height: 1.2; }
.pop-row-btns { display: flex; gap: 6px; flex: none; }
.share-pop { width: min(380px, calc(100vw - 24px)); }
.danger-text { color: var(--danger-text); }
.react-pop { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 6px; border-radius: 28px; max-width: min(620px, calc(100vw - 24px)); }

.reaction-rain { position: fixed; left: 0; right: 0; bottom: 90px; height: 50vh; pointer-events: none; z-index: 30; }
@keyframes floatUp {
  0% { transform: translateY(20px) scale(.6); opacity: 0; }
  12% { transform: translateY(0) scale(1.15); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(-160px) scale(1); opacity: 0; }
}

.pj-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: calc(12.5px * var(--tl, 1)); color: var(--muted); }
.layout-ph { position: absolute; z-index: 5; border: 2px dashed var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; transition: left .1s, top .1s, width .1s, height .1s; }

/* barra superior da sala: linha 1 = informações | perfil; linha 2 = controle do anfitrião */
.room .room-top {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "left host right";
  align-items: center; column-gap: 14px; row-gap: 8px; padding: 10px 16px; min-height: 58px;
}
/* ajuste automático (fitTopBar mede o que cabe): compact = barra só com ícones; tight = esconde detalhes; stacked = barra na 2ª linha */
.room .room-top .host-bar { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
/* itens não encolhem: se não couber, o ajuste automático percebe e passa para ícones / 2ª linha (nada fica cortado ou sobreposto) */
.room .host-bar > * { flex-shrink: 0; }
.room .room-top.compact .host-bar .hb-btn { padding: 0 9px; }
.room .room-top.tight .room-eyebrow span, .room .room-top.tight #rm-conn-label, .room .room-top.tight .stat-timer,
.room .room-top.tight .rm-profile .rp-text, .room .room-top.tight #rm-sharing, .room .room-top.tight .room-access .acc-label { display: none; }
.room .room-top.tight .rm-profile { padding-right: 4px; }
.room .room-top-left { grid-area: left; min-width: 0; gap: 10px; }
.room .room-top-right { grid-area: right; display: flex; align-items: center; gap: 8px; min-width: 0; }
.room .room-meta { flex: 0 1 auto; min-width: 0; max-width: 280px; margin-right: 4px; }
.room .room-eyebrow { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room .room-code { max-width: 100%; }
.room .room-top-left > .badge { flex: none; }
.room .badge { white-space: nowrap; flex: none; }
.room .rm-profile { flex: none; min-width: 0; max-width: 260px; }
.room .rp-text { max-width: 180px; }
.room .host-bar {
  grid-area: host; justify-self: center; justify-content: center; height: auto; padding: 4px; border-radius: 16px; max-width: 100%;
}
.room .host-bar .hb-btn.is-end { margin-left: 6px; }

@media (max-width: 700px) {
  .room .room-top { padding-inline: 10px; }
  .room .room-eyebrow span, .room .stat-timer, .room #rm-conn-label, .room #rm-sharing { display: none; }
  .room .rm-profile .rp-text { display: none; }
}

.rm-home { border: 0; padding: 0; cursor: pointer; transition: transform .12s, box-shadow .15s, filter .15s; }

/* palco (automático ou travado): área principal + faixa de participantes */
.stage.presentation { overflow: hidden; }
.hb-btn.is-end { color: var(--branco); background: var(--danger); border-color: transparent; }
.hb-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 9px; background: var(--hb-fundo); color: var(--vip); font-size: calc(11px * var(--tl, 1)); }
.hb-btn.is-on .hb-count { background: var(--ok); color: var(--on-ok); }

/* perfil na barra da sala e fotos */
.rm-profile { display: flex; align-items: center; gap: 8px; height: var(--h-btn); padding: 0 12px 0 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); max-width: 240px; }
.rm-profile .avatar { width: 22px; height: 22px; font-size: calc(11px * var(--tl, 1)); }
.rp-text { display: grid; line-height: 1.15; min-width: 0; }
.rp-text b { font-size: calc(12.5px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-text small { font-size: calc(11px * var(--tl, 1)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar.has-photo { padding: 0; overflow: hidden; background: var(--surface-3); }
.avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.avatar-md { width: 40px; height: 40px; font-size: calc(15px * var(--tl, 1)); }
.menu-profile { display: flex; align-items: center; gap: 10px; }
#rm-conn { height: var(--h-btn); font-size: calc(11.5px * var(--tl, 1)); }
@media (max-width: 700px) { .rm-profile { padding-right: 4px; } }

/* chat de imagens */
[data-pane="images"] { position: relative; }
.img-list { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 12px; align-content: start; }
.img-send { display: grid; gap: 6px; justify-items: center; padding: 10px; border-top: 1px solid var(--border); }
.img-send small { font-size: calc(11.5px * var(--tl, 1)); }
.img-dropzone {
  position: absolute; inset: 8px; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 8px;
  border: 2px dashed var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); font-weight: 700; pointer-events: none;
}
.img-dropzone svg { width: 34px; height: 34px; }
.lightbox { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: 1fr auto; background: rgba(0, 0, 0, .88); backdrop-filter: blur(4px); padding: 16px; }
.lightbox img { justify-self: center; align-self: center; max-width: 100%; max-height: calc(100vh - 100px); object-fit: contain; border-radius: 10px; }
.lb-bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 12px; flex-wrap: wrap; }
.lb-bar #lb-cap { color: var(--muted); }

/* controle da sala na barra superior */
.host-bar { display: flex; align-items: center; gap: 4px; height: auto; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--neon) 30%, transparent); }
.hb-btn {
  display: inline-flex; align-items: center; gap: 6px; height: var(--h-btn); padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: var(--f-btn); font-weight: 600; white-space: nowrap; transition: background .15s, filter .15s;
}
.hb-btn.is-on { color: var(--ok-text); background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }

@media (max-width: 700px) { .room-top { flex-wrap: wrap; } .room-top-right { flex-wrap: wrap; justify-content: flex-end; } }

.switch.mini { padding: 8px 10px; }
.switch.mini .switch-text b { font-size: calc(13px * var(--tl, 1)); font-weight: 600; }

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  .home, .prejoin { grid-template-columns: 1fr; min-height: auto; }
  .side { position: fixed; inset: 58px 8px 80px 8px; z-index: 20; box-shadow: var(--shadow); }
  .dock { padding-inline: 10px; }
}
@media (max-width: 560px) {
  .room-eyebrow span, .stat-timer { display: none; }
  .room-top { padding-inline: 10px; }
  .clock, .account-btn .acc-name, .room-access .acc-label { display: none; }
  .account-btn { padding-right: 5px; }
  .device-row { grid-template-columns: 1fr; }
  .side { inset: 64px 8px calc(82px + env(safe-area-inset-bottom)) 8px; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .side { inset: 64px 8px calc(82px + env(safe-area-inset-bottom)) 8px; }
}

/* celular deitado (pouca altura): faixa de participantes na lateral e controles mais baixos */
@media (orientation: landscape) and (max-height: 520px) {
  .room .room-top { min-height: 0; padding-block: 4px; }
  .room .room-eyebrow, .room .stat-timer, .room #rm-sharing { display: none; }
  .dock { padding: 4px 10px calc(4px + env(safe-area-inset-bottom)); gap: 8px; }
  .side { inset: 52px 8px calc(54px + env(safe-area-inset-bottom)) auto; width: min(380px, 62vw); }
}

/* ---------------- ferramentas da reunião ---------------- */
.side-head .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.side-head .tabs::-webkit-scrollbar { display: none; }
[data-pane="tools"] { overflow-y: auto; }
.tools { display: grid; gap: 12px; padding: 12px; align-content: start; }
.tool-card { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--border-2); }
.tl-label-in { height: var(--h-btn); padding: 0 12px; border-radius: var(--r-btn); background: var(--surface); border: 1px solid var(--border); outline: 0; }
.tl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-actions .btn { flex: 0 0 auto; }   /* 28/10: botão do tamanho do texto (esticava ~500 px na Minha conta) */
.unread.dot { background: var(--warn); }

/* selo do timer por cima do vídeo */
.tool-timer {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 15; /* acima dos vídeos, abaixo do painel lateral */ display: inline-flex; align-items: center; gap: 8px; height: var(--h-btn-lg); padding: 0 14px 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 50%, transparent); color: var(--text); box-shadow: 0 8px 26px rgba(0, 0, 0, .45); backdrop-filter: blur(10px); cursor: grab; user-select: none; touch-action: none;
}
.tool-timer .tt-ic { color: var(--accent-2); display: grid; }
.tool-timer .tt-ic svg { width: 17px; height: 17px; }
.tool-timer .tt-label { font-size: calc(12px * var(--tl, 1)); font-weight: 600; color: var(--muted); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-timer b { font-size: calc(18px * var(--tl, 1)); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
@keyframes tt-blink { 50% { opacity: .35; } }
@media (max-width: 560px) { .tool-timer { height: var(--h-btn); padding: 0 11px 0 8px; } .tool-timer b { font-size: calc(15px * var(--tl, 1)); } .tool-timer .tt-label { max-width: 90px; } }

.poll-invite {
  position: absolute; right: 12px; top: 12px; z-index: 16; display: flex; align-items: center; gap: 10px;
  max-width: min(420px, calc(100% - 24px)); padding: 10px 10px 10px 12px; border-radius: 14px;
  background: rgba(15, 18, 26, .92); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px); animation: pi-in .35s ease;
}
@keyframes pi-in { from { transform: translateY(-8px); opacity: 0; } }
.pi-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex: none; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
.pi-ic svg { width: 18px; height: 18px; }
.pi-main { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.pi-main small { font-size: calc(11px * var(--tl, 1)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.pi-main b { font-size: calc(13.5px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .poll-invite { left: 8px; right: 8px; top: 56px; max-width: none; } }

/* ---------------- campos e botões das ferramentas ---------------- */
.tr-check { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12.5px * var(--tl, 1)); color: var(--muted); white-space: nowrap; }

/* gaveta de ferramentas: nada fica mais largo que o painel */
.tools { grid-template-columns: minmax(0, 1fr); }
.tool-card { min-width: 0; }
.tl-label-in { width: 100%; min-width: 0; box-sizing: border-box; }
.tool-card, .pl-choices, .pl-opts { grid-template-columns: minmax(0, 1fr); }

/* ---------------- coluna de ferramentas (esquerda) ---------------- */
.side-tools { order: -1; }
.side-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: calc(14px * var(--tl, 1)); padding-left: 4px; }
.side-title svg { width: 16px; height: 16px; color: var(--accent-2); }
.tools-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
/* ---------------- convite ---------------- */
.invite-pop { width: min(360px, calc(100vw - 24px)); display: grid; gap: 10px; }

/* ---------------- teste de microfone e som ---------------- */
.device-row #pj-spk-wrap { grid-column: 1 / -1; }
.av-test { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 2px 0; }
.av-test .btn { font-size: calc(13px * var(--tl, 1)); }
.av-test-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 2px 0; padding: 9px 12px; border-radius: 10px; font-size: calc(12.5px * var(--tl, 1)); background: var(--surface-2); color: var(--text); }
@media (max-width: 560px) { .av-test { grid-template-columns: 1fr 1fr; } }

/* ---------------- mensagem fixada ---------------- */
.chat-pin { display: flex; align-items: flex-start; gap: 10px; margin: 10px 10px 0; padding: 10px 10px 10px 12px; border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 12%, transparent), color-mix(in srgb, var(--warn) 5%, transparent)); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.chat-pin-send { display: none; }

/* ---------------- chat privado ---------------- */
.chat-form { flex-wrap: wrap; }
.chat-to-row { flex: 0 0 100%; display: flex; align-items: center; gap: 8px; }
.chat-to-row label { display: inline-flex; align-items: center; gap: 5px; font-size: calc(12px * var(--tl, 1)); color: var(--muted); font-weight: 600; }
.chat-to-row label svg { width: 12px; height: 12px; }
.chat-to-row select { flex: 1; min-width: 0; height: var(--h-btn); padding: 0 8px; border-radius: var(--r-btn); background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font-size: calc(12.5px * var(--tl, 1)); outline: 0; }
.chat-reply-bar { flex: 0 0 100%; display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: 9px;
  border-left: 3px solid var(--accent); background: var(--bg-2); font-size: calc(12px * var(--tl, 1)); color: var(--muted); min-width: 0; }
.chat-mod-wrap { margin-left: auto; }
.chat-mod-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 31; width: 280px; max-width: calc(100vw - 32px); padding: 10px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); display: grid; gap: 12px; font-size: calc(12.5px * var(--tl, 1)); }

/* ---------------- arquivos ---------------- */
[data-pane="files"] { position: relative; }
[data-pane="files"].drop::after { content: "Solte para enviar"; position: absolute; inset: 8px; display: grid; place-items: center; border-radius: 12px; border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); font-weight: 700; z-index: 2; }
.files-send { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); }
.files-send select { height: var(--h-btn); padding: 0 10px; border-radius: var(--r-btn); background: var(--bg-2); border: 1px solid var(--border); color: var(--text); outline: 0; }
.files-send small { text-align: center; font-size: calc(11.5px * var(--tl, 1)); }
.files-to-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: calc(12px * var(--tl, 1)); color: var(--violet-text); }
.files-to-note svg { width: 13px; height: 13px; }
.files-list { list-style: none; margin: 0; padding: 10px; display: grid; gap: 8px; overflow-y: auto; flex: 1; min-height: 0; align-content: start; }

/* abas do painel direito: as duas cabem sem cortar (Mensagens, Pessoas) */
.side-head { gap: 6px; }
.side-head .tabs { flex: 1; min-width: 0; gap: 2px; }
.side-head .tab { flex: 1 1 auto; padding: 0 7px; }
.side-head #side-close { flex: none; }
.tab-count { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--surface-3); color: var(--text); font-size: calc(10.5px * var(--tl, 1)); font-weight: 700; }
/* celular e blocos estreitos: as três abas de Mensagens ficam mais compactas */
@media (max-width: 430px) {
}

/* ---------------- pedido de tela ---------------- */
.ctrl.pending::after { content: ""; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); border: 2px solid var(--bg); animation: pulse 1.6s ease-in-out infinite; }
@keyframes share-ready { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ok) 15%, transparent); } }

.hist-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex: none; background: var(--accent-soft); color: var(--accent); }
.hist-ic.live { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.hist-ic svg { width: 17px; height: 17px; }

/* cartão de sala: a linha de botões nunca passa da borda (Entrar estica; Copiar link e Mais ficam do tamanho deles) */
.room-card { min-width: 0; }
.room-card .rc-actions { flex-wrap: nowrap; min-width: 0; align-items: center; }
.room-card .rc-actions .btn-primary { min-width: 0; justify-content: center; }
.room-card .rc-actions .icon-btn, .room-card .rc-actions .rc-mais { flex: none; }
.room-card .rc-mais { gap: 4px; padding-right: 8px; }
.room-card .rc-mais svg { width: 14px; height: 14px; }
/* tm.menu (app.js): menu preso a um botão, fora do cartão (não fica por baixo de nada) */
.menu-pop button .g-dot { flex: none; width: 10px; height: 10px; margin: 0 3px; border-radius: 50%; background: var(--gc, var(--muted)); }

/* ---------------- agenda ---------------- */
.h-ic.amber { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.h-ic.amber svg { color: var(--warn) !important; }

/* ---------------- salvar chat e imagens ---------------- */
.pane-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--border); font-size: calc(12px * var(--tl, 1)); flex: none; }
.pane-bar .link-btn { font-size: calc(12.5px * var(--tl, 1)); }
.pane-bar .link-btn:disabled { opacity: .4; cursor: default; }
.pane-bar .link-btn svg { width: 14px; height: 14px; }
.save-wrap { position: relative; }
.save-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 250px; display: grid; gap: 2px; }
.save-pop b { display: block; font-size: calc(13px * var(--tl, 1)); }
.save-pop small { display: block; font-size: calc(11.5px * var(--tl, 1)); color: var(--muted); }
.left-save { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px auto 4px; padding: 12px 14px; max-width: 460px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: left; }
.left-save > div { flex: 1; min-width: 140px; display: grid; }
.left-save b { font-size: calc(14px * var(--tl, 1)); }
.left-save small { font-size: calc(12px * var(--tl, 1)); color: var(--muted); }
.left-save .ls-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(91, 124, 250, .14); color: var(--accent); }
.left-save .ls-ic svg { width: 18px; height: 18px; }

.left-save { display: grid; grid-template-columns: auto 1fr; }
.left-save .ls-btns { grid-column: 1 / -1; display: flex; gap: 8px; }
.left-save .ls-btns .btn { flex: 1; }

/* =====================================================================================
   FASE 8 — área logada: menu lateral + páginas + componentes padrão (block, kpi, empty-state, skeleton)
   ===================================================================================== */
.app-shell { --side-w: 248px; min-height: 100vh; background: radial-gradient(1200px 500px at 70% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--bg); }
.app-side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 40; display: flex; flex-direction: column; gap: 14px; padding: 16px 12px; background: var(--bg-2); border-right: 1px solid var(--border); overflow-y: auto; }
.app-side-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.app-side-close { display: none; }
.app-new { height: var(--h-btn-lg); }
.app-new svg { width: 18px; height: 18px; }
.app-nav { display: grid; gap: 2px; }
.app-nav a { position: relative; display: flex; align-items: center; gap: 11px; height: var(--h-item); padding: 0 12px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: calc(13.5px * var(--tl, 1)); transition: background .15s, color .15s; }
.app-nav a svg { width: 18px; height: 18px; flex: none; }
.app-nav a:hover { background: var(--surface); color: var(--text); }
.app-nav a.active { background: var(--accent-soft); color: var(--text); }
.app-nav a.active::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.app-nav a.active svg { color: var(--accent); }
.an-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-nav small { font-size: calc(10px * var(--tl, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); opacity: .7; }
.nav-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: calc(11px * var(--tl, 1)); font-weight: 700; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.nav-badge.live { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.app-side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.app-main { margin-left: var(--side-w); min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.app-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 clamp(16px, 3vw, 32px); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.app-top h1 { flex: 1; min-width: 0; margin: 0; font-size: calc(19px * var(--tl, 1)); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-burger { display: none; }
.app-content { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 22px clamp(16px, 3vw, 32px) 60px; min-width: 0; }
.app-content .rooms-page { max-width: none; padding: 0; margin: 0; }
.app-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, .55); }
.page-loading { padding: 40px; text-align: center; }

/* cabeçalho padrão de página */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head > p { margin: 0; max-width: 640px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.app-content .rooms-head { align-items: center; margin-bottom: 18px; }

/* bloco padrão (cartão com cabeçalho) */
.block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; display: flex; flex-direction: column; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 0; flex-wrap: wrap; }
.block-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: calc(15px * var(--tl, 1)); min-width: 0; }
.block-actions { display: flex; align-items: center; gap: 4px; }
.block-actions .link-btn { display: inline-flex; align-items: center; gap: 4px; }
.block-actions .link-btn svg { width: 13px; height: 13px; }
.block-body { padding: 12px 16px 16px; min-width: 0; flex: 1; }
.b-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); flex: none; }
.b-ic svg, .kpi-ic svg { width: 16px; height: 16px; }
.b-ic.amber, .kpi-ic.amber { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.b-ic.teal, .kpi-ic.teal { background: color-mix(in srgb, var(--accent-2) 12%, transparent); color: var(--accent-2); }
.b-ic.green, .kpi-ic.green { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.b-ic.violet, .kpi-ic.violet { background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); }

/* indicadores */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.kpi > div { display: grid; min-width: 0; }
.kpi small { font-size: calc(12px * var(--tl, 1)); color: var(--muted); font-weight: 600; }
.kpi b { font-size: calc(26px * var(--tl, 1)); line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi span:not(.kpi-ic) { font-size: calc(12px * var(--tl, 1)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); flex: none; }
.kpi-ic svg { width: 20px; height: 20px; }

/* estado vazio e carregando */
.empty-state { display: grid; justify-items: center; gap: 10px; padding: 26px 12px; text-align: center; color: var(--muted); }
.empty-state > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--surface-2); }
.empty-state > span svg { width: 22px; height: 22px; }
.empty-state p { margin: 0; line-height: 1.55; }
.empty-state b { color: var(--text); }
.skeleton { display: grid; gap: 10px; padding: 6px 0; width: 100%; }
.skeleton i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: skel 1.3s ease-in-out infinite; }
.skeleton i:nth-child(2) { width: 80%; } .skeleton i:nth-child(3) { width: 60%; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* painel */
.dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.dash-hello h2 { margin: 0 0 4px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; }
.dash-hello p { margin: 0; }
.dash-hello .eyebrow { text-transform: capitalize; letter-spacing: .02em; }
.dash-hello .wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.4s ease-in-out 1; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dash-grid .span-2 { grid-column: 1 / -1; }
/* painel: conversas recentes e quem está online (T_CHAT) */
.dash-cv-av { position: relative; flex: none; display: grid; }
.dash-cv-av .avatar { width: 38px; height: 38px; }
.dash-cv-g { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border-radius: 50%; }
.dash-cv-g svg { width: 18px; height: 18px; }
.dash-cv-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid var(--surface); }
.dash-meets { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dash-meets button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; text-align: left; color: var(--text); }
.dash-meets button:hover { background: var(--surface-2); border-color: var(--border); }
.dm-main { flex: 1; min-width: 0; display: grid; }
.dm-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(13.5px * var(--tl, 1)); }
.dm-main small { font-size: calc(12px * var(--tl, 1)); color: var(--muted); }
.dm-nums { display: flex; gap: 12px; font-size: calc(12px * var(--tl, 1)); color: var(--muted); white-space: nowrap; }
.dm-nums span { display: inline-flex; align-items: center; gap: 4px; }
.dm-nums svg { width: 12px; height: 12px; }

/* conta */
.account-grid .block-body { display: grid; }
.acc-profile { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.acc-profile > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.acc-profile b { font-size: calc(18px * var(--tl, 1)); }
.acc-profile small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); }
.avatar-xl { width: 72px; height: 72px; font-size: calc(26px * var(--tl, 1)); }
.acc-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.acc-btns svg, .acc-rows svg { width: 15px; height: 15px; }
.acc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.acc-stats a { display: grid; padding: 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); text-align: center; }
.acc-stats a:hover { border-color: var(--border-2); }
.acc-stats b { font-size: calc(24px * var(--tl, 1)); font-weight: 800; }
.acc-stats small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.acc-rows { display: grid; gap: 12px; }
.acc-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.acc-rows > div > span { display: grid; min-width: 0; flex: 1 1 200px; }
.acc-rows small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.acc-name { display: flex; gap: 6px; flex: 1 1 220px; max-width: 320px; }
.acc-name input { flex: 1; min-width: 0; height: var(--h-btn); padding: 0 12px; border-radius: var(--r-btn); background: var(--bg-2); border: 1px solid var(--border); outline: 0; }
.acc-name input:focus { border-color: var(--accent); }
.btn-danger-ghost { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger-text); }
.btn-danger-ghost:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); }

/* responsivo da área logada */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .app-side { transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow); width: min(290px, 86vw); }
  .app-shell.drawer-open .app-side { transform: none; }
  .app-side-close, .app-burger { display: grid; }
  .app-main { margin-left: 0; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .app-top .clock { display: none; }
}
@media (max-width: 560px) {
  .app-top { height: 56px; gap: 8px; }
  .app-top h1 { font-size: calc(17px * var(--tl, 1)); }
  .app-content { padding-top: 16px; }
  .kpi { padding: 12px; gap: 10px; }
  .kpi b { font-size: calc(22px * var(--tl, 1)); }
  .kpi-ic { width: 36px; height: 36px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .dm-nums { flex-direction: column; gap: 2px; align-items: flex-end; }
  .acc-stats b { font-size: calc(20px * var(--tl, 1)); }
}

.dash-hello .eyebrow { text-transform: none; }

.account-grid .block-body { align-content: start; }
@media (max-width: 560px) {
  .kpi { flex-direction: column; align-items: flex-start; gap: 8px; }
  .kpi-ic { width: 32px; height: 32px; border-radius: 10px; }
  .kpi-ic svg { width: 16px; height: 16px; }
  .kpi span:not(.kpi-ic) { white-space: normal; }
  .kpi small { line-height: 1.3; }
}

/* =====================================================================================
   painel do centro (quadro branco) e tabelas
   ===================================================================================== */
.mk-chart { flex: 1.3 1 0; min-width: 0; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.mk-chart-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--border); min-height: 42px; }
.mk-chart-head b { font-size: calc(13.5px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-chart-head small { flex: 1; color: var(--muted); font-size: calc(12px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-chart-ic { color: var(--ok); }
.mk-chart-ic svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .room-body .mk-chart { flex: 1 1 55%; min-height: 240px; }
}
/* linha com campo e botão */
.mk-row { display: flex; gap: 6px; }
.mk-row input { flex: 1; min-width: 0; }
.mk-row .btn { flex: none; }

.ops-table-wrap { overflow-x: auto; }
.ops-table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--tl, 1)); min-width: 560px; }
.ops-table th { text-align: left; font-size: calc(11px * var(--tl, 1)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ops-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ops-table tr:last-child td { border-bottom: 0; }
.ops-table .num { font-variant-numeric: tabular-nums; text-align: right; }
.ops-table td small { display: block; color: var(--muted); font-size: calc(11.5px * var(--tl, 1)); }
.o-tag.o-win { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.o-tag.o-loss { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger-text); }
.o-tag.o-open { background: var(--accent-soft); color: var(--accent); }
.pos { color: var(--ok); } .neg { color: var(--danger-text); }

/* =====================================================================================
   formulários das páginas (abas, campos em linha)
   ===================================================================================== */
.es-edit-head h2 { flex: 1; margin: 0; font-size: calc(18px * var(--tl, 1)); min-width: 160px; }
.es-edit-head [data-es-cancel] svg { transform: rotate(180deg); }
.es-form { display: grid; gap: 12px; }
.es-form .field { margin: 0; }
.es-form textarea { padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font: inherit; resize: vertical; outline: 0; }
.es-form textarea:focus { border-color: var(--accent); }
.es-row { display: flex; gap: 10px; flex-wrap: wrap; }
.es-row > .field { flex: 1 1 140px; }
.es-checks { display: flex; flex-wrap: wrap; gap: 6px 12px; }

/* =====================================================================================
   FASE 4 — mídia: quadro branco, anotação, gravação, legendas, salas em grupos
   ===================================================================================== */
.wb-panel .wb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.wb-panel .wb-tools:empty { display: none; }
.wb-body { flex: 1; min-height: 0; position: relative; background: var(--papel); }
.wb-body canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }   /* na fita lateral não cabe: a barra só aparece no vídeo grande */
/* legendas */
.cap-box { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 22; width: min(900px, calc(100% - 24px)); display: grid; gap: 4px; pointer-events: none; }
.cap-box:empty { display: none; }

/* =====================================================================================
   FASE 5 — negócio: marca d'água, grupos, admin, conta
   ===================================================================================== */
.wm-layer { position: absolute; inset: 0; z-index: 21; pointer-events: none; overflow: hidden; }
.wm-layer span { position: absolute; transform: rotate(-18deg); color: rgba(255, 255, 255, .16); font-size: clamp(14px, 2vw, 22px); font-weight: 800; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: left 1.5s, top 1.5s; user-select: none; }
.chat-form { position: relative; }
.tu-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tu-add input { height: var(--h-btn); padding: 0 10px; border-radius: var(--r-btn); background: var(--bg-2); border: 1px solid var(--border); color: var(--text); flex: 1 1 160px; min-width: 0; }
.tu-add { flex-wrap: wrap; margin-bottom: 12px; }
.dash-meets a { display: block; color: inherit; }
.ad-search { margin-bottom: 12px; max-width: 420px; }
.ad-search input { flex: 1; height: var(--h-btn); padding: 0 12px; border-radius: var(--r-btn); background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.ops-table select { height: var(--h-btn); border-radius: var(--r-btn); background: var(--bg-2); border: 1px solid var(--border); color: var(--text); }
.ad-plans input:not([type=checkbox]) { width: 100%; min-width: 60px; height: var(--h-btn); padding: 0 6px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); }
.conta-extra { margin-top: 14px; }
@keyframes dk-flash { 0%, 100% { box-shadow: var(--shadow-sm); } 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent), var(--shadow-sm); border-color: var(--accent); } }

/* menu do dashboard */


/* =====================================================================================
   DESIGN v2 — padrão visual refinado (vale para todos os temas)
   ===================================================================================== */
html { -webkit-text-size-adjust: 100%; }
body { font-feature-settings: "cv02", "cv03", "cv04", "cv11"; text-rendering: optimizeLegibility; letter-spacing: -.003em; background: var(--bg); color: var(--text); }
h1, h2, h3, .home h1, .dash-hello h2, .app-top h1, .sec-head h2 { font-family: var(--font-display); letter-spacing: -.025em; }
small { font-size: max(12px, .8333em); }   /* IMP 02/11: o <small> padrão do navegador dava 11,67 px; texto de apoio tem 12 px no mínimo (docs/design.md) */
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--surface-4) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }   /* 28/10: anel de 2 px com 2 px de folga, igual em todo controle */

/* botões (tamanhos: bloco "buttons" do começo e tokens do :root) */
.btn-ghost { background: var(--surface-2); border-color: var(--border); color: var(--text); box-shadow: 0 1px 0 color-mix(in srgb, var(--tint) 4%, transparent) inset; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border-2); }
.btn-stop, .btn-danger-ghost { background: var(--danger-soft); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.icon-btn { transition: background .15s, color .15s; }
.link-btn { font-weight: 600; transition: color .15s, background .15s; }

/* campos */
input, select, textarea { font: inherit; color: var(--text); }
.field input, .field select, .field textarea, .tl-label-in, .es-form textarea {
  background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus, .tl-label-in:focus, .es-form textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); outline: 0;
}
input::placeholder, textarea::placeholder { color: var(--muted); }   /* IMP 02/11: a 80% dava 4,1:1 sobre o campo (#16212b); a cor cheia dá 5,4:1 */
select option { background: var(--surface); color: var(--text); }

/* cartões e blocos */
.card, .block, .tool-card, .kpi, .modal-inner {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 2.5%, var(--surface)), var(--surface) 38%);
  border: 1px solid var(--border);
}
.block, .kpi, .card { box-shadow: var(--shadow-sm); }
.block-head h2 { font-family: var(--font-display); font-weight: 700; }
.kpi b { font-family: var(--font-display); }
.toast { background: var(--glass-strong); color: var(--text); border: 1px solid var(--border); backdrop-filter: blur(14px); box-shadow: var(--shadow-sm); font-weight: 550; }

/* marca */
.brand-mark { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28); }
.brand-name b, .room-eyebrow b { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); -webkit-background-clip: text; background-clip: text; }

/* sala: barra superior e controles */
.room { background: radial-gradient(1200px 520px at 50% -12%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%), var(--bg); }
.room-top { background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }   /* (sem backdrop-filter: ficava sobre o vídeo ao vivo e borrava a cada quadro) */
.badge { background: var(--surface); border-color: var(--border); }
.ctrl { background: var(--surface-2); border: 1px solid var(--border); box-shadow: 0 1px 0 color-mix(in srgb, var(--tint) 5%, transparent) inset; }
.ctrl:hover { background: var(--surface-3); border-color: var(--border-2); }
.ctrl.off, .ctrl.danger { background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 88%, var(--branco) 12%), var(--danger)); border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--danger) 30%, transparent); }
.ctrl.on { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, var(--branco) 12%), var(--accent)); border-color: transparent; }
.ctrl.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.ctrl.ghost:hover, .ctrl.ghost.active { background: var(--surface-2); border-color: var(--border); }
.dock { background: color-mix(in srgb, var(--bg) 88%, transparent); border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.tile { background: var(--stage-bg); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.side { background: var(--surface); }

/* tema claro: ajustes do que foi desenhado para fundo escuro */
[data-theme="claro"] .home-bg .grid-lines { opacity: .6; }
[data-theme="claro"] .contact-card { box-shadow: var(--shadow-sm); }
[data-theme="claro"] .tile .t-label, [data-theme="claro"] .tile .t-actions button { color: var(--branco); }
[data-theme="claro"] .wm-layer span { color: rgba(15, 23, 42, .14); text-shadow: none; }

/* seletor de temas */
.theme-btn { display: inline-grid; place-items: center; width: var(--h-btn); height: var(--h-btn); border-radius: var(--r-btn); border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.theme-btn:hover { border-color: var(--border-2); background: var(--surface-2); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-pop { position: fixed; z-index: 200; width: 290px; padding: 12px; display: grid; gap: 6px; }
.theme-pop b { font-family: var(--font-display); font-size: calc(14px * var(--tl, 1)); margin: 0 4px 4px; }
.theme-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text); text-align: left; font: inherit; }
.theme-opt:hover { background: var(--surface-2); }
.theme-opt.active { border-color: var(--accent); background: var(--accent-soft); }
.theme-sw { position: relative; width: 54px; height: 36px; border-radius: 9px; overflow: hidden; flex: none; border: 1px solid rgba(127, 127, 127, .25); }
.theme-sw i { position: absolute; }
.theme-sw .s-bg { inset: 0; }
.theme-sw .s-card { left: 6px; top: 6px; width: 26px; height: 24px; border-radius: 5px; }
.theme-sw .s-acc { right: 6px; top: 8px; width: 14px; height: 8px; border-radius: 4px; }
.theme-sw .s-acc2 { right: 6px; bottom: 8px; width: 14px; height: 8px; border-radius: 4px; }
.theme-opt span { display: grid; }
.theme-opt small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.theme-grid .theme-opt { border-color: var(--border); }

/* =====================================================================================
   HOME v2 — site principal refeito
   ===================================================================================== */
.home-v2 { position: relative; overflow: clip; }
.home-v2 .topnav { position: sticky; top: 0; z-index: 20; gap: 16px; transition: background .2s, box-shadow .2s; }
.home-v2 .topnav.scrolled { background: var(--glass-strong); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--border); }
.home-v2 .topnav-right { display: flex; align-items: center; gap: 10px; }
.home-bg .g1 { background: radial-gradient(circle, var(--hero-glow-1), transparent 65%); }
.home-bg .g2 { background: radial-gradient(circle, var(--hero-glow-2), transparent 65%); }
.home2 { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 40px; display: grid; gap: clamp(56px, 9vh, 104px); }
.home2 > * { min-width: 0; }

/* apresentação */
.hero2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-top: clamp(20px, 5vh, 56px); }
.hero2 h1 { font-size: clamp(36px, 5vw, 62px); line-height: 1.04; font-weight: 800; margin: 20px 0 16px; }
.hero2 .lead { max-width: 560px; margin: 0 0 28px; font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.6; color: var(--text-soft); }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0 0; padding: 0; color: var(--muted); font-size: calc(13px * var(--tl, 1)); }
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 16px; height: 16px; color: var(--accent-2); }



/* seções */
.sec2 { scroll-margin-top: 90px; }
.sec2 .sec-head { text-align: center; max-width: 700px; margin: 0 auto 34px; }
.sec2 .sec-head h2 { font-size: clamp(26px, 3.2vw, 40px); margin: 0 0 10px; line-height: 1.12; }
.sec2 .sec-head .muted { font-size: calc(15.5px * var(--tl, 1)); line-height: 1.6; }


.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 1080px; margin: 0 auto; }
.plan2 { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); }
.plan2.featured { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 55%); box-shadow: 0 26px 60px color-mix(in srgb, var(--accent) 18%, transparent); }
.plan2 .p-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; font-size: calc(11.5px * var(--tl, 1)); font-weight: 700; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); white-space: nowrap; }
.plan2 h3 { margin: 0; font-size: calc(18px * var(--tl, 1)); }
.plan2 .p-price { display: flex; align-items: baseline; gap: 6px; }
.plan2 .p-price b { font-family: var(--font-display); font-size: calc(38px * var(--tl, 1)); letter-spacing: -.03em; }
.plan2 .p-price small { color: var(--muted); }
.plan2 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; }
.plan2 li { display: flex; gap: 10px; font-size: calc(13.5px * var(--tl, 1)); color: var(--text-soft); }
.plan2 li svg { width: 16px; height: 16px; color: var(--ok); flex: none; margin-top: 2px; }
.faq { max-width: 820px; margin: 34px auto 0; display: grid; gap: 10px; }
.faq details { border-radius: 14px; background: var(--surface); border: 1px solid var(--border); padding: 0 18px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 650; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: calc(20px * var(--tl, 1)); line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 16px; color: var(--text-soft); line-height: 1.6; font-size: calc(14px * var(--tl, 1)); }


.home-foot2 { position: relative; z-index: 1; max-width: 1240px; margin: 40px auto 0; padding: 36px clamp(16px, 4vw, 40px) calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(2, 1fr); gap: 24px; }
.foot-grid > div { display: grid; gap: 8px; align-content: start; }
.foot-grid b { font-size: calc(13px * var(--tl, 1)); margin-bottom: 4px; }
.foot-grid a, .foot-grid button { color: var(--muted); font-size: calc(13.5px * var(--tl, 1)); background: none; border: 0; padding: 0; text-align: left; font: inherit; font-size: calc(13.5px * var(--tl, 1)); cursor: pointer; }
.foot-grid a:hover, .foot-grid button:hover { color: var(--text); }
.foot-brand p { margin: 6px 0 0; font-size: calc(13px * var(--tl, 1)); max-width: 280px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); font-size: calc(12.5px * var(--tl, 1)); color: var(--muted); }

@media (max-width: 1000px) {
  .hero2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .home-v2 .topnav { flex-wrap: wrap; }
  .home-v2 .site-nav { order: 3; width: 100%; overflow-x: auto; }
  .home-v2 .clock { display: none; }
  .sec2 { scroll-margin-top: 130px; }
}
@media (max-width: 620px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .home-v2 .site-nav button { flex: 0 0 auto; padding: 0 12px; }
}

/* =====================================================================================
   LOGO T_ROOM — "T" formado por uma vela de gráfico, uma vela verde, uma vermelha e o "_" em destaque
   ===================================================================================== */
.brand-mark {
  position: relative; display: grid; place-items: center; overflow: visible;
  background:
    radial-gradient(120% 90% at 18% 0%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 62%),
    linear-gradient(150deg, var(--marca-fundo-a), var(--marca-fundo-b) 78%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, rgba(255, 255, 255, .12)), 0 8px 22px color-mix(in srgb, var(--accent) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.brand-mark svg.logo-t, .pip-top .brand-mark.sm svg.logo-t { width: 72%; height: 72%; fill: var(--branco); stroke: none; overflow: visible; }
@keyframes logo-cursor { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .35; } }

.brand-name, .room-eyebrow { letter-spacing: .1em; }
.brand-name b, .room-eyebrow b { font-weight: 900; }
.brand-name em, .room-eyebrow em { font-weight: 900; color: var(--accent-2); text-shadow: 0 0 14px color-mix(in srgb, var(--accent-2) 65%, transparent); margin: 0 .06em 0 .01em; }
[data-theme="claro"] .brand-name em, [data-theme="claro"] .room-eyebrow em { text-shadow: none; }

/* ícones nunca encolhem dentro de botões (o "Entrar" e a seta da conta viravam um pontinho) */
.account-btn, .theme-btn { flex: 0 1 auto; white-space: nowrap; min-width: 0; }
.account-btn svg, .account-btn .avatar, .btn svg, .icon-btn svg, .ctrl svg, .theme-btn svg, .dk-btn svg, .dk-ic svg, .tc-ic svg { flex: none; }
.account-btn .acc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
@media (max-width: 620px) { .account-btn .acc-name { max-width: 90px; } }
.topnav-right .clock { white-space: nowrap; }

/* tela cheia de um vídeo só (botão ⛶ do vídeo): ocupa o monitor inteiro, imagem inteira sem cortar */
.tile:fullscreen {
  position: fixed !important; inset: 0 !important; left: 0 !important; top: 0 !important; transform: none !important;
  width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--preto) !important; z-index: auto;
}
.tile:fullscreen video { object-fit: contain !important; background: var(--preto); }
.tile:fullscreen .rs-handle, .tile:fullscreen .t-size, .tile:fullscreen [data-act="pin"], .tile:fullscreen .t-mod { display: none !important; }
.tile:fullscreen .t-actions { top: 16px; right: 16px; }
.tile:fullscreen::after {
  content: "Esc ou dois cliques para sair da tela cheia"; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  padding: 7px 14px; border-radius: 999px; background: rgba(8, 10, 14, .72); color: var(--branco); font: 600 calc(13px * var(--tl, 1))/1.2 Inter, system-ui, sans-serif;
  pointer-events: none; animation: fs-hint 3.5s ease forwards;
}
@keyframes fs-hint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.tile:fullscreen:hover .t-actions { opacity: 1; }

/* salas grandes: barra de páginas dos vídeos */
.stage-pager {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 999px;
  background: var(--glass-strong); backdrop-filter: blur(12px); border: 1px solid var(--border-2); box-shadow: var(--shadow-sm);
  font-size: calc(12.5px * var(--tl, 1)); color: var(--text-soft); opacity: .55; transition: opacity .15s;
}
.stage-pager button { display: grid; place-items: center; width: var(--h-btn); height: var(--h-btn); border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.stage-pager button[disabled] { opacity: .35; }
.stage-pager button[data-page="-1"] svg { transform: rotate(90deg); }
.stage-pager button[data-page="1"] svg { transform: rotate(-90deg); }
.stage-pager button svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .stage-pager { bottom: 4px; font-size: calc(11.5px * var(--tl, 1)); } }

/* setas de página nas pontas da faixa de participantes */
.pg-arrow {
  position: absolute; z-index: 32; display: grid; place-items: center; gap: 0; padding: 0;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-soft); opacity: .9; transition: opacity .15s, background .15s, color .15s;
}

/* ícone e texto sempre alinhados, com respiro entre eles (o svg é display:block por padrão) */
.link-btn, .tool-card .btn,
.wb-tool, .hb-btn, .tc-head .link-btn, .side-head .link-btn, .empty .btn, .tl-actions .btn {
  display: inline-flex; align-items: center; gap: 7px; line-height: 1.15;
}
.link-btn svg, .wb-tool svg, .hb-btn svg { flex: none; }
.link-btn [data-icon], .hb-btn [data-icon] { display: inline-flex; }

/* seletores: seta própria, afastada da borda, e texto que não encosta nela */
.chat-to-row select, .files-send select, .ops-table select, .field select, .device-row select {
  appearance: none; -webkit-appearance: none; padding-right: 30px; position: relative;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b92a5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-position: right 9px center; background-size: 15px 15px; background-repeat: no-repeat;
}
.chat-to-row select:hover, .field select:hover { border-color: var(--border-2); }
.pg-arrow, .dk-rail-btn { border-radius: 8px; }
[data-theme="claro"] .chat-to-row select, [data-theme="claro"] .field select, [data-theme="claro"] .files-send select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596080' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

/* barra do anfitrião: sem borda colorida e com botões do mesmo tamanho */
.host-bar { border-color: var(--border); background: var(--surface); }
.room .host-bar .hb-btn, .host-bar .hb-btn { height: var(--h-btn); padding: 0 12px; font-size: var(--f-btn-sm); font-weight: 600; }
.host-bar .hb-btn.is-end { margin-left: 8px; }
/* estados só mudam a cor do texto/fundo, mantendo a mesma caixa */
.hb-btn.is-on, .hb-btn.is-off, .hb-btn.is-lock, .hb-btn.is-door, .hb-btn.is-end, .hb-btn.hb-hands { border-width: 1px; }

/* =====================================================================================
   FORMA DOS BOTÕES — retângulos com cantos levemente arredondados em todo o sistema
   (site e sala). Avatares, selos e pontinhos continuam redondos de propósito.
   ===================================================================================== */
:root { --r-btn: 8px; --r-sm: 8px; --r-lg: 12px; }   /* botões: raio 8 (chips e abas em pílula: 99) */

button, .btn, .btn-primary, .btn-ghost, .btn-block, .ctrl, .icon-btn, .link-btn, .hb-btn, .account-btn, .theme-btn, .site-nav button, .site-nav a, .stage-pager button, .stage-pager .p-now, .pg-arrow, .dk-btn, .dk-rail-btn, .wb-tool, .tm-btn, .theme-opt, .plan2 .btn, .home2 .btn, .p-now, input[type="button"], input[type="submit"] {
  border-radius: var(--r-btn);
}
.ctrl, .icon-btn, .wb-color { border-radius: var(--r-btn) !important; }
.tm-btn, .wb-tool, .dk-btn, .dk-rail-btn, .pg-arrow { border-radius: var(--r-btn) !important; }
.plan2 .btn { border-radius: var(--r-btn); }
/* campos acompanham o mesmo desenho */
input:not([type="checkbox"]):not([type="radio"]), select, textarea, .slug-input, .device-row { border-radius: var(--r-btn); }

/* continuam redondos: avatar, ponto de aviso, selo de contagem, carregando */
.avatar, .unread, .dot-live, .live-dot, .spinner, .badge, .nav-badge, .hb-count, .pg-arrow b,
.t-avatar .avatar, .brand-live, .theme-sw i { border-radius: 50%; }
.avatar { border-radius: 50% !important; }

/* tamanho padrão dos ícones por contexto */
.ctrl svg { width: 18px; height: 18px; }
.btn svg, .btn-primary svg, .btn-ghost svg { width: var(--i-btn); height: var(--i-btn); }
.btn-lg svg { width: var(--i-btn-lg); height: var(--i-btn-lg); }
.btn-sm svg { width: var(--i-btn-sm); height: var(--i-btn-sm); }
.icon-btn svg, .link-btn svg, .hb-btn svg,
.dk-btn svg, .dk-rail-btn svg, .stage-pager button svg { width: 16px; height: 16px; }
.tm-btn svg, .t-label svg { width: 14px; height: 14px; }

/* chips e etiquetas também em retângulo (mesma família dos botões) */
.k-lock, .pl-mine, .plan2 .p-badge, .site-nav, .site-nav a, .site-nav button, .theme-opt, .wb-color {
  border-radius: var(--r-sm);
}

/* contadores em retângulo (o pontinho sem número continua redondo) */
.pg-arrow b, .unread, .hb-count, .nav-badge, .badge, .g-chip b, .tab b { border-radius: 6px; }
.unread.dot, .dot-live, .live-dot, .brand-live, .spinner { border-radius: 50%; }

/* topo da sala: grupo de status, acesso e perfil no mesmo desenho retangular */
.rm-profile, .room-access, .stat, .stat-timer, .rm-conn, .host-bar { border-radius: var(--r-btn); }
.rm-profile .avatar { border-radius: 50%; }

/* etiquetas "ao vivo", contadores do menu e afins: retângulo (o pontinho segue redondo) */
.rc-live, .nav-badge { border-radius: var(--r-chip); }
.live-dot, .dot-live { border-radius: 50%; }

/* campos dentro de caixas compostas (prefixo do link, entrar com código, escolher dispositivo):
   quem arredonda é a caixa de fora — o campo interno fica reto para não criar degrau */
.slug-input, .device-row { overflow: hidden; }
.slug-input input, .device-row select, .device-row button { border-radius: 0 !important; border: 0; }
.slug-input .slug-prefix { border-radius: 0; }

/* =====================================================================================
   PADRONIZAÇÃO FINAL — nada mais redondo: chaves liga/desliga, fotos e marcadores
   ===================================================================================== */
.switch .sw { border-radius: 7px; }
.switch .sw::after { border-radius: 5px; }
.avatar, .avatar.avatar-md, .tile .t-avatar .avatar, .rm-profile .avatar, .account-btn .avatar { border-radius: 8px !important; }
.avatar img { border-radius: 8px; }
/* marcadores pequenos viram quadradinhos */
.live-dot, .dot-live, .unread.dot, .brand-live, .tag.grp i, .theme-sw i { border-radius: 3px; }
/* o "carregando" continua girando em círculo (é animação, não botão) */
.spinner { border-radius: 50%; }

/* caixas (cartões, blocos, painéis, janelas e vídeos) num raio único, um pouco maior que o dos botões */
.dk-block, .host-bar, .card, .block, .kpi, .tool-card, .side, .side-tools, .mk-chart, .wb-panel, .stage .tile, .plan2, .cat, .faq details, .empty, .tc, .rc { border-radius: 12px; }
.room .host-bar, .host-bar { border-radius: 12px !important; }
.tile, .stage .tile, #grid .tile, #spotlight .tile { border-radius: 12px !important; }

.logo-t .lb { animation: logo-body 2.4s steps(1) infinite; }
@keyframes logo-pump { 0%, 100% { transform: scaleY(.62); } 25% { transform: scaleY(1); } 50% { transform: scaleY(.8); } 75% { transform: scaleY(1.12); } }
@keyframes logo-body { 0% { fill: var(--vela-alta); } 25% { fill: var(--vela-baixa); } 50% { fill: var(--vela-alta); } 75% { fill: var(--vela-baixa); } }
@keyframes logo-wick { 0% { fill: var(--vela-alta-pavio); } 25% { fill: var(--vela-baixa-pavio); } 50% { fill: var(--vela-alta-pavio); } 75% { fill: var(--vela-baixa-pavio); } }
@media (prefers-reduced-motion: reduce) { .logo-t .lb { animation: none; } .logo-t .lb { fill: var(--vela-alta); } }


/* ---- diálogo de sessão única ---- */
#sess-dlg .modal-inner p { margin: 0; }

/* ---- feed ---- (CSS do agente FEED-CLI, colado pelo coordenador) */
/* ---- feed ---- */
/* T_ Feed (page-feed.js): 3 colunas (perfil | linha do tempo | ao vivo/agenda/grupos); 1240px → perfil em faixa + 2 colunas; 960px → 1 coluna */
.feed-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.feed-left, .feed-right { display: grid; gap: 14px; min-width: 0; position: sticky; top: 80px; }
.feed-center { display: grid; gap: 12px; min-width: 0; }
.fd-emoji { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: calc(15px * var(--tl, 1)); line-height: 1; font-style: normal; flex: none; }

/* cartão do perfil (coluna esquerda) */
.feed-profile { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 20px 16px 14px; }
.feed-profile .avatar-xl { width: 84px; height: 84px; font-size: calc(30px * var(--tl, 1)); margin-bottom: 6px; }
.feed-profile > b { font-size: calc(16px * var(--tl, 1)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-profile > small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); }
.fp-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.fp-meta { margin: 2px 0 0; }
.feed-links { display: grid; gap: 2px; width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.feed-links a { display: flex; align-items: center; gap: 10px; height: var(--h-item); padding: 0 10px; border-radius: 10px; color: var(--text-soft); font-weight: 600; font-size: calc(13px * var(--tl, 1)); text-align: left; min-width: 0; }
.feed-links a:hover { background: var(--surface-2); color: var(--text); }
.feed-links svg, .feed-links .fd-emoji { width: 16px; height: 16px; color: var(--accent); flex: none; }
.tag.fd-plan { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); border-color: color-mix(in srgb, var(--accent-2) 30%, transparent); }
.tag.fd-grp { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.tag.fd-pinned { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }

/* composer */
.feed-composer { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.fc-main { flex: 1; min-width: 0; display: grid; gap: 10px; }
.fc-text { width: 100%; min-height: 96px; max-height: none; resize: none; transition: height .08s ease-out; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: calc(14.5px * var(--tl, 1)); line-height: 1.45; outline: 0; }
.fc-text:focus { border-color: var(--accent); }
.fc-text::placeholder { color: var(--muted); }
.fc-preview { position: relative; justify-self: start; max-width: 100%; }
.fc-preview img { display: block; max-width: 100%; max-height: 240px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-2); }
.fc-preview .icon-btn { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, .55); color: var(--branco); }
.fc-preview .icon-btn:hover { background: rgba(0, 0, 0, .75); }
.fc-uploading { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.fc-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fc-bar .spacer { flex: 1; }
.fc-target { display: inline-flex; align-items: center; gap: 6px; height: var(--h-btn-sm); padding: 0 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: calc(12.5px * var(--tl, 1)); color: var(--muted); cursor: pointer; max-width: 100%; }
.fc-target svg, .fc-target .fd-emoji { width: 15px; height: 15px; flex: none; }
.fc-target select { background: none; border: 0; outline: 0; color: var(--text); font-weight: 600; font-size: calc(12.5px * var(--tl, 1)); max-width: 160px; cursor: pointer; }
.fc-count { font-size: calc(11.5px * var(--tl, 1)); color: var(--muted); font-variant-numeric: tabular-nums; }
.fc-count.over { color: var(--danger-text); font-weight: 700; }

/* filtros por grupo e aviso de novas publicações */
.feed-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.feed-filters .chip-btn, .fs-groups .chip-btn { display: inline-flex; align-items: center; gap: 6px; }
.feed-new { position: sticky; top: 72px; z-index: 5; justify-self: center; display: inline-flex; align-items: center; gap: 8px; height: var(--h-btn); padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: calc(13px * var(--tl, 1)); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); }
.feed-new svg, .feed-new .fd-emoji { width: 15px; height: 15px; }
.feed-new:hover { background: var(--accent-hover); }

/* linha do tempo */
.feed-timeline { display: grid; gap: 12px; }
.post { display: grid; gap: 10px; padding: 14px 16px; }
.post.is-pinned { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.post-head { display: flex; align-items: center; gap: 10px; }
.post-who { flex: 1; min-width: 0; display: grid; gap: 1px; }
.post-who b { font-size: calc(14px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-who small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.post-who small .tag { height: 20px; padding: 0 7px; font-size: calc(10.5px * var(--tl, 1)); }
.post-who small .tag svg, .post-who small .tag .fd-emoji { width: 11px; height: 11px; font-size: calc(11px * var(--tl, 1)); }
.post-menu { display: flex; gap: 2px; flex: none; }
.post-menu .icon-btn.active { color: var(--warn); }
.post-text { font-size: calc(14.5px * var(--tl, 1)); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-text a, .pc-bubble a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.post-img { display: block; width: 100%; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-2); cursor: zoom-in; }
.post-img img { display: block; width: 100%; max-height: 520px; object-fit: contain; }
.post-bar { display: flex; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.post-act { display: inline-flex; align-items: center; gap: 6px; height: var(--h-btn); padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); font-weight: 600; font-size: calc(13px * var(--tl, 1)); transition: background .15s, color .15s; }
.post-act:hover { background: var(--surface-2); color: var(--text); }
.post-act svg, .post-act .fd-emoji { width: 17px; height: 17px; font-size: calc(16px * var(--tl, 1)); }
.post-act em { font-style: normal; font-weight: 500; }
.post-act.is-liked { color: var(--danger-text); }
.post-act.is-liked svg { fill: currentColor; }
.post-act.is-open { background: var(--accent-soft); color: var(--text); }
.post-act.pop svg, .post-act.pop .fd-emoji { animation: fd-pop .3s ease; }
@keyframes fd-pop { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* comentários */
.post-comments { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pc-item { display: flex; align-items: flex-start; gap: 8px; }
.pc-item .avatar, .pc-form .avatar { width: 28px; height: 28px; font-size: calc(11px * var(--tl, 1)); }
.pc-bubble { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); }
.pc-bubble b { font-size: calc(13px * var(--tl, 1)); }
.pc-bubble small { color: var(--muted); font-size: calc(11.5px * var(--tl, 1)); margin-left: 6px; }
.pc-bubble p { margin: 3px 0 0; font-size: calc(13.5px * var(--tl, 1)); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-item .icon-btn { flex: none; }
.pc-item .icon-btn svg, .pc-item .icon-btn .fd-emoji { width: 14px; height: 14px; font-size: calc(13px * var(--tl, 1)); }
.pc-empty { margin: 0; }
.pc-form { display: flex; align-items: center; gap: 8px; }
.pc-form input { flex: 1; min-width: 0; height: var(--h-btn); padding: 0 14px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); outline: 0; font-size: calc(13.5px * var(--tl, 1)); }
.pc-form input:focus { border-color: var(--accent); }
.feed-more { justify-self: center; }

/* barra lateral direita: ao vivo agora, próximas reuniões, seus grupos */
.fs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fs-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); min-width: 0; }
.fs-item.is-live { border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.fs-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); flex: none; }
.fs-ic svg, .fs-ic .fd-emoji { width: 16px; height: 16px; }
.fs-ic.green { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.fs-ic.amber { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.fs-main { flex: 1; min-width: 0; display: grid; }
.fs-main b { font-size: calc(13px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-main small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: calc(11.5px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-main small .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.fs-item .btn { height: var(--h-btn-sm); padding: 0 12px; font-size: calc(12.5px * var(--tl, 1)); flex: none; }
.fs-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-groups .chip-btn svg, .fs-groups .chip-btn .fd-emoji { width: 13px; height: 13px; }
.fs-hint { margin: 8px 0 0; }
.feed-right .empty-state { padding: 18px 8px; }
.feed-right .empty-state > span { width: 40px; height: 40px; }

/* responsivo do feed */
@media (max-width: 1240px) {
  .feed-grid { grid-template-columns: minmax(0, 1fr) 280px; }
  .feed-left { grid-column: 1 / -1; position: static; }
  .feed-profile { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; text-align: left; align-items: center; column-gap: 14px; row-gap: 2px; padding: 14px 16px; }
  .feed-profile .avatar-xl { grid-row: 1 / 5; width: 56px; height: 56px; font-size: calc(20px * var(--tl, 1)); margin: 0; }
  .fp-tags { justify-content: flex-start; }
  .feed-links { grid-column: 3; grid-row: 1 / 5; grid-auto-flow: column; margin: 0; padding: 0; border: 0; width: auto; align-self: center; }
}
@media (max-width: 960px) {
  .feed-grid { grid-template-columns: minmax(0, 1fr); }
  .feed-right { position: static; }
  .feed-new { top: 64px; }
}
@media (max-width: 560px) {
  .feed-profile { grid-template-columns: auto minmax(0, 1fr); }
  .feed-links { grid-column: 1 / -1; grid-row: auto; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
  .feed-links a { font-size: calc(12.5px * var(--tl, 1)); padding: 0 8px; }
  .feed-composer { padding: 12px; gap: 10px; }
  .feed-composer > .avatar { display: none; }
  .fc-bar .fc-img span { display: none; }
  .fc-target > span { display: none; }
  .post { padding: 12px; }
  .post-act { padding: 0 10px; }
  .post-act em { display: none; }
  .fs-main small { white-space: normal; }
}

/* ---- admin: grupos/sessões/feed ---- (CSS do agente CLIENT-PAGES, colado pelo coordenador) */
/* ---- admin: grupos/sessões/feed ---- */
.ad-note { margin: -4px 0 12px; }
.ad-mini { width: var(--h-btn-sm); height: var(--h-btn-sm); border-radius: var(--r-btn); vertical-align: middle; margin-left: 4px; opacity: .6; }
.ad-mini:hover { opacity: 1; }
.ad-mini svg { width: 13px; height: 13px; }
.ad-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ad-actions .btn { height: var(--h-btn-sm); padding: 0 10px; font-size: calc(12px * var(--tl, 1)); }
.ad-actions .btn svg { width: var(--i-btn-sm); height: var(--i-btn-sm); }
.ad-tip { display: inline-flex; }   /* dica do botão desligado (Excluir): o title fica no invólucro */
.ad-excluir-lista { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: calc(13px * var(--tl, 1)); }
.ad-excluir .field b { color: var(--danger-text); }
/* paginação da lista de contas (Admin > Usuários) */
.ad-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.ad-pager .btn { min-width: var(--h-btn); padding: 0 10px; }
.ad-pager .btn[disabled] { opacity: .45; }
.ad-pager-gap { padding: 0 2px; }
.ad-users-count { margin-top: 10px; }
.ad-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 340px; white-space: normal; }
.ad-sel { height: var(--h-btn); padding: 0 6px; border-radius: 8px; font-size: calc(12px * var(--tl, 1)); background: var(--bg-2); border: 1px dashed var(--border-2); color: var(--muted); }
.ad-pending { margin-bottom: 12px; }
.ad-pending > small { flex-basis: 100%; }
.ad-rooms .tr-check small { color: var(--muted); font-size: calc(11px * var(--tl, 1)); margin-left: 4px; }
.ad-classes-checks { display: grid; gap: 4px; min-width: 150px; white-space: normal; }
.ops-table.ad-users td { vertical-align: top; }
.ops-table.ad-users td:nth-child(4), .ops-table.ad-users td:nth-child(5) { white-space: nowrap; }   /* datas curtas (26/10/26) numa linha só: linha da tabela com ~58 px, não ~99 */
.ops-table.ad-users td.ad-acoes-cel { width: 1%; text-align: right; }   /* ações da conta num menu ⋯ (tm.menu) */
.ad-posts { display: grid; gap: 10px; }
.ad-post { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); }
.ad-post.pinned { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.ad-post-main { display: grid; gap: 6px; min-width: 0; }
.ad-post-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ad-post-head small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.ad-post-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: calc(13.5px * var(--tl, 1)); line-height: 1.5; max-height: 7.5em; overflow: hidden; }
.ad-post-img img { display: block; max-height: 160px; max-width: 100%; border-radius: 10px; border: 1px solid var(--border); }
.ad-post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
@media (max-width: 640px) { .ad-post { grid-template-columns: 1fr; } .ad-post > .avatar { display: none; } }

/* títulos das contas (Administrador, Professor, Trader, Suporte, Membro): perfil, feed e administração */
.user-title { --tc: var(--muted); display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; font-size: calc(11px * var(--tl, 1)); font-weight: 700; letter-spacing: .03em; line-height: 1.5; white-space: nowrap;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); }
.user-title { width: fit-content; max-width: max-content; justify-self: start; align-self: center; flex: none; }
.user-title.t-admin { --tc: var(--danger-text); }   /* IMP 02/11: #f43f5e dava 3,7:1 sobre o selo */
.acc-profile .acc-handle { display: block; font-weight: 600; color: var(--neon); }

/* Minhas salas → Participantes (quem pode entrar) */
/* a caixa inteira cabe na tela: sem rolagem para os lados (o texto quebra linha) */
.modal.ra-dlg { width: min(560px, calc(100vw - 32px)); overflow-x: hidden; }
.ra-dlg .modal-inner { width: auto; min-width: 0; }
.ra-dlg .modal-inner > * { min-width: 0; max-width: 100%; }
.ra-dlg p, .ra-dlg small { overflow-wrap: anywhere; }
.ra-switch span { min-width: 0; }
/* caixas médias (editar cadastro, novo plano): duas colunas cabem sem rolar */
.modal.modal-md { width: min(560px, calc(100vw - 32px)); overflow-x: hidden; }
.modal-md .modal-inner > * { min-width: 0; }
@media (max-width: 520px) { .modal-md .es-row { flex-direction: column; } }
.ra-switch { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 12px; margin: 4px 0 12px; cursor: pointer; }
.ra-switch input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.ra-switch span { display: flex; flex-direction: column; gap: 2px; }
.ra-switch small { color: var(--muted); }
.ra-add { display: flex; gap: 8px; }
.ra-add input { flex: 1; min-width: 0; }
.ra-list { list-style: none; margin: 10px 0; padding: 0; max-height: 44vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.ra-list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: color-mix(in srgb, currentColor 4%, transparent); }
.ra-list li > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ra-list li small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-list li.is-off { opacity: .55; }
.ra-list li.is-pend .avatar { display: inline-grid; place-items: center; font-weight: 700; }
.ra-list .ra-empty { justify-content: center; background: none; }
.ad-gplans { margin-bottom: 10px; }

/* T_ Feed ocupando a largura da tela (sem as faixas vazias dos lados) */
.app-content:has(> .feed-page:not([hidden])) { max-width: none; }
@media (min-width: 1500px) { .feed-grid { grid-template-columns: 300px minmax(0, 1fr) 360px; gap: 20px; } }
/* caixa de publicar: foto ao lado do campo, campo ocupando a largura toda */
.block.feed-composer { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; }
.block.feed-composer > .avatar { flex: none; margin-top: 4px; }
.block.feed-composer > .fc-main { flex: 1 1 auto; width: auto; min-width: 0; }
/* nome e título na mesma linha, selo do tamanho do texto */
.post-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.post-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-name .user-title, .pc-bubble .user-title, .fp-tags .user-title { flex: none; width: auto; margin-left: 0; }
.pc-bubble .user-title { margin-left: 6px; }
.fp-tags .user-title { height: 22px; font-size: calc(11px * var(--tl, 1)); }

/* imagem do post: inteira, no formato original (sem faixas pretas nem corte), centralizada.
   Tamanho padrão: ocupa a largura do post e no máximo 640 px (ou 75% da tela) de altura; imagem pequena não é esticada */
.post-img { display: flex; justify-content: center; align-items: center; width: 100%; border: 0; background: transparent; border-radius: 12px; overflow: visible; }
.post-img img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(640px, 75vh); object-fit: contain;
  border-radius: 12px; border: 1px solid var(--border); background: var(--bg-2); }

/* menu lateral: cada ferramenta é um bloco-botão com o ícone dela num quadro colorido (16/10/2026) */
.nav-card { --nc: var(--accent); margin-top: 8px; height: 52px !important; padding: 0 10px 0 8px !important; gap: 12px !important;
  border: 1px solid var(--border); border-radius: 13px !important; background: color-mix(in srgb, var(--surface) 55%, transparent);
  color: var(--text-soft) !important; font-size: calc(14px * var(--tl, 1)) !important; font-weight: 650 !important; }
.nav-card[hidden] { display: none !important; }
.nav-card .nc-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; color: var(--nc);
  background: linear-gradient(140deg, color-mix(in srgb, var(--nc) 30%, transparent), color-mix(in srgb, var(--nc) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--nc) 35%, transparent); transition: transform .15s; }
.nav-card .nc-ic svg { width: 19px !important; height: 19px !important; color: var(--nc) !important; }
.nav-card:hover { background: var(--surface) !important; border-color: color-mix(in srgb, var(--nc) 45%, var(--border)); color: var(--text) !important; }
.nav-card:hover .nc-ic { transform: scale(1.06); }
.nav-card.active { background: color-mix(in srgb, var(--nc) 12%, var(--surface)) !important; border-color: color-mix(in srgb, var(--nc) 60%, transparent); color: var(--text) !important; }
.nav-card.active::before { background: var(--nc) !important; left: -12px !important; }
.nav-card .nav-badge { margin-left: auto; }
.nc-feed { --nc: #a78bfa; }
.nc-chat { --nc: #38bdf8; }
.nc-world { --nc: #22c55e; }
.nc-admin { --nc: #f43f5e; }

/* programa T_ROOM: entrar pelo navegador (espera a confirmação) */
.auth-app-espera { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 24px; text-align: center; background: var(--surface); border-radius: inherit; animation: aae-in .18s ease-out; }
.auth-app-espera h3 { margin: 4px 0 0; font-size: calc(20px * var(--tl, 1)); }
.auth-app-espera p { margin: 0; color: var(--muted); line-height: 1.5; max-width: 340px; }
.auth-app-espera small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); }
.aae-ic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.aae-ic svg { width: 28px; height: 28px; animation: aae-pulso 1.6s ease-in-out infinite; }
.aae-cod { font: 800 calc(30px * var(--tl, 1)) "JetBrains Mono", ui-monospace, monospace; letter-spacing: 8px; color: var(--accent-text); margin-top: 6px; padding-left: 8px; }
.aae-bts { display: flex; gap: 10px; margin-top: 12px; }
@keyframes aae-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes aae-pulso { 50% { transform: scale(1.12); opacity: .75; } }
.layout-ph { display: none !important; }

/* arrastando: o bloco segue o mouse na hora (sem a animação de posição, que fazia ele ficar para trás) */
.stage .grid .tile.dragging { transition: box-shadow .15s, transform .15s !important; }
@keyframes dkFly { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* efeito Dock do Mac: a ampliação acompanha o mouse com uma transição curta (e volta suave ao sair) */
footer.dock .ctrl, #dk-left.rail .dk-ic { transition: transform .14s cubic-bezier(.2, .8, .2, 1), background .15s, color .15s, border-color .15s; }   /* (sem will-change permanente: 9 camadas ocupando a GPU o tempo todo) */
footer.dock { overflow: visible; }

footer.dock { position: relative; z-index: 25; }

/* ampliação em toda a barra: os cantos deixam o botão ampliado passar da borda (antes cortavam) */
footer.dock .dock-left, footer.dock .dock-center, footer.dock .dock-right { overflow: visible; }

/* etiqueta com o nome da ferramenta ao lado do ícone da coluna (como no Dock do Mac) */
.dk-etiqueta { position: fixed; z-index: 2147482000; transform: translateY(-50%); pointer-events: none; white-space: nowrap;
  padding: 6px 12px; border-radius: 9px; background: var(--surface-3); color: var(--text); font-size: calc(13px * var(--tl, 1)); font-weight: 650;
  border: 1px solid var(--border-2); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); animation: dkEtq .12s ease-out; }
.dk-etiqueta::before { content: ""; position: absolute; top: 50%; left: -5px; width: 9px; height: 9px; transform: translateY(-50%) rotate(45deg);
  background: var(--surface-3); border-left: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); }
.dk-etiqueta[hidden] { display: none; }
@keyframes dkEtq { from { opacity: 0; transform: translate(-4px, -50%); } to { opacity: 1; transform: translateY(-50%); } }

/* etiqueta acima dos botões da barra de baixo (setinha apontando para baixo) */
.dk-etiqueta.etq-cima { transform: translate(-50%, -100%); animation: dkEtqCima .12s ease-out; }
.dk-etiqueta.etq-cima::before { top: auto; bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); border: 0;
  border-right: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); }
@keyframes dkEtqCima { from { opacity: 0; transform: translate(-50%, calc(-100% + 4px)); } to { opacity: 1; transform: translate(-50%, -100%); } }

.dk-etiqueta.etq-cima::before { left: calc(50% + var(--seta, 0px)); }

/* ampliação simples ao passar o mouse (só CSS, sem cálculo: não treme). Cresce a partir da base/centro. */
footer.dock .ctrl, #dk-left.rail .dk-ic { transition: transform .15s cubic-bezier(.2, .8, .2, 1), background .15s, color .15s, border-color .15s; }
footer.dock .ctrl:hover { transform: scale(1.12); transform-origin: center bottom; z-index: 2; }
footer.dock .ctrl:active { transform: scale(1.05); }

/* confirmação do sistema (askConfirm) */
.btn-danger { background: var(--danger); color: var(--branco); border-color: var(--danger); }
.btn-danger:hover { filter: brightness(1.08); }

/* ===== Administração · temas de marca (white-label por usuário) ===== */
.tema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tema-card { display: grid; grid-template-columns: 52px 1fr; gap: 6px 12px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); border-top: 4px solid var(--tp, var(--accent)); }
.tema-card .tema-card-acts { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.tema-card small { display: block; color: var(--muted); }
.tema-logo-box { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; font-weight: 800; color: var(--tp, var(--accent)); }
.tema-logo-box img { width: 100%; height: 100%; object-fit: contain; }
.tema-img-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tema-img-row input[type=file] { display: none; }
.tema-cor-row { display: grid; grid-template-columns: auto 44px 1fr; gap: 10px; align-items: center; padding: 6px 0; }
.tema-cor-row input[type=color] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }
.tema-cor-row input[type=color]:disabled { opacity: .35; cursor: default; }
.tema-cor-row small { display: block; color: var(--muted); }
.tema-prev { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--tb, var(--bg)); }
.tema-prev-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--tb, var(--bg)) 92%, var(--branco)); border-bottom: 2px solid var(--ta, var(--tp)); }
.tema-prev-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: var(--ts, var(--tp)); color: var(--branco); font-weight: 800; }
.tema-prev-mark img { width: 100%; height: 100%; object-fit: contain; background: transparent; }
.tema-prev-mark.has-img { background: transparent; }
.tema-prev-name { font-weight: 800; letter-spacing: .02em; color: var(--tt, var(--text)); }
.tema-prev-top small { color: color-mix(in srgb, var(--tt, var(--text)) 60%, transparent); }
.tema-prev-body { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 18px 14px; }
.tema-prev-btn { border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 700; background: var(--tp); color: var(--tpo, var(--branco)); }
.tema-prev-chip { padding: 4px 10px; border-radius: 999px; font-size: calc(12px * var(--tl, 1)); font-weight: 700; color: var(--branco); background: linear-gradient(135deg, var(--ta, var(--tp)), var(--ts, var(--tp))); }
.tema-users { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.tema-users li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.tema-users li small { display: block; color: var(--muted); overflow-wrap: anywhere; }

/* Regras do chat: o painel se ancorava no botão e passava da borda esquerda (texto cortado).
   Agora ele acompanha a largura do painel do chat, com um respiro nas laterais. */
#view-room .side-pane[data-pane="chat"] { position: relative; }
.chat-mod-wrap { position: static; }
.chat-mod-pop { left: 10px; right: 10px; width: auto; max-width: none; top: 46px; max-height: min(70vh, 520px); overflow-y: auto; }
/* Minhas salas: os cartões não podem passar da largura da página (grid estourava ~16px) */
.rooms-grid, .rooms-grid-inner { min-width: 0; max-width: 100%; }
.rooms-grid-inner > * { min-width: 0; }
/* celular: com o quadro aberto o palco ficava com altura 0 e ninguém via os vídeos */
@media (max-width: 900px) {
  .room-body .mk-chart { flex: 0 0 auto; min-height: 170px; max-height: 38vh; }
  #wb-panel { flex: 0 0 auto; max-height: 38vh; }
  .room-body .stage, .room-body.dk-on .dk-center > .stage { flex: 1 1 auto; min-height: 150px; }
  /* quadro e vídeos juntos passam da altura da tela: a coluna rola */
  .room-body:not(.dk-on) { overflow-y: auto; overflow-x: hidden; }
}
/* tela de entrada: microfone/câmera desligados pulsam — muita gente entra mudo sem perceber o aviso */
@keyframes tm-pulso-aviso {
  0%, 100% { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); }
  50%      { border-color: color-mix(in srgb, var(--danger) 18%, transparent); background: color-mix(in srgb, var(--danger) 4%, transparent); }
}
/* nome da conta na tela de entrada: vem pronto e só é editado pelo "alterar" ao lado do rótulo */
.field > span > .link-btn { margin-left: 8px; font-size: calc(11.5px * var(--tl, 1)); font-weight: 600; vertical-align: baseline; }
/* prévia com a câmera ligada: tarja avisando que o microfone está desligado (pulsa junto com o resto) */
.preview-flag {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  font-size: calc(12px * var(--tl, 1)); font-weight: 600; color: var(--branco); white-space: nowrap;
  background: color-mix(in srgb, var(--danger) 82%, transparent);
}
/* botão de reler os aparelhos: em evidência (era um link pequeno que ninguém achava) */
.st-refresh-box { display: grid; gap: 6px; margin: 4px 0 10px; }
.st-refresh-box .btn { font-weight: 600; border-color: var(--accent); color: var(--text); }
.st-refresh-box .btn svg { color: var(--accent); }
.st-refresh-box small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); line-height: 1.4; }
.av-test-wide { grid-column: 1 / -1; }
/* tema da marca no seletor: destaque de "é o seu" sem tirar os outros da lista */
.theme-opt.theme-marca { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.theme-opt.theme-marca b { color: var(--text); }
/* marca T_TECH no T_ROOM: o hexágono é a própria marca — sem o quadrado colorido atrás (área de proteção do manual) */
.brand-mark:has(img.logo-t) { background: none; box-shadow: none; }
.brand-mark img.logo-t { width: 34px; height: 34px; display: block; }
.brand-mark.sm img.logo-t { width: 28px; height: 28px; }
/* números, preços e códigos na fonte da marca */
.mono, .num, .kpi b, .p-price b, .rm-code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* "Quem entra" da sala: resumo da regra, turmas e lista */
.ra-resumo { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border); }
.ra-resumo.fechada { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--bg-2)); }
.ra-resumo svg { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: 2px; }
.ra-resumo p { margin: 0; font-size: calc(13.5px * var(--tl, 1)); line-height: 1.5; }
.ra-sec { margin: 12px 0 4px; font: 600 calc(11px * var(--tl, 1))/1 var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ra-turmas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ra-turmas label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; }
.ra-turmas label span { display: grid; gap: 2px; }
.ra-turmas small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); }

.auth-forgot { justify-self: end; font-size: calc(12.5px * var(--tl, 1)); margin-top: -4px; }
.acc-verif { margin: 4px 0; padding: 8px 10px; border-radius: 9px; font-size: calc(12.5px * var(--tl, 1)); background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }

/* ---------------- celular (comportamento do Meet) ---------------- */
.rm-flip[hidden] { display: none; }
.stage .tile { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.rm-flip { width: var(--h-btn); height: var(--h-btn); flex: none; }
/* vídeos preenchendo a célula inteira */
.grid.fill { gap: 4px; padding: 4px; align-content: stretch; }
.grid.fill.ajuste { align-content: center; }   /* vídeos no formato da imagem: juntos no meio, sem vão */
.grid.fill .tile { border-radius: 12px; }
/* botões do vídeo no toque: só aparecem depois de tocar no vídeo (invisíveis ainda recebiam o toque) */
@media (hover: none) {
  .tile .t-actions { visibility: hidden; }
  .tile.show-acts .t-actions, .tile:has(.anno-canvas.annotating) .t-actions { visibility: visible; opacity: 1; }
}
/* entrada no celular (como o Meet): prévia quadrada, logo abaixo o nome e o botão Entrar; aparelhos e testes depois */
@media (max-width: 560px) {
  .prejoin { gap: 14px; padding-top: 4px; align-items: start; }
  .prejoin .preview.card { display: contents; }
  .prejoin .preview-video { order: 1; aspect-ratio: 1 / 1; max-height: 48vh; width: 100%; justify-self: center; }
  .prejoin .prejoin-side { order: 2; }
  .prejoin .device-row { order: 3; }
  .prejoin .av-test { order: 4; }
  .prejoin .av-test-note { order: 5; }
  .prejoin .preview-off { padding-bottom: 72px; gap: 8px; }
  .prejoin .preview-off p { font-size: calc(13px * var(--tl, 1)); text-align: center; padding: 0 12px; }
}
/* menu ⋮: folha que sobe de baixo */
.more-sheet {
  position: fixed; left: 50%; bottom: calc(var(--dock-h, 72px) + 6px); transform: translateX(-50%); z-index: 45;
  width: min(420px, calc(100vw - 16px)); max-height: 70vh; overflow-y: auto; padding-bottom: 8px;
  display: grid; gap: 2px; animation: toastIn .18s ease-out;
}
.more-sheet[hidden] { display: none; }

@media (max-width: 900px), (orientation: landscape) and (max-height: 520px) {
  /* a mesma barra do computador (3 grupos, 9 botões), numa linha só: os grupos se espalham pela largura */
  .room footer.dock { display: flex; justify-content: space-between; gap: 8px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .room footer.dock :is(.dock-left, .dock-center, .dock-right) { gap: 6px; flex: none; }
  .room.bars-float .room-top .badge, .room.bars-float .room-top .rm-profile { background: rgba(8, 10, 14, .55); }
}

/* ---------------- controle remoto (js/room-remoto.js) ---------------- */
.ctrl.pending { box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 70%, transparent); }
.remoto-pop { width: min(340px, calc(100vw - 24px)); display: grid; gap: 8px; }
.rmp-txt, .rmp-nota, .rmp-vazio { margin: 0 6px; font-size: calc(12.5px * var(--tl, 1)); color: var(--muted); line-height: 1.35; }
.rmp-nota { font-size: calc(11.5px * var(--tl, 1)); border-top: 1px solid var(--border); padding-top: 8px; }
.remoto-pop .pop-row-txt { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* pedidos e convites recebidos: no alto, no meio, sem travar a sala */
.rm-pedidos { position: fixed; z-index: 60; top: 72px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; width: min(460px, calc(100vw - 24px)); pointer-events: none; }
.rm-pedido { pointer-events: auto; display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 14px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-2)); box-shadow: var(--shadow); animation: toastIn .2s ease-out; }
.rm-pic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-2); flex: none; }
.rm-pic svg { width: 20px; height: 20px; }
.rm-ptxt { font-size: calc(14px * var(--tl, 1)); line-height: 1.35; }
.rm-ptxt small { display: block; margin-top: 3px; color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.rm-pbtns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
/* cartão da sessão: área de transferência e arquivos */
.rm-card { position: fixed; z-index: 44; top: 72px; right: 16px; width: min(330px, calc(100vw - 24px)); max-height: calc(100vh - 170px); display: flex; flex-direction: column;
  border-radius: 16px; background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border-2)); box-shadow: var(--shadow); overflow: hidden; }
.rmc-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--border); }
.rmc-tit { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.rmc-tit b { font-size: calc(14px * var(--tl, 1)); }
.rmc-tit small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmc-ico { display: grid; place-items: center; width: var(--h-btn); height: var(--h-btn); border: 0; border-radius: var(--r-btn); background: transparent; color: var(--muted); cursor: pointer; }
.rmc-ico:hover { background: var(--bg-2); color: var(--text); }
.rmc-ico svg { width: 16px; height: 16px; }
.rmc-corpo { display: grid; gap: 10px; padding: 12px; overflow-y: auto; }
.rm-card.min { width: auto; max-width: min(330px, calc(100vw - 24px)); cursor: pointer; }
.rm-card.min .rmc-corpo { display: none; }
.rm-card.min .rmc-head { border-bottom: 0; }
.rm-card.fim .rmc-dica, .rm-card.fim .rmc-acts, .rm-card.fim .rmc-drop { display: none; }
.rmc-aviso { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--warn) 12%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); font-size: calc(12.5px * var(--tl, 1)); line-height: 1.4; }
.rmc-aviso b { font-size: calc(13.5px * var(--tl, 1)); }
.rmc-aviso small { color: var(--muted); font-size: calc(11.5px * var(--tl, 1)); }
.rmc-aviso .btn { text-decoration: none; }
/* quem controla: a tela do outro "pega" o mouse e o teclado (contorno rosa) */
.tile.rm-controlando { outline: 3px solid var(--controle-remoto); outline-offset: -3px; cursor: default; }
.tile.rm-controlando video { cursor: default; }
.tile.rm-alvo { touch-action: none; -webkit-user-select: none; user-select: none; }   /* celular controlando: os dedos não rolam a página */
@media (hover: none) { .tile.rm-alvo .t-actions { display: none !important; } }   /* os botões do vídeo não ficam no caminho dos dedos */
.tile.rm-zoom video { transform-origin: center center; will-change: transform; }
/* celular: barra de teclas que o teclado da tela não tem */
.rm-barra { position: fixed; z-index: 46; left: 8px; right: 8px; bottom: calc(var(--dock-h, 72px) + 10px + env(safe-area-inset-bottom)); display: flex; gap: 6px;
  padding: 6px; border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 94%, transparent); border: 1px solid var(--border-2); box-shadow: var(--shadow);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rm-barra::-webkit-scrollbar { display: none; }
.rm-barra button { flex: none; height: var(--h-btn); padding: 0 12px; border: 0; border-radius: var(--r-btn); background: var(--bg-2); color: var(--text); font: 700 calc(13px * var(--tl, 1))/1 Inter, system-ui, sans-serif; touch-action: manipulation; }
.rm-barra button:active { background: color-mix(in srgb, var(--accent) 35%, var(--bg-2)); }
.rm-barra button[data-k="kb"] { background: color-mix(in srgb, var(--accent) 22%, var(--bg-2)); }
.rm-barra.digitando { bottom: calc(8px + env(safe-area-inset-bottom)); }
.rm-teclado { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: .01; font-size: calc(16px * var(--tl, 1)); border: 0; padding: 0; z-index: -1; }
.rmc-dica { margin: 0; font-size: calc(12.5px * var(--tl, 1)); color: var(--muted); line-height: 1.4; }
.rmc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rmc-acts .btn, .rmi-acts .btn { height: var(--h-btn-sm); padding: 0 10px; font-size: calc(12.5px * var(--tl, 1)); gap: 6px; }
.rmc-acts svg, .rmi-acts svg { width: 15px; height: 15px; }
.rmc-drop { padding: 10px; border: 1.5px dashed var(--border-2); border-radius: 12px; text-align: center; font-size: calc(11.5px * var(--tl, 1)); color: var(--muted); }
.rmc-drop.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
.rmc-lista { display: grid; gap: 8px; }
.rmc-vazio { margin: 0; font-size: calc(12px * var(--tl, 1)); color: var(--muted); text-align: center; }
.rmi { display: grid; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--bg-2); }
.rmi.meu { background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); }
.rmi-de { font-size: calc(11.5px * var(--tl, 1)); color: var(--muted); font-weight: 600; }
.rmi-de i { font-style: normal; color: var(--accent-2); }
.rmi-de i.err { color: var(--danger-text); }
.rmi-txt { font-size: calc(13px * var(--tl, 1)); white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow: hidden; }
.rmi img { max-width: 100%; max-height: 160px; border-radius: 8px; justify-self: start; }
.rmi-arq { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--tl, 1)); min-width: 0; }
.rmi-arq svg { width: 18px; height: 18px; flex: none; color: var(--accent-2); }
.rmi-arq span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rmi-arq small { display: block; color: var(--muted); font-size: calc(11px * var(--tl, 1)); }
.rmi-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.rmi-acts a.btn { text-decoration: none; }
/* seta de quem controla, em cima da tela compartilhada */
.tile .rm-ptr { position: absolute; z-index: 9; pointer-events: none; transform: translate(-3px, -2px); display: flex; align-items: flex-start; gap: 2px;
  transition: left .06s linear, top .06s linear, opacity .4s; }
.tile .rm-ptr svg { width: 26px; height: 26px; color: var(--controle-remoto); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.tile .rm-ptr span { margin-top: 18px; padding: 2px 8px; border-radius: 999px; background: var(--controle-remoto); color: var(--branco); font: 700 calc(11.5px * var(--tl, 1))/1.4 Inter, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.tile .rm-ptr.parado { opacity: .35; }
.tile .rm-clique { position: absolute; z-index: 9; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid var(--controle-remoto); pointer-events: none;
  animation: rm-clique .9s ease-out forwards; }
@keyframes rm-clique { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@media (max-width: 900px), (orientation: landscape) and (max-height: 520px) {
  .rm-card { top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); right: 8px; left: 8px; width: auto; max-height: 55vh; }
  .rm-pedidos { top: 60px; }
}
/* ------------------------------------------------------------ Conversas (js/page-conversas.js): WhatsApp + Telegram no jeito T_ROOM */
.app-content:has(> .cv-page:not([hidden])) { max-width: none; padding-bottom: 0; }
.ct-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--dot, var(--surface-4)); border: 2px solid var(--surface); box-sizing: border-box; }
.ct-dot.offline { background: var(--surface); border: 2px solid var(--muted); }   /* 28/10: estado não só por cor: offline = anel vazado */
.ct-dot.ocupado { background: var(--danger-icon); }
.ct-dot.ocupado::after { content: ""; position: absolute; left: 50%; top: 50%; width: 55%; height: 2px; margin: -1px 0 0 -27.5%; border-radius: 1px; background: var(--surface); }   /* ocupado = barra no meio */
.ct-dot.ausente { background: radial-gradient(circle at 28% 28%, var(--surface) 0 36%, transparent 38%), var(--dot, var(--warn)); }   /* ausente = lua (recorte no canto) */
.ct-dot.reuniao { border-radius: 4px; }   /* em reunião = quadradinho */
.ct-dot.online { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); }
.inv-ct-row .ct-dot, .wz-pop .ct-dot, .wz-info-status .ct-dot, .wz-st-prev .ct-dot { position: relative; right: auto; bottom: auto; width: 10px; height: 10px; border: 0; flex: none; }
.inv-ct-row .ct-dot.offline, .wz-pop .ct-dot.offline, .wz-info-status .ct-dot.offline, .wz-st-prev .ct-dot.offline { border: 2px solid var(--muted); }
.wz { --wz-bg: color-mix(in srgb, var(--bg) 70%, var(--surface)); --wz-minha: color-mix(in srgb, var(--accent) 26%, var(--surface-2)); --wz-dele: var(--surface-2);
  position: relative; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); height: calc(100dvh - 112px); min-height: 460px;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.wz.com-info { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(300px, 360px); }
.wz-ic { border: 0; background: none; color: var(--text-soft); width: var(--h-btn); height: var(--h-btn); border-radius: var(--r-btn); display: inline-grid; place-items: center; cursor: pointer; flex: none; transition: background .12s, color .12s; }
.wz-ic:hover { background: var(--surface-3); color: var(--text); }
.wz-ic svg { width: 20px; height: 20px; }
.wz-ic.perigo { color: var(--danger-text); }
.wz-nl { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: calc(11px * var(--tl, 1)); font-weight: 700; display: inline-grid; place-items: center; flex: none; }
.wz-nl.muda { background: var(--surface-4); color: var(--text-soft); }
.wz-link { border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; padding: 0 0 0 8px; }
.wz-link:hover { text-decoration: underline; }
.wz-tag { font-style: normal; font-size: calc(11px * var(--tl, 1)); color: var(--accent-text); background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.wz-vazio { color: var(--muted); font-size: calc(13px * var(--tl, 1)); padding: 14px 18px; line-height: 1.5; text-align: center; }
.avatar.wz-av { width: 46px; height: 46px; min-width: 46px; flex: 0 0 46px; font-size: calc(16px * var(--tl, 1)); }
.avatar.wz-av-p { width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; font-size: calc(13px * var(--tl, 1)); }
.wz-av-grupo, .wz-av-salvas, .wz-av-recados { display: inline-grid !important; place-items: center; color: var(--branco); }
.wz-av-grupo { background: linear-gradient(135deg, var(--roxo-fim), var(--roxo-grupo)) !important; }
.wz-av-salvas { background: linear-gradient(135deg, var(--accent), var(--deep)) !important; }
.wz-av-grupo svg, .wz-av-salvas svg, .wz-av-recados svg { width: 52%; height: 52%; }
.wz-avw { position: relative; display: inline-flex; flex: none; }
.wz-av-dot { width: 13px; height: 13px; right: 0; bottom: 0; border-color: var(--surface); }

/* lado esquerdo */
.wz-lado { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--border); background: var(--surface); }
.wz-eu { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.wz-eu-av { border: 0; background: none; padding: 0; cursor: pointer; position: relative; display: inline-flex; border-radius: 50%; }
.wz-eu-av .avatar.wz-av { width: 40px; height: 40px; min-width: 40px; flex-basis: 40px; }
.wz-eu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wz-eu-txt b { font-family: var(--font-display); font-size: calc(18px * var(--tl, 1)); }
.wz-eu-txt small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-busca { display: flex; align-items: center; gap: 8px; margin: 8px 10px 4px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid transparent; }
.wz-busca:focus-within { border-color: var(--accent); }
.wz-busca svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.wz-busca input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); padding: 9px 0; font: inherit; font-size: calc(14px * var(--tl, 1)); outline: none; }
.wz-filtros { display: flex; gap: 6px; padding: 6px 10px 8px; overflow-x: auto; scrollbar-width: none; }
.wz-lista-rol { flex: 1; overflow-y: auto; min-height: 0; }
.wz-sec { font-size: calc(12px * var(--tl, 1)); color: var(--accent-text); font-weight: 700; padding: 14px 18px 6px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .05em; }
.wz-item { display: flex; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; position: relative; outline: none; }
.wz-item::after { content: ""; position: absolute; left: 72px; right: 0; bottom: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.wz-item:hover, .wz-item:focus-visible { background: var(--surface-2); }
.wz-item.ativo { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.wz-item-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wz-linha { display: flex; align-items: center; gap: 8px; justify-content: space-between; min-width: 0; }
.wz-nome { font-weight: 600; font-size: calc(15px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* nome com etiqueta (Visitante): só o nome corta com reticências, a etiqueta fica inteira (letra Maior cortava a etiqueta; t_163) */
.wz-nome-tag { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wz-nome-tag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wz-nome-tag > .wz-tag { flex: none; }
.wz-hora { color: var(--muted); font-size: calc(12px * var(--tl, 1)); flex: none; }
.wz-hora.nova { color: var(--accent-text); font-weight: 700; }
.wz-previa { color: var(--muted); font-size: calc(13.5px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: flex; align-items: center; gap: 3px; }
.wz-previa svg { width: 14px; height: 14px; flex: none; }
.wz-previa .wz-tick { flex: none; }
.wz-digita { color: var(--ok-text); font-style: italic; }
.wz-marcas { display: flex; align-items: center; gap: 4px; flex: none; color: var(--muted); }
.wz-marcas > svg { width: 15px; height: 15px; }
.wz-item-menu { border: 0; background: none; color: var(--muted); width: 0; overflow: hidden; padding: 0; cursor: pointer; display: grid; place-items: center; transition: width .12s; }
.wz-item:hover .wz-item-menu { width: 20px; }
.wz-item-menu svg { width: 18px; height: 18px; }
.wz-pedidos { background: color-mix(in srgb, var(--accent) 7%, transparent); border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.wz-pessoa { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.wz-pnome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wz-pnome b, .wz-pnome small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-pnome small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.wz-bt-p { padding: 6px 12px; min-height: 0; font-size: calc(13px * var(--tl, 1)); display: inline-flex; align-items: center; gap: 5px; }
.wz-bt-p svg { width: 15px; height: 15px; }
.wz-rodape { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: calc(12px * var(--tl, 1)); padding: 18px 16px 22px; text-align: center; }
.wz-rodape svg { width: 13px; height: 13px; flex: none; }
.wz-novo-topo { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-weight: 700; }
.wz-acao-linha { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 16px; border: 0; background: none; color: var(--text); font: inherit; font-size: calc(15px * var(--tl, 1)); font-weight: 600; cursor: pointer; text-align: left; }
.wz-acao-linha:hover { background: var(--surface-2); }
.wz-acao-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--branco); flex: none; }
.wz-acao-ic svg { width: 21px; height: 21px; }
.wz-acao-ic.verde { background: var(--ok); } .wz-acao-ic.azul { background: var(--accent); }

/* conversa */
.wz-chat { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--wz-bg); }
.wz-chat::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 10%, transparent) 1px, transparent 1.5px), radial-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1.5px);
  background-size: 26px 26px, 26px 26px; background-position: 0 0, 13px 13px; }
.wz-chat.soltar::after { content: "Solte para enviar"; position: absolute; inset: 12px; border: 2px dashed var(--accent); border-radius: 16px; display: grid; place-items: center; font-weight: 700; color: var(--accent-text); background: color-mix(in srgb, var(--bg) 70%, transparent); z-index: 5; }
.wz-chat > * { position: relative; }
.wz-topo { display: flex; align-items: center; gap: 4px; padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); z-index: 2; }
.voltar.wz-voltar { display: none; }
.wz-topo-quem { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; padding: 2px 6px; border-radius: 10px; font: inherit; }
.wz-topo-quem .avatar.wz-av { width: 42px; height: 42px; min-width: 42px; flex-basis: 42px; }
.wz-topo-txt { min-width: 0; display: flex; flex-direction: column; }
.wz-topo-txt b { font-size: calc(16px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-topo-txt small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-fixada { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 16px; background: var(--surface); border-bottom: 1px solid var(--border); cursor: pointer; z-index: 2; }
.wz-fixada > svg { width: 17px; height: 17px; color: var(--accent-text); flex: none; }
.wz-fixada span { flex: 1; min-width: 0; display: flex; flex-direction: column; border-left: 3px solid var(--accent); padding-left: 9px; }
.wz-fixada b { font-size: calc(12.5px * var(--tl, 1)); color: var(--accent-text); }
.wz-fixada small { color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-buscamsg { display: flex; align-items: center; gap: 4px; padding: 6px 10px 6px 16px; background: var(--surface); border-bottom: 1px solid var(--border); z-index: 2; }
.wz-buscamsg > svg { width: 17px; height: 17px; color: var(--muted); }
.wz-buscamsg input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; outline: none; padding: 6px 4px; }
.wz-buscamsg small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); white-space: nowrap; }
.wz-msgs { flex: 1; overflow-y: auto; padding: 10px 6% 14px; display: flex; flex-direction: column; min-height: 0; }
.wz-aviso-cifra { align-self: center; max-width: 520px; text-align: center; font-size: calc(12px * var(--tl, 1)); line-height: 1.4; color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); border-radius: 8px; padding: 6px 12px; margin: 6px 0 10px; display: flex; align-items: center; gap: 6px; }
.wz-aviso-cifra svg { width: 14px; height: 14px; flex: none; }
.wz-mais { align-self: center; border: 0; background: var(--surface-2); color: var(--text-soft); border-radius: 999px; padding: 6px 16px; font: inherit; font-size: calc(12.5px * var(--tl, 1)); cursor: pointer; margin-bottom: 8px; }
.wz-dia { align-self: center; position: sticky; top: 4px; z-index: 1; margin: 10px 0 6px; }
.wz-dia span { font-size: calc(12px * var(--tl, 1)); color: var(--text-soft); background: var(--surface-2); padding: 5px 12px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); text-transform: capitalize; }
.wz-novas { align-self: stretch; text-align: center; margin: 8px -6%; background: color-mix(in srgb, var(--surface) 70%, transparent); padding: 4px; }
.wz-novas span { font-size: calc(12px * var(--tl, 1)); color: var(--accent-text); font-weight: 700; }
.wz-oi { margin: auto; color: var(--muted); background: var(--surface); padding: 12px 20px; border-radius: 12px; font-size: calc(14px * var(--tl, 1)); }
.wz-sis { align-self: center; margin: 6px 0; max-width: 90%; text-align: center; }
.wz-sis > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: calc(12.5px * var(--tl, 1)); color: var(--text-soft); background: var(--surface-2); padding: 5px 12px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.wz-sis svg { width: 14px; height: 14px; }
.wz-sis.perdida > span { color: var(--danger-text); }
.wz-m { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: min(620px, 78%); margin-top: 8px; }
.wz-m.seguida { margin-top: 2px; }
.wz-m.minha { align-self: flex-end; align-items: flex-end; }
/* 17/10: a linha da mensagem recebida tem a largura do balão (antes esticava até 620 px e Reagir/Mais ficavam longe) */
.wz-m:not(.minha) { align-self: flex-start; }
.wz-b { position: relative; background: var(--wz-dele); color: var(--text); padding: 6px 8px 8px 10px; border-radius: 10px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, .22); min-width: 80px; max-width: 100%; overflow-wrap: anywhere; line-height: 1.42; font-size: calc(14.5px * var(--tl, 1)); }
.wz-m:not(.seguida) .wz-b { border-top-left-radius: 2px; }
.wz-m:not(.seguida) .wz-b::before { content: ""; position: absolute; top: 0; left: -7px; border: 7px solid transparent; border-top-color: var(--wz-dele); border-right-color: var(--wz-dele); border-width: 0 8px 9px 0; }
.wz-m.minha .wz-b { background: var(--wz-minha); }
.wz-m.minha:not(.seguida) .wz-b { border-top-left-radius: 10px; border-top-right-radius: 2px; }
.wz-m.minha:not(.seguida) .wz-b::before { left: auto; right: -7px; border-width: 0 0 9px 8px; border-color: transparent; border-top-color: var(--wz-minha); border-left-color: var(--wz-minha); }
.wz-b.midia { padding: 4px 4px 6px; }
.wz-quem { display: block; font-size: calc(13px * var(--tl, 1)); font-weight: 700; margin-bottom: 2px; }
.wz-txt { white-space: normal; }
.wz-txt.grande { font-size: calc(40px * var(--tl, 1)); line-height: 1.15; }
.wz-txt a { color: var(--accent-text); text-decoration: underline; }
.wz-txt code { font-family: var(--font-mono); font-size: .9em; background: color-mix(in srgb, var(--bg) 60%, transparent); padding: 1px 5px; border-radius: 4px; }
.wz-txt pre { font-family: var(--font-mono); font-size: calc(12.5px * var(--tl, 1)); background: color-mix(in srgb, var(--bg) 60%, transparent); padding: 8px; border-radius: 6px; white-space: pre-wrap; margin: 4px 0; }
.wz-b.midia .wz-txt { padding: 4px 6px 0; }
.wz-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -4px 12px; font-size: calc(11px * var(--tl, 1)); color: var(--muted); white-space: nowrap; position: relative; top: 3px; }
.wz-b.midia > .wz-meta { position: absolute; right: 10px; bottom: 9px; top: auto; margin: 0; color: var(--branco); background: rgba(0, 0, 0, .45); padding: 1px 6px; border-radius: 8px; }
.wz-b.midia:has(.wz-txt) > .wz-meta { position: static; float: right; color: var(--muted); background: none; padding: 0; margin: 4px 4px -2px 12px; }
.wz-tick { display: inline-flex; color: var(--muted); }
.wz-tick svg { width: 16px; height: 11px; }
.wz-tick.lida { color: var(--tick-lida); }
.wz-tick.pend svg { width: 12px; height: 12px; }
.wz-tick.erro { color: var(--danger-text); font-weight: 900; font-style: normal; }
.wz-cit { display: flex; flex-direction: column; background: color-mix(in srgb, var(--bg) 35%, transparent); border-left: 4px solid var(--c, var(--accent)); border-radius: 6px; padding: 5px 9px; margin: 2px 0 6px; cursor: pointer; font-size: calc(13px * var(--tl, 1)); max-width: 100%; }
.wz-cit b { color: var(--c, var(--accent)); font-size: calc(12.5px * var(--tl, 1)); }
.wz-cit span { color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-apagada { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-style: italic; }
.wz-apagada svg { width: 15px; height: 15px; }
.wz-img { display: block; max-width: min(330px, 100%); max-height: 360px; border-radius: 7px; cursor: zoom-in; object-fit: cover; background: var(--surface-3); min-height: 60px; }
.wz-video { display: block; max-width: min(360px, 100%); max-height: 320px; border-radius: 7px; background: var(--preto); }
.wz-audio-arq { max-width: 280px; }
.wz-arq { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 35%, transparent); color: var(--text); text-decoration: none; min-width: 230px; max-width: 320px; }
.wz-arq:hover { text-decoration: none; background: color-mix(in srgb, var(--bg) 50%, transparent); }
.wz-arq > svg { width: 20px; height: 20px; color: var(--text-soft); flex: none; }
.wz-arq-ic { width: 38px; height: 44px; border-radius: 5px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: calc(10px * var(--tl, 1)); font-weight: 800; flex: none; letter-spacing: .02em; }
.wz-arq-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wz-arq-txt b { font-size: calc(13.5px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-arq-txt small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.wz-audio { display: flex; align-items: center; gap: 10px; min-width: 250px; padding: 2px 4px 2px 0; }
.wz-play { width: var(--h-btn-lg); height: var(--h-btn-lg); border-radius: var(--r-btn); border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; cursor: pointer; flex: none; }
.wz-play svg { width: 16px; height: 16px; }
.wz-onda { flex: 1; height: 30px; display: flex; align-items: center; gap: 2px; position: relative; }
.wz-onda > b { flex: 1; background: color-mix(in srgb, var(--text) 30%, transparent); border-radius: 2px; min-width: 2px; }
.wz-onda > i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 4px; pointer-events: none; transition: width .25s linear; }
.wz-audio.tocando .wz-onda > b { background: var(--accent); }
.wz-adur { font-size: calc(12px * var(--tl, 1)); color: var(--muted); min-width: 32px; }
.wz-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 35%, transparent); min-width: 250px; }
.wz-card-ic { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: var(--branco); flex: none; background: linear-gradient(135deg, var(--accent), var(--deep)); }
.wz-card.cotacao .wz-card-ic { background: linear-gradient(135deg, var(--vip-fim), var(--laranja-fim)); }
.wz-card-ic svg { width: 22px; height: 22px; }
.wz-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wz-card-txt b { font-size: calc(14px * var(--tl, 1)); }
.wz-card-txt small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-card-bt { margin-top: 6px; width: 100%; justify-content: center; display: flex; align-items: center; gap: 6px; }
.wz-card-bt svg { width: 16px; height: 16px; }
.wz-reac { display: flex; flex-wrap: wrap; gap: 4px; margin: -6px 8px 0; position: relative; z-index: 1; }
.wz-reac button { border: 1px solid var(--border-2); background: var(--surface-2); border-radius: 999px; height: var(--h-btn-sm); padding: 0 7px; font-size: calc(14px * var(--tl, 1)); cursor: pointer; display: inline-flex; align-items: center; gap: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.wz-reac button.minha { border-color: var(--accent); background: var(--accent-soft); }
.wz-reac small { font-size: calc(11px * var(--tl, 1)); color: var(--text-soft); }
.wz-acoes { position: absolute; top: 2px; right: -64px; display: none; gap: 2px; }
.wz-m.minha .wz-acoes { right: auto; left: -64px; }
.wz-m:hover .wz-acoes { display: flex; }
.wz-acoes button { width: var(--h-btn); height: var(--h-btn); border: 0; border-radius: var(--r-btn); background: var(--surface-2); color: var(--text-soft); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); }
.wz-acoes button:hover { color: var(--text); background: var(--surface-3); }
.wz-acoes svg { width: 16px; height: 16px; }
.wz-m.pisca .wz-b { animation: wz-pisca 1.6s ease; }
@keyframes wz-pisca { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 1px 1.5px rgba(0, 0, 0, .22); } }
.wz-descer { position: absolute; right: 22px; bottom: 82px; width: var(--h-btn-lg); height: var(--h-btn-lg); border-radius: var(--r-btn); border: 0; background: var(--surface-2); color: var(--text-soft); box-shadow: var(--shadow-sm); display: grid; place-items: center; cursor: pointer; z-index: 3; }
.wz-descer svg { width: 22px; height: 22px; }
.wz-descer .wz-nl { position: absolute; top: -6px; right: -4px; }
.wz-bloq { padding: 16px; text-align: center; color: var(--muted); background: var(--surface-2); border-top: 1px solid var(--border); }
/* compor */
.wz-compor { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; background: var(--surface-2); border-top: 1px solid var(--border); z-index: 2; }
.wz-mais-bt svg { width: 24px; height: 24px; transition: transform .15s; }
.wz-mais-bt:hover svg { transform: rotate(90deg); }
.wz-campo { flex: 1; display: flex; align-items: flex-end; background: var(--surface); border: 1px solid var(--border-2); border-radius: 22px; padding-left: 14px; min-width: 0; }
.wz-campo:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, var(--border-2)); }
.wz-campo textarea { flex: 1; resize: none; border: 0; background: none; color: var(--text); font: inherit; font-size: calc(15px * var(--tl, 1)); line-height: 1.4; padding: 10px 0; max-height: 160px; outline: none; min-width: 0; }
.wz-enviar { width: var(--h-btn-lg); height: var(--h-btn-lg); border-radius: var(--r-btn); border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .1s; }
.wz-enviar:hover { transform: scale(1.06); }
.wz-enviar svg { width: 20px; height: 20px; }
.wz-compor.gravando { align-items: center; }
.wz-grav { flex: 1; display: flex; align-items: center; gap: 10px; }
.wz-grav b { font-family: var(--font-mono); font-size: calc(16px * var(--tl, 1)); }
.wz-grav small { color: var(--muted); }
.wz-rec { width: 12px; height: 12px; border-radius: 50%; background: var(--danger-icon); animation: wz-rec 1s infinite; }
@keyframes wz-rec { 50% { opacity: .3; } }
.wz-respbar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; background: var(--surface-2); border-top: 1px solid var(--border); z-index: 2; }
.wz-respbar > svg { width: 18px; height: 18px; color: var(--c, var(--accent)); flex: none; }
.wz-respbar span { flex: 1; min-width: 0; display: flex; flex-direction: column; border-left: 4px solid var(--c, var(--accent)); padding-left: 10px; }
.wz-respbar b { font-size: calc(13px * var(--tl, 1)); color: var(--c, var(--accent-text)); }
.wz-respbar small { color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-respbar.edit > svg, .wz-respbar.edit b { color: var(--warn); }
.wz-respbar.edit span { border-color: var(--warn); }
.wz-anexos { display: flex; gap: 8px; padding: 10px; overflow-x: auto; background: var(--surface-2); border-top: 1px solid var(--border); z-index: 2; }
.wz-anx { position: relative; width: 110px; flex: none; display: flex; flex-direction: column; gap: 4px; align-items: center; background: var(--surface); border-radius: 10px; padding: 6px; }
.wz-anx img { width: 98px; height: 74px; object-fit: cover; border-radius: 6px; }
.wz-anx .wz-arq-ic { width: 54px; height: 74px; }
.wz-anx small { font-size: calc(11px * var(--tl, 1)); color: var(--muted); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.wz-anx button { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: var(--branco); display: grid; place-items: center; cursor: pointer; }
.wz-anx button svg { width: 13px; height: 13px; }
/* menus flutuantes */
.wz-pop { position: fixed; z-index: 2600; min-width: 200px; max-width: calc(100vw - 16px); animation: ct-entra .12s ease-out; }
.wz-pop[hidden] { display: none; }
.wz-pop-tit { font-size: calc(12px * var(--tl, 1)); font-weight: 700; color: var(--muted); padding: 6px 10px; text-transform: uppercase; letter-spacing: .05em; }
.wz-mi { text-decoration: none; }
.wz-mi.perigo, .wz-mi.perigo > svg { color: var(--danger-text); }
.wz-mi > span { flex: 1; display: flex; flex-direction: column; }
.wz-mi small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.wz-mi > span.wz-anx-ic, .wz-anx-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--branco); flex: 0 0 36px; }
.wz-anx-ic svg { width: 18px; height: 18px; }
.wz-anx-ic.azul { background: var(--anx-azul); } .wz-anx-ic.roxo { background: var(--anx-roxo); } .wz-anx-ic.rosa { background: var(--anx-rosa); } .wz-anx-ic.verde { background: var(--anx-verde); }
.wz-rapidas { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.wz-rapidas button, .wz-emo-grade button { border: 0; background: none; font-size: calc(22px * var(--tl, 1)); width: 38px; height: 38px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; transition: transform .1s; }
.wz-rapidas button { width: var(--h-btn-lg); height: var(--h-btn-lg); font-size: calc(20px * var(--tl, 1)); }
.wz-rapidas button:hover, .wz-emo-grade button:hover { background: var(--surface-3); transform: scale(1.15); }
.wz-pop.emoji { width: min(360px, calc(100vw - 16px)); padding: 0; overflow: hidden; }
.wz-emo-abas { display: flex; border-bottom: 1px solid var(--border); background: var(--surface); }
.wz-emo-abas button { flex: 1; border: 0; background: none; font-size: calc(18px * var(--tl, 1)); padding: 8px 0; cursor: pointer; border-bottom: 2px solid transparent; opacity: .6; }
.wz-emo-abas button.on { border-color: var(--accent); opacity: 1; }
.wz-emo-grade { display: grid; grid-template-columns: repeat(8, 1fr); max-height: 260px; overflow-y: auto; padding: 6px; }
/* painel de dados (direita) */
.wz-info { display: none; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: var(--surface); }
.wz.com-info .wz-info { display: flex; }
.wz-info-topo { display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.wz-info-rol { flex: 1; overflow-y: auto; padding-bottom: 20px; }
.wz-info-perfil { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 16px 18px; border-bottom: 8px solid var(--bg-2); text-align: center; }
.avatar.wz-info-av { width: 120px; height: 120px; min-width: 120px; font-size: calc(40px * var(--tl, 1)); margin-bottom: 8px; }
.wz-info-perfil h3 { margin: 0; font-size: calc(20px * var(--tl, 1)); }
.wz-info-perfil small { color: var(--muted); }
.wz-info-status { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--tl, 1)); color: var(--text-soft); margin-top: 4px; }
.wz-info-bts { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.wz-info-bts button { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; padding: 10px 4px; border: 1px solid var(--border-2); border-radius: 12px; background: var(--surface-2); color: var(--accent-text); font: inherit; font-size: calc(12px * var(--tl, 1)); cursor: pointer; }
.wz-info-bts button:hover { background: var(--surface-3); }
.wz-info-bts svg { width: 20px; height: 20px; }
.wz-info-sec { font-size: calc(13px * var(--tl, 1)); color: var(--muted); padding: 14px 18px 6px; display: flex; gap: 6px; }
.wz-info-acao { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; border: 0; background: none; color: var(--text); font: inherit; font-size: calc(14.5px * var(--tl, 1)); cursor: pointer; text-align: left; }
.wz-info-acao:hover { background: var(--surface-2); }
.wz-info-acao svg { width: 19px; height: 19px; color: var(--text-soft); flex: none; }
.wz-info-acao.perigo, .wz-info-acao.perigo svg { color: var(--danger-text); }
.wz-info-acao.verde, .wz-info-acao.verde svg { color: var(--ok-text); }
.wz-midias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 14px; }
.wz-midias img, .wz-midia-arq { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; cursor: zoom-in; background: var(--surface-2); }
.wz-midia-arq { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-soft); text-decoration: none; cursor: pointer; }
.wz-midia-arq svg { width: 26px; height: 26px; }
.wz-midia-arq small { font-size: calc(10px * var(--tl, 1)); padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wz-renomear { display: flex; gap: 6px; margin-top: 10px; width: 100%; max-width: 300px; }
.wz-renomear input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); font: inherit; }
/* boas-vindas */
.wz-boas { margin: auto; max-width: 440px; text-align: center; padding: 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); }
.wz-boas-ic { width: 88px; height: 88px; border-radius: 28px; display: grid; place-items: center; color: var(--branco); background: linear-gradient(135deg, var(--accent), var(--roxo-fim)); box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 35%, transparent); }
.wz-boas-ic svg { width: 44px; height: 44px; }
.wz-boas h2 { margin: 6px 0 0; color: var(--text); font-family: var(--font-display); }
.wz-boas-bts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 6px 0; }
.wz-boas-bts .btn { display: inline-flex; align-items: center; gap: 6px; }
.wz-boas-bts svg { width: 16px; height: 16px; }
.wz-boas small { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px * var(--tl, 1)); }
.wz-boas small svg { width: 13px; height: 13px; }
/* diálogos */
.modal.wz-dlg { width: min(480px, calc(100vw - 32px)); }
.wz-dlg .modal-inner { gap: 8px; min-width: 0; }
.wz-dlg-campo { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: calc(13px * var(--tl, 1)); margin-top: 6px; }
.wz-dlg-campo small { font-weight: 400; color: var(--muted); }
.wz-dlg-campo input, .wz-st-linha input { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 400; }
.wz-escolha { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; }
.wz-esc-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.wz-esc-item:hover { background: var(--surface-2); }
.wz-esc-item input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.wz-esc-item > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wz-esc-item small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.wz-st-linha { display: flex; gap: 8px; align-items: center; }
.wz-st-emoji { width: 46px; height: 42px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--surface-2); font-size: calc(22px * var(--tl, 1)); cursor: pointer; flex: none; }
.wz-st-grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.wz-st-grade button { border: 0; background: none; font-size: calc(22px * var(--tl, 1)); padding: 4px; border-radius: 8px; cursor: pointer; }
.wz-st-grade button:hover { background: var(--surface-3); }
.wz-st-cores { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.wz-st-cores button { width: 28px; height: 28px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.wz-st-cores button.on { border-color: var(--text); }
.wz-st-cores label { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; border: 2px dashed var(--border-2); position: relative; cursor: pointer; }
.wz-st-cores label input { position: absolute; inset: -6px; width: 40px; height: 40px; border: 0; cursor: pointer; }
.wz-st-prev { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); margin-top: 8px; }
.wz-cam video { width: 100%; border-radius: 10px; background: var(--preto); max-height: 60vh; }
.wz-ver { position: fixed; inset: 0; z-index: 3500; background: rgba(0, 0, 0, .88); display: grid; place-items: center; cursor: zoom-out; animation: ct-entra .15s; }
.wz-ver img { max-width: 92vw; max-height: 88vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.wz-ver-bts { position: fixed; top: 14px; right: 14px; display: flex; gap: 6px; }
.wz-ver-bts .wz-ic { color: var(--branco); background: rgba(255, 255, 255, .12); }
/* celular */
@media (max-width: 860px) {
  .wz, .wz.com-info { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 96px); border-radius: 0; border-left: 0; border-right: 0; }
  .wz.com-conversa .wz-lado { display: none; }
  .wz:not(.com-conversa) .wz-chat { display: none; }
  .wz.com-info .wz-chat { display: none; }
  .voltar.wz-voltar { display: inline-flex; }
  .wz-msgs { padding: 8px 10px 12px; }
  .wz-m { max-width: 88%; }
  .wz-acoes { display: none !important; }
  .wz-topo { padding: 6px 4px; gap: 0; }
  .wz-topo-quem { gap: 8px; }
}
/* chamada recebida: no meio da tela, por cima de tudo (também dentro da reunião) */
.ct-toque { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: color-mix(in srgb, var(--preto) 55%, transparent); backdrop-filter: blur(6px); animation: ct-entra .2s ease-out; }
.ct-toque[hidden] { display: none; }
.ct-toque-card { width: min(360px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border-2); border-radius: 22px; box-shadow: var(--shadow); padding: 30px 24px 46px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ct-toque-ondas { position: relative; padding: 14px; }
.ct-toque-ondas::before, .ct-toque-ondas::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ok); animation: ct-onda 1.8s ease-out infinite; }
.ct-toque-ondas::after { animation-delay: .9s; }
.ct-toque-av { width: 88px; height: 88px; font-size: calc(30px * var(--tl, 1)); }
.ct-toque-nome { font-size: calc(22px * var(--tl, 1)); font-weight: 700; font-family: var(--font-display); margin-top: 6px; }
.ct-toque-sub { color: var(--muted); display: flex; align-items: center; gap: 6px; font-size: calc(14px * var(--tl, 1)); }
.ct-toque-sub svg { width: 16px; height: 16px; }
.ct-toque-bts { display: flex; gap: 48px; margin-top: 18px; }
.ct-bt-redondo { border: 0; cursor: pointer; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--branco); position: relative; transition: transform .12s; flex: none; }
.ct-bt-redondo:hover { transform: scale(1.07); }
.ct-bt-redondo svg { width: 26px; height: 26px; }
.ct-bt-redondo span { position: absolute; top: 100%; margin-top: 8px; font-size: calc(13px * var(--tl, 1)); color: var(--text-soft); white-space: nowrap; left: 50%; transform: translateX(-50%); }
.ct-bt-redondo.sim { background: var(--ok); animation: ct-pula 1.2s ease-in-out infinite; }
.ct-bt-redondo.nao { background: var(--danger); }
.ct-bt-redondo.pequeno { width: 42px; height: 42px; animation: none; }
.ct-bt-redondo.pequeno svg { width: 19px; height: 19px; }
/* chamando (quem ligou): cartão no alto, também dentro da reunião */
.ct-chamando { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 2900; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 999px; box-shadow: var(--shadow); max-width: calc(100vw - 24px); animation: ct-entra .2s ease-out; }
.ct-chamando[hidden] { display: none; }
.ct-ch-av { width: 38px; height: 38px; }
.ct-ch-txt { display: flex; flex-direction: column; min-width: 0; }
.ct-ch-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-ch-txt small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
/* "Convidar" da reunião: chamar contato */
.inv-ct { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.inv-ct label { font-weight: 600; font-size: calc(13px * var(--tl, 1)); }
.inv-ct label small { font-weight: 400; color: var(--muted); }
.inv-ct-row { display: flex; align-items: center; gap: 8px; }
.inv-ct-row > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-ct-row .btn { height: var(--h-btn-sm); padding: 0 10px; font-size: var(--f-btn-sm); }
.avatar.ct-mini-av { width: 28px; height: 28px; min-width: 28px; flex: 0 0 28px; font-size: calc(11px * var(--tl, 1)); }
@keyframes ct-onda { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes ct-pula { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes ct-entra { from { opacity: 0; } to { opacity: 1; } }
/* grupos, áudio/vídeo e "adicionar à chamada" */
.ct-bt-redondo.cinza { background: var(--surface-4); animation: none; }
.ct-toque-bts:has(.cinza) { gap: 30px; }
.ct-grupo-av { display: inline-grid; place-items: center; background: color-mix(in srgb, var(--violet) 30%, var(--surface-3)); color: var(--violet-text); }
.ct-grupo-av svg { width: 55%; height: 55%; }
.ct-add-pop { position: fixed; z-index: 2500; width: min(340px, calc(100vw - 24px)); max-height: 60vh; overflow-y: auto; }
.ct-add-pop .inv-ct { border-top: 0; margin-top: 4px; padding-top: 0; }
/* botão "Baixar para Windows" fixo no alto (site e área logada); some no programa e fora do Windows */
.btn-baixar {
  display: inline-flex; align-items: center; gap: 7px; height: var(--h-btn-lg); padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: calc(13.5px * var(--tl, 1)); white-space: nowrap; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); text-decoration: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .12s, filter .12s;
}
.btn-baixar:hover { transform: translateY(-1px); filter: brightness(1.08); text-decoration: none; }
.btn-baixar [data-icon] { display: inline-flex; width: 17px; height: 17px; }
.btn-baixar [data-icon] svg { width: 17px; height: 17px; }
.btn-baixar[hidden] { display: none; }
@media (max-width: 1100px) { .btn-baixar .bb-txt { display: none; } .btn-baixar { padding: 0 11px; } }

/* ícone redondo dourado dos avisos do T_CARD / T_OCTO (a janela, a faixa e o item "Seja VIP" saíram: decisão 55) */
.vip-coroa { width: 54px; height: 54px; margin: 0 auto; border-radius: 16px; display: grid; place-items: center; color: var(--on-vip);
  background: linear-gradient(135deg, var(--vip-brilho), var(--vip) 55%, var(--vip-sombra)); box-shadow: 0 10px 28px rgba(245, 184, 74, .35); }
.vip-coroa svg { width: 26px; height: 26px; }
/* T_CHAT leva A (16/10): avisos com o app fechado, mensagens temporárias, canal de avisos, busca geral e "bater na porta" */
.wz-oferta-push { display: flex; align-items: center; gap: 10px; margin: 6px 10px 2px; padding: 10px 8px 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.wz-oferta-push > svg { width: 20px; height: 20px; color: var(--accent-text); flex: none; }
.wz-oferta-push > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wz-oferta-push b { font-size: calc(13.5px * var(--tl, 1)); }
.wz-oferta-push small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); line-height: 1.35; }
.wz-oferta-push .wz-ic svg { width: 16px; height: 16px; }
.wz-achado .wz-previa { display: block; }
.wz-achado mark, .wz-previa mark { background: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--text); border-radius: 3px; padding: 0 1px; }
.wz-temp { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: calc(11px * var(--tl, 1)); font-weight: 600; vertical-align: middle; color: var(--accent-text); background: var(--accent-soft); }
.wz-temp svg { width: 12px; height: 12px; }
.wz-exp { display: inline-flex; font-style: normal; }
.wz-exp svg { width: 11px; height: 11px; }
.wz-info-val { margin-left: auto; color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); }
.wz-temp-opcoes { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.wz-dlg-txt { margin: 0; color: var(--text-soft); font-size: calc(13.5px * var(--tl, 1)); line-height: 1.45; }
.wz-dlg-txt.muted { color: var(--muted); }
.wz-av-canal { background: linear-gradient(135deg, var(--vip-fim), var(--vermelho-fim)) !important; }
.wz-canal-aviso { display: flex; align-items: center; justify-content: center; gap: 8px; }
.wz-canal-aviso svg { width: 18px; height: 18px; flex: none; }
.wz-canal-sw { margin-top: 6px; }
.wz-canal-sw .switch-text small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); font-weight: 400; }
.wz-porta-slot { display: contents; }
.wz-porta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 0; font-size: calc(13px * var(--tl, 1)); border-radius: 999px; white-space: nowrap; flex: none; margin-right: 4px; }
.wz-porta svg { width: 16px; height: 16px; }
.wz-info-perfil .wz-porta { margin: 10px 0 0; }
@media (max-width: 640px) { .wz-topo .wz-porta span { display: none; } .wz-topo .wz-porta { padding: 8px; } }
.ct-portas { position: fixed; top: 74px; right: 16px; z-index: 2950; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 24px)); }
.ct-portas[hidden] { display: none; }
.ct-porta-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-2); border-left: 4px solid var(--ok); border-radius: 14px; box-shadow: var(--shadow); animation: ct-entra .2s ease-out; }
.ct-porta-card .ct-ch-txt { flex: 1; }
.ct-porta-card .ct-ch-txt small { display: inline-flex; align-items: center; gap: 4px; }
.ct-porta-card .ct-ch-txt svg, .ct-porta-minha .ct-ch-txt svg { width: 14px; height: 14px; }
.ct-porta-card .btn { flex: none; }
.ct-porta-minha .ct-ch-txt b { display: inline-flex; align-items: center; gap: 6px; }
.ct-porta-minha .ct-bt-redondo svg { width: 18px; height: 18px; }
@media (max-width: 560px) { .ct-portas { left: 12px; right: 12px; width: auto; } .ct-porta-card { flex-wrap: wrap; } .ct-porta-card .ct-ch-txt { flex-basis: calc(100% - 60px); } .ct-porta-card .btn { flex: 1; } }
.acc-rows .switch.mini { padding: 0; background: none; border: 0; flex: none; }
/* atalhos do programa T_ROOM (Minha conta › App e notificações) */
.acc-rows .cx-atalhos { border-top: 1px solid var(--border); padding-top: 12px; }
.acc-rows .cx-tecla { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 650; min-width: 120px; }
.acc-rows .cx-tecla.gravando { border-color: var(--accent); color: var(--accent-text); font-family: inherit; }
.acc-rows small.err { color: var(--danger-text); }
/* Leva B (16/10): cartão de atendimento do VIP (Minha conta, Painel, Recados do cartão) e suporte remoto em 1 clique */
.ct-toque-dica { margin-top: 14px; padding: 9px 12px; border-radius: 10px; font-size: calc(12.5px * var(--tl, 1)); line-height: 1.4; color: var(--text-soft); background: color-mix(in srgb, var(--warn) 12%, var(--surface-2)); text-align: center; }
.ct-toque-dica a { color: var(--accent-text); font-weight: 600; }
.ct-toque-dica.ct-toque-consent { text-align: left; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.ct-toque-dica b { color: var(--text); }
.ct-sup { z-index: 61; top: 128px; }
.ct-sup .rm-ptxt a { color: var(--accent-text); font-weight: 600; }
.wz-mi-sec { padding: 8px 12px 4px; font-size: calc(11.5px * var(--tl, 1)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--border); margin-top: 4px; }
.wz-pop .wz-mi-sec:first-child { border-top: 0; margin-top: 0; }
.wz-mi-nota { margin: 4px 12px 6px; max-width: 260px; font-size: calc(12px * var(--tl, 1)); line-height: 1.4; color: var(--muted); }
.wz-av-recados { background: linear-gradient(135deg, var(--vip-fim), var(--magenta)) !important; }
.wz-recados { gap: 10px; }
.wz-recado { align-self: stretch; max-width: 640px; width: 100%; margin: 0 auto; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); display: grid; gap: 8px; }
.wz-recado.novo { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.wz-recado header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wz-recado header b { font-size: calc(14.5px * var(--tl, 1)); overflow-wrap: anywhere; }
.wz-recado header small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); white-space: nowrap; }
.wz-rec-txt { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: calc(14px * var(--tl, 1)); line-height: 1.45; }
.wz-rec-perdida { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--danger-text); font-size: calc(13.5px * var(--tl, 1)); font-weight: 600; }
.wz-rec-perdida svg { width: 16px; height: 16px; }
.wz-rec-contato { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: calc(13px * var(--tl, 1)); }
.wz-rec-contato a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); text-decoration: none; overflow-wrap: anywhere; }
.wz-rec-contato a:hover { text-decoration: underline; }
.wz-rec-contato svg { width: 15px; height: 15px; flex: none; }
.wz-rec-bts { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-oi .btn { margin-top: 10px; }
.cartao-link { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 12px; margin-bottom: 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); }
.cartao-link-url { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cartao-link-url svg { width: 17px; height: 17px; flex: none; color: var(--accent-text); }
.cartao-link-url a { color: var(--text); }
.cartao-bloqueados { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.cartao-bloqueados ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cartao-bloqueados li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--bg-2); }
.cartao-bloqueados li span { display: grid; min-width: 0; }
.cartao-bloqueados li small { color: var(--muted); font-size: calc(11.5px * var(--tl, 1)); }
.cartao-bloq { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cartao-bloq .vip-coroa { width: 40px; height: 40px; margin: 0; border-radius: 12px; flex: none; }
.cartao-bloq .vip-coroa svg { width: 20px; height: 20px; }
.cartao-bloq > div { flex: 1 1 260px; display: grid; gap: 4px; }
.cartao-bloq small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); }
.cartao-bloq .btn-primary { background: linear-gradient(135deg, var(--vip-claro), var(--vip-fim)); color: var(--on-vip); border: 0; }

/* botão de voltar no canto de cima (regra de 16/10: no programa T_ROOM não há barra do navegador) */
.topnav-esq { display: flex; align-items: center; gap: 10px; min-width: 0; }
#view-left .left { min-height: calc(100vh - 90px); }
/* T_CHAT: conversa de visitante do cartão (sem cadastro) e tipos de recado */
.wz-tag-vis { color: var(--on-vip); background: var(--vip-tag); }
.wz-rec-tipo { display: block; margin-bottom: 2px; color: var(--muted); font-size: calc(12px * var(--tl, 1)); font-weight: 600; }
/* T_CHAT: chamada em andamento no grupo (16/10) — faixa abaixo do topo, telefone verde na lista e no Painel */
.wz-chamada { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--ok) 35%, var(--border)); border-left: 4px solid var(--ok); z-index: 2; }
.wz-ch-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--branco); background: var(--ok); }
.wz-ch-ic svg { width: 17px; height: 17px; }
.wz-ch-txt { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.wz-ch-txt b { font-size: calc(13.5px * var(--tl, 1)); color: var(--ok-text); }
.wz-ch-txt small { color: var(--text-soft); font-size: calc(12px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-ch-txt time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.wz-ch-avs { display: inline-flex; flex: none; padding-left: 6px; }
.wz-ch-av.avatar { width: 28px; height: 28px; min-width: 28px; margin-left: -6px; border: 2px solid var(--surface); font-size: calc(11px * var(--tl, 1)); }
.wz-ch-mais { display: grid; place-items: center; background: var(--surface-3); color: var(--text-soft); font-weight: 700; }
.wz-chamada .btn { flex: none; background: var(--ok); border-color: var(--ok); color: var(--branco); }
.wz-chamada .btn:hover { filter: brightness(1.08); }
.wz-ch-tag { flex: none; font-size: calc(12px * var(--tl, 1)); font-weight: 600; color: var(--ok-text); padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 15%, transparent); }
@media (max-width: 560px) { .wz-chamada .btn { order: 4; flex: 1 1 100%; justify-content: center; } }
.wz-ch-ativa { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--branco); background: var(--ok); }
.wz-ch-ativa svg { width: 12px; height: 12px; }
.wz-ch-previa { display: inline-flex; align-items: center; gap: 4px; color: var(--ok-text); font-weight: 600; }
.wz-ch-previa svg { width: 14px; height: 14px; }
/* T_CHAT: canal ao vivo do grupo (19/10, js/tchat-aovivo.js) — chave no topo, faixa "Canal ao vivo" e "3 no canal" na lista */
:root { --av-forte: color-mix(in srgb, var(--violet) 78%, var(--preto)); }   /* fundo com texto branco legível (contraste) */
.av-sw .av-sw-ic { display: inline-grid; place-items: center; color: var(--muted); }
.av-sw .av-sw-ic svg { width: 17px; height: 17px; }
.av-sw.on .av-sw-ic { color: var(--violet-text); }
.rd-sw.av-sw.on .rd-sw-trilho { background: var(--violet); }   /* .rd-sw.on (js/radio.js) pinta de verde */
.rd-sw.av-sw.on .rd-sw-txt { color: var(--violet-text); }
.wz-av-slot { margin-left: 2px; }
.av-sw[aria-disabled="true"] { cursor: default; }
.av-sw[aria-disabled="true"] .rd-sw-trilho { opacity: .65; }
.wz-av-slot { display: inline-flex; flex: none; }
.wz-av-slot .rd-sw-txt { white-space: nowrap; }
.wz-aovivo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; background: color-mix(in srgb, var(--violet) 9%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--violet) 30%, var(--border)); border-left: 4px solid var(--violet); z-index: 2; }
.wz-aovivo .av-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--branco); background: var(--av-forte); }
.wz-aovivo .av-ic svg { width: 18px; height: 18px; }
.wz-aovivo .av-txt b { color: var(--violet-text); }
.wz-aovivo .btn { flex: none; }
.wz-aovivo .btn-primary { background: var(--av-forte); border-color: var(--av-forte); color: var(--branco); }
.wz-aovivo .btn-primary:hover { filter: brightness(1.08); }
.wz-aovivo .av-tag { color: var(--violet-text); background: color-mix(in srgb, var(--violet) 15%, transparent); }
@media (max-width: 560px) { .wz-aovivo .btn { order: 4; flex: 1 1 0; justify-content: center; } .wz-aovivo .av-tag { display: none; } .wz-aovivo .av-sair { flex: 0 0 auto; } }
.wz-av-previa { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--violet-text); font-weight: 600; }
.wz-av-previa > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.wz-av-previa .avatar.av-mini { width: 18px; height: 18px; min-width: 18px; margin-left: -6px; border: 1.5px solid var(--surface); font-size: calc(9px * var(--tl, 1)); }
.wz-av-previa .avatar.av-mini:first-child { margin-left: 0; }
.av-marca { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--violet-text); }
.av-marca.com-gente { color: var(--branco); background: var(--av-forte); }
.av-marca svg { width: 13px; height: 13px; }
/* área de toque de 44 px (margem negativa: a linha da lista não cresce); a pílula visível é o span */
.av-lista-entrar { display: inline-grid; place-items: center; min-height: 44px; margin: -11px 0; padding: 0 2px; border: 0; background: none; font: inherit; cursor: pointer; }
.av-lista-entrar > span { display: inline-grid; place-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: calc(12px * var(--tl, 1)); font-weight: 700; color: var(--branco); background: var(--av-forte); }
.av-lista-entrar:hover > span { filter: brightness(1.1); }
.av-lista-entrar:focus-visible { outline: none; }
.av-lista-entrar:focus-visible > span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .wz-aovivo.com-gente .av-ic, .av-marca.com-gente { animation: none; } }
.wz-bloco + .wz-bloco { margin-top: 2px; }
/* sala: "Reunião do grupo <nome>" no centro da barra de cima (na ponta direita quando a barra do anfitrião está lá) */
.room .room-top > .rm-grupo { grid-area: host; justify-self: center; max-width: 100%; min-width: 0; }
.rm-grupo { color: var(--ok-text); border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); text-decoration: none; font-weight: 600; min-width: 0; }
a.rm-grupo:hover { border-color: var(--ok); }
.rm-grupo svg { width: 15px; height: 15px; flex: none; }
.rm-grupo-txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.rm-grupo-lado .rm-grupo-txt { max-width: 210px; }
@media (max-width: 760px) { .rm-grupo-txt { max-width: 120px; } }
@media (max-width: 480px) { .rm-grupo-lado .rm-grupo-txt { display: none; } }
@media (prefers-reduced-motion: reduce) { .wz-ch-ic, .wz-ch-ativa { animation: none; } }
/* reunião em andamento fora da sala (16/10): "Painel" na barra de cima da sala e o mini player no canto
   (arrastável, lembra a posição); no celular vira uma barra fina no topo "Reunião em andamento · Voltar" */
.room .room-top.tight .rm-voltar .vt-txt { display: none; }
.room .room-top.tight .rm-voltar { padding: 0 10px; min-width: 38px; }
@media (max-width: 560px) { .rm-voltar .vt-txt { display: none; } .rm-voltar { padding: 0 10px; min-width: 38px; } .room-top-left .rm-home { display: none; } }
.mini-reuniao [data-mr="sair"] { margin-left: auto; }
.mini-reuniao .ctrl { position: relative; flex: none; width: var(--h-ctrl); height: var(--h-ctrl); }
@keyframes mr-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .mini-reuniao [data-mr="sair"] { margin-left: 0; }
}

/* ============================================================ barra lateral padronizada, T_CARD, Painel e multitarefa (16/10)
   Produtos com a mesma cor em todo lugar: T_ROOM verde-água, T_CARD âmbar, T_CHAT azul, T_FEED violeta, T_ WORLD verde,
   Administração vermelho. Marcas como são; o resto só com a primeira maiúscula (sem caixa alta geral). */
:root { --c-room: #2dd4bf; --c-card: #f5a524; --c-chat: #38bdf8; --c-feed: #a78bfa; --c-world: #22c55e; --c-admin: #f43f5e; --tg-w: 400px; --ab-h: 62px; }
[data-theme="claro"] { --c-room: #0f766e; --c-card: #b45309; --c-chat: #0369a1; --c-feed: #6d28d9; --c-world: #15803d; --c-admin: #be123c; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.toasts { z-index: 2650; }   /* acima da gaveta do T_CHAT, abaixo do mini player da reunião */
:where(.app-shell, .cmdk, .atalhos-dlg) kbd { font: 600 calc(11px * var(--tl, 1))/1 var(--font-mono); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border-2); border-bottom-width: 2px; background: var(--surface-2); color: var(--text-soft); white-space: nowrap; }

/* ---- barra lateral */
.app-side { gap: 10px; }
.app-nav .nav-inicio { height: var(--h-item); color: var(--text-soft); font-size: calc(14.5px * var(--tl, 1)); font-weight: 650; border: 1px solid transparent; }
.nav-inicio .ni-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.nav-inicio .ni-ic svg { width: 17px; height: 17px; }
.app-nav .nav-inicio.active { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.nav-kbd { margin-left: auto; opacity: 0; transition: opacity .15s; font-size: calc(11px * var(--tl, 1)); }
.nav-inicio:hover .nav-kbd, .nav-inicio:focus-visible .nav-kbd { opacity: .8; }
.nav-sec { margin: 12px 4px 0; font-size: calc(12px * var(--tl, 1)); font-weight: 650; color: var(--muted); letter-spacing: .01em; }
.nav-card { height: 58px !important; margin-top: 6px; align-items: center; }
.nav-card .nc-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; gap: 2px; }
.nav-card .nc-txt b { font-weight: 700; font-size: calc(14.5px * var(--tl, 1)); color: var(--text); letter-spacing: .01em; }
.nav-card .nc-txt small { font-size: calc(12px * var(--tl, 1)); font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; opacity: 1; }
.nc-room { --nc: var(--c-room); } .nc-card { --nc: var(--c-card); } .nc-chat { --nc: var(--c-chat); } .nc-feed { --nc: var(--c-feed); }
.nc-world { --nc: var(--c-world); } .nc-admin { --nc: var(--c-admin); }
.nav-adm { padding-top: 10px; border-top: 1px dashed var(--border); }
.nav-adm[hidden] { display: none; }
.app-side-foot a, .app-side-foot .nav-atalhos { height: var(--h-item); font-size: calc(13px * var(--tl, 1)); }
.app-side-foot .nav-atalhos { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.app-side-foot .nav-atalhos:hover { background: var(--surface); color: var(--text); }
.app-side-foot .nav-atalhos svg { width: 18px; height: 18px; flex: none; }
.app-side-foot .nav-atalhos kbd { margin-left: auto; }
.nav-badge.live { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok-text); }

/* ---- cabeçalho de cada produto: voltar, ícone + nome + o que é, ação principal, busca, sino e T_CHAT ao lado */
.app-top { gap: 10px; }
.app-top .app-voltar { flex: none; }
.app-titulo { flex: 1 1 auto; min-width: 96px; display: flex; align-items: center; gap: 10px; }
.at-ic { --pc: var(--accent); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--pc);
  background: linear-gradient(140deg, color-mix(in srgb, var(--pc) 28%, transparent), color-mix(in srgb, var(--pc) 8%, transparent)); border: 1px solid color-mix(in srgb, var(--pc) 35%, transparent); }
.at-ic[hidden] { display: none; }
.at-ic svg { width: 19px; height: 19px; }
.at-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.at-txt h1 { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-txt small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-txt small:empty { display: none; }
.app-acao { flex: none; display: flex; gap: 8px; }
.top-busca { display: inline-flex; align-items: center; gap: 8px; height: var(--h-btn); min-width: var(--h-btn); padding: 0 8px 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: inherit; font-size: calc(13.5px * var(--tl, 1)); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.top-busca:hover { border-color: var(--border-2); color: var(--text); background: var(--surface-2); }
.top-busca svg { width: 17px; height: 17px; flex: none; }
.top-busca .tb-txt { white-space: nowrap; }
.top-sino, .top-tchat { position: relative; width: var(--h-btn); height: var(--h-btn); }
.top-sino .nav-badge, .top-tchat .nav-badge { position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: calc(10.5px * var(--tl, 1)); pointer-events: none;
  background: var(--danger); color: var(--branco); border: 2px solid var(--bg); box-sizing: content-box; }
.top-tchat.on { background: color-mix(in srgb, var(--c-chat) 18%, transparent); color: var(--c-chat); }
.top-tchat[hidden] { display: none; }
.rm-tchat { flex: none; }
@media (max-width: 1560px) { .app-top .clock { display: none; } .app-top .btn-baixar .bb-txt { display: none; } .app-top .btn-baixar { padding: 0 11px; } }
@media (max-width: 1440px) { .top-busca .tb-txt { display: none; } .app-top .acc-name { display: none; } }
@media (max-width: 760px) { .top-busca kbd, .app-acao .btn span { display: none; } .app-acao .btn { width: var(--h-btn); padding: 0; justify-content: center; } .at-txt small { display: none; } }
@media (max-width: 560px) {
  .app-titulo .at-ic { display: none; }
  .app-top .btn-baixar, .app-top .theme-btn { display: none; }
  .app-top .acc-name { display: none; }
}

/* ---- celular: barra de baixo (Painel, T_ROOM, T_CHAT, T_CARD, Menu) */
.app-baixo { display: none; }
@media (max-width: 960px) {
  .app-baixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--ab-h) + env(safe-area-inset-bottom)); padding: 4px 4px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--bg-2) 94%, transparent);
    backdrop-filter: blur(14px); border-top: 1px solid var(--border); }
  .app-baixo a, .app-baixo button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; border: 0; border-radius: 12px;
    background: none; color: var(--muted); font: inherit; font-size: calc(12px * var(--tl, 1)); font-weight: 650; cursor: pointer; text-decoration: none; }
  .app-baixo svg { width: 22px; height: 22px; }
  .app-baixo a.active { color: var(--text); }
  .app-baixo a.active::before { content: ""; position: absolute; top: 2px; width: 36px; height: 3px; border-radius: 3px; background: var(--ab, var(--accent)); }
  .app-baixo .ab-room { --ab: var(--c-room); } .app-baixo .ab-chat { --ab: var(--c-chat); } .app-baixo .ab-card { --ab: var(--c-card); }
  .app-baixo a.active svg { color: var(--ab, var(--accent)); }
  .app-baixo .nav-badge { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; font-size: calc(10.5px * var(--tl, 1)); background: var(--danger); color: var(--branco); }
  .app-baixo .nav-badge.live { background: var(--ok); color: var(--on-ok-nav); }
  .app-burger { display: none !important; }
  #view-app .app-content { padding-bottom: calc(var(--ab-h) + 28px + env(safe-area-inset-bottom)); }
  .app-side { padding-bottom: calc(var(--ab-h) + 16px); }
  /* IMP 02/11: topo 56 + respiro de cima 18 + respiro de baixo (--ab-h + 28 + área segura) = 102 px + barra; com 96 a página ficava 6 px mais alta que a tela */
  .wz, .wz.com-info { height: calc(100dvh - 102px - var(--ab-h) - env(safe-area-inset-bottom)); }
  /* conversa aberta no T_CHAT: a barra some e a conversa usa a tela toda (como nos apps de mensagem) */
  html:has(#page-conversas:not([hidden]) .wz.com-conversa) .app-baixo { display: none; }
  html:has(#page-conversas:not([hidden]) .wz.com-conversa) .wz { height: calc(100dvh - 96px); }
  /* ...e o espaço da barra some junto: sem isso a página ficava ~68 px mais alta que a tela, rolava ao abrir a conversa e o topo
     (avatar e nome) ia para trás da barra de cima */
  html:has(#page-conversas:not([hidden]) .wz.com-conversa) #view-app .app-content { padding-bottom: 12px; }
}
@media (max-width: 960px) { .app-shell.drawer-open .app-baixo { z-index: 41; } }

/* ---- Painel: um cartão por produto */
.dash-hero { align-items: center; }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: stretch; }
.prod-slot { display: flex; min-width: 0; }
.prod-card { --pc: var(--accent); flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 14px; border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 7%, var(--surface)) 0%, var(--surface) 46%); border: 1px solid color-mix(in srgb, var(--pc) 22%, var(--border));
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.prod-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pc); opacity: .8; }
.pc-room { --pc: var(--c-room); } .pc-cartao { --pc: var(--c-card); } .pc-conversas { --pc: var(--c-chat); } .pc-feed { --pc: var(--c-feed); } .pc-world { --pc: var(--c-world); } .pc-admin { --pc: var(--c-admin); }
.prod-card.pc-salas { --pc: var(--c-room); }
.pc-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pc-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--pc);
  background: linear-gradient(140deg, color-mix(in srgb, var(--pc) 30%, transparent), color-mix(in srgb, var(--pc) 10%, transparent)); border: 1px solid color-mix(in srgb, var(--pc) 38%, transparent); }
.pc-ic svg { width: 21px; height: 21px; }
.pc-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.pc-nome b { font-family: var(--font-display); font-size: calc(18px * var(--tl, 1)); letter-spacing: .01em; }
.pc-nome small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); }
.pc-abrir { display: inline-flex; align-items: center; gap: 4px; min-height: var(--h-btn-sm); padding: 0 10px; border-radius: 10px; color: var(--text-soft); font-weight: 650; font-size: calc(13px * var(--tl, 1)); flex: none; }
.pc-abrir:hover { background: color-mix(in srgb, var(--pc) 14%, transparent); color: var(--text); }
.pc-abrir svg { width: 15px; height: 15px; }
.pc-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.pc-num { padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); min-width: 0; }
.pc-num b { display: block; font: 700 calc(24px * var(--tl, 1))/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.pc-num small { display: block; color: var(--muted); font-size: calc(12px * var(--tl, 1)); line-height: 1.3; margin-top: 2px; }
.pc-num.alerta { border-color: color-mix(in srgb, var(--pc) 55%, transparent); background: color-mix(in srgb, var(--pc) 9%, var(--bg-2)); }
.pc-num.alerta b { color: var(--pc); }
[data-theme="claro"] .pc-num.alerta b { color: var(--text); }
.pc-corpo { display: grid; gap: 8px; min-width: 0; }
.pc-lista, .pc-online { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pc-lista li, .pc-online li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pcx-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pcx-item:hover { background: var(--surface-2); border-color: var(--border); }
.pcx-item.vivo .pcx-ic { color: var(--ok); }
.pcx-item.destaque { background: color-mix(in srgb, var(--pc) 8%, transparent); border-color: color-mix(in srgb, var(--pc) 30%, transparent); }
.pcx-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-soft); flex: none; }
.pcx-ic svg { width: 16px; height: 16px; }
.pcx-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pcx-txt b { font-weight: 650; font-size: calc(14px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcx-txt small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-online li { padding: 4px 4px 4px 8px; }
.pc-online .icon-btn, .pc-lista .icon-btn { flex: none; }
.pc-hora { color: var(--muted); font-size: calc(12px * var(--tl, 1)); flex: none; }
.pc-vazio { margin: 0; color: var(--muted); font-size: calc(13.5px * var(--tl, 1)); line-height: 1.5; }
.pc-aviso { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: calc(13px * var(--tl, 1)); color: var(--text-soft); padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--pc) 10%, transparent); }
.pc-aviso svg { width: 16px; height: 16px; color: var(--pc); }
.pc-aviso > svg { flex: none; }
.pc-aviso > span { flex: 1; min-width: 0; }
.pc-aviso .link-btn { font-size: calc(13px * var(--tl, 1)); color: var(--accent-text); padding: 0; }
.pc-link { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); }
.pc-link a { flex: 1; min-width: 0; color: var(--accent-text); font-weight: 600; font-size: calc(13.5px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-post { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); }
.pc-post:hover { border-color: color-mix(in srgb, var(--pc) 45%, var(--border)); }
.pc-post-quem { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-post-quem .avatar { width: 26px; height: 26px; font-size: calc(11px * var(--tl, 1)); }
.pc-post-quem small { color: var(--muted); margin-left: auto; font-size: calc(12px * var(--tl, 1)); }
.pc-post-txt { color: var(--text-soft); font-size: calc(13.5px * var(--tl, 1)); line-height: 1.5; overflow-wrap: anywhere; }
.pc-acoes { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-codigo { display: flex; gap: 6px; flex: 1 1 200px; min-width: 0; }
.pc-codigo input { flex: 1; min-width: 0; height: var(--h-btn); padding: 0 12px; border-radius: var(--r-btn); border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font: inherit; }
.pc-codigo input:focus { border-color: var(--accent); outline: none; }
.prod-card.carregando .pc-nums .pc-num { min-height: 64px; }
@media (max-width: 560px) {
  .prod-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .prod-card { padding: 14px 12px 12px; }
  .pc-acoes .btn-primary { flex: 1 1 auto; justify-content: center; }
}

/* ---- esqueletos (no lugar de tela vazia enquanto o módulo/dados chegam) */
.esq-pagina, .esq-chat { display: grid; gap: 12px; }
.esq-pagina i, .esq-chat i { display: block; height: 16px; border-radius: 8px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: skel 1.3s ease-in-out infinite; }
.esq-pagina .esq-t { height: 26px; width: 40%; }
.esq-pagina i:nth-child(odd) { width: 86%; }
.esq-chat { grid-template-columns: minmax(240px, 340px) 1fr; height: calc(100dvh - 140px); min-height: 380px; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; gap: 18px; }
.esq-lado { display: grid; gap: 14px; align-content: start; }
.esq-lado i { height: 42px; border-radius: 12px; }
.esq-conversa { display: grid; gap: 14px; align-content: end; }
.esq-conversa i { height: 34px; width: 55%; border-radius: 12px; }
.esq-conversa i:nth-child(2) { justify-self: end; width: 40%; }
@media (max-width: 860px) { .esq-chat { grid-template-columns: 1fr; } .esq-conversa { display: none; } }

/* ---- troca de página suave (View Transitions; sem a API, uma entrada curta da página nova) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
@keyframes pg-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page.pg-entra { animation: pg-entra .18s ease-out; }

/* ---- T_CHAT em gaveta lateral (o mesmo T_CHAT da página, só que ao lado) */
.tchat-gaveta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2500; width: min(var(--tg-w), 100vw); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border-2); box-shadow: -18px 0 50px rgba(0, 0, 0, .35); transform: translateX(104%); transition: transform .18s ease-out; }
.tchat-gaveta.aberta { transform: none; }
.tchat-gaveta[hidden] { display: none; }
.tchat-gaveta.fixa { box-shadow: none; }
.tg-topo { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--border); background: var(--bg-2); flex: none; }
.tg-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--c-chat); background: color-mix(in srgb, var(--c-chat) 18%, transparent); }
.tg-ic svg { width: 17px; height: 17px; }
.tg-nome { font-family: var(--font-display); font-size: calc(16px * var(--tl, 1)); }
.tg-dica { color: var(--muted); font-size: calc(12px * var(--tl, 1)); margin-right: auto; }
.tg-topo .icon-btn[hidden] { display: none; }
.tg-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tg-corpo > .page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tg-corpo > .page[hidden] { display: none; }
.tg-carregando { padding: 14px; }
.tg-carregando .esq-chat { grid-template-columns: 1fr; height: auto; border: 0; padding: 0; }
.tg-carregando .esq-conversa { display: none; }
.tg-erro { padding: 20px; color: var(--muted); }
/* na gaveta o T_CHAT é sempre de uma coluna (lista ou conversa), como no celular */
.tchat-gaveta .wz, .tchat-gaveta .wz.com-info { flex: 1; height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 0; }
.tchat-gaveta .wz.com-conversa .wz-lado { display: none; }
.tchat-gaveta .wz:not(.com-conversa) .wz-chat { display: none; }
.tchat-gaveta .wz.com-info .wz-chat { display: none; }
.tchat-gaveta .voltar.wz-voltar { display: inline-flex; }
.tchat-gaveta .wz-msgs { padding: 8px 10px 12px; }
.tchat-gaveta .wz-m { max-width: 88%; }
.tchat-gaveta .wz-acoes { display: none !important; }
.tchat-gaveta .wz-topo { padding: 6px 4px; gap: 0; }
.tchat-gaveta .wz-topo-quem { gap: 8px; }
/* fixada ao lado (computador): a página encolhe; a sala e o mini player também */
html.tg-fixa body { padding-right: var(--tg-w); }
html.tg-fixa .app-baixo { right: var(--tg-w); }
@media (max-width: 700px) { .tchat-gaveta { width: 100vw; border-left: 0; } }

/* ---- faixa "Você está na reunião" (T_CHAT e gaveta) */
.faixa-reuniao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px 8px 14px; margin-bottom: 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--border)); }
.faixa-reuniao[hidden] { display: none; }
.fr-vivo { width: 10px; height: 10px; border-radius: 50%; background: var(--danger-icon); flex: none; }
.fr-txt { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fr-txt b { font-size: calc(14px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-txt small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); font-variant-numeric: tabular-nums; }
.fr-bt { gap: 6px; }
.fr-bt svg { width: 16px; height: 16px; }
.fr-sair { color: var(--danger-text); }
.tchat-gaveta .faixa-reuniao { margin: 8px 8px 0; flex: none; }
#page-conversas.com-faixa .wz { height: calc(100dvh - 112px - 66px); }
@media (max-width: 860px) { #page-conversas.com-faixa .wz { height: calc(100dvh - 96px - 66px); } .faixa-reuniao { border-radius: 0; margin-bottom: 0; } }

/* ---- aviso: sozinho na reunião */
.aviso-sozinho { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 2950; width: min(520px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--border)); box-shadow: var(--shadow); animation: mr-entra .2s ease-out; }
.aviso-sozinho[hidden] { display: none; }
.as-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); flex: none; }
.as-ic svg { width: 20px; height: 20px; }
.aviso-sozinho > div:not(.as-bts) { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; }
.aviso-sozinho small { color: var(--muted); font-size: calc(13px * var(--tl, 1)); }
.as-bts { display: flex; gap: 8px; margin-left: auto; }

/* ---- barra de comando (Ctrl+K) */
.cmdk { padding: 0; border: 0; background: transparent; width: min(640px, calc(100vw - 24px)); max-height: none; margin: 12vh auto auto; overflow: visible; color: var(--text); }
.cmdk::backdrop { background: color-mix(in srgb, var(--preto) 50%, transparent); backdrop-filter: blur(3px); }
.cmdk-caixa { display: flex; flex-direction: column; max-height: min(70vh, 620px); border-radius: 18px; background: var(--surface); border: 1px solid var(--border-2); box-shadow: var(--shadow); overflow: hidden; }
.cmdk-busca { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border); flex: none; }
.cmdk-busca svg { width: 19px; height: 19px; color: var(--muted); }
.cmdk-busca input { flex: 1; min-width: 0; height: 56px; border: 0; background: none; color: var(--text); font: inherit; font-size: calc(16px * var(--tl, 1)); outline: none; }
.cmdk-lista { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.cmdk-grupo { padding: 10px 10px 4px; font-size: calc(12px * var(--tl, 1)); font-weight: 650; color: var(--muted); }
.cmdk-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 12px; cursor: pointer; }
.cmdk-item.sel { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.cmdk-item[aria-disabled="true"] { cursor: default; opacity: .8; }
.cmdk-ic { --pc: var(--accent); width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, var(--surface-2)); }
.cmdk-ic svg { width: 17px; height: 17px; }
.avatar.cmdk-av { width: 32px; height: 32px; font-size: calc(12px * var(--tl, 1)); flex: none; }
.cmdk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmdk-txt b { font-weight: 600; font-size: calc(14.5px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-txt small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-x { width: var(--h-btn); height: var(--h-btn); flex: none; }
.cmdk-pe { display: flex; gap: 16px; flex-wrap: wrap; padding: 9px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: calc(12px * var(--tl, 1)); flex: none; }
.cmdk-pe kbd { margin-right: 3px; }
@media (max-width: 560px) { .cmdk { margin-top: 8px; } .cmdk-caixa { max-height: calc(100dvh - 24px); } .cmdk-pe { display: none; } }

/* ---- central de atividades (sino) */
.atv-pop { position: fixed; top: 60px; right: 16px; z-index: 2550; width: min(420px, calc(100vw - 24px)); max-height: min(70vh, 640px); display: flex; flex-direction: column;
  overflow: hidden; animation: ct-entra .14s ease-out; }
.atv-pop[hidden] { display: none; }
html.tg-fixa .atv-pop { right: calc(var(--tg-w) + 16px); }
.atv-topo { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--border); flex: none; }
.atv-topo h2 { margin: 0; font-size: calc(16px * var(--tl, 1)); }
.atv-n { font-size: calc(12px * var(--tl, 1)); font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger-text); }
.atv-topo .link-btn { margin-left: auto; font-size: calc(12.5px * var(--tl, 1)); color: var(--accent-text); }
.atv-topo .link-btn:disabled { color: var(--muted); opacity: .6; cursor: default; }
.atv-lista { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.atv-lista li { position: relative; display: flex; gap: 12px; padding: 10px; border-radius: 14px; }
.atv-lista li + li { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.atv-lista li.novo { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.atv-lista li.novo::before { content: ""; position: absolute; left: 3px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.avatar.atv-av { width: 38px; height: 38px; font-size: calc(13px * var(--tl, 1)); flex: none; }
.atv-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--text-soft); }
.atv-ic svg { width: 18px; height: 18px; }
.atv-ic.t-perdida, .atv-ic.t-cartao-perdida, .atv-ic.t-agenda-cancelada { color: var(--danger-text); background: var(--danger-soft); }
.atv-ic.t-recado, .atv-ic.t-form, .atv-ic.t-agenda, .atv-ic.t-avaliacao { color: var(--c-card); background: color-mix(in srgb, var(--c-card) 14%, transparent); }
.atv-ic.t-convite, .atv-ic.t-chamada-grupo { color: var(--ok-text); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.atv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.atv-txt b { font-size: calc(14px * var(--tl, 1)); font-weight: 650; }
.atv-txt small { color: var(--text-soft); font-size: calc(13px * var(--tl, 1)); overflow-wrap: anywhere; }
.atv-txt time { color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.atv-bts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.atv-visto { width: var(--h-btn); height: var(--h-btn); flex: none; }
.atv-vazio { padding: 26px 18px; text-align: center; color: var(--muted); display: grid; justify-items: center; gap: 6px; }
.atv-vazio > span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok-text); }
.atv-vazio svg { width: 22px; height: 22px; }
.atv-vazio p { margin: 0; }
@media (max-width: 560px) { .atv-pop { top: 64px; right: 12px; left: 12px; width: auto; max-height: calc(100dvh - 160px); } }

/* ---- lista de atalhos */
.atalhos-dlg { width: min(900px, calc(100vw - 24px)); }   /* 3 colunas: todo o T_ROOM, sala à vista e T_CHAT */
.atalhos-dlg .modal-head { display: flex; align-items: center; justify-content: space-between; }
.atalhos-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.atalhos-cols h3 { margin: 0 0 8px; font-size: calc(14px * var(--tl, 1)); color: var(--text-soft); }
.atalhos-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.atalhos-cols li { display: flex; align-items: center; gap: 12px; font-size: calc(13.5px * var(--tl, 1)); }
.atalhos-cols li > span { min-width: 92px; display: inline-flex; gap: 4px; }

/* ---- acessibilidade: foco sempre visível, alvos de toque, menos movimento */
.app-shell a:focus-visible, .app-shell button:focus-visible, .tchat-gaveta button:focus-visible, .cmdk button:focus-visible, .atv-pop button:focus-visible, .prod-card a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .tchat-gaveta, .page.pg-entra, .atv-pop, .aviso-sozinho, .fr-vivo { transition: none; animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---- listas longas leves: o navegador só desenha o que está perto da tela */
.wz-lista-rol .wz-item { content-visibility: auto; contain-intrinsic-size: auto 66px; }
.feed-page article.post { content-visibility: auto; contain-intrinsic-size: auto 320px; }

/* T_CHAT fixado ao lado OU barra recolhida (botão "Recolher" no pé, js/navegacao.js): a barra lateral vira uma coluna só de ícones (o nome aparece ao passar o mouse) */
@media (min-width: 961px) {
  :is(html.tg-fixa, html.barra-mini) .app-shell { --side-w: 76px; }
  :is(html.tg-fixa, html.barra-mini) .app-side { padding: 14px 10px; align-items: stretch; }
  :is(html.tg-fixa, html.barra-mini) .app-side .brand-text, :is(html.tg-fixa, html.barra-mini) .app-side .an-label, :is(html.tg-fixa, html.barra-mini) .app-side .nc-txt, :is(html.tg-fixa, html.barra-mini) .app-side .nav-sec,
  :is(html.tg-fixa, html.barra-mini) .app-side .nav-kbd, :is(html.tg-fixa, html.barra-mini) .app-side .t-foot, :is(html.tg-fixa, html.barra-mini) .app-side-foot kbd { display: none; }
  :is(html.tg-fixa, html.barra-mini) .app-nav a, :is(html.tg-fixa, html.barra-mini) .app-side-foot .nav-atalhos { justify-content: center; padding: 0 !important; gap: 0 !important; }
  :is(html.tg-fixa, html.barra-mini) .nav-card { height: 52px !important; }
  :is(html.tg-fixa, html.barra-mini) .app-nav a.active::before, :is(html.tg-fixa, html.barra-mini) .nav-card.active::before { left: -10px !important; }
  :is(html.tg-fixa, html.barra-mini) .app-side .nav-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; font-size: calc(10.5px * var(--tl, 1)); }
  :is(html.tg-fixa, html.barra-mini) .app-side-top { justify-content: center; }
  html.tg-fixa .nav-recolher { display: none; }   /* a barra já está recolhida pelo T_CHAT fixado: o botão não muda nada */
  html.tg-fixa .ce-corpo { grid-template-columns: minmax(0, 1fr) 320px; }
  html.tg-fixa .ce-moldura { width: 320px; }
}
html.tg-fixa { --tg-w: 380px; }
@media (max-width: 640px) { .faixa-reuniao [data-fr="voltar"] { display: none; } }   /* no celular a barra fina do topo já tem o Voltar */

/* ================================================================ novidades 17/10 (escudo, cartão, sala e chat) */
/* T_ROOM → "Como foram suas reuniões" (avaliações ao sair, só o dono vê) */
.salas-aval { margin-top: 26px; display: grid; gap: 12px; }
.salas-aval .sa-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.salas-aval h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: calc(18px * var(--tl, 1)); }
.salas-aval h2 svg { width: 20px; height: 20px; color: var(--estrela); }
.sa-lista { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; }
.sa-sala { padding: 0; overflow: hidden; }
.sa-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; padding: 14px 16px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.sa-cab:hover { background: var(--surface-2); }
.sa-nome { display: grid; min-width: 0; } .sa-nome b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sa-nome small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.sa-media { display: grid; justify-items: end; } .sa-media b { font-size: calc(22px * var(--tl, 1)); line-height: 1; }
.sa-est { color: var(--estrela); letter-spacing: 1px; font-size: calc(13px * var(--tl, 1)); }
.sa-n { grid-column: 1 / -1; color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.sa-corpo { padding: 0 16px 14px; display: grid; gap: 10px; border-top: 1px solid var(--border); }
.sa-dist { display: grid; gap: 4px; padding-top: 10px; }
.sa-dist span { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 8px; font-size: calc(12px * var(--tl, 1)); color: var(--muted); }
.sa-dist i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--estrela) var(--p), var(--surface-3) var(--p)); }
.sa-coments { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 320px; overflow: auto; }
.sa-coments li { padding: 9px 11px; border-radius: 10px; background: var(--surface-2); font-size: calc(13.5px * var(--tl, 1)); overflow-wrap: anywhere; }
.sa-coments li small { display: block; margin-top: 3px; color: var(--muted); font-size: calc(11.5px * var(--tl, 1)); }
/* T_CHAT (17/10): status de 24 h, fila do cartão, salas abertas, mensagem programada, lembretes e respostas rápidas */
.tx-status-faixa { display: flex; gap: 10px; overflow-x: auto; padding: 10px 12px 8px; scrollbar-width: thin; border-bottom: 1px solid var(--border); }
.tx-st { flex: none; display: grid; justify-items: center; gap: 4px; width: 64px; padding: 0; border: 0; background: none; color: var(--text-soft); cursor: pointer; font: inherit; }
.tx-st small { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12px * var(--tl, 1)); }
.tx-st-av { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; padding: 3px; background: var(--surface-3); }
.tx-st.com .tx-st-av { background: conic-gradient(var(--vela-alta), var(--azul-neon), var(--vela-alta)); }
.tx-st.visto .tx-st-av { background: var(--surface-4); }
.tx-st-av .avatar { width: 48px; height: 48px; border: 2px solid var(--bg); font-size: calc(16px * var(--tl, 1)); }
.tx-st-mais { position: absolute; right: -1px; bottom: -1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--branco); border: 2px solid var(--bg); }
.tx-st-mais svg { width: 12px; height: 12px; }
.tx-st:hover .tx-st-av, .tx-st:focus-visible .tx-st-av { transform: scale(1.05); }
.tx-st-add { flex: none; align-self: start; display: grid; place-items: center; width: var(--h-btn); height: var(--h-btn); margin: 12px 0 0 -8px; border-radius: 50%; border: 1px dashed var(--border-2); background: var(--surface-2); color: var(--text-soft); cursor: pointer; }
.tx-st-add svg { width: 16px; height: 16px; }
.tx-fila, .tx-sala { display: flex; align-items: center; gap: 10px; margin: 8px 10px 0; padding: 10px 12px; border-radius: 12px; }
.tx-fila { background: color-mix(in srgb, var(--vip) 14%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--vip) 45%, transparent); }
.tx-fila > svg, .tx-sala > svg { width: 20px; height: 20px; flex: none; }
.tx-fila > span, .tx-sala > span { flex: 1; min-width: 0; display: grid; }
.tx-fila b, .tx-sala b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(13.5px * var(--tl, 1)); }
.tx-fila small, .tx-sala small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-salas { display: grid; gap: 0; }
.tx-sala { background: color-mix(in srgb, var(--roxo-grupo) 10%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--roxo-grupo) 35%, transparent); }
.tx-prog-barra { display: flex; align-items: center; gap: 8px; margin: 0 10px 6px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: calc(13px * var(--tl, 1)); }
.tx-prog-barra svg { width: 16px; height: 16px; flex: none; color: var(--accent-text); }
.tx-prog-barra span { flex: 1; min-width: 0; display: grid; } .tx-prog-barra small { color: var(--muted); font-size: calc(11.5px * var(--tl, 1)); }
.tx-dlg .modal-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.tx-dlg .modal-head h2 svg { width: 20px; height: 20px; }
.tx-dlg .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-prog-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: min(60vh, 520px); overflow: auto; }
.tx-prog-lista li { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.tx-prog-lista p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: calc(14px * var(--tl, 1)); }
.tx-prog-lista textarea, .tx-prog-lista input { width: 100%; }
.tx-prog-q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: calc(13px * var(--tl, 1)); }
.tx-prog-q svg { width: 15px; height: 15px; } .tx-prog-q small { color: var(--muted); }
.tx-prog-bts { display: flex; flex-wrap: wrap; gap: 6px; } 
.tx-lemb-msg { margin: 0; padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 8px; background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: calc(14px * var(--tl, 1)); }
.tx-sug { position: fixed; z-index: 1200; max-height: 300px; overflow: auto; display: grid; padding: 6px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border-2); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.tx-sug button { display: grid; gap: 1px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.tx-sug button span { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-sug button.on, .tx-sug button:hover { background: var(--accent-soft); }
.tx-sug .tx-sug-ger { display: flex; align-items: center; gap: 6px; margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; color: var(--accent-text); font-size: calc(13px * var(--tl, 1)); }
.tx-sug .tx-sug-ger svg { width: 15px; height: 15px; }
.tx-sug-vazio { margin: 6px 10px; color: var(--muted); font-size: calc(13px * var(--tl, 1)); }
.tx-resp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 40vh; overflow: auto; }
.tx-resp-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.tx-resp-lista p { margin: 0; font-size: calc(13.5px * var(--tl, 1)); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-soft); }
.tx-resp-lista span { display: flex; gap: 2px; }
.tx-resp-nova { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; margin: 0; }
.tx-resp-nova legend { padding: 0 6px; font-weight: 700; font-size: calc(13.5px * var(--tl, 1)); }
.tx-atalho { display: flex; align-items: center; gap: 4px; } .tx-atalho input { flex: 1; }
.tx-st-abas { display: flex; gap: 6px; } .tx-st-abas button { display: inline-flex; align-items: center; gap: 6px; } .tx-st-abas svg { width: 16px; height: 16px; }
.tx-st-prev { border-radius: 14px; background: var(--c); padding: 12px; }
.tx-st-prev textarea { width: 100%; min-height: 150px; border: 0; background: transparent; color: var(--branco); font-size: calc(20px * var(--tl, 1)); font-weight: 700; text-align: center; resize: none; outline: none; }
.tx-st-prev textarea::placeholder { color: rgba(255, 255, 255, .7); }
.tx-st-cores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tx-st-cores button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.tx-st-cores button.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg) inset; }
.tx-st-foto-prev img { display: block; max-width: 100%; max-height: 40vh; margin: 8px auto 0; border-radius: 12px; }
dialog.tx-st-ver { width: min(480px, 100vw); height: min(860px, 100dvh); max-width: 100vw; max-height: 100dvh; margin: auto; padding: 0; border: 0; border-radius: 16px; overflow: hidden;
  background: var(--preto); color: var(--branco); }
dialog.tx-st-ver[open] { display: grid; grid-template-rows: auto auto 1fr auto; }
dialog.tx-st-ver::backdrop { background: rgba(0, 0, 0, .88); }
@media (max-width: 520px) { dialog.tx-st-ver { border-radius: 0; } }
.tx-sv-barras { display: flex; gap: 4px; padding: 10px 10px 0; }
.tx-sv-barras i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; position: relative; }
.tx-sv-barras i.feito { background: var(--branco); }
.tx-sv-barras i.agora::after { content: ""; position: absolute; inset: 0; background: var(--branco); transform-origin: left; animation: tx-barra 6s linear forwards; }
dialog.tx-st-ver.pausado .tx-sv-barras i.agora::after { animation-play-state: paused; }
@keyframes tx-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .tx-sv-barras i.agora::after { animation: none; transform: none; opacity: .6; } }
.tx-sv-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.tx-sv-topo .avatar { flex: none; width: 38px; height: 38px; font-size: calc(14px * var(--tl, 1)); }
.tx-sv-topo > span:not(.avatar) { flex: 1; display: grid; min-width: 0; } .tx-sv-topo small { opacity: .7; font-size: calc(12px * var(--tl, 1)); }
.tx-sv-topo .icon-btn { color: var(--branco); background: rgba(255, 255, 255, .12); }
.tx-sv-corpo { position: relative; display: grid; place-items: center; min-height: 0; background: var(--c, var(--preto)); padding: 16px 58px; }
.tx-sv-corpo img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.tx-sv-txt { margin: 0; font-size: clamp(20px, 5vw, 28px); font-weight: 800; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
.tx-sv-leg { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, .55); text-align: center; overflow-wrap: anywhere; }
.tx-sv-nav { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .4); color: var(--branco); cursor: pointer; }
.tx-sv-nav.ant { left: 8px; } .tx-sv-nav.prox { right: 8px; } .tx-sv-nav svg { width: 22px; height: 22px; }
.tx-sv-vistos { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border: 0; background: rgba(255, 255, 255, .08); color: var(--branco); font: inherit; font-weight: 700; cursor: pointer; }
.tx-sv-vistos svg { width: 18px; height: 18px; }
.tx-sv-lista { position: absolute; inset: auto 0 0; max-height: 60%; overflow: auto; display: grid; gap: 8px; padding: 14px; border-radius: 16px 16px 0 0; background: var(--tx-sv-fundo); }
.tx-sv-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tx-sv-lista li { display: flex; align-items: center; gap: 10px; } .tx-sv-lista li > span:not(.avatar) { display: grid; } .tx-sv-lista small { opacity: .7; font-size: calc(12px * var(--tl, 1)); }
.tx-sv-lista .avatar { flex: none; width: 34px; height: 34px; font-size: calc(13px * var(--tl, 1)); }

/* ============================================================ reorganização de layout (17/10)
   Varredura automática (testes/varredura_layout.js, t_61_layout.py): nada passa da tela, nenhum botão cobre outro,
   alvos de toque de 44 px no celular e menos espaço vazio. Só posição e tamanho: nenhuma função mudou. */

/* ---- cabeçalho dos produtos: no celular cabe em 375 px (antes passava de 427-472 px) */
@media (max-width: 960px) {
  /* "Baixar para Windows", tema e relógio continuam no menu (Menu > T_ROOM para Windows; Minha conta > Tema do site) */
  .app-top .btn-baixar, .app-top .theme-btn, .app-top .clock { display: none; }
  .app-acao .btn { width: var(--h-btn); padding: 0; justify-content: center; }
  .app-acao .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 560px) {
  .app-top { gap: 6px; padding-inline: 12px; }
  .app-top .topnav-right { gap: 6px; }
  .app-titulo { min-width: 0; }
  /* T_CHAT ao lado: no celular o T_CHAT já está na barra de baixo (e a gaveta ocuparia a tela toda) */
  .app-top .top-tchat { display: none; }
  .app-top .account-btn { width: var(--h-btn); padding: 0; gap: 0; justify-content: center; }
  .app-top .account-btn > svg { display: none; }
}

/* ---- alvo de toque (WCAG 2.5.5): REGRA GERAL (celular, tablet e qualquer tela de toque), no lugar da lista manual de classes.
   1) CRESCEM até --alvo-toque (44 px): botão de texto e de só ícone, link-botão, aba/chip de fileira que rola, item de menu/lista
      e campo (min-* com !important: ganha das alturas de contexto sem precisar de uma regra por componente).
   2) Barras densas que NÃO rolam (mídia da reunião, barra do anfitrião, botões de miniatura, reações) mantêm o desenho
      (24-36 px) e ganham a área de toque por ::before, sem crescer o visual nem empurrar o vizinho (em contêiner que rola o
      ::before seria cortado: por isso abas e chips de fileira ficam na lista 1).
   Componente novo entra numa das duas listas. */
@media (pointer: coarse), (max-width: 600px) {
  .btn, .btn-baixar, .account-btn, .link-btn, .post-act, .pc-abrir, .feed-links a, .icon-btn, .wz-ic, .theme-btn, .wz-eu-av,
  .top-busca, .top-sino, .top-tchat, .app-voltar, .voltar, .rm-voltar, .mr-voltar, .tr-globo, .site-nav a, .site-nav button,
  .app-nav a, .app-side-foot a, .app-side-foot .nav-atalhos, .menu-pop button, .menu-pop a, .wz-mi,
  .spk-pop .spk-mudo, .octo-mostrar, .rd-faixa .rd-desl, .tv-sons button, .ex-quadro .ex-bts .btn, .rm-tchat, .atv-topo .link-btn,
  .tx-prog-barra .wz-link, .td-ev-adm .wz-link, .te-enq .wz-link, .td-men-topo .wz-link,
  .wz-filtros button, .es-tabs button, .tab, .msgs-tab, .ce-abas button, .ce-seg button, .seg button, .ce-bloco-nome, .tc-canal,
  .ts-abas button, .td-ev-bts button, .te-op, .g-chip, .chip-btn, .kchip, .ce-chip, .fc-target, .wz-enviar, .rd-sw, .tc-mais, .wz-info-acao,
  .wz-play, .wz-descer { min-height: var(--alvo-toque) !important; }
  .icon-btn, .wz-ic, .theme-btn, .wz-eu-av, .top-sino, .top-tchat, .tr-globo, .top-busca, .app-voltar, .voltar, .account-btn, .rm-tchat,
  .btn, .wz-enviar, .rd-sw, .tc-mais, .wz-play, .wz-descer { min-width: var(--alvo-toque) !important; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, .td-top-compor textarea, #wz-texto { min-height: var(--alvo-toque); }
  .link-btn { display: inline-flex; align-items: center; }
  .pc-aviso .link-btn { padding-inline: 6px; }
  /* barras densas (não rolam): só a área de toque */
  :where(.ctrl, .hb-btn, .tm-btn, .tm-give, .p-give, .dk-btn, .dk-rail-btn, .stage-pager button, .wb-tool, .m-acts button, .m-react, .cm-btn,
    .ad-chip button, .p-kick, .wz-acoes button, .react-btn, .tile .t-actions button, .room-code, #rm-access, #rm-voltar) { position: relative; }
  :is(.ctrl, .hb-btn, .tm-btn, .tm-give, .p-give, .dk-btn, .dk-rail-btn, .stage-pager button, .wb-tool, .m-acts button, .m-react, .cm-btn,
    .ad-chip button, .p-kick, .wz-acoes button, .react-btn, .tile .t-actions button, .room-code, #rm-access, #rm-voltar)::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--alvo-toque)); height: max(100%, var(--alvo-toque));
    transform: translate(-50%, -50%); }
  /* barra de mídia da reunião: passo de 44 px entre os botões (36 + 8), as áreas de toque não se sobrepõem */
  .dock-center, .dock-left, .dock-right { gap: 8px; }
}

/* ---- conteúdo mais largo em telas grandes (menos margem vazia dos lados) */
@media (min-width: 1800px) { .app-content { max-width: 1560px; } }

/* ---- Painel: cartões preenchem a grade (sem buraco no fim da última linha) */
#page-painel { container-type: inline-size; container-name: painel; }
@container painel (min-width: 1000px) {
  .prod-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .prod-slot { grid-column: span 2; }
  .prod-slot:nth-child(3n+1):nth-last-child(2), .prod-slot:nth-child(3n+2):last-child { grid-column: span 3; }
  .prod-slot:nth-child(3n+1):last-child { grid-column: 1 / -1; }
}
@container painel (min-width: 640px) and (max-width: 999.98px) {
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod-slot:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@container painel (max-width: 639.98px) { .prod-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Minha conta: duas colunas que se encaixam (antes cada linha esticava o bloco menor e sobrava um vão vazio) */
@media (min-width: 961px) {
  #page-conta .account-grid:not(.conta-cartao) { display: block; columns: 2; column-gap: 14px; }
  #page-conta .account-grid:not(.conta-cartao) > * { break-inside: avoid; margin-bottom: 14px; }
  #page-conta .account-grid:not(.conta-cartao) > .span-2 { column-span: all; }
  #page-conta .conta-cartao { margin-bottom: 14px; }
}

/* ---- T_FEED: "Publicar" na mesma linha de Imagem e Publicar para (antes caía sozinho numa linha) */
.block.feed-composer { container-type: inline-size; }
@container (max-width: 460px) {
  .fc-target > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.fc-bar .spacer { flex: 1 1 0; min-width: 0; }

/* ---- T_CHAT: topo da conversa estreito (lista ao lado ou gaveta): nome primeiro, botões só com ícone */
.wz-chat { container-type: inline-size; container-name: wzchat; }
@container wzchat (max-width: 820px) {
  .wz-topo .wz-porta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wz-topo .wz-porta { padding: 8px; }
  .rd-ctl .rd-sw-txt { display: none; }
}
/* canal ao vivo: o nome da chave fica à vista até o topo ficar estreito de verdade (aí só o ícone + a chave) */
@container wzchat (max-width: 640px) {
  .wz-av-slot .rd-sw-txt { display: none; }
  .wz-av-slot .rd-sw { padding: 0 4px; gap: 4px; }
}

/* ---- mini janela da reunião: no tablet fica acima da barra de baixo (app.js, alturaLivre); no celular a área de toque vem da regra geral */

/* ---- pré-entrada: rodapé com os links quebra a linha no celular (antes passava da tela) */
.pj-foot { white-space: normal; line-height: 2; }

/* ---- T_CHAT estreito (celular e gaveta): topo da conversa em duas linhas: voltar + nome em cima, ações embaixo
   (antes o nome ficava com 27 px no celular, espremido pelos botões) */
@container wzchat (max-width: 520px) {
  .wz-topo { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
  .wz-topo .wz-topo-quem { flex: 1 1 calc(100% - 52px); }
}
@media (max-width: 600px) {
  .tx-prog-barra .wz-link { padding: 0 10px; }
  .home-v2 .topnav-right .btn-baixar { min-width: 44px; justify-content: center; }
}

/* ---- reunião no celular: barra do anfitrião, quadros, ferramentas e topo (área de toque: regra geral) */
@media (max-width: 600px) {
  .ctrl { flex: none; }
  .tr-check, .ex-linha label { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
}

/* ---- celular: listas e diálogos (área de toque dos botões: regra geral) */
@media (max-width: 600px) {
  .fl-ctrl select { min-height: 44px; }
  .pc-link a, .cartao-link-url a, .wz-rec-contato a { display: inline-flex; align-items: center; min-height: 44px; }
  #gf-colors button, .tx-st-cores button { width: 44px; height: 44px; }
  #wz-texto { min-height: 44px; }
  .ce-emo-campo > input, .ce-emo-campo > textarea { padding-right: 52px; }
}

/* ---- reunião no celular: o topo tinha dois botões para o Painel (seta e logo) e o nome da sala sumia ("T…").
   Fica a seta (com o mesmo destino) e o nome/código da sala ganha o espaço; a barra do anfitrião cabe numa linha */
@media (max-width: 600px) {
  .room .rm-home, .room .room-eyebrow { display: none; }
  .room .host-bar { gap: 3px; padding: 3px; }
  .room .host-bar .hb-btn { padding: 0 8px; }
}

/* ---- Minha conta > T_CARD: "Abrir o T_CARD" do tamanho do texto, com a explicação ao lado (antes o botão ocupava a linha toda) */
.conta-cartao .tl-actions { align-items: center; }
.conta-cartao .tl-actions .btn { flex: 0 0 auto; }
.conta-cartao .tl-actions > :not(.btn) { flex: 1 1 260px; }

/* ---- T_CHAT: a data do dia fica presa no topo só durante a rolagem (parada, não cobre o texto da mensagem de cima) */
#wz-msgs:not(.rolando) .wz-dia { position: relative; top: auto; }


/* ---- reunião no celular: a qualidade da conexão só aparece no topo quando está fraca/perdida (boa = mais espaço para o nome da sala) */
@media (max-width: 600px) {
  .room #rm-conn:has(.q-excellent), .room #rm-conn:has(.q-good) { display: none; }
}


/* ---- reunião no celular/tablet: painel (chat, pessoas, ferramentas) termina acima da faixa escura da barra de baixo */

/* ---- reunião no celular, uma pessoa: o nome no vídeo só sobe o necessário para sair de baixo da barra (antes subia
   sempre a altura da barra e ficava no meio do vídeo quando ele não chegava até embaixo) */

/* versão nova do site (17/10): aviso discreto no canto de baixo */
.tm-versao-nova { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,.4));
  font-size: calc(13px * var(--tl, 1)); font-weight: 600; color: var(--text); }
/* ============================================================ escala compacta (17/10)
   Pedido do dono: num notebook (1366×768) tudo parecia grande demais. Uma escala só, menor e alinhada, para o site e a
   área logada (Painel, T_ROOM, T_CHAT, T_FEED, Minha conta, Administração, barra lateral, topo, menus e diálogos).
   Desde 24/10 os botões usam a escala única dos tokens do :root (começo do arquivo); este bloco só ajusta o resto do layout. */
:where(.app-shell, #view-home, #view-left, .tchat-gaveta, .atv-pop, .cmdk, .modal:not(#settings)) { --radius: 14px; }

/* ---- campos */
:where(.app-shell, #view-home, #view-left, .tchat-gaveta, .modal:not(#settings)) .field { gap: 5px; }
:where(.app-shell, #view-home, #view-left, .tchat-gaveta, .modal:not(#settings)) .field input,
:where(.app-shell, #view-home, #view-left, .tchat-gaveta, .modal:not(#settings)) .field select { height: var(--h-campo); padding: 0 12px; border-radius: 10px; }
:where(.app-shell, #view-home, #view-left, .tchat-gaveta, .modal:not(#settings)) .field select { padding-right: 30px; }
:where(.app-shell, #view-home, #view-left, .tchat-gaveta, .modal:not(#settings)) .field > span { font-size: calc(12px * var(--tl, 1)); }
:where(.app-shell, .modal:not(#settings)) .slug-input { height: var(--h-campo); }
:where(.app-shell, .modal:not(#settings)) .switch { padding: 10px 12px; gap: 10px; }
:where(.app-shell, .modal:not(#settings)) .switch-text b { font-size: calc(13.5px * var(--tl, 1)); }
:where(.app-shell, .modal:not(#settings)) .switch-text small { font-size: calc(12px * var(--tl, 1)); }

/* ---- diálogos */

/* ---- barra lateral: mais estreita, blocos mais baixos */
.app-shell { --side-w: 228px; }
.app-side { padding-top: 12px; padding-inline: 10px; gap: 6px; }
@media (min-width: 961px) { .app-side { padding-bottom: 12px; } }
.app-side .brand { gap: 10px; }
.app-side .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
.app-side .brand-name { font-size: calc(15px * var(--tl, 1)); }
.app-nav a { height: var(--h-item); gap: 10px; padding: 0 10px; font-size: calc(13px * var(--tl, 1)); }
.app-nav a.active::before { left: -10px; }
.app-nav .nav-inicio { height: var(--h-item); font-size: calc(14px * var(--tl, 1)); }
.nav-inicio .ni-ic { width: 28px; height: 28px; border-radius: 8px; }
.nav-inicio .ni-ic svg { width: 16px; height: 16px; }
.nav-sec { margin: 8px 4px 0; font-size: calc(12px * var(--tl, 1)); }
.nav-card { height: 48px !important; margin-top: 5px; padding: 0 8px 0 7px !important; gap: 10px !important; border-radius: 11px !important; font-size: calc(13.5px * var(--tl, 1)) !important; }
.nav-card.active::before { left: -10px !important; }
.nav-card .nc-ic { width: 30px; height: 30px; border-radius: 9px; }
.nav-card .nc-ic svg { width: 17px !important; height: 17px !important; }
.nav-card .nc-txt b { font-size: calc(13.5px * var(--tl, 1)); }
.nav-card .nc-txt small { font-size: calc(12px * var(--tl, 1)); }
.nav-card.active .nc-txt small { color: var(--text-soft); }   /* IMP 02/11: o cinza do apoio dava 4,49:1 sobre o fundo tingido do item aberto */
.nav-adm { padding-top: 8px; }
.app-side .nav-badge { min-width: 18px; height: 18px; padding: 0 5px; font-size: calc(10.5px * var(--tl, 1)); }
.app-side-foot { padding-top: 8px; gap: 0; }
.app-side-foot a, .app-side-foot .nav-atalhos { height: var(--h-item); font-size: calc(13px * var(--tl, 1)); }
.app-side-foot a svg, .app-side-foot .nav-atalhos svg { width: 17px; height: 17px; }
.app-side-foot .t-foot { padding: 8px 10px 2px; }

/* ---- topo dos produtos: 56 px, voltar e ícones do mesmo tamanho e do mesmo desenho */
.app-top { height: 56px; gap: 8px; padding: 0 clamp(16px, 2.2vw, 28px); }
.app-top h1, .at-txt h1 { font-size: calc(17px * var(--tl, 1)); }
.at-ic { width: 30px; height: 30px; border-radius: 9px; }
.at-ic svg { width: 17px; height: 17px; }
.at-txt small { font-size: calc(12px * var(--tl, 1)); }
.app-titulo { gap: 9px; }
.app-top .topnav-right { gap: 6px; }
.top-busca { height: var(--h-top); border-radius: 10px; padding: 0 6px 0 10px; font-size: calc(13px * var(--tl, 1)); gap: 7px; }
.top-busca svg { width: 16px; height: 16px; }
@media (max-width: 1440px) and (min-width: 1101px) { .top-busca .tb-txt { display: inline; } }
.top-busca .tb-txt { color: var(--muted); }
.app-top .top-sino, .app-top .top-tchat { width: var(--h-top); height: var(--h-top); border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); }
.app-top .top-sino:hover, .app-top .top-tchat:hover { border-color: var(--border-2); background: var(--surface-2); color: var(--text); }
.app-top .top-sino svg, .app-top .top-tchat svg { width: 17px; height: 17px; }
.app-top .top-tchat.on { border-color: color-mix(in srgb, var(--c-chat) 45%, transparent); }
.app-top .top-sino .nav-badge, .app-top .top-tchat .nav-badge { top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: calc(10px * var(--tl, 1)); border-width: 2px; }
.app-top .theme-btn { width: var(--h-top); height: var(--h-top); border-radius: 10px; }
.app-top .theme-btn svg { width: 17px; height: 17px; }
.app-top .btn-baixar { height: var(--h-top); border-radius: 10px; padding: 0 12px; font-size: calc(13px * var(--tl, 1)); gap: 6px; box-shadow: none;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--accent-text); }
.app-top .btn-baixar:hover { transform: none; filter: none; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.app-top .btn-baixar [data-icon], .app-top .btn-baixar [data-icon] svg { width: 16px; height: 16px; }
@media (max-width: 1560px) { .app-top .btn-baixar { width: var(--h-top); padding: 0; justify-content: center; } }
.app-top .account-btn { height: var(--h-top); border-radius: 10px; padding: 0 8px 0 4px; gap: 7px; font-size: calc(13px * var(--tl, 1)); }
.app-top .account-btn .avatar { width: 22px; height: 22px; font-size: calc(11px * var(--tl, 1)); }
.app-top .account-btn > svg { width: 14px; height: 14px; }
.app-top .clock { font-size: calc(12.5px * var(--tl, 1)); }
@media (min-width: 601px) and (max-width: 960px) { .app-acao .btn { width: var(--h-top); } }
@media (max-width: 600px) {
  .app-top { padding-inline: 12px; }
}

/* ---- conteúdo: menos margem em volta */
.app-content { padding: 18px clamp(16px, 2.2vw, 28px) 48px; }
.page-head { margin-bottom: 14px; }
.page-head > p { font-size: calc(13.5px * var(--tl, 1)); }
.page-actions { gap: 8px; }
.app-content .rooms-head { margin-bottom: 14px; }

/* ---- blocos, indicadores, abas */
.block-head { padding: 12px 14px 0; }
.block-head h2 { font-size: calc(14.5px * var(--tl, 1)); gap: 9px; }
.block-body { padding: 10px 14px 14px; }
.b-ic { width: 28px; height: 28px; border-radius: 8px; }
.b-ic svg { width: 15px; height: 15px; }
.kpi-grid { gap: 10px; margin-bottom: 12px; }
.kpi { padding: 12px 14px; gap: 12px; }
.kpi b { font-size: calc(22px * var(--tl, 1)); }
.kpi small, .kpi span:not(.kpi-ic) { font-size: calc(11.5px * var(--tl, 1)); }
.kpi-ic { width: 38px; height: 38px; border-radius: 10px; }
.kpi-ic svg { width: 18px; height: 18px; }
.empty-state { padding: 20px 12px; gap: 8px; }
.empty-state > span { width: 42px; height: 42px; border-radius: 12px; }
.empty-state > span svg { width: 20px; height: 20px; }

/* ---- Painel */
.dash-hero { margin-bottom: 14px; gap: 12px 20px; }
.dash-hello h2 { font-size: clamp(20px, 2.1vw, 26px); margin-bottom: 2px; }
.dash-hello .eyebrow { font-size: calc(12.5px * var(--tl, 1)); }
.dash-hello p { font-size: calc(13.5px * var(--tl, 1)); }
.prod-grid { gap: 14px; }
.prod-card { gap: 12px; padding: 14px 14px 12px; }
.prod-card::before { height: 2px; }
.pc-topo { gap: 10px; }
.pc-ic { width: 34px; height: 34px; border-radius: 10px; }
.pc-ic svg { width: 18px; height: 18px; }
.pc-nome b { font-size: calc(16px * var(--tl, 1)); }
.pc-nome small { font-size: calc(12px * var(--tl, 1)); }
.pc-abrir { padding: 0 8px; font-size: calc(12.5px * var(--tl, 1)); }
.pc-nums { gap: 6px; }
.pc-num { padding: 8px 10px; border-radius: 10px; }
.pc-num b { font-size: calc(20px * var(--tl, 1)); }
.pc-num small { font-size: calc(12px * var(--tl, 1)); }
/* duas colunas ou mais: os números de todos os cartões com a mesma altura (rótulo de até 2 linhas) */
@container painel (min-width: 640px) and (max-width: 1400px) { .pc-num small { min-height: calc(2 * 1.3em); } }
.pcx-item { min-height: 40px; padding: 4px 6px; gap: 9px; border-radius: 10px; }
.pcx-ic { width: 28px; height: 28px; border-radius: 8px; }
.pcx-ic svg { width: 15px; height: 15px; }
.pcx-txt b { font-size: calc(13.5px * var(--tl, 1)); }
.pcx-txt small { font-size: calc(12px * var(--tl, 1)); }
.pc-online li { padding: 2px 2px 2px 6px; }
.pc-lista, .pc-online { gap: 2px; }
.pc-vazio, .pc-aviso { font-size: calc(13px * var(--tl, 1)); }
.pc-link { padding: 4px 4px 4px 12px; border-radius: 10px; }
.pc-link a { font-size: calc(13px * var(--tl, 1)); }
.pc-post { padding: 10px 12px; border-radius: 10px; }
.pc-post-txt { font-size: calc(13px * var(--tl, 1)); }
.dash-cv-av .avatar { width: 34px; height: 34px; }

/* ---- T_ROOM (salas) */
.group-bar { gap: 6px; }
.rooms-grid { gap: 22px; }
.rooms-grid-inner { gap: 14px; }
.room-card { padding: 14px; gap: 10px; }
.room-card .rc-top { gap: 10px; }
.room-card .rc-ic { width: 38px; height: 38px; border-radius: 10px; }
.room-card .rc-ic svg { width: 18px; height: 18px; }
.room-card h2 { font-size: calc(15px * var(--tl, 1)); }
.room-card .rc-link { font-size: calc(12px * var(--tl, 1)); }
.room-card .rc-actions { gap: 6px; }

/* ---- ícones desenhados dentro de botões e chips (fase 4: no lugar de emoji) */
.rd-onda svg { width: 18px; height: 18px; }
.tile .t-actions button.t-escudo-bt svg { width: 15px; height: 15px; }
.hb-btn.hb-hands svg { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.p-handicon svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--warn); }
.tc-canal svg, .tc-lista b svg { width: 14px; height: 14px; flex: none; vertical-align: -2px; }
.tr-rst svg { width: 13px; height: 13px; }
.tr-voltar svg { width: 15px; height: 15px; }

/* ---- T_CHAT */
@media (min-width: 861px) {
  .wz { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .wz.com-info { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) minmax(280px, 330px); }
}
@media (min-width: 961px) {
  .wz, .wz.com-info { height: calc(100dvh - 92px); }
  #page-conversas.com-faixa .wz { height: calc(100dvh - 92px - 62px); }
}
.wz-eu { padding: 8px 8px 8px 12px; gap: 9px; }
.wz-eu-av .avatar.wz-av { width: 36px; height: 36px; min-width: 36px; flex-basis: 36px; }
.wz-eu-txt b { font-size: calc(16px * var(--tl, 1)); }
.wz-ic svg { width: 18px; height: 18px; }
.wz-busca { margin: 8px 10px 4px; padding: 0 10px; }
.wz-busca input { padding: 8px 0; font-size: calc(13.5px * var(--tl, 1)); }
.wz-oferta-push { padding: 8px 8px 8px 10px; gap: 9px; }
.wz-oferta-push b { font-size: calc(13px * var(--tl, 1)); }
.wz-oferta-push small { font-size: calc(12px * var(--tl, 1)); }
.wz-filtros { gap: 5px; padding: 6px 10px 6px; }
.wz-sec { padding: 10px 14px 4px; font-size: calc(12px * var(--tl, 1)); }
.wz-item { gap: 10px; padding: 8px 12px; }
.wz-item::after { left: 64px; }
.avatar.wz-av { width: 42px; height: 42px; min-width: 42px; flex: 0 0 42px; font-size: calc(15px * var(--tl, 1)); }
.wz-nome { font-size: calc(14px * var(--tl, 1)); }
.wz-previa { font-size: calc(13px * var(--tl, 1)); }
.wz-hora { font-size: calc(11.5px * var(--tl, 1)); }
.wz-topo { padding: 6px 8px; }
.wz-topo-quem { gap: 10px; }
.wz-topo-quem .avatar.wz-av { width: 38px; height: 38px; min-width: 38px; flex-basis: 38px; }
.wz-topo-txt b { font-size: calc(15px * var(--tl, 1)); }
.wz-topo-txt small { font-size: calc(12px * var(--tl, 1)); }
.wz-b { font-size: calc(14px * var(--tl, 1)); }
.wz-compor { padding: 7px 10px; }
.wz-campo textarea { font-size: calc(14px * var(--tl, 1)); padding: 9px 0; }
.wz-enviar svg { width: 19px; height: 19px; }
.wz-mais-bt svg { width: 22px; height: 22px; }
.wz-mi { font-size: calc(13.5px * var(--tl, 1)); padding: 0 11px; min-height: var(--h-item); }
.wz-info-perfil { padding: 20px 14px 16px; }
.avatar.wz-info-av { width: 96px; height: 96px; min-width: 96px; font-size: calc(32px * var(--tl, 1)); }
.wz-info-perfil h3 { font-size: calc(18px * var(--tl, 1)); }
.wz-info-acao { padding: 10px 16px; font-size: calc(14px * var(--tl, 1)); }
.tg-topo { height: 56px; }
.tg-nome { font-size: calc(15px * var(--tl, 1)); }
.tg-ic { width: 28px; height: 28px; border-radius: 8px; }

/* ---- T_FEED */
.feed-grid { grid-template-columns: 236px minmax(0, 1fr) 280px; gap: 14px; }
.feed-left, .feed-right { top: 72px; gap: 12px; }
.feed-center, .feed-timeline { gap: 10px; }
.feed-profile { padding: 16px 14px 12px; }
.feed-profile .avatar-xl { width: 68px; height: 68px; font-size: calc(24px * var(--tl, 1)); }
.feed-profile > b { font-size: calc(15px * var(--tl, 1)); }
.feed-links a { height: var(--h-item); font-size: calc(13px * var(--tl, 1)); }
.feed-composer { padding: 12px 14px; gap: 10px; }
.fc-text { min-height: 80px; font-size: calc(14px * var(--tl, 1)); padding: 10px 12px; border-radius: 10px; }
.post { padding: 12px 14px; gap: 8px; }
.post-text { font-size: calc(14px * var(--tl, 1)); }
.post-act { padding: 0 10px; font-size: calc(12.5px * var(--tl, 1)); border-radius: 8px; }
@media (min-width: 1500px) { .feed-grid { grid-template-columns: 272px minmax(0, 1fr) 320px; gap: 18px; } }
@media (max-width: 1240px) { .feed-grid { grid-template-columns: minmax(0, 1fr) 260px; } .feed-left { position: static; } }
/* celular: nome inteiro no post; o título (Administrador, VIP…) desce para a linha de baixo quando não cabe */
@media (max-width: 600px) { .post-name { flex-wrap: wrap; row-gap: 2px; } }
@media (max-width: 960px) { .feed-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Minha conta e Administração */
.avatar-xl { width: 64px; height: 64px; font-size: calc(22px * var(--tl, 1)); }
.acc-profile { gap: 14px; }
.acc-profile b { font-size: calc(16px * var(--tl, 1)); }
.acc-stats b { font-size: calc(20px * var(--tl, 1)); }
.acc-rows { gap: 10px; }

/* ---- menus: conta, sino, Ctrl+K */
.menu-pop .menu-head { padding: 6px 8px 8px; }
.atv-pop { top: 62px; right: clamp(16px, 2.2vw, 28px); width: min(400px, calc(100vw - 24px)); }
.atv-topo { padding: 8px 8px 8px 14px; }
.atv-topo h2 { font-size: calc(15px * var(--tl, 1)); }
.atv-lista li { padding: 9px; gap: 10px; border-radius: 10px; }
.atv-txt b { font-size: calc(13.5px * var(--tl, 1)); }
.atv-txt small { font-size: calc(12.5px * var(--tl, 1)); }
.cmdk { margin-top: 11vh; width: min(600px, calc(100vw - 24px)); }
.cmdk-caixa { border-radius: 14px; }
.cmdk-busca input { height: 50px; font-size: calc(15px * var(--tl, 1)); }
.cmdk-item { min-height: 42px; gap: 10px; padding: 5px 9px; border-radius: 9px; }
.cmdk-ic, .avatar.cmdk-av { width: 30px; height: 30px; }
.cmdk-ic svg { width: 16px; height: 16px; }
.cmdk-txt b { font-size: calc(13.5px * var(--tl, 1)); }
.cmdk-txt small { font-size: calc(12px * var(--tl, 1)); }
.cmdk-grupo { padding: 8px 9px 3px; font-size: calc(11.5px * var(--tl, 1)); }

/* ---- site (visitante): topo, apresentação e entrar */
#view-home .topnav { padding: 12px clamp(16px, 3.5vw, 40px); }
#view-home .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
#view-home .brand-name { font-size: calc(15.5px * var(--tl, 1)); }
.site-nav { padding: 3px; }
.site-nav button { padding: 0 14px; font-size: calc(13px * var(--tl, 1)); }
#view-home .topnav-right { gap: 8px; }
#view-home .account-btn { height: var(--h-top); border-radius: 10px; font-size: calc(13px * var(--tl, 1)); }
#view-home .theme-btn { width: var(--h-top); height: var(--h-top); border-radius: 10px; }
#view-home .btn-baixar { height: var(--h-top); border-radius: 10px; padding: 0 12px; font-size: calc(13px * var(--tl, 1)); box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 24%, transparent); }
#view-home .clock { font-size: calc(12.5px * var(--tl, 1)); }
.hero2 { padding-top: clamp(12px, 3.5vh, 40px); }
.hero2 h1 { font-size: clamp(32px, 4.1vw, 54px); margin: 16px 0 14px; text-wrap: balance; }
.hero2 .lead { font-size: clamp(14.5px, 1.25vw, 16.5px); margin-bottom: 22px; }
#view-home .join-form { height: var(--h-btn-lg); border-radius: 11px; }
.home2 { gap: clamp(44px, 7vh, 88px); }
@media (max-width: 600px) {
  #view-home .join-form { height: auto; min-height: 48px; }
}

/* ---- T_CHAT: prévia da conversa termina em "…" (era flex: o texto era cortado seco antes do selo de não lidas) */
.wz-previa { display: block; line-height: 1.4em; height: 1.4em; }
.wz-previa > svg, .wz-previa > .wz-tick { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.wz-previa > .wz-tick svg { display: inline-block; }
/* campo vazio: a dica "Mensagem · / para respostas rápidas" fica numa linha (no celular quebrava em 3 e o campo crescia) */
#wz-texto:placeholder-shown { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- blocos com botão no cabeçalho: título na mesma altura dos blocos vizinhos sem botão */
.block-head { min-height: 44px; }

/* ---- site no celular: as cinco abas do topo cabem sem cortar "Contato" */
@media (max-width: 600px) {
  .site-nav { gap: 2px; }
  .site-nav button { flex: 1 1 auto; padding: 0 6px; font-size: calc(12.5px * var(--tl, 1)); }
}

/* ---- celular: o que a escala compacta encolheu volta a ter 44 px de toque */
@media (max-width: 600px) {
  .app-side .brand { min-height: 44px; }
}

/* ============================================================ site público: ferramentas com exemplos (17/10)
   Página de venda ("/" e "Ver o site"): herói com o Painel de exemplo, uma linha por ferramenta (texto + exemplo
   desenhado em HTML/CSS/SVG na cor do produto), preços, dúvidas e contato. Os exemplos (.mq*) medem tudo em em a partir
   de uma fonte proporcional à largura da coluna (container query): encolhem juntos, sem imagem, e seguem o tema. */
.home2 { gap: clamp(40px, 6.5vh, 76px); }
.home2 .sec2 { scroll-margin-top: 76px; }
.home-v2 .topnav-esq { flex: none; }
.site-nav button { white-space: nowrap; }

/* ---- herói */
.hero2 { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 3.5vw, 56px); padding-top: clamp(10px, 3vh, 36px); }
.hero2 h1 { font-size: clamp(30px, 3.7vw, 50px); line-height: 1.06; margin: 14px 0 12px; }
.hero2 .lead { margin-bottom: 20px; max-width: 540px; }
.hero-trust { margin-top: 18px; gap: 8px 20px; }
.hello { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hero-recent { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px; font-size: calc(13px * var(--tl, 1)); }
.hr-tit { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.hr-tit svg { width: 15px; height: 15px; }
.hero-recent .recent { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hero-recent .recent li {
  display: inline-flex; align-items: center; gap: 2px; height: var(--h-btn); padding: 0 2px 0 10px; border-radius: 9px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); transition: border-color .15s, background .15s;
}
.hero-recent .recent li:hover { border-color: var(--border-2); background: var(--surface-2); }
.hero-recent .r-code { font-family: var(--font-mono); font-size: calc(12.5px * var(--tl, 1)); font-weight: 600; }
.lp-hero-ex { position: relative; container-type: inline-size; padding-bottom: 34px; }

/* ---- exemplos: base */
.mq, .mq-cena { font-size: clamp(7.5px, 2.05cqw, 12.5px); line-height: 1.35; }
.mq { --pc: var(--accent); position: relative; color: var(--text); background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 1.1em; overflow: hidden;
  box-shadow: 0 1.8em 4.5em color-mix(in srgb, var(--preto) 42%, transparent), 0 0 3.5em color-mix(in srgb, var(--pc) 13%, transparent); text-align: left; }
.lp-prod .mq, .lp-prod .mq-cena { --pc: inherit; }
.mq [data-icon] { display: inline-grid; place-items: center; flex: none; }
.mq [data-icon] svg { width: 1.25em; height: 1.25em; }
.mq b { font-weight: 700; }
.mq small { font-size: .86em; color: var(--muted); }
.mq-top { display: flex; align-items: center; gap: .6em; height: 2.7em; padding: 0 .9em; background: var(--surface); border-bottom: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.mq-dots { display: inline-flex; gap: .35em; flex: none; }
.mq-dots i { width: .65em; height: .65em; border-radius: 50%; background: var(--danger); }
.mq-dots i:nth-child(2) { background: var(--warn); } .mq-dots i:nth-child(3) { background: var(--ok); }
.mq-url { flex: 0 1 18em; min-width: 3em; padding: .25em .8em; border-radius: .5em; background: var(--bg-2); overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: .9em; }
.mq-chip { display: inline-flex; align-items: center; gap: .35em; height: 1.9em; padding: 0 .6em; border-radius: .5em; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft); font-weight: 600; font-size: .92em; }
.mq-chip [data-icon] svg { width: 1.1em; height: 1.1em; }
.mq-chip.vivo { margin-left: auto; color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: var(--danger-soft); }
.mq-chip.vivo i { width: .55em; height: .55em; border-radius: 2px; background: var(--danger); }
.mq-av { --a: var(--accent); display: inline-grid; place-items: center; flex: none; width: 2.7em; height: 2.7em; border-radius: .6em; font-size: .9em; font-weight: 700; color: var(--branco);
  background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 50%, var(--bg))); }
/* pessoa na câmera: cabeça e ombros desenhados, na cor de quem fala */
.mq-pessoa { position: absolute; left: 50%; bottom: 0; width: 56%; aspect-ratio: 1; transform: translateX(-50%); }
.mq-pessoa::before, .mq-pessoa::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); background: color-mix(in srgb, var(--a, var(--accent)) 30%, var(--bg)); }
.mq-pessoa::before { top: 6%; width: 44%; aspect-ratio: 1; border-radius: 50%; }
.mq-pessoa::after { bottom: 0; width: 100%; height: 42%; border-radius: 50% 50% 0 0 / 80% 80% 0 0; }

/* ---- herói: Painel */
.mq-pn { display: grid; grid-template-columns: 12.5em minmax(0, 1fr); min-height: 23em; }
.mq-pn-lado { display: grid; gap: .3em; align-content: start; padding: .8em .7em; background: var(--surface); border-right: 1px solid var(--border); }
.mq-pn-it { --pc: var(--accent); display: flex; align-items: center; gap: .6em; padding: .45em .55em; border-radius: .6em; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.mq-pn-it > [data-icon] { width: 2.1em; height: 2.1em; border-radius: .55em; color: var(--pc); background: color-mix(in srgb, var(--pc) 15%, transparent); }
.mq-pn-it.on { background: var(--surface-3); color: var(--text); }
.mq-pn-main { display: grid; gap: .9em; align-content: start; padding: 1em 1.1em 1.2em; min-width: 0; }
.mq-pn-ola b { display: block; font-family: var(--font-display); font-size: 1.45em; }
.mq-pn-ola span { color: var(--muted); font-size: .92em; }
.mq-pn-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7em; }
.mq-pc { --pc: var(--accent); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .45em .6em; padding: .9em .85em .85em; border-radius: .8em; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 9%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--pc) 32%, var(--border)); }
.mq-pc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .2em; background: var(--pc); }
.mq-pc-ic { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .55em; color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); }
.mq-pc > b { font-family: var(--font-display); font-size: 1.05em; letter-spacing: .02em; }
.mq-pc-n, .mq-pc-sub, .mq-pc-bt, .mq-pc-avs { grid-column: 1 / -1; }
.mq-pc-n { color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-pc-n em { font-style: normal; font-family: var(--font-display); font-size: 1.7em; line-height: 1; color: var(--pc); margin-right: .15em; vertical-align: -.1em; }
.mq-pc-sub { color: var(--muted); font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-pc-bt { justify-self: start; display: inline-flex; align-items: center; gap: .35em; height: 2.2em; padding: 0 .75em; border-radius: .5em; background: var(--pc); color: var(--on-accent); font-weight: 700; font-size: .92em; }
.mq-pc-avs { display: flex; height: 2.2em; align-items: center; }
.mq-pc-avs i { width: 1.9em; height: 1.9em; border-radius: .5em; margin-right: -.45em; border: .15em solid var(--surface); background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 50%, var(--bg))); }
.mq-toque { position: absolute; left: 1.4em; bottom: 0; display: flex; align-items: center; gap: .7em; padding: .7em .8em; border-radius: 1em;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--c-chat) 50%, var(--border)); box-shadow: 0 1.2em 3em color-mix(in srgb, var(--preto) 45%, transparent); }
.mq-toque-txt { display: grid; }
.mq-toque-txt b { font-size: 1.05em; }
.mq-toque-bt { display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: .7em; color: var(--branco); }
.mq-toque-bt.nao { background: var(--danger); }
.mq-toque-bt.sim { background: var(--ok); }

/* ---- índice das ferramentas */
.lp-indice { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -12px auto 26px; }
.lp-indice button {
  --pc: var(--accent); display: inline-flex; align-items: center; gap: 8px; height: var(--h-btn); padding: 0 14px; border-radius: 10px; font-weight: 600; font-size: calc(13.5px * var(--tl, 1)); color: var(--text); background: var(--surface); border: 1px solid color-mix(in srgb, var(--pc) 38%, var(--border)); transition: background .15s, border-color .15s;
}
.lp-indice button:hover { background: color-mix(in srgb, var(--pc) 12%, var(--surface)); border-color: var(--pc); }
.lp-indice button svg { width: 16px; height: 16px; color: var(--pc); }

/* ---- uma linha por ferramenta: texto + exemplo, num cartão com a cor do produto */
.lp-prods { display: grid; gap: 18px; }
.lp-prod { --pc: var(--accent); display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(22px, 3.5vw, 52px); align-items: center; scroll-margin-top: 76px;
  padding: clamp(18px, 2.6vw, 34px); border-radius: 18px; border: 1px solid color-mix(in srgb, var(--pc) 22%, var(--border));
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--pc) 8%, transparent), transparent 55%), color-mix(in srgb, var(--surface) 55%, transparent); }
.lp-prod.lp-inv { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pc) 8%, transparent), transparent 55%), color-mix(in srgb, var(--surface) 55%, transparent); }
.lp-prod.lp-inv .lp-txt { order: 2; }
.lp-txt { min-width: 0; }
.lp-tag { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 12px; font-size: calc(13px * var(--tl, 1)); color: var(--muted); }
.lp-tag-ic { display: inline-grid !important; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--pc); background: color-mix(in srgb, var(--pc) 15%, transparent); }
.lp-tag-ic svg { width: 18px !important; height: 18px !important; }
.lp-tag b { font-family: var(--font-display); font-size: calc(15px * var(--tl, 1)); letter-spacing: .04em; color: var(--text); }
.lp-txt h3 { margin: 0 0 8px; font-size: clamp(20px, 2vw, 27px); line-height: 1.15; text-wrap: balance; }
.lp-txt > p { margin: 0 0 14px; max-width: 540px; color: var(--text-soft); font-size: calc(14.5px * var(--tl, 1)); line-height: 1.6; }
.lp-feats { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.lp-feats li { display: flex; align-items: flex-start; gap: 8px; color: var(--text-soft); font-size: calc(13.5px * var(--tl, 1)); line-height: 1.4; }
.lp-feats li > [data-icon] { flex: none; margin-top: 1px; color: var(--pc); }
.lp-feats li svg { width: 16px; height: 16px; }
.lp-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.lp-cta .btn-ghost { border-color: color-mix(in srgb, var(--pc) 45%, var(--border)); }
.lp-cta .btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--pc) 14%, var(--surface-2)); border-color: var(--pc); }
.lp-cta .btn-ghost svg { color: var(--pc); }
.lp-cta small { font-size: calc(12.5px * var(--tl, 1)); }
.lp-ex { min-width: 0; container-type: inline-size; }
.lp-leg { margin: 12px 0 0; color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); text-align: center; text-wrap: balance; }

/* ---- T_ROOM: reunião */
.mq-palco { display: grid; grid-template-columns: minmax(0, 1fr) 22%; gap: .55em; height: 21em; padding: .55em; background: var(--stage-bg); }
.mq-tela { position: relative; border-radius: .7em; overflow: hidden; border: 1px solid var(--border); }
.mq-slide { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1em; padding: 1.2em 1.4em 2.6em; background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.mq-slide-t b { display: block; font-family: var(--font-display); font-size: 1.35em; }
.mq-colunas { display: flex; align-items: flex-end; gap: 5%; padding: 0 3%; border-bottom: 1px solid var(--border-2); }
.mq-colunas i { flex: 1; height: var(--h); border-radius: .35em .35em 0 0; background: linear-gradient(180deg, var(--pc), color-mix(in srgb, var(--pc) 30%, transparent)); }
.mq-risco { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--warn); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mq-risco path { vector-effect: non-scaling-stroke; }
.mq-nome { position: absolute; left: .45em; bottom: .45em; display: inline-flex; align-items: center; gap: .3em; max-width: calc(100% - .9em); padding: .15em .45em; border-radius: .4em;
  background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--text); font-size: .85em; font-weight: 600; white-space: nowrap; overflow: hidden; }
.mq-nome [data-icon] svg { width: 1em; height: 1em; }
.mq-tela > .mq-nome { left: .7em; bottom: .7em; }
.mq-faixa { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: .55em; }
.mq-cam { --a: var(--accent); position: relative; border-radius: .6em; overflow: hidden; border: 1px solid var(--border);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--a) 40%, var(--surface-3)), color-mix(in srgb, var(--a) 12%, var(--bg-2)) 75%); }
.mq-cam.fala { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.mq-cam .mq-nome { font-size: .78em; }
.mq-cam .mq-pessoa { width: auto; height: 90%; }
.mq-cam .mq-nome [data-icon] { color: var(--danger-text); }
.mq-barra { display: flex; justify-content: center; gap: .5em; padding: .6em; background: var(--surface); border-top: 1px solid var(--border); }
.mq-ctl { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: .7em; background: var(--surface-3); color: var(--text-soft); }
.mq-ctl.on { color: var(--pc); background: color-mix(in srgb, var(--pc) 20%, var(--surface-3)); }
.mq-ctl.sair { width: 3.8em; background: var(--danger); color: var(--branco); }

/* ---- T_CARD: cartão no celular e avisos */
.mq-cena { position: relative; }
.mq-cena-card { display: grid; place-items: center; height: 36em; }
.mq-fone { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5em; width: 17em; padding: 0 1em 1em; border-radius: 1.8em; background: var(--bg-2);
  border: .35em solid var(--surface-3); }
.mq-cc-capa { align-self: stretch; height: 5.2em; margin: 0 -1em; background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 35%, var(--c-feed))); }
.mq-cc-foto { --a: var(--pc); position: relative; width: 5em; height: 5em; margin-top: -2.9em; border-radius: 1.1em; overflow: hidden; border: .25em solid var(--bg-2);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--pc) 55%, var(--surface-3)), color-mix(in srgb, var(--pc) 20%, var(--bg-2))); }
.mq-cc-foto .mq-pessoa { width: 78%; }
.mq-cc-nome { font-family: var(--font-display); font-size: 1.3em; line-height: 1.1; }
.mq-cc-sub { margin-top: -.35em; color: var(--muted); font-size: .9em; }
.mq-cc-on { display: inline-flex; align-items: center; gap: .35em; color: var(--ok-text); font-size: .85em; font-weight: 600; }
.mq-cc-on i { width: .55em; height: .55em; border-radius: 2px; background: var(--ok); }
.mq-cc-bt { display: flex; align-items: center; justify-content: center; gap: .5em; align-self: stretch; height: 2.75em; border-radius: .7em; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); }
.mq-cc-bt.pri { background: var(--pc); border-color: var(--pc); color: var(--on-accent); }
.mq-cc-prod { display: flex; align-items: center; gap: .5em; align-self: stretch; padding: .55em .7em; border-radius: .7em; border: 1px dashed color-mix(in srgb, var(--pc) 55%, var(--border)); }
.mq-cc-prod > span:not([data-icon]) { flex: 1; }
.mq-cc-prod [data-icon], .mq-cc-prod b { color: var(--pc); }
.mq-cc-url { color: var(--muted); font-family: var(--font-mono); font-size: .8em; }
.mq-aviso { position: absolute; display: flex; align-items: center; gap: .6em; width: max-content; max-width: 15em; padding: .65em .85em .65em .65em; border-radius: .9em; background: var(--surface); }
.mq-aviso > span:last-child { display: grid; }
.mq-aviso-ic { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .6em; flex: none; color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); }
.mq-aviso.a1 { left: 0; top: 9%; }
.mq-aviso.a2 { right: 0; top: 44%; }
.mq-aviso.a3 { left: 3%; bottom: 9%; }

/* ---- T_CHAT: conversa */
.mq-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 29em; }
.mq-ch-topo { display: flex; align-items: center; gap: .7em; padding: .65em .9em; background: var(--surface); border-bottom: 1px solid var(--border); }
.mq-ch-quem { flex: 1; min-width: 0; display: grid; }
.mq-ch-quem small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-ch-ic { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .6em; color: var(--pc); background: color-mix(in srgb, var(--pc) 13%, transparent); }
.mq-ch-msgs { display: flex; flex-direction: column; justify-content: flex-end; gap: .5em; padding: .9em; overflow: hidden;
  background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--pc) 6%, transparent), transparent 50%), var(--bg-2); }
.mq-bal { --a: var(--accent); align-self: flex-start; max-width: 74%; padding: .45em .75em .4em; border-radius: .9em .9em .9em .25em; background: var(--surface-2); }
.mq-bal > b { display: block; color: var(--a); font-size: .88em; }
.mq-bal small { display: inline-flex; align-items: center; gap: .2em; margin-left: .6em; font-size: .76em; vertical-align: -.1em; }
.mq-bal.out { align-self: flex-end; border-radius: .9em .9em .25em .9em; background: color-mix(in srgb, var(--pc) 22%, var(--surface-2)); }
.mq-lido { display: inline-flex; color: var(--pc); }
.mq-lido [data-icon] + [data-icon] { margin-left: -.6em; }
.mq-lido svg { width: 1.1em !important; height: 1.1em !important; }
.mq-bal.arq { display: flex; align-items: center; gap: .6em; }
.mq-bal.arq > span:last-child { display: grid; }
.mq-arq-ic { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .55em; color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); }
.mq-radio { display: flex; align-items: center; gap: .5em; color: var(--pc); }
.mq-radio small { margin: 0; }
.mq-onda { display: flex; align-items: center; gap: .2em; height: 1.6em; }
.mq-onda i { width: .22em; height: 40%; border-radius: 1px; background: var(--pc); }
.mq-onda i:nth-child(3n) { height: 85%; } .mq-onda i:nth-child(4n+1) { height: 60%; } .mq-onda i:nth-child(5n+2) { height: 100%; }
.mq-ch-chamada { align-self: center; display: flex; align-items: center; gap: .6em; padding: .5em .55em .5em .75em; border-radius: .9em; color: var(--pc);
  border: 1px solid color-mix(in srgb, var(--pc) 45%, var(--border)); background: color-mix(in srgb, var(--pc) 10%, var(--surface)); }
.mq-ch-chamada > span:nth-child(2) { display: grid; color: var(--text); }
.mq-ch-chamada em { font-style: normal; font-weight: 700; padding: .35em .8em; border-radius: .5em; background: var(--pc); color: var(--on-accent); }
.mq-dig { display: inline-flex; align-items: center; gap: .25em; color: var(--muted); font-size: .85em; font-style: italic; }
.mq-dig i { width: .4em; height: .4em; border-radius: 50%; background: var(--muted); animation: lp-dig 1.2s infinite; }
.mq-dig i:nth-child(2) { animation-delay: .15s; } .mq-dig i:nth-child(3) { animation-delay: .3s; margin-right: .3em; }
@keyframes lp-dig { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.mq-ch-campo { display: flex; align-items: center; gap: .6em; padding: .6em .8em; color: var(--muted); background: var(--surface); border-top: 1px solid var(--border); }
.mq-ch-txt { flex: 1; display: flex; align-items: center; height: 2.4em; padding: 0 .8em; border-radius: .7em; background: var(--surface-2); }
.mq-ch-mic { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: .7em; background: var(--pc); color: var(--on-accent); }

/* ---- T_FEED: publicação */
.mq-feed { display: flex; gap: .8em; align-items: flex-start; padding: .9em; }
.mq-feed .mq-post { flex: 1; min-width: 0; }
.mq-feed .mq-aovivo { flex: 0 0 12em; }
.mq-post { display: grid; gap: .65em; padding: .9em; border-radius: .9em; background: var(--surface); border: 1px solid var(--border); }
.mq-post-topo { display: flex; align-items: center; gap: .6em; }
.mq-post-topo > span:last-child { display: grid; }
.mq-post-topo b { display: inline-flex; align-items: center; gap: .4em; }
.mq-selo { font-style: normal; font-size: .72em; padding: .1em .45em; border-radius: .4em; color: var(--c-card); background: color-mix(in srgb, var(--c-card) 18%, transparent); }
.mq-post-txt { margin: 0; color: var(--text-soft); }
.mq-post-img { position: relative; height: 9.5em; border-radius: .7em; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 55%, var(--bg)), color-mix(in srgb, var(--c-chat) 30%, var(--bg))); }
.mq-post-img svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 55%; fill: none; stroke: color-mix(in srgb, var(--text) 70%, transparent); stroke-width: 2.5; }
.mq-post-img svg path { vector-effect: non-scaling-stroke; }
.mq-post-img-t { position: absolute; left: 1em; top: .9em; display: grid; }
.mq-post-img-t small { color: color-mix(in srgb, var(--text) 75%, transparent); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.mq-post-img-t b { font-family: var(--font-display); font-size: 1.45em; }
.mq-post-acts { display: flex; gap: 1.3em; color: var(--muted); font-weight: 600; }
.mq-post-acts > span { display: inline-flex; align-items: center; gap: .35em; }
.mq-post-acts .on { color: var(--danger-text); }
.mq-coment { display: flex; align-items: center; gap: .5em; padding: .45em .55em; border-radius: .7em; background: var(--surface-2); color: var(--text-soft); }
.mq-coment .mq-av { width: 2.2em; height: 2.2em; font-size: .8em; }
.mq-coment b { margin-right: .4em; color: var(--text); }
.mq-aovivo { display: grid; gap: .35em; padding: .85em; border-radius: .9em; border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--border)); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.mq-aovivo small { display: inline-flex; align-items: center; gap: .35em; color: var(--ok-text); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.mq-aovivo small i { width: .55em; height: .55em; border-radius: 2px; background: var(--ok); }
.mq-aovivo span { color: var(--muted); font-size: .9em; }
.mq-aovivo em { justify-self: start; margin-top: .2em; padding: .35em .9em; border-radius: .5em; font-style: normal; font-weight: 700; background: var(--ok); color: var(--on-accent); }

/* ---- T_ WORLD: cena da cidade */
.mq-world { aspect-ratio: 16 / 9; }
.mq-world svg { display: block; width: 100%; height: 100%; }
.mq-world text { font-family: var(--font); }
.mq-world .w-ceu1 { stop-color: color-mix(in srgb, var(--violet) 26%, var(--bg)); }
.mq-world .w-ceu2 { stop-color: color-mix(in srgb, var(--c-world) 16%, var(--bg-2)); }
.mq-world .w-chao1 { stop-color: color-mix(in srgb, var(--c-world) 20%, var(--surface)); }
.mq-world .w-chao2 { stop-color: var(--bg); }
.mq-world .w-luz { stop-color: var(--c-world); stop-opacity: .45; }
.mq-world .w-luz0 { stop-color: var(--c-world); stop-opacity: 0; }
.mq-world .w-estrelas { fill: var(--text); opacity: .55; }
.mq-world .w-predios { fill: color-mix(in srgb, var(--surface-3) 75%, var(--bg)); }
.mq-world .w-janelas { fill: color-mix(in srgb, var(--warn) 75%, transparent); }
.mq-world .w-lounge rect { fill: color-mix(in srgb, var(--c-feed) 22%, var(--surface)); stroke: var(--c-feed); stroke-width: 1.5; }
.mq-world .w-lounge text { fill: var(--c-feed); font-size: calc(10px * var(--tl, 1)); font-weight: 700; letter-spacing: .12em; }
.mq-world .w-lounge .w-porta { fill: var(--bg); stroke: none; }
.mq-world .w-grade { stroke: color-mix(in srgb, var(--c-world) 30%, transparent); stroke-width: 1; fill: none; }
.mq-world .w-mesa { fill: color-mix(in srgb, var(--surface-4) 80%, var(--bg)); stroke: var(--c-world); stroke-width: 1.5; }
.mq-world .w-cabeca { fill: color-mix(in srgb, var(--warn) 35%, var(--text)); }
.mq-world .w-som { fill: none; stroke: var(--c-world); stroke-width: 2; stroke-linecap: round; }
.mq-world .w-rotulo rect { fill: var(--glass-strong); stroke: color-mix(in srgb, var(--c-world) 55%, transparent); }
.mq-world .w-rotulo text { fill: var(--text); font-size: calc(9.5px * var(--tl, 1)); font-weight: 600; }
.mq-world-hud { position: absolute; left: .8em; top: .8em; display: inline-flex; align-items: center; gap: .4em; padding: .3em .65em; border-radius: .5em;
  background: var(--glass-strong); border: 1px solid var(--border-2); font-weight: 600; }
.mq-world-hud i { width: .55em; height: .55em; border-radius: 2px; background: var(--c-world); }

/* ---- programa para Windows: T_SNAP e widget */
.mq-desk { height: 26em; background: radial-gradient(90% 80% at 85% 100%, color-mix(in srgb, var(--c-feed) 22%, transparent), transparent 60%),
  linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--bg)), var(--bg-2)); }
.mq-snap-barra { position: absolute; z-index: 2; left: 50%; top: .9em; transform: translateX(-50%); display: flex; align-items: center; gap: .3em; padding: .35em; border-radius: .8em;
  background: var(--surface); border: 1px solid var(--border-2); box-shadow: 0 .8em 2em color-mix(in srgb, var(--preto) 40%, transparent); white-space: nowrap; }
.mq-snap-barra > span { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .55em; color: var(--text-soft); }
.mq-snap-barra > span.on { color: var(--danger-text); background: var(--danger-soft); }
.mq-snap-barra > i { width: 1px; height: 1.6em; margin: 0 .2em; background: var(--border-2); }
.mq-snap-barra em { display: inline-flex; align-items: center; gap: .35em; height: 2.3em; padding: 0 .7em; border-radius: .55em; font-style: normal; font-weight: 600; background: var(--surface-2); }
.mq-snap-barra em.pri { background: var(--pc); color: var(--on-accent); }
.mq-snap-barra > span:first-child [data-icon] svg { transform: rotate(-45deg); }
.mq-print { position: absolute; left: 6%; top: 4.6em; width: 54%; bottom: 1.8em; border-radius: .6em; background: var(--surface); outline: .15em solid var(--pc); outline-offset: .2em;
  box-shadow: 0 0 0 60em color-mix(in srgb, var(--preto) 30%, transparent); }
.mq-print-top { padding: .6em .9em; border-bottom: 1px solid var(--border); }
.mq-print-corpo { display: grid; gap: .65em; padding: .85em .9em; }
.mq-campo { display: grid; gap: .25em; }
.mq-campo i { display: block; height: 2em; border-radius: .5em; border: 1px solid var(--border);
  background: linear-gradient(var(--muted), var(--muted)) .7em 50% / var(--w, 50%) .4em no-repeat, var(--surface-2); }
.mq-campo i.borrao { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 32%, transparent) 0 .6em, color-mix(in srgb, var(--text) 10%, transparent) .6em 1.1em), var(--surface-2); filter: blur(2px); }
.mq-print-bt { justify-self: start; margin-top: .2em; padding: .4em 1.1em; border-radius: .5em; font-weight: 700; background: var(--ok); color: var(--on-accent); outline: .2em solid var(--danger); outline-offset: .3em; }
.mq-seta { position: absolute; left: 13%; top: 36%; width: 100%; height: 60%; overflow: visible; fill: none; stroke: var(--danger); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.mq-seta path { vector-effect: non-scaling-stroke; }
.mq-nota { position: absolute; right: -24%; top: 32%; padding: .35em .7em; border-radius: .5em; font-weight: 700; background: var(--danger); color: var(--branco); white-space: nowrap; }
.mq-widget { position: absolute; right: 4%; bottom: 1.2em; display: flex; align-items: flex-end; gap: .6em; }
.mq-wg-painel { display: grid; gap: .15em; padding: .45em; border-radius: .9em; background: var(--surface); border: 1px solid var(--border-2); box-shadow: 0 1em 2.4em color-mix(in srgb, var(--preto) 40%, transparent); }
.mq-wg-painel > span { display: flex; align-items: center; gap: .5em; padding: .4em .6em; border-radius: .5em; white-space: nowrap; color: var(--text-soft); }
.mq-wg-painel > span:first-child { color: var(--text); background: var(--surface-2); }
.mq-wg-painel em { margin-left: auto; padding: 0 .4em; border-radius: .35em; font-style: normal; font-weight: 700; font-size: .82em; background: var(--c-chat); color: var(--on-accent); }
.mq-wg-bola { position: relative; display: grid; place-items: center; width: 4em; height: 4em; border-radius: 50%;
  background: radial-gradient(120% 90% at 18% 0%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 62%), linear-gradient(150deg, var(--surface-3), var(--bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 .6em 1.6em color-mix(in srgb, var(--accent) 35%, transparent); }
.mq-wg-bola img { width: 55%; height: 55%; }
.mq-wg-bola em { position: absolute; top: -.2em; right: -.2em; min-width: 1.5em; height: 1.5em; padding: 0 .3em; border-radius: .45em; display: grid; place-items: center;
  font-style: normal; font-weight: 700; font-size: .85em; background: var(--danger); color: var(--branco); }

/* ---- preços, dúvidas, chamada final e rodapé */
.plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.plan2 { gap: 14px; padding: 24px; }
.plan2 ul { align-content: start; }
.plan2 li > [data-icon] { flex: none; margin-top: 1px; color: var(--ok); }
.plan2 li > [data-icon] svg { width: 16px; height: 16px; }
.plan2 .p-price b { font-size: calc(34px * var(--tl, 1)); }
.faq { max-width: 1080px; margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.faq summary { min-height: 48px; align-items: center; padding: 10px 0; }
.lp-final { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(20px, 3vw, 36px); border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: radial-gradient(110% 140% at 0% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%), color-mix(in srgb, var(--surface) 70%, transparent); }
.lp-final h2 { margin: 0 0 8px; font-size: clamp(22px, 2.5vw, 32px); line-height: 1.15; text-wrap: balance; }
.lp-final-txt > p { margin: 0; font-size: calc(14.5px * var(--tl, 1)); line-height: 1.6; }
.lp-final-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lp-final .contact-grid { grid-template-columns: minmax(0, 1fr); max-width: none; margin: 0; gap: 10px; }
.lp-final .contact-card { padding: 12px 14px; background: var(--surface); }
.lp-final .cc-ic { width: 40px; height: 40px; border-radius: 11px; }
.lp-final .cc-ic svg { width: 21px; height: 21px; }
.home-foot2 { margin-top: 24px; padding-top: 28px; }
.foot-grid { grid-template-columns: 1.5fr repeat(2, minmax(0, 1fr)); gap: 20px; }
.foot-grid > div { gap: 6px; }

/* ---- telas médias e celular */
@container (max-width: 440px) {
  .mq, .mq-cena { font-size: 2.75cqw; }
  .mq-pn { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mq-pn-lado { display: none; }
  .mq-palco { height: 19em; grid-template-columns: minmax(0, 1fr) 24%; }
  .mq-chip:not(.vivo) { display: none; }
  .mq-cena-card { height: 36em; }
  .mq-aviso.a3 { display: none; }
  .mq-aviso.a1 { top: 0; }
  .mq-aviso.a2 { top: auto; bottom: 0; }
  .mq-aovivo { display: none; }
  .mq-wg-painel { display: none; }
  .mq-print { width: 62%; }
  .mq-snap-barra em:not(.pri) { display: none; }
}
@media (max-width: 1000px) {
  .hero2, .lp-prod, .lp-prod.lp-inv { grid-template-columns: minmax(0, 1fr); }
  .lp-prod.lp-inv .lp-txt { order: 0; }
  .lp-ex { max-width: 640px; width: 100%; justify-self: center; }
  .lp-hero-ex { max-width: 640px; width: 100%; justify-self: center; }
  .lp-final { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .plans-grid, .faq { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .home-v2 .topnav { gap: 10px; }
  /* "Ver o site" logado: o voltar ocupa o lugar do nome (só o símbolo fica) para o topo caber numa linha */
  .home-v2 .topnav-esq:has(#home-voltar:not([hidden])) .brand-text { display: none; }
  .home-v2 .topnav-esq { gap: 6px; }
  .home-v2 .site-nav { justify-content: stretch; }
  .home-v2 .site-nav button { flex: 1 1 0; padding: 0 4px; min-width: 0; }
  .hero2 h1 { font-size: clamp(28px, 8.4vw, 34px); }
  .hero2 .lead { font-size: calc(14.5px * var(--tl, 1)); }
  .home-actions > .btn { flex: 1 1 100%; }
  .lp-indice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: -14px; }
  .lp-indice button { padding: 0 8px; justify-content: center; font-size: calc(12.5px * var(--tl, 1)); gap: 6px; min-width: 0; }
  .lp-prods { gap: 14px; }
  .lp-prod { padding: 18px 16px; border-radius: 16px; }
  .lp-feats { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .lp-cta .btn { flex: 1 1 100%; }
  .plan2 { padding: 20px 18px; }
  .lp-final-acts .btn { flex: 1 1 100%; }
  .foot-grid a, .foot-grid button { display: flex; align-items: center; min-height: 44px; }
  .foot-grid > div { gap: 0; }
  .foot-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .mq-toque-bt.sim, .mq-dig i { animation: none; } }

/* ============================================================ T_OCTO no site público (18/10)
   Assistente pessoal do programa para Windows (só VIP). Mascote OCTO em public/octo.svg (a animação sutil está no
   próprio arquivo; a página /octo e o OCTO que nada usam o rig vivo js/octo-rig.js). Cor do produto: --c-octo. */
:root { --c-octo: #f472b6; }
[data-theme="claro"] { --c-octo: #be185d; }
.nc-octo { --nc: var(--c-octo); }
.pc-octo { --pc: var(--c-octo); }
.lp-octo { --pc: var(--c-octo); display: grid; gap: clamp(18px, 2.4vw, 28px); padding: clamp(18px, 2.6vw, 34px); border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--pc) 26%, var(--border));
  background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--pc) 9%, transparent), transparent 55%), color-mix(in srgb, var(--surface) 55%, transparent); }
.octo-topo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(22px, 3.5vw, 52px); align-items: center; }
.octo-txt { min-width: 0; }
.octo-txt h2 { margin: 0 0 10px; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; text-wrap: balance; }
.octo-lead { margin: 0 0 16px; max-width: 560px; color: var(--text-soft); font-size: calc(15px * var(--tl, 1)); line-height: 1.6; }
.octo-priv { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 12px 14px; max-width: 560px; border-radius: 12px;
  background: color-mix(in srgb, var(--ok) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 38%, var(--border)); }
.octo-priv-ic { flex: none; display: grid !important; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--ok-text); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.octo-priv-ic svg { width: 18px; height: 18px; }
.octo-priv p { margin: 0; color: var(--text-soft); font-size: calc(13.5px * var(--tl, 1)); line-height: 1.55; }
.octo-priv b { color: var(--text); }
.octo-arte { min-width: 0; display: grid; justify-items: center; gap: 14px; container-type: inline-size; }
.octo-palco { position: relative; display: grid; place-items: center; width: min(100%, 420px); padding: 6px 0 0; }
.octo-palco::before { content: ""; position: absolute; left: 50%; top: 42%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 68%); }
.octo-img { position: relative; width: clamp(140px, 40cqw, 230px); height: auto; aspect-ratio: 352 / 392; }
.octo-fala { position: absolute; left: calc(50% + 58px); top: 4%; display: inline-flex; align-items: center; gap: .5em; padding: .55em .85em; border-radius: 1em 1em 1em .3em;
  font-size: clamp(11px, 3.1cqw, 13px); font-weight: 600; white-space: nowrap; background: var(--surface); }
.octo-fala [data-icon] { color: var(--pc); }
@container (max-width: 480px) { .octo-fala { position: relative; left: auto; top: auto; margin-top: 2px; } }
.octo-barra { width: min(100%, 430px); display: grid; gap: .7em; padding: .9em; font-size: clamp(10.5px, 3cqw, 12.5px); }
.octo-campo { display: block; padding: .55em .75em; border-radius: .6em; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft); }
.octo-campo i { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: var(--accent); }
.octo-modos { display: flex; flex-wrap: wrap; gap: .35em; }
.octo-modos em { font-style: normal; font-weight: 600; padding: .3em .6em; border-radius: .5em; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft); white-space: nowrap; }
.octo-modos em.on { background: color-mix(in srgb, var(--pc) 20%, var(--surface-2)); border-color: var(--pc); color: var(--text); }
.octo-novo { display: flex; align-items: flex-start; gap: .5em; padding: .55em .75em; border-radius: .6em; color: var(--text);
  background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--border)); }
.octo-novo [data-icon] { color: var(--ok-text); margin-top: .1em; }
.octo-grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.octo-g { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.octo-g h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: calc(16.5px * var(--tl, 1)); }
.octo-g-ic { flex: none; display: grid !important; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--pc); background: color-mix(in srgb, var(--pc) 15%, transparent); }
.octo-g-ic svg { width: 17px; height: 17px; }
.octo-g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.octo-g li { position: relative; padding-left: 14px; color: var(--text-soft); font-size: calc(13.5px * var(--tl, 1)); line-height: 1.45; }
.octo-g li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 2px; background: var(--pc); }
.lp-octo kbd { display: inline-block; font: 600 calc(11.5px * var(--tl, 1))/1.5 var(--font-mono); padding: 0 6px; border-radius: 6px; border: 1px solid var(--border-2); border-bottom-width: 2px;
  background: var(--surface-2); color: var(--text); white-space: nowrap; }
.octo-ex { margin: auto 0 0; padding-top: 10px; border-top: 1px dashed var(--border); color: var(--muted); font-size: calc(13px * var(--tl, 1)); line-height: 1.5; }
.octo-ex b { color: var(--text-soft); }
.lp-indice button.lp-ind-octo { --pc: var(--c-octo); }
@media (max-width: 1000px) {
  .octo-topo { grid-template-columns: minmax(0, 1fr); }
  .octo-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .lp-octo { padding: 18px 16px; border-radius: 16px; }
  .octo-grupos { grid-template-columns: minmax(0, 1fr); }
  .lp-indice button:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

/* ---- página /octo (área logada): apresentação no navegador; configurações dentro do programa */
.octo-page { display: grid; gap: 16px; }
.octo-pg-topo { --pc: var(--c-octo); flex-direction: row; align-items: center; gap: clamp(14px, 3vw, 32px); padding: clamp(16px, 2.4vw, 26px);
  background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), var(--surface); }
.octo-pg-img { position: relative; flex: none; width: clamp(110px, 15vw, 168px); height: auto; aspect-ratio: 352 / 392; }
.octo-pg-img img { display: block; width: 100%; height: 100%; }
.octo-pg-topo.compacto .octo-pg-img { width: clamp(80px, 10vw, 118px); }
.octo-pg-txt { min-width: 0; display: grid; gap: 10px; }
.octo-pg-txt h2 { margin: 0; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.15; text-wrap: balance; }
.octo-pg-txt > p { margin: 0; color: var(--text-soft); font-size: calc(14.5px * var(--tl, 1)); line-height: 1.55; max-width: 720px; }
.octo-pg-grupos { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.octo-pg-grupos li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.octo-pg-grupos li > span:last-child { display: grid; min-width: 0; }
.octo-pg-grupos b { font-size: calc(13.5px * var(--tl, 1)); }
.octo-pg-grupos small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); line-height: 1.4; }
.octo-pg-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--pc); background: color-mix(in srgb, var(--pc) 15%, transparent); }
.octo-pg-ic svg { width: 16px; height: 16px; }
.octo-pg-priv { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: calc(13px * var(--tl, 1)); line-height: 1.5; color: var(--text-soft);
  background: color-mix(in srgb, var(--ok) 9%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--ok) 32%, var(--border)); max-width: 720px; }
.octo-pg-priv svg { flex: none; width: 18px; height: 18px; color: var(--ok-text); margin-top: 1px; }
.octo-pg-priv b { color: var(--text); }
.octo-pg-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.octo-cfg { display: grid; gap: 10px; padding: 0 0 4px; }
.octo-cfg-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.octo-cfg .switch-text small { color: var(--muted); font-size: calc(12.5px * var(--tl, 1)); }
.octo-erro { color: var(--danger-text); font-size: calc(12.5px * var(--tl, 1)); margin-top: -6px; }
.octo-erro:empty { display: none; }
.octo-provs summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.octo-prov { display: grid; gap: 8px; padding: 10px 0; border-top: 1px dashed var(--border); }
.octo-chaves { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
@media (max-width: 900px) { .octo-pg-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .octo-grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .octo-pg-topo { flex-direction: column; align-items: flex-start; }
  .octo-pg-grupos, .octo-cfg-2 { grid-template-columns: minmax(0, 1fr); }
  .octo-pg-acoes .btn { flex: 1 1 100%; }
  .octo-provs summary { min-height: 44px; display: flex; align-items: center; }
}

/* ===== Personalização da conta (26/10/2026, frente D): densidade, cor de destaque e tamanho da letra =====
   Três atributos no <html> (data-dens, data-destaque, data-letra), postos ANTES de pintar pelo <head> do index.html a partir do que
   a conta guardou (localStorage "tm_aparencia" é só o espelho para não piscar) e trocados por js/aparencia.js. Tudo por variável:
   - densidade: as alturas da escala única de botões (24/26/28/32) e de item/campo; "Compacta" = botão 26, destaque 28, item e
     campo 28. No toque (pointer: coarse / celular) o bloco "alvo de toque" mais acima manda: nunca abaixo de 44 px.
   - letra: --tl (1, 1.125, 1.25) multiplica TODO font-size em px: o servidor entrega os CSS do site com calc(Npx * var(--tl, 1))
     (paginas.css_com_escala); aqui ficam os tokens de botão que já são variáveis e a altura que acompanha a letra.
   - destaque: troca só as variáveis da cor (--accent e família), em dois conjuntos com contraste AA conferido pelo t_117: sobre os
     fundos escuros e sobre o tema Claro. O tema da marca do cliente (html.tema-marca) manda nas cores dele e não é mexido. */
:root {
  --tl: 1; --dens-btn: 0px; --dens-lg: 0px; --dens-item: 0px; --letra-h: 0px;
  --f-btn: calc(13px * var(--tl)); --f-btn-lg: calc(13.5px * var(--tl)); --f-btn-sm: calc(12.5px * var(--tl));
  --h-btn: calc(28px + var(--dens-btn) + var(--letra-h)); --h-btn-lg: calc(32px + var(--dens-lg) + var(--letra-h));
  --h-btn-sm: calc(24px + var(--letra-h)); --h-item: calc(32px + var(--dens-item) + var(--letra-h)); --h-campo: calc(32px + var(--dens-item) + var(--letra-h));
}
html[data-dens="compacta"] { --dens-btn: -2px; --dens-lg: -4px; --dens-item: -4px; }
html[data-letra="grande"] { --tl: 1.125; --letra-h: 2px; }
html[data-letra="maior"] { --tl: 1.25; --letra-h: 4px; }
/* compacta: espaços de página e de cartão um pouco menores (o resto da densidade vem das alturas acima) */
html[data-dens="compacta"] .app-content { padding-block: 14px; }
html[data-dens="compacta"] .dash-grid, html[data-dens="compacta"] .prod-grid { gap: 12px; }
html[data-dens="compacta"] .menu-pop button, html[data-dens="compacta"] .menu-pop a { min-height: var(--h-item); }

html[data-destaque="verde"]:not(.tema-marca) { --accent: #19c37d; --accent-hover: #22e393; --accent-2: #22e393; --accent-text: #2be498; --on-accent: #06100c; --accent-fim: #139660; --neon: #22e393; }
html[data-destaque="violeta"]:not(.tema-marca) { --accent: #a78bfa; --accent-hover: #c5b2fc; --accent-2: #c5b2fc; --accent-text: #ccbcfc; --on-accent: #06100c; --accent-fim: #8964f8; --neon: #c5b2fc; }
html[data-destaque="rosa"]:not(.tema-marca) { --accent: #f472b6; --accent-hover: #f798ca; --accent-2: #f798ca; --accent-text: #f8a1ce; --on-accent: #06100c; --accent-fim: #f0439e; --neon: #f798ca; }
html[data-destaque="laranja"]:not(.tema-marca) { --accent: #fb923c; --accent-hover: #fca864; --accent-2: #fca864; --accent-text: #fcae6e; --on-accent: #06100c; --accent-fim: #fa760a; --neon: #fca864; }
html[data-destaque="dourado"]:not(.tema-marca) { --accent: #f0b429; --accent-hover: #f3c14f; --accent-2: #f3c14f; --accent-text: #f3c559; --on-accent: #06100c; --accent-fim: #d79b0f; --neon: #f3c14f; }
html[data-theme="claro"][data-destaque="verde"]:not(.tema-marca) { --accent: #0f7a4f; --accent-hover: #0c5f3d; --accent-2: #0c5f3d; --accent-text: #0d6843; --on-accent: #ffffff; --accent-fim: #08442c; --neon: #0f7a4f; }
html[data-theme="claro"][data-destaque="violeta"]:not(.tema-marca) { --accent: #6d28d9; --accent-hover: #6022c0; --accent-2: #6022c0; --accent-text: #6d28d9; --on-accent: #ffffff; --accent-fim: #531da6; --neon: #6d28d9; }
html[data-theme="claro"][data-destaque="rosa"]:not(.tema-marca) { --accent: #be185d; --accent-hover: #a31550; --accent-2: #a31550; --accent-text: #b51759; --on-accent: #ffffff; --accent-fim: #881142; --neon: #be185d; }
html[data-theme="claro"][data-destaque="laranja"]:not(.tema-marca) { --accent: #b94a0a; --accent-hover: #9c3e08; --accent-2: #9c3e08; --accent-text: #9b3e08; --on-accent: #ffffff; --accent-fim: #7f3307; --neon: #b94a0a; }
html[data-theme="claro"][data-destaque="dourado"]:not(.tema-marca) { --accent: #8a5a00; --accent-hover: #6b4600; --accent-2: #6b4600; --accent-text: #805300; --on-accent: #ffffff; --accent-fim: #4d3200; --neon: #8a5a00; }

/* seletor da aparência (Minha conta e Configurações): js/aparencia.js */
.apar { display: grid; gap: 14px; }
.apar-grupo { display: grid; gap: 6px; }
.apar-grupo > b { font-size: calc(13px * var(--tl, 1)); }
.apar-grupo > small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); margin-top: -2px; }
.apar-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.apar-op .apar-cor { width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--accent)); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--c, var(--accent)) 60%, transparent); flex: none; }
.apar-op .apar-cor.padrao { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
.apar-aviso { color: var(--muted); font-size: calc(12px * var(--tl, 1)); min-height: 1.2em; }

/* status do próprio usuário (26/10, frente D): bolinha no avatar da conta e menu único (js/navegacao.js, TM_STATUS) */
.account-btn { position: relative; }
.st-dot { position: absolute; left: 18px; bottom: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--muted)); border: 2px solid var(--surface); box-sizing: content-box; pointer-events: none; }
.st-dot[hidden] { display: none; }
.st-item { display: flex; align-items: center; gap: 8px; }
.st-item .st-dot { position: static; width: 8px; height: 8px; flex: none; }
.st-menu { min-width: 250px; }
.st-menu .st-sec { padding: 6px 12px 2px; font-size: calc(11px * var(--tl, 1)); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.st-menu button .st-dot { position: static; flex: none; width: 9px; height: 9px; }
.st-menu button[aria-checked="true"] { color: var(--accent-text); font-weight: 600; }
.st-menu button small { color: var(--muted); display: block; font-size: calc(11.5px * var(--tl, 1)); font-weight: 400; }

/* barra lateral (26/10): a larga de antes, com Configurações e "Recolher" no pé. Recolhida = só ícones (bloco do T_CHAT fixado acima). Celular: gaveta, sem Recolher. */
.app-side-foot .nav-atalhos { gap: 10px; padding: 0 10px; }   /* os botões do pé alinham com os links (Minha conta…) */
.app-side-foot { grid-template-columns: minmax(0, 1fr); }   /* auditoria 2.0 (03/11): sem isso o rótulo de uma linha alargava a coluna (234 px numa barra de 207) e a barra ganhava rolagem horizontal */
.app-side-foot .nav-recolher { margin-top: 2px; }
.app-side-foot .nav-recolher svg { width: 17px; height: 17px; }
@media (max-width: 960px) { .app-side-foot .nav-recolher { display: none; } }
.cfg-site { display: grid; gap: 14px; }
.cfg-site h3 { margin: 0 0 2px; font-size: calc(13px * var(--tl, 1)); }
.cfg-site .theme-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* salas (26/10, dono): cartões compactos em grade, pela largura da PÁGINA (a barra lateral aberta ou recolhida muda o espaço):
   3 colunas em tela larga, 2 em média e 1 no celular. Entrar tem o tamanho normal (28 px), não estica. */
.rooms-grid { container-type: inline-size; container-name: salas; }
.rooms-grid-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; }
@container salas (max-width: 899px) { .rooms-grid-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container salas (max-width: 559px) { .rooms-grid-inner { grid-template-columns: minmax(0, 1fr); } }
.room-card .rc-actions { justify-content: flex-start; }
.room-card .rc-actions .btn-primary { flex: none; }
.room-card .rc-actions .rc-mais { margin-left: auto; }
.room-card .tags { min-height: 0; }
.rooms-empty, .rooms-grid .group-empty { max-width: 380px; justify-self: start; width: 100%; grid-column: auto; }   /* estado vazio = um cartão do tamanho de uma coluna */
.rooms-empty { padding: 20px 14px; }
.rooms-empty p { margin-bottom: 12px; }

/* ---- T_CHAT no celular (≤ 600 px, 28/10, auditoria visual): topo da conversa em UMA linha: voltar · avatar · nome/estado (com "…") ·
   ligar · vídeo · ⋮. O interruptor do rádio, canal ao vivo, # (tópicos/eventos), busca e suporte remoto vão para o menu ⋮ (menuChat);
   tradução e envio programado, para o "+" (maisMovel). Dono: o "segurar para falar" fica no topo só com o rádio ligado.
   No computador nada muda. */
@media (max-width: 600px) {
  .wz-topo { flex-wrap: nowrap; justify-content: flex-start; }
  .wz-topo .wz-topo-quem { flex: 1 1 0; min-width: 0; }
  .wz-topo :is(.wz-av-slot, .td-topo-bt, [data-buscar], .wz-sup-bt) { display: none; }
  .wz-topo .wz-radio-slot:not(:has(.rd-sw.on, .wz-radio.no-ar, .wz-radio.pedindo)) { display: none; }
  .wz-topo .wz-radio-slot .rd-sw { display: none; }
  .wz-compor .wz-campo :is(.tr-globo, [data-programar]) { display: none; }
}

/* ---- T_FEED (28/10): lixeira com hover vermelho; no computador o "Publicar" do topo só aparece depois de rolar (a caixa de publicar já tem o
   botão); no celular o cartão do perfil perde os atalhos (T_ROOM, T_CHAT e Minha conta já estão na navegação) e as ações do post
   viram um menu ⋯ (o nome não encolhe mais para "Dono de …") */
.post-menu .icon-btn[data-feed-del]:hover, .post-menu .icon-btn[data-feed-del]:focus-visible { color: var(--danger); background: var(--danger-soft); }
.post-menu .post-mais { display: none; }
@media (min-width: 961px) { html[data-produto="feed"]:not(.feed-rolou) [data-acao-pagina] { display: none; } }
@media (max-width: 600px) {
  .feed-links { display: none; }
  .post-menu > .icon-btn:not(.post-mais) { display: none; }
  .post-menu .post-mais { display: inline-flex; }
}

/* 28/10 (auditoria visual): a linha do rádio no topo da conversa leva o ícone de rádio do conjunto (era o emoji 📻 no texto) */
.wz-radio-faixa::before, .wz-radio-txt::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px;
  background: currentColor; -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/%3E%3Cpath d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"/%3E%3Ccircle cx="12" cy="12" r="2"/%3E%3Cpath d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"/%3E%3Cpath d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/%3E%3C/svg%3E') center / contain no-repeat; mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/%3E%3Cpath d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"/%3E%3Ccircle cx="12" cy="12" r="2"/%3E%3Cpath d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"/%3E%3Cpath d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/%3E%3C/svg%3E') center / contain no-repeat; }

/* ===== Ajustes finos da rodada visual de 28/10 (itens médios/baixos da auditoria; só acerta o que já existe) ===== */
/* T_CHAT lista: aviso de push compacto (uma linha curta; o texto longo vai na dica), filtros que quebram em vez de cortar na borda */
.wz-oferta-push { flex-wrap: nowrap; gap: 8px; margin: 6px 10px 2px; padding: 6px 8px 6px 10px; border-radius: 10px; }
.wz-oferta-push > svg { width: 16px; height: 16px; }
.wz-oferta-push > span { flex: 1 1 0; min-width: 0; display: block; }
.wz-oferta-push b { display: block; font-size: calc(12.5px * var(--tl, 1)); line-height: 1.25; }
.wz-oferta-push .wz-bt-p { flex: none; height: var(--h-btn-sm); font-size: calc(12.5px * var(--tl, 1)); padding: 0 10px; }
.wz-filtros { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
.tchat-gaveta .wz-filtros { flex-wrap: nowrap; overflow-x: auto; }

/* Admin › Geral: estado dos serviços em chip (não estica como barra de progresso); desligado = âmbar, vermelho só para erro real */
.acc-rows > div > :is(.chip, .o-tag) { flex: none; display: inline-flex; width: auto; align-self: center; }
.o-tag.o-warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
[data-theme="claro"] .o-tag.o-warn { color: var(--ambar-escuro); }
.acc-rows .o-tag.o-win { color: var(--ok-text); }
.ad-compacto .block-body { padding-top: 4px; }
.ad-compacto .block-body > p { margin: 0; }

/* Painel: três colunas de número em todo cartão (1 número ocupa a linha) e um contador só (vermelho, igual ao sino do topo) */
.pc-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-nums > .pc-num:only-child { grid-column: 1 / -1; }
.nav-badge:not(.live) { background: var(--danger); color: var(--branco); }

/* Salas: "+ Grupo" e "Nova sala" juntos; no celular o "+" do topo ganha o rótulo (era um "+" mudo ao lado do "Nova sala") */
.rooms-bar-acoes { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.rooms-bar-acoes .g-add { flex: none; }
@media (max-width: 560px) {
  .rooms-bar-acoes { margin-left: 0; width: 100%; }
  .rooms-bar .rooms-bar-acoes #btn-room-new { flex: 1 1 auto; width: auto; }
  html[data-produto="salas"] .app-acao .btn { width: auto; min-width: var(--h-btn); padding: 0 10px; gap: 6px; }
  html[data-produto="salas"] .app-acao .btn span { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: calc(12.5px * var(--tl, 1)); }
}

/* Minha conta: campos só leitura com estilo próprio (tracejado, sem fundo); celular em uma coluna (e-mail inteiro) */
#page-conta .field :is(input, select, textarea):is(:disabled, [readonly]) { background: transparent; border-style: dashed; color: var(--text-soft); -webkit-text-fill-color: var(--text-soft); opacity: 1; cursor: not-allowed; }
@media (max-width: 600px) {
  #page-conta .es-row { flex-direction: column; }
  #page-conta .es-row > .field { flex: 0 0 auto; width: 100%; }
  #page-conta .acc-profile small { overflow-wrap: anywhere; }
}

/* Atalhos do teclado: coluna das teclas com largura fixa (descrições alinhadas); "A ou B" na mesma linha */
.atalhos-cols li > span { flex: 0 0 150px; min-width: 0; flex-wrap: wrap; align-items: center; }
.atalhos-cols .at-ou { font-style: normal; font-size: calc(12px * var(--tl, 1)); color: var(--muted); }

/* Página do OCTO: 5 itens sem linha órfã (3+2 viram 3 e 2 largos), privacidade na largura da grade; celular com "Baixar" logo após o título */
.octo-pg-priv { max-width: none; }
@media (min-width: 901px) {
  .octo-pg-grupos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .octo-pg-grupos li { grid-column: span 2; }
  .octo-pg-grupos li:nth-last-child(2):nth-child(3n + 1), .octo-pg-grupos li:last-child:nth-child(3n + 2) { grid-column: span 3; }
  .octo-pg-grupos li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@media (max-width: 900px) { .octo-pg-grupos li:last-child:nth-child(odd), .octo-grade > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 901px) { .octo-grade > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .octo-pg-txt > h2 { order: -3; }
  .octo-pg-txt > .octo-pg-acoes { order: -2; }
  .octo-pg-txt > p.muted.small { order: -1; }
}

/* Início: menos topo antes do título e selos em grade no celular */
@media (max-width: 600px) {
  .hero2 { padding-top: 4px; }
  .hero2 h1 { margin: 10px 0 10px; }
  .hero-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 16px; }
  .hero-trust li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* 28/10 (rodada T_CHAT): mensagens seguidas só mostram o horário com o mouse em cima; botão Responder na mensagem; "Novas mensagens" como
   linha com etiqueta; filtros da busca na conversa; imagem, arquivo e cartão no mesmo formato (raio 10 + fio) */
.wz-hora { font: inherit; }
@media (hover: hover) {
  .wz-m.seguida:not(:hover):not(:focus-within) .wz-b:not(.midia) > .wz-meta .wz-hora { opacity: 0; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .wz-hora { transition: opacity .12s; } }
.wz-acoes { right: -92px; }
.wz-m.minha .wz-acoes { right: auto; left: -92px; }
.wz-m:focus-within .wz-acoes { display: flex; }
.wz-novas { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 0; background: none; }
.wz-novas::before, .wz-novas::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.wz-novas span { background: var(--accent-soft); padding: 2px 12px; border-radius: 999px; }
.wz-bf-bt { flex: none; height: var(--h-btn-sm, 26px); padding: 0 10px; border: 1px solid var(--border-2); border-radius: var(--r-btn); background: none; color: var(--text-soft); font-size: calc(12px * var(--tl, 1)); cursor: pointer; white-space: nowrap; }
.wz-bf-bt:hover { color: var(--text); background: var(--surface-2); }
.wz-bf-bt.ativo { color: var(--accent-text); border-color: var(--accent); }
.wz-buscafil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 6px 16px 8px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: calc(12.5px * var(--tl, 1)); color: var(--text-soft); }
.wz-buscafil label { display: inline-flex; align-items: center; gap: 6px; }
.wz-buscafil select { height: var(--h-btn-sm, 26px); max-width: 190px; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--bg-2); color: var(--text); font: inherit; }
@media (pointer: coarse) { .wz-bf-bt, .wz-buscafil select, .wz-buscafil .wz-bf-chk { min-height: 44px; } }
.wz-img, .wz-video, .wz-arq, .wz-card { border-radius: 10px; border: 1px solid var(--border-2); }

/* 28/10 (rodada T_FEED): caixa de publicar de uma linha até clicar; imagem do post num quadro de proporção fixa (a lista não pula quando a
   foto carrega); "Voltar ao topo" com o número de publicações novas */
.feed-composer.fc-compacto .fc-bar, .feed-composer.fc-compacto .fc-preview { display: none; }
.feed-composer.fc-compacto .fc-text { min-height: 44px !important; height: 44px !important; overflow: hidden; }
.feed-composer.fc-compacto { align-items: center; }
.post-img { aspect-ratio: 16 / 10; max-height: min(560px, 70vh); background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.post-img img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.feed-topo { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; display: inline-flex; align-items: center; gap: 8px; min-height: var(--h-btn); padding: 0 16px; border: 1px solid var(--border-2); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: calc(13px * var(--tl, 1)); font-weight: 600; box-shadow: var(--shadow); cursor: pointer; }
.feed-topo[hidden] { display: none; }
.feed-topo:hover { background: var(--surface-3); }
.feed-topo svg { width: 16px; height: 16px; }
@media (pointer: coarse) { .feed-topo { min-height: 44px; } }
@media (prefers-reduced-motion: no-preference) { .feed-topo:not([hidden]) { animation: feed-topo-in .18s ease-out; } }
@keyframes feed-topo-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* 28/10 (ajudante de cartão/mundo/início): COLAR NO FIM DO public/style.css. Tudo daqui vale só para o que este arquivo cria. */

/* ---- Início: índice das ferramentas vira uma grade de cartões do mesmo tamanho (ícone + nome + uma linha) */
.lp-indice { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; max-width: 1080px; justify-content: stretch; }
.lp-indice button { height: auto; min-height: 64px; padding: 12px 14px; justify-content: flex-start; text-align: left; gap: 12px; border-radius: 14px; font-size: calc(14px * var(--tl, 1)); }
.lp-indice button > [data-icon] { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--pc) 16%, transparent); }
.lp-indice button svg { width: 20px; height: 20px; }
.lp-ind-txt { display: grid; gap: 1px; min-width: 0; }
.lp-ind-txt b { font-size: calc(14px * var(--tl, 1)); }
.lp-ind-txt small { font-size: calc(12px * var(--tl, 1)); font-weight: 500; color: var(--muted); white-space: normal; line-height: 1.3; }
@media (max-width: 600px) {
  .lp-indice { grid-template-columns: minmax(0, 1fr); }
  .lp-indice button { justify-content: flex-start; font-size: calc(14px * var(--tl, 1)); min-height: 56px; padding: 10px 12px; }
  .lp-indice button:last-child:nth-child(3n + 1) { grid-column: auto; }
}

/* ---- Preços: tabela Padrão x VIP (no lugar das listas dentro dos cartões de plano) */
.plans-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plan2 { gap: 14px; }
.plan-tab-wrap { max-width: 1080px; margin: 18px auto 0; overflow-x: auto; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.plan-tab { width: 100%; border-collapse: collapse; font-size: calc(13.5px * var(--tl, 1)); min-width: 560px; }
.plan-tab th, .plan-tab td { padding: 12px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); color: var(--text-soft); }
.plan-tab tbody tr:last-child th, .plan-tab tbody tr:last-child td { border-bottom: 0; }
.plan-tab thead th { font-size: calc(14px * var(--tl, 1)); color: var(--text); background: var(--surface-2); }
.plan-tab thead th small { display: block; margin-top: 2px; font-size: calc(12px * var(--tl, 1)); font-weight: 500; color: var(--muted); }
.plan-tab tbody th { font-weight: 600; color: var(--text); }
.plan-tab .vip { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.plan-tab thead .vip { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.plan-tab td svg { width: 18px; height: 18px; color: var(--ok); }
.plan-tab .plan-no { color: var(--muted); }
@media (max-width: 600px) { .plan-tab th, .plan-tab td { padding: 10px 12px; } }

/* ---- Painel: "Continuar de onde parou" e aviso das novidades da versão (public/js/pages.js) */
.dash-continuar { margin: 0 0 16px; }
.dash-continuar h3 { margin: 0 0 8px; font-size: calc(13px * var(--tl, 1)); letter-spacing: .02em; color: var(--text-soft); }
.dc-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.dc-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; transition: background .12s, border-color .12s; }
.dc-item:hover { background: var(--surface-2); border-color: var(--border-2); }
.dc-item > svg:first-child { width: 22px; height: 22px; flex: none; color: var(--accent-text); }
.dc-item > svg:last-child { width: 16px; height: 16px; flex: none; margin-left: auto; color: var(--muted); }
.dc-item span { display: grid; min-width: 0; flex: 1; }
.dc-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14px * var(--tl, 1)); }
.dc-item small { color: var(--muted); font-size: calc(12px * var(--tl, 1)); }
.dash-novidades { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.dn-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; color: var(--accent-text); background: var(--accent-soft); }
.dn-ic svg { width: 18px; height: 18px; }
.dn-txt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.dn-txt b { font-size: calc(14.5px * var(--tl, 1)); }
.dn-txt ul { margin: 0; padding-left: 18px; color: var(--text-soft); font-size: calc(13px * var(--tl, 1)); line-height: 1.45; display: grid; gap: 3px; }
.dash-novidades .icon-btn { flex: none; }
@media (max-width: 760px) { .dash-novidades .icon-btn, .dc-item { min-height: 44px; } .dash-novidades .icon-btn { min-width: 44px; } }
@media (prefers-reduced-motion: reduce) { .dc-item { transition: none; } }

/* ============================================================================================================================
   Acessibilidade (OCTO fase 4, frente F5; decisão 41): pular para o conteúdo, alto contraste (forced-colors) e movimento reduzido.
   Foco visível, nome nos botões de ícone, diálogos e a troca de página anunciada estão no HTML e em js/acessibilidade.js.
   ============================================================================================================================ */
.pular { position: fixed; left: 12px; top: 8px; z-index: 10000; padding: 8px 14px; border-radius: 8px; border: 2px solid var(--accent); background: var(--surface); color: var(--text);
  font-weight: 600; font-size: calc(13px * var(--tl, 1)); text-decoration: none; transform: translateY(-200%); }
.pular:focus, .pular:focus-visible { transform: none; }
main[tabindex="-1"]:focus { outline: none; }
/* controles que tiravam o contorno sem pôr outro (o foco do teclado sumia): código do Painel e as listas de dispositivos da entrada da reunião */
.pc-codigo input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
select:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }

/* Movimento reduzido: nada gira, pulsa nem desliza; a mudança de estado continua, só sem a animação */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* Alto contraste do Windows (forced-colors): o navegador troca as cores pelas do sistema; aqui garantimos que o que era só fundo
   (cartão, botão, chip, aba, chave) continue com contorno, que o estado atual (página aberta, aba, filtro, chave ligada) se veja
   por um contorno mais grosso (sem depender de cor) e que o foco seja o realce do sistema. */
@media (forced-colors: active) {
  .btn, .icon-btn, .nav-card, .nav-inicio, .app-nav a, .app-side-foot a, .app-side-foot button, .app-baixo a, .app-baixo button, .prod-card, .card, .cartao,
  .chip, .chip-btn, .g-chip, .kchip, .tag, .pill, .tabs button, .seg button, .top-busca, .campo input, .campo select, .campo textarea, input, select, textarea,
  .dc-item, .pop, .menu-pop, .atv-pop, .cmdk-caixa, .toast, .modal-inner, .tchat-gaveta, .switch, .nav-badge, .link-btn {
    outline: 1px solid ButtonText; outline-offset: -1px; }
  .nav-card.active, .nav-inicio.active, .app-nav a.active, .app-baixo a.active, [aria-current="page"], .tabs .on, .tabs .active, .tabs [aria-selected="true"],
  .chip.on, .chip.active, .g-chip.on, .g-chip.active, [aria-pressed="true"], .seg .active {
    outline: 3px solid Highlight; outline-offset: -3px; }   /* só o contorno mais grosso: trocar fundo/texto deixava o rótulo invisível (os !important do tema vencem o fundo) */
  :focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px !important; }
  .switch .sw { forced-color-adjust: none; background: Canvas; border: 2px solid ButtonText; }
  .switch .sw::after { background: ButtonText; }
  .switch input:checked + .sw { background: Highlight; border-color: Highlight; }
  .switch input:checked + .sw::after { background: HighlightText; }
  .switch input:focus-visible + .sw { outline: 3px solid Highlight; }
  .nav-badge { background: Canvas; color: CanvasText; border: 1px solid CanvasText; outline: 0; }
  .ct-dot { forced-color-adjust: none; border-color: Canvas; }
  hr, .modal-head, .sep { border-color: CanvasText; }
  ::backdrop { background: Canvas; opacity: .6; }
  .skeleton, .esq { forced-color-adjust: none; background: GrayText; opacity: .3; }
}