/* BPA Showroom — design tokens (normative; copied into both web apps at build time).
   Dark theme only (brand). Values come from the BPA deck/demo palette. Components use variables only. */
:root {
  color-scheme: dark;

  /* brand wordmark (from the current BPA deck style: black + white + one electric blue) */
  --brand: #0020E0;
  --brand-mid: #3A5BFF;
  --brand-acc: #6B84FF;

  /* palette */
  --bg: #0A0F1E;          /* page */
  --surface: #0F172A;     /* panels, top bar */
  --card: #1A2544;        /* cards, assistant bubbles */
  --card-hover: #22305A;
  --border: #1E293B;
  --border-strong: #2D3748;
  --blue: #2563EB;        /* primary action */
  --blue-dark: #1E3A8A;   /* visitor bubbles */
  --cyan: #06B6D4;        /* accent, links, ticks */
  --green: #10B981;       /* ok, approve */
  --orange: #F59E0B;      /* attention, pending */
  --red: #EF4444;         /* error, reject */
  --white: #E2E8F0;       /* primary text */
  --gray: #94A3B8;        /* secondary text */
  --gray-dark: #64748B;   /* labels, placeholders */
  --gray-light: #CBD5E1;  /* body on cards */

  /* status */
  --status-active: var(--green);
  --status-waiting: var(--orange);
  --status-attention: var(--red);
  --status-paused: var(--gray-dark);
  --status-done: var(--cyan);

  /* priority badges (bg / fg) */
  --prio-high-bg: #7F1D1D;   --prio-high-fg: #FCA5A5;
  --prio-medium-bg: #78350F; --prio-medium-fg: #FDE68A;
  --prio-low-bg: #1E3A8A;    --prio-low-fg: #BFDBFE;

  /* type */
  --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Arial Black", "Segoe UI Black", Impact, sans-serif;   /* hero + big numbers */
  --font-mono: "JetBrains Mono", "Courier New", ui-monospace, monospace;  /* KPI values, codes */
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px;
  --fs-2xl: 28px; --fs-3xl: 34px; --fs-kpi: 28px; --fs-kpi-mobile: 24px;
  --lh: 1.5;

  /* spacing & shape */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --shadow-card: 0 3px 8px rgba(0, 0, 0, 0.3);
  --topbar-accent-h: 3px;   /* the thin blue bar on top of every surface (deck motif) */

  /* chat (WhatsApp-style, on the dark theme) */
  --chat-bg: #0B1220;
  --chat-bubble-in: var(--card);        /* Supervisor */
  --chat-bubble-out: var(--blue-dark);  /* visitor */
  --chat-bubble-out-fg: #DBEAFE;
  --chat-system-pill: #111A2E;
  --chat-tick: var(--cyan);
  --chat-max-bubble: 85%;
  --chat-chip-bg: var(--card);
  --chat-chip-border: var(--border-strong);

  /* layout */
  --content-max: 1200px;
  --gutter: 16px;
  --bottom-nav-h: 56px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* motion */
  --t-fast: 150ms; --t-base: 200ms; --t-slow: 500ms;
  --kpi-countup-ms: 1500;
  --pulse: pulse 2s infinite;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; --kpi-countup-ms: 0; }
}

/* 00-base.css */
/* Base styles shared by gallery and dashboard (tokens come first in app.css). Files are concatenated in
   name order: 00-base + 10-gallery (gallery/gate builder), 50-dashboard-* (dashboard builder).
   Ported from the shared reset of both mockups (showroom_gallery.html, showroom_dashboard.html). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--white); font-family: var(--font-ui); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--cyan); }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 10-gallery.css */
/* Gallery, case page, legal pages, gate + profile modal — ported from spec/mockups/showroom_gallery.html.
   Everything is scoped under `.gal` so the dashboard's classes (50-*) never collide. */
.gal .accent{height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan))}

/* ===== header ===== */
.gal .hdr{max-width:var(--content-max);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;gap:14px}
.gal .wordmark{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--white)}
.gal .wordmark .bm{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--brand-mid));display:grid;place-items:center;font-weight:900;font-size:12px;color:#fff;box-shadow:0 4px 14px rgba(0,32,224,.38)}
.gal .wordmark .bt{font-weight:800;font-size:16px;letter-spacing:-.3px}
.gal .wordmark .bt .ai{color:var(--brand-acc)}
.gal .wordmark .sub{font-size:11px;color:var(--gray-dark);margin-left:6px;letter-spacing:1px;text-transform:uppercase}
.gal .hdr .sp{flex:1}
.gal .identity{display:none;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-pill);padding:5px 6px 5px 12px;font-size:12px;color:var(--gray-light)}
.gal .identity.on{display:inline-flex}
.gal .identity b{color:var(--white)}
.gal .identity button{background:transparent;border:1px solid var(--border-strong);color:var(--gray);border-radius:var(--radius-pill);padding:3px 10px;font-size:11px}
.gal .identity button:hover{border-color:var(--cyan);color:var(--white)}
.gal .lang{background:transparent;border:1px solid var(--border-strong);color:var(--gray);border-radius:var(--radius-pill);padding:5px 11px;font-size:11px;font-weight:700;letter-spacing:1px}
.gal .lang:hover{border-color:var(--cyan);color:var(--white)}

/* ===== notices ===== */
.gal .notice{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter)}
.gal .notice div{display:none;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.35);color:var(--gray-light);border-radius:var(--radius);padding:10px 14px;font-size:13px;margin-bottom:8px}
.gal .notice div.on{display:block}
.gal .notice div.warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.4)}

/* ===== hero ===== */
.gal .hero{max-width:var(--content-max);margin:0 auto;padding:28px var(--gutter) 10px}
.gal .hero h1{font-family:var(--font-display);font-size:34px;line-height:1.1;letter-spacing:-.5px}
.gal .hero p{color:var(--gray);font-size:16px;margin-top:10px;max-width:720px}
.gal .hero .sim-note{font-size:11px;color:var(--gray-dark);margin-top:10px}

/* ===== toolbar ===== */
.gal .tools{max-width:var(--content-max);margin:0 auto;padding:16px var(--gutter) 8px;display:flex;flex-direction:column;gap:10px}
.gal .search{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--border);color:var(--white);border-radius:var(--radius);padding:10px 14px;font-size:14px;outline:none}
.gal .search:focus{border-color:var(--blue)}
.gal .search::placeholder{color:var(--gray-dark)}
.gal .chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gal .chips .lbl{font-size:11px;color:var(--gray-dark);text-transform:uppercase;letter-spacing:1px;margin-right:4px}
.gal .chip{background:var(--surface);border:1px solid var(--border-strong);color:var(--gray);border-radius:var(--radius-pill);padding:5px 12px;font-size:12px;white-space:nowrap}
.gal .chip:hover{border-color:var(--cyan);color:var(--white)}
.gal .chip.on{background:var(--blue-dark);border-color:var(--blue);color:#DBEAFE}
.gal .chip.clear{border-style:dashed}
.gal .tools-chips{display:flex;flex-direction:column;gap:10px}
.gal .count{font-size:12px;color:var(--gray-dark)}

/* ===== grid & cards ===== */
.gal .grid{max-width:var(--content-max);margin:0 auto;padding:8px var(--gutter) 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1023px){.gal .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:639px){.gal .grid{grid-template-columns:1fr}}
.gal .card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 16px 16px 20px;box-shadow:var(--shadow-card);overflow:hidden;transition:border-color var(--t-base),background var(--t-base),transform var(--t-base);display:flex;flex-direction:column;gap:10px;cursor:pointer;outline:none}
.gal .card:focus-visible{border-color:var(--cyan)}
.gal .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cyan)}
.gal .card[data-industry=mobility]::before{background:var(--cyan)}
.gal .card[data-industry=logistics]::before{background:var(--orange)}
.gal .card[data-industry=healthcare]::before,.gal .card[data-industry=health_insurance]::before{background:var(--green)}
.gal .card[data-industry=retail]::before{background:#A78BFA}
.gal .card[data-industry=banking]::before,.gal .card[data-industry=fintech]::before{background:var(--blue)}
.gal .card[data-industry=manufacturing]::before{background:#F472B6}
.gal .card[data-industry=automotive]::before{background:var(--red)}
.gal .card.pinned{border-color:rgba(6,182,212,.55)}
.gal .ribbon{position:absolute;right:-1px;top:12px;background:var(--cyan);color:#062A33;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:3px 10px;border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.gal .top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gal .tag{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gray);border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:2px 8px}
.gal .proc{font-size:12px;color:var(--cyan)}
.gal .card h3{font-size:18px;font-weight:700;line-height:1.25}
.gal .card .tl{color:var(--gray);font-size:13px}
.gal .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2px}
.gal .kpi{background:var(--card);border-radius:var(--radius);padding:8px 10px}
.gal .kpi .v{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--cyan);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal .kpi .l{font-size:10px;color:var(--gray-dark);text-transform:uppercase;letter-spacing:.6px;line-height:1.2;margin-top:2px}
.gal .more{max-height:0;overflow:hidden;transition:max-height var(--t-base) ease;display:flex;flex-direction:column;gap:10px}
.gal .more p{color:var(--gray-light);font-size:13px;border-top:1px solid var(--border);padding-top:10px}
.gal .btn{background:var(--blue);color:#fff;border:none;border-radius:var(--radius);padding:11px 16px;font-size:14px;font-weight:700;width:100%;transition:opacity var(--t-fast);text-align:center}
.gal .btn:hover{opacity:.92}
.gal .btn:disabled{opacity:.6;cursor:default}
.gal .btn.sec{background:transparent;border:1px solid var(--border-strong);color:var(--gray-light)}
.gal .btn.sec:hover{border-color:var(--cyan);color:var(--white)}
.gal .btn.ghost{background:transparent;border:none;color:var(--gray);padding:8px}
.gal .btn.ghost:hover{color:var(--white)}
.gal .card .link{background:transparent;border:none;color:var(--gray-dark);font-size:12px;text-align:left;padding:0;text-decoration:underline;text-underline-offset:3px}
.gal .card .link:hover{color:var(--cyan)}
/* hover-capable devices: hover expands; touch: tap toggles .open (JS) */
@media(hover:hover){.gal .card:hover,.gal .card:focus-within{background:var(--card);border-color:var(--border-strong);transform:translateY(-2px)}.gal .card:hover .more,.gal .card:focus-within .more{max-height:260px}}
.gal .card.open{background:var(--card);border-color:var(--border-strong)}
.gal .card.open .more{max-height:260px}
.gal .grid.empty{display:block}
.gal .empty-msg{color:var(--gray);padding:30px 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.gal .loading{color:var(--gray-dark);padding:30px 0;text-align:center;grid-column:1/-1}

/* ===== case page ===== */
.gal .page{max-width:900px;margin:0 auto;padding:16px var(--gutter) 60px;display:flex;flex-direction:column;gap:18px}
.gal .back{background:transparent;border:none;color:var(--gray);font-size:13px;text-align:left;padding:0;text-decoration:none;align-self:flex-start}
.gal .back:hover{color:var(--white)}
.gal .page h1{font-family:var(--font-display);font-size:30px;line-height:1.1}
.gal .page .top{margin-bottom:8px;flex-wrap:nowrap}
.gal .page .lead{color:var(--gray);font-size:16px}
.gal .box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow-card)}
.gal .box h4{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.gal .box p{color:var(--gray-light);font-size:14px}
.gal .box p + p{margin-top:12px}
.gal .agents{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:639px){.gal .agents{grid-template-columns:1fr}}
.gal .agent{background:var(--card);border-radius:var(--radius);padding:10px 12px;display:flex;gap:10px;align-items:flex-start}
.gal .agent .dot{width:9px;height:9px;border-radius:50%;background:var(--green);margin-top:6px;flex-shrink:0}
.gal .agent b{display:block;font-size:13px}
.gal .agent span{font-size:12px;color:var(--gray)}
.gal .ctarow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.gal .ctarow .btn{width:auto;min-width:280px}
.gal .ctarow .dur{font-size:12px;color:var(--gray-dark)}
@media(max-width:639px){.gal .ctarow .btn{width:100%}}
.gal .page .err-msg{color:var(--gray);padding:30px 0}

/* ===== legal pages (no mockup state: same page/box language as the case page) ===== */
.gal .prelim{align-self:flex-start;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.4);color:var(--gray-light);border-radius:var(--radius);padding:6px 12px;font-size:12px}

/* ===== footer ===== */
.gal footer{max-width:var(--content-max);margin:0 auto;padding:20px var(--gutter) 40px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;color:var(--gray-dark)}
.gal footer a{color:var(--gray)}

/* ===== gate modal ===== */
.gal .ov{position:fixed;inset:0;background:rgba(3,7,18,.78);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.gal .ov.on{display:flex}
.gal .modal{width:100%;max-width:440px;max-height:100%;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.gal .modal .mh{height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.gal .modal .mb{padding:22px 22px 18px;display:flex;flex-direction:column;gap:12px}
.gal .modal h2{font-size:20px;line-height:1.2}
.gal .modal .sub{color:var(--gray);font-size:13px}
.gal .seg{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:3px;gap:3px}
.gal .seg button{background:transparent;border:none;color:var(--gray);border-radius:6px;padding:8px;font-size:13px;font-weight:600}
.gal .seg button.on{background:var(--card);color:var(--white)}
.gal label.f{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--gray)}
.gal label.f input,.gal label.f select{background:var(--bg);border:1px solid var(--border-strong);color:var(--white);border-radius:var(--radius);padding:11px 12px;font-size:15px;outline:none;width:100%}
.gal label.f input:focus,.gal label.f select:focus{border-color:var(--blue)}
.gal label.f input.code{font-family:var(--font-mono);font-size:24px;letter-spacing:8px;text-align:center}
.gal .consent{font-size:11px;color:var(--gray-dark);text-align:center;line-height:1.5}
.gal .consent a{color:var(--gray)}
.gal .msg{font-size:13px;border-radius:var(--radius);padding:10px 12px;display:none}
.gal .msg.on{display:block}
.gal .msg.ok{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.35);color:#A7F3D0}
.gal .msg.err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);color:#FCA5A5}
.gal .hint{font-size:11px;color:var(--gray-dark)}
.gal .hint .resend{background:transparent;border:none;color:var(--gray);font-size:11px;padding:0;text-decoration:underline;text-underline-offset:3px;margin-left:4px}
.gal .hint .resend:hover{color:var(--cyan)}
.gal .mfoot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gal .step{display:none;flex-direction:column;gap:12px}
.gal .step.on{display:flex}
.gal .opening{text-align:center;padding:18px 0;color:var(--gray-light)}
.gal .opening .spin{width:28px;height:28px;border:3px solid var(--border-strong);border-top-color:var(--cyan);border-radius:50%;margin:0 auto 12px;animation:gal-spin .9s linear infinite}
@keyframes gal-spin{to{transform:rotate(360deg)}}
.gal .turnstile:empty{display:none}

@media(max-width:639px){.gal .hdr{flex-wrap:wrap}.gal .hdr .wordmark .sub{display:none}.gal .identity.on{order:3;width:100%;justify-content:space-between}.gal .hero h1{font-size:26px}.gal .hero p{font-size:15px}.gal .page h1{font-size:24px}}
.gal #paneGet .hint{margin-top:6px}
.gal #paneGet .msg.on + .hint{margin-top:6px}
.gal #paneHave .msg.on{margin-top:10px}
.gal #stepOpen .msg.on{margin-top:4px}

/* 50-dashboard.css */
/* Operation dashboard (Master Spec §9) — ported from spec/mockups/showroom_dashboard.html.
   Everything is scoped under `body.dash` (set by mountDashboard) so the gallery's styles and ours never
   collide in the shared app.css. Tokens only (spec/design/tokens.css). No inline styles anywhere (D-014).
   Deliberate deviations from the mockup (mockup bugs, documented in PROGRESS.md):
   - the task-card rules are scoped to the task list (the mockup's `.task` also hit feed rows of kind "task");
   - phone KPI columns use minmax(0,1fr) (the mockup's 1fr let long labels push the grid off-screen). */

body.dash { background: var(--bg); color: var(--white); font-family: var(--font-ui); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100dvh; margin: 0; }
body.dash #app { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dash *, .dash *::before, .dash *::after { box-sizing: border-box; margin: 0; padding: 0; }
.dash button { font: inherit; cursor: pointer; }
.dash button:disabled { cursor: not-allowed; }
.dash .accent { height: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan)); flex-shrink: 0; }
.dash .hide { display: none !important; }

/* ===== top bar ===== */
.dash .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px 16px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dash .dots { display: flex; gap: 6px; }
.dash .dot { width: 11px; height: 11px; border-radius: 50%; }
.dash .dot.r { background: var(--red); } .dash .dot.y { background: var(--orange); } .dash .dot.g { background: var(--green); }
.dash .tb-title { font-size: 13px; font-weight: 700; color: var(--gray); letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .tb-title b { color: var(--white); }
.dash .clock { font-family: var(--font-mono); font-size: 12px; color: var(--gray-light); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }
.dash .stale { font-size: 11px; font-weight: 700; color: var(--orange); background: var(--bg); border: 1px dashed var(--orange); border-radius: var(--radius-pill); padding: 2px 9px; white-space: nowrap; }
.dash .live { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--green); letter-spacing: 1px; white-space: nowrap; }
.dash .live .ld { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: dash-pulse 2s infinite; }
.dash .live.demo { color: var(--orange); } .dash .live.demo .ld { background: var(--orange); animation: none; }
.dash .sp { flex: 1; }
.dash .lang { background: transparent; border: 1px solid var(--border-strong); color: var(--gray); border-radius: var(--radius-pill); padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.dash .cta { background: var(--blue); color: #fff; border: none; border-radius: var(--radius); padding: 8px 14px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.dash .cta:hover { opacity: .92; }
/* F3-02: at `ended` the top-bar CTA is accented (the offer becomes dominant, beat 12) */
.dash .topbar .cta.hot { box-shadow: 0 0 0 3px rgba(6, 182, 212, .45), 0 0 18px rgba(37, 99, 235, .55); animation: dash-cta-hot 2s ease-in-out 3; }
@keyframes dash-cta-hot { 0%, 100% { box-shadow: 0 0 0 3px rgba(6, 182, 212, .45), 0 0 18px rgba(37, 99, 235, .55); } 50% { box-shadow: 0 0 0 5px rgba(6, 182, 212, .25), 0 0 26px rgba(37, 99, 235, .75); } }
@keyframes dash-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ===== layout ===== */
.dash .wrap { flex: 1; max-width: 1200px; width: 100%; margin: 0 auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.dash .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dash .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-card); min-width: 0; }
.dash .kpi .l { font-size: 10px; color: var(--gray-dark); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .kpi .v { font-family: var(--font-mono); font-size: 28px; font-weight: 900; line-height: 1.1; white-space: nowrap; }
.dash .kpi .d { font-size: 11px; color: var(--gray-dark); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .kpi .d.up { color: var(--green); } .dash .kpi .d.down { color: var(--orange); }
.dash .c-green { color: var(--green); } .dash .c-cyan { color: var(--cyan); } .dash .c-orange { color: var(--orange); }
.dash .c-red { color: var(--red); } .dash .c-blue { color: var(--blue); } .dash .c-white { color: var(--white); }
.dash .main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; flex: 1; min-height: 0; }
.dash .col { display: flex; flex-direction: column; gap: 14px; min-height: 0; min-width: 0; }
.dash .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); min-width: 0; }
.dash .tabs { display: flex; border-bottom: 1px solid var(--border); }
.dash .tab { flex: 1; padding: 11px 0; background: transparent; border: none; color: var(--gray-dark); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid transparent; position: relative; }
.dash .tab.on { background: var(--card); color: var(--white); border-bottom-color: var(--blue); }
.dash .badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orange); color: #1F1300; font-size: 10px; font-weight: 800; margin-left: 6px; vertical-align: middle; }
.dash .list { overflow: auto; max-height: 360px; }
.dash .agent { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(30, 41, 59, .4); }
.dash .agent .sd { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; transition: background var(--t-base); }
.dash .agent .nm { flex: 1; min-width: 0; }
.dash .agent .nm b { display: block; font-size: 13px; color: var(--gray-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .agent .nm span { font-size: 11px; color: var(--gray-dark); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .agent .st { font-size: 11px; font-weight: 700; white-space: nowrap; }
.dash .agent .ex { font-family: var(--font-mono); font-size: 11px; color: var(--gray-dark); min-width: 62px; text-align: right; }
.dash .sd.s-active { background: var(--status-active); } .dash .st.s-active { color: var(--status-active); }
.dash .sd.s-waiting { background: var(--status-waiting); } .dash .st.s-waiting { color: var(--status-waiting); }
.dash .sd.s-attention { background: var(--status-attention); } .dash .st.s-attention { color: var(--status-attention); }
.dash .sd.s-paused { background: var(--status-paused); } .dash .st.s-paused { color: var(--status-paused); }
.dash .sd.s-done { background: var(--status-done); } .dash .st.s-done { color: var(--status-done); }
.dash .tasks .task { padding: 12px 14px; border-bottom: 1px solid rgba(30, 41, 59, .4); display: flex; flex-direction: column; gap: 6px; }
.dash .tasks .task .th { display: flex; align-items: center; gap: 8px; }
.dash .prio { font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0; }
.dash .prio.high { background: var(--prio-high-bg); color: var(--prio-high-fg); }
.dash .prio.medium { background: var(--prio-medium-bg); color: var(--prio-medium-fg); }
.dash .prio.low { background: var(--prio-low-bg); color: var(--prio-low-fg); }
.dash .tasks .task .tt { font-size: 13px; font-weight: 700; color: var(--gray-light); }
.dash .tasks .task .tp { font-size: 12px; color: var(--gray); }
.dash .tasks .task .tm { font-size: 11px; color: var(--gray-dark); }
.dash .tasks .task .ta { display: flex; gap: 8px; margin-top: 2px; }
.dash .b-ok { padding: 7px 16px; font-size: 12px; font-weight: 700; background: var(--green); color: #052E22; border: none; border-radius: var(--radius-sm); }
.dash .b-no { padding: 7px 16px; font-size: 12px; font-weight: 700; background: transparent; color: var(--red); border: 1px solid var(--red); border-radius: var(--radius-sm); }
.dash .b-ok:disabled, .dash .b-no:disabled { opacity: .5; }
.dash .tasks .task .done { font-size: 12px; font-weight: 700; } .dash .tasks .task .done.ok { color: var(--green); } .dash .tasks .task .done.no { color: var(--red); }
.dash .tasks .task .cons { font-size: 12px; color: var(--gray-light); background: var(--card); border-left: 3px solid var(--cyan); padding: 6px 10px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dash .empty { padding: 22px 14px; color: var(--gray-dark); font-size: 13px; text-align: center; }
.dash .feed .fh { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; }
.dash .feed .fl { overflow: auto; max-height: 200px; }
.dash .fi { display: flex; gap: 10px; padding: 7px 14px; font-size: 12px; color: var(--gray-light); border-bottom: 1px solid rgba(30, 41, 59, .3); }
.dash .fi .ft { font-family: var(--font-mono); color: var(--gray-dark); flex-shrink: 0; }
.dash .fi.anomaly .ft { color: var(--red); } .dash .fi.action .ft { color: var(--green); } .dash .fi.task .ft { color: var(--orange); }

/* ===== chat (WhatsApp-style, dark) ===== */
.dash .chat { display: flex; flex-direction: column; min-height: 520px; max-height: calc(100dvh - 190px); }
.dash .ch { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.dash .ch .av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-mid)); display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #fff; flex-shrink: 0; }
.dash .ch .cn { flex: 1; min-width: 0; }
.dash .ch .cn b { display: block; font-size: 14px; }
.dash .ch .cn span { font-size: 11px; color: var(--green); }
.dash .ch .cn span.typing { color: var(--cyan); }
.dash .ch .left { font-size: 11px; color: var(--gray-dark); white-space: nowrap; }
.dash .ch .back { display: none; background: transparent; border: none; color: var(--gray); font-size: 20px; padding: 0 4px; }
.dash .msgs { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--chat-bg); }
.dash .pill { align-self: center; background: var(--chat-system-pill); border: 1px solid var(--border); color: var(--gray); font-size: 11px; padding: 3px 10px; border-radius: var(--radius-pill); }
.dash .sys { align-self: center; max-width: 92%; background: var(--chat-system-pill); border: 1px solid var(--border); color: var(--gray-light); font-size: 12px; padding: 6px 12px; border-radius: var(--radius); text-align: center; }
.dash .sys.anomaly { border-color: rgba(239, 68, 68, .45); } .dash .sys.action { border-color: rgba(16, 185, 129, .45); }
.dash .m { display: flex; flex-direction: column; max-width: 85%; }
.dash .m.in { align-self: flex-start; } .dash .m.out { align-self: flex-end; }
.dash .bub { padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
.dash .m.in .bub { background: var(--chat-bubble-in); color: var(--gray-light); border-top-left-radius: 3px; }
.dash .m.out .bub { background: var(--chat-bubble-out); color: var(--chat-bubble-out-fg); border-top-right-radius: 3px; }
.dash .m .meta { font-size: 10px; color: var(--gray-dark); margin-top: 3px; display: flex; gap: 4px; align-items: center; }
.dash .m.out .meta { justify-content: flex-end; }
.dash .m .meta .tk { color: var(--chat-tick); letter-spacing: -2px; }
.dash .m.floor .bub { border: 1px dashed var(--orange); }
.dash .typing-b { display: flex; gap: 4px; padding: 10px 12px; background: var(--chat-bubble-in); border-radius: 10px; border-top-left-radius: 3px; align-self: flex-start; }
.dash .typing-b i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: dash-bounce 1s infinite; }
.dash .typing-b i:nth-child(2) { animation-delay: .2s; } .dash .typing-b i:nth-child(3) { animation-delay: .4s; }
@keyframes dash-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.dash .chips { padding: 8px 12px; border-top: 1px solid var(--border); display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; background: var(--surface); min-width: 0; max-width: 100%; }
.dash .chips::-webkit-scrollbar { display: none; }
.dash .chip { flex-shrink: 0; padding: 6px 12px; font-size: 12px; background: var(--chat-chip-bg); color: var(--gray-light); border: 1px solid var(--chat-chip-border); border-radius: var(--radius-pill); white-space: nowrap; }
.dash .chip:hover { border-color: var(--cyan); color: var(--white); }
.dash .chip:disabled { opacity: .5; }
.dash .inp { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; background: var(--surface); }
.dash .inp input { flex: 1; padding: 10px 14px; font-size: 14px; font-family: inherit; background: var(--bg); color: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); outline: none; min-width: 0; }
.dash .inp input:focus { border-color: var(--blue); } .dash .inp input::placeholder { color: var(--gray-dark); }
.dash .inp button { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #fff; border: none; font-size: 16px; flex-shrink: 0; }
.dash .inp button:disabled { opacity: .4; }
/* D-044: a refusal's quoted suggested question is a tappable chip; the strike counter sits under the bubble */
.dash .bub .chip.redirect { display: inline-block; white-space: normal; text-align: left; margin: 4px 0 0; max-width: 100%; font-size: 12px; line-height: 1.4; }
.dash .m .strikes { align-self: flex-start; margin-top: 4px; font-size: 10px; color: var(--orange); border: 1px solid var(--border); background: var(--chat-system-pill); border-radius: var(--radius-pill); padding: 1px 8px; }
.dash .chat-closed { padding: 10px 12px; border-top: 1px dashed var(--orange); background: var(--surface); display: none; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dash .chat-closed.on { display: flex; }
.dash .chat-closed span { font-size: 12px; color: var(--gray); flex: 1; min-width: 0; }
.dash .endcard { padding: 16px; border-top: 1px solid var(--border); background: var(--surface); display: none; flex-direction: column; gap: 10px; text-align: center; }
.dash .endcard.on { display: flex; }
.dash .endcard b { font-size: 15px; } .dash .endcard span { font-size: 13px; color: var(--gray); }
.dash .endcard .row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dash .b-sec { background: transparent; border: 1px solid var(--border-strong); color: var(--gray-light); border-radius: var(--radius); padding: 9px 14px; font-size: 13px; font-weight: 700; }

/* ===== toast ===== */
.dash .toast { position: fixed; top: 14px; left: 50%; transform: translateX(-50%) translateY(-80px); background: var(--card); border: 1px solid var(--border-strong); color: var(--white); padding: 10px 16px; border-radius: var(--radius-pill); font-size: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: transform var(--t-base); z-index: 40; max-width: 92vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.dash .toast.on { transform: translateX(-50%) translateY(0); }

/* ===== bottom nav (mobile) ===== */
.dash .bnav { display: none; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bottom-nav-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: var(--surface); border-top: 1px solid var(--border); z-index: 30; }
.dash .bnav button { flex: 1; background: transparent; border: none; color: var(--gray-dark); font-size: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; }
.dash .bnav button .ic { font-size: 18px; line-height: 1; }
.dash .bnav button.on { color: var(--cyan); }
.dash .bnav .nb { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--orange); color: #1F1300; font-size: 10px; font-weight: 800; display: grid; place-items: center; }

/* ===== fatal (never a blank screen) ===== */
.dash .fatal { margin: 48px auto; max-width: 420px; padding: 24px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.dash .fatal p { color: var(--gray-light); font-size: 14px; }
.dash .fatal a { color: var(--cyan); font-size: 13px; }

/* ===== staff preview bar (staff only; no visitor sees it) ===== */
.dash .pv { position: fixed; right: 12px; bottom: 12px; z-index: 60; background: var(--chat-system-pill); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 6px 10px; display: flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--gray); }
.dash .pv button { background: var(--surface); border: 1px solid var(--border-strong); color: var(--gray-light); border-radius: 4px; padding: 2px 8px; font-size: 11px; }
.dash .pv input { width: 160px; }

/* ===== mobile layout ===== */
@media (max-width: 1023px) {
  body.dash.mobile .topbar { padding: 8px 12px; }
  /* F3-01: the case name gets the room; the demo state is the pulse dot only (label kept for AT, visually hidden) */
  body.dash.mobile .tb-title { flex: 1 1 auto; min-width: 0; }
  body.dash.mobile .clock, body.dash.mobile .live, body.dash.mobile .lang { flex-shrink: 0; }
  body.dash.mobile .topbar .sp { display: none; }
  body.dash.mobile .live .lt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  body.dash.mobile .dots, body.dash.mobile .topbar .cta, body.dash.mobile .tb-title .pre { display: none; }
  body.dash.mobile .wrap { padding: 12px 12px calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px); }
  body.dash.mobile .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.dash.mobile .kpi .v { font-size: 24px; }
  body.dash.mobile .main { display: block; }
  body.dash.mobile .bnav { display: flex; }
  body.dash.mobile .view { display: none; }
  body.dash.mobile .view.on { display: flex; flex-direction: column; gap: 12px; }
  body.dash.mobile .list { max-height: none; }
  body.dash.mobile .feed .fl { max-height: none; }
  body.dash.mobile .chat { position: fixed; inset: 0; top: calc(3px + 45px); bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)); min-height: 0; max-height: none; border-radius: 0; border-left: none; border-right: none; display: none; }
  body.dash.mobile .chat.on { display: flex; }
  body.dash.mobile.kb .bnav { display: none; }
  body.dash.mobile .ch .back { display: block; }
  body.dash.mobile .ch .left { display: none; }
  /* F3-03: iOS Safari zooms on focus of any input under 16px — the phone chat input stays at 16px */
  body.dash.mobile .inp input { font-size: 16px; }
  body.dash.mobile .pv { bottom: calc(var(--bottom-nav-h) + 12px); }
}
@media (min-width: 1024px) { .dash .view { display: flex; flex-direction: column; gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .dash .live .ld, .dash .typing-b i, .dash .topbar .cta.hot { animation: none; } }

/* 52-operation.css */
/* Dashboard v2 — the Operação tab (D-037) — ported from spec/mockups/showroom_dashboard_ap_v2.html.
   Scoped under `body.dash`; the v1 shell tweaks the v2 mockup makes apply only under `body.dash.v2` (a state
   with a pipeline), so a case without a sidecar renders exactly v1. Tokens only; no inline styles (D-014). */

.dash :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ===== v2 shell deltas (mockup v2 vs v1) ===== */
.dash.v2 .main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.dash.v2 .list { max-height: 400px; }
.dash.v2 .feed .fl { max-height: 120px; }
.dash.v2 .tab { white-space: nowrap; }
.dash.v2 .tasks .task .th { align-items: flex-start; }
.dash.v2 .tasks .task .prio { margin-top: 3px; }
.dash.v2 .bnav button { font-size: 10px; min-width: 0; }
.dash .badge.red { background: var(--red); color: #fff; }
.dash .bnav .nb.red { background: var(--red); color: #fff; }
.dash .agent .nm .now { color: var(--cyan); font-family: var(--font-mono); font-size: 11px; }
.dash .tasks .task .links { display: flex; gap: 6px; flex-wrap: wrap; }
.dash .nfchip { background: var(--card); border: 1px solid var(--border-strong); color: var(--gray-light); font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: var(--radius-pill); }
.dash .nfchip:hover { border-color: var(--cyan); color: var(--white); }

/* ===== stage strip ===== */
.dash .strip { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 0; padding: 10px 8px 8px; border-bottom: 1px solid var(--border); background: var(--surface); }
.dash .stg { position: relative; background: transparent; border: none; border-radius: var(--radius); padding: 6px 2px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; color: inherit; }
.dash .stg:not(:last-child)::after { content: "›"; position: absolute; right: -4px; top: 8px; color: var(--border-strong); font-size: 14px; line-height: 1; }
.dash .stg .n { font-family: var(--font-mono); font-size: 18px; font-weight: 900; line-height: 1.1; color: var(--gray-light); transition: color var(--t-base); }
.dash .stg .n.bump { color: var(--cyan); }
.dash .stg .t { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dash .stg.on { background: var(--card); } .dash .stg.on .t { color: var(--white); }
.dash .stg.done .n { color: var(--green); }
.dash button.stg:hover { background: var(--card-hover); }

/* ===== attention lane ===== */
.dash .lane { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--gray); flex-wrap: wrap; }
.dash .lane .pill { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 2px 9px; font-size: 11px; color: var(--gray-light); white-space: nowrap; align-self: auto; }
.dash .lane .pill.att { border-color: rgba(239, 68, 68, .5); color: #FCA5A5; }
.dash .lane .pill.wait { border-color: rgba(245, 158, 11, .5); color: #FDE68A; }
.dash .lane .thr { margin-left: auto; font-family: var(--font-mono); color: var(--gray-dark); white-space: nowrap; }

/* ===== queue ===== */
.dash .qhead { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 11px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border); }
.dash .qhead .clr { margin-left: auto; background: transparent; border: 1px solid var(--border-strong); color: var(--gray-light); border-radius: var(--radius-pill); font-size: 10px; padding: 2px 8px; text-transform: none; letter-spacing: 0; }
.dash .queue .row { display: flex; flex-direction: column; gap: 3px; padding: 9px 14px; border-bottom: 1px solid rgba(30, 41, 59, .4); cursor: pointer; background: transparent; border-left: 3px solid transparent; transition: background var(--t-fast); }
.dash .queue .row:hover { background: var(--card-hover); }
.dash .queue .row.new { animation: dash-slidein var(--t-slow) ease-out; }
@keyframes dash-slidein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dash .queue .row.pin { border-left-color: var(--orange); background: rgba(245, 158, 11, .05); }
.dash .queue .row.pin.att { border-left-color: var(--red); background: rgba(239, 68, 68, .06); }
.dash .queue .r1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dash .queue .nf { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--white); white-space: nowrap; }
.dash .queue .sup { font-size: 12px; color: var(--gray-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.dash .queue .amt { font-family: var(--font-mono); font-size: 12px; color: var(--white); white-space: nowrap; margin-left: auto; }
.dash .queue .r2 { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--gray-dark); min-width: 0; }
.dash .queue .r2 .stgtxt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.dash .queue .r2 .age { font-family: var(--font-mono); white-space: nowrap; margin-left: auto; flex-shrink: 0; }
.dash .queue .r2 .dots { display: inline-flex; gap: 2px; flex-shrink: 0; }
.dash .queue .r2 .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); display: block; }
.dash .queue .r2 .dots i.ok { background: var(--green); }
.dash .queue .r2 .dots i.cur { background: var(--cyan); animation: dash-pulse 1.6s infinite; }
.dash .queue .r2 .dots i.bad { background: var(--red); }
.dash .queue .r2 .dots i.warn { background: var(--orange); }
.dash .flag { font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; flex-shrink: 1; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.dash .flag.wait { background: var(--prio-medium-bg); color: var(--prio-medium-fg); }
.dash .flag.att { background: var(--prio-high-bg); color: var(--prio-high-fg); }
.dash .flag.ok { background: #064E3B; color: #A7F3D0; }
.dash .flag.mute { background: var(--border); color: var(--gray); }
.dash .flag.info { background: var(--blue-dark); color: #BFDBFE; }
.dash .queue .more { padding: 8px 14px; font-size: 11px; color: var(--gray-dark); text-align: center; font-family: var(--font-mono); }

/* the overview mini strip (phone only) */
.dash .ovstrip { cursor: pointer; }
/* a history period (D-037 #6, mockup renderHistory): tiles + history panel replace the KPI row, the mini strip,
   the feed and the live queue; the queue, tasks and decisions stay live-only */
.dash.hist-on .kpis, .dash.hist-on .ovstrip, .dash.hist-on .feed, .dash.hist-on .opslive { display: none !important; }

/* ===== item detail: bottom sheet (phone) / right drawer (desktop) ===== */
.dash .bd { position: fixed; inset: 0; background: rgba(2, 6, 23, .6); z-index: 70; opacity: 0; pointer-events: none; transition: opacity var(--t-base); }
.dash .bd.on { opacity: 1; pointer-events: auto; }
.dash .sheet { position: fixed; z-index: 71; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); display: flex; flex-direction: column; transition: transform var(--t-base) ease-out, visibility 0s linear var(--t-base); max-height: 88dvh; left: 0; right: 0; bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(105%); visibility: hidden; }
.dash .sheet.on { transform: none; visibility: visible; transition: transform var(--t-base) ease-out, visibility 0s; }
.dash .sheet .handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 8px auto 0; flex-shrink: 0; }
.dash .sh { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.dash .sh .ttl { flex: 1; min-width: 0; }
.dash .sh .ttl b { display: block; font-family: var(--font-mono); font-size: 15px; }
.dash .sh .ttl span { display: block; font-size: 12px; color: var(--gray); }
.dash .sh .amtb { text-align: right; flex-shrink: 0; }
.dash .sh .amtb b { display: block; font-family: var(--font-mono); font-size: 16px; color: var(--white); }
.dash .sh .amtb span { font-size: 11px; color: var(--gray-dark); }
.dash .sh .x { background: transparent; border: none; color: var(--gray); font-size: 22px; line-height: 1; padding: 0 2px; }
.dash .shb { overflow: auto; padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.dash .shb .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12px; }
.dash .shb .meta div { display: flex; flex-direction: column; min-width: 0; }
.dash .shb .meta small { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--gray-dark); }
.dash .shb .meta span { color: var(--gray-light); font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.dash .callout { font-size: 12px; color: var(--gray-light); background: var(--card); border-left: 3px solid var(--orange); padding: 8px 10px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; display: flex; flex-direction: column; gap: 6px; }
.dash .callout.att { border-left-color: var(--red); } .dash .callout.ok { border-left-color: var(--green); } .dash .callout.mute { border-left-color: var(--gray-dark); }
.dash .callout button { align-self: flex-start; background: var(--blue); color: #fff; border: none; border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; font-weight: 700; }
.dash .tlh { padding: 6px 0; font-size: 11px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; }
.dash .tl { display: flex; flex-direction: column; }
.dash .tl .st { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 10px; position: relative; padding-bottom: 12px; }
/* F6-01: the step column may shrink below its content, so a wide evidence table scrolls inside .ev, never the sheet */
.dash .tl .st > div { min-width: 0; }
.dash .tl .st::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: 0; width: 2px; background: var(--border); }
.dash .tl .st:last-child::before { display: none; }
.dash .tl .st .o { width: 18px; height: 18px; border-radius: 50%; background: var(--border); display: grid; place-items: center; font-size: 10px; color: #fff; margin-top: 1px; }
.dash .tl .st.ok .o { background: var(--green); color: #052E22; }
.dash .tl .st.cur .o { background: var(--cyan); animation: dash-pulse 1.6s infinite; }
.dash .tl .st.bad .o { background: var(--red); }
.dash .tl .st.warn .o { background: var(--orange); color: #1F1300; }
.dash .tl .st .h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.dash .tl .st .h b { font-size: 13px; color: var(--gray-light); }
.dash .tl .st .h span { font-size: 11px; color: var(--gray-dark); font-family: var(--font-mono); }
.dash .tl .st .h em { font-style: normal; font-size: 11px; color: var(--cyan); }
.dash .tl .st p { font-size: 12px; color: var(--gray); margin-top: 2px; }
.dash .tl .st.pend .h b, .dash .tl .st.pend p { color: var(--gray-dark); }
.dash .ev { margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: auto; font-size: 11px; }
.dash .ev table { width: 100%; border-collapse: collapse; }
.dash .ev th, .dash .ev td { padding: 4px 8px; text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.dash .ev th { background: var(--card); color: var(--gray-dark); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.dash .ev td:first-child, .dash .ev th:first-child { text-align: left; font-family: var(--font-ui); }
.dash .ev tbody td { border-top: 1px solid rgba(30, 41, 59, .5); }
.dash .ev td.diff { color: var(--orange); } .dash .ev td.bad { color: var(--red); }

/* ===== phone / desktop ===== */
@media (max-width: 1023px) {
  body.dash.mobile.v2 .tabs { display: none; }
  body.dash.mobile .ovstrip .strip { border-bottom: none; }
}
@media (min-width: 1024px) {
  .dash .ovstrip { display: none; }
  .dash .sheet { left: auto; right: 0; top: 0; bottom: 0; width: 480px; max-height: none; border-radius: 0; border-left: 1px solid var(--border-strong); transform: translateX(105%); }
  .dash .sheet .handle { display: none; }
  .dash .sheet.on { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dash .queue .r2 .dots i.cur, .dash .tl .st.cur .o, .dash .queue .row.new { animation: none; }
  .dash .sheet, .dash .sheet.on, .dash .bd { transition: none; }
}

/* the page behind an open sheet does not scroll (phone) */
body.dash.sheet-open { overflow: hidden; }
.dash .queue .amt.soon { color: #FDE68A; }

/* F6-04: evidence with text columns — caption above, "Item" first header, text columns left-aligned in the UI face */
.dash .evw { margin-top: 6px; min-width: 0; }
.dash .evw > .ev { margin-top: 0; }
.dash .evcap { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-dark); margin-bottom: 4px; }
.dash .evw.text .ev th.txt, .dash .evw.text .ev td.txt { text-align: left; font-family: var(--font-ui); white-space: normal; }

/* 55-history.css */
/* Period selector + HISTORY view (D-037 #6) — web/showroom/src/dashboard/history.ts.
   Ported from spec/mockups/showroom_dashboard_ap_v2.html ("NEW (D-037): period selector + history"), scoped under
   `.dash`; tokens only; no inline styles (D-014). Deviations: radio semantics on the period chips (aria-checked, the
   mockup uses aria-pressed) — same look; the funnel is an <ol>. */

/* ===== period bar ===== */
.dash .pbar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex-shrink: 0; }
.dash .pbar::-webkit-scrollbar { display: none; }
.dash .pbar.in { padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.dash .pchip { flex-shrink: 0; min-height: 32px; padding: 5px 13px; font-size: 12px; font-weight: 700; background: var(--card); color: var(--gray); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.dash .pchip:hover { border-color: var(--cyan); color: var(--white); }
.dash .pchip[aria-checked="true"], .dash .pchip[aria-pressed="true"] { background: var(--blue-dark); border-color: var(--blue); color: #fff; }
.dash .pchip:focus-visible, .dash .hk:focus-visible, .dash .hs-chartw:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.dash .pchip .ld { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* ===== history tiles (in place of the live KPI row) ===== */
.dash .hs-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dash .hk { text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color var(--t-fast); }
.dash .hk:hover { border-color: var(--border-strong); }
.dash .hk[aria-pressed="true"] { border-color: var(--cyan); box-shadow: inset 0 -2px 0 var(--cyan), var(--shadow-card); }
.dash .hk .d .ar { font-weight: 800; }
.dash .hk .d .vs { color: var(--gray-dark); }

/* ===== history panel ===== */
.dash .hist.hs-stale { opacity: .55; transition: opacity var(--t-base); }
.dash .hist .hh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 10px 14px 0; }
.dash .hist .hh b { font-size: 11px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; }
.dash .hist .hh span { font-size: 11px; color: var(--gray-dark); }
.dash .hist .headline { margin: 10px 14px 0; font-size: 13px; color: var(--gray-light); background: var(--card); border-left: 3px solid var(--green); padding: 8px 10px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dash .hist .headline b { color: var(--white); }
.dash .hist .sers { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 14px 0; }
.dash .hist .sers::-webkit-scrollbar { display: none; }
.dash .hist .sers .pchip { min-height: 28px; padding: 3px 10px; font-size: 11px; }
.dash .hist .note { padding: 0 14px 10px; font-size: 10px; color: var(--gray-dark); }

/* chart */
.dash .hs-fig { margin: 0; }
.dash .hs-chartw { position: relative; padding: 6px 8px 4px; touch-action: pan-y; border-radius: var(--radius-sm); }
.dash .hs-chartw svg { display: block; overflow: visible; }
.dash .hs-chartw .ax { font-family: var(--font-mono); font-size: 10px; fill: var(--gray-dark); }
.dash .hs-chartw .grid { stroke: var(--border); stroke-width: 1; }
.dash .hs-chartw .base { stroke: var(--border-strong); stroke-width: 1; }
.dash .hs-chartw .gl { stroke: var(--gray-light); stroke-width: 1; stroke-dasharray: 3 3; }
.dash .hs-chartw .gll { font-size: 10px; fill: var(--gray-light); font-weight: 700; }
.dash .hs-chartw .era { font-size: 10px; fill: var(--gray-dark); text-transform: uppercase; letter-spacing: .6px; }
.dash .hs-chartw .pre { fill: rgba(148, 163, 184, .05); }
.dash .hs-chartw .xh { stroke: var(--gray); stroke-width: 1; }
.dash .hs-chartw .hide { display: none; }
.dash .hs-chartw .bar.after { fill: var(--cyan); }
.dash .hs-chartw .bar.before { fill: var(--gray-dark); }
.dash .hs-chartw .bar.partial { fill-opacity: .45; }
.dash .hs-chartw .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dash .hs-chartw .line.after { stroke: var(--cyan); }
.dash .hs-chartw .line.before { stroke: var(--gray-dark); }
.dash .hs-chartw .dot { fill: var(--cyan); stroke: var(--surface); stroke-width: 2; }
.dash .hs-chartw .dot.before { fill: var(--gray-dark); }
.dash .hs-tip { position: absolute; top: 4px; pointer-events: none; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 4px 8px; font-size: 11px; color: var(--gray-light); white-space: nowrap; box-shadow: var(--shadow-card); transform: translateX(-50%); z-index: 2; }
.dash .hs-tip b { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--white); }

/* funnel + live-only note (Operação) */
.dash .hs-ops .qhead { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 11px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border); }
.dash .hs-ops .ops-hist-chart + .qhead { margin-top: 10px; border-top: 1px solid var(--border); }
.dash .funnel { list-style: none; padding: 6px 14px 12px; display: flex; flex-direction: column; gap: 7px; }
.dash .fr { display: grid; grid-template-columns: 78px 1fr; gap: 2px 10px; align-items: center; font-size: 12px; }
.dash .fr .fl2 { color: var(--gray-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .fr .fb { position: relative; height: 18px; background: var(--bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dash .fr .fb i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cyan); opacity: .85; border-radius: 0 4px 4px 0; }
.dash .fr .fb span { position: absolute; right: 6px; top: 0; line-height: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--white); }
.dash .fr .fd { grid-column: 2; font-size: 10px; color: var(--gray-dark); }
.dash .fr .fd em { font-style: normal; color: var(--orange); }
.dash .liveonly { margin: 0 14px 14px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius); font-size: 12px; color: var(--gray); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash .liveonly button { margin-left: auto; background: var(--blue); color: #fff; border: none; border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; font-weight: 700; }
/* without an Operação slot the parts stack under the main panel: the funnel gets its own card, no second chart */
.dash .hs-ops.noslot { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.dash .hs-ops.noslot .ops-hist-chart { display: none; }
.dash .hs-ops.noslot .liveonly { margin-top: 4px; }

/* loading / error / empty — never blank */
.dash .hs-skel { position: relative; overflow: hidden; min-height: 86px; }
.dash .hs-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(148, 163, 184, .07), transparent); transform: translateX(-100%); animation: hs-shimmer 1.2s infinite; }
.dash .hs-skel-chart { min-height: 290px; }
.dash .hs-skel-funnel { min-height: 200px; }
@keyframes hs-shimmer { to { transform: translateX(100%); } }
.dash .hs-error, .dash .hs-empty { padding: 22px 16px; text-align: center; color: var(--gray); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dash .hs-retry { background: transparent; border: 1px solid var(--border-strong); color: var(--gray-light); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 12px; font-weight: 700; }
.dash .hs-retry:hover { border-color: var(--cyan); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .dash .hs-skel::after { animation: none; }
  .dash .hist.hs-stale { transition: none; }
}
@media (min-width: 1024px) { .dash .pbar.in { display: none; } .dash .ops-hist-chart { display: none; } }
@media (max-width: 1023px) { .dash .hs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }