/* Central de aprovação — design system do Basqui (pele Portal: Manrope, amarelo DUX, fundo
   pontilhado; vidro só nos controles parados na tela) em forma de app: topo fixo, só a lista
   rola, barra inferior fixa (um pouco maior que o padrão), folha de detalhe que sobe.
   Conteúdo é sólido. Controle é vidro. Uma ação principal por tela: a cápsula preta.
   Cor de destaque, tema e vidro vêm do aparencia.js (guardados no aparelho). */
:root {
  --acc: #F8AB1A; --on-acc: #121316; --acc-soft: rgba(248,171,26,.16); --acc-linha: #A86F00;
  --vidro-a: .64; --vidro-blur: 14px;
  --r8: 8px; --r12: 12px; --r16: 16px; --r20: 20px; --pill: 100px;
  --top: env(safe-area-inset-top, 0px); --bot: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="light"] {
  --bg: #F8F8F6; --white: #FFFFFF; --white-rgb: 255 255 255; --black: #121316;
  --gray: #666666; --gray2: #AAAAAA; --gray3: #E3E4DE; --gray4: #F0F0EE; --dot: #CBCCC6;
  --red: #D93025; --red-soft: rgba(217,48,37,.09); --green: #1E8A3E; --green-soft: rgba(30,138,62,.10);
  --orange: #B85C00; --orange-soft: rgba(184,92,0,.11); --amber: #8A6100; --gray-soft: rgba(102,102,102,.10);
  --vidro-borda: rgb(18 19 22 / .10);
  --vidro-brilho: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(255 255 255 / .35), inset 0 0 0 1px rgb(255 255 255 / .40);
  --vidro-sombra: 0 10px 30px rgb(18 19 22 / .12), 0 2px 6px rgb(18 19 22 / .06);
  --trilho: rgb(18 19 22 / .06);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0A0A0C; --white: #141518; --white-rgb: 28 29 33; --black: #F4F4F2;
  --gray: #B0B0AB; --gray2: #74756F; --gray3: #2A2B30; --gray4: #1C1D21; --dot: #23242A;
  --red: #F87171; --red-soft: rgba(248,113,113,.14); --green: #4ADE80; --green-soft: rgba(74,222,128,.13);
  --orange: #F09A5B; --orange-soft: rgba(240,154,91,.14); --amber: #F0B429; --gray-soft: rgba(176,176,171,.12);
  --vidro-borda: rgb(0 0 0 / .45);
  --vidro-brilho: inset 0 1px 0 rgb(255 255 255 / .20), inset 0 -1px 0 rgb(255 255 255 / .05), inset 0 0 0 1px rgb(255 255 255 / .07);
  --vidro-sombra: 0 10px 30px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .35);
  --trilho: rgb(255 255 255 / .08);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--black); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none;
  /* fundo liso na cor-pele do tema + pontilhado (padrão Basqui); sem brilho/mancha da cor (31/10) */
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 22px 22px; background-attachment: fixed;
}
button, input, textarea { font: inherit; color: inherit; }
/* sem zoom (cara de app): sem duplo toque, campo com 16px ou mais (o iPhone dá zoom em campo menor),
   controle não seleciona texto nem abre o menu de toque longo (o conteúdo continua selecionável) */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, textarea, select { font-size: 16px; }
button, a, label, .tab, .tabbar, .seg, .chip, .selo, .opcao, .chave, .linha, .cartao, .aj, .capsula, .btn, .marca-app {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--acc-linha); outline-offset: 3px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* vidro: só controles parados (topo, barra, ações) */
.vidro {
  background: rgb(var(--white-rgb) / var(--vidro-a)); border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-brilho), var(--vidro-sombra);
  -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(180%); backdrop-filter: blur(var(--vidro-blur)) saturate(180%);
}
:root[data-vidro="nao"] .vidro { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) { .vidro { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* estrutura: topo fixo, só a lista rola */
.tela { height: 100%; display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; }
.topo { flex: none; padding: calc(16px + var(--top)) 16px 0; }
.topo h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ferramentas { flex: none; padding: 0 16px 10px; }
.ferramentas .sub { color: var(--gray); font-size: 13px; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ferramentas > .sub:first-child { margin-top: 4px; }
.rolagem { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px calc(100px + var(--bot)); overscroll-behavior: contain; }

/* seletor segmentado (trilho do Basqui) */
.seg { display: flex; padding: 3px; gap: 2px; margin-top: 14px; border-radius: var(--pill); background: var(--trilho); }
.seg button { flex: 1; height: 38px; border-radius: var(--pill); font-weight: 700; font-size: 14px; color: var(--gray); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button[aria-selected="true"] { background: var(--white); color: var(--black); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.seg .n { font-size: 11.5px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); background: var(--acc); color: var(--on-acc); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.seg .n.zero { background: var(--trilho); color: var(--gray); }

/* busca em cápsula */
.buscar { display: flex; align-items: center; gap: 8px; margin-top: 10px; height: 42px; padding: 0 14px; border-radius: var(--pill); background: var(--white); border: 1px solid var(--gray3); color: var(--gray2); }
.buscar svg { width: 17px; height: 17px; }
.buscar input { flex: 1; border: 0; background: transparent; outline: none; font-size: 16px; color: var(--black); min-width: 0; }
.buscar:focus-within { border-color: var(--acc-linha); }

/* listas: cartões sólidos agrupados */
.grupo { font-size: 13px; font-weight: 800; color: var(--gray); margin: 18px 4px 8px; }
.grupo.prio { color: var(--red); }
/* 03/11 (datas): grupo de tempo que abre e fecha (Hoje · Ontem abertos; Esta semana · Este mês · Antes recolhidos), cabeçalho grudado no topo */
.grupo-t { margin-top: 6px; }
.grupo-t > summary.grupo { list-style: none; display: flex; align-items: center; gap: 2px; cursor: pointer; position: sticky; top: -4px; z-index: 2; margin: 0 -4px; padding: 12px 8px 8px; background: var(--bg); min-height: 44px; }
.grupo-t > summary.grupo::-webkit-details-marker { display: none; }
.grupo-t > summary .chev { flex: none; margin-right: 4px; transition: transform .2s; }
.grupo-t[open] > summary .chev { transform: rotate(90deg); }
.grupo-t:not([open]) > summary { color: var(--gray2); }
.ver-mais { display: block; width: 100%; min-height: 48px; font-weight: 700; font-size: 14px; color: var(--black); border-top: 1px solid var(--gray3); }
.ver-mais:active { background: var(--gray4); }
.ver-arquivo { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 18px; border-radius: var(--pill); border: 1px dashed var(--gray3); color: var(--gray); font-weight: 700; font-size: 14px; }
.ver-arquivo svg { width: 16px; height: 16px; }
.arquivo-cab { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; color: var(--gray); font-size: 13px; }
.arquivo-cab b { color: var(--black); }
.volta-arquivo { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 8px; border-radius: var(--pill); background: var(--gray4); font-weight: 700; font-size: 13px; color: var(--black); }
.volta-arquivo svg { width: 16px; height: 16px; }
/* pílulas de período (só no histórico) */
.pilulas { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.pilulas::-webkit-scrollbar { display: none; }
.pilulas button { flex: none; height: 32px; padding: 0 13px; border-radius: var(--pill); border: 1px solid var(--gray3); font-weight: 700; font-size: 13px; color: var(--gray); background: transparent; }
.pilulas button[aria-selected="true"] { background: var(--black); border-color: var(--black); color: var(--white); }
.cx { background: var(--white); border: 1px solid var(--gray3); border-radius: var(--r16); overflow: hidden; }
.linha { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--gray3); min-height: 64px; }
.linha:last-child { border-bottom: 0; }
a.linha:active, button.linha:active, .linha.toque:active { background: var(--gray4); }
.linha.toque { cursor: pointer; }
.ic { width: 40px; height: 40px; border-radius: 50%; background: var(--gray4); display: grid; place-items: center; color: var(--black); flex: none; position: relative; }
.ic.alto::after { content: ''; position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--red); border: 2px solid var(--white); }
.ic.acc { background: var(--acc-soft); color: var(--black); }
.meio { flex: 1; min-width: 0; }
.t { font-weight: 700; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s { display: block; color: var(--gray); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir { text-align: right; flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dir small { display: block; color: var(--gray); font-weight: 600; font-size: 12px; margin-top: 3px; }
.chev { color: var(--gray2); width: 16px; height: 16px; }

/* selos (cor sólida no texto, soft no fundo) */
.selo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--pill); font-size: 11.5px; font-weight: 700; background: var(--gray-soft); color: var(--gray); white-space: nowrap; }
.selo.alto, .selo.rejeitado, .selo.caiu { background: var(--red-soft); color: var(--red); }
.selo.atencao, .selo.falta_chave { background: var(--acc-soft); color: var(--amber); }
.selo.aprovado, .selo.ok { background: var(--green-soft); color: var(--green); }
.selo.urgente { background: var(--orange-soft); color: var(--orange); }

.vazio { text-align: center; padding: 44px 20px; color: var(--gray); background: var(--white); border: 1px dashed var(--gray3); border-radius: var(--r16); margin-top: 14px; }
.vazio .ic { margin: 0 auto 12px; width: 48px; height: 48px; }
.vazio b { display: block; color: var(--black); font-size: 16px; margin-bottom: 3px; }
.convite { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 12px; border-radius: var(--r16); background: var(--acc-soft); border: 1px solid var(--acc-linha); width: 100%; text-align: left; }
.convite b { display: block; font-weight: 700; }
.convite span { color: var(--gray); font-size: 13px; }
.so-ver { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding: 9px 12px; border-radius: var(--r12); background: var(--trilho); color: var(--gray); font-size: 13px; }
.so-ver svg { width: 16px; height: 16px; }
.exemplo { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--pill); background: rgba(124,58,237,.11); color: #7C3AED; font-size: 11px; font-weight: 700; vertical-align: middle; }
:root[data-theme="dark"] .exemplo { color: #A78BFA; background: rgba(167,139,250,.14); }

/* grupos de ajustes (formato Ajustes do Mac: título fora da caixa) */
.secao { margin-top: 22px; }
.secao > h2 { font-size: 13px; font-weight: 800; color: var(--gray); margin: 0 4px 8px; }
.nota { color: var(--gray); font-size: 13px; margin: 8px 4px 0; line-height: 1.45; }
.azul { color: var(--black); font-weight: 700; }
.perigo { color: var(--red); }
.opcoes { display: flex; gap: 2px; padding: 3px; margin: 12px 14px; border-radius: var(--pill); background: var(--trilho); }
.opcao { flex: 1; height: 38px; border-radius: var(--pill); font-weight: 700; font-size: 13.5px; color: var(--gray); }
.opcao[aria-pressed="true"] { background: var(--white); color: var(--black); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.cores { display: flex; gap: 16px; padding: 14px; flex-wrap: wrap; }
.cor { width: 40px; height: 40px; border-radius: 50%; position: relative; border: 1px solid var(--vidro-borda); }
.cor[aria-pressed="true"]::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--black); }
.chave { width: 50px; height: 30px; border-radius: var(--pill); background: var(--gray3); position: relative; flex: none; transition: background .2s; }
.chave::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
.chave[aria-checked="true"] { background: var(--green); }
.chave[aria-checked="true"]::after { transform: translateX(20px); }
.faixa { width: 100%; accent-color: var(--acc-linha); }
.faixa[disabled] { opacity: .4; }
.barra-uso { height: 8px; border-radius: var(--pill); background: var(--trilho); overflow: hidden; margin-top: 6px; }
.barra-uso i { display: block; height: 100%; background: var(--green); border-radius: var(--pill); }
.barra-uso i.medio { background: var(--acc); } .barra-uso i.alto { background: var(--red); }
.uso { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px 14px 14px; }
.uso small { color: var(--gray); font-size: 12px; font-weight: 600; }
.uso b { font-variant-numeric: tabular-nums; }

/* folha de detalhe (sobe por cima) */
.folha { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; flex-direction: column; transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1); visibility: hidden;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 22px 22px; }
.folha.aberta { transform: none; visibility: visible; }
.folha-topo { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--top)) 16px 8px; max-width: 720px; width: 100%; margin: 0 auto; }
.folha-topo .capsula { display: flex; align-items: center; gap: 8px; border-radius: var(--pill); padding: 4px 14px 4px 4px; min-height: 44px; font-weight: 700; font-size: 14px; }
.folha-topo .capsula span.bt { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.folha-corpo { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 16px 24px; max-width: 720px; width: 100%; margin: 0 auto; }
.folha-corpo h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.18; margin-top: 10px; }
.cab { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.expira { margin-top: 6px; color: var(--gray); font-size: 14px; }
.expira b { color: var(--black); font-variant-numeric: tabular-nums; }
.bloco { margin-top: 12px; padding: 14px 16px; border-radius: var(--r16); background: var(--white); border: 1px solid var(--gray3); }
.bloco > h2 { font-size: 13px; font-weight: 800; color: var(--gray); margin-bottom: 6px; }
.bloco.alerta { border-color: rgba(217,48,37,.35); }
.fato { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--gray3); font-size: 14px; }
.fato:last-child { border-bottom: 0; padding-bottom: 0; } .fato:first-of-type { padding-top: 0; }
.fato > span:first-child { color: var(--gray); flex: none; }
.fato > span:last-child { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.sinais { list-style: none; display: grid; gap: 6px; }
.sinais li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.sinais li::before { content: '!'; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--red-soft); color: var(--red); font-weight: 800; font-size: 12px; display: grid; place-items: center; }
.texto-livre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; }
.codigo { white-space: nowrap; display: inline-block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 800; letter-spacing: .16em; font-size: 17px; background: var(--gray4); padding: 3px 10px; border-radius: var(--r8); margin-top: 6px; }
.mudancas { list-style: none; display: grid; gap: 12px; }
.mudanca > b { display: block; font-size: 14px; margin-bottom: 6px; overflow-wrap: anywhere; }
.mud { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: start; font-size: 13px; margin-top: 4px; }
.mud > span { color: var(--gray); font-weight: 700; padding-top: 3px; }
.mud code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; padding: 3px 8px; border-radius: var(--r8); background: var(--gray4); }
.mud.antes code { text-decoration: line-through; text-decoration-color: rgba(217,48,37,.5); }
.mud.depois code { font-weight: 700; }
.trilha { list-style: none; font-size: 13px; color: var(--gray); display: grid; gap: 4px; }
.trilha b { color: var(--black); font-weight: 700; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--pill); border: 1px solid var(--gray3); background: var(--white); font-weight: 700; font-size: 13.5px; color: var(--gray); }
.chip[aria-pressed="true"] { background: var(--acc-soft); border-color: var(--acc-linha); color: var(--black); }
.marca-app { font-size: 12px; font-weight: 800; color: var(--acc-linha); letter-spacing: .02em; margin-bottom: 2px; height: 18px; }
.ic .ponto { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--white); }
.ponto.verde { background: var(--green); } .ponto.amarelo { background: #F8AB1A; } .ponto.cinza { background: var(--gray2); } .ponto.vermelho { background: var(--red); }
a.selo.acc { background: var(--black); color: var(--bg); }
a.selo { padding: 6px 12px; font-size: 12.5px; }
.chip .bolinha { width: 16px; height: 16px; border-radius: 50%; margin-right: 8px; border: 1px solid var(--vidro-borda); flex: none; }
.chip.leitura { height: 28px; padding: 0 10px; font-size: 12.5px; color: var(--black); }
.escolha-t { font-size: 13px; font-weight: 700; color: var(--gray); margin: 12px 0 8px; }
.escolha-t:first-of-type { margin-top: 2px; }
.resultado { margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r16); background: var(--white); border: 1px solid var(--gray3); }
.resultado.aprovado .ic { background: var(--green-soft); color: var(--green); }
.resultado.rejeitado .ic { background: var(--red-soft); color: var(--red); }
.resultado b { display: block; font-size: 16px; }
.resultado span { color: var(--gray); font-size: 13.5px; }

