/* Painel do Téo — direção B ("cockpit"): roxo do Téo, números grandes, anel de folga, cards com borda. */
:root {
  --fundo: #F4F2FB; --card: #FFFFFF; --texto: #16112A; --apoio: #5E5873; --marca: #6D28D9; --linha: #E6E1F5;
  --ok: #166534; --atencao: #92400E; --erro: #B91C1C; --trilho: #ECE8F8; --sobre-marca: #FFFFFF;
  --marca-suave: rgb(109 40 217 / .10); --ok-suave: rgb(22 101 52 / .10); --atencao-suave: rgb(146 64 14 / .10); --erro-suave: rgb(185 28 28 / .10);
  --vidro: rgb(244 242 251 / .82); --veu: rgb(22 17 42 / .40); --toque: rgb(22 17 42 / .05);
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px;
  --margem: 16px;
  --r-chip: 999px; --r-botao: 14px; --r-campo: 12px; --r-card: 16px; --r-folha: 24px;
  --ease-saida: cubic-bezier(.2, .8, .2, 1); --ease-mola: cubic-bezier(.34, 1.4, .64, 1);
  --t-toque: 120ms; --t-curto: 200ms; --t-folha: 340ms;
  --topo-seguro: env(safe-area-inset-top, 0px); --base-segura: env(safe-area-inset-bottom, 0px);
  --barra-abas: 60px;
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --fundo: #0D0B17; --card: #17142A; --texto: #F3F0FF; --apoio: #A39DBD; --marca: #A78BFA; --linha: #2A2542;
  --ok: #4ADE80; --atencao: #FBBF24; --erro: #F87171; --trilho: #2A2542; --sobre-marca: #16112A;
  --marca-suave: rgb(167 139 250 / .14); --ok-suave: rgb(74 222 128 / .12); --atencao-suave: rgb(251 191 36 / .12); --erro-suave: rgb(248 113 113 / .13);
  --vidro: rgb(13 11 23 / .80); --veu: rgb(0 0 0 / .55); --toque: rgb(243 240 255 / .06);
  color-scheme: dark;
}
@media (min-width: 400px) { :root { --margem: 20px; } }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); }
body {
  font: 400 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none; min-height: 100vh; min-height: 100dvh;
}
button, input, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
a { color: var(--marca); }
.num { font-variant-numeric: tabular-nums; }
.apoio { color: var(--apoio); font-size: 13px; line-height: 1.35; }
.curto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oculto { display: none !important; }
svg.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- moldura ---------- */
#app { max-width: 600px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; }
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--e3);
  padding: calc(14px + var(--topo-seguro)) var(--margem) 10px; background: var(--fundo);
  transition: background var(--t-curto), box-shadow var(--t-curto);
}
.topo.rolou { background: var(--vidro); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 1px 0 var(--linha); }
.topo h1 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo .voltar { margin-left: -8px; }
.chip-pc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-chip); background: var(--card); border: 1px solid var(--linha); color: var(--ok); white-space: nowrap; }
.chip-pc::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-pc.desligado { color: var(--erro); }
.btn-icone { width: 40px; height: 40px; border-radius: 12px; border: 0; background: transparent; color: var(--texto); display: grid; place-items: center; cursor: pointer; position: relative; transition: background var(--t-toque), transform var(--t-toque); }
.btn-icone:active { background: var(--toque); transform: scale(.94); }
.btn-icone.girando svg { animation: girar 900ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

main { padding: 0 0 calc(var(--barra-abas) + var(--base-segura) + 24px); }
main.com-rodape { padding-bottom: calc(var(--barra-abas) + var(--base-segura) + 96px); }
.tela { animation: entrar var(--t-curto) var(--ease-saida); }
.tela.filha { animation: entrar-filha 260ms var(--ease-saida); }
@keyframes entrar { from { opacity: 0; } }
@keyframes entrar-filha { from { opacity: 0; transform: translateX(24px); } }

/* ---------- barra de abas ---------- */
.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 600px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--barra-abas) + var(--base-segura)); padding-bottom: var(--base-segura);
  background: var(--vidro); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--linha);
}
.abas button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--apoio); cursor: pointer; position: relative; }
.abas button svg { width: 24px; height: 24px; transition: transform var(--t-toque) var(--ease-mola); }
.abas button:active svg { transform: scale(.88); }
.abas button[aria-current="page"] { color: var(--marca); }
.abas button[aria-current="page"] svg { stroke-width: 2.3; }
.bolha { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--erro); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
:root[data-tema="escuro"] .bolha { color: #16112A; }

/* ---------- blocos ---------- */
.secao { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); margin: var(--e6) var(--margem) var(--e2); }
.secao h2 { margin: 0; font-size: 12px; font-weight: 700; color: var(--apoio); letter-spacing: .06em; text-transform: uppercase; }
.secao .acao { font-size: 13px; font-weight: 600; color: var(--marca); background: none; border: 0; padding: 6px 0; cursor: pointer; }
.card { background: var(--card); border: 1px solid var(--linha); border-radius: var(--r-card); margin: 0 var(--margem); overflow: hidden; }
.card + .card { margin-top: var(--e3); }
.card.pad { padding: var(--e4); }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); margin: var(--e2) var(--margem) 0; }
.kpis .card { margin: 0; padding: 14px var(--e4) var(--e4); text-align: left; cursor: pointer; transition: transform var(--t-toque); border-style: solid; font: inherit; color: inherit; }
.kpis .card:active { transform: scale(.97); }
.kpi-rotulo { font-size: 13px; color: var(--apoio); font-weight: 500; }
.kpi-num { font-size: 34px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 2px 0; }
.kpi-num.atencao { color: var(--atencao); } .kpi-num.erro { color: var(--erro); } .kpi-num.ok { color: var(--ok); } .kpi-num.marca { color: var(--marca); }

/* lista agrupada */
.linha { display: flex; align-items: center; gap: var(--e3); padding: 12px var(--e4); min-height: 60px; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; position: relative; transition: background var(--t-toque); }
button.linha:active, a.linha:active { background: var(--toque); }
a.linha { color: inherit; text-decoration: none; }
.linha + .linha::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; border-top: 1px solid var(--linha); }
.linha.sem-icone + .linha.sem-icone::before, .linha.sem-icone + .linha::before { left: var(--e4); }
.linha .meio { flex: 1; min-width: 0; }
.linha .titulo { font-size: 15px; font-weight: 600; line-height: 1.3; }
.linha .titulo.normal { font-weight: 500; }
.linha .valor { font-size: 14px; color: var(--apoio); white-space: nowrap; font-variant-numeric: tabular-nums; }
.linha .seta { color: var(--apoio); opacity: .7; width: 18px; height: 18px; }
.tile { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--marca-suave); color: var(--marca); }
.tile.ok { background: var(--ok-suave); color: var(--ok); } .tile.erro { background: var(--erro-suave); color: var(--erro); }
.tile.atencao { background: var(--atencao-suave); color: var(--atencao); } .tile.neutro { background: var(--trilho); color: var(--apoio); }

/* contas e anel */
.contas { display: flex; gap: var(--e4); align-items: center; padding: var(--e4); }
.anel { flex: none; width: 76px; height: 76px; position: relative; }
.anel svg { width: 76px; height: 76px; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 7; }
.anel .fundo-anel { stroke: var(--trilho); }
.anel .valor-anel { stroke: var(--marca); stroke-linecap: round; transition: stroke-dashoffset 600ms var(--ease-saida); }
.anel span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.conta { padding: 10px var(--e4); }
.conta + .conta { border-top: 1px solid var(--linha); }
.conta-topo { display: flex; align-items: center; gap: var(--e2); }
.conta-nome { font-weight: 600; flex: 1; min-width: 0; }
.selo { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-chip); background: var(--marca-suave); color: var(--marca); white-space: nowrap; }
.selo.ok { background: var(--ok-suave); color: var(--ok); } .selo.erro { background: var(--erro-suave); color: var(--erro); } .selo.atencao { background: var(--atencao-suave); color: var(--atencao); } .selo.neutro { background: var(--trilho); color: var(--apoio); }
.barras { display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 12px; color: var(--apoio); }
.barras b { font-weight: 600; text-align: right; color: var(--texto); font-variant-numeric: tabular-nums; }
.barras b.atencao { color: var(--atencao); } .barras b.erro { color: var(--erro); }
.barra { height: 6px; border-radius: 3px; background: var(--trilho); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 3px; background: var(--marca); transition: width 600ms var(--ease-saida); }
.barra i.atencao { background: var(--atencao); } .barra i.erro { background: var(--erro); }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: var(--r-botao); border: 0; font-size: 16px; font-weight: 650; cursor: pointer; transition: transform var(--t-toque), filter var(--t-toque), opacity var(--t-toque); white-space: nowrap; }
.btn:active { transform: scale(.97); filter: brightness(.94); }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn.cheio { background: var(--marca); color: var(--sobre-marca); }
.btn.tonal { background: var(--marca-suave); color: var(--marca); }
.btn.perigo { background: var(--erro-suave); color: var(--erro); }
.btn.perigo-cheio { background: var(--erro); color: #fff; }
:root[data-tema="escuro"] .btn.perigo-cheio { color: #16112A; }
.btn.texto { background: none; color: var(--marca); height: 44px; padding: 0 12px; }
.btn.largo { width: 100%; }
.btn.medio { height: 40px; font-size: 14px; padding: 0 14px; border-radius: 12px; }
.rodape-acao { position: fixed; left: 0; right: 0; z-index: 25; max-width: 600px; margin: 0 auto; bottom: calc(var(--barra-abas) + var(--base-segura)); padding: 24px var(--margem) 12px; background: linear-gradient(to bottom, transparent, var(--fundo) 40%); pointer-events: none; }
.rodape-acao > * { pointer-events: auto; }
.carregando-btn::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: girar 700ms linear infinite; }

/* chips de filtro */
.chips { display: flex; gap: var(--e2); overflow-x: auto; scroll-padding-inline: var(--margem); padding: 2px var(--margem) 4px; scrollbar-width: none; scroll-snap-type: x proximity; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-chip); border: 1px solid var(--linha); background: var(--card); color: var(--texto); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; scroll-snap-align: start; transition: transform var(--t-toque); }
.chips button:active { transform: scale(.95); }
.chips button[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.chips button small { font-weight: 500; opacity: .8; margin-left: 4px; font-size: 12px; }

/* campos */
.campo { width: 100%; min-height: 48px; border-radius: var(--r-campo); border: 1px solid var(--linha); background: var(--card); padding: 12px 14px; font-size: 16px; outline: none; transition: border-color var(--t-toque), box-shadow var(--t-toque); }
.campo:focus { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
textarea.campo { resize: none; line-height: 1.45; }
.busca { position: relative; margin: var(--e2) var(--margem) var(--e3); }
.busca svg { position: absolute; left: 14px; top: 14px; color: var(--apoio); }
.busca .campo { padding-left: 44px; }
.codigo { font: 13px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; }

/* textos longos (markdown simples) */
.md { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.md h1, .md h2, .md h3 { line-height: 1.25; margin: 1.2em 0 .4em; }
.md h1 { font-size: 21px; } .md h2 { font-size: 18px; } .md h3 { font-size: 16px; }
.md p { margin: .5em 0; } .md ul, .md ol { padding-left: 1.2em; margin: .4em 0; } .md li { margin: .2em 0; }
.md code { font: 13px ui-monospace, Consolas, monospace; background: var(--trilho); padding: 1px 5px; border-radius: 6px; }
.md pre { background: var(--trilho); padding: 10px 12px; border-radius: 10px; overflow-x: auto; font: 12.5px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: .6em 0; padding: 6px 12px; border-left: 3px solid var(--marca); color: var(--apoio); }
.md table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 13px; }
.md td, .md th { border: 1px solid var(--linha); padding: 4px 8px; vertical-align: top; }
.md hr { border: 0; border-top: 1px solid var(--linha); margin: 1em 0; }
.md mark, mark { background: var(--atencao-suave); color: inherit; border-radius: 3px; padding: 0 2px; }

/* passos ao vivo */
.passos { list-style: none; margin: 0; padding: 0; }
.passos li { display: flex; gap: 10px; padding: 7px 0; font-size: 14px; line-height: 1.35; }
.passos li .hora { color: var(--apoio); font-size: 12px; min-width: 38px; padding-top: 1px; font-variant-numeric: tabular-nums; }
.passos li:last-child .txt { font-weight: 600; }
.pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; animation: pulso 1.4s ease-in-out infinite; margin-right: 6px; }
@keyframes pulso { 50% { opacity: .3; transform: scale(.8); } }

/* conversa do histórico */
.bolhas { display: flex; flex-direction: column; gap: 10px; padding: var(--e2) var(--margem); }
.bolhas .msg { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.bolhas .msg.user { align-self: flex-end; background: var(--marca); color: var(--sobre-marca); border-bottom-right-radius: 6px; white-space: pre-wrap; }
.bolhas .msg.assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--linha); border-bottom-left-radius: 6px; }
.bolhas .quando { font-size: 11px; opacity: .75; margin-top: 4px; }

/* estados */
.vazio { text-align: center; padding: 40px 28px; }
.vazio .tile { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 14px; }
.vazio .tile svg { width: 30px; height: 30px; }
.vazio h3 { margin: 0 0 6px; font-size: 17px; }
.vazio p { margin: 0 auto 16px; color: var(--apoio); max-width: 320px; font-size: 14px; }
.esqueleto { background: linear-gradient(90deg, var(--trilho) 25%, var(--card) 50%, var(--trilho) 75%); background-size: 200% 100%; animation: brilho 1.2s ease-in-out infinite; border-radius: 10px; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.aviso-topo { margin: 0 var(--margem) var(--e3); padding: 10px 14px; border-radius: 12px; font-size: 13px; background: var(--atencao-suave); color: var(--texto); display: flex; gap: 10px; align-items: center; }
.aviso-topo svg { color: var(--atencao); }
.atualizado { text-align: center; font-size: 12px; color: var(--apoio); margin: var(--e4) 0 0; }

/* folha de baixo */
.veu { position: fixed; inset: 0; z-index: 50; background: var(--veu); opacity: 0; transition: opacity var(--t-folha) var(--ease-saida); }
.veu.aberto { opacity: 1; }
.folha { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-width: 600px; margin: 0 auto; max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-folha) var(--r-folha) 0 0; transform: translateY(100%); transition: transform var(--t-folha) var(--ease-saida); padding-bottom: var(--base-segura); }
.folha.aberta { transform: none; }
.folha .alca { width: 36px; height: 5px; border-radius: 3px; background: var(--linha); margin: 8px auto 4px; flex: none; }
.folha .cabeca { padding: 8px var(--e5) 4px; flex: none; touch-action: none; }
.folha .cabeca h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.folha .corpo { padding: 8px var(--e5) var(--e5); overflow-y: auto; overscroll-behavior: contain; }
.folha .acoes { display: grid; gap: 10px; padding: 8px var(--e5) var(--e5); flex: none; }
.folha .acoes.dupla { grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) {
  .folha { left: 50%; right: auto; bottom: 50%; width: 440px; border-radius: var(--r-folha); transform: translate(-50%, 60%); opacity: 0; transition: transform var(--t-folha) var(--ease-saida), opacity var(--t-curto); max-height: 80vh; }
  .folha.aberta { transform: translate(-50%, 50%); opacity: 1; }
  .folha .alca { display: none; }
}

