/* ═══ Agent Theater — ported from Jewel Labs Studio (stake-main) ═══
   Reference shell tokens mapped to the marketing site: neutral, no blue tint.
   The authentic Gmail palette stays scoped inside .gm-app below. */
.theater {
  --ink: #e9ecf2;
  --ink-2: #b6bdca;
  --muted: #8b93a2;
  --dim: #6a7180;
  --accent: #c4c6ca;
  --accent-bright: #eef1f6;
  --hair: rgba(255,255,255,0.09);
  --hair-strong: rgba(255,255,255,0.16);
  --ok: #46b98f;
  --danger: #e0685f;
  --paper: #f6f2e9;
  --paper-edge: #ece5d5;
  --paper-ink: #201d16;
  --paper-muted: #6a6353;
  --paper-line: rgba(32,29,22,0.16);
  --text-secondary: #b6bdca;
  --text-muted: #8b93a2;
  --font-display: 'Geist','Inter',system-ui,-apple-system,sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', monospace;
  --ease-out: cubic-bezier(0,0,0.2,1);
  --ease-premium: cubic-bezier(0.16,1,0.3,1);
  --t-micro: 160ms;
  --r-lg: 14px;
  --r-pill: 999px;
}
/* ═══════════════════════════════════════════════════════════
   JEWEL LABS STUDIO  |  agent-demo.css
   The Agent Theater: a browser-framed Gmail lookalike plus the
   live agent console, embedded on the dark hub (index.html only).
   The light Gmail palette is fully scoped under .gm-app and never
   touches the site's dark tokens.
   ═══════════════════════════════════════════════════════════ */

/* ── THEATER SHELL (dark design system) ── */
.theater {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(30px, 5vh, 56px) clamp(16px, 4vw, 48px) clamp(40px, 7vh, 72px);
  scroll-margin-top: 80px;
  --frame-h: 604px;
}

.theater .section-head { margin-bottom: 34px; }

.theater-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.theater-tab {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hair);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--t-micro) var(--ease-out);
}

.theater-tab:hover { color: var(--ink); border-color: var(--hair-strong); }

.theater-tab.active {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.theater-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

/* ── BROWSER FRAME ── */
.browser-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 40px 90px rgba(0, 0, 0, 0.66);
  background: #0f1012;
}

.bf-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 42px;
  padding: 0 14px;
  background: linear-gradient(180deg, #1a1f27, #12161c);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bf-dots { display: inline-flex; gap: 7px; }
.bf-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.bf-dots i:nth-child(1) { background: #ff5f57; }
.bf-dots i:nth-child(2) { background: #febc2e; }
.bf-dots i:nth-child(3) { background: #28c840; }

.bf-url {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(233, 238, 244, 0.72);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  min-width: 0;
}

.bf-url svg { width: 10px; height: 12px; color: rgba(233, 238, 244, 0.5); flex-shrink: 0; }

/* ═══════ GMAIL APP (light UI, fully scoped) ═══════ */
.gm-app {
  --gm-shell: #f6f8fc;
  --gm-white: #ffffff;
  --gm-ink: #1f1f1f;
  --gm-ink-2: #444746;
  --gm-muted: #5e5e5e;
  --gm-blue: #0b57d0;
  --gm-sel: #d3e3fd;
  --gm-compose: #c2e7ff;
  --gm-compose-ink: #001d35;
  --gm-hair: #e0e3e7;
  --gm-hair-soft: #f1f3f4;
  --gm-search: #eaf1fb;
  --gm-hover-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --gm-ok-bg: #e6f4ea;
  --gm-ok-ink: #137333;
  --gm-bad-bg: #fce8e6;
  --gm-bad-ink: #a50e0e;
  --gm-font: 'Roboto', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  height: calc(var(--frame-h) - 42px);
  display: flex;
  flex-direction: column;
  background: var(--gm-shell);
  font-family: var(--gm-font);
  color: var(--gm-ink);
  line-height: 1.4;
  text-align: left;
}

/* topbar */
.gm-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 12px 0 8px;
  flex-shrink: 0;
}

.gm-iconbtn {
  width: 38px;
  height: 38px;
  border: none;
  background: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gm-ink-2);
  cursor: default;
  flex-shrink: 0;
}

.gm-iconbtn svg { width: 17px; height: 17px; }

.gm-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
  flex-shrink: 0;
}

.gm-logo svg { width: 26px; height: 20px; }
.gm-logo span { font-size: 19px; color: var(--gm-muted); letter-spacing: -0.01em; }

.gm-search {
  flex: 1;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  background: var(--gm-search);
  border-radius: var(--r-pill);
  color: var(--gm-muted);
  font-size: 13.5px;
  min-width: 0;
}

.gm-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.gm-search span { white-space: nowrap; overflow: hidden; }

.gm-top-right { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.gm-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0b57d0;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

/* body: rail + main */
.gm-body { flex: 1; display: flex; min-height: 0; }

.gm-rail {
  width: 176px;
  padding: 4px 8px 8px 4px;
  flex-shrink: 0;
  overflow-y: auto;
}

.gm-compose {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px;
  margin: 4px 0 12px 4px;
  background: var(--gm-compose);
  color: var(--gm-compose-ink);
  border: none;
  border-radius: 14px;
  font-family: var(--gm-font);
  font-size: 13.5px;
  font-weight: 500;
  cursor: default;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3);
}

.gm-compose svg { width: 16px; height: 16px; }

.gm-rail-item {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 32px;
  padding: 0 12px 0 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--gm-ink-2);
}

.gm-rail-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.gm-rail-item span { flex: 1; white-space: nowrap; overflow: hidden; }

.gm-rail-item.active {
  background: var(--gm-sel);
  color: var(--gm-compose-ink);
  font-weight: 700;
}

.gm-count { font-size: 11.5px; font-weight: 700; }

.gm-rail-sep {
  font-size: 11px;
  font-weight: 500;
  color: var(--gm-muted);
  padding: 14px 14px 5px;
  letter-spacing: 0.02em;
}

.gm-label-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--gm-blue); margin: 0 3px; flex-shrink: 0; }

/* main card */
.gm-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0 8px 8px 0;
  background: var(--gm-white);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.gm-listbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 42px;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--gm-hair-soft);
  flex-shrink: 0;
}

.gm-cb {
  width: 15px;
  height: 15px;
  border: 2px solid #747775;
  border-radius: 2px;
  opacity: 0.85;
  flex-shrink: 0;
}

.gm-listbar .gm-iconbtn { width: 32px; height: 32px; }
.gm-listbar .gm-iconbtn svg { width: 14px; height: 14px; }

.gm-range { margin-left: auto; font-size: 12px; color: var(--gm-muted); white-space: nowrap; }

.gm-cat {
  display: flex;
  border-bottom: 1px solid var(--gm-hair-soft);
  flex-shrink: 0;
}

.gm-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  font-size: 13px;
  color: var(--gm-muted);
  position: relative;
}

.gm-cat-tab svg { width: 15px; height: 15px; }

.gm-cat-tab.active { color: var(--gm-blue); font-weight: 600; }

.gm-cat-tab.active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--gm-blue);
}

/* list */
.gm-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

.gm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 60px 20px;
  color: var(--gm-muted);
  font-size: 13px;
  text-align: center;
}

.gm-empty svg { width: 34px; height: 34px; opacity: 0.4; }

.gm-row {
  display: grid;
  grid-template-columns: 18px 18px 150px minmax(0, 1fr) auto 58px;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 14px 0 12px;
  border: none;
  border-bottom: 1px solid var(--gm-hair-soft);
  background: #f5f8fc;
  font-family: var(--gm-font);
  font-size: 13px;
  color: var(--gm-muted);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background 0.15s ease;
}

.gm-row:hover { box-shadow: var(--gm-hover-shadow); z-index: 2; }
.gm-row:focus-visible { outline: 2px solid var(--gm-blue); outline-offset: -2px; }

.gm-row.is-hidden { display: none; }

.gm-row.gm-in { animation: gmRowIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes gmRowIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.gm-row.unread { background: var(--gm-white); }
.gm-row.unread .gm-sender, .gm-row.unread .gm-subj, .gm-row.unread .gm-time { color: var(--gm-ink); font-weight: 700; }

.gm-row.gm-scan {
  background: #e8f0fe;
  box-shadow: inset 2.5px 0 0 var(--gm-blue);
}

.gm-row.gm-bad { background: #fff5f4; }

.gm-row .gm-cb { opacity: 0.55; }
.gm-star { color: #a6aab0; display: inline-flex; }
.gm-star svg { width: 16px; height: 16px; }

.gm-sender { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gm-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gm-subj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.gm-sep { color: #b6bac0; flex-shrink: 0; }
.gm-snip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gm-muted); font-weight: 400; flex-shrink: 4; }

.gm-att {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--gm-muted);
  border: 1px solid var(--gm-hair);
  border-radius: 7px;
  padding: 1px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

.gm-att svg { width: 11px; height: 11px; }

.gm-time { font-size: 11.5px; text-align: right; white-space: nowrap; }

/* status chips */
.gm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 5px;
  padding: 2.5px 8px;
  white-space: nowrap;
  animation: gmChipIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.gm-chip svg { width: 11px; height: 11px; }
.gm-chip.ok { background: var(--gm-ok-bg); color: var(--gm-ok-ink); }
.gm-chip.bad { background: var(--gm-bad-bg); color: var(--gm-bad-ink); }

@keyframes gmChipIn {
  0% { opacity: 0; transform: scale(0.55); }
  65% { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* reading view */
.gm-read {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--gm-white);
  display: flex;
  flex-direction: column;
  animation: gmReadIn 0.22s ease-out;
}

@keyframes gmReadIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.gm-read-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 0 8px;
  border-bottom: 1px solid var(--gm-hair-soft);
  flex-shrink: 0;
}

.gm-read-bar .gm-iconbtn { width: 34px; height: 34px; cursor: pointer; }
.gm-read-bar .gm-iconbtn:hover { background: #f1f3f4; }
.gm-read-bar .gm-iconbtn svg { width: 15px; height: 15px; }

.gm-read-scroll { flex: 1; overflow-y: auto; padding: 16px 22px 26px; }

.gm-read-subject {
  font-size: 19px;
  font-weight: 400;
  color: var(--gm-ink);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gm-read-tag {
  font-size: 11px;
  color: var(--gm-ink-2);
  background: var(--gm-hair-soft);
  border-radius: 4px;
  padding: 2px 8px;
  font-weight: 400;
}

.gm-read-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 0 4px;
}

.gm-read-ava {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gm-read-who { flex: 1; min-width: 0; }
.gm-read-name { font-size: 13.5px; font-weight: 600; color: var(--gm-ink); }
.gm-read-name small { font-weight: 400; color: var(--gm-muted); font-size: 12px; }
.gm-read-to { font-size: 12px; color: var(--gm-muted); }
.gm-read-when { font-size: 12px; color: var(--gm-muted); white-space: nowrap; }

.gm-read-body { font-size: 13.5px; color: #202124; line-height: 1.65; padding-left: 50px; }
.gm-read-body p { margin: 10px 0; }

.gm-raw {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.7;
  color: #202124;
  background: #f8f9fa;
  border: 1px solid var(--gm-hair-soft);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0 4px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.gm-read-atts { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 0 0 50px; }

.gm-read-att {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--gm-ink-2);
  border: 1px solid var(--gm-hair);
  border-radius: 10px;
  padding: 8px 14px;
}

.gm-read-att svg { width: 14px; height: 14px; color: var(--gm-blue); }

/* agent reply thread (quoting / cutting) */
.gm-reply {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--gm-hair-soft);
}

.gm-reply .gm-read-ava { background: #0b57d0; }
.gm-reply .gm-read-ava svg { width: 18px; height: 18px; }

.gm-reply-art {
  max-width: 300px;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  background: #fff;
  margin: 12px 0;
  overflow: hidden;
}

.gm-reply-art svg { width: 100%; height: auto; display: block; }

.gm-reply-spec {
  max-width: 380px;
  border: 1px solid var(--gm-hair-soft);
  border-radius: 10px;
  overflow: hidden;
  margin: 4px 0 10px;
}

.gm-reply-spec > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 14px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--gm-hair-soft);
}

.gm-reply-spec > div:last-child { border-bottom: none; background: #f0f6ff; }
.gm-reply-spec b { color: var(--gm-ink); font-weight: 600; text-align: right; }
.gm-reply-spec span { color: var(--gm-muted); flex-shrink: 0; }

.gm-reply-note { font-size: 11.5px; color: var(--gm-muted); }

/* ═══════ AGENT CONSOLE (dark, koov assist register) ═══════ */
.agent-console {
  height: var(--frame-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(14, 15, 17, 0.88);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ac-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hair);
  flex-shrink: 0;
}

.ac-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dim);
  flex-shrink: 0;
  transition: background 0.3s;
}

.ac-dot.live {
  background: var(--ok);
  box-shadow: 0 0 10px rgba(70, 185, 143, 0.6);
  animation: acPulse 1.6s ease-in-out infinite;
}

@keyframes acPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.ac-id { flex: 1; min-width: 0; }
.ac-name { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.ac-state { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; font-weight: 450; }

.ac-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent-bright);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  flex-shrink: 0;
}

.ac-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  overscroll-behavior: contain;
}

.ac-line {
  color: var(--ink-2);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  animation: acLineIn 0.3s var(--ease-out);
}

@keyframes acLineIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.ac-line svg { width: 11px; height: 11px; margin-top: 2.5px; flex-shrink: 0; }
.ac-line.head { color: var(--ink); font-weight: 600; margin-top: 5px; }
.ac-line.sys { color: var(--accent); }
.ac-line.ok { color: var(--ink-2); }
.ac-line.ok svg { color: var(--ok); }
.ac-line.bad { color: #eba39c; }
.ac-line.bad svg { color: var(--danger); }
.ac-line.done { color: var(--accent-bright); }

.ac-typing { display: inline-flex; gap: 4px; padding: 3px 0; }
.ac-typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: acDot 1.1s infinite; }
.ac-typing span:nth-child(2) { animation-delay: 0.18s; }
.ac-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes acDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.ac-foot {
  border-top: 1px solid var(--hair);
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  flex-shrink: 0;
}

/* ═══════ FINALE OVERLAY ═══════ */
.theater-finale {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background: rgba(13, 16, 21, 0.55);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: fadeIn 0.45s var(--ease-out);
}

.cert-mini {
  width: min(660px, 100%);
  max-height: 100%;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
  overscroll-behavior: contain;
}

.cert-mini .certificate { padding: 30px 30px 26px; }
.cert-mini .cert-title { font-size: 20px; margin-top: 16px; }
.cert-mini .cert-subtitle { font-size: 10.5px; margin-bottom: 16px; }
.cert-mini .cert-parties { gap: 12px 20px; margin-bottom: 16px; }
.cert-mini .cert-party-v { font-size: 13px; }
.cert-mini .cert-table { font-size: 11px; }
.cert-mini .cert-table td { padding: 6px 8px 6px 0; }
.cert-mini .cert-attest { font-size: 11.5px; line-height: 1.6; }
.cert-mini .cert-warranty { font-size: 10px; }
.cert-mini .cert-oos { font-size: 10.5px; }
.cert-mini .cert-guard { display: none; }
.cert-mini .cert-sign-name { font-size: 30px; }
.cert-mini .cert-seal { width: 78px; height: 78px; }
.cert-mini .verdict-stamp { top: 86px; font-size: 13px; padding: 6px 13px; }

.finale-dark {
  width: min(460px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 28px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(22, 28, 36, 0.96), rgba(9, 12, 17, 0.98));
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: cardIn 0.4s var(--ease-premium);
}

.finale-kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.finale-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 16px;
}

.finale-stat {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 400;
  color: var(--accent-bright);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.finale-stat-l { font-size: 11.5px; color: var(--muted); margin: 6px 0 18px; }

.finale-rows { border-top: 1px solid var(--hair); }

.finale-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 12.5px;
  color: var(--text-secondary);
}

.finale-rows b { color: var(--ink); font-weight: 500; text-align: right; }

.finale-note { font-size: 10.5px; color: var(--dim); line-height: 1.55; margin-top: 14px; }

/* ── THEATER FOOT ── */
.theater-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.theater-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.theater-hint { font-size: 12px; color: var(--dim); }

/* ═══════ SOLUTION OVERLAY (Act 2, the demo before the studio) ═══════ */
.solution {
  position: fixed;
  inset: 0;
  z-index: 45;
  --frame-h: 552px;
  opacity: 0;
  overflow-y: auto;
  background: radial-gradient(120% 90% at 50% -10%, #0b0e13 0%, #06080c 55%, #000 100%);
  transition: opacity 0.5s var(--ease-out);
}

.solution[hidden] { display: none; }
.solution.solution-in { opacity: 1; }

.sol-inner {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 100%;
  padding: clamp(20px, 4vh, 40px) clamp(16px, 4vw, 48px) clamp(22px, 4vh, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.sol-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.sol-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.sol-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 10px rgba(70, 185, 143, 0.7);
  animation: acPulse 1.6s ease-in-out infinite;
}

.sol-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}

.sol-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.sol-tool-link {
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--hair-strong);
  padding-bottom: 1px;
  transition: color var(--t-micro), border-color var(--t-micro);
}

.sol-tool-link:hover { color: var(--accent-bright); border-color: rgba(255, 255, 255, 0.4); }

.btn-try { padding: 13px 32px; font-size: 14.5px; }

/* ═══════ FINALE: DOCUMENT + SPOT-CHECK PACK ═══════ */
.finale-doc {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.finale-doc .cert-mini { width: min(500px, 100%); margin: 0; }

/* Real-document polish: a faint fiber grain over the paper, screen only. */
.cert-mini .certificate {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)' opacity='0.6'/%3E%3C/svg%3E"),
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.6), transparent),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-edge) 100%);
  background-blend-mode: soft-light, normal, normal;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.spot-pack {
  width: 268px;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(22, 28, 36, 0.96), rgba(9, 12, 17, 0.98));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  animation: cardIn 0.45s var(--ease-premium) 0.2s both;
}

.sp-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--hair); }

.sp-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}

.sp-title { font-family: var(--font-display); font-size: 17px; color: var(--ink); margin-top: 10px; }
.sp-sub { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-top: 4px; }

.sp-list { list-style: none; padding: 12px 18px; display: flex; flex-direction: column; gap: 9px; }
.sp-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.sp-list li svg { width: 12px; height: 12px; margin-top: 2px; color: var(--ok); flex-shrink: 0; }

.sp-foot {
  padding: 11px 18px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--accent);
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 980px) {
  .theater-stage { grid-template-columns: 1fr; }
  .agent-console { height: 240px; }
  .theater, .solution { --frame-h: 520px; }
  .sol-inner { justify-content: flex-start; }
  .sol-head { align-items: flex-start; }
}

@media (max-width: 620px) {
  .theater, .solution { --frame-h: 476px; }
  .spot-pack { width: 100%; }
  .sol-tabs { width: 100%; }
  .gm-rail { width: 56px; padding-right: 2px; }
  .gm-rail-item span, .gm-rail .gm-count, .gm-rail-sep, .gm-compose span { display: none; }
  .gm-rail-item { justify-content: center; padding: 0; }
  .gm-compose { padding: 0; width: 46px; justify-content: center; margin-left: 5px; }
  .gm-logo span, .gm-range { display: none; }
  .gm-row { grid-template-columns: 16px 116px minmax(0, 1fr) auto 46px; gap: 8px; padding: 0 10px; }
  .gm-row .gm-cb { display: none; }
  .gm-snip, .gm-sep, .gm-att { display: none; }
  .gm-read-body { padding-left: 0; }
  .gm-read-atts { padding-left: 0; }
  .theater-finale { padding: 12px; }
  .theater-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .theater-foot .btn-primary { justify-content: center; }
  .theater-controls { justify-content: center; }
}

/* ═══════ REDUCED MOTION ═══════ */
@media (prefers-reduced-motion: reduce) {
  .gm-row.gm-in, .gm-chip, .ac-line, .gm-read, .theater-finale, .finale-dark {
    animation: none !important;
  }
  .ac-dot.live, .ac-typing span { animation: none !important; }
}

/* ── reading-view parcel photo (real stones) ── */
.gm-read-photo { margin: 2px 0 14px; border-radius: 10px; overflow: hidden; border: 1px solid var(--gm-hair); background: #05060a; }
.gm-read-photo img { display: block; width: 100%; height: 188px; object-fit: cover; }
.gm-read-photo figcaption { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-family: var(--gm-font); font-size: 11.5px; color: var(--gm-muted); background: var(--gm-white); border-top: 1px solid var(--gm-hair); }
.gm-read-photo figcaption svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ensure the toggle class exists on this site (theater scope only) */
.theater .hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   MULTI-APP WORKSPACE  (the agent switches Gmail / Rapaport / Slack)
   ═══════════════════════════════════════════════════════════ */
.browser-frame { --chrome-h: 42px; }

/* browser tab strip */
.bf-tabs { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow: hidden; }
.bf-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 8px 8px 0 0;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 500;
  color: var(--dim); background: transparent; white-space: nowrap;
  border: 1px solid transparent; border-bottom: none;
  transition: color .3s var(--ease-out), background .3s var(--ease-out), opacity .3s var(--ease-out);
  opacity: .55;
}
.bf-tab .bf-fav { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; display: grid; place-items: center; }
.bf-tab .bf-fav svg { width: 13px; height: 13px; display: block; }
.bf-tab.active { color: var(--ink); background: rgba(255,255,255,0.09); opacity: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.bf-url { margin-left: auto; }

/* screen stack: apps cross-fade, no reflow */
.bf-screens { position: relative; height: calc(var(--frame-h) - var(--chrome-h)); overflow: hidden; background: #0b0d11; }
.app-screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-out); }
.app-screen.active { opacity: 1; visibility: visible; }
.bf-screens .gm-app { height: 100%; }

/* ── RAPAPORT LIVE (dark price terminal, the AI model surface) ── */
.rap-app { background: radial-gradient(120% 100% at 100% 0, #10151c, #08090c 70%); color: var(--ink); font-family: var(--font-ui); display: flex; flex-direction: column; }
.rap-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--hair); }
.rap-logo { font-weight: 700; letter-spacing: 0.14em; font-size: 13px; }
.rap-sub { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
.rap-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.12em; color: var(--ok); font-weight: 600; }
.rap-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(70,185,143,.5); animation: rapPulse 1.8s infinite; }
@keyframes rapPulse { 0%{box-shadow:0 0 0 0 rgba(70,185,143,.45)} 70%{box-shadow:0 0 0 6px rgba(70,185,143,0)} 100%{box-shadow:0 0 0 0 rgba(70,185,143,0)} }
.rap-body { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.rap-search { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--hair-strong); font-size: 13px; color: var(--ink); }
.rap-search svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.rap-query { font-family: var(--font-mono); letter-spacing: 0.01em; }
.rap-query .cur { display: inline-block; width: 1px; height: 14px; background: var(--accent-bright); margin-left: 1px; vertical-align: -2px; animation: rapCaret 1s steps(1) infinite; }
@keyframes rapCaret { 50%{opacity:0} }
.rap-cols { display: grid; grid-template-columns: 1fr 0.9fr; gap: 14px; flex: 1; min-height: 0; }
.rap-panel { border: 1px solid var(--hair); border-radius: 12px; background: rgba(255,255,255,0.02); display: flex; flex-direction: column; overflow: hidden; }
.rap-panel-h { padding: 10px 14px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hair); }
.rap-rows { padding: 4px 0; overflow-y: auto; }
.rap-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 14px; font-size: 12px; opacity: 0; transform: translateY(4px); }
.rap-row.in { animation: rapRowIn .4s var(--ease-out) forwards; }
.rap-row span { color: var(--ink-2); font-family: var(--font-mono); }
.rap-row b { color: var(--ink); font-weight: 600; font-family: var(--font-mono); }
@keyframes rapRowIn { to { opacity: 1; transform: none; } }
.rap-model { padding: 16px; justify-content: center; gap: 12px; }
.rap-model-h { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rap-pred { display: flex; flex-direction: column; gap: 8px; }
.rap-pred-l { font-size: 12px; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
.rap-bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.rap-bar i { display: block; height: 100%; width: 30%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--accent-bright), transparent); animation: rapScan 1.1s var(--ease-out) infinite; }
@keyframes rapScan { 0%{transform:translateX(-120%)} 100%{transform:translateX(430%)} }
.rap-out { display: none; flex-direction: column; gap: 10px; }
.rap-model.done .rap-pred { display: none; }
.rap-model.done .rap-out { display: flex; animation: rapRowIn .5s var(--ease-out); }
.rap-out-row { display: flex; justify-content: space-between; align-items: baseline; }
.rap-out-row span { font-size: 11.5px; color: var(--muted); }
.rap-out-row b { font-family: var(--font-mono); font-size: 15px; color: var(--ink); font-weight: 600; }
.rap-out-row.total b { font-size: 22px; color: var(--accent-bright); }
.rap-tag { align-self: flex-start; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--hair); border-radius: 5px; padding: 3px 7px; }

/* ── SLACK (light, authentic) ── */
.slack-app { display: flex; background: #fff; font-family: var(--gm-font); color: #1d1c1d; }
.slack-rail { width: 190px; flex-shrink: 0; background: #3f0e40; color: #cfc3cf; padding: 14px 0; display: flex; flex-direction: column; gap: 2px; }
.slack-ws { padding: 4px 16px 12px; font-weight: 700; font-size: 15px; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 8px; }
.slack-ch { padding: 5px 16px; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.slack-ch::before { content: "#"; opacity: .6; }
.slack-ch.active { background: #1164a3; color: #fff; }
.slack-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.slack-head { padding: 13px 20px; border-bottom: 1px solid #e6e4e6; font-weight: 700; font-size: 15px; }
.slack-head::before { content: "# "; color: #616061; }
.slack-thread { flex: 1; padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
.slack-msg { display: flex; gap: 10px; opacity: 0; transform: translateY(8px); }
.slack-msg.in { animation: rapRowIn .5s var(--ease-out) forwards; }
.slack-ava { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(160deg,#2b2f36,#0d0f13); color: #cdd6e4; display: grid; place-items: center; flex-shrink: 0; }
.slack-ava svg { width: 20px; height: 20px; }
.slack-body { min-width: 0; }
.slack-by { display: flex; align-items: center; gap: 8px; }
.slack-name { font-weight: 700; font-size: 14px; }
.slack-app-badge { font-size: 9px; font-weight: 700; letter-spacing: .04em; background: #e8e8e8; color: #616061; border-radius: 3px; padding: 1px 4px; }
.slack-time { font-size: 11px; color: #616061; }
.slack-text { font-size: 13.5px; line-height: 1.5; margin-top: 2px; }
.slack-card { margin-top: 8px; border: 1px solid #e6e4e6; border-left: 3px solid #1164a3; border-radius: 8px; padding: 10px 12px; display: flex; gap: 12px; align-items: center; max-width: 420px; }
.slack-card img { width: 62px; height: 62px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.slack-card-t { font-weight: 600; font-size: 13px; }
.slack-card-s { font-size: 12px; color: #616061; margin-top: 2px; }
.slack-card-q { font-size: 16px; font-weight: 700; margin-top: 4px; }
.slack-sent { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11.5px; color: #007a5a; font-weight: 600; }
.slack-sent svg { width: 13px; height: 13px; }
.slack-compose { margin: 0 20px 16px; padding: 10px 14px; border: 1px solid #d4d4d4; border-radius: 8px; font-size: 13px; color: #9a9a9a; }

/* ── reply render photo + price basis (reading view) ── */
.gm-reply-photo { margin: 12px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--gm-hair); position: relative; }
.gm-reply-photo img { display: block; width: 100%; height: 240px; object-fit: cover; }
.gm-reply-tag { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(10,12,16,0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gm-reply-tag svg { width: 13px; height: 13px; }
.gm-price { margin: 12px 0; border: 1px solid var(--gm-hair); border-radius: 10px; overflow: hidden; }
.gm-price-head { display: flex; align-items: center; gap: 7px; padding: 9px 13px; background: #f6f8fc; border-bottom: 1px solid var(--gm-hair); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--gm-ink-2); }
.gm-price-head svg { width: 14px; height: 14px; color: #137333; }
.gm-price-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 13px; font-size: 12.5px; }
.gm-price-row:not(:last-child) { border-bottom: 1px solid var(--gm-hair-soft); }
.gm-price-row span { color: var(--gm-muted); }
.gm-price-row b { color: var(--gm-ink); font-weight: 600; text-align: right; }

/* smooth intro: frame + console rise as one lit unit */
.theater .browser-frame, .theater .agent-console { transition: opacity 1s var(--ease-premium), transform 1s var(--ease-premium); }

/* responsive: new screens */
@media (max-width: 620px) {
  .bf-tab span:not(.bf-fav) { display: none; }
  .bf-tab { padding: 5px 8px; }
  .rap-cols { grid-template-columns: 1fr; }
  .rap-panel.rap-listings { display: none; }
  .slack-rail { width: 54px; }
  .slack-ws { font-size: 0; padding: 4px 0 12px; text-align: center; }
  .slack-ch { font-size: 0; justify-content: center; padding: 6px 0; }
  .slack-ch::before { font-size: 15px; }
  .slack-card { flex-direction: column; align-items: flex-start; }
}

/* ── Slack compose: the agent types the owner a message in real time ── */
.slack-compose { display: flex; align-items: center; gap: 8px; }
.slack-input { color: #1d1c1d; }
.slack-ph { color: #9a9a9a; }
.slack-compose.typing .slack-input::after { content: ''; display: inline-block; width: 2px; height: 15px; background: #1264a3; margin-left: 1px; vertical-align: -3px; animation: rapCaret 1s steps(1) infinite; }
.slack-send { margin-left: auto; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: #b7b7b7; background: transparent; border: none; flex-shrink: 0; transition: color .3s var(--ease-out), background .3s var(--ease-out); }
.slack-send svg { width: 16px; height: 16px; }
.slack-compose.typing .slack-send { color: #007a5a; background: #e8f5ee; }

/* ── smaller theater head: the live demo is the hero, not the copy ── */
.theater .section__head { margin-bottom: 40px; }
.theater .section__title { font-size: clamp(23px, 3.1vw, 33px); }
.theater .section__sub { font-size: 15px; margin-top: 14px; max-width: 520px; }
.theater .eyebrow { margin-bottom: 13px; }

/* ═══════ MULTI-AGENT ORCHESTRATION (A2A) ═══════ */
.ac-roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 11px 12px; border-bottom: 1px solid var(--hair); flex-shrink: 0; }
.ac-agent { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px 8px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(255,255,255,0.02); transition: border-color .3s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out), opacity .3s var(--ease-out); }
.ac-agent-ico { width: 19px; height: 19px; color: var(--muted); transition: color .3s var(--ease-out); }
.ac-agent-ico svg { width: 100%; height: 100%; }
.ac-agent-name { font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: 0.01em; transition: color .3s var(--ease-out); }
.ac-agent-dot { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--dim); transition: background .3s; }
.ac-agent[data-status="active"] { border-color: var(--agent-c); background: var(--agent-soft); box-shadow: 0 0 0 1px var(--agent-c), 0 8px 22px rgba(0,0,0,0.4); }
.ac-agent[data-status="active"] .ac-agent-ico, .ac-agent[data-status="active"] .ac-agent-name { color: var(--ink); }
.ac-agent[data-status="active"] .ac-agent-dot { background: var(--agent-c); box-shadow: 0 0 9px var(--agent-c); animation: acPulse 1.4s ease-in-out infinite; }
.ac-agent[data-status="done"] { opacity: 0.7; }
.ac-agent[data-status="done"] .ac-agent-dot { background: var(--ok); box-shadow: none; }
.ac-agent[data-agent="filters"]  { --agent-c: #b78ad6; --agent-soft: rgba(183,138,214,0.13); }
.ac-agent[data-agent="quoting"] { --agent-c: #8ab1d2; --agent-soft: rgba(138,177,210,0.13); }
.ac-agent[data-agent="pricing"] { --agent-c: #5fc39c; --agent-soft: rgba(95,195,156,0.13); }
.ac-agent[data-agent="updates"]   { --agent-c: #d8a86e; --agent-soft: rgba(216,168,110,0.13); }

/* A2A envelope in the stream */
.a2a { border: 1px solid var(--hair); border-radius: 9px; padding: 8px 10px; background: rgba(255,255,255,0.025); animation: a2aIn .42s var(--ease-out) both; }
.a2a-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.a2a-tag { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 5px; letter-spacing: 0.01em; white-space: nowrap; }
.a2a-tag[data-agent="filters"]  { color: #e0ccf4; background: rgba(183,138,214,0.18); }
.a2a-tag[data-agent="quoting"] { color: #c8e0f2; background: rgba(138,177,210,0.18); }
.a2a-tag[data-agent="pricing"] { color: #bff0dd; background: rgba(95,195,156,0.18); }
.a2a-tag[data-agent="updates"]   { color: #f2ddbf; background: rgba(216,168,110,0.18); }
.a2a-tag[data-agent="owner"]   { color: var(--ink-2); background: rgba(255,255,255,0.07); }
.a2a-arrow { width: 13px; height: 13px; color: var(--muted); display: inline-flex; flex-shrink: 0; }
.a2a-arrow svg { width: 100%; height: 100%; }
.a2a-intent { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--accent); letter-spacing: 0.02em; }
.a2a-gloss { margin-top: 6px; font-family: var(--font-ui); font-size: 11.5px; color: var(--ink-2); line-height: 1.46; }
@keyframes a2aIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Triage-filtered inbox rows */
.gm-row.gm-filtered { opacity: 0.48; }
.gm-row.gm-filtered .gm-sender, .gm-row.gm-filtered .gm-subj { font-weight: 400; }
.gm-chip.muted { background: #eef0f2; color: #80868b; }

@media (max-width: 980px) { .ac-roster { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .a2a, .ac-agent[data-status="active"] .ac-agent-dot { animation: none !important; } }

/* scheduler trigger tag */
.a2a-tag[data-agent="scheduler"] { color: #cdd2db; background: rgba(255,255,255,0.08); }

/* run / task strip: scheduled trigger + live A2A task state */
.ac-run { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--hair); flex-shrink: 0; }
.ac-run-sched { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.01em; }
.ac-run-sched svg { width: 12px; height: 12px; flex-shrink: 0; }
.ac-run-task { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--hair-strong); color: var(--muted); transition: all .3s var(--ease-out); }
.ac-run-task[data-state="working"] { color: #cfe0ef; border-color: rgba(138,177,210,0.42); background: rgba(138,177,210,0.10); }
.ac-run-task[data-state="completed"] { color: #b9ecd8; border-color: rgba(95,195,156,0.42); background: rgba(95,195,156,0.10); }
.ac-run-count { font-family: var(--font-mono); font-size: 9px; color: var(--accent); letter-spacing: 0.02em; }

/* inspectable raw JSON-RPC payload under each A2A envelope */
.a2a-raw-btn { display: inline-block; margin-top: 7px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.03em; color: var(--muted); background: none; border: none; padding: 0; cursor: pointer; transition: color .2s var(--ease-out); }
.a2a-raw-btn::before { content: "{ } "; opacity: 0.65; }
.a2a-raw-btn:hover { color: var(--ink-2); }
.a2a-raw { margin-top: 6px; padding: 9px 11px; border-radius: 7px; background: rgba(0,0,0,0.45); border: 1px solid var(--hair); font-family: var(--font-mono); font-size: 9.5px; line-height: 1.55; color: #a7b4c2; white-space: pre; overflow: auto; max-height: 230px; }
.a2a-raw[hidden] { display: none; }

/* explicit A2A-protocol caption under the demo */
.theater-note { max-width: 640px; margin: 22px auto 0; text-align: center; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.theater-note strong { color: var(--ink-2); font-weight: 600; }

/* ═══════ a16z / editorial refinement: sharp boxes, black-and-white ═══════ */
/* crisp corners, no soft "cloth" rounding */
.browser-frame, .agent-console, .theater-finale .finale-dark, .cert-mini { border-radius: 6px; }
.a2a, .a2a-raw, .gm-read-photo, .slack-card, .rap-panel { border-radius: 4px; }
.ac-agent, .ac-run-task, .a2a-tag, .a2a-raw-btn, .gm-chip, .bf-url, .ac-badge, .theater-tab { border-radius: 4px; }
/* monochrome frame + tabs: remove the blue tint/glow */
.browser-frame { box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 40px 90px rgba(0,0,0,0.66); }
.theater-tab.active { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
.ac-badge { color: var(--ink-2); border-color: var(--hair-strong); }
/* the agent team reads black-and-white: the name differentiates, not colour */
.a2a-tag[data-agent] { color: #d7dbe2 !important; background: rgba(255,255,255,0.06) !important; border: 1px solid var(--hair); }
.ac-agent[data-agent] { --agent-c: #e9ecf2; --agent-soft: rgba(255,255,255,0.05); }
.ac-agent[data-status="active"] { box-shadow: 0 0 0 1px rgba(255,255,255,0.26), 0 7px 20px rgba(0,0,0,0.5); }
.ac-agent[data-status="active"] .ac-agent-dot { background: #fff; box-shadow: 0 0 7px rgba(255,255,255,0.5); }
.ac-agent[data-status="done"] .ac-agent-dot { background: rgba(255,255,255,0.5); box-shadow: none; }
.ac-run-task[data-state="working"] { color: #e3e8f0; border-color: rgba(255,255,255,0.26); background: rgba(255,255,255,0.06); }
.ac-run-task[data-state="completed"] { color: #fff; border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.09); }

/* ═══════ infra strip: agents, the rails, the dev tools (signal, not fluff) ═══════ */
.infra { max-width: 880px; margin: 26px auto 0; }
.infra-thesis { text-align: center; font-size: 13.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 14px; }
.infra-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.infra-item { border: 1px solid var(--hair); border-radius: 4px; padding: 13px 15px; background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 6px; }
.infra-k { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.infra-v { font-size: 12px; line-height: 1.55; color: var(--muted); }
@media (max-width: 700px) { .infra-grid { grid-template-columns: 1fr; } .infra { margin-top: 22px; } }

/* ═══════ multiplayer: the shared session strip (one live context, N agents joined) ═══════ */
.ac-session {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px; border-bottom: 1px solid var(--hair); flex-shrink: 0;
  font-family: var(--font-mono);
}
.ac-ses-l {
  font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.ac-ses-l::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.28); transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ac-session[data-live="1"] .ac-ses-l::before { background: #fff; box-shadow: 0 0 7px rgba(255,255,255,0.55); }
.ac-ses-ctx {
  font-size: 9.5px; color: var(--dim); letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-ses-n { margin-left: auto; font-size: 9.5px; color: var(--muted); letter-spacing: 0.02em; white-space: nowrap; }
.ac-ses-n b { color: var(--ink); font-weight: 600; }

/* ═══════ multiplayer presence: a Google-Docs facepile of who is in the session ═══════ */
.ac-ses-ctx { flex: 0 1 auto; min-width: 0; }
.ac-ses-pile { margin-left: auto; display: inline-flex; align-items: center; flex-shrink: 0; }
.ac-face {
  width: 17px; height: 17px; border-radius: 50%; margin-left: -5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #14171c; color: var(--ink-2);
  box-shadow: 0 0 0 1.5px #0b0d10, 0 0 0 2.5px var(--hair-strong);
  animation: acFaceIn .34s var(--ease-out) both;
}
.ac-face:first-child { margin-left: 0; }
.ac-face svg { width: 10px; height: 10px; }
.ac-face-human {
  background: #eef1f6; color: #0b0d10; font-family: var(--font-ui);
  font-size: 8.5px; font-weight: 700;
  box-shadow: 0 0 0 1.5px #0b0d10, 0 0 0 2.5px rgba(255,255,255,0.55);
}
@keyframes acFaceIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

/* a person acting in the log (join, watch, redirect, hand off) */
.ac-line.human { color: var(--ink-2); }
.ac-line.human b { color: var(--ink); font-weight: 600; }
.ac-line-face {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  background: #eef1f6; color: #0b0d10; font-family: var(--font-ui);
  font-size: 8px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (prefers-reduced-motion: reduce) { .ac-face { animation: none !important; } }

/* compliance narrative lead under the theater head */
.theater-lead { margin: 16px auto 0; max-width: 620px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* ═══════ agent lifecycle: dormant → spawned → active → retired ═══════ */
/* dormant: a specialist on standby, not yet spun up */
.ac-agent[data-status="dormant"] { opacity: 0.38; border-style: dashed; }
.ac-agent[data-status="dormant"] .ac-agent-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--hair-strong); }
/* spawned: a brief pop as a parent agent creates it */
.ac-agent.spawned { animation: acSpawn .5s var(--ease-premium); }
@keyframes acSpawn { 0% { transform: scale(0.82); opacity: .3; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
/* retired: merged its work and stood down */
.ac-agent[data-status="retired"] { opacity: 0.4; }
.ac-agent[data-status="retired"] .ac-agent-ico, .ac-agent[data-status="retired"] .ac-agent-name { color: var(--dim); }
.ac-agent[data-status="retired"] .ac-agent-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--dim); animation: none; }

/* retired collaborators stay in the facepile, dimmed */
.ac-face-retired { opacity: 0.4; filter: grayscale(1); }

/* lifecycle log lines */
.ac-line.spawn { color: var(--accent-bright); font-weight: 500; }
.ac-line.merge { color: var(--ink-2); }
.ac-line.retire { color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .ac-agent.spawned { animation: none !important; } }

/* ═══════ multiplayer presence, popped out: Wasi directing three agents ═══════ */
.ac-presence {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-bottom: 1px solid var(--hair); flex-shrink: 0;
  background: rgba(255,255,255,0.035);
}
.acp-standby { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--dim); }
.acp-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.acp-agents { display: flex; gap: 6px; justify-content: space-between; flex: 1; min-width: 0; }
.acp-agent {
  flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 9px; border: 1px solid var(--hair); border-radius: 6px;
  background: rgba(255,255,255,0.02); transition: border-color .3s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out);
  animation: acpPop .45s var(--ease-premium) both;
}
.acp-bot { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #14171c; color: var(--ink-2); box-shadow: 0 0 0 1.5px var(--hair-strong); }
.acp-bot svg { width: 11px; height: 11px; }
.acp-agent .acp-name { font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acp-agent[data-status="active"] { border-color: rgba(255,255,255,0.42); background: rgba(255,255,255,0.07); box-shadow: 0 0 0 1px rgba(255,255,255,0.22); }
.acp-agent[data-status="active"] .acp-bot { background: #fff; color: #0b0d10; box-shadow: 0 0 9px rgba(255,255,255,0.5); }
.acp-agent[data-status="active"] .acp-name { color: var(--ink); }
.acp-agent[data-status="done"] .acp-bot { color: var(--ok); }
.acp-agent[data-status="done"] .acp-name { color: var(--ink-2); }
@keyframes acpPop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .acp-human, .acp-agent { animation: none !important; } }

/* ═══════ multiplayer workspace bar (Google-Docs style: label · people · Share) ═══════ */
.ac-ws { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--hair); flex-shrink: 0; }
.ac-ws-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px rgba(70,185,143,0.6); flex-shrink: 0; }
.ac-ws-live.live { animation: acPulse 1.6s ease-in-out infinite; }
.ac-ws-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ac-ws-people { display: inline-flex; align-items: center; margin-left: auto; flex-shrink: 0; }
.ac-face2 {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700; color: #0b0d10; margin-left: -6px;
  box-shadow: 0 0 0 2px #0d0f13; animation: acpPop .35s var(--ease-premium);
}
.ac-face2:first-child { margin-left: 0; }
.ac-face2[data-tone="you"] { background: #9db4d6; }
.ac-face2[data-tone="wasi"] { background: #d6b878; }
.ac-face2[data-tone="soham"] { background: #b8a6d0; }
.ac-ws-share {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 7px;
  border: 1px solid var(--hair-strong); background: rgba(255,255,255,0.05); color: var(--ink);
  font-family: var(--font-ui); font-size: 11px; font-weight: 500; cursor: default; flex-shrink: 0;
}
.ac-ws-share svg { width: 12px; height: 12px; color: var(--ink-2); }
/* state line under the workspace bar */
.ac-state { padding: 9px 12px 1px; font-size: 12px; color: var(--ink-2); font-weight: 450; }


/* ═══════ "someone joined" toast + join pops ═══════ */
.agent-console { position: relative; }
.ac-toast {
  position: absolute; top: 46px; left: 50%; transform: translate(-50%, -8px);
  z-index: 6; padding: 6px 13px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(18,21,27,0.97); border: 1px solid var(--hair-strong);
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 500; color: var(--ink);
  white-space: nowrap; box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none; transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.ac-toast::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.ac-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ac-face2.is-fresh { animation: acpPop .4s var(--ease-premium); }
.acp-agent.acp-static { animation: none; }
@media (prefers-reduced-motion: reduce) { .ac-toast { transition: none; } .ac-face2.is-fresh { animation: none; } }