/* Painel: grade de cartões (2 por linha no celular). Cartão é conteúdo: sólido. */
.cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
@media (min-width: 620px) { .cartoes { grid-template-columns: repeat(3, 1fr); } }
.cartao { display: flex; flex-direction: column; min-width: 0; padding: 14px 14px 13px; min-height: 134px; border-radius: var(--r16); background: var(--white); border: 1px solid var(--gray3); transition: transform .12s; }
.cartao:active { transform: scale(.97); background: var(--gray4); }
.cartao-cab { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.cartao-cab .ponto { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; }
.cartao-n { font-size: 13.5px; font-weight: 700; color: var(--gray); line-height: 1.25; }
.cartao-v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 2px; }
.cartao-s { font-size: 12.5px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cartao.sem .cartao-v { color: var(--gray2); }
/* quadradinho de ícone colorido (cartões e Ajustes); cor fixa: o ícone branco fica legível nos dois temas */
.qd { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff; background: #5B6B7F; }
.qd svg { width: 19px; height: 19px; }
.qd.verde, .qd.q-ferramentas { background: #2E9D4F; } .qd.vermelho, .qd.q-funcoes { background: #E5483B; }
.qd.laranja, .qd.q-andamento { background: #E8820C; } .qd.ardosia, .qd.q-rotinas { background: #5B6B7F; }
.qd.cinza { background: #8E8E93; } .qd.q-tokens { background: #121316; } :root[data-theme="dark"] .qd.q-tokens { background: #3A3B42; }
.qd.acc, .qd.q-agentes { background: var(--acc); color: var(--on-acc); }
.s.prox { color: var(--black); opacity: .78; }
.selo.marca { margin-left: 6px; padding: 0 7px; font-size: 10.5px; background: transparent; border: 1px dashed var(--gray2); color: var(--gray); vertical-align: 1px; }
.valor { color: var(--gray); font-weight: 700; font-variant-numeric: tabular-nums; }
.conta + .conta { border-top: 1px solid var(--gray3); }
.conta-nota { margin: 0; padding: 0 14px 14px 66px; }

/* Configurações no jeito dos Ajustes do iPhone: grupos de cantos redondos, linha com quadradinho,
   título, valor em cinza à direita e seta */
.ajustes { margin-top: 18px; background: var(--white); border: 1px solid var(--gray3); border-radius: var(--r16); overflow: hidden; }
.aj { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px 8px 14px; text-align: left; position: relative; font-size: 15.5px; }
.aj.alto { min-height: 62px; }
.aj + .aj::before { content: ''; position: absolute; top: 0; right: 0; left: 60px; border-top: 1px solid var(--gray3); }
.aj > .qd { width: 32px; height: 32px; border-radius: 8px; } .aj > .qd svg { width: 18px; height: 18px; }
a.aj:active, button.aj:active { background: var(--gray4); }
.aj-t { flex: 1; min-width: 0; font-weight: 600; }
.aj-t .s { font-weight: 500; }
.aj-v { color: var(--gray); font-weight: 500; white-space: nowrap; }
.aj .chev { margin-left: -4px; }
.aj.perigo .aj-t { color: var(--red); }
.aj.sair { justify-content: center; color: var(--red); font-weight: 700; }
.aj-titulo { font-size: 13px; font-weight: 700; color: var(--gray); margin: 20px 16px 0; text-transform: uppercase; letter-spacing: .04em; }
.aj-titulo + .ajustes { margin-top: 8px; }
.folha-corpo .ajustes .opcoes { margin: 10px 12px; }
.dono { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: var(--r16); background: var(--white); border: 1px solid var(--gray3); }
.dono .avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--acc-soft); color: var(--black); font-weight: 800; font-size: 19px; flex: none; }
.dono b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faceid { margin-top: 14px; padding: 22px 18px 18px; border-radius: var(--r20); background: var(--white); border: 1.5px solid var(--acc-linha); box-shadow: 0 0 0 4px var(--acc-soft); text-align: center; }
.faceid-ic { width: 66px; height: 66px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto 12px; background: var(--acc); color: var(--on-acc); }
.faceid-ic svg { width: 36px; height: 36px; }
.faceid h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.faceid > p { color: var(--gray); font-size: 14px; margin: 6px 0 14px; }
.faceid .campo { text-align: center; }
.faceid .nota { margin: 10px 0 0; }

/* barra de ações da folha (controle → vidro) */
.folha-pe { flex: none; padding: 10px 16px calc(12px + var(--bot)); }
.acoes { display: flex; gap: 8px; padding: 6px; border-radius: var(--pill); max-width: 688px; margin: 0 auto; }
.btn { flex: 1; height: 52px; border-radius: var(--pill); font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--white); border: 1px solid var(--gray3); color: var(--black); transition: transform .1s, opacity .15s; }
.btn:active { transform: scale(.97); }
.btn.principal { background: var(--black); border-color: var(--black); color: var(--bg); flex: 1.5; }
.btn.perigo { background: var(--red); border-color: var(--red); color: #fff; flex: 1.5; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.cheio { width: 100%; flex: none; display: flex; }
.motivo { width: 100%; max-width: 688px; display: block; margin: 0 auto 8px; min-height: 72px; border: 1px solid var(--gray3); border-radius: var(--r16); background: var(--white); padding: 12px 14px; font-size: 16px; resize: none; outline: none; }
.motivo:focus { border-color: var(--acc-linha); }
.campo { width: 100%; height: 44px; border: 1px solid var(--gray3); border-radius: var(--r12); background: var(--bg); padding: 0 14px; font-size: 16px; outline: none; margin-bottom: 10px; }

/* barra inferior: fixa, 2 abas | o botão do agente | 2 abas (v3: mais baixa que a v2, ainda com toque generoso) */
.tabbar { position: fixed; z-index: 100; left: 50%; transform: translateX(-50%); bottom: calc(8px + var(--bot)); width: min(520px, calc(100vw - 20px)); display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 31px; }
.tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 54px; border-radius: 27px; color: var(--gray); transition: background .2s, color .2s; }
.tab svg { width: 22px; height: 22px; }
.tab-t { font-size: 10.5px; font-weight: 700; line-height: 1.1; text-align: center; max-width: 100%; padding: 0 2px; }
.tab.ativa { color: var(--on-acc); background: var(--acc); }
.tab.ativa svg { color: var(--on-acc); }
.tab.ativa .tab-t { color: var(--on-acc); }
body.com-folha .tabbar, body.com-chat .tabbar { opacity: 0; pointer-events: none; }

.toast { position: fixed; left: 50%; bottom: calc(84px + var(--bot)); transform: translate(-50%, 10px); z-index: 2000; background: #121316; color: #F4F4F2; padding: 11px 18px; border-radius: var(--pill); font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.toast.ver { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { background: var(--red); color: #fff; }
body.com-folha .toast { bottom: calc(92px + var(--bot)); }
.carregando { color: var(--gray); padding: 40px 0; text-align: center; }
/* detalhe do andamento: contexto que abre, linha do tempo das fases, histórico */
.ctx-abre { width: 100%; text-align: left; color: inherit; font-family: inherit; font-size: 14px; line-height: inherit; }
.ctx-abre > span:last-child { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.ctx-abre .chev { flex: none; transition: transform .2s; }
.ctx-abre[aria-expanded="true"] .chev { transform: rotate(90deg); }
.ctx-texto { font-size: 14px; color: var(--gray); padding: 8px 0 10px; border-bottom: 1px solid var(--gray3); }
.passos { list-style: none; margin-top: 4px; }
.passo { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.passo:last-child { padding-bottom: 0; }
.passo:not(:last-child)::before { content: ''; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--gray3); }
.passo.feito:not(:last-child)::before { background: var(--green); opacity: .45; }
.marco { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--gray2); background: var(--white); margin-top: 1px; }
.marco svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.passo.feito .marco { background: var(--green); border-color: var(--green); color: var(--white); }
.passo.andando .marco { border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
.passo.andando .marco::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.passo.travado .marco { background: var(--red); border-color: var(--red); color: var(--white); }
.passo-meio { min-width: 0; flex: 1; }
.passo-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; font-size: 14px; }
.passo-cab b { font-weight: 700; }
.passo.a_fazer .passo-cab b { color: var(--gray); }
.passo-st { font-size: 12px; font-weight: 700; color: var(--gray); white-space: nowrap; }
.passo.andando .passo-st { color: var(--amber); } .passo.travado .passo-st { color: var(--red); } .passo.feito .passo-st { color: var(--green); }
.passo-esp { display: block; color: var(--gray); font-size: 13px; margin-top: 1px; line-height: 1.4; }
.prox-passo { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--gray3); color: var(--black); }
.hist { list-style: none; display: grid; }
.hist li { padding: 9px 0; border-bottom: 1px solid var(--gray3); display: grid; gap: 1px; }
.hist li:first-child { padding-top: 2px; } .hist li:last-child { border-bottom: 0; padding-bottom: 0; }
.hist-cab { font-size: 12px; font-weight: 700; color: var(--gray); font-variant-numeric: tabular-nums; }
.hist-t { font-size: 14px; overflow-wrap: anywhere; }
.ver-tudo { margin-top: 10px; width: 100%; height: 40px; border-radius: var(--pill); background: var(--gray4); color: var(--black); font-weight: 700; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (min-width: 720px) { .topo h1 { font-size: 32px; } }

/* "Conectado" no lugar do botão, quando a conta da ferramenta está ligada */
a.aj-v { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; }
a.aj-v svg { width: 16px; height: 16px; color: var(--gray2); }

/* ---------- v2 (estudo de UX 31/10): decidir primeiro, estado em palavra, idade do retrato ---------- */
.chip { white-space: nowrap; height: 40px; gap: 6px; }
.chip .chip-ok { width: 15px; height: 15px; stroke-width: 3; margin-left: -3px; }
.chip.outros { border-style: dashed; color: var(--gray); background: transparent; }
.h2-nota { font-weight: 600; color: var(--gray2); }
:root[data-theme="dark"] .h2-nota { color: var(--gray); }

/* pedido: de onde veio numa frase; alerta antes da decisão */
.origem { color: var(--gray); font-size: 14px; margin-top: 6px; line-height: 1.45; }
.origem b { color: var(--black); font-variant-numeric: tabular-nums; }
.alertas { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: var(--r16); background: var(--red-soft); color: var(--red); border: 1px solid rgb(217 48 37 / .22); }
.alertas svg { width: 19px; height: 19px; margin-top: 1px; }
.alertas ul { list-style: none; display: grid; gap: 4px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.pergunta { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 13px 14px; border-radius: var(--r16); background: var(--acc-soft); border: 1px solid var(--acc-linha); font-size: 14px; }
.pergunta svg { width: 19px; height: 19px; color: var(--acc-linha); margin-top: 1px; }
.pergunta b { display: block; font-weight: 700; }
.pergunta span { color: var(--gray); font-size: 13.5px; line-height: 1.45; }
:root[data-theme="dark"] .pergunta span { color: var(--black); opacity: .78; }

/* canais: a linha inteira é o toque; marcado = vai junto */
.canal { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 0; border-bottom: 1px solid var(--gray3); min-height: 60px; }
.canal:last-child { border-bottom: 0; padding-bottom: 2px; }
.canal .ic { width: 38px; height: 38px; }
.canal .ic svg { width: 18px; height: 18px; }
.canal .meio b { display: block; font-size: 15px; font-weight: 700; }
.canal .meio span { display: block; color: var(--gray); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canal.fora .meio b { color: var(--gray); }
.canal.fora .ic { opacity: .55; }
.marcar { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gray3); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.marcar.sim { background: var(--black); border-color: var(--black); color: var(--bg); }
.marcar svg { width: 16px; height: 16px; stroke-width: 3; }

/* "Mais detalhes": fechado por padrão */
.dobra { margin-top: 12px; border-radius: var(--r16); background: var(--white); border: 1px solid var(--gray3); }
.dobra summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 0 16px; font-weight: 700; font-size: 14px; color: var(--gray); cursor: pointer; }
.dobra summary::-webkit-details-marker { display: none; }
.dobra summary .chev { transition: transform .2s; }
.dobra[open] summary .chev { transform: rotate(90deg); }
.dobra-corpo { padding: 0 16px 14px; }
.dobra-texto { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gray3); }

/* idade do retrato: cinza quando fresco; aviso amarelo quando o servidor some */
.idade { display: flex; align-items: center; gap: 6px; color: var(--gray); font-size: 13px; margin-top: 6px; }
.idade svg { width: 14px; height: 14px; }
.idade.velho { margin-top: 10px; padding: 9px 12px; border-radius: var(--r12); background: var(--acc-soft); border: 1px solid var(--acc-linha); color: var(--black); font-weight: 700; font-size: 13.5px; }
.idade.velho svg { width: 17px; height: 17px; color: var(--acc-linha); }
.ferramentas .idade { margin-top: 4px; }
.ferramentas .idade.velho { margin-top: 8px; }

/* Painel: faixa "N coisas pedem você" */
.pedem { margin-top: 10px; border-radius: var(--r20); background: var(--white); border: 1px solid var(--gray3); overflow: hidden; }
.pedem-cab { display: flex; align-items: center; gap: 12px; padding: 14px; }
.pedem-cab .ic { background: var(--red-soft); color: var(--red); }
.pedem.ok .pedem-cab .ic { background: var(--green-soft); color: var(--green); }
.pedem-cab b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.pedem-cab .meio span { color: var(--gray); font-size: 13px; }
.pedem .linha { border-bottom: 0; border-top: 1px solid var(--gray3); min-height: 62px; }
.s.ruim { color: var(--red); font-weight: 600; }
.s.meh { color: var(--amber); font-weight: 600; }
.acao { flex: none; height: 40px; padding: 0 16px; border-radius: var(--pill); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; border: 1px solid var(--gray3); background: var(--white); color: var(--black); white-space: nowrap; }
.acao.forte { background: var(--black); color: var(--bg); border-color: var(--black); }
.acao:active { transform: scale(.97); }
.conectado { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding-left: 8px; color: var(--green); font-size: 13.5px; font-weight: 700; }
.conectado svg { width: 15px; height: 15px; stroke-width: 3; }
.grupo .cont { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; margin-left: 7px; border-radius: var(--pill); background: var(--trilho); color: var(--gray); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.cx.apagado .t, .linha.apagada .t { color: var(--gray); font-weight: 600; }
.cx.apagado .ic, .linha.apagada .ic { opacity: .6; }

/* cartões: o estado é a palavra colorida (sem bolinha solta) */
.cartao > .qd { margin-bottom: 12px; }
.cartao-s.ruim { color: var(--red); font-weight: 700; }
.cartao-s.meh { color: var(--amber); font-weight: 700; }
.cartao-s.bom { color: var(--green); font-weight: 700; }

/* Tokens: quanto sobra */
.sobra { padding: 16px; }
.sobra-conta { color: var(--gray); font-size: 13px; font-weight: 600; }
.sobra-conta b { color: var(--black); }
.sobra .grande { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin-top: 6px; font-variant-numeric: tabular-nums; }
.sobra .grande small { font-size: 15px; font-weight: 700; color: var(--gray); letter-spacing: 0; margin-left: 8px; }
.sobra .barra-uso { height: 12px; margin-top: 14px; }
.sobra .linha-sub { color: var(--gray); font-size: 13px; margin-top: 10px; }
.sobra .linha-sub b { color: var(--black); }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.mini { display: flex; flex-direction: column; min-width: 0; padding: 13px 14px; border-radius: var(--r16); background: var(--white); border: 1px solid var(--gray3); }
.mini small { color: var(--gray); font-size: 12.5px; font-weight: 600; }
.mini b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-s { color: var(--gray); font-size: 12.5px; }
.mini .barra-uso { height: 6px; margin-top: auto; }
.mini .mini-s + .barra-uso { margin-top: 8px; }

/* carregando: o desenho da tela, pulsando de leve */
.esq { display: block; border-radius: var(--r12); background: var(--gray4); animation: pulsa 1.2s ease-in-out infinite; }
.esq-faixa { height: 130px; border-radius: var(--r20); margin-top: 10px; }
.esq-cartao { height: 134px; border-radius: var(--r16); }
.esq-ic { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.esq-t { height: 13px; width: 60%; }
.esq-s { height: 11px; width: 38%; margin-top: 8px; }
@keyframes pulsa { 50% { opacity: .45; } }
.vazio.erro .ic { background: var(--red-soft); color: var(--red); }
.vazio .ver-tudo { max-width: 220px; margin: 16px auto 0; display: block; }
.linha .s.ruim, .linha .s.meh { white-space: normal; }
.sem-quebra { white-space: nowrap; }

/* ---------- v3 (31/10): botão do agente na barra, chat, "Editar com o agente", Aparência A/B ---------- */
/* a marca do app: o ponto (cor do app) com os 3 agentes em órbita */
.marca-svg .orbita { stroke-width: 1.2; stroke-opacity: .38; }
.marca-svg .ag { fill: currentColor; stroke: none; }
.marca-svg .nucleo { fill: var(--acc); stroke: none; }
.marca-svg .agentes { transform-origin: 12px 12px; }
.tab-agente { flex: none; position: relative; width: 54px; height: 54px; margin: 0 4px; border-radius: 50%; display: grid; place-items: center;
  background: var(--black); color: var(--bg); box-shadow: 0 6px 16px rgb(0 0 0 / .22), inset 0 0 0 1px rgb(255 255 255 / .08); transition: transform .12s; }
.tab-agente:active { transform: scale(.93); }
.tab-agente .marca-svg { width: 32px; height: 32px; }
.agente-novo { position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--red); border: 2.5px solid var(--white); }
.agente-novo[hidden] { display: none; }
/* sem o chat ligado (produção, até o servidor do chat existir): a barra volta às 4 abas */
.tab-agente[hidden] { display: none; }
.volta-chat { font-weight: 800; }
.marca-bola { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--black); color: var(--bg); }
.marca-bola.pequena { width: 36px; height: 36px; } .marca-bola.pequena .marca-svg { width: 24px; height: 24px; }
.marca-bola.grande { width: 76px; height: 76px; box-shadow: 0 0 0 8px var(--acc-soft); } .marca-bola.grande .marca-svg { width: 50px; height: 50px; }
.chat.pensando .chat-quem .agentes { animation: orbita 1.4s linear infinite; }
@keyframes orbita { to { transform: rotate(360deg); } }

/* selo "pelo chat" (lista e pedido) */
.selo.chat { background: var(--black); color: var(--bg); padding: 1px 8px 1px 4px; margin-right: 6px; vertical-align: 1px; gap: 3px; }
.selo.chat .marca-svg { width: 13px; height: 13px; }
.selo.chat .marca-svg .orbita { stroke-opacity: .5; }
.s > .selo.chat { font-size: 11px; }

/* "Editar com o agente": à direita do topo da folha, discreto (como o "Editar" do iPhone) */
.folha-topo .editar-agente { margin-left: auto; padding: 4px 14px 4px 5px; gap: 7px; }
.editar-agente .marca-svg { width: 30px; height: 30px; padding: 4px; border-radius: 50%; background: var(--black); color: var(--bg); }

/* chat: folha própria, por cima de tudo */
.folha.chat { z-index: 300; }
.chat-topo { gap: 10px; }
.chat-quem { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-quem b { display: block; font-size: 16px; font-weight: 800; line-height: 1.15; }
.chat-corpo { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px 12px; max-width: 720px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.chat-vazio { margin: auto 0; padding: 12px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.chat-oi { text-align: center; display: grid; gap: 4px; }
.chat-oi b { font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.chat-oi span { color: var(--gray); font-size: 14.5px; font-weight: 500; }
.sugestoes { width: 100%; display: grid; gap: 8px; margin-top: 6px; }
.sugestao { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 10px 10px 10px 16px; border-radius: var(--r16); background: var(--white); border: 1px solid var(--gray3); text-align: left; font-size: 15px; font-weight: 600; color: var(--black); line-height: 1.3; transition: transform .1s, border-color .15s; }
.sugestao span { flex: 1; min-width: 0; }
.sugestao svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--acc-soft); color: var(--black); stroke-width: 2.4; transform: rotate(45deg); }
.sugestao:active { transform: scale(.98); border-color: var(--acc-linha); }
/* cartões de abertura (chat vazio): rótulo com o ponto da cor, título e uma linha de baixo; entram em cascata (60 ms) */
.sugestao.abertura { align-items: center; min-height: 58px; padding: 10px 10px 10px 14px; }
.sg-tx { display: grid; gap: 2px; }
.sg-kick { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--gray); text-transform: none; }
.sg-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--gray3); flex: none; }
.sg-ponto.vermelho { background: var(--red); } .sg-ponto.ambar { background: var(--amber); } .sg-ponto.acc { background: var(--acc); }
.sg-t { font-size: 15px; font-weight: 700; color: var(--black); }
.sg-s { font-size: 12.5px; font-weight: 500; color: var(--gray); }
.sugestao.abertura.forte { border-color: var(--acc-linha); box-shadow: 0 0 0 3px var(--acc-soft); }
.sugestao svg.abre { transform: none; }
.chat-oi .pedem-n { color: var(--black); font-weight: 700; }
.sugestao.entra { animation: sg-entra .34s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes sg-entra { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .sugestao.entra { animation: none; } }

/* topo do chat: … à direita (menu Limpar conversa) */
.chat-mais { margin-left: auto; }
.chat-camada { position: absolute; inset: 0; z-index: 5; }
.chat-camada.escura { background: rgb(0 0 0 / .42); display: grid; place-items: center; padding: 24px; animation: aparece .15s ease-out; }
@keyframes aparece { from { opacity: 0; } }
.chat-menu { position: absolute; top: calc(62px + var(--top)); right: 16px; min-width: 220px; padding: 6px; border-radius: var(--r16); background: var(--white); border: 1px solid var(--gray3); box-shadow: 0 12px 32px rgb(0 0 0 / .18); }
.chat-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 12px; border-radius: var(--r12); font-size: 15.5px; font-weight: 700; color: var(--black); }
.chat-menu-item svg { width: 20px; height: 20px; }
.chat-menu-item.perigo { color: var(--red); }
.chat-menu-item:disabled { opacity: .4; }
.chat-menu-item:not(:disabled):active { background: var(--trilho); }
.chat-confirma { width: 100%; max-width: 340px; padding: 20px 18px 14px; border-radius: var(--r20); background: var(--white); border: 1px solid var(--gray3); box-shadow: 0 20px 50px rgb(0 0 0 / .25); text-align: center; }
.chat-confirma b { display: block; font-size: 18px; font-weight: 800; }
.chat-confirma p { margin: 6px 0 0; color: var(--gray); font-size: 14.5px; line-height: 1.4; }
.chat-confirma .btn { height: 48px; font-size: 15.5px; }

/* cartão de contexto (pessoa · grupo · rotina · conector) dentro do chat: só ver */
.cartao-ctx { align-self: stretch; margin: 2px 0; padding: 12px 14px 2px; border-radius: var(--r20); background: var(--white); border: 1px solid var(--gray3); }
.cartao-ctx + .cartao-chat { margin-top: 0; }
.cc-cab { display: flex; align-items: center; gap: 12px; }
.cc-cab .meio { min-width: 0; flex: 1; display: grid; gap: 4px; }
.cc-cab .meio > b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.cc-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-foto { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.cc-foto.inicial { background: var(--acc); color: var(--on-acc); font-size: 17px; font-weight: 800; letter-spacing: .02em; }
.cc-foto.icone { background: var(--acc-soft); color: var(--black); }
.cc-foto.icone svg { width: 22px; height: 22px; }
.cc-fatos { display: grid; margin-top: 10px; border-top: 1px solid var(--gray3); }
.cc-fato { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; padding: 9px 0; font-size: 14px; }
.cc-fato + .cc-fato { border-top: 1px solid var(--gray3); }
.cc-rot { color: var(--gray); font-size: 13px; font-weight: 600; }
.cc-val { min-width: 0; font-weight: 600; line-height: 1.35; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cc-nada { color: var(--gray); }
.cc-membros { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cc-pilha { display: flex; flex: none; }
.cc-pilha i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; background: var(--gray4); color: var(--black); border: 2px solid var(--white); }
.cc-pilha i + i { margin-left: -8px; }
.cc-membros > span:last-child { font-size: 13.5px; }
.msg { display: flex; }
.msg.eu { justify-content: flex-end; }
.bolha { max-width: 82%; padding: 9px 14px; border-radius: 20px; font-size: 15.5px; line-height: 1.38; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg.eu .bolha { background: var(--black); color: var(--bg); border-bottom-right-radius: 6px; }
.msg.ag .bolha { background: var(--white); border: 1px solid var(--gray3); border-bottom-left-radius: 6px; }
/* reação no balão do dono, como no WhatsApp: o emoji no canto de baixo, entra com um "pop" */
.msg.eu.com-reacao { position: relative; margin-bottom: 14px; }
.reacao { position: absolute; right: 10px; bottom: -15px; min-width: 30px; height: 26px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--pill, 999px); background: var(--white); border: 1px solid var(--gray3); box-shadow: 0 1px 4px rgb(0 0 0 / .14); font-size: 15px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; }
.reacao:focus-visible { outline: 2px solid var(--acc-linha, currentColor); outline-offset: 2px; }
.reacao.pop { animation: reacao-pop .32s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes reacao-pop { from { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .reacao.pop { animation: none; } }
.bolha-ctx { display: block; font-size: 12px; font-weight: 800; opacity: .62; margin-bottom: 1px; }
.digitando .bolha { display: inline-flex; gap: 4px; padding: 13px 14px; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--gray2); animation: pula 1s infinite ease-in-out; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: .5; } }
.pronto { align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--pill); background: var(--green-soft); color: var(--green); font-size: 14px; font-weight: 700; text-align: center; max-width: 94%; }
.pronto svg { width: 16px; height: 16px; stroke-width: 3; flex: none; }
.pronto.ruim { background: var(--trilho); color: var(--gray); }
.pronto.ruim svg { stroke-width: 2.4; }
.chat-link { height: 38px; gap: 4px; padding: 0 12px 0 16px; }
.chat-link svg { width: 15px; height: 15px; }
.bolha.audio { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; min-width: 210px; }
.bolha.audio small { grid-column: 1 / -1; font-size: 12.5px; opacity: .7; white-space: normal; }
.onda { display: flex; align-items: center; gap: 2.5px; height: 22px; }
.onda i { display: block; width: 3px; border-radius: 2px; background: currentColor; opacity: .7; }

/* cartão de aprovação dentro do chat (o pedido de verdade) */
.cartao-chat { align-self: stretch; margin: 2px 0; padding: 12px 14px 4px; border-radius: var(--r20); background: var(--white); border: 1.5px solid var(--acc-linha); box-shadow: 0 0 0 4px var(--acc-soft); }
.cartao-chat.decidido { border-color: var(--gray3); box-shadow: none; }
.cp-cab { display: flex; align-items: center; gap: 10px; }
.cp-cab .ic { width: 36px; height: 36px; }
.cp-cab .meio b { display: block; font-size: 13.5px; font-weight: 800; }
.cp-cab .meio span { display: block; color: var(--gray); font-size: 12px; font-weight: 600; }
.cp-cab .dir small { margin: 0; font-variant-numeric: tabular-nums; }
.cp-resumo { font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; margin: 10px 0 0; }
.cp-acoes { display: flex; gap: 8px; margin-top: 12px; }
.cp-acoes .btn { height: 48px; font-size: 15.5px; }
.cartao-chat .resultado { margin-top: 10px; padding: 10px 12px; border-radius: var(--r12); background: var(--gray4); border: 0; }
.cartao-chat .resultado .ic { width: 34px; height: 34px; }
.cartao-chat .resultado b { font-size: 15px; }
.cp-mais { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 40px; margin-top: 4px; color: var(--gray); font-size: 13px; font-weight: 700; }
.cp-mais .chev { width: 14px; height: 14px; }

/* campo de digitar (controle parado → vidro) */
.chat-pe { flex: none; padding: 6px 12px calc(10px + var(--bot)); max-width: 720px; width: 100%; margin: 0 auto; display: grid; gap: 8px; }
.chat-ctx { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px 0 12px; border-radius: var(--pill); background: var(--acc-soft); border: 1px solid var(--acc-linha); font-size: 13.5px; font-weight: 700; max-width: 100%; }
.chat-ctx > svg { width: 15px; height: 15px; }
.chat-ctx span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-ctx button { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--gray); }
.chat-ctx button svg { width: 14px; height: 14px; }
.chat-campo { display: flex; align-items: flex-end; gap: 6px; padding: 5px 5px 5px 16px; border-radius: 26px; min-height: 52px; }
.chat-campo textarea { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; resize: none; font-size: 16px; line-height: 1.4; padding: 9px 0; max-height: 132px; color: var(--black); }
.chat-campo textarea::placeholder { color: var(--gray); }
.chat-bt { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--black); background: var(--trilho); transition: background .15s, transform .1s; }
.chat-bt:active { transform: scale(.92); }
.chat-bt.mandar { background: var(--black); color: var(--bg); }
.chat-bt svg { width: 20px; height: 20px; stroke-width: 2.4; }
.chat-campo.gravando { align-items: center; padding-left: 5px; }
.grav { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 6px; }
.grav .rec { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: pulsa 1s infinite; flex: none; }
.grav-tempo { font-variant-numeric: tabular-nums; font-size: 15px; }
.onda.viva { flex: 1; overflow: hidden; color: var(--red); }
.onda.viva i { height: 6px; animation: onda 0.9s ease-in-out infinite; }
.onda.viva i:nth-child(3n) { animation-delay: .2s; } .onda.viva i:nth-child(3n+1) { animation-delay: .45s; } .onda.viva i:nth-child(4n) { animation-delay: .1s; }
@keyframes onda { 50% { height: 20px; } }

/* ---------- Aparência ---------- */
.aj-coluna { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; }
.aj-coluna > .s { margin: 0; }
.faixa-linha { display: flex; align-items: center; gap: 10px; color: var(--gray); }
.faixa-linha svg { width: 22px; height: 22px; }
.faixa-linha.off { opacity: .45; }

/* miniatura do app (tema fixo, na cor escolhida) */
.mini-app { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background-color: var(--m-bg); border: 1px solid var(--m-borda);
  background-image: radial-gradient(var(--m-dot) 1px, transparent 1px); background-size: 7px 7px; color: var(--m-txt); }
.mini-app > i { position: absolute; left: 9%; display: block; border-radius: 3px; }
.mini-app .m-marca { top: 9%; width: 22%; height: 3.2%; background: var(--m-linha); border-radius: 2px; }
.mini-app .m-titulo { top: 15%; width: 58%; height: 5.5%; background: var(--m-txt); opacity: .9; }
.mini-app .m-cartao { top: 27%; width: 82%; height: 15%; background: var(--m-card); border: 1px solid var(--m-borda); border-radius: 6px; }
.mini-app .m-cartao.curto { top: 45%; height: 15%; }
.mini-app .m-barra { position: absolute; left: 6%; right: 6%; bottom: 4%; height: 10.5%; border-radius: 99px; background: var(--m-card); border: 1px solid var(--m-borda); display: flex; align-items: center; justify-content: space-around; padding: 0 4%; }
.mini-app .m-aba { display: block; width: 13%; height: 46%; border-radius: 99px; background: var(--m-txt); opacity: .18; }
.mini-app .m-aba.ativa { background: var(--m-acc); opacity: 1; width: 17%; height: 64%; }
.mini-app .m-meio { display: block; width: 19%; aspect-ratio: 1; border-radius: 50%; background: var(--m-txt); box-shadow: inset 0 0 0 3px var(--m-txt), inset 0 0 0 5px var(--m-acc); }
.mini-duplo { position: relative; display: block; width: 100%; }
.mini-duplo .metade { position: absolute; inset: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* A: tema em 3 cartões com miniatura */
.temas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 12px 12px; }
.tema-cartao { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.tema-cartao .mini-app, .tema-cartao .mini-duplo { transition: box-shadow .15s; }
.tema-cartao[aria-pressed="true"] > .mini-app, .tema-cartao[aria-pressed="true"] > .mini-duplo { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4.5px var(--black); border-radius: 12px; }
.tema-nome { font-size: 14px; font-weight: 700; }
.radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--gray3); display: grid; place-items: center; }
.tema-cartao[aria-pressed="true"] .radio { background: var(--black); border-color: var(--black); color: var(--bg); }
.radio svg { width: 14px; height: 14px; stroke-width: 3.2; }

/* prévia viva (as cores do app de verdade) */
.previa-viva { position: relative; overflow: hidden; background-color: var(--bg); background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 14px 14px; }
.pv-bola { position: absolute; border-radius: 50%; filter: blur(2px); }
.pv-bola.um { width: 90px; height: 90px; background: var(--acc); right: 8%; bottom: 6%; opacity: .9; }
.pv-bola.dois { width: 60px; height: 60px; background: var(--black); left: 14%; bottom: -12%; opacity: .85; }
.pv-bola.tres { width: 46px; height: 46px; background: var(--acc-linha); left: 46%; top: 12%; opacity: .7; }
.pv-topo { position: relative; padding: 14px 16px 0; }
.pv-marca { display: block; font-size: 10px; font-weight: 800; color: var(--acc-linha); }
.pv-topo b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.pv-seg { display: flex; gap: 2px; padding: 2px; margin-top: 8px; border-radius: 99px; background: var(--trilho); width: 62%; }
.pv-seg i { flex: 1; font-style: normal; font-size: 10px; font-weight: 700; color: var(--gray); text-align: center; height: 20px; line-height: 20px; border-radius: 99px; }
.pv-seg i.on { background: var(--white); color: var(--black); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.pv-seg em { font-style: normal; display: inline-block; margin-left: 4px; min-width: 14px; height: 14px; line-height: 14px; border-radius: 99px; background: var(--acc); color: var(--on-acc); font-size: 9px; font-weight: 800; }
.pv-lista { position: relative; margin: 10px 16px 0; background: var(--white); border: 1px solid var(--gray3); border-radius: 12px; }
.pv-linha { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.pv-linha + .pv-linha { border-top: 1px solid var(--gray3); }
.pv-ic { width: 22px; height: 22px; border-radius: 50%; background: var(--gray4); flex: none; }
.pv-linha > span { flex: 1; display: grid; gap: 4px; }
.pv-linha b { display: block; height: 7px; width: 70%; border-radius: 4px; background: var(--black); opacity: .85; }
.pv-linha b.curto { width: 48%; }
.pv-linha small { display: block; height: 5px; width: 40%; border-radius: 4px; background: var(--gray2); }
.pv-barra { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 99px; }
.pv-aba { flex: 1; height: 30px; border-radius: 99px; display: grid; place-items: center; color: var(--gray); }
.pv-aba svg { width: 15px; height: 15px; }
.pv-aba.ativa { background: var(--acc); color: var(--on-acc); }
.pv-meio { flex: none; width: 32px; height: 32px; margin: 0 3px; border-radius: 50%; display: grid; place-items: center; background: var(--black); color: var(--bg); }
.pv-meio .marca-svg { width: 20px; height: 20px; }
.previa-viva.faixa { height: 176px; border-bottom: 1px solid var(--gray3); }
.previa-viva.faixa .pv-lista { margin-right: 40%; }
.cor-caixa { overflow: hidden; }

/* A: amostras grandes */
.amostras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 16px 10px 14px; }
.amostra { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.amostra-cor { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--vidro-borda); transition: box-shadow .15s, transform .1s; }
.amostra:active .amostra-cor { transform: scale(.94); }
.amostra[aria-pressed="true"] .amostra-cor { box-shadow: 0 0 0 3px var(--white), 0 0 0 5.5px var(--black); }
/* logo da marca dentro da cor (arquivo do próprio app; preto sobre a cor = contraste igual ao do texto) */
.amostra-cor { position: relative; }
.amostra-logo { display: block; pointer-events: none; -webkit-user-drag: none; }
.amostra-logo.logo-dux { height: 30px; width: auto; }
.amostra-logo.logo-anti { width: 32px; height: 32px; }
.amostra-logo.logo-decentral { width: 36px; height: auto; }
.amostra-ok { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--black); color: var(--bg); box-shadow: 0 0 0 2px var(--white); }
.amostra-ok svg { width: 12px; height: 12px; stroke-width: 3.4; }
.amostra-nome { font-size: 13px; font-weight: 700; color: var(--gray); text-align: center; line-height: 1.2; }
.amostra[aria-pressed="true"] .amostra-nome { color: var(--black); }

/* A: prévia do vidro (conteúdo colorido passando por baixo da barra) */
.previa-vidro { position: relative; height: 112px; overflow: hidden; border-bottom: 1px solid var(--gray3); background-color: var(--bg); background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 12px 12px; }
/* o que passa por baixo do vidro: cartões do app (sem bola desfocada) */
.previa-vidro .pv-bola { filter: none; border-radius: 10px; }
.previa-vidro .pv-bola.um { left: 14%; right: auto; top: 18px; bottom: auto; width: 46%; height: 64px; opacity: 1; }
.previa-vidro .pv-bola.dois { left: auto; right: 12%; top: 44px; bottom: auto; width: 34%; height: 58px; opacity: 1; }
.previa-vidro .pv-bola.tres { left: 30%; top: 60px; width: 30%; height: 14px; border-radius: 99px; opacity: 1; background: var(--black); }
.previa-vidro .pv-barra { left: 12%; right: 12%; bottom: 22px; }

@media (prefers-reduced-motion: reduce) { .chat.pensando .chat-quem .agentes, .digitando i, .onda.viva i, .grav .rec { animation: none; } }
.folha-topo .capsula.so-icone { padding: 4px; }

/* ---------- v4 (31/10, depois do teste no iPhone) ---------- */
/* campo fixo como no WhatsApp: o chat acompanha a área visível (app.js ajustarAoTeclado); a página por baixo não rola */
html:has(body.com-chat), body.com-chat { overflow: hidden; overscroll-behavior: none; }
.folha.chat { transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.chat-topo { position: relative; z-index: 2; }
.chat-pe { position: sticky; bottom: 0; z-index: 2; }
body.com-teclado .chat-pe { padding-bottom: 8px; }

/* texto do agente com formatação simples (negrito, itálico, listas, link) */
.bolha.rica { white-space: normal; }
.bolha.rica p { margin: 0; white-space: pre-wrap; }
.bolha.rica p + p, .bolha.rica p + ul, .bolha.rica p + ol, .bolha.rica ul + p, .bolha.rica ol + p, .bolha.rica ul + ul, .bolha.rica ol + ol { margin-top: 7px; }
.bolha.rica ul, .bolha.rica ol { margin: 0; padding-left: 20px; display: grid; gap: 3px; }
.bolha.rica strong { font-weight: 800; }
.bolha.rica code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; padding: 1px 5px; border-radius: 6px; background: var(--trilho); }
.bolha.rica .link-fora { color: var(--acc-linha); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.bolha.rica .link-fora::after { content: " ↗"; font-size: .85em; }

/* mini cartões (pessoa · grupo · rotina · conector): uma linha; tocar abre a tela inteira */
.mini-linha { display: flex; flex-wrap: wrap; gap: 6px; align-self: stretch; }
.mini-cartao { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; max-width: 100%; padding: 5px 8px 5px 5px; border-radius: var(--pill); background: var(--white); border: 1px solid var(--gray3); text-align: left; color: var(--black); }
button.mini-cartao:active { transform: scale(.98); border-color: var(--acc-linha); }
.mc-foto { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.mc-foto.inicial { background: var(--acc); color: var(--on-acc); font-size: 13.5px; font-weight: 800; letter-spacing: .02em; }
.mc-foto.icone { background: var(--acc-soft); color: var(--black); }
.mc-foto.icone svg { width: 18px; height: 18px; }
.mc-txt { min-width: 0; display: grid; line-height: 1.2; }
.mc-txt b { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-txt span { font-size: 12px; font-weight: 600; color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-cartao .chev { flex: none; width: 14px; height: 14px; color: var(--gray); }
.mini-linha + .cartao-chat { margin-top: 2px; }

/* bolinha na aba Aprovações: pedidos esperando o dono */
.tab { position: relative; }
.tab-conta { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; border: 2px solid var(--white); box-sizing: content-box; }
.tab-conta[hidden] { display: none; }

/* pedido "config" em linguagem simples: a frase primeiro, o técnico recolhido */
.cfg-frase { font-size: 17px; font-weight: 700; line-height: 1.38; margin: 6px 0 0; }
.cp-resumo.cfg-frase { font-size: 16.5px; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.cfg-pravoce { display: grid; gap: 2px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gray3); font-size: 14.5px; line-height: 1.4; }
.cfg-pravoce b { font-size: 12.5px; font-weight: 800; color: var(--gray); text-transform: none; }
.cp-pravoce { margin: 8px 0 0; color: var(--gray); font-size: 14px; font-weight: 600; line-height: 1.4; }
.sem-traducao { list-style: none; display: grid; gap: 6px; margin: 10px 0 0; padding: 0; }
.sem-traducao li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sem-traducao code, .cp-tec-corpo code { display: inline-block; max-width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; padding: 2px 6px; border-radius: 6px; background: var(--trilho); overflow-wrap: anywhere; }
.cfg-tecnico .bloco { margin-top: 10px; padding: 0; border: 0; background: none; box-shadow: none; }
.cp-tecnico { margin-top: 8px; }
.cp-tecnico summary { list-style: none; display: inline-flex; align-items: center; gap: 2px; min-height: 32px; color: var(--gray); font-size: 13px; font-weight: 700; cursor: pointer; }
.cp-tecnico summary::-webkit-details-marker { display: none; }
.cp-tecnico summary .chev { width: 14px; height: 14px; transition: transform .2s; }
.cp-tecnico[open] summary .chev { transform: rotate(90deg); }
.cp-tec-corpo { display: grid; gap: 6px; padding: 2px 0 6px; }
.cp-tec-arq { font-size: 12px; color: var(--gray); overflow-wrap: anywhere; }
.cp-tec-corpo ul { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
.alertas.seguranca { background: var(--acc-soft); color: var(--black); border-color: var(--acc-linha); }
.alertas.seguranca svg { color: var(--acc-linha); }

/* ícone do app (Aparência › Ícone): Órbita viva · Respiro · Onda · Obturador · Marca. O botão do meio e a marca do chat mudam junto */
.ic-logo { width: 56%; height: 56%; object-fit: contain; }
.tab-agente[data-icone="marca"], .marca-bola.ic-marca { background: var(--acc); }
.tab-agente .mk { width: 34px; height: 34px; }
.marca-bola.pequena .mk { width: 26px; height: 26px; } .marca-bola.grande .mk { width: 54px; height: 54px; }

/* a marca viva (estudo de ideias de ícone, conceitos 1, 2, 3 e 7). Três estados: parado (quase não mexe), pensando
   (.chat.pensando: esperando a resposta) e respondeu (.resp: uma vez, sai no animationend). Só transform e opacidade. */
.mk { overflow: visible; }
.mk * { transform-box: view-box; }
/* Órbita viva */
.mk-orbita .mk-sats { transform-origin: 24px 24px; animation: mk-gira 26s linear infinite; }
.mk-orbita .mk-nuc { transform-origin: 24px 24px; animation: mk-respira 4.2s ease-in-out infinite; }
.mk-orbita .mk-junta { transform-origin: 24px 24px; }
.chat.pensando .mk-orbita .mk-sats { animation: mk-gira 1.25s cubic-bezier(.45,.05,.55,.95) infinite; }
.chat.pensando .mk-orbita .mk-sats circle { transform-box: fill-box; transform-origin: center; animation: mk-incha .625s ease-in-out infinite alternate; }
.chat.pensando .mk-orbita .mk-nuc { animation: mk-respira .9s ease-in-out infinite; }
.mk-orbita.resp .mk-junta { animation: mk-recolhe .7s cubic-bezier(.3,.7,.2,1); }
.mk-orbita.resp .mk-nuc { animation: mk-estala .7s cubic-bezier(.3,.7,.2,1); }
/* Respiro */
.mk-respiro .mk-anel { transform-origin: 24px 24px; animation: mk-respira2 5s ease-in-out infinite; }
.mk-respiro .mk-arco { transform-origin: 24px 24px; opacity: 0; transition: opacity .3s; }
.mk-respiro .mk-pt { transform-origin: 24px 24px; }
.chat.pensando .mk-respiro .mk-arco { opacity: 1; animation: mk-gira 1.1s linear infinite; }
.chat.pensando .mk-respiro .mk-anel { animation: mk-respira2 1.6s ease-in-out infinite; stroke-opacity: .55; }
.chat.pensando .mk-respiro .mk-pt { animation: mk-respira 1.6s ease-in-out infinite; }
.mk-respiro.resp .mk-anel { animation: mk-onda-anel .75s cubic-bezier(.3,.7,.2,1); }
.mk-respiro.resp .mk-pt { animation: mk-estala .75s cubic-bezier(.3,.7,.2,1); }
/* Onda */
.mk-onda .mk-amp { transform-origin: 24px 24px; transform: scaleY(.35); transition: transform .5s cubic-bezier(.3,.7,.2,1); }
.mk-onda .mk-wv { animation: mk-corre 5s linear infinite; }
.chat.pensando .mk-onda .mk-amp { transform: scaleY(1.5); }
.chat.pensando .mk-onda .mk-wv { animation-duration: .7s; }
.mk-onda.resp .mk-amp { animation: mk-pico .8s cubic-bezier(.3,.7,.2,1); }
/* Obturador */
.mk-obturador .mk-lam { transform-origin: 24px 24px; }
.mk-obturador .mk-lamg { transform-origin: 24px 24px; animation: mk-gira 40s linear infinite; }
.mk-obturador .mk-nuc { transform-origin: 24px 24px; }
.chat.pensando .mk-obturador .mk-lamg { animation: mk-gira 2.2s linear infinite; }
.chat.pensando .mk-obturador .mk-nuc { animation: mk-abre 1.1s ease-in-out infinite alternate; }
.mk-obturador.resp .mk-lam { animation: mk-expande .75s cubic-bezier(.3,.7,.2,1); }
.mk-obturador.resp .mk-nuc { animation: mk-estala .75s cubic-bezier(.3,.7,.2,1); }
@keyframes mk-gira { to { transform: rotate(360deg); } }
@keyframes mk-respira { 50% { transform: scale(1.07); } }
@keyframes mk-respira2 { 50% { transform: scale(.92); } }
@keyframes mk-incha { to { transform: scale(.72); } }
@keyframes mk-recolhe { 40% { transform: scale(.25) rotate(120deg); } }
@keyframes mk-estala { 0% { transform: scale(1); } 35% { transform: scale(1.32); } 70% { transform: scale(.94); } }
@keyframes mk-onda-anel { 0% { transform: scale(1); } 35% { transform: scale(1.2); stroke-width: 1.5; } 70% { transform: scale(.96); } }
@keyframes mk-corre { to { transform: translateX(-16px); } }
@keyframes mk-pico { 0% { transform: scaleY(.35); } 30% { transform: scaleY(2.2); } 60% { transform: scaleY(.1); } 100% { transform: scaleY(.35); } }
@keyframes mk-abre { from { transform: scale(1.05); } to { transform: scale(.6); } }
@keyframes mk-expande { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.18) rotate(40deg); } 100% { transform: scale(1) rotate(60deg); } }
@keyframes mk-esmaece { 50% { opacity: .5; } }
/* menos movimento: nada gira nem pula; "pensando" vira só um esmaecer lento */
@media (prefers-reduced-motion: reduce) {
  .mk, .mk * { animation: none !important; transition: none !important; }
  .chat.pensando .mk { animation: mk-esmaece 1.8s ease-in-out infinite !important; }
  .chat.pensando .mk-respiro .mk-arco { opacity: 1; }
}
.icone-caixa { padding: 14px 12px 10px; }
.icones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.icone-opcao .amostra-nome { font-size: 11.5px; text-align: center; line-height: 1.2; }
.icone-opcao { display: grid; justify-items: center; gap: 6px; }
.icone-moldura { position: relative; display: block; width: 100%; max-width: 74px; aspect-ratio: 1; border-radius: 22.5%; overflow: visible; }
.icone-amostra { display: block; width: 100%; height: 100%; border-radius: 22.5%; object-fit: cover; box-shadow: 0 2px 8px rgb(0 0 0 / .14); }
.icone-opcao[aria-pressed="true"] .icone-amostra { outline: 2.5px solid var(--acc-linha); outline-offset: 3px; }
.icone-moldura .amostra-ok { position: absolute; right: -6px; bottom: -6px; }
.icone-aviso { margin: 12px 2px 0; }

/* puxar pra atualizar (Aprovações, Pessoas, Painel): o indicador fica entre o topo e a lista */
.puxar { flex: none; height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: height .2s ease; }
.puxar.arrastando { transition: none; }
.puxar i { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--gray3); border-top-color: var(--gray); transform: rotate(calc(var(--p, 0) * 270deg)); opacity: calc(.35 + var(--p, 0) * .65); }
.puxar.pronto i { border-top-color: var(--black); }
.puxar.girando i { opacity: 1; border-top-color: var(--black); animation: orbita .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .puxar.girando i { animation-duration: 2.4s; } }

/* 03/11: Pessoas e Grupos moraram pro Painel (cartão roxo) e a lista ganhou a volta pro Painel no topo */
.qd.q-pessoas { background: #7C5CDB; }
.tela > .volta-painel { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--pill); padding: 4px 14px 4px 4px; min-height: 44px; font-weight: 700; font-size: 14px; color: var(--black); margin: calc(10px + var(--top)) 0 -6px 12px; text-decoration: none; }
.tela > .volta-painel span.bt { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.tela > .volta-painel svg { width: 18px; height: 18px; }
.tela > .volta-painel + .topo { padding-top: 8px; }