/* aviso no rodapé */
.toast { position: fixed; left: 50%; z-index: 60; bottom: calc(var(--barra-abas) + var(--base-segura) + 16px); transform: translate(-50%, 20px); opacity: 0; background: var(--texto); color: var(--fundo); padding: 12px 16px; border-radius: 14px; font-size: 14px; font-weight: 500; max-width: calc(100% - 32px); width: max-content; box-shadow: 0 12px 32px rgb(0 0 0 / .2); transition: transform var(--t-curto) var(--ease-saida), opacity var(--t-curto); pointer-events: none; }
.toast.ver { transform: translate(-50%, 0); opacity: 1; }

/* projetos */
.pontos { display: flex; gap: 6px; align-items: center; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--apoio); opacity: .5; }
.ponto.ok { background: var(--ok); opacity: 1; } .ponto.erro { background: var(--erro); opacity: 1; } .ponto.atencao { background: var(--atencao); opacity: 1; }
.dados { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; }
.dados dt { color: var(--apoio); } .dados dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.recolhe { max-height: 7.5em; overflow: hidden; position: relative; }
.recolhe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5em; background: linear-gradient(transparent, var(--card)); }
.recolhe.aberto { max-height: none; } .recolhe.aberto::after { display: none; }

/* aprovação */
.pedido .pergunta { font-size: 16px; font-weight: 650; line-height: 1.35; margin: 2px 0 8px; }
.pedido pre { margin: 0 0 12px; background: var(--trilho); padding: 10px 12px; border-radius: 10px; font: 12.5px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow-y: auto; }
.pedido .botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
.chips button { position: relative; }
.chips button::after { content: ""; position: absolute; inset: -4px 0; } /* área de toque de 44 px */