/* TETH Hub · visual da marca (versão E, 29/10/2026; skill teth-design): preto, creme e dourado, Archivo larga
   nos títulos. Os nomes das variáveis vêm do visual antigo e ficaram para não mexer em cada tela: "leo" virou o
   destaque creme/dourado (botão principal, item ativo, link) e "bia" o dourado quente do que precisa do dono.
   As cores dos tessers só aparecem neles (personagem, avatar, a luz do andar no prédio). */
:root {
  --fundo: #0A0A0B; --lado: #0D0D0F; --caixa: #111113; --caixa-alta: #17171A; --campo: #1E1E22;
  --linha: #232327; --linha-fraca: #1A1A1E; --borda-btn: #36363C;
  --texto: #F5F5F7; --suave: #A1A1A6; --apagado: #86868B; --claro: #D6D6DA;
  --leo: #2B8AF0; --leo-claro: #FFFFFF; --leo-fundo: #0B1424; --leo-borda: #1E3354; --leo-chip: #13233F; --leo-texto: #D6D6DA; --sobre-leo: #FFFFFF;
  --bia: #FF6F61; --bia-claro: #FF9A8F; --bia-fundo: #1A0F0E; --bia-borda: #3A2422; --bia-chip: #2E1A18; --bia-texto: #C9C9CE; --sobre-bia: #FFFFFF;
  --ambar: #F5B544; --ambar-fundo: #1C170C; --ambar-chip: #2A2412;
  --ok: #3DD68C; --perigo: #FF6B6B;
  --creme: #ECECE8; --dourado: #9A9C9F; --btn-grad: linear-gradient(180deg, #FFFFFF, #2B8AF0);
  --cartao-grad: linear-gradient(180deg, #151517, #0E0E10); --fio: inset 0 1px 0 rgba(255, 255, 255, .07);
  --titulo: 'Archivo', system-ui, sans-serif; --fonte: 'Archivo', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --curva: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.45 var(--fonte); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--leo); text-decoration: none; }
a:hover { color: var(--leo-claro); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--leo); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--titulo); letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
.rosto { flex: none; display: block; }
.k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.suave { color: var(--suave); }
.apagado { color: var(--apagado); }
.pequeno-txt { font-size: 13px; }
.mini { font-size: 12px; }

.marca { display: inline-flex; align-items: center; gap: 10px; font-family: var(--titulo); font-size: 22px; font-weight: 700; letter-spacing: .02em; color: var(--texto); }
.btn { min-height: 44px; border: 1px solid var(--borda-btn); background: transparent; color: var(--texto); border-radius: 12px; padding: 0 16px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--suave); color: var(--texto); }
.btn.primario { background: var(--leo); color: var(--sobre-leo); border-color: transparent; font-weight: 700; }
.btn.primario:hover { background: var(--leo-claro); color: var(--sobre-leo); }
.btn.coral { background: var(--bia); color: var(--sobre-bia); border-color: transparent; font-weight: 700; }
.btn.coral:hover { background: var(--bia-claro); color: var(--sobre-bia); }
.btn.claro { background: var(--texto); color: var(--fundo); border-color: transparent; font-weight: 700; }
.btn.pequeno { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.cheio { width: 100%; min-height: 48px; font-size: 15px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--linha-fraca); color: var(--claro); white-space: nowrap; }
.chip.leo { background: var(--leo-chip); color: #CFE0FF; }
.chip.ok { background: rgba(61, 214, 140, .12); color: #86E8B8; }
.chip.bia { background: var(--bia-chip); color: var(--bia-claro); }
.chip.ambar { background: var(--ambar-chip); color: var(--ambar); }
.cont { min-width: 20px; height: 20px; border-radius: 10px; background: var(--bia); color: var(--sobre-bia); font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; padding: 0 6px; }
.vazio { display: grid; gap: 4px; padding: 18px 4px; color: var(--suave); font-size: 14px; }
.vazio b { color: var(--texto); font-size: 15px; }
.vazio.grande { max-width: 520px; margin: 10vh auto; text-align: center; }
.carregando { padding: 40px; color: var(--suave); }
.aviso { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--texto); color: var(--fundo); border-radius: 999px; padding: 10px 18px; font-size: 14px; z-index: 70; max-width: calc(100% - 32px); }
.aviso.ruim { background: var(--bia); color: var(--sobre-bia); }
.caixa { border: 1px solid var(--linha); background: var(--caixa); border-radius: 20px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg button { min-height: 36px; border: 1px solid var(--borda-btn); border-radius: 999px; padding: 0 14px; background: transparent; color: var(--claro); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.seg button[aria-pressed="true"] { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.pilula { display: inline-flex; background: var(--fundo); border: 1px solid var(--linha); border-radius: 999px; padding: 3px; }
.pilula button { border: none; border-radius: 999px; padding: 5px 11px; min-height: 30px; font-size: 12px; font-weight: 700; background: transparent; color: var(--suave); }
.pilula button[aria-pressed="true"] { background: var(--leo); color: var(--sobre-leo); }
.pilula button:disabled { cursor: default; }
input.campo, textarea.campo, select.campo { width: 100%; border: 1px solid var(--linha); background: var(--caixa); color: var(--texto); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
input.campo { height: 44px; padding: 0 14px; }
textarea.campo { min-height: 84px; resize: vertical; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-caixa { width: 100%; max-width: 380px; background: var(--caixa); border: 1px solid var(--linha); border-radius: 24px; padding: 28px; display: grid; gap: 14px; }
.login-caixa h1 { font-size: 26px; margin-top: 10px; }
.login-caixa .sub { margin: -6px 0 4px; color: var(--suave); font-size: 14px; }
.login-caixa label { display: grid; gap: 6px; font-size: 13px; color: var(--suave); }
.login-caixa input { height: 46px; border: 1px solid var(--linha); background: var(--fundo); border-radius: 12px; padding: 0 14px; font-size: 15px; color: var(--texto); }
.erro { margin: 0; color: var(--bia-claro); font-size: 13px; }

/* ---------- app: menu à esquerda, tela, abas embaixo no celular ---------- */
.app { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.lado { position: sticky; top: 0; height: 100vh; background: var(--lado); border-right: 1px solid var(--linha-fraca); padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.lado .marca { padding: 0 8px 18px; }
.loja-caixa { border: 1px solid var(--linha); border-radius: 14px; padding: 10px 12px; margin-bottom: 14px; display: grid; gap: 6px; font-size: 14px; }
.loja { height: 34px; border: 1px solid var(--linha); background: var(--caixa); border-radius: 10px; padding: 0 8px; font-size: 13px; }
.menu { display: grid; gap: 2px; }
.nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--claro); font-weight: 600; font-size: 14px; }
.nav:hover { background: var(--caixa); color: var(--texto); }
.nav[aria-current="page"] { background: var(--caixa-alta); color: var(--texto); font-weight: 700; }
.nav[aria-current="page"] svg { color: var(--leo); }
.nav .cont { margin-left: auto; }
.nav-nota { margin-left: auto; font-size: 11px; color: var(--apagado); font-weight: 600; }
.cresce { flex-grow: 1; }
.conta { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--linha-fraca); padding-top: 12px; }
.eu { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linha); background: var(--caixa-alta); font-weight: 700; flex: none; }
.conta-email { flex: 1; min-width: 0; font-size: 12px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#conteudo { min-width: 0; }
.abas { display: none; }
.cv-sair { display: none; }
@media (max-width: 820px) { .cv-sair { display: inline-flex; } }

.pagina { padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 22px; max-width: 1400px; }
.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cabeca h1 { font-size: 32px; line-height: 1.1; }
.cabeca p { color: var(--suave); margin-top: 6px; max-width: 720px; }
.ao-vivo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); }
.ao-vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--bia); }
.linha { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.coluna { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ---------- Sala ---------- */
.sala { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 100vh; }
.sala.sem-leo { grid-template-columns: minmax(0, 1fr); }   /* gerente: a conversa com o Leo é só do dono */
.dinheiro-semana { flex: 2 1 420px; min-width: 0; border-radius: 24px; border: 1px solid var(--leo-borda); background: var(--leo-fundo); padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; }
.dinheiro-semana .grande { font-family: var(--titulo); font-size: 54px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.dinheiro-semana .rot { font-size: 14px; color: var(--leo-texto); }
.barras { flex: 1 1 260px; display: grid; gap: 8px; align-items: end; height: 130px; }
.barras div { display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: flex-end; height: 100%; }
.barras i { width: 100%; border-radius: 6px; background: var(--leo); opacity: .45; display: block; min-height: 3px; }
.barras i.topo { opacity: 1; }
.barras i.hoje { background: transparent; border: 1.5px dashed var(--leo); opacity: 1; }
.barras span { font-size: 11px; color: var(--leo-texto); }
.barras b { font-size: 11px; white-space: nowrap; }
.numeros { flex: 1 1 260px; min-width: 0; border-radius: 24px; border: 1px solid var(--linha); background: var(--caixa); padding: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: center; }
.numeros b { display: block; font-family: var(--titulo); font-size: 28px; line-height: 1.1; }
.numeros span { font-size: 13px; color: var(--suave); }
.precisa { border: 1px solid var(--bia-borda); background: var(--bia-fundo); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.precisa-item { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--bia-borda); }
.precisa-item:first-of-type { border-top: none; padding-top: 0; }
.precisa-item .txt { flex: 1 1 260px; min-width: 0; }

/* A empresa é um prédio (sala-predio.js, 29/10/2026). Tudo com "pr-"; o palco usa a mesma caixa da Sala (.emp-palco).
   Medidas do mundo: a frente do andar tem 190, a lateral 34 (sobe 14: skewY -22.38°), o chão fica em y = 0. */
.emp { min-width: 0; }
.emp-palco { position: relative; height: 270px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .06);
  background: radial-gradient(ellipse 80% 62% at 60% 64%, #19150F 0%, #0B0A09 55%, #050505 100%); touch-action: manipulation; }
.pr-vivo { position: absolute; left: 12px; top: 12px; z-index: 6; display: flex; gap: 7px; align-items: center; padding: 5px 11px; border-radius: 999px;
  background: rgba(18, 18, 21, .86); border: 1px solid rgba(255, 255, 255, .1); color: var(--claro); font-size: 12px; font-weight: 600; }
.pr-vivo i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.fechada .pr-vivo i { background: var(--apagado); }
.pr-mundo { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.pr-mundo > * { position: absolute; }
.pr-fundo { left: -1000px; top: -440px; width: 2400px; height: 480px; overflow: visible; }
.pr-nucleo { left: 2px; width: 186px; background: #050506; }
.pr-nucleo-lado { left: 190px; width: 34px; transform-origin: 0 0; transform: skewY(-22.38deg); }
.pr-base { left: -4px; top: -28px; width: 198px; height: 28px; background: #111113; display: grid; place-items: center; }
.pr-base b { font: 800 10px/1 var(--titulo); font-stretch: 125%; letter-spacing: .3em; color: var(--creme); text-shadow: 0 0 12px rgba(143, 184, 255, .75); white-space: nowrap; }
.pr-base-topo { left: -4px; top: -42px; width: 198px; height: 14px; background: #1A1A1D; border: 1px solid rgba(255, 255, 255, .25); transform-origin: 0 100%; transform: skewX(-67.62deg); }
.pr-base-lado { left: 194px; top: -28px; width: 34px; height: 28px; background: #0A0A0C; transform-origin: 0 0; transform: skewY(-22.38deg); }
.pr-sombra { left: -12px; top: -1px; width: 214px; height: 9px; background: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent); }
.pr-sombra::after { content: ''; position: absolute; left: 206px; top: -13px; width: 14px; height: 14px; background: rgba(0, 0, 0, .55); filter: blur(3px); transform-origin: 0 100%; transform: skewX(-67.62deg); }
.pr-andar { left: 0; width: 190px; cursor: pointer; }
.pr-frente { position: absolute; inset: 0; background: linear-gradient(180deg, #151518, #0B0B0D); border-top: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 4px 0 #050506; }
.pr-andar[data-id="bia"] .pr-frente { box-shadow: none; }
.pr-janela { position: absolute; left: 8px; right: 8px; top: 12px; border-radius: 2px; overflow: hidden; background: #07070A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); transition: box-shadow .3s; }
.pr-luz { position: absolute; inset: 0; transition: opacity 1.2s var(--curva); }
.pr-moveis { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: opacity 1s; }
.pr-tesser { position: absolute; height: auto; transition: opacity .8s; }
.pr-lado { position: absolute; left: 190px; top: 0; width: 34px; height: 100%; background: #0B0B0D; border-top: 1px solid rgba(255, 255, 255, .14); transform-origin: 0 0; transform: skewY(-22.38deg); }
.pr-lado-luz { position: absolute; left: 3px; right: 3px; top: 12px; transition: opacity 1.2s; }
.pr-andar.apagado .pr-luz, .pr-andar.apagado .pr-lado-luz { opacity: 0; }
.pr-andar.apagado .pr-moveis { opacity: .12; }
.pr-andar.apagado .pr-tesser { opacity: .5; }
.pr-andar.atual .pr-janela { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 0 2px rgba(255, 255, 255, .85); }
.pr-teto { left: 0; width: 190px; height: 14px; background: #18181B; border: 1px solid rgba(255, 255, 255, .35); transform-origin: 0 100%; transform: skewX(-67.62deg); }
.pr-obra { left: 0; width: 190px; cursor: pointer; }
.pr-obra-frente { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .24); display: flex; flex-direction: column; }
.pr-obra-lado { position: absolute; left: 190px; top: 0; width: 34px; height: 100%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .24); border-left: 0; transform-origin: 0 0; transform: skewY(-22.38deg); display: flex; flex-direction: column; }
.pr-obra-teto { position: absolute; left: 0; top: -14px; width: 190px; height: 14px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .24); border-bottom: 0; transform-origin: 0 100%; transform: skewX(-67.62deg); }
.pr-vaga { flex: 1; position: relative; border-top: 1px dashed rgba(255, 255, 255, .14); }
.pr-vaga:first-child { border-top-color: transparent; }
.pr-vaga i { position: absolute; left: 8px; right: 8px; top: 8px; bottom: 8px; border: 1px dashed rgba(255, 255, 255, .14); transition: border-color .3s; }
.pr-obra:hover .pr-vaga i, .obra-atual .pr-vaga i { border-color: rgba(255, 255, 255, .45); }
.pr-guindaste { position: absolute; left: 60px; top: -50px; width: 140px; height: 50px; overflow: visible; }
.pr-gancho { animation: pr-gancho 6s ease-in-out infinite; transform-origin: 108px 16px; }
.pr-porta { left: 190px; top: -80px; width: 80px; height: 90px; overflow: visible; pointer-events: none; }
.pr-pulso { animation: pr-pulso 3.2s ease-in-out infinite; }
.pr-folha { animation: pr-folha .6s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pr-folha { from { opacity: 0; transform: translateY(-12px); } }
@keyframes pr-pulso { 50% { opacity: .35; } }
@keyframes pr-gancho { 50% { transform: rotate(1.5deg); } }
/* O andar novo: aparece em traço, é construído de baixo para cima e acende; o que está em cima sobe junto */
.pr-andar.nasce::before { content: ''; position: absolute; inset: 0; z-index: 2; border: 1px solid rgba(255, 255, 255, .6); animation: pr-some .5s ease 1.7s both; pointer-events: none; }
.pr-andar.nasce .pr-frente, .pr-andar.nasce .pr-lado { animation: pr-nasce 1s var(--curva) .8s both; }
.pr-andar.nasce .pr-janela { animation: pr-aparece .5s ease 1.6s both; }
.pr-andar.nasce .pr-luz, .pr-andar.nasce .pr-lado-luz { animation: pr-aparece 1.2s var(--curva) 2.1s both; }
.pr-andar.nasce .pr-tesser, .pr-andar.nasce .pr-moveis { animation: pr-aparece .8s ease 2.2s both; }
.sobe { animation: pr-sobe 1.2s cubic-bezier(.65, 0, .35, 1) .1s both; }
.pr-teto.sobe { animation-name: pr-sobe-teto; }
@keyframes pr-nasce { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pr-aparece { from { opacity: 0; } }
@keyframes pr-some { to { opacity: 0; } }
@keyframes pr-sobe { from { transform: translateY(var(--sobe)); } }
@keyframes pr-sobe-teto { from { transform: translateY(var(--sobe)) skewX(-67.62deg); } to { transform: skewX(-67.62deg); } }
/* As anotações, como numa planta: o nome do andar e o que está acontecendo, com uma linha até o prédio */
.pr-notas { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.pr-nota { position: absolute; pointer-events: auto; display: flex; flex-direction: column; gap: 2px; text-align: left; background: transparent; border: 0; padding: 2px 0; color: var(--texto); cursor: pointer; font: inherit; }
.pr-nota b { font-size: 14px; font-weight: 700; line-height: 1.15; }
.pr-nota small { font-size: 12px; color: var(--suave); line-height: 1.3; overflow-wrap: anywhere; }
.pr-nota.atual b { color: var(--creme); }
.pr-nota:hover b { color: #FFFFFF; }
.pr-espera { color: var(--bia-claro) !important; }
.pr-ponto { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: 1px; animation: pr-vivo 1.8s ease-in-out infinite; }
@keyframes pr-vivo { 50% { opacity: .35; } }
.pr-guia { position: absolute; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .35)); }
.pr-nota.obra { gap: 3px; }
.pr-obra-tit { font-size: 11px !important; color: var(--apagado) !important; }
.pr-obra-nome { font-size: 12px; color: #8A8A90; }
.sem-notas .pr-notas { display: none; }
@media (prefers-reduced-motion: reduce) { .pr-palco *, .pr-palco *::before { animation: none !important; transition: none !important; } }
.em-breve { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px dashed var(--linha); padding-top: 12px; width: 100%; font-size: 13px; color: var(--suave); }
.em-breve img { opacity: .5; filter: grayscale(.5); }
table.lista { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14px; }
table.lista th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--suave); text-align: left; border-bottom: 1px solid var(--linha); }
table.lista td { padding: 12px 16px; border-bottom: 1px solid var(--linha-fraca); vertical-align: top; }
table.lista tr:last-child td { border-bottom: none; }
table.lista .dir { text-align: right; }
.rolagem { overflow-x: auto; }

/* Leo ao lado (no computador) e no topo (no celular) */
.leo-painel { background: var(--lado); border-left: 1px solid var(--linha-fraca); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.leo-topo { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--linha-fraca); }
.leo-topo .txt { flex: 1; min-width: 0; }
.leo-msgs { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.balao { max-width: 92%; background: var(--caixa-alta); border-radius: 6px 16px 16px 16px; padding: 10px 14px; font-size: 14px; white-space: pre-line; }
.balao.meu { align-self: flex-end; background: var(--leo); color: var(--sobre-leo); border-radius: 16px 16px 6px 16px; font-weight: 600; }
.balao .quando { display: block; font-size: 11px; color: var(--apagado); margin-top: 4px; }
.balao.decisao { border: 1px solid var(--leo-borda); display: flex; flex-direction: column; gap: 10px; white-space: normal; }
.balao.bia { background: var(--bia-fundo); border: 1px solid var(--bia-borda); white-space: normal; display: flex; flex-direction: column; gap: 8px; }
.balao .k { color: var(--leo-claro); }
.balao.bia .k { color: var(--dourado); }
.dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.leo-pe { padding: 12px 18px 18px; border-top: 1px solid var(--linha-fraca); display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--apagado); }
.leo-linha { display: flex; gap: 8px; align-items: center; }
.leo-linha input { flex: 1; min-width: 0; min-height: 40px; box-sizing: border-box; border: 1px solid var(--borda-btn); background: var(--caixa); color: var(--texto); border-radius: 10px; padding: 0 12px; font-size: 14px; }
.leo-zap { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.leo-zap label { font-size: 13px; font-weight: 600; color: var(--claro); }
.balao.digitando { color: var(--leo-texto); font-style: italic; }

/* ---------- Conversas ---------- */
.conversas { display: grid; grid-template-columns: 330px minmax(0, 1fr) 300px; height: 100vh; }
.cv-lista { border-right: 1px solid var(--linha-fraca); background: var(--lado); display: flex; flex-direction: column; min-height: 0; }
.cv-lista-topo { padding: 24px 18px 12px; display: flex; flex-direction: column; gap: 12px; }
.cv-lista-topo h1 { font-size: 26px; }
.cv-itens { overflow-y: auto; flex: 1; }
.cv-item { width: 100%; text-align: left; border: none; border-left: 3px solid transparent; border-bottom: 1px solid var(--linha-fraca); background: transparent; color: var(--texto); padding: 12px 16px 12px 15px; display: flex; gap: 12px; align-items: flex-start; }
.cv-item:hover { background: var(--caixa); }
.cv-item[aria-pressed="true"] { background: var(--caixa-alta); border-left-color: var(--leo); }
.cv-item.urgente { border-left-color: var(--bia); }
.ini { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--caixa); color: var(--claro); display: grid; place-items: center; font-family: var(--titulo); font-weight: 700; font-size: 15px; }
.ini.urgente { background: var(--bia-chip); color: var(--bia-claro); }
.ini .canal { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--lado); background: var(--ok); }
.ini .canal.instagram { background: #D946A8; }
.ini .canal.facebook { background: #4E7DFF; }
.ini .canal.telegram { background: #3AA0E0; }
.cv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cv-txt .l1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cv-txt .l1 b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-txt .l1 span { font-size: 11px; color: var(--apagado); flex: none; }
.cv-txt .ult { font-size: 13px; color: var(--claro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-txt .est { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--leo-claro); margin-top: 2px; }
.cv-txt .est.urgente { color: var(--bia-claro); }
.cv-txt .est.equipe { color: var(--claro); }
.cv-meio { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
/* 039: foto do cliente, não lida, tempo de espera, arquivo colado ou arrastado */
.ini img.av-foto { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: transparent; }
.ini.grande { width: 56px; height: 56px; font-size: 18px; }
.cv-txt .l1 b { margin-right: auto; }
.cv-item.nova .l1 b { color: var(--texto); font-weight: 800; }
.cv-item.nova .ult { color: var(--texto); font-weight: 600; }
.cv-txt .l1 .ponto-novo { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--leo); align-self: center; }
.cv-txt .l1 .espera { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px; background: var(--caixa); color: var(--claro); }
.cv-txt .l1 .espera.atencao { background: var(--ambar-chip); color: var(--ambar); }
.cv-txt .l1 .espera.tarde { background: var(--bia-chip); color: var(--bia-claro); }
.cv-anexo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px dashed var(--linha); border-radius: 14px; padding: 8px 12px; font-size: 13px; }
.cv-anexo > span { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-meio.soltando { outline: 2px dashed var(--leo); outline-offset: -8px; }
.cv-topo { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--linha-fraca); flex-wrap: wrap; }
.cv-topo .txt { flex: 1 1 160px; min-width: 0; }
.cv-topo .sit { font-size: 13px; font-weight: 600; color: var(--leo-claro); }
.cv-topo .sit.urgente { color: var(--bia-claro); }
.cv-chat { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; background: radial-gradient(ellipse at 50% 0%, #131315 0%, var(--fundo) 62%); }
.dia-sep { align-self: center; font-size: 12px; color: var(--suave); background: var(--caixa); border-radius: 999px; padding: 3px 12px; margin: 6px 0; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 76%; }
.msg.cli { align-self: flex-start; }   /* 046: o cliente à esquerda, a loja à direita (como no WhatsApp da loja) */
.msg.cli .bolha { border-radius: 16px 16px 16px 6px; }
.msg.dir { align-self: flex-end; flex-direction: row-reverse; }
.msg.auto { align-self: flex-end; }
.msg .corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg.dir .corpo { align-items: flex-end; }
.msg .bolha { margin: 0; border-radius: 16px 16px 16px 6px; padding: 10px 14px; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; background: var(--caixa); border: 1px solid rgba(255, 255, 255, .08); }
.msg.bia .bolha { background: var(--caixa-alta); border-color: var(--caixa-alta); border-radius: 16px 16px 6px 16px; }
.msg.equipe .bolha { background: var(--leo); color: var(--sobre-leo); border-color: var(--leo); border-radius: 16px 16px 6px 16px; font-weight: 600; }
.msg.auto .bolha { background: var(--caixa-alta); border-color: rgba(255, 255, 255, .06); }
.msg.enviando .bolha { opacity: .5; }
.msg .quem { font-size: 11px; color: var(--apagado); }
.msg .midia { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; background: rgba(255,255,255,.08); margin-right: 6px; }
.evento { align-self: center; font-size: 12px; color: var(--leo-texto); background: var(--leo-fundo); border: 1px solid var(--leo-borda); border-radius: 999px; padding: 4px 12px; text-align: center; }
.evento.urgente { color: var(--bia-claro); background: var(--bia-fundo); border-color: var(--bia-borda); }
.nota-int { align-self: center; max-width: 80%; font-size: 13px; background: var(--ambar-fundo); border: 1px solid var(--ambar-chip); color: #FFD27A; border-radius: 12px; padding: 8px 12px; }
.cv-pe { padding: 12px 22px 16px; border-top: 1px solid var(--linha-fraca); background: var(--lado); display: flex; flex-direction: column; gap: 8px; }
.cv-pe .faixa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cv-pe .faixa span { flex: 1 1 240px; font-size: 14px; color: var(--claro); }
.compor { display: flex; gap: 8px; align-items: flex-end; position: relative; }
.compor.nota textarea { background: var(--ambar-fundo); border-color: var(--ambar-chip); }
.cv-modo { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; min-width: 0; }
.cv-modo [role="tab"] { white-space: nowrap; flex: none; border: 0; background: transparent; color: var(--suave); font: inherit; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.cv-modo [role="tab"][aria-selected="true"] { background: var(--linha-fraca); color: var(--texto); }
.cv-modo [data-modo="nota"][aria-selected="true"] { background: var(--ambar-chip); color: var(--ambar); }
.cv-modo .cv-dica { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.btn.redondo.gravando { width: auto; padding: 0 14px; border-radius: 999px; background: rgba(255, 107, 107, .12); color: #FFB4B4; border-color: rgba(255, 107, 107, .5); font-size: 14px; font-weight: 700; }
.cv-nova { display: flex; gap: 6px; flex-wrap: wrap; }
.cv-nova[hidden] { display: none; }
.cv-nova .campo { flex: 1 1 140px; width: auto; height: 40px; }
.cv-topo .sit.adiada, .cv-txt .est.adiada { color: var(--suave); }
@media (max-width: 820px) { .cv-modo .cv-dica { display: none; } .cv-topo .btn { min-height: 34px; padding: 0 11px; font-size: 13px; } .compor .btn.redondo { width: 40px; height: 40px; } }
.btn.redondo { width: 46px; height: 46px; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 18px; cursor: pointer; }
.msg .midia.abrir { border: 0; cursor: pointer; color: inherit; font: inherit; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: rgba(255,255,255,.12); text-decoration: none; display: inline-block; margin: 0 6px 4px 0; }
.msg .midia.abrir:disabled { opacity: .7; cursor: default; }
.msg .midia-foto { display: block; max-width: min(260px, 100%); max-height: 200px; border-radius: 10px; margin: 2px 0 6px; cursor: zoom-in; object-fit: cover; }
.msg .midia-audio { display: block; width: min(260px, 100%); height: 36px; margin: 2px 0 6px; }
.msg .midia-video { display: block; max-width: min(260px, 100%); max-height: 200px; border-radius: 10px; margin: 2px 0 6px; }
.cv-prontas { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20; background: var(--caixa-alta); border: 1px solid var(--linha); border-radius: 14px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; box-shadow: 0 -10px 30px rgba(0,0,0,.4); }
.cv-prontas [data-pronta] { display: flex; gap: 10px; align-items: baseline; text-align: left; background: transparent; border: 0; border-radius: 10px; padding: 7px 8px; color: var(--claro); font: inherit; font-size: 13px; cursor: pointer; min-width: 0; }
.cv-prontas [data-pronta] span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--suave); }
.cv-prontas [data-pronta][aria-selected="true"], .cv-prontas [data-pronta]:hover { background: var(--linha-fraca); }
.cv-pronta-nova[hidden] { display: none !important; }
.cv-pronta-nova { display: flex !important; flex-direction: row; gap: 6px; padding: 6px 4px 2px; border-top: 1px solid var(--linha-fraca); margin-top: 4px; }
.cv-pronta-nova .campo { width: auto; height: 34px; font-size: 13px; padding: 0 10px; }
.cv-pronta-nova .campo:first-child { flex: 0 0 90px; }
.cv-pronta-nova .campo:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.compor textarea { flex: 1; min-height: 46px; max-height: 160px; resize: none; border-radius: 22px; padding: 12px 18px; }
.cv-lado { border-left: 1px solid var(--linha-fraca); background: var(--lado); padding: 22px 20px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; font-size: 14px; }
.cv-lado .bloco { display: flex; flex-direction: column; gap: 8px; }
.hist { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--linha); background: var(--caixa); border-radius: 14px; padding: 10px 12px; }
.hist .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--ambar-chip); color: var(--ambar); }
.hist .ic.ok { background: rgba(61, 214, 140, .12); color: #86E8B8; }
.mem { border-left: 2px solid var(--leo); padding: 2px 0 2px 10px; display: flex; flex-direction: column; gap: 4px; }
.mem.pend { border-left-color: var(--ambar); }
.ensinar { margin-top: auto; border: 1px solid var(--bia-borda); background: var(--bia-fundo); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ensinar textarea { background: var(--caixa); border-color: #4A3440; }
.voltar, #cv-cliente, #cv-fechar-cliente { display: none; }
.vazio-meio { margin: auto; text-align: center; max-width: 320px; }

/* ---------- Cérebro, Equipe e Dinheiro ---------- */
.mem-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--linha-fraca); }
.mem-linha:last-child { border-bottom: none; }
.mem-linha .txt { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; min-width: 0; }
.mem-linha .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--suave); }
.mem-linha.esquecida .conteudo { color: var(--apagado); text-decoration: line-through; }
.lado-cartoes { flex: 2 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cartao { border: 1px solid var(--linha); background: var(--caixa); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.cartao.leo { border-color: var(--leo-borda); background: var(--leo-fundo); }
.cartao.bia { border-color: var(--bia-borda); background: var(--bia-fundo); }
.cartao.ambar { border-color: var(--ambar-chip); background: #1A1A1E; }
.passo { display: flex; gap: 10px; align-items: flex-start; }
.passo i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--leo-chip); display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.ficha { flex: 1 1 460px; min-width: 0; border: 1px solid var(--linha); background: var(--caixa); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.ficha-topo { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--linha); }
.ficha-topo h2 { font-size: 24px; }
.ficha-corpo { padding: 18px 22px; display: flex; flex-direction: column; gap: 18px; }
.lim { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--linha-fraca); }
.lim .txt { display: flex; flex-direction: column; line-height: 1.3; flex: 1 1 200px; }
.rotina { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.rotina b { width: 120px; flex: none; font-size: 12px; font-variant-numeric: tabular-nums; }
.soon { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.soon div { border: 1px solid var(--linha); background: var(--caixa); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 12px; color: var(--suave); }
.soon img { opacity: .6; filter: grayscale(.4); }
.soon b { color: var(--texto); font-size: 14px; }
.conta-linha { display: flex; justify-content: space-between; gap: 10px; }

/* ---------- celular ---------- */
@media (max-width: 1180px) {
  .sala { grid-template-columns: minmax(0, 1fr); }
  .leo-painel { position: static; height: auto; border-left: none; border-bottom: 1px solid var(--linha-fraca); order: -1; }
  .leo-msgs { max-height: 520px; }
  .conversas { grid-template-columns: 300px minmax(0, 1fr); }
  .cv-lado { display: none; }
  #cv-cliente, #cv-fechar-cliente { display: inline-flex; }
  .conversas.com-cliente .cv-lado { display: flex; grid-column: 2; grid-row: 1; }
  .conversas.com-cliente .cv-meio { display: none; }
}
/* Menu da esquerda fino (Lucas, 28/10): só os ícones; abre por cima da tela quando o mouse passa (ou o teclado entra).
   O conteúdo nunca muda de lugar: a faixa tem 68px e o menu aberto passa por cima. */
.app { grid-template-columns: 68px minmax(0, 1fr); }
.lado { width: 68px; padding: 20px 12px; z-index: 30; overflow-x: hidden; transition: width .16s ease, box-shadow .16s ease; }
.lado:hover, .lado:focus-within { width: 248px; box-shadow: 12px 0 40px rgba(0, 0, 0, .35); transition-delay: .12s; }
.lado .marca { padding: 0 9px 18px; white-space: nowrap; }
.lado .nav { padding: 10px 12px; white-space: nowrap; position: relative; }
.lado .nav svg { flex: none; }
.lado .nav > span:not(.cont) { transition: opacity .12s; }
.lado:not(:hover):not(:focus-within) .nav > span:not(.cont),
.lado:not(:hover):not(:focus-within) .loja-caixa,
.lado:not(:hover):not(:focus-within) .conta > :not(.eu) { opacity: 0; pointer-events: none; }
.lado:not(:hover):not(:focus-within) .marca { font-size: 0; gap: 0; }
.lado:not(:hover):not(:focus-within) .nav .cont { position: absolute; top: 2px; left: 26px; height: 16px; min-width: 16px; font-size: 10px; padding: 0 4px; }
.lado .loja-caixa { white-space: nowrap; transition: opacity .12s; }
.lado .conta { flex-wrap: nowrap; }
.lado .conta > * { transition: opacity .12s; }
.lado .eu { margin-left: 4px; }
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .lado { display: none; }
  .abas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(72px + env(safe-area-inset-bottom, 0px)); padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--lado); border-top: 1px solid var(--linha); }
  .aba { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--suave); }
  .aba[aria-current="page"] { color: var(--leo); font-weight: 700; }
  .aba .cont { position: absolute; top: 0; right: calc(50% - 22px); height: 18px; min-width: 18px; font-size: 10px; }
  .pagina { padding: 20px 16px 32px; gap: 18px; }
  .cabeca h1 { font-size: 26px; }
  .dinheiro-semana .grande { font-size: 40px; }
  .leo-msgs { max-height: none; }
  .conversas { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 72px); height: calc(100dvh - 72px); }
  /* quem só atende (28/10): sem a barra de baixo, a conversa ocupa a tela toda */
  .so-conversas .abas { display: none; }
  .so-conversas .app { padding-bottom: 0; }
  .so-conversas .conversas { height: 100vh; height: 100dvh; }
  .cv-meio, .conversas.com-cliente .cv-lado { display: none; }
  .conversas.aberta .cv-lista { display: none; }
  .conversas.aberta .cv-meio { display: flex; }
  .conversas.aberta.com-cliente .cv-meio { display: none; }
  .conversas.com-cliente .cv-lado { grid-column: 1; display: flex; }
  .voltar { display: inline-flex; }
  .msg { max-width: 88%; }
  .cv-topo { padding: 12px 14px; gap: 10px; }
  .cv-chat { padding: 14px; }
  .cv-pe { padding: 10px 14px 12px; }
  .aviso { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* Equipe: "Peça ao Leo" e "O que nunca faz" */
.frases { display: flex; flex-wrap: wrap; gap: 6px; }
.frase { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--leo-borda); background: var(--leo-chip); color: var(--leo-texto); font: inherit; font-size: 13px; text-align: left; }
button.frase { cursor: pointer; }
button.frase:hover { border-color: var(--leo); color: var(--texto); }
button.frase:disabled { opacity: .5; }
.nunca { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--claro); }
.nunca.passa li::marker { color: var(--bia); }

/* Palavras de urgência (019) e travas dos níveis */
.palavras { display: flex; flex-wrap: wrap; gap: 6px; }
.palavra { display: inline-flex; align-items: center; gap: 2px; min-height: 30px; padding: 3px 4px 3px 11px; border-radius: 999px; border: 1px solid var(--bia-borda); background: var(--bia-fundo); font-size: 12.5px; font-weight: 600; }
.palavra:not(:has(button)) { padding-right: 11px; }
.palavra.sua { border-color: var(--bia); }
.palavra button { border: none; background: transparent; color: var(--suave); width: 26px; height: 26px; border-radius: 999px; font-size: 16px; line-height: 1; cursor: pointer; }
.palavra button:hover { color: var(--texto); background: var(--linha-fraca); }
details.mais summary { cursor: pointer; color: var(--suave); margin-bottom: 6px; }
.linha-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.linha-form input.campo { flex: 1 1 180px; height: 36px; min-width: 0; font-size: 13px; }
.pilula button:disabled:not([aria-pressed="true"]) { opacity: .45; }
/* A Bia nova em teste (ficha da Bia): acerto até a meta e "mesma pergunta, duas respostas" */
.acerto { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--bia-fundo); border: 1px solid var(--bia-borda); }
.acerto .numero-grande { font-family: var(--titulo); font-size: 28px; line-height: 1; color: var(--bia); }
.acerto .barra { position: relative; height: 8px; border-radius: 999px; background: var(--linha-fraca); margin-top: 4px; }
.acerto .barra span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--bia); }
.acerto .barra i { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--texto); border-radius: 2px; }
.duas { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--linha-fraca); }
.duas p { margin: 0 0 6px; line-height: 1.4; white-space: pre-wrap; }
.link-cartao { display: inline-block; margin-top: 2px; font-weight: 700; color: var(--leo); text-decoration: underline; text-underline-offset: 3px; }

/* Personalizar o tesser (023): prévia, cores e peças. Os olhos piscam de vez em quando. */
.editor-tesser { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--linha); }
.editor-tesser .previa { align-self: center; padding: 6px; border-radius: 24px; background: var(--fundo); }
.editor-tesser .previa svg { display: block; }
.cores { display: flex; flex-wrap: wrap; gap: 8px; }
.cor-bola { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--caixa); background: var(--c); box-shadow: 0 0 0 1px var(--linha); padding: 0; }
.cor-bola[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--texto); }
.opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.opcao-tesser { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 14px; border: 1px solid var(--linha); background: var(--fundo); color: var(--suave); font-size: 12px; font-weight: 600; }
.opcao-tesser[aria-pressed="true"] { border-color: var(--leo); color: var(--texto); background: var(--leo-fundo); }
.tesser .olhos { transform-box: fill-box; transform-origin: center; animation: piscar 6s infinite; }
.opcoes .tesser .olhos { animation: none; }
@keyframes piscar { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) { .tesser .olhos { animation: none; } }

/* Habilidades (024): ícone na cor da área, nome, descrição e o interruptor */
.hab-area { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.hab { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linha-fraca); }
.hab .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hab .txt .mini { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hab-extra { display: flex; flex-direction: column; gap: 5px; margin: 0 0 8px 48px; }   /* o link do Google (044) */
.hab-extra input { font: inherit; font-size: .85rem; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--linha); background: var(--fundo-2, transparent); color: inherit; }
.hab-icone { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.hab.chegando { opacity: .55; }
.interruptor { flex: none; width: 46px; height: 28px; border-radius: 999px; border: 1px solid var(--borda-btn); background: var(--fundo); padding: 3px; display: flex; }
.interruptor span { width: 20px; height: 20px; border-radius: 50%; background: var(--apagado); transition: transform .15s; }
.interruptor[aria-checked="true"] { background: var(--leo); border-color: var(--leo); }
.interruptor[aria-checked="true"] span { background: var(--sobre-leo); transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) { .interruptor span { transition: none; } }

/* Equipe compacta: cartões que abrem a folha do tesser (abas), por cima da página */
.tessers { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tesser-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; text-align: left; color: var(--texto);
  border: 1px solid var(--linha); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 10%, var(--caixa)), var(--caixa) 60%); }
.tesser-card:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--linha)); }
.tesser-card .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tesser-card .txt b { font-family: var(--titulo); font-size: 18px; }
.tesser-card .seta { font-size: 26px; color: var(--apagado); }
.soon { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.soon div { flex: none; width: 96px; padding: 10px 6px; border-radius: 14px; }

body.folha-aberta { overflow: hidden; }
.folha-fundo { position: fixed; inset: 0; z-index: 60; background: rgba(5, 6, 14, .72); display: flex; align-items: center; justify-content: center; padding: 24px; }
.folha-fundo[hidden] { display: none; }
.folha { width: min(760px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--caixa); border: 1px solid var(--linha); border-radius: 24px; overflow: hidden; }
.folha-topo { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--linha); }
.folha-topo .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.folha-topo h2 { font-size: 22px; }
.fechar { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); font-size: 22px; line-height: 1; }
.abas-tesser { display: flex; gap: 6px; padding: 10px 18px; overflow-x: auto; border-bottom: 1px solid var(--linha); scrollbar-width: none; }
.abas-tesser button { flex: none; border: 1px solid var(--linha); background: transparent; color: var(--suave); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; }
.abas-tesser button[aria-selected="true"] { background: var(--leo); border-color: var(--leo); color: var(--sobre-leo); }
.folha-corpo { padding: 16px 18px 22px; overflow-y: auto; }
.folha .editor-tesser { overflow-y: auto; border-bottom: none; }
@media (max-width: 760px) {
  .folha-fundo { padding: 0; align-items: stretch; }
  .folha { max-height: none; height: 100%; border-radius: 0; border: none; }
}

