/* ============================================================
   automate.business: agentic AI layer
   Components for the AI OS surfaces. Loaded alongside app.css.
   Same calm financial-instrument system; the agent is evidenced,
   honest about confidence, and always gated by a human.
   ============================================================ */

/* sidebar AI nav accents */
.nav a.ai-active { background: var(--accent-ink); color:#fff; }
.nav a.ai-active svg { color:#6fd3a3; }
.nav .group-label.intel { color: var(--accent); }

/* ---- the agent avatar / glyph ---- */
.agent-av { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-ink); display:grid; place-items:center; flex:none; position:relative; }
.agent-av svg { width: 17px; height:17px; }
.agent-av.sm { width: 24px; height:24px; border-radius:7px; } .agent-av.sm svg { width:14px;height:14px; }
.agent-av.lg { width: 40px; height:40px; border-radius:10px; } .agent-av.lg svg { width:22px;height:22px; }
.agent-av .live { position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%; background: var(--ok); border:2px solid var(--surface); }
.agent-av .live.work { background: var(--proc); animation: pulse 1.5s ease-in-out infinite; }

/* ---- command bar ---- */
.cmd { background: var(--surface); border:1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 6px 6px 6px 16px; display:flex; align-items:center; gap:12px; }
.cmd:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cmd .spark { color: var(--accent); display:grid; place-items:center; flex:none; }
.cmd .spark svg { width:19px; height:19px; }
.cmd .ph { flex:1; font-size: var(--t-lg); color: var(--ink-3); }
.cmd .ph b { color: var(--ink); font-weight:500; }
.cmd .mk { font-family: var(--mono); font-size: 11px; border:1px solid var(--line-2); border-radius:5px; padding:2px 7px; color: var(--ink-4); }
.cmd .run { background: var(--accent); color:#fff; border:none; border-radius: var(--r); padding: 10px 16px; font-family: var(--sans); font-weight:600; font-size: var(--t-md); cursor:pointer; display:flex; align-items:center; gap:7px; }
.cmd .run svg { width:15px; height:15px; }

.suggline { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.sugg { display:inline-flex; align-items:center; gap:8px; background: var(--surface); border:1px solid var(--line-2); border-radius: 20px; padding: 7px 13px; font-size: var(--t-base); color: var(--ink-2); cursor:pointer; font-weight:500; }
.sugg:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.sugg svg { width:14px; height:14px; color: var(--accent); }

/* ---- autonomy pills (tiered) ---- */
.auton { display:inline-flex; align-items:center; gap:6px; font-size: var(--t-sm); font-weight:700; line-height:1; padding: 4px 9px 4px 7px; border-radius: 6px; border:1px solid; white-space:nowrap; }
.auton svg { width:13px; height:13px; }
.auton.auto     { color: var(--ok);    background: var(--ok-bg);    border-color: var(--ok-line); }
.auton.approval { color: var(--attn);  background: var(--attn-bg);  border-color: var(--attn-line); }
.auton.suggest  { color: var(--ink-3); background: var(--surface-2); border-color: var(--line-2); }
.auton.gated    { color: var(--flag);  background: var(--flag-bg);  border-color: var(--flag-line); }

/* segmented autonomy selector */
.auton-seg { display:inline-flex; background: var(--surface-2); border:1px solid var(--line-2); border-radius: 7px; padding:2px; gap:2px; }
.auton-seg button { font-family: var(--sans); font-size: var(--t-sm); font-weight:600; color: var(--ink-3); background:transparent; border:none; padding: 6px 11px; border-radius:5px; cursor:pointer; display:flex; align-items:center; gap:6px; }
.auton-seg button svg { width:13px; height:13px; }
.auton-seg button.on.auto { background: var(--ok-bg); color: var(--ok); box-shadow: var(--shadow-sm); }
.auton-seg button.on.appr { background: var(--attn-bg); color: var(--attn); box-shadow: var(--shadow-sm); }
.auton-seg button.on.sugg { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---- agent activity / work cards ---- */
.workcard { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding: 15px 16px; box-shadow: var(--shadow-sm); }
.workcard.run { border-color: var(--proc-line); }
.workcard .wc-top { display:flex; align-items:center; gap:11px; }
.workcard .wc-task { font-weight:700; font-size: var(--t-md); }
.workcard .wc-sub { font-size: var(--t-xs); color: var(--ink-3); margin-top:1px; }
.workcard .wc-prog { margin-top:12px; height:6px; border-radius:4px; background: var(--surface-3); overflow:hidden; }
.workcard .wc-prog i { display:block; height:100%; background: var(--proc); border-radius:4px; }
.workcard .wc-prog i.done { background: var(--ok); }
.workcard .wc-meta { display:flex; align-items:center; gap:10px; margin-top:10px; font-size: var(--t-xs); color: var(--ink-3); }

/* ---- trace / plan steps ---- */
.trace { position:relative; }
.tstep { display:grid; grid-template-columns: 26px 1fr; gap:12px; }
.tstep .rail { position:relative; display:flex; justify-content:center; }
.tstep .node { width: 22px; height:22px; border-radius:50%; background: var(--surface); border:2px solid var(--ok); display:grid; place-items:center; flex:none; z-index:1; margin-top:2px; }
.tstep .node svg { width:11px; height:11px; color: var(--ok); }
.tstep.now .node { border-color: var(--proc); } .tstep.now .node .pp { width:7px;height:7px;border-radius:50%;background:var(--proc); animation:pulse 1.4s infinite; }
.tstep.todo .node { border-color: var(--line-2); } .tstep.todo .node { color: var(--ink-4); }
.tstep .line { position:absolute; top:22px; bottom:-8px; width:2px; background: var(--line); }
.tstep:last-child .line { display:none; }
.tstep .body { padding-bottom: 18px; }
.tstep .t-act { font-weight:600; font-size: var(--t-md); }
.tstep .t-det { font-size: var(--t-sm); color: var(--ink-2); margin-top:5px; line-height:1.5; }

.toolchip { display:inline-flex; align-items:center; gap:6px; font-family: var(--mono); font-size: 11px; font-weight:500; color: var(--ink-2); background: var(--surface-2); border:1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.toolchip svg { width:12px; height:12px; color: var(--accent); }
.toolchip .ok { color: var(--ok); }

/* reasoning panel */
.reason { background: var(--accent-soft); border:1px solid var(--accent-line); border-radius: var(--r); padding: 11px 13px; font-size: var(--t-base); color: var(--accent-ink); line-height:1.55; display:flex; gap:10px; }
.reason svg { width:15px; height:15px; flex:none; margin-top:2px; color: var(--accent); }
.reason b { font-weight:700; }

/* confidence */
.conf { display:inline-flex; align-items:center; gap:8px; font-size: var(--t-xs); color: var(--ink-3); white-space:nowrap; }
.conf .bar { width: 60px; height:6px; border-radius:4px; background: var(--line-2); overflow:hidden; }
.conf .bar i { display:block; height:100%; background: var(--ok); }
.conf.med .bar i { background: var(--attn); }
.conf.low .bar i { background: var(--flag); }
.conf .pct { font-family: var(--mono); font-weight:600; }

/* ---- chat / Ask ---- */
.msg { display:flex; gap:12px; margin-bottom: 22px; }
.msg.user { justify-content:flex-end; }
.msg .bub { max-width: 76%; border-radius: 12px; padding: 12px 15px; font-size: var(--t-md); line-height:1.55; }
.msg.user .bub { background: var(--accent-ink); color:#fff; border-bottom-right-radius: 4px; }
.msg.agent .bub { background: var(--surface); border:1px solid var(--line); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); color: var(--ink); }
.msg.agent .bub h4 { font-size: var(--t-md); font-weight:700; margin:0 0 8px; }
.cite { display:inline-flex; align-items:center; gap:5px; font-family: var(--mono); font-size: 11px; color: var(--accent-ink); background: var(--accent-soft); border:1px solid var(--accent-line); border-radius: 5px; padding: 1px 6px; vertical-align: baseline; text-decoration:none; }
.cite svg { width:10px; height:10px; }

.answer-tbl { width:100%; border-collapse:separate; border-spacing:0; font-size: var(--t-sm); margin-top:10px; border:1px solid var(--line); border-radius: var(--r-sm); overflow:hidden; }
.answer-tbl th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color: var(--ink-4); font-weight:600; padding:7px 11px; background: var(--surface-2); border-bottom:1px solid var(--line); }
.answer-tbl th.r, .answer-tbl td.r { text-align:right; }
.answer-tbl td { padding:8px 11px; border-bottom:1px solid var(--line); }
.answer-tbl tr:last-child td { border-bottom:none; }
.answer-tbl td.m { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- skill cards ---- */
.skill { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; }
.skill .sk-top { display:flex; align-items:center; gap:11px; }
.skill .sk-ic { width:36px; height:36px; border-radius:9px; background: var(--surface-2); border:1px solid var(--line-2); display:grid; place-items:center; }
.skill .sk-ic svg { width:18px; height:18px; color: var(--accent-ink); }
.skill h3 { font-size: var(--t-md); font-weight:700; }
.skill .sk-desc { font-size: var(--t-sm); color: var(--ink-2); margin-top:10px; line-height:1.5; flex:1; }
.skill .sk-foot { margin-top:14px; padding-top:13px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.skill .sk-stat { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--mono); }

/* generic AI section header */
.ai-eyebrow { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-size: var(--t-sm); font-weight:600; color: var(--accent-ink); background: var(--accent-soft); border:1px solid var(--accent-line); border-radius:20px; padding:5px 12px; }
.ai-eyebrow svg { width:14px; height:14px; color: var(--accent); }