/* ============================================================
   product.css: the REAL Headbox Console design system.

   Copied verbatim from antigravity-vault/public/index.html:15-50
   (the shipped Console UI). Do not tune, round, or "improve" these
   values: this file exists so the component reproductions on this
   site are the product, not an impression of it.

   SCOPED to .product. The site's own arcade chrome (sega.css) owns
   everything outside a .product block. Inside one, the Console's
   tokens win. That is the whole point of the split: the cabinet is
   the site's, the screen is the product's.

   Sources of truth:
     tokens      index.html:15-50
     medium      index.html:53-68
     light       index.html:71-86
     fonts       index.html:10 (Google Fonts CDN: see note below)

   FONT NOTE. The Console loads Inter + JetBrains Mono from the
   Google Fonts CDN. This site does the same, which is a deliberate
   exception to its otherwise no-CDN rule: the product's real
   rendering IS Inter, and substituting the system stack would make
   the reproduction look like a different product. The CSP in
   site/_headers is widened for fonts.googleapis.com /
   fonts.gstatic.com for exactly this reason and no other.

   DENSITY NOTE. ~80% of the Console's text is 9-12px. That extreme
   density is the defining trait of the product's look. If a
   reproduction here reads at 14-16px, it is wrong.
   ============================================================ */

.product {
  /* ── dark (default theme) ─────────────────────────────── */
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-base: #0a0a0f;
  --bg-card: rgba(20, 20, 32, 0.7);
  --bg-card-hover: rgba(28, 28, 44, 0.85);
  --bg-glass: rgba(255, 255, 255, 0.03);
  --bg-input: rgba(255, 255, 255, 0.06);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --text-primary: #e8e8f0;
  --text-secondary: rgba(232, 232, 240, 0.6);
  --text-muted: rgba(232, 232, 240, 0.35);

  /* Agent identity, NOT decoration. These four are theme-invariant
     by design: #6366f1 means Antigravity in every theme. */
  --c-ag: #6366f1;      --c-ag-dim: rgba(99, 102, 241, 0.15);
  --c-cc: #f97316;      --c-cc-dim: rgba(249, 115, 22, 0.15);
  --c-cx: #22c55e;      --c-cx-dim: rgba(34, 197, 94, 0.15);
  --c-cd: #e879f9;      --c-cd-dim: rgba(232, 121, 249, 0.15);

  --c-amber: #f59e0b;   --c-amber-dim: rgba(245, 158, 11, 0.15);
  --c-red: #ef4444;     --c-red-dim: rgba(239, 68, 68, 0.15);
  --c-purple: #a855f7;  --c-purple-dim: rgba(168, 85, 247, 0.15);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-card: 0 2px 16px rgba(0,0,0,0.25);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  color-scheme: dark;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
}

/* Theme variants. medium/light override ONLY backgrounds, borders,
   text and shadow: never an accent, radius or font. Reproduced as
   shipped (index.html:53-86). */
.product[data-theme="medium"] {
  --bg-primary: #1a1a2e;
  --bg-secondary: #22223a;
  --bg-base: #1a1a2e;
  --bg-card: rgba(38, 38, 62, 0.75);
  --bg-card-hover: rgba(50, 50, 78, 0.85);
  --bg-glass: rgba(255, 255, 255, 0.05);
  --bg-input: rgba(255, 255, 255, 0.07);
  --border-subtle: rgba(255, 255, 255, 0.09);
  --border-hover: rgba(255, 255, 255, 0.16);
  --text-primary: #e4e4f0;
  --text-secondary: rgba(228, 228, 240, 0.65);
  --text-muted: rgba(228, 228, 240, 0.38);
  --shadow-card: 0 2px 14px rgba(0,0,0,0.2);
  color-scheme: dark;
}
.product[data-theme="light"] {
  --bg-primary: #f3f4f8;
  --bg-secondary: #ffffff;
  --bg-base: #f3f4f8;
  --bg-card: rgba(0, 0, 0, 0.03);
  --bg-card-hover: rgba(0, 0, 0, 0.06);
  --bg-glass: rgba(0, 0, 0, 0.025);
  --bg-input: rgba(0, 0, 0, 0.04);
  --border-subtle: rgba(0, 0, 0, 0.09);
  --border-hover: rgba(0, 0, 0, 0.18);
  --text-primary: #1a1a2e;
  --text-secondary: rgba(26, 26, 46, 0.6);
  --text-muted: rgba(26, 26, 46, 0.35);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.07);
  color-scheme: light;
}

/* ── the brand gradient (index.html:115) ─────────────────── */
.product .logo {
  font-weight: 650; font-size: 15px; letter-spacing: -.02em;
  background: linear-gradient(135deg, #6366f1, #f97316, #22c55e);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.product[data-theme="light"] .logo {
  background: linear-gradient(135deg, #4f46e5, #ea580c, #16a34a);
  -webkit-background-clip: text; background-clip: text;
}

/* ── primitives reproduced from the shipped stylesheet ───── */
.product .btn {
  background: var(--bg-input); border: 1px solid var(--border-subtle);
  color: var(--text-primary); border-radius: var(--radius-sm);
  padding: 6px 12px; font-size: 11px; font-family: var(--font-sans);
  cursor: pointer; transition: var(--transition-fast);
}
.product .btn:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }
.product .btn.primary { background: var(--c-ag); border-color: var(--c-ag); color: #fff; }
.product .btn-sm { padding: 4px 8px; font-size: 10px; }

.product .badge {
  font-size: 9px; padding: 2px 6px; border-radius: var(--radius-sm);
  background: var(--bg-glass); color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.product .headbox-badge {
  font-size: 9px; padding: 2px 8px; border-radius: var(--radius-sm);
  font-weight: 500; border: 1px solid transparent;
}
.product .headbox-badge.good { background: var(--c-cx-dim); color: var(--c-cx); border-color: var(--c-cx-dim); }
.product .headbox-badge.warn { background: var(--c-amber-dim); color: var(--c-amber); border-color: var(--c-amber-dim); }
.product .headbox-badge.info { background: var(--c-ag-dim); color: var(--c-ag); border-color: var(--c-ag-dim); }

.product .agent-badge {
  font-size: 9px; font-weight: 500; padding: 1px 5px;
  border-radius: var(--radius-sm); font-family: var(--font-mono);
}
.product .agent-badge.ag { background: var(--c-ag-dim); color: var(--c-ag); }
.product .agent-badge.cc { background: var(--c-cc-dim); color: var(--c-cc); }
.product .agent-badge.cx { background: var(--c-cx-dim); color: var(--c-cx); }
.product .agent-badge.cd { background: var(--c-cd-dim); color: var(--c-cd); }

.product .status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.product .status-dot.active   { background: var(--c-cx); }
.product .status-dot.orphaned { background: var(--c-amber); }
.product .status-dot.ghost    { background: var(--text-muted); }
.product .status-dot.archived { background: var(--c-purple); }

.product .filter-chip {
  font-size: 10px; padding: 3px 8px; border-radius: var(--radius-sm);
  background: var(--bg-glass); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); cursor: pointer;
}
.product .filter-chip.active.ag { background: var(--c-ag-dim); color: var(--c-ag); border-color: var(--c-ag); }
.product .filter-chip.active.cc { background: var(--c-cc-dim); color: var(--c-cc); border-color: var(--c-cc); }
.product .filter-chip.active.cx { background: var(--c-cx-dim); color: var(--c-cx); border-color: var(--c-cx); }
.product .filter-chip.active.cd { background: var(--c-cd-dim); color: var(--c-cd); border-color: var(--c-cd); }

.product .convo-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 10px; cursor: pointer;
  transition: var(--transition-fast);
}
.product .convo-card:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }
.product .convo-card.selected { border-color: var(--c-ag); background: var(--c-ag-dim); }
.product .convo-card.selected.agent-claude { border-color: var(--c-cc); background: var(--c-cc-dim); }
.product .convo-card.selected.agent-codex  { border-color: var(--c-cx); background: var(--c-cx-dim); }

/* ── Live workspace (index.html:386-470) ─────────────────── */
.product .headbox-live-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); display: inline-block; }
.product .headbox-live-pulse.on   { background: var(--c-cx); animation: hb-pulse 1.8s infinite; }
.product .headbox-live-pulse.busy { background: var(--c-amber); animation: hb-pulse .7s infinite; }
@keyframes hb-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .product .headbox-live-pulse { animation: none !important; } }

/* Six columns at full width in the app. Inside a gallery card the available
   width is ~300px. Below the product's own 520px breakpoint, so it renders
   the SHIPPED narrow layout of 3 columns rather than clipping six. This is the
   product's real responsive rule (index.html:452), applied at the width the
   card actually has, not a gallery-specific fudge. */
.product .headbox-live-tally { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.vbody .product .headbox-live-tally,
.vbody.product .headbox-live-tally { grid-template-columns: repeat(3, 1fr); }
.product .headbox-stat {
  background: var(--bg-glass); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 6px 8px;
}
.product .headbox-stat .v { font-size: 14px; font-weight: 600; font-family: var(--font-mono); }
.product .headbox-stat .l { font-size: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

.product .headbox-live-signal {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 10px; font-size: 11px;
}
/* Only 3 of the 6 statuses are styled in the shipped CSS. Reproduced
   as-is: suggested / confirmed / split render as the base card. */
.product .headbox-live-signal.active    { box-shadow: inset 2px 0 0 var(--c-cx); }
.product .headbox-live-signal.parked    { box-shadow: inset 2px 0 0 var(--c-amber); }
.product .headbox-live-signal.dismissed { opacity: .55; }

.product .headbox-live-evidence {
  background: var(--bg-glass); border-left: 2px solid var(--border-hover);
  padding: 6px 8px; font-family: var(--font-mono); font-size: 10px;
  color: var(--text-secondary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.product .headbox-live-why { font-size: 9px; color: var(--text-muted); }
.product .headbox-live-receipt {
  font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);
  border-top: 1px dashed var(--border-subtle); padding-top: 6px;
}
.product .integration-status { font-size: 9px; padding: 2px 6px; border-radius: var(--radius-sm); }
.product .integration-status.connected { background: var(--c-cx-dim); color: var(--c-cx); }
.product .integration-status.available { background: var(--c-ag-dim); color: var(--c-ag); }

.product .transcript-msg { border-radius: var(--radius-sm); padding: 8px; font-size: 11px; }
.product .transcript-msg.role-user      { background: var(--c-ag-dim); border-left: 2px solid var(--c-ag); }
.product .transcript-msg.role-assistant { background: var(--bg-glass); border-left: 2px solid var(--c-cc); }
.product .transcript-msg.role-system    { background: var(--bg-glass); border-left: 2px solid var(--text-muted); color: var(--text-muted); }

.product .headbox-diff-line { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; }
.product .headbox-diff-line.add    { background: var(--c-cx-dim); color: var(--c-cx); }
.product .headbox-diff-line.remove { background: var(--c-red-dim); color: var(--c-red); }
.product .headbox-diff-line.same   { color: var(--text-muted); }

.product .spinner {
  width: 14px; height: 14px; border: 2px solid var(--border-subtle);
  border-top-color: var(--c-ag); border-radius: 50%;
  animation: hb-spin .7s linear infinite; display: inline-block;
}
@keyframes hb-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .product .spinner { animation: none; } }

.product .empty-state { color: var(--text-muted); font-size: 11px; text-align: center; padding: 18px; }