/* ---------------------------------------------------------------- Telas que cabem na janela
   No computador o Hub tem a altura da janela: a página não rola. Cada tela se arruma em grade
   (.pagina.cheia) e o que for longo rola só dentro do próprio bloco (.encaixa). No celular, rola normal. */
.cabeca-mini { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; }
@media (min-width: 821px) {
  .app { height: 100vh; overflow: hidden; }
  #conteudo { height: 100vh; overflow-y: auto; }
  .pagina.cheia { height: 100vh; max-width: none; padding: 20px 24px; gap: 14px; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
  .pagina.cheia .cabeca h1 { font-size: 26px; }
  .pagina.cheia .cabeca p { margin-top: 2px; }
  .encaixa { min-height: 0; overflow-y: auto; }
  .encaixa > .caixa { min-height: 0; overflow: auto; }

}
@media (min-width: 821px) and (max-width: 1180px) {
  /* Tablet: o Leo vai para cima e a Sala rola dentro da área */
  .sala { height: auto; }
  .pagina.cheia.sala-meio { height: auto; display: flex; flex-direction: column; }
  .sala-meio .emp-palco { height: 340px; }
  .setor { max-height: none; }
}
@media (min-width: 821px) and (max-height: 820px) {
  .pagina.cheia { padding: 14px 20px; gap: 10px; }
  .sala-meio .emp-palco { height: 100%; min-height: 220px; }
  .setor-nums b { font-size: 19px; }
  .setor-nums > div { padding: 7px 12px; }
}
@media (min-width: 821px) {
  /* Dinheiro: resumo em cima; vendas e Pix lado a lado */
  .pagina.cheia.dinheiro .dinheiro-semana { padding: 16px 20px; gap: 16px; }
  .pagina.cheia.dinheiro .dinheiro-semana .grande { font-size: 40px; }
  .pagina.cheia.dinheiro .barras { height: 92px; }
  .dinheiro-baixo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; min-height: 0; }
  .dinheiro-baixo .encaixa { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
  .dinheiro-baixo .encaixa > .caixa { flex: 1; }
  .encaixa .lista thead th { position: sticky; top: 0; background: var(--caixa); z-index: 1; }
}
@media (min-width: 821px) and (max-height: 820px) {
  .pagina.cheia.dinheiro .dinheiro-semana .grande { font-size: 32px; }
  .pagina.cheia.dinheiro .barras { height: 64px; }
}
@media (min-width: 821px) {
  /* Cérebro: a lista (com "Ensinar" embaixo) e, ao lado, como aprende e esquecer cliente */
  .pagina.cheia.cerebro { grid-template-rows: auto minmax(0, 1fr); }
  .pagina.cheia.cerebro:has(> .cartao.ambar) { grid-template-rows: auto auto minmax(0, 1fr); }
  .cerebro-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; min-height: 0; }
  .cerebro-corpo .encaixa { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
  .cerebro-corpo .encaixa > .caixa { flex: 1; }
  .cerebro-corpo .lado-cartoes { overflow-y: auto; min-height: 0; }
}
@media (min-width: 821px) {
  /* Tabelas dentro de um bloco: sem largura mínima e mais baixas (cabem lado a lado) */
  .encaixa table.lista { min-width: 0; font-size: 13px; }
  .encaixa table.lista th, .encaixa table.lista td { padding: 9px 12px; }
  .encaixa table.lista td { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 820px) {
  .barras { height: 90px; }
  .dinheiro-semana { padding: 16px 18px; gap: 14px; }
}

/* ---------------------------------------------------------------- Sala: a empresa por setores
   A maquete em cima (janela e menu), a fileira de setores e o setor escolhido: título, três números e a lista. */
.setores { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.setores::-webkit-scrollbar { display: none; }
.setor-bt { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--linha); background: var(--caixa); color: var(--claro); font-size: 13px; font-weight: 700; position: relative; }
.setor-bt:hover { border-color: var(--borda-btn); }
.setor-bt[aria-current="true"] { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.setor-bt .rosto, .setor-bt img.rosto { width: 24px; height: 24px; }
.setor-bt svg { flex: none; }
.setor-bt.obra { border-style: dashed; }
.setor-bt i { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--creme); color: var(--sobre-leo); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.setor { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.setor-cab { display: flex; align-items: center; gap: 12px; }
.setor-av { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--linha); background: var(--caixa); color: var(--claro); }
.setor-av .rosto, .setor-av img.rosto { width: 38px; height: 38px; }
.setor-cab > div { flex: 1; min-width: 0; }
.setor-cab h2 { font-size: 22px; line-height: 1.15; }
.setor-cab p { color: var(--suave); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setor-cab .btn { flex: none; }
.setor-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.setor-nums > div { padding: 10px 14px; border-radius: 16px; border: 1px solid var(--linha); background: var(--caixa); min-width: 0; }
.setor-nums small { display: block; color: var(--suave); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setor-nums b { display: block; font-family: var(--titulo); font-size: 24px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setor-nums em { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: var(--leo-claro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setor-lista { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.linhas { border: 1px solid var(--linha); border-radius: 16px; background: var(--caixa); overflow: hidden; }
.lin { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--linha-fraca); min-height: 54px; color: var(--texto); }
.lin:first-child { border-top: none; }
a.lin:hover { background: var(--caixa-alta); color: var(--texto); }
.lin-av { width: 32px; height: 32px; flex: none; display: grid; place-items: center; }
.lin-av .rosto, .lin-av img.rosto { width: 32px; height: 32px; }
.lin-av .ini { width: 32px; height: 32px; font-size: 11px; }
.lin-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.lin-txt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lin-txt small { font-size: 12.5px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lin .chip { flex: none; font-style: normal; }
.lin-bts { display: flex; gap: 6px; flex: none; }
.linhas .vazio { padding: 16px; color: var(--suave); font-size: 14px; }
@media (min-width: 821px) {
  /* No computador a Sala cabe na janela: a maquete pega o espaço que sobra em cima, a lista rola dentro dela */
  .pagina.cheia.sala-meio { grid-template-rows: minmax(220px, 1fr) auto auto; gap: 12px; }
  .sala-meio .emp-palco { height: 100%; }
  .sala-meio .emp { min-height: 0; }
  .setor { min-height: 0; max-height: 44vh; }
  .setor-lista { flex: 1; overflow: hidden; }
  .setor-lista .linhas { min-height: 0; flex: 1; }
}
@media (max-width: 820px) {
  .sala-meio { gap: 12px; }
  .emp-palco { height: 250px; }
  .setor-cab h2 { font-size: 19px; }
  .setor-nums { gap: 8px; }
  .setor-nums > div { padding: 8px 10px; }
  .setor-nums b { font-size: 18px; }
  .lin { padding: 8px 12px; }
  .lin-bts .btn { padding: 6px 10px; }
}
@media (max-width: 820px) {
  /* Botões das decisões numa linha própria, para o texto caber */
  .lin:has(.lin-bts) { flex-wrap: wrap; }
  .lin:has(.lin-bts) .lin-bts { width: 100%; padding-left: 42px; }
}

/* ---------------------------------------------------------------- Sala sem rolar (Lucas, 27/10: "não quero scrolls, mesmo no celular")
   A lista nunca rola: mostra o que cabe e o resto vira "+N · Ver tudo" (sala.js, caber()).
   No celular e no tablet a Sala tem a altura da tela; a conversa do Leo abre por cima, pelo botão no canto. */
.setor-lista .linhas { overflow: hidden; }
.sala-leo-bt { display: none; }
.leo-topo .fechar { display: none; }
@media (max-width: 1180px) {
  .sala { display: block; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .pagina.cheia.sala-meio, .sala-meio { position: relative; height: 100%; max-width: none; display: grid; grid-template-rows: minmax(200px, 50%) auto minmax(0, 1fr); gap: 10px; padding: 12px 16px; overflow: hidden; }
  .sala-meio .emp, .sala-meio .emp-palco { height: 100%; min-height: 0; }
  .setor { min-height: 0; max-height: none; overflow: hidden; }
  .setor-lista { flex: 1; min-height: 0; overflow: hidden; }
  .setor-lista .linhas { flex: 1; min-height: 0; }
  .sala .leo-painel { display: none; }
  .sala.leo-aberto .leo-painel { display: flex; position: fixed; inset: 0; z-index: 40; height: 100vh; height: 100dvh; border: none; order: 0; }
  .sala.leo-aberto .leo-msgs { max-height: none; overflow: hidden; justify-content: flex-end; }
  .leo-topo .fechar { display: grid; margin-left: auto; }
  .sala-leo-bt { display: grid; place-items: center; position: absolute; right: 26px; top: 22px; z-index: 8; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--borda-btn); background: rgba(18, 18, 21, .9); padding: 0; }
  .sala-leo-bt .rosto, .sala-leo-bt img.rosto { width: 34px; height: 34px; }
  .sala-leo-bt i { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--creme); color: var(--sobre-leo); font-style: normal; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
  
}
@media (max-width: 820px) {
  .sala { height: calc(100vh - 72px - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - 72px - env(safe-area-inset-bottom, 0px)); }
  .sala-meio { padding: 10px 12px; gap: 8px; grid-template-rows: minmax(200px, 48%) auto minmax(0, 1fr); }
  .sala-leo-bt { right: 22px; top: 18px; }
  .setor { gap: 8px; }
  .setor-cab { gap: 10px; }
  .setor-av { width: 36px; height: 36px; }
  .setor-av .rosto, .setor-av img.rosto { width: 32px; height: 32px; }
  .setor-cab h2 { font-size: 17px; }
  .setor-cab p { font-size: 12px; }
  .setor-cab .btn { padding: 6px 10px; font-size: 12px; }
  .setor-nums > div { padding: 6px 9px; border-radius: 12px; }
  .setor-nums small, .setor-nums em { font-size: 11px; }
  .setor-nums b { font-size: 16px; }
  .lin { min-height: 48px; padding: 7px 10px; }
}

/* ---------------------------------------------------------------- O Hub inteiro sem rolar (Lucas, 27/10)
   Toda lista fica numa caixa de tamanho fixo e mostra o que cabe; o resto vai para páginas (paginar(), em nucleo.js).
   Vale para Conversas, Dinheiro, Equipe (e a folha do tesser) e Cérebro, no computador, no tablet e no celular. */
.paginas { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 8px; font-size: 12px; font-weight: 700; color: var(--suave); }
.paginas[hidden] { display: none !important; }
.paginas button { min-width: 34px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--borda-btn); background: var(--caixa-alta); color: var(--texto); font-size: 13px; font-weight: 700; }
.paginas button:disabled { opacity: .35; cursor: default; }
.encaixa, .encaixa > .caixa, .cerebro-corpo .lado-cartoes { overflow: hidden !important; }
.rolagem { overflow: hidden; }
.cv-itens, .cv-lado { overflow: hidden !important; }
/* Só a conversa rola, como no WhatsApp (Lucas, 28/10). O resto do Hub continua sem rolar. */
.cv-chat-caixa { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cv-chat { display: block; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2A2A30 transparent; }
.cv-chat::-webkit-scrollbar { width: 8px; }
.cv-chat::-webkit-scrollbar-thumb { background: #2A2A30; border-radius: 8px; }
.cv-novas { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 13px; background: var(--leo); color: var(--sobre-leo); box-shadow: 0 6px 18px rgba(0,0,0,.4); cursor: pointer; }
.cv-chat-dentro { display: flex; flex-direction: column; gap: 8px; min-height: 100%; justify-content: flex-end; }
.cv-antigas { align-self: center; margin-bottom: 6px; }
/* 040: citar, ✓✓, chamar alguém */
.msg { position: relative; }
.cv-citar { align-self: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linha); background: var(--caixa); color: var(--claro); font-size: 15px; cursor: pointer; opacity: .3; transition: opacity .12s; }   /* 046: sempre um pouco visível, para achar o ⋯ */
.msg:hover .cv-citar, .cv-citar:focus-visible { opacity: 1; }
/* 045: reações embaixo da bolha, fixada na lista, links */
.reacoes { align-self: flex-start; margin: -6px 0 2px 10px; padding: 1px 7px; border-radius: 12px; background: var(--caixa); border: 1px solid var(--linha); font-size: 13px; line-height: 20px; }
.msg.dir .reacoes { align-self: flex-end; margin: -6px 10px 2px 0; }
/* 046: a mensagem fixada no alto da conversa, o contato, os importantes */
.cv-fixada { position: sticky; top: 0; z-index: 2; align-self: stretch; display: flex; gap: 8px; align-items: center; text-align: left; font: inherit; font-size: 13px; color: inherit;
  background: var(--caixa); border: 1px solid var(--linha); border-radius: 10px; padding: 7px 12px; cursor: pointer; margin-bottom: 4px; }
.cv-fixada span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--suave); }
.cv-contato { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cv-contato .campo { flex: 1 1 140px; min-width: 0; padding: 6px 9px; }
.cv-imp { display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: inherit; background: transparent; border: 0; border-top: 1px solid var(--linha-fraca); padding: 6px 0; cursor: pointer; }
.cv-imp .pequeno-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reacao-op { font-size: 20px; }
.reacao-op.sim { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8)); }
.cv-item .fixa { font-size: 11px; margin-left: auto; }
.bolha a { color: inherit; text-decoration: underline; word-break: break-all; }
#cv-fixar[aria-pressed="true"] { border-color: var(--creme); }
@media (hover: none) { .cv-citar { opacity: .7; } }
.citacao { display: flex; flex-direction: column; gap: 1px; text-align: left; border: 0; border-left: 3px solid var(--leo); border-radius: 8px; background: rgba(0,0,0,.22); color: inherit; font: inherit; font-size: 12px; padding: 5px 9px; margin: 0 0 6px; max-width: 100%; cursor: pointer; white-space: normal; }
.citacao b { font-size: 12px; color: var(--leo-claro); }
.citacao span { opacity: .85; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.msg.equipe .citacao { background: rgba(0,0,0,.14); border-left-color: var(--sobre-leo); }
.msg.equipe .citacao b { color: var(--sobre-leo); }
.cv-citando { display: flex; align-items: center; gap: 8px; }
.cv-citando .citacao { flex: 1; min-width: 0; margin: 0; cursor: default; }
.tique { margin-left: 4px; font-weight: 800; letter-spacing: -2px; color: var(--apagado); }
.tique.lida { color: #53BDEB; }
.msg.piscar .bolha { outline: 2px solid var(--leo); outline-offset: 2px; }
.msg.falhou .bolha { opacity: 1; background: var(--bia-chip); border-color: var(--bia); color: var(--bia-claro); }
.nota-int .mencao { color: var(--ambar); }
.cv-chamados { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--linha-fraca); background: var(--ambar-fundo); }
.cv-chamados .k { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ambar); }
.cv-chamado { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--ambar-chip); background: transparent; color: var(--texto); border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.cv-chamado > b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ambar-chip); color: var(--ambar); flex: none; }
.cv-chamado span { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.cv-chamado small { color: var(--claro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-itens { min-height: 0; }
.cv-lado { min-height: 0; }
.so-cel { display: none !important; }
/* Equipe: cabe na tela; os cartões ocupam o que sobra, "Contratar" é uma fileira e a equipe humana duas */
.pagina.cheia.equipe-pg { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.equipe-pg > .tessers { flex: 0 1 auto; min-height: 0; overflow: hidden; align-content: start; }
.equipe-pg .soon { flex-wrap: wrap; overflow: hidden; max-height: 124px; align-items: center; }
.equipe-pg #eq-gente { overflow: hidden; max-height: 92px; align-items: center; }
.equipe-pg .tessers .paginas { grid-column: 1 / -1; width: 100%; }
/* nas fileiras, a troca de página é um botão pequeno no fim da fileira */
.equipe-pg .soon .paginas, .equipe-pg #eq-gente .paginas { flex: none; width: auto; padding: 0; gap: 4px; }
.equipe-pg .soon .paginas span, .equipe-pg #eq-gente .paginas span { display: none; }
/* A folha do tesser: o corpo não rola, cada aba mostra o que cabe */
.folha-corpo { overflow: hidden !important; flex: 1 1 auto; min-height: 0; }
.folha .editor-tesser { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow: hidden !important; }
.editor-opcoes { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.editor-bts { flex: none; }
@media (max-width: 820px) {
  .so-cel { display: inline-flex !important; }
  .so-pc { display: none; }
  /* cada tela tem a altura da tela (menos a barra de baixo) */
  .pagina.cheia, .pagina.cheia.equipe-pg { height: calc(100vh - 72px - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - 72px - env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; overflow: hidden; padding: 14px 14px 10px; gap: 10px; max-width: none; }
  .pagina.cheia > :last-child { flex: 1 1 0; min-height: 0; }
  .pagina.cheia.equipe-pg > :last-child { flex: none; }
  .pagina.cheia .cabeca { gap: 8px; }
  .pagina.cheia .cabeca h1 { font-size: 22px; }
  .pagina.cheia .cabeca p { font-size: 13px; }
  .encaixa { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
  .encaixa > .caixa { flex: 1 1 0; min-height: 0; }
  .encaixa table.lista { min-width: 0; font-size: 13px; }
  .encaixa table.lista th, .encaixa table.lista td { padding: 8px 10px; }
  /* Dinheiro: resumo curto e as duas listas uma em cima da outra */
  .pagina.cheia.dinheiro .dinheiro-semana { flex: none; padding: 12px 14px; gap: 10px; border-radius: 18px; }
  .pagina.cheia.dinheiro .dinheiro-semana .grande { font-size: 28px; }
  .pagina.cheia.dinheiro .barras { display: none; }
  .dinheiro-baixo { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  /* Cérebro: a lista; "Mais" troca para os cartões do lado */
  .cerebro-corpo { display: flex; flex-direction: column; min-height: 0; }
  .cerebro-corpo > .encaixa { flex: 1 1 0; }
  .cerebro-corpo .seg { flex-wrap: wrap; }
  .cerebro .lado-cartoes { display: none; }
  .cerebro.ver-lado .lado-cartoes { display: flex; flex: 1 1 0; min-height: 0; gap: 10px; }
  .cerebro.ver-lado .cerebro-corpo > .encaixa { display: none; }
  .mem-linha { padding: 10px 0; }
  /* Equipe */
  .equipe-pg .tessers { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .equipe-pg .soon { max-height: 124px; }
  .equipe-pg h2 { font-size: 17px !important; }
  /* Conversas: a lista e a conversa ocupam a tela; nada rola */
  .cv-lista-topo { padding: 14px 14px 8px; gap: 8px; }
  .cv-lista-topo h1 { font-size: 22px; }
  .cv-itens { flex: 1 1 0; }
  .folha .previa svg { width: 88px; height: 88px; }
}
@media (max-width: 820px) {
  /* Equipe no celular: cartões mais baixos (rosto menor, situação e habilidades na mesma linha) para os tessers caberem juntos */
  .equipe-pg .tesser-card { padding: 8px 12px; gap: 10px; border-radius: 16px; }
  .equipe-pg .tesser-card .rosto, .equipe-pg .tesser-card img.rosto { width: 44px !important; height: 44px !important; }
  .equipe-pg .tesser-card .txt b { font-size: 16px; }
  .equipe-pg .tesser-card .linha { flex-wrap: nowrap !important; overflow: hidden; margin-top: 2px !important; }
  .equipe-pg .soon div { width: 84px; padding: 8px 4px; }
  .equipe-pg .soon img { width: 36px; height: 36px; }
}
.leo-msgs { overflow: hidden !important; }
/* Os setores da Sala: o rosto (ou ícone) com o número vermelho no canto e o nome do lado (computador) ou embaixo (celular) */
.setor-ic { position: relative; display: grid; place-items: center; flex: none; width: 24px; height: 24px; }
.setor-ic i { position: absolute; top: -7px; left: 17px; font-style: normal; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--creme); color: var(--sobre-leo); font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; border: 2px solid var(--fundo); box-sizing: content-box; }
.setor-bt { position: static; }
@media (max-width: 820px) {
  /* celular: abas do mesmo tamanho que não se mexem ao tocar; nome curto embaixo */
  .setores { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; overflow: visible; padding: 6px 0 0; }
  .setor-bt { flex-direction: column; justify-content: center; gap: 3px; min-width: 0; padding: 6px 2px 5px; border-radius: 12px; font-size: 10.5px; line-height: 1.1; }
  .setor-bt .setor-nome { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .setor-bt .rosto, .setor-bt img.rosto { width: 26px; height: 26px; }
  .setor-bt .setor-ic { width: 26px; height: 26px; }
  .setor-bt[aria-current="true"] { background: var(--texto); color: var(--fundo); }
}
/* "Contratar": todos os cartões da mesma altura (cargo numa linha só), para a fileira caber inteira */
.equipe-pg .soon > div > span, .equipe-pg .soon > div > b { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 821px) { .setor-bt { gap: 8px; padding-left: 14px; } .setor-ic i { left: auto; right: 15px; top: -8px; padding: 0 3px; } }
/* Rotinas pedidas ao Leo (025), na aba Rotinas da ficha do Leo */
.rotina-pedida { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--linha); background: var(--caixa-alta); }
.rotina-pedida .txt { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.rotina-pedida .txt > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Canais (027/028): WhatsApp, Instagram e Messenger da loja; a lista mostra o que cabe (páginas) */
.canais-lista { display: flex; flex-direction: column; gap: 8px; padding: 14px; overflow: hidden; min-height: 0; }
/* Etiquetas da equipe (034): a cor de cada pessoa que atende ("cliente de") */
.etq { --etq: #9FB4C7; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; font-size: 11px; font-weight: 700; line-height: 1.2;
  border-radius: 999px; padding: 2px 8px 2px 6px; color: var(--etq); background: color-mix(in srgb, var(--etq) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--etq) 35%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.etq::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--etq); }
.etq.sem { --etq: #8A90A8; }
.cv-txt .est .est-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-txt .est .etq { margin-left: auto; }
.cv-busca-linha { display: flex; gap: 8px; }
.cv-busca-linha > label:first-child { flex: 1 1 auto; min-width: 0; }
.cv-busca-linha select { max-width: 130px; }
.cv-topo { position: relative; }
.cv-de { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.cv-de-bt { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; }
.cv-menu { position: absolute; z-index: 30; min-width: 220px; max-width: min(320px, 92vw); background: var(--caixa-alta); border: 1px solid var(--linha);
  border-radius: 14px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
.cv-menu .k { padding: 6px 8px 4px; font-size: 11px; }
.cv-menu button { display: flex; align-items: center; gap: 10px; text-align: left; background: transparent; border: 0; border-radius: 10px; padding: 8px; color: var(--claro); font: inherit; font-size: 13px; cursor: pointer; }
.cv-menu button:hover, .cv-menu button:focus-visible { background: var(--linha-fraca); outline: none; }
/* Pessoas (034) */
.pessoas { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 821px) { .pagina.cheia.pessoas { grid-template-rows: auto auto minmax(0, 1fr) auto; max-width: 1000px; } .pagina.cheia.pessoas:not(:has(> .ps-novo, > .cartao)) { grid-template-rows: auto minmax(0, 1fr) auto; } }
.pessoas-lista { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.pessoa .txt { flex: 1 1 auto; }
.pessoa select { width: auto; max-width: 130px; padding: 6px 8px; }
.pessoa-ini { --etq: #3A3A40; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--etq); background: color-mix(in srgb, var(--etq) 22%, transparent);
  color: var(--texto); font-weight: 800; font-size: 13px; display: grid; place-items: center; cursor: pointer; }
.pessoa-ini:disabled { cursor: default; }
.pessoa-cores { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 12px 6px 62px; }
.pessoa-cores button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--etq); cursor: pointer; }
.pessoa-cores button[aria-pressed="true"] { border-color: var(--texto); }
.ps-novo { flex-wrap: wrap; }
.ps-novo .campo { flex: 1 1 160px; width: auto; }
.ps-novo select.campo { flex: 0 1 140px; }
.ps-convite { display: flex; flex-direction: column; gap: 6px; }
.pessoas .cabeca { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ps-codigo { margin-left: auto; display: grid; gap: 4px; padding: 10px 14px; border: 1px solid var(--linha); border-radius: 14px; background: var(--caixa-alta); }
.ps-codigo b { font-family: var(--titulo); font-size: 22px; letter-spacing: .08em; }
.pessoa.pedido { border-color: var(--ambar-chip); background: #1A1A1E; }
.ps-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.canal-ic.historico { display: grid; place-items: center; font-size: 18px; color: var(--suave); }
@media (max-width: 820px) { .pessoa select { max-width: 104px; } .pessoa .chip { display: none; } .pessoa-cores { padding-left: 12px; } }

.canal-linha { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--linha); background: var(--caixa-alta); }
.canal-linha .txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.canal-linha .txt > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canal-linha.apagado { opacity: .5; }
.canal-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--linha-fraca); color: var(--claro); }
.canal-ic.whatsapp { color: #6BE6A0; } .canal-ic.instagram { color: #FF8FB1; } .canal-ic.facebook { color: #8FC7FF; }
.canais-nota { margin: 4px 2px 0; }
.cn-form { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1 1 auto; }
.cn-paginas { display: flex; flex-direction: column; gap: 8px; overflow: hidden; min-height: 0; flex: 1 1 auto; }
.cn-marcas { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 600; }
.cn-marcas label { display: flex; gap: 6px; align-items: center; }
.cv-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (min-width: 821px) { .pagina.cheia.canais { grid-template-rows: auto auto minmax(0, 1fr); max-width: 900px; } .pagina.cheia.canais:not(:has(> .cartao)) { grid-template-rows: auto minmax(0, 1fr); } }
@media (max-width: 820px) { .canal-linha { padding: 8px 10px; gap: 10px; } .canal-linha .btn { padding: 6px 10px; } }
/* Criar conta e criar empresa (030) */
.troca { margin: 0; text-align: center; font-size: 13px; color: var(--suave); }
.link { background: none; border: 0; padding: 0; color: var(--leo-claro); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ok-msg { margin: 0; color: var(--leo-claro); font-size: 14px; line-height: 1.4; }
.criar-empresa { max-width: 560px; gap: 14px; }
.criar-empresa h1 { font-size: 26px; }
.criar-empresa .campo { height: 44px; }
/* Celular baixo: a tela de criar conta cabe sem rolar */
@media (max-height: 760px) {
  .login { padding: 10px 12px; }
  .login-caixa { padding: 18px 20px; gap: 9px; border-radius: 20px; }
  .login-caixa h1 { font-size: 22px; margin-top: 2px; }
  .login-caixa .sub { font-size: 13px; margin: -4px 0 0; }
  .login-caixa input { height: 40px; }
  .login-caixa .marca svg { width: 24px; height: 24px; }
}
@media (max-height: 660px) { #form-cadastro .sub { display: none; } }
/* Pedir o WhatsApp da loja (032): o formulário dentro da linha do canal não corta */
.canal-linha.com-form { flex-wrap: wrap; }
.canal-linha.com-form .txt { flex: 1 1 0; }
.canal-form { flex: 1 1 100%; display: flex; gap: 8px; align-items: center; }
.canal-form .campo { flex: 1 1 auto; min-width: 0; height: 38px; }
/* Conectar o WhatsApp da loja (033): o QR code e o passo a passo */
.zap-qr { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.zap-qr img { width: 190px; height: 190px; background: #fff; border-radius: 12px; padding: 8px; image-rendering: pixelated; }
.zap-qr ol { flex: 1 1 200px; margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.zap-codigo { font-family: var(--titulo); font-size: 17px; letter-spacing: .08em; color: var(--leo-claro); }
@media (max-height: 700px) { .zap-qr img { width: 150px; height: 150px; } }

/* 041: o que quem atende reclama das outras ferramentas */
.cv-som { padding: 0 8px; }
.cv-txt .ult.dig { color: var(--leo-claro); font-style: italic; }
.cv-dig { font-size: 12px; color: var(--leo-claro); font-style: italic; }
.cv-achadas { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-top: 1px solid var(--linha-fraca); }
.cv-achadas .k { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.cv-achada { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid var(--linha-fraca); background: transparent; color: var(--texto); border-radius: 12px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.cv-achada:hover { background: var(--caixa); }
.cv-achada small { color: var(--claro); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cv-achada mark { background: var(--ambar-chip); color: var(--ambar); border-radius: 4px; padding: 0 2px; }
.cv-apagar { align-self: center; flex: none; height: 30px; min-width: 30px; border-radius: 15px; border: 1px solid var(--linha); background: var(--caixa); color: var(--claro); font-size: 13px; cursor: pointer; opacity: 0; transition: opacity .12s; padding: 0 8px; }
.msg:hover .cv-apagar, .cv-apagar:focus-visible, .cv-apagar.confirmar { opacity: 1; }
.cv-apagar.confirmar { background: var(--bia-chip); border-color: var(--bia); color: var(--bia-claro); font-weight: 700; }
@media (hover: none) { .cv-apagar { opacity: .7; } }
.bolha.apagada { opacity: .6; }
.bolha.apagada .apagada-k { display: block; font-size: 11px; font-weight: 800; margin-bottom: 4px; }
.msg.agendada .bolha { background: transparent; color: var(--texto); border: 1px dashed var(--leo); }
.audio-caixa { display: flex; align-items: center; gap: 6px; }
.audio-vel { border: 0; border-radius: 999px; padding: 4px 9px; font-weight: 800; font-size: 12px; background: rgba(255,255,255,.14); color: inherit; cursor: pointer; flex: none; }
.cv-sugestao { display: flex; align-items: center; gap: 10px; border: 1px solid var(--bia-borda); background: var(--bia-fundo); border-radius: 14px; padding: 8px 12px; font-size: 13px; color: var(--bia-texto); }
.cv-sugestao > span { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cv-sugestao b { color: var(--bia-claro); }
.compor { position: relative; }
.cv-emojis { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 25; display: grid; grid-template-columns: repeat(8, 36px); gap: 2px; padding: 8px; border-radius: 14px; background: var(--caixa-alta); border: 1px solid var(--linha); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.cv-emojis button { border: 0; background: transparent; font-size: 20px; border-radius: 8px; cursor: pointer; height: 36px; }
.cv-emojis button:hover { background: var(--caixa); }
@media (max-width: 820px) { #cv-emoji-bt { display: none; } }

/* 042: situação da conversa; o número da loja pelo Hub; o dia da equipe em Pessoas */
.sit-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px;
  background: color-mix(in srgb, var(--sit, #4E7DFF) 18%, transparent); color: var(--sit, #4E7DFF); white-space: nowrap; }
.sit-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sit-chip.vazia { --sit: #8A90B4; }
/* com o filtro de situação: a busca numa linha, "de quem" e "situação" dividem a de baixo */
.cv-busca-linha:has(#cv-sit:not([hidden])) { flex-wrap: wrap; }
.cv-busca-linha:has(#cv-sit:not([hidden])) > label:first-child { flex-basis: 100%; }
.cv-busca-linha:has(#cv-sit:not([hidden])) > label:not(:first-child) { flex: 1 1 0; min-width: 0; }
.cv-busca-linha:has(#cv-sit:not([hidden])) select { max-width: none; width: 100%; }
.cv-sit-nova { display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.sit-cores { display: flex; gap: 6px; }
.sit-cores label { cursor: pointer; }
.sit-cores input { position: absolute; opacity: 0; }
.sit-cores span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--sit); border: 2px solid transparent; }
.sit-cores input:checked + span { border-color: var(--texto); }
.sit-cores input:focus-visible + span { outline: 2px solid var(--leo); outline-offset: 2px; }
.ps-hoje { margin-top: 6px; color: var(--claro); }

/* =====================================================================================================
   TETH · marca (29/10/2026). Daqui para baixo, o visual novo por cima das regras antigas: letras,
   botões em pílula, cartões escuros com o fio de luz, creme só no que importa. (skill teth-design)
   ===================================================================================================== */
body { font: 15px/1.5 var(--fonte); }
h1, h2, h3 { font-family: var(--titulo); letter-spacing: -.01em; }
h2, h3 { font-weight: 700; }
/* Títulos de tela: a voz forte da marca (Archivo larga, pesada, maiúscula) */
.cabeca h1, .cv-lista-topo h1, .login-caixa h1, .criar-empresa h1 { font-weight: 800; font-stretch: 112%; text-transform: uppercase; line-height: .98; letter-spacing: -.01em; }
.cabeca h1 { font-size: 30px; }
.cv-lista-topo h1 { font-size: 24px; }
.k { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--dourado); }
a { color: var(--creme); }
a:hover { color: #FFFFFF; }
:focus-visible { outline: 2px solid #2B8AF0; outline-offset: 3px; }
::selection { background: rgba(255, 255, 255, .35); }

/* O logo: o tesseract em traço fino e a palavra TETH espaçada */
.marca { gap: 12px; font-family: var(--titulo); font-weight: 800; font-size: 15px; letter-spacing: .34em; color: var(--texto); }
.marca svg { color: var(--creme); flex: none; }
.palavra-marca { line-height: 1; }
.lado:not(:hover):not(:focus-within) .marca .palavra-marca { display: none; }

/* Botões: pílulas. O principal é creme (um por tela); o resto é transparente com borda */
.btn { border-radius: 999px; border-color: rgba(255, 255, 255, .2); font-weight: 600; transition: border-color .2s, background-color .2s, color .2s, transform .25s var(--curva); }
.btn:hover { border-color: rgba(255, 255, 255, .5); }
.btn:active { transform: scale(.97); }
.btn.primario, .btn.coral { background: var(--btn-grad); color: var(--sobre-leo); border-color: transparent; font-weight: 600; box-shadow: 0 10px 30px -14px rgba(235, 190, 130, .55); }
.btn.primario:hover, .btn.coral:hover { background: linear-gradient(180deg, #FFFFFF, #ECECE8); color: var(--sobre-leo); }
.btn.claro { background: var(--creme); color: var(--sobre-leo); }
.btn.pequeno { border-radius: 999px; }
.btn.redondo { border-radius: 50%; }
.link { color: var(--creme); }
.chip { background: var(--caixa-alta); color: var(--claro); font-weight: 600; }
.chip.leo { background: var(--leo-chip); color: var(--leo-texto); }
.chip.ok { background: rgba(61, 214, 140, .12); color: #86E8B8; }
.chip.bia { background: var(--bia-chip); color: var(--bia-claro); }
.chip.ambar { background: var(--ambar-chip); color: var(--ambar); }
.cont { background: var(--creme); color: var(--sobre-leo); }
.aviso { background: rgba(20, 20, 23, .97); color: var(--texto); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .7); }
.aviso.ruim { background: rgba(20, 20, 23, .97); color: #FFC2C2; border-color: rgba(255, 107, 107, .45); }
.erro { color: #FF9D9D; }

/* Cartões e campos */
.caixa, .cartao, .ficha, .numeros, .login-caixa { background: var(--cartao-grad); border-color: rgba(255, 255, 255, .07); box-shadow: var(--fio); }
.cartao.leo, .cartao.bia { background: linear-gradient(180deg, #17140F, #100E0B); border-color: rgba(255, 255, 255, .16); }
.cartao.ambar { background: linear-gradient(180deg, #1A160C, #110F08); }
input.campo, textarea.campo, select.campo, .login-caixa input, .leo-linha input { background: var(--campo); border-color: rgba(255, 255, 255, .08); }
input.campo:focus, textarea.campo:focus, select.campo:focus, .login-caixa input:focus, .leo-linha input:focus { border-color: rgba(255, 255, 255, .6); outline: none; }
.seg button { border-color: rgba(255, 255, 255, .16); }
.seg button[aria-pressed="true"], .pilula button[aria-pressed="true"] { background: var(--creme); color: var(--sobre-leo); border-color: var(--creme); }
.pilula { background: var(--caixa); border-color: rgba(255, 255, 255, .08); }

/* Menu */
.lado { background: var(--lado); border-right-color: rgba(255, 255, 255, .06); }
.nav { color: var(--suave); font-weight: 500; }
.nav:hover { background: var(--caixa); color: var(--texto); }
.nav[aria-current="page"] { background: var(--caixa-alta); color: var(--texto); font-weight: 600; box-shadow: var(--fio); }
.nav[aria-current="page"] svg { color: var(--creme); }
.loja-caixa { border-color: rgba(255, 255, 255, .08); }
.eu { background: var(--caixa-alta); border-color: rgba(255, 255, 255, .1); }
@media (max-width: 820px) {
  .abas { background: rgba(10, 10, 11, .94); border-top-color: rgba(255, 255, 255, .06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .aba { color: var(--apagado); font-weight: 500; }
  .aba[aria-current="page"] { color: var(--creme); font-weight: 600; }
  .cabeca h1 { font-size: 26px; }
}

/* Entrar */
.login { background: radial-gradient(ellipse 60% 42% at 50% 28%, rgba(143, 184, 255, .09), transparent 72%), var(--fundo); }
.login-caixa { border-radius: 24px; padding: 30px 28px; }
.login-caixa h1 { font-size: 28px; margin-top: 14px; }
.login-caixa .marca { justify-self: start; }

/* A conversa com o Leo (gerente): as mensagens dele na cor da função, bem de leve; as do dono neutras */
.leo-painel { background: var(--lado); border-left-color: rgba(255, 255, 255, .06); }
.balao { background: rgba(77, 154, 241, .09); border: 1px solid rgba(77, 154, 241, .14); }
.balao.meu { background: var(--campo); color: var(--texto); border-color: transparent; font-weight: 500; }
.balao .k { color: var(--dourado); }
.balao.decisao { background: var(--leo-fundo); border-color: var(--leo-borda); }
.balao.digitando { color: var(--suave); }

/* Conversas: cliente à esquerda (neutro), a IA atendente na cor dela bem de leve, a equipe neutra */
.cv-lista, .cv-lado { background: var(--lado); }
.cv-item { border-bottom-color: var(--linha-fraca); }
.cv-item[aria-pressed="true"] { border-left-color: var(--creme); }
.cv-item.urgente { border-left-color: var(--bia); }
.ini { background: var(--caixa-alta); font-family: var(--fonte); font-weight: 600; }
.ini .canal { border-color: var(--lado); background: var(--ok); }
.cv-txt .est { color: var(--suave); font-weight: 600; }
.cv-txt .est.urgente, .cv-topo .sit.urgente { color: var(--bia-claro); }
.cv-topo .sit { color: var(--suave); }
.cv-txt .l1 .ponto-novo { background: var(--creme); }
.cv-chat { background: radial-gradient(ellipse at 50% 0%, #131315 0%, var(--fundo) 62%); }
.msg .bolha { background: var(--caixa); border-color: rgba(255, 255, 255, .08); }
.msg.bia .bolha { background: rgba(255, 122, 89, .14); border-color: rgba(255, 122, 89, .2); color: var(--texto); }
.msg.equipe .bolha { background: var(--campo); border-color: var(--campo); color: var(--texto); font-weight: 500; }
.msg.auto .bolha { background: var(--caixa-alta); border-color: rgba(255, 255, 255, .06); }
.evento { background: var(--caixa-alta); border-color: rgba(255, 255, 255, .07); color: var(--suave); }
.evento.urgente { background: var(--bia-fundo); border-color: var(--bia-borda); color: var(--bia-claro); }
.dia-sep { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; background: var(--caixa-alta); }
.cv-pe { background: var(--lado); }
.compor textarea { background: var(--campo); }
.ensinar { background: var(--leo-fundo); border-color: var(--leo-borda); }
.ensinar textarea { border-color: var(--leo-borda); }
.mem { border-left-color: var(--dourado); }

/* Dinheiro */
.dinheiro-semana { background: var(--cartao-grad); border-color: rgba(255, 255, 255, .07); box-shadow: var(--fio); }
.dinheiro-semana .grande, .numeros b, .setor-nums b { font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dinheiro-semana .rot, .barras span { color: var(--suave); }
.barras i { background: var(--dourado); opacity: .4; }
.barras i.topo { opacity: 1; }
.barras i.hoje { border-color: var(--dourado); }
table.lista th { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
table.lista .dir, table.lista td:last-child { font-variant-numeric: tabular-nums; }

/* Equipe e folha do tesser */
.frase { border-color: var(--leo-borda); background: var(--leo-chip); color: var(--leo-texto); }
.interruptor[aria-checked="true"] { background: var(--creme); }
.abas-tesser button[aria-selected="true"] { color: var(--texto); }

/* O prédio é o grande momento da Sala: no computador largo ele fica de pé à esquerda, na altura toda,
   e os setores e o trabalho de cada um ao lado (29/10). */
@media (min-width: 1181px) {
  .pagina.cheia.sala-meio { grid-template-columns: minmax(320px, 42%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 20px; row-gap: 12px; }
  .sala-meio .emp { grid-column: 1; grid-row: 1 / span 2; min-height: 0; }
  .sala-meio .emp-palco { height: 100%; }
  .sala-meio .setores { grid-column: 2; grid-row: 1; align-self: start; flex-wrap: wrap; overflow: visible; }
  .sala-meio .setor { grid-column: 2; grid-row: 2; max-height: none; }
}

/* O resumo da noite em stories (abertura.js): ao abrir o Hub, uma vez por dia */
.abertura { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0, 0, 0, .74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ab-caixa { position: relative; width: min(420px, 100%); height: min(820px, 100%); overflow: hidden; background: var(--fundo); border: 1px solid rgba(255, 255, 255, .08); border-radius: 28px; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9); }
@media (max-width: 600px) { .ab-caixa { width: 100%; height: 100%; border: 0; border-radius: 0; } }
.ab-luz { position: absolute; inset: 0; pointer-events: none; transition: background .6s; }
.ab-barras { position: absolute; left: 16px; right: 16px; top: calc(14px + env(safe-area-inset-top, 0px)); display: flex; gap: 5px; z-index: 3; }
.ab-barras span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.ab-barras i { display: block; height: 100%; width: 0; background: var(--creme); transition: width .4s var(--curva); }
.ab-topo { position: absolute; left: 20px; right: 8px; top: calc(26px + env(safe-area-inset-top, 0px)); display: flex; justify-content: space-between; align-items: center; z-index: 3; }
.ab-fechar { width: 44px; height: 44px; border: 0; background: transparent; color: var(--suave); font-size: 26px; line-height: 1; border-radius: 50%; }
.ab-fechar:hover { color: var(--texto); }
.ab-toque { position: absolute; inset: 80px 0 120px 0; z-index: 2; border: 0; background: transparent; cursor: pointer; }
.ab-toque:focus-visible { outline-offset: -6px; }
.ab-slide { position: absolute; left: 24px; right: 24px; top: 96px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; pointer-events: none; z-index: 1; }
.ab-slide img { width: min(190px, 46vw); height: auto; }
.ab-slide.entra { animation: ab-entra .5s var(--curva) both; }
@keyframes ab-entra { from { opacity: 0; transform: translateY(14px); } }
.ab-quem { font-size: 14px; color: var(--suave); }
.ab-quem b { color: var(--texto); }
.ab-fala { margin: 0; font-size: 25px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.ab-det { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--apagado); }
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ab-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(18, 18, 21, .9); border: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: var(--claro); }
.ab-pe { position: absolute; left: 20px; right: 20px; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ab-pe .btn { min-height: 50px; padding: 0 26px; font-size: 16px; }
.ab-pe .mini { color: var(--apagado); }
@media (prefers-reduced-motion: reduce) { .ab-slide.entra { animation: none; } .ab-barras i, .ab-luz { transition: none; } }
.ab-caixa:focus { outline: none; }

/* v45 · aceite na tela de criar conta */
.login-caixa .aceite { font-size: 13px; line-height: 1.5; color: var(--apagado); text-wrap: pretty; }
.login-caixa .aceite a { color: var(--texto); text-decoration: underline; text-underline-offset: 2px; }
.login-caixa .aceite a:hover { color: var(--creme, #ECECE8); }

/* ---------- Cérebro como aba (047) ---------- */
.cb-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cb-pend { border: 0; padding: 8px 14px; font-size: 13px; cursor: pointer; }
.cb-busca .campo { border-radius: 999px; padding-left: 18px; }
.cb-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden; }
.cb-numeros div { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.cb-numeros div + div { border-left: 1px solid var(--linha); }
.cb-numeros b { font-family: var(--titulo); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-numeros span { font-size: 12px; color: var(--suave); line-height: 1.3; }
.cb-visitas { display: grid; gap: 8px; }
.cb-visita { display: flex; gap: 10px; font-size: 13px; color: var(--claro); line-height: 1.35; }
.cb-visita time { flex: none; width: 42px; font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.cb-sim-nao { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cb-mover { height: 34px; border-radius: 10px; border: 1px solid var(--borda-btn); background: transparent; color: var(--claro); font-size: 12px; font-weight: 700; padding: 0 8px; max-width: 150px; }
.cb-grupo { padding: 12px 0 2px; color: var(--leo-claro); }
.cb-form { display: grid; gap: 12px; margin-top: 14px; }
.cb-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--claro); }
.cb-form textarea.campo { min-height: 110px; }
.cb-solta { display: grid !important; place-items: center; gap: 4px; min-height: 140px; border: 1.5px dashed var(--borda-btn); border-radius: 18px; background: var(--fundo); text-align: center; cursor: pointer; padding: 16px; }
.cb-solta:hover, .cb-solta.em-cima, .cb-solta:focus-within { border-color: var(--leo); background: var(--leo-fundo); }
.cb-chaves { display: grid; gap: 0; margin-bottom: 12px; }
.cb-chave-linha { display: grid; grid-template-columns: minmax(70px, 1.2fr) repeat(4, minmax(0, 1fr)); gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha-fraca); }
.cb-chave-linha.topo span { font-size: 11px; font-weight: 700; color: var(--suave); text-align: center; line-height: 1.2; }
.cb-chave-linha b { font-size: 14px; }
.cb-chave-linha [role="cell"] { display: flex; justify-content: center; }
.cb-chave { min-height: 34px; min-width: 52px; border-radius: 999px; border: 1px solid var(--borda-btn); background: transparent; color: var(--suave); font-size: 12px; font-weight: 700; }
.cb-chave.abre { background: var(--leo-chip); border-color: var(--leo-borda); color: var(--leo-claro); }
@media (max-width: 820px) {
  .cb-acoes .btn.primario { min-height: 38px; padding: 0 14px; }
  .cb-chave-linha { grid-template-columns: minmax(56px, 1fr) repeat(4, minmax(0, 1fr)); gap: 3px; }
  .cb-chave { min-width: 0; width: 100%; padding: 0 2px; font-size: 11px; }
}
.pagina.cheia.cerebro .cerebro-corpo .encaixa > .cb-busca, .pagina.cheia.cerebro .cerebro-corpo .encaixa > .seg { flex: none; }

/* ---------- IA da equipe (048) ---------- */
.ia-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ia-corpo .cartao { gap: 12px; }
.ia-linha { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha-fraca); }
.ia-linha:last-child { border-bottom: none; }
.ia-linha .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ia-linha select { width: auto; height: 38px; padding: 0 10px; font-size: 13px; }
.ia-teto { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--claro); }
.ia-teto input.campo { width: 110px; height: 38px; }
@media (max-width: 980px) { .ia-corpo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) {
  .pagina.cheia.ia { display: flex; flex-direction: column; }
  .pagina.cheia.ia .cabeca p, .ia .ia-desde, .ia .ia-nota { display: none; }
  .ia-corpo { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; align-self: stretch; }
  .ia-corpo > .cartao { width: 100%; }
  .ia-corpo .cartao { padding: 14px; gap: 8px; }
  .ia-corpo .ia-equipe { flex: 1 1 0; min-height: 0; overflow: hidden; }
  .ia-lista { flex: 1 1 0; min-height: 0; overflow: hidden; }
  .ia-linha { padding: 8px 0; }
}


/* ===================== TETH · marca F (02/11/2026) =====================
   O Hub com o mesmo visual da TETH (skill teth-design, versão F): preto, a luz das horas no fundo, vidro,
   Figtree, botão azul chapado em pílula. "leo" = o azul de ação; "bia" = o coral do que precisa do dono.
   Leve: nada de backdrop-filter em tela que rola; a luz muda devagar (js/luz.js) e para enquanto a pessoa rola. */
:root {
  --fundo: #000; --lado: rgba(10,10,12,.92); --caixa: #0E0E11; --caixa-alta: #16161A; --campo: #1A1A1F;
  --linha: rgba(236,236,232,.10); --linha-fraca: rgba(236,236,232,.06); --borda-btn: rgba(236,236,232,.22);
  --texto: #ECECE8; --suave: #9A9C9F; --apagado: #6E7074; --claro: #D6D6D2;
  --leo: #0071E3; --leo-claro: #2B8AF0; --leo-fundo: rgba(0,113,227,.12); --leo-borda: rgba(0,113,227,.4); --leo-chip: rgba(0,113,227,.18); --leo-texto: #8FB8FF; --sobre-leo: #FFFFFF;
  --bia: #FF6F61; --bia-claro: #FF9A8F; --bia-fundo: rgba(255,111,97,.10); --bia-borda: rgba(255,111,97,.32); --bia-chip: rgba(255,111,97,.16); --bia-texto: #FFB4AB; --sobre-bia: #FFFFFF;
  --creme: #ECECE8; --dourado: #9A9C9F; --btn-grad: #0071E3;
  --cartao-grad: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); --fio: inset 0 1px 0 rgba(255,255,255,.14);
  --vidro: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  --vidro-sombra: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.07), 0 30px 70px -40px rgba(0,0,0,.9), 0 0 80px -40px hsl(var(--hue) 85% 55% / .35);
  --titulo: 'Figtree', system-ui, sans-serif; --fonte: 'Figtree', system-ui, sans-serif; --mono: 'Figtree', system-ui, sans-serif;
  --hue: 250;
}
body { background: #000; }
body::before { content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 45% 40% at 70% 18%, hsl(var(--hue) 85% 55% / .20), hsl(var(--hue) 85% 55% / .05) 45%, transparent 72%); }
h1, h2, h3 { font-family: var(--titulo); letter-spacing: -.015em; }
.cabeca h1, .cv-lista-topo h1, .login-caixa h1, .criar-empresa h1 { font-weight: 800; font-stretch: normal; text-transform: uppercase; line-height: 1; letter-spacing: -.015em; }
.pr-base b { font-stretch: normal; }
.marca { font-family: var(--titulo); font-weight: 800; letter-spacing: .16em; }
/* botões: pílula; o principal é azul chapado */
.btn { border-radius: 999px; border-color: var(--borda-btn); }
.btn.pequeno { border-radius: 999px; }
.btn.primario, .btn.coral { background: var(--leo); color: #fff; border-color: transparent; box-shadow: none; }
.btn.primario:hover, .btn.coral:hover { background: #0A7CF0; color: #fff; }
.btn.claro { background: #ECECE8; color: #000; }
a { color: #2997FF; } a:hover { color: #5EB0FF; }
.pilula button[aria-pressed="true"], .seg button[aria-pressed="true"] { background: rgba(255,255,255,.92); color: #000; border-color: transparent; }
.cont { background: var(--bia); color: #fff; }
/* vidro nos painéis e cartões */
.caixa, .login-caixa, .tesser-card { background: var(--vidro); border: 0; box-shadow: var(--vidro-sombra); }
input.campo, textarea.campo, select.campo, .login-caixa input { background: rgba(255,255,255,.05); border-color: rgba(236,236,232,.12); }
input.campo:focus, textarea.campo:focus, .login-caixa input:focus { border-color: #3D8BFF; outline: none; }
:focus-visible { outline: 2px solid #3D8BFF; outline-offset: 2px; }
.lado { background: rgba(8,8,10,.94); border-right: 1px solid var(--linha-fraca); }
.aviso { background: #ECECE8; color: #000; }
.aviso.ruim { background: var(--bia); color: #fff; }
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.palavra-marca .mt { letter-spacing: .02em; background: linear-gradient(180deg, #FFFFFF 0%, #ECEEF1 36%, #AEB4BC 52%, #D9DCE1 68%, #8C939C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* o prédio na marca F: luz branca no andar escolhido e a luz das horas atrás do prédio */
.pr-andar.atual .pr-janela { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 2px rgba(255,255,255,.9), 0 0 24px -4px hsl(var(--hue) 85% 62% / .6) !important; }
.emp-palco { background: radial-gradient(ellipse 55% 60% at 60% 70%, hsl(var(--hue) 80% 50% / .16), transparent 70%), #050506; }
/* 04/11: a conversa com o Leo em vidro azul (a cor dele), as mensagens do dono neutras */
.balao { background: linear-gradient(180deg, rgba(77,154,241,.13), rgba(77,154,241,.05)); border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(77,154,241,.14); }
.balao.meu { background: var(--campo); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.balao.decisao { background: var(--leo-fundo); box-shadow: inset 0 0 0 1px var(--leo-borda); }
/* 04/11: o número do Leo com Trocar e Remover */
.leo-zap-ok { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.leo-zap-acoes { display: flex; gap: 6px; }
/* 04/11: o topo da conversa arrumado. Linha 1: rosto, nome, situação e de quem é; linha 2: os botões, todos do mesmo tamanho */
.cv-topo { row-gap: 10px; }
.cv-topo .txt { flex: 1 1 calc(100% - 140px); min-width: 0; }
.cv-topo .txt > b { white-space: nowrap; }
.cv-topo .sit, .cv-topo .cv-dig { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-de { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.cv-de > .mini { flex: none; }
.cv-de-bt { align-items: center; gap: 3px; color: var(--suave); font-size: 12px; }
.cv-topo > .btn { min-height: 34px; padding: 0 12px; font-size: 13px; gap: 6px; }
.cv-topo > .btn .rosto, .cv-topo > .btn img { width: 20px; height: 20px; }
.cv-topo > .voltar { order: -1; }
@media (max-width: 820px) {
  .cv-topo .so-largo { display: none; }
  .cv-topo .txt { flex-basis: calc(100% - 160px); }
  .cv-topo > .btn { min-height: 32px; padding: 0 10px; }
}

/* ===================== 04/11 · jeito Apple (o Lucas pediu) =====================
   Vidro CHAPADO: superfícies em cinza translúcido, sem degradê, sem sombra, sem borda brilhando.
   Destaques em azul chapado. A luz das horas no fundo continua. Só visual: nada de layout ou funcionamento. */
:root {
  --vidro: rgba(255,255,255,.065); --vidro-sombra: none;
  --cartao-grad: rgba(255,255,255,.065); --fio: none;
  --azul-apple: #0A84FF; --leo-fundo: rgba(10,132,255,.13); --leo-borda: rgba(10,132,255,.35); --leo-claro: #0A84FF;
}
.caixa, .cartao, .ficha, .numeros, .login-caixa, .tesser-card, .dinheiro-semana {
  background: rgba(255,255,255,.065); border: 0; box-shadow: none; }
.caixa .caixa, .caixa .cartao, .ficha .caixa { background: rgba(255,255,255,.06); }
.cartao.leo, .dinheiro-semana.leo { background: rgba(10,132,255,.13); border: 0; }
.cartao.bia { background: rgba(255,111,97,.11); border: 0; }
.cartao.ambar { background: rgba(245,181,68,.10); border: 0; }
.tesser-card { background: rgba(255,255,255,.065); }
.tesser-card:hover { background: rgba(255,255,255,.10); }
.nav[aria-current="page"] { background: rgba(255,255,255,.10); box-shadow: none; }
.balao { background: rgba(255,255,255,.08); box-shadow: none; }
.balao.meu { background: rgba(10,132,255,.22); box-shadow: none; }
.balao.decisao { background: rgba(10,132,255,.13); box-shadow: none; }
.cv-chat { background: transparent; }
.msg .bolha { border: 0; background: rgba(255,255,255,.08); }
.msg.bia .bolha, .msg.auto .bolha { background: rgba(255,255,255,.14); border: 0; }
.loja { background: rgba(255,255,255,.065); border: 0; }
input.campo, textarea.campo, select.campo, .login-caixa input, .leo-linha input { background: rgba(255,255,255,.07); border: 1px solid transparent; }
input.campo:focus, textarea.campo:focus, .login-caixa input:focus, .leo-linha input:focus { border-color: var(--azul-apple); }
.btn.primario, .btn.coral { background: #0071E3; box-shadow: none; }
.btn:not(.primario):not(.coral):not(.claro) { background: rgba(255,255,255,.08); border-color: transparent; }
.btn:not(.primario):not(.coral):not(.claro):hover { background: rgba(255,255,255,.13); }
.lado { border-right: 0; }
/* jeito Apple: o resto das caixas com contorno vira chapado; botões de escolha viram pílulas preenchidas */
.loja-caixa, .setor-nums > div, .linhas, .cv-chamado, .ps-codigo, .canal-linha, .hist, .ensinar, .soon > div, .setor-bt {
  background: rgba(255,255,255,.065); border-color: transparent; box-shadow: none; }
.ensinar { background: rgba(10,132,255,.10); }
.setor-bt[aria-current="true"] { background: rgba(255,255,255,.92); color: #000; }
.seg button, .pilula button, .paginas button { background: rgba(255,255,255,.08); border-color: transparent; }
.seg button[aria-pressed="true"], .pilula button[aria-pressed="true"] { background: rgba(255,255,255,.92); color: #000; }
.paginas button:disabled { background: rgba(255,255,255,.04); }
.balao.decisao { border: 0; }

/* ===================== 04/11 · ajustes dentro do Hub (js/ajustes.js) =====================
   Folhas no jeito dos Ajustes do iPhone: listas agrupadas, linhas com ›, chaves de liga e desliga. */
.ajuste { width: min(640px, 100%); }
.aj-corpo { display: flex; flex-direction: column; gap: 12px; }
.aj-corpo > .btn.pequeno { align-self: flex-start; }
.aj-lista { display: flex; flex-direction: column; background: rgba(255,255,255,.065); border-radius: 14px; overflow: hidden; }
.aj-lista > * + * { border-top: 1px solid var(--linha-fraca); }
.aj-linha { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 14px; border: 0; background: transparent; color: var(--texto); text-align: left; font: inherit; cursor: pointer; }
button.aj-linha:hover { background: rgba(255,255,255,.04); }
.aj-linha .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aj-linha .txt b { font-size: 15px; font-weight: 600; }
.aj-linha .txt .mini { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj-linha .seta { color: var(--apagado); font-size: 22px; line-height: 1; }
.aj-op, .aj-dia { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; min-height: 52px; flex-wrap: wrap; }
.aj-op > span:first-child { font-size: 15px; font-weight: 600; }
.aj-op .campo { max-width: 260px; flex: 1 1 160px; }
.aj-op .seg button { padding: 6px 12px; font-size: 13px; }
.aj-horas { display: flex; align-items: center; gap: 8px; }
.aj-horas .campo { width: 112px; padding: 6px 10px; }
.aj-horas[hidden], .aj-fechado[hidden] { display: none; }
.aj-chave { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; font-weight: 600; position: relative; }
.aj-chave input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.aj-chave i { flex: none; width: 46px; height: 28px; border-radius: 999px; background: rgba(255,255,255,.16); position: relative; transition: background .2s; }
.aj-chave i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.aj-chave input:checked + i { background: var(--ok); }
.aj-chave input:checked + i::after { transform: translateX(18px); }
.aj-chave input:focus-visible + i { outline: 2px solid #3D8BFF; outline-offset: 2px; }
.aj-form, .aj-coluna { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.aj-form[hidden], .aj-coluna[hidden], .aj-lista[hidden] { display: none; }
.aj-campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--suave); font-weight: 600; }
.aj-campo .campo { width: 100%; color: var(--texto); font-weight: 400; }
.aj-campo textarea.campo { resize: none; line-height: 1.45; }
.aj-grande { min-height: 240px; }
.aj-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aj-quatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.aj-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aj-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aj-topo .seg { flex: 1 1 auto; }
.aj-pag { flex: 1 1 auto; min-height: 0; }
.aj-resumo { display: flex; gap: 10px; }
.aj-resumo > div { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.065); }
.aj-resumo b { font-size: 24px; font-weight: 700; }
.aj-resumo span { font-size: 13px; color: var(--suave); }
.aj-resumo .ruim b { color: var(--ambar, #F5B544); }
.aj-duvida { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: rgba(255,111,97,.08); }
.aj-perigo { color: var(--bia-claro) !important; }
.aj-link { align-self: flex-start; border: 0; background: none; color: #2997FF; font: inherit; font-size: 14px; padding: 4px 0; cursor: pointer; }
.aj-arquivo { position: relative; align-self: flex-start; overflow: hidden; }
.aj-arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
button.pr-vivo { border: 0; font: inherit; color: inherit; cursor: pointer; }
button.pr-vivo:hover { background: rgba(0,0,0,.75); }
#aj-bia .aj-lista { margin-bottom: 4px; }
@media (max-width: 640px) {
  .aj-duas { grid-template-columns: 1fr; }
  .aj-quatro { grid-template-columns: 1fr 1fr; }
  .aj-op { flex-direction: column; align-items: stretch; gap: 6px; }
  .aj-op .campo { max-width: none; }
  .aj-grande { min-height: 180px; }
}
.aj-corpo > *:not(.aj-pag), .aj-form > *, .aj-coluna > * { flex-shrink: 0; }
.aj-dia { min-height: 46px; padding: 4px 14px; }
.aj-duvida textarea { resize: none; }
@media (max-width: 640px) {
  .aj-dia { flex-wrap: nowrap; padding: 4px 10px; gap: 6px; }
  .aj-dia .aj-chave { gap: 8px; font-size: 14px; }
  .aj-chave i { width: 40px; height: 24px; } .aj-chave i::after { width: 20px; height: 20px; } .aj-chave input:checked + i::after { transform: translateX(16px); }
  .aj-horas { gap: 4px; } .aj-horas > .suave { display: none; }
  .aj-horas .campo { width: 88px; padding: 6px 4px; font-size: 13px; }
}
textarea.campo.aj-grande { min-height: 240px; }
@media (max-width: 640px) {
  textarea.campo.aj-grande { min-height: 200px; }
  .aj-op .campo { flex: none; }
  .aj-op { gap: 4px; padding: 6px 12px; min-height: 0; }
  .ajuste .folha-topo .mini { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* 04/11 · a ficha do CRM automático (051) no painel do cliente em Conversas */
.cv-ficha { gap: 6px; }
.cv-ficha[hidden] { display: none; }
.cv-ficha-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cv-ficha-tags span { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--claro); }
.cv-ficha-prox { font-size: 13px; font-weight: 600; color: #0A84FF; }
.cv-ficha-vencida { color: var(--bia-claro); font-weight: 600; }
.cv-ficha-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cv-ficha-reler { border: 0; background: none; color: #2997FF; font: inherit; font-size: 12px; font-weight: 600; padding: 2px 0; cursor: pointer; }
.cv-ficha-reler:disabled { opacity: .5; }
/* 04/11 · limpeza: contagem do setor legível; "Esquecer um cliente" recolhido; ⋯ das mensagens só no passar do mouse */
.setor-bt i { background: var(--bia); color: #fff; }
.cb-esquecer summary { cursor: pointer; list-style: none; }
.cb-esquecer summary::-webkit-details-marker { display: none; }
.cb-esquecer:not([open]) { padding-block: 12px; }
@media (hover: hover) { .cv-citar { opacity: 0; } }
@media (hover: none) { .cv-citar { opacity: .45; width: 26px; height: 26px; } }
.cv-busca-linha { flex-wrap: wrap; }
.cv-busca-linha:not(.abre) > .cv-extra { display: none; }
.cv-busca-linha.abre > label:first-child { flex-basis: calc(100% - 90px); }
.cv-busca-linha.abre > .cv-extra { flex: 1 1 0; min-width: 0; }
.cv-busca-linha.abre select { max-width: none; width: 100%; }
.cv-filtrar[aria-expanded="true"] { background: rgba(255,255,255,.92) !important; color: #000 !important; }
.cv-mais { font-size: 18px; line-height: 1; min-width: 36px; }
.sala-leo-bt i { background: var(--bia) !important; color: #fff !important; }
.cv-busca-linha:not(.abre) > label:first-child { flex: 1 1 0 !important; flex-basis: 0 !important; }
.cv-busca-linha:not(.abre) { flex-wrap: nowrap; }
.setor-ic i { background: var(--bia) !important; color: #fff !important; }

/* ===================== 04/11 · o prédio com presença (o Lucas: "a empresa ficou ofuscada") =====================
   Céu de noite com estrelas, fachada em grafite com a quina acesa, luz em volta do prédio
   e os tessers vivos: parados passeiam pela sala, trabalhando balançam, sem WhatsApp cochilam. */
.emp-palco { background:
  radial-gradient(ellipse 70% 45% at 72% 78%, hsl(var(--hue) 85% 58% / .22), transparent 70%),
  linear-gradient(180deg, hsl(var(--hue) 45% 9%) 0%, #07070B 55%, #050506 100%); }
.pr-palco::before { content: ''; position: absolute; inset: 0 0 35% 0; pointer-events: none; z-index: 0; opacity: .8;
  background-image:
    radial-gradient(1.2px 1.2px at 18% 14%, #fff, transparent), radial-gradient(1px 1px at 42% 8%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.3px 1.3px at 66% 22%, #fff, transparent), radial-gradient(1px 1px at 84% 11%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 30% 30%, rgba(255,255,255,.5), transparent), radial-gradient(1.1px 1.1px at 55% 40%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 92% 34%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 8% 44%, rgba(255,255,255,.45), transparent);
  animation: pr-ceu 9s ease-in-out infinite; }
@keyframes pr-ceu { 50% { opacity: .45; } }
.pr-mundo, .pr-notas { z-index: 1; }
.pr-notas { z-index: 4; }
/* fachada: grafite, a quina da esquerda pega luz, o lado em sombra suave */
.pr-nucleo { background: #0B0B0E; box-shadow: 0 0 140px 10px hsl(var(--hue) 85% 55% / .16); }
.pr-nucleo-lado { box-shadow: none; }
.pr-frente { background: linear-gradient(90deg, #2A2A30 0, #1E1E23 6px, #17171B 60%, #121215 100%); border-top: 1px solid rgba(255,255,255,.22); box-shadow: 0 4px 0 #08080A; }
.pr-lado { background: linear-gradient(180deg, #121216, #0C0C0F); border-top-color: rgba(255,255,255,.18); }
.pr-teto { background: #222227; border-color: rgba(255,255,255,.42); }
.pr-base { background: #17171B; }
.pr-base b { color: #FFFFFF; text-shadow: 0 0 14px hsl(var(--hue) 90% 70% / .9); }
/* a janela: um reflexo de vidro fixo, bem leve */
.pr-janela::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0 52%, rgba(255,255,255,.16) 52% 60%, rgba(255,255,255,0) 60% 66%, rgba(255,255,255,.08) 66% 69%, rgba(255,255,255,0) 69%); }
.pr-andar.apagado .pr-janela::after { opacity: .3; }
.pr-brilho { position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; }
/* a cidade: algumas janelas acendem e apagam devagar */
.pr-pisca { animation: pr-pisca 23s steps(1) infinite; }
@keyframes pr-pisca { 0%, 62% { opacity: 1; } 63%, 81% { opacity: 0; } 82% { opacity: 1; } }
.pr-estrela { animation: pr-estrela 5s ease-in-out infinite; }
@keyframes pr-estrela { 50% { opacity: .25; } }
/* os tessers: cada andar com o seu ritmo (--i) */
.pr-tesser { transform-origin: 50% 100%; will-change: transform; }
.pr-tesser.parado { animation: pr-passeio 16s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -5.3s); }
.pr-tesser.trab { animation: pr-trab 1.9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.45s); }
.pr-tesser.dorme { animation: pr-cochilo 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.2s); }
/* passeio: respira parado, anda um pouco, olha, volta (com pulinhos de passo) */
@keyframes pr-passeio {
  0%, 14% { transform: translate(0, 0); }
  7% { transform: translate(0, -2px); }
  18% { transform: translate(5px, -3px); } 22% { transform: translate(10px, 0); } 26% { transform: translate(15px, -3px); } 30% { transform: translate(20px, 0); }
  30.01%, 46% { transform: translate(20px, 0); }
  38% { transform: translate(20px, -2px) rotate(-4deg); } 42% { transform: translate(20px, -1px) rotate(3deg); }
  50% { transform: translate(15px, -3px); } 54% { transform: translate(10px, 0); } 58% { transform: translate(5px, -3px); } 62% { transform: translate(0, 0); }
  70% { transform: translate(0, -2px); } 78% { transform: translate(0, 0); }
  84% { transform: translate(0, -7px) scaleY(1.03); } 88% { transform: translate(0, 0) scaleY(.94); } 91%, 100% { transform: translate(0, 0); } }
@keyframes pr-trab { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3px) rotate(-2deg); } 75% { transform: translateY(-1px) rotate(2deg); } }
@keyframes pr-cochilo { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.95) translateY(1px); } }
@media (prefers-reduced-motion: reduce) { .pr-palco::before { animation: none !important; } }
@media (min-width: 1181px) {
  .pagina.cheia.sala-meio { grid-template-columns: minmax(340px, 45%) minmax(0, 1fr); }
  /* a lua, no céu alto do computador */
  .pr-palco::after { content: ''; position: absolute; right: 16%; top: 13%; width: 34px; height: 34px; border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle at 38% 38%, #F4F6FB, #C9CED8 70%); opacity: .82;
    box-shadow: 0 0 40px 8px rgba(220,228,255,.14), 0 0 120px 40px hsl(var(--hue) 80% 60% / .10); }
}

/* ===================== 04/11 · o céu acompanha a loja: aberta é dia, na beirada do horário entardece, fechada é noite ===================== */
.emp-palco.ceu-dia { background: linear-gradient(180deg, #2C6FD6 0%, #5B98E8 42%, #9DC4EE 74%, #CFE2F4 100%); }
.emp-palco.ceu-tarde { background: linear-gradient(180deg, #23285E 0%, #5B3F8C 34%, #C2607F 64%, #F2A36A 88%, #F7C089 100%); }
.ceu-dia::before, .ceu-tarde::before, .ceu-dia .pr-estrelas, .ceu-tarde .pr-estrelas { display: none; }
.ceu-dia .pr-c1 { fill: #94B6DE; } .ceu-dia .pr-c2 { fill: #6F91BE; } .ceu-dia .pr-c3 { fill: #4A6488; }
.ceu-dia .pr-jan { opacity: 0; }
.ceu-dia .pr-chao-r, .ceu-tarde .pr-chao-r { fill: url(#pr-chao-dia); }
.ceu-tarde .pr-c1 { fill: #9A6390; } .ceu-tarde .pr-c2 { fill: #6A4275; } .ceu-tarde .pr-c3 { fill: #3D2A55; }
.ceu-tarde .pr-jan { fill: #FFE2B8; opacity: .8; }
.ceu-dia .pr-nucleo { box-shadow: 0 30px 80px -20px rgba(10,30,70,.45); }
.ceu-tarde .pr-nucleo { box-shadow: 0 0 120px 10px rgba(255,170,120,.18); }
/* as anotações sobre o céu claro: sombra para ler bem */
.ceu-dia .pr-nota b, .ceu-dia .pr-nota small, .ceu-tarde .pr-nota b, .ceu-tarde .pr-nota small { color: #fff; text-shadow: 0 1px 2px rgba(0,20,60,.55), 0 0 12px rgba(0,20,60,.35); }
.ceu-dia .pr-espera, .ceu-tarde .pr-espera { color: #FFE1DC !important; }
.ceu-dia .pr-obra-tit, .ceu-dia .pr-obra-nome, .ceu-tarde .pr-obra-tit { color: rgba(255,255,255,.85) !important; }
.ceu-dia .pr-guindaste g, .ceu-dia .pr-obra-frente, .ceu-dia .pr-obra-lado, .ceu-dia .pr-obra-teto { stroke-opacity: .6; border-color: rgba(255,255,255,.55); }
.ceu-dia .pr-guindaste g { stroke-opacity: .7; }
@media (min-width: 1181px) {
  /* o sol de dia, o sol baixo no fim da tarde */
  .ceu-dia.pr-palco::after { background: radial-gradient(circle, #FFFDF4 0 45%, #FFF1C2 70%); opacity: 1; width: 40px; height: 40px;
    box-shadow: 0 0 50px 16px rgba(255,244,200,.55), 0 0 160px 60px rgba(255,240,190,.25); }
  .ceu-tarde.pr-palco::after { top: 24%; right: auto; left: 22%; width: 46px; height: 46px; background: radial-gradient(circle, #FFE6B0 0 40%, #FFB070 75%); opacity: .95;
    box-shadow: 0 0 60px 20px rgba(255,170,100,.45); }
}
/* os tessers seguem vivos mesmo com "menos animação" no sistema: é um passeio lento, sem fundo se mexendo */
@media (prefers-reduced-motion: reduce) {
  .pr-palco .pr-andar .pr-tesser.parado { animation: pr-passeio 16s ease-in-out infinite !important; animation-delay: calc(var(--i, 0) * -5.3s) !important; }
  .pr-palco .pr-andar .pr-tesser.trab { animation: pr-trab 1.9s ease-in-out infinite !important; animation-delay: calc(var(--i, 0) * -.45s) !important; }
  .pr-palco .pr-andar .pr-tesser.dorme { animation: pr-cochilo 5s ease-in-out infinite !important; }
}
/* 04/11 · conserto: a luz grande atrás do prédio virava um retângulo ao passar o mouse (sombra enorme em camada).
   Agora a luz vem só do desenho (SVG); e no dia uma faixa escura suave atrás das anotações deixa a letra firme. */
.pr-nucleo, .ceu-dia .pr-nucleo, .ceu-tarde .pr-nucleo { box-shadow: none !important; }
.pr-tesser { will-change: auto; }
.ceu-dia .pr-notas, .ceu-tarde .pr-notas { background: linear-gradient(90deg, rgba(6,18,42,.55) 0, rgba(6,18,42,.32) 30%, rgba(6,18,42,0) 52%); }
.ceu-dia .pr-nota small, .ceu-tarde .pr-nota small { color: rgba(255,255,255,.94); }
.ceu-dia .pr-lado { background: linear-gradient(180deg, #1C2029, #14171D); }
/* 05/11 · ligar e desligar o tesser (052): o interruptor no topo da ficha */
.folha-ligar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 6px; border-radius: 14px; background: rgba(255,255,255,.05); }
.folha-ligar .mini { flex: 1 1 200px; }
/* 05/11 · topo de Conversas simples: título, "+ Nova" e ⋯ (som, avisos, canais, sair) numa linha */
.cv-lista-topo { position: relative; }
.cv-meta { flex-wrap: nowrap; }
.cv-meta h1 { flex: 1 1 auto; min-width: 0; }
.cv-meta .cv-nova-bt { flex: none; }
.cv-lista-mais { flex: none; font-size: 18px; line-height: 1; min-width: 36px; }
.cv-lista-topo .cv-menu { z-index: 40; }
/* 05/11 · Pessoas: um cartão só para chamar alguém; e-mail fica escondido; linhas quebram no celular */
.ps-chamar { display: grid; gap: 10px; }
.ps-chamar .ps-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.link-btn { background: none; border: 0; padding: 0; color: #0A84FF; font: inherit; cursor: pointer; text-decoration: none; }
.link-btn:hover { text-decoration: underline; }
.ps-k { display: block; margin: 6px 4px 2px; }
.pessoa .txt { min-width: 0; }
@media (max-width: 720px) {
  .pessoa { flex-wrap: wrap; }
  .pessoa .txt { flex: 1 1 calc(100% - 54px); }
  .pessoa .txt b, .pessoa .txt .mini { white-space: normal; overflow: visible; text-overflow: clip; }
  .pessoa select, .pessoa .btn, .pessoa .chip { margin-left: 50px; }
  .pessoa select ~ .btn, .pessoa .chip ~ select { margin-left: 0; }
}
/* 05/11 · Canais no celular: o nome e a explicação inteiros; os botões descem para a linha de baixo */
@media (max-width: 720px) {
  .canais .canal-linha { flex-wrap: wrap; }
  .canais .canal-linha > .txt { flex: 1 1 calc(100% - 56px); min-width: 0; }
  .canais .canal-linha > .txt b, .canais .canal-linha > .txt .mini { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .canais .canal-linha > .btn, .canais .canal-linha > .chip { margin-left: 50px; }
  .canais .canal-linha > .chip ~ .btn { margin-left: 0; }
}
/* 05/11 · os 4 filtros de Conversas numa linha só, também no celular */
@media (max-width: 720px) {
  #cv-filtros { flex-wrap: nowrap; gap: 5px; }
  #cv-filtros button { padding: 7px 10px; font-size: 13px; white-space: nowrap; flex: none; }
  #cv-filtros button .cont, #cv-filtros button b { font-size: 11px; }
}
/* 05/11 · botões só com ícone (filtrar, nova conversa, voltar, dados do cliente): redondos, sem texto para ler */
.btn.cv-ic { width: 38px; min-width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.btn.cv-ic svg { display: block; }
.cv-busca-linha .cv-filtrar.cv-ic { height: 44px; width: 44px; }
.btn.cv-ic.voltar { display: none; }
@media (max-width: 820px) { .btn.cv-ic.voltar { display: inline-flex; } }
/* 05/11 · Números anteriores: o interruptor fica na mesma linha (no celular também) */
.canais .canal-linha:has(> .aj-chave) { flex-wrap: nowrap; }
.canais .canal-linha:has(> .aj-chave) > .txt { flex: 1 1 0; }
.canais .canal-linha > .aj-chave { flex: none; margin-left: auto; }
@media (max-width: 720px) { .canais .canal-linha > .aj-chave .so-largo { display: none; } }
.cv-menu .cv-menu-busca { margin: 2px 0 6px; padding: 8px 10px; font-size: 14px; }
.cv-menu .cv-menu-mais { display: block; padding: 4px 10px 2px; }
.ps-busca { display: block; margin: 0 0 8px; }
.ps-busca .campo { width: 100%; }
/* 05/11 · conferência: os 4 filtros numa linha em todos os tamanhos (no computador a coluna da lista é estreita) */
#cv-filtros { flex-wrap: nowrap; gap: 5px; }
#cv-filtros button { padding: 0 10px; font-size: 13px; white-space: nowrap; flex: none; }
@media (max-width: 380px) { #cv-filtros { gap: 4px; } #cv-filtros button { padding: 0 7px; font-size: 12px; min-height: 32px; } }
/* a coluna da lista um pouco mais larga no computador, e os filtros compactos para caber */
@media (min-width: 1181px) { .conversas { grid-template-columns: 360px minmax(0, 1fr) 300px; } }
@media (min-width: 821px) and (max-width: 1180px) { .conversas { grid-template-columns: 350px minmax(0, 1fr); } }
@media (min-width: 821px) { #cv-filtros { gap: 4px; } #cv-filtros button { padding: 0 7px; font-size: 12px; min-height: 32px; } }
@media (max-width: 340px) { #cv-filtros button { padding: 0 5px; font-size: 11.5px; } }

/* ===================== 05/11 · A conversa da equipe (055): no lugar do Teams, dentro de Conversas ===================== */
.conversas.eq-chat { grid-template-columns: 360px minmax(0, 1fr); }
@media (min-width: 821px) and (max-width: 1180px) { .conversas.eq-chat { grid-template-columns: 330px minmax(0, 1fr); } }
@media (max-width: 820px) { .conversas.eq-chat { grid-template-columns: minmax(0, 1fr); } }
.eq-modo { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.06); }
.eq-modo > * { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border-radius: 999px; border: 0;
  background: transparent; color: var(--suave); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.eq-modo > [aria-selected="true"] { background: rgba(255,255,255,.92); color: #000; }
.eq-modo .cont, .cv-txt .l1 .cont.cont, .eq-item .cont { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #0A84FF; color: #fff; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.eq-k { display: block; padding: 14px 18px 6px; }
.eq-dica { padding: 10px 18px; }
.eq-av { --etq: #5A6170; flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--etq) 26%, #141418); border: 2px solid var(--etq); color: #fff; font-size: 13px; font-weight: 800; }
.eq-av.canal, .eq-av.grupo { border: 0; border-radius: 12px; background: rgba(255,255,255,.08); color: var(--claro); }
.eq-av.mini { width: 28px; height: 28px; font-size: 10px; border-width: 1.5px; }
.eq-item .l1 { align-items: center; }
.eq-item .l1 .cont { margin-left: 6px; }
.eq-arroba { color: #0A84FF; font-weight: 900; margin-left: 6px; }
.cv-topo .eq-av { width: 38px; height: 38px; }
.cv-topo .txt { flex: 1 1 auto; min-width: 0; }
.cv-topo .txt .sit { font-size: 12px; color: var(--suave); }
.eq-msg .eq-quem { font-size: 12px; font-weight: 700; color: var(--claro); padding-left: 4px; }
.msg.eq-msg.eq-eu { align-self: flex-end; flex-direction: row-reverse; }
.msg.eq-msg.eq-eu .corpo { align-items: flex-end; }
.msg.eq-msg.eq-eu .bolha { background: #0A84FF; border-color: #0A84FF; color: #fff; border-radius: 16px 16px 6px 16px; }
.msg.eq-msg.eq-eu .bolha a { color: #fff; }
.msg.eq-msg .bolha.fixada { box-shadow: inset 0 0 0 2px rgba(255, 214, 10, .7); }
.eq-arroba-txt { color: #64B5FF; }
.msg.eq-msg.eq-eu .eq-arroba-txt { color: #fff; text-decoration: underline; }
.eq-cliente { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.25); color: inherit; text-decoration: none; }
.eq-cliente:hover { background: rgba(0,0,0,.4); }
.eq-cliente-ic { font-size: 20px; }
.eq-cliente span { display: flex; flex-direction: column; }
.eq-cliente small { opacity: .8; font-size: 12px; }
.eq-midia { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; padding: 8px 12px; background: rgba(0,0,0,.22); color: inherit; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 4px; }
.eq-midia-el { display: block; max-width: min(320px, 100%); border-radius: 12px; margin-bottom: 4px; }
.eq-midia-el.imagem { max-height: 320px; object-fit: cover; cursor: zoom-in; }
.eq-midia-el.audio { width: 260px; max-width: 100%; }
.eq-fixada { display: flex; align-items: center; gap: 10px; padding: 8px 22px; background: rgba(255, 214, 10, .10); border-bottom: 1px solid rgba(255, 214, 10, .25); font-size: 13px; }
.eq-fixada-txt { flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: 0; color: var(--texto); font: inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-vazio { margin: auto; text-align: center; padding: 30px; max-width: 360px; }
.eq-form { display: grid; gap: 12px; padding: 18px 22px; max-width: 560px; }
.eq-gente { display: grid; gap: 4px; max-height: none; }
.eq-pessoa { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); cursor: pointer; }
.eq-pessoa input { width: 18px; height: 18px; }
.cv-prontas [data-em] { display: flex; gap: 10px; align-items: center; text-align: left; background: transparent; border: 0; border-radius: 10px; padding: 7px 8px; color: var(--claro); font: inherit; font-size: 13px; cursor: pointer; }
.cv-prontas [data-em]:hover { background: var(--linha-fraca); }
.eq-reacoes-linha { display: flex; gap: 8px; font-size: 18px; }
#eq-gravar.gravando { background: #FF453A; color: #fff; }
.cv-meio.arrastando { outline: 2px dashed #0A84FF; outline-offset: -8px; }
.cv-citando:not([hidden]) { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 13px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.06); }
.reacao.minha { outline: 1px solid #0A84FF; }

@media (max-width: 820px) { #eq-emoji-bt { display: none; } #eq-enviar { padding: 0 14px; } }

/* ===================== 05/11 · A equipe por inteiro (056): foto, situação, tarefas, agenda, grupos, busca ===================== */
/* o rosto de alguém: foto ou iniciais na cor da pessoa; a situação num selo; o ponto verde de "aqui agora" */
.rp { --etq: #5A6170; position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--etq) 26%, #141418); box-shadow: inset 0 0 0 2px var(--etq); color: #fff; font-size: 13px; font-weight: 800; }
.rp img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.rp:has(img) { box-shadow: none; background: #141418; }
.rp.mini { width: 28px; height: 28px; font-size: 10px; }
.rp.p { width: 26px; height: 26px; font-size: 10px; }
.rp.g { width: 96px; height: 96px; font-size: 30px; }
.rp-situ { position: absolute; right: -4px; bottom: -4px; font-size: 13px; line-height: 1; filter: drop-shadow(0 0 2px #000); }
.rp.mini .rp-situ, .rp.p .rp-situ { font-size: 10px; right: -3px; bottom: -3px; }
.rp-on { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #30D158; box-shadow: 0 0 0 2.5px var(--fundo); }
.rp.mini .rp-on, .rp.p .rp-on { width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--fundo); }
.eu.com-foto { padding: 0; overflow: hidden; }
.eu.com-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ponto azul em Conversas: a equipe tem algo para você */
.eq-ponto:not([hidden]) { width: 9px; height: 9px; border-radius: 50%; background: #0A84FF; box-shadow: 0 0 0 2px var(--lado, #000); flex: none; }
.nav { position: relative; }
.nav .eq-ponto { position: absolute; left: 30px; bottom: 8px; }
.aba { position: relative; }
.aba .eq-ponto { position: absolute; top: 2px; left: calc(50% - 20px); }

/* a lista: minha situação e a busca */
.eq-linha2 { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.eq-minha { display: inline-flex; align-items: center; gap: 8px; flex: none; max-width: 52%; min-height: 36px; padding: 0 10px 0 5px; border-radius: 999px;
  border: 1px solid var(--linha); background: rgba(255,255,255,.04); color: var(--claro); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.eq-minha > span:not(.rp):not(.seta) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-minha .seta { color: var(--apagado); font-size: 10px; }
.eq-busca { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--apagado); }
.eq-busca input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--texto); font: inherit; font-size: 14px; outline: none; }
.eq-busca:focus-within { outline: 2px solid var(--leo); outline-offset: 1px; }
.eq-av.agenda { border: 0; border-radius: 12px; background: rgba(10,132,255,.16); color: #64B5FF; }
.eq-item .cont.quente, .cv-txt .l1 .cont.cont.quente { background: #FF453A; }
.ult.digita, .sit .digita { color: #30D158; font-style: italic; }
.eq-achada .ult { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* o topo da sala: tocar no nome abre o perfil ou a lista de gente */
.eq-topo-quem { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px; margin: -4px 0; border-radius: 12px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.eq-topo-quem:hover { background: rgba(255,255,255,.04); }
.eq-topo-quem .txt { display: flex; flex-direction: column; min-width: 0; }
.eq-topo-quem .txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-topo-quem .sit { font-size: 12px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-topo .rp { width: 38px; height: 38px; }

/* mensagens */
.eq-sis { align-self: center; font-size: 12px; color: var(--apagado); background: rgba(255,255,255,.04); border-radius: 999px; padding: 4px 12px; margin: 2px 0; text-align: center; max-width: 90%; }
.msg.eq-msg.junto { margin-top: -4px; }
.msg.eq-msg.junto .eq-av-bt { visibility: hidden; }
.eq-av-bt { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; align-self: flex-end; }
.eq-visto { color: #64B5FF; font-weight: 700; }
.eq-antes { align-self: center; margin: 4px 0 10px; }
.msg.eq-msg.piscar .bolha { animation: eq-piscar 1.6s var(--curva); }
@keyframes eq-piscar { 0%, 40% { box-shadow: 0 0 0 3px rgba(255, 214, 10, .8); } 100% { box-shadow: 0 0 0 0 rgba(255, 214, 10, 0); } }
.citacao[data-ir-msg] { cursor: pointer; }
.bolha.cartao { padding: 6px; min-width: min(280px, 72vw); }
.msg.eq-msg.eq-eu .bolha.cartao { background: #0A3D73; border-color: #0A3D73; }
/* cartão de tarefa (na conversa) e linha de tarefa (na agenda) */
.eq-tarefa, .eq-tf { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.22); }
.eq-tarefa > span, .eq-tf-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.eq-tarefa small, .eq-tf-txt small, .eq-evento small { font-size: 12px; opacity: .8; }
.eq-check { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid currentColor; background: transparent; color: inherit; font-size: 14px; font-weight: 900; cursor: pointer; display: grid; place-items: center; }
.eq-check[aria-pressed="false"] { color: rgba(255,255,255,.55); font-size: 0; }
.eq-check[aria-pressed="false"]:hover:not(:disabled) { font-size: 14px; color: #30D158; }
.eq-check[aria-pressed="true"] { background: #30D158; border-color: #30D158; color: #000; }
.eq-check:disabled { cursor: default; opacity: .5; }
.eq-tarefa.feita b, .eq-tf.feita b { text-decoration: line-through; opacity: .65; }
.eq-tarefa.atrasada small, .eq-tf.atrasada small { color: #FF8A80; opacity: 1; }
.eq-check-x { font-size: 20px; }
/* cartão de compromisso */
.eq-evento { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.22); }
.eq-evento > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.eq-ev-dia { flex: none; width: 46px; height: 50px; border-radius: 10px; background: #fff; color: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-transform: uppercase; line-height: 1.1; }
.eq-ev-dia b { font-size: 20px; }
.eq-evento.tirado { opacity: .55; }
.eq-evento.tirado b { text-decoration: line-through; }
/* foto em tela cheia */
.eq-foto-cheia { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; }
.eq-foto-cheia img { max-width: 100%; max-height: calc(100% - 70px); object-fit: contain; border-radius: 8px; cursor: zoom-out; }
.eq-foto-bts { display: flex; gap: 10px; }

/* folha (janela por cima; no celular sobe de baixo) */
.eq-folha-fundo { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.eq-folha { width: min(460px, 100%); max-height: min(86vh, 760px); display: flex; flex-direction: column; background: var(--caixa-alta); border: 1px solid var(--linha); border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); }
.eq-folha-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 6px 20px; }
.eq-folha-topo b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-folha-corpo { overflow-y: auto; padding: 0 4px 6px; overscroll-behavior: contain; }
.eq-folha-corpo > p { padding: 4px 18px; margin: 0; color: var(--claro); }
.eq-folha .eq-form { max-width: none; padding: 10px 16px 16px; }
.eq-folha textarea.campo { resize: vertical; min-height: 70px; border-radius: 14px; }
@media (max-width: 820px) {
  .eq-folha-fundo { align-items: flex-end; padding: 0; }
  .eq-folha { width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
}
.eq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-bt { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--borda-btn); background: transparent; color: var(--claro); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.chip-bt[aria-pressed="true"], .chip-bt:has(input:checked) { background: rgba(255,255,255,.92); color: #000; border-color: transparent; }
.chip-bt input { position: absolute; opacity: 0; pointer-events: none; }
.eq-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eq-quem { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.eq-quem legend { width: 100%; margin-bottom: 4px; }
.eq-quem label, .eq-check-linha { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.eq-quem input, .eq-check-linha input { width: 18px; height: 18px; }
.eq-gente { max-height: 300px; overflow-y: auto; }
/* perfil */
.eq-perfil { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 18px 18px; }
.eq-perfil-nome { font-size: 20px; margin-top: 6px; }
.eq-perfil-situ { font-size: 14px; color: var(--claro); min-height: 20px; }
.eq-perfil-bts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; padding: 0 16px 16px; }
.eq-perfil .eq-perfil-bts { padding: 0; }
.btn.perigo { background: #FF453A; color: #fff; border-color: transparent; }
.eq-lista-gente { display: grid; gap: 2px; padding: 4px 12px 10px; }
.eq-pessoa-l { display: flex; align-items: center; gap: 8px; }
.eq-pessoa-bt { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: none; border: 0; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.eq-pessoa-bt:hover { background: rgba(255,255,255,.05); }
.eq-pessoa-bt > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* agenda e tarefas */
.eq-ag-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 22px; border-bottom: 1px solid var(--linha-fraca); }
.eq-ag-abas { flex: none; width: auto; min-width: 210px; }
.seg.pequeno button { min-height: 30px; padding: 0 12px; font-size: 12px; }
.eq-semana { display: flex; align-items: center; gap: 6px; }
.eq-ag { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 22px 30px; display: flex; flex-direction: column; gap: 6px; }
.eq-ag-grupo { display: grid; gap: 6px; margin-top: 10px; }
.eq-ag-grupo h3.k { font-size: 11px; margin: 4px 2px; }
.eq-ag-grupo h3.k.quente { color: #FF8A80; }
.eq-tf { background: rgba(255,255,255,.04); border: 1px solid var(--linha-fraca); }
.eq-tf .btn.pequeno { flex: none; }
.eq-ag-dia { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--linha-fraca); }
.eq-ag-dia h3 { font-size: 14px; font-weight: 700; color: var(--claro); display: flex; align-items: center; gap: 8px; }
.eq-ag-dia h3::first-letter { text-transform: uppercase; }
.eq-ag-dia.hoje h3 { color: #64B5FF; }
.eq-ag-dia.livre { padding: 8px 0; }
.eq-ag-dia.livre h3 { color: var(--apagado); font-weight: 600; }
.eq-ag-dia.livre p { margin: 0; }
.eq-ag-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); border-left: 3px solid #0A84FF; color: inherit; text-decoration: none; }
.eq-ag-item.ev-folga { border-left-color: #30D158; }
.eq-ag-item.ev-lembrete { border-left-color: #FFD60A; }
.eq-ag-item.ev-evento { border-left-color: #BF5AF2; }
.eq-ag-item.ev-cliente { border-left-color: #FF9F0A; }
a.eq-ag-item:hover { background: rgba(255,255,255,.07); color: inherit; }
.eq-ag-hora { flex: none; width: 58px; font-size: 13px; font-weight: 700; color: var(--claro); font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
  .eq-ag-barra { padding: 8px 14px; }
  .eq-ag { padding: 6px 14px 24px; }
  .eq-ag-abas { min-width: 0; flex: 1 1 auto; }
  .eq-ag-hora { width: 50px; font-size: 12px; }
  .eq-minha { max-width: 46%; }
}
/* pessoas: rosto com foto no cartão */
.pessoa-ini.com-foto { padding: 0; overflow: hidden; background: #141418; }
.pessoa-ini.com-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.eq-chat .cv-topo { flex-wrap: nowrap; }
.rp-ini { line-height: 1; }
/* 05/11 · ícones de linha no lugar dos emojis (clipe, microfone, emoji, relógio, sino) */
.btn.redondo svg { display: block; }
.btn.redondo.gravando { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.btn.redondo:not(.gravando) { color: var(--claro); }
.eq-mudo { display: inline-flex; color: var(--apagado); }
.eq-mudo svg { width: 14px; height: 14px; }
/* 06/11 · A lista de Conversas (clientes e equipe) rola, como no WhatsApp; sem páginas */
.cv-itens { overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2A2A30 transparent; -webkit-overflow-scrolling: touch; }
.cv-itens::-webkit-scrollbar { width: 8px; }
.cv-itens::-webkit-scrollbar-thumb { background: #2A2A30; border-radius: 8px; }
.cv-mais-lista { padding: 14px; text-align: center; font-size: 12px; color: var(--apagado); }
/* 06/11 · ambiente de teste: faixa no alto */
.faixa-teste { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 200; background: #FFD60A; color: #000; font-size: 11px; font-weight: 800; padding: 2px 12px; border-radius: 0 0 8px 8px; pointer-events: none; }

/* v84 · Conversas como o WhatsApp: fila de arquivos com miniatura, ouvir o áudio antes de mandar, segurar a mensagem */
.cv-fila { display: flex; gap: 6px; flex: 1 1 100%; overflow-x: auto; padding-bottom: 2px; }
.cv-fila-item { position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--fundo-2, rgba(255,255,255,.06)); border: 1px solid var(--linha); }
.cv-fila-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-fila-doc { display: grid; place-items: center; width: 100%; height: 100%; font-size: 11px; font-weight: 700; letter-spacing: .02em; opacity: .8; }
.cv-fila-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 14px; line-height: 20px; padding: 0; cursor: pointer; }
.cv-fila-mais { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; border: 1px dashed var(--linha); background: none; color: inherit; font-size: 22px; cursor: pointer; }
.cv-anexo .cv-fila-dica { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-ouvir audio { flex: 1 1 200px; min-width: 0; height: 36px; }
@media (pointer: coarse) {
  .msg .bolha, .eq-msg .bolha { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
.cv-item .cv-mudo { display: inline-flex; opacity: .6; }
.cv-item .cv-mudo svg { width: 13px; height: 13px; }
.cv-item .fixa + .cv-mudo { margin-left: 4px; }
.cv-prod { flex-wrap: wrap; }
.cv-prod .campo { flex: 1 1 200px; }
.cv-prod-lista { display: grid; gap: 4px; flex: 1 1 100%; max-height: 220px; overflow-y: auto; }
.cv-prod-item { display: grid; text-align: left; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linha); background: none; color: inherit; cursor: pointer; font: inherit; }
.cv-prod-item:hover, .cv-prod-item:focus-visible { background: var(--linha-fraca); }
.cv-anexo > .cv-contato { flex: 1 1 100%; }
.cv-prod > b { flex: 1 1 auto; }
.cv-prod > .campo { order: 3; flex: 1 1 100%; }
.cv-prod > .cv-prod-lista { order: 4; }