/* ============================================================================
   CEO_UI · Design System — estrutura do ABDO design-kit + cores Brixia v27 (teal)
   Marca: teal #42D7B4 (era dourado #d1ac70 no abdo). DNA: Inter, cantos suaves, hairlines.
   Tema dark (cockpit) como default; tokens no mesmo formato do abdo.
============================================================================ */
@font-face { font-family:'Inter'; font-weight:400; font-display:swap; src:url('/static/vendor/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:500; font-display:swap; src:url('/static/vendor/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-display:swap; src:url('/static/vendor/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-display:swap; src:url('/static/vendor/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:400; font-display:swap; src:url('/static/vendor/fonts/jbmono-400.woff2') format('woff2'); }

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0C1A16;   /* teal-black (v27 brand-950 tint) */
  --surface:   #13241F;
  --surface-2: #1A2E28;
  --line:      #243A33;
  --hairline:  #32483F;
  --line-soft: #1B2A24;
  --text:      #E2E8E5;
  --text-dim:  #9FB2AA;
  --text-faint:#6F857C;
  --accent:      #42D7B4;  /* marca teal (v27) — preenchimento */
  --accent-strong:#5FE3C4;
  --accent-ink:  #6FE0C4;  /* teal como TEXTO/ícone sobre dark */
  --accent-soft: rgba(66,215,180,.14);
  --on-accent:   #06140F;  /* texto sobre o teal */
  --success:#2EBD93; --warning:#E0AF68; --danger:#F2776E; --info:#5B9BF0; --special:#B088EC;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
  --radius: 14px;
}
[data-theme="light"] {
  color-scheme: light;
  --bg:#FBFEFD; --surface:#F1F7F5; --surface-2:#E6F0EC; --line:#D6E5E0; --hairline:#BBD3CC; --line-soft:#EAF2EF;
  --text:#0E1A16; --text-dim:#46615A; --text-faint:#6B847C;
  --accent:#26B896; --accent-strong:#1D8F6E; --accent-ink:#166652; --accent-soft:rgba(38,184,150,.16); --on-accent:#FFFFFF;
  --success:#1D8F6E; --warning:#B5832B; --danger:#C23934; --info:#1F5FCC; --special:#7C3FCF;
  --shadow:0 1px 2px rgba(8,30,24,.04), 0 8px 24px rgba(8,30,24,.06);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif; line-height:1.5; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--accent-ink); text-decoration:none; }
code, .mono { font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }

/* type scale (abdo) */
.eyebrow { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.muted { color:var(--text-faint); font-size:12.5px; }

/* componentes (abdo) */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); }
.btn { background:var(--accent); color:var(--on-accent); border:0; border-radius:10px; padding:10px 16px;
  font:inherit; font-weight:600; font-size:14px; cursor:pointer; transition:background .15s, transform .05s; }
.btn:hover { background:var(--accent-strong); } .btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.5; cursor:default; }
.btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
.btn.ghost:hover { border-color:var(--accent); background:var(--accent-soft); }
.pill { display:inline-block; font-size:11px; border-radius:20px; padding:2px 10px; border:1px solid var(--line); color:var(--text-dim); }
.pill.accent { color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft); }
.brandmark { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px;
  background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:800; flex:none; }

/* ---- shell do chat ------------------------------------------------------- */
.app { display:flex; flex-direction:column; height:100dvh; }
.topbar { display:flex; align-items:center; gap:11px; padding:11px 18px; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px); }
.topbar b { font-weight:700; letter-spacing:-.02em; font-size:14.5px; }
.topbar .status { font-size:12px; color:var(--text-faint); }
.topbar .right { margin-left:auto; display:flex; align-items:center; gap:10px; }

.thread { flex:1; overflow-y:auto; width:100%; }
.thread-inner { max-width:880px; margin:0 auto; padding:20px 16px 140px; }

.turn { margin:18px 0; }
.role { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-faint); margin:0 0 6px 2px; }
.role .av { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-size:10px; font-weight:800; }
.role.user .av { background:var(--surface-2); color:var(--text-dim); }
.role.asst .av { background:var(--accent); color:var(--on-accent); }

.bubble { padding:12px 15px; border-radius:14px; white-space:pre-wrap; word-wrap:break-word; line-height:1.6; }
.turn.user .bubble { background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.turn.asst .bubble { background:var(--surface); border:1px solid var(--line); }

.thinking { color:var(--text-faint); font-style:italic; border-left:2px solid var(--hairline); padding:4px 0 4px 11px; margin:8px 0; white-space:pre-wrap; font-size:13px; }

/* tool-call card */
.tool { margin:10px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface-2); }
.tool .th { display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:13px; font-weight:600; color:var(--accent-ink); }
.tool.read .th { color:var(--success); }
.tool .th .ic { width:15px; height:15px; }
.tool pre { margin:0; padding:0 12px 11px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-dim);
  white-space:pre-wrap; word-break:break-word; }
.tool .res { border-top:1px dashed var(--line); padding:9px 12px; font-size:12px; color:var(--text-dim);
  font-family:'JetBrains Mono',monospace; white-space:pre-wrap; word-break:break-word; max-height:240px; overflow:auto; }

/* gate card (portão) */
.gate { margin:12px 0; border:1px solid var(--accent); border-radius:14px; background:var(--accent-soft); padding:14px 16px; box-shadow:var(--shadow); }
.gate .gt { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--accent-ink); margin-bottom:4px; }
.gate .gsub { font-size:12.5px; color:var(--text-dim); margin-bottom:9px; }
.gate pre { margin:0 0 11px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px;
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.gate .btns { display:flex; gap:8px; }

.cost { color:var(--text-faint); font-size:11.5px; margin:8px 0 0 2px; }
.sys { color:var(--text-faint); font-size:12px; text-align:center; margin:10px 0; }

/* composer */
.bar { position:fixed; bottom:0; left:0; right:0; background:linear-gradient(transparent, var(--bg) 26%); padding:14px 16px; }
.composer { max-width:880px; margin:0 auto; display:flex; gap:8px; align-items:flex-end; }
.composer textarea { flex:1; resize:none; background:var(--surface); color:var(--text); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; font:inherit; font-size:14.5px; min-height:48px; max-height:200px; line-height:1.5; }
.composer textarea:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.composer .btn { align-self:flex-end; height:48px; }

/* card de operações (accordion): colapsado = só a última; expandido = lista completa */
.opcard { margin:4px 0 8px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); overflow:hidden; }
.opcard.hidden { display:none; }
.opcard-head { display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; font-size:12.5px; color:var(--text-dim); user-select:none; }
.opcard-head:hover { background:var(--surface); }
.opcard-head .ic { flex:none; opacity:.85; }
.opcard-head .op-last { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opcard-head .op-count { flex:none; font-size:10px; font-weight:700; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent); border-radius:20px; padding:1px 8px; }
.opcard-head .chev { flex:none; opacity:.5; font-size:10px; transition:transform .12s; }
.opcard.open .opcard-head .chev { transform:rotate(90deg); }
.opcard.open .opcard-head { color:var(--accent-ink); border-bottom:1px solid var(--line); }
.opcard-list { display:none; padding:3px 0; }
.opcard.open .opcard-list { display:block; }
.opline { display:flex; align-items:center; gap:8px; padding:5px 12px 5px 30px; font-size:12.5px; color:var(--text-dim); cursor:pointer; }
.opline:hover { background:var(--surface); }
.opline .ic { flex:none; font-size:11px; opacity:.85; }
.opline.read .ic { color:var(--success); }
.opline .lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opline .ots { margin-left:auto; flex:none; color:var(--text-faint); font-size:10.5px; }
.opdetail { display:none; margin:0 12px 6px 30px; padding:8px 10px; background:var(--bg); border:1px solid var(--line);
  border-radius:8px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim);
  white-space:pre-wrap; word-break:break-word; max-height:260px; overflow:auto; }
.opdetail.open { display:block; }
.rts { color:var(--text-faint); font-weight:400; font-size:11px; }

/* toggle (auto-mode) */
.toggle { display:inline-flex; align-items:center; gap:7px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:20px; padding:4px 11px; cursor:pointer; font-size:12px; font-weight:600; color:var(--text-faint); transition:.15s; }
.toggle.on { color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft); }
.toggle .dot { width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.55; }
.toggle.on .dot { opacity:1; }

::-webkit-scrollbar { width:10px; } ::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; border:3px solid var(--bg); }
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }