/* TaxOwl prototype — built on top of ../styles.css tokens. Local additions only. */
:root{
  --p-space-2xs: .25rem; --p-space-xs: .5rem; --p-space-sm: .75rem; --p-space-md: 1rem;
  --p-space-lg: 1.5rem; --p-space-xl: 2rem; --p-space-2xl: 3rem;
  --p-dur-fast: 140ms; --p-dur-med: 260ms; --p-dur-slow: 480ms;
  --p-ease: cubic-bezier(.2,.7,.2,1);
}

.proto-disclaimer{
  display:flex; align-items:center; gap:8px; font-size:11px; color:var(--color-muted);
  background:var(--color-paper-2); border-bottom:1px solid var(--color-line);
  padding:6px 16px; text-align:center; justify-content:center;
}

/* header + switchers */
.proto-header{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; padding:12px 16px; max-width:1400px; margin:0 auto}
.proto-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
.proto-brand svg{ width:32px; height:32px; flex-shrink:0}
.seg{ display:inline-flex; border:1px solid var(--color-line); border-radius:999px; padding:3px; background:var(--color-paper-2); gap:2px}
.seg button{ border:0; background:transparent; cursor:pointer; border-radius:999px; padding:6px 14px; font-size:12px; font-weight:600; color:var(--color-muted); display:inline-flex; align-items:center; gap:6px; transition: background var(--p-dur-fast) var(--p-ease), color var(--p-dur-fast) var(--p-ease)}
.seg button.active{ background:var(--color-ink); color:var(--color-paper)}
[data-theme="dark"] .seg button.active{ background:var(--color-paper-3); color:var(--color-fg)}

.proto-main{ max-width:1400px; margin:0 auto; padding:0 16px 64px}

/* dashboard grid */
.grid-3{ display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:900px){ .grid-3{ grid-template-columns:repeat(3, minmax(0,1fr))}}
.grid-2-1{ display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:900px){ .grid-2-1{ grid-template-columns:2fr 1fr}}
.stack{ display:flex; flex-direction:column; gap:12px}
.actions-row{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0}

/* headroom bar */
.headroom-track{ margin-top:10px; height:8px; border-radius:999px; background:var(--color-paper-3); overflow:hidden}
.headroom-fill{ height:100%; border-radius:999px; background:var(--color-accent); transition:width var(--p-dur-slow) var(--p-ease)}

/* compact table */
.p-table{ width:100%; border-collapse:collapse; font-size:13px}
.p-table th{ text-align:left; padding:8px 10px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-muted); border-bottom:1px solid var(--color-line)}
.p-table td{ padding:10px; border-bottom:1px solid color-mix(in srgb, var(--color-line) 70%, transparent); vertical-align:middle}
.p-table tr:last-child td{ border-bottom:0}
.p-table tr.clickable{ cursor:pointer}
.p-table tr.clickable:hover{ background:var(--color-paper-2)}

.chip-icon{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; cursor:default}
.chip-icon.ok{ background:var(--color-ok-bg); color:var(--color-ok)}
.chip-icon.warn{ background:var(--color-warn-bg); color:var(--color-warn)}
.chip-icon.danger{ background:var(--color-danger-bg); color:var(--color-danger)}
.chip-icon.info{ background:var(--color-info-bg); color:var(--color-info)}

.ladder-badge{ font-size:10px; font-weight:700; letter-spacing:.04em; border-radius:6px; padding:2px 6px}
.ladder-L1{ background:var(--color-ok-bg); color:var(--color-ok)}
.ladder-L2{ background:var(--color-warn-bg); color:var(--color-warn)}
.ladder-L3{ background:var(--color-danger-bg); color:var(--color-danger)}

/* filter chips */
.filter-row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.filter-chip{ border:1px solid var(--color-line); background:var(--color-paper); color:var(--color-muted); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer}
.filter-chip.active{ background:var(--color-ink); color:var(--color-paper); border-color:var(--color-ink)}
[data-theme="dark"] .filter-chip.active{ background:var(--color-paper-3); color:var(--color-fg)}

/* icon-only buttons w/ tooltip */
.icon-only{ width:34px; height:34px; border-radius:10px; border:1px solid var(--color-line); background:var(--color-paper); display:grid; place-items:center; cursor:pointer; color:var(--color-fg)}
.icon-only:hover{ background:var(--color-paper-2)}

/* tooltip popover */
#tip-popover{
  position:fixed; z-index:80; max-width:260px; font-size:12px; line-height:1.45;
  background:var(--color-ink); color:var(--color-paper); border-radius:10px; padding:8px 10px;
  box-shadow:var(--shadow-lift); pointer-events:none; opacity:0; transform:translateY(4px) scale(.98);
  transition:opacity var(--p-dur-fast) var(--p-ease), transform var(--p-dur-fast) var(--p-ease);
}
#tip-popover.show{ opacity:1; transform:translateY(0) scale(1)}
#tip-popover .tip-cite{ display:block; margin-top:4px; font-size:10px; color:var(--color-subtle); font-style:normal}

/* agent trace stepper */
.agent-trace{
  position:fixed; right:16px; bottom:16px; z-index:70; width:min(320px, calc(100vw - 32px));
  background:color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter:blur(14px);
  border:1px solid var(--color-line); border-radius:16px; box-shadow:var(--shadow-lift);
  padding:14px; opacity:0; transform:translateY(12px); transition:opacity var(--p-dur-med) var(--p-ease), transform var(--p-dur-med) var(--p-ease);
  pointer-events:none;
}
.agent-trace.show{ opacity:1; transform:translateY(0); pointer-events:auto}
.agent-trace-title{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-subtle); display:flex; align-items:center; gap:6px; margin-bottom:10px}
.agent-trace-steps{ display:flex; flex-direction:column; gap:8px}
.agent-step{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--color-subtle); opacity:.5; transition:opacity var(--p-dur-med) var(--p-ease)}
.agent-step .dot{ width:22px; height:22px; border-radius:999px; background:var(--color-paper-2); display:grid; place-items:center; flex-shrink:0; transition:background var(--p-dur-med) var(--p-ease), color var(--p-dur-med) var(--p-ease)}
.agent-step.active{ opacity:1; color:var(--color-fg)}
.agent-step.active .dot{ background:var(--color-info-bg); color:var(--color-info)}
.agent-step.done{ opacity:.9; color:var(--color-fg)}
.agent-step.done .dot{ background:var(--color-ok-bg); color:var(--color-ok)}

/* WhatsApp phone shell */
.wa-wrap{ display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:900px){ .wa-wrap{ grid-template-columns:220px minmax(0,380px) 1fr}}
.wa-chips{ display:flex; flex-wrap:wrap; gap:6px}
@media(min-width:900px){ .wa-chips{ flex-direction:column; flex-wrap:nowrap}}
.wa-chip{ border:1px solid var(--color-line); background:var(--color-paper); color:var(--color-muted); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.wa-chip.active{ background:var(--color-ink); color:var(--color-paper); border-color:var(--color-ink)}
[data-theme="dark"] .wa-chip.active{ background:var(--color-paper-3); color:var(--color-fg)}

.phone-shell{ background:#0b141f; border-radius:20px; padding:12px; box-shadow:var(--shadow-lift); border:1px solid var(--color-line)}
.wa-thread{ min-height:420px; max-height:520px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:6px 4px}
.wa-bubble{ max-width:82%; border-radius:12px; padding:9px 11px; font-size:13px; line-height:1.4; animation:wa-in var(--p-dur-med) var(--p-ease)}
.wa-bubble.user{ align-self:flex-end; background:#005c4b; color:#e7f7ef; border-bottom-right-radius:2px}
.wa-bubble.bot{ align-self:flex-start; background:#202c33; color:#e9edef; border-bottom-left-radius:2px; white-space:pre-wrap}
.wa-bubble .sub{ font-size:11px; opacity:.7; margin-top:4px}
.wa-bubble .stamp{ font-size:10px; opacity:.6; text-align:right; margin-top:4px}
@keyframes wa-in{ from{ opacity:0; transform:translateY(6px)} to{ opacity:1; transform:translateY(0)} }
.wa-typing{ align-self:flex-start; display:flex; gap:4px; padding:10px 12px; background:#202c33; border-radius:12px; border-bottom-left-radius:2px}
.wa-typing span{ width:6px; height:6px; border-radius:999px; background:#8696a0; animation:wa-bounce 1s infinite}
.wa-typing span:nth-child(2){ animation-delay:.15s} .wa-typing span:nth-child(3){ animation-delay:.3s}
@keyframes wa-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5} 30%{ transform:translateY(-4px); opacity:1} }
.wa-inputbar{ margin-top:10px; display:flex; align-items:center; gap:8px; background:#1f2c34; border-radius:999px; padding:8px 12px; font-size:12px; color:#8aa0c2}

/* glossary slide-over */
#glossary-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:89; opacity:0; pointer-events:none; transition:opacity var(--p-dur-med) var(--p-ease)}
#glossary-backdrop.show{ opacity:1; pointer-events:auto}
#glossary-panel{
  position:fixed; top:0; right:0; height:100%; width:min(380px, 100vw); z-index:90;
  background:var(--color-surface); border-left:1px solid var(--color-line); box-shadow:var(--shadow-lift);
  padding:20px; overflow-y:auto; transform:translateX(100%); transition:transform var(--p-dur-med) var(--p-ease);
}
#glossary-panel.show{ transform:translateX(0)}
.glossary-item{ padding:12px 0; border-bottom:1px solid var(--color-line)}
.glossary-item:last-child{ border-bottom:0}
.glossary-term{ font-weight:700; font-size:13px; color:var(--color-ink)}
.glossary-def{ font-size:12px; color:var(--color-fg); margin-top:4px; line-height:1.5}
.glossary-cite{ font-size:10px; color:var(--color-subtle); margin-top:4px}

/* detail side panel (CA) */
.detail-panel{ position:sticky; top:80px}
@media(max-width:899px){ .detail-panel{ position:static}}

.recall-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--color-warn); background:var(--color-warn-bg); border-radius:999px; padding:4px 10px}

html, body{ overflow-x:clip}