/*
  Xalvion Operator Workspace — Authoritative live stylesheet
  Target: Claude-parity soft warm graphite, space-efficient, premium restraint
  Scope: services/index.html + app.js hooks ONLY
*/

:root{
  color-scheme: dark;

  /* Warm soft graphite — lighter than pit-black, breathable contrast */
  --bg: #252423;
  --surface: #2c2b29;
  --surface-soft: #32312e;
  --border: rgba(255,255,255,0.085);
  --text: #f4f2ee;
  --text-muted: #9e9b95;

  /* Typography */
  --font-sans: "Instrument Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Mapped legacy scale → same family, barely separated surfaces */
  --bg0: var(--bg);
  --bg1: var(--surface);
  --bg2: var(--surface-soft);
  --bg3: #343330;
  --bg4: #393835;

  --text-2: #ddd9d2;
  --text-3: #a3a099;
  --text-4: #858078;

  /* Accent — match landing page CTA gradient */
  --accent: #7c5cfc;
  --accent-2: #4f8ef7;
  --accent-ink: #f5f3ff;

  /* Semantic */
  --success: hsl(158 45% 58%);
  --warning: hsl(258 42% 62%);
  --danger: hsl(0 70% 62%);

  /* Borders & shadows (subtle, low-friction) */
  --line: var(--border);
  --line-2: rgba(255,255,255,0.12);
  --line-3: rgba(255,255,255,0.16);
  --shadow-1: 0 8px 24px rgba(0,0,0,.18);
  --shadow-2: 0 12px 32px rgba(0,0,0,.22);

  /* Landing-derived chrome */
  --xv-glass: rgba(255,255,255,.04);
  --xv-glass-2: rgba(255,255,255,.06);
  --xv-accent-border: rgba(124,92,252,.44);
  --xv-accent-wash: rgba(124,92,252,.12);
  --xv-pill-border: rgba(124,92,252,.30);
  --xv-pill-wash: rgba(124,92,252,.10);
  --xv-cta-shadow: 0 0 34px rgba(124,92,252,.24), 0 12px 26px rgba(0,0,0,.28);
  --xv-cta-shadow-strong: 0 0 40px rgba(124,92,252,.35), 0 8px 24px rgba(0,0,0,.30);

  /* Radius */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Layout — tighter rail, wider reading column */
  --sidebar-expanded: 264px;
  --sidebar-collapsed: 52px;
  --thread-max: min(720px, 92vw);
  --stage-pad: 16px;
  --composer-pad-x: var(--s-4);
  --empty-hero-offset: 2vh;

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1);
  /* Premium micro-interactions timing targets:
     hover 100–140ms, pressed 80–120ms, panels 140–180ms, fade 120–160ms */
  --t-press: 100ms;
  --t-fast: 120ms;
  --t-med: 160ms;
  --t-slow: 180ms;

  /* Scroll fades */
  --fade-top: 64px;
  --fade-bottom: 76px;

  /* Focus */
  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}

*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: inherit; text-decoration: none; }
button, input, textarea, select{ font: inherit; color: inherit; }
button{ cursor: pointer; }
img{ max-width: 100%; display:block; }
code, pre{ font-family: var(--font-mono); }

/* Interaction hygiene */
:where(button, [role="button"], a, summary){
  -webkit-tap-highlight-color: transparent;
}
:where(button, [role="button"], a, summary):focus-visible{
  outline: none;
  box-shadow: var(--ring);
}

/* Icon hygiene: prevent default 300x150 inline SVG blowups */
svg{
  width: 1em;
  height: 1em;
}

::selection{
  background: color-mix(in oklab, var(--accent) 30%, transparent);
}

/* Accessibility */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Atmosphere: ultra-subtle texture only (no vignette, no black falloff) */
.workspace-atmosphere{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.workspace-atmosphere-glow,
.workspace-atmosphere-falloff,
.workspace-atmosphere-vignette{
  display: none;
}
.workspace-atmosphere-grain{
  position: absolute;
  inset: 0;
  opacity: .018;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

/* Root scaffold */
.workspace-root{
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  display:flex;
  flex-direction: column;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   Outcome intelligence surface (additive, compact, premium)
   ------------------------------------------------------------------------- */

.outcome-intel-card{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, black 0%), color-mix(in oklab, var(--bg) 92%, black 0%));
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-1);
  margin-top: var(--s-4);
}
.rail-outcome-intel-host{
  margin-top: var(--s-3);
}
.outcome-intel-card--rail{
  margin-top: 0;
}

.outcome-intel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.outcome-intel-latest{
  border: 1px solid color-mix(in oklab, var(--border) 86%, transparent);
  background: color-mix(in oklab, white 3.5%, transparent);
  border-radius: var(--r-md);
  padding: var(--s-3);
}

.outcome-intel-latest-row{
  display:flex;
  align-items:center;
  gap: var(--s-2);
}

.outcome-intel-headline{
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.outcome-tier-badge{
  display:inline-flex;
  align-items:center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: color-mix(in oklab, white 2.5%, transparent);
  color: color-mix(in oklab, var(--text) 92%, var(--text-muted));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  flex-shrink: 0;
}

.outcome-tier-badge.tier-excellent{
  border-color: color-mix(in oklab, var(--success) 45%, var(--border));
  background: color-mix(in oklab, var(--success) 12%, transparent);
}
.outcome-tier-badge.tier-good{
  border-color: color-mix(in oklab, var(--success) 32%, var(--border));
  background: color-mix(in oklab, var(--success) 8%, transparent);
}
.outcome-tier-badge.tier-neutral{
  border-color: color-mix(in oklab, var(--warning) 34%, var(--border));
  background: color-mix(in oklab, var(--warning) 10%, transparent);
}
.outcome-tier-badge.tier-bad{
  border-color: color-mix(in oklab, var(--danger) 38%, var(--border));
  background: color-mix(in oklab, var(--danger) 10%, transparent);
}
.outcome-tier-badge.tier-unknown{
  opacity: .9;
}

.outcome-intel-badges{
  margin-top: var(--s-2);
  display:flex;
  flex-wrap:wrap;
  gap: var(--s-2);
}

.outcome-intel-money{
  margin-top: var(--s-2);
  font-size: 12.5px;
  color: var(--text-muted);
}

.outcome-intel-money.is-hidden{ display:none; }

.outcome-metric-grid{
  margin-top: var(--s-3);
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}
.outcome-metric-grid.is-hidden{ display:none; }

.outcome-metric{
  border: 1px solid color-mix(in oklab, var(--border) 86%, transparent);
  background: color-mix(in oklab, white 2.8%, transparent);
  border-radius: var(--r-md);
  padding: 10px 10px;
}

.outcome-metric-label{
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .01em;
}

.outcome-metric-value{
  margin-top: 2px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--text);
}

.outcome-insights{
  margin-top: var(--s-3);
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.outcome-insights.is-hidden{ display:none; }

.outcome-insight{
  font-size: 12.5px;
  color: color-mix(in oklab, var(--text) 88%, var(--text-muted));
  line-height: 1.45;
}

.outcome-pattern{
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.outcome-pattern.is-hidden{ display:none; }

.outcome-pattern-label{
  color: color-mix(in oklab, var(--text) 90%, var(--text-muted));
  font-weight: 650;
  margin-right: 6px;
}
.outcome-pattern-exp{
  margin-left: 6px;
  display:inline-flex;
  align-items:center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border));
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: color-mix(in oklab, var(--text) 92%, var(--text-muted));
  font-size: 12px;
  font-weight: 650;
}

.workspace-body{
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Top command strip (subtle utility chrome) */
.command-strip{
  position: sticky;
  top: 0;
  z-index: 40;
  display:flex;
  align-items: center;
  gap: var(--s-3);
  padding: max(8px, env(safe-area-inset-top, 0px)) 12px 8px 18px;
  background: rgba(4,5,13,.75);
  border-bottom: 1px solid rgba(255,255,255,.11);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
#workspaceRoot.workspace-active .command-strip{
  background: rgba(4,5,13,.75);
  border-bottom-color: rgba(255,255,255,.11);
}
#workspaceRoot.workspace-active .command-mode-pill{
  opacity: 0.82;
  border-color: color-mix(in oklab, var(--xv-pill-border) 72%, transparent);
}
#workspaceRoot.workspace-active .command-status-chip{
  opacity: 0.88;
  border-color: color-mix(in oklab, var(--xv-pill-border) 65%, var(--line));
}

.command-strip-left,
.command-strip-center,
.command-strip-right{
  display:flex;
  align-items: center;
  gap: 10px;
}
.command-strip-center{ flex: 1; justify-content: center; min-width: 0; }
.command-strip-center--align{ justify-content: center; }

.command-brand{
  display:flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
}
.command-brand svg{
  display:block;
  height: 38px;
  width: auto;
}
.command-brand:hover{ background: color-mix(in oklab, white 5%, transparent); }
.command-brand-mark{
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  opacity: 0.94;
}
.command-brand-mark svg{
  width: 18px;
  height: 18px;
  display: block;
}
.xv-brand-mark{ color: var(--accent); }
.xv-brand-glyph{ color: color-mix(in oklab, var(--accent) 92%, white 0%); }
.command-brand-text{ display:flex; flex-direction: column; line-height: 1.05; }
.command-brand-name{ font-weight: 600; letter-spacing: .2px; color: var(--text); }
.command-brand-tag{ color: var(--text-3); font-size: 12px; }
.command-brand-tag--strip{ display:none; }

.command-mode-pill{
  font-size: 12.5px;
  color: color-mix(in oklab, var(--accent) 68%, var(--text-2));
  padding: 6px 10px;
  border: 1px solid color-mix(in oklab, var(--xv-pill-border) 92%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--xv-pill-wash) 92%, transparent);
}

.command-status-chip{
  display:flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid color-mix(in oklab, var(--xv-pill-border) 78%, var(--line));
  border-radius: 10px;
  background: color-mix(in oklab, var(--xv-pill-wash) 80%, transparent);
  min-width: 0;
}
.command-status-dot{
  width: 8px; height: 8px;
  border-radius: 99px;
  background: color-mix(in oklab, var(--accent) 82%, rgba(255,255,255,0.25));
  box-shadow: 0 0 10px rgba(124,92,252,.20);
}
.command-capacity{
  font-size: 12.5px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(520px, 52vw);
  transition: opacity var(--t-med) var(--ease), filter var(--t-med) var(--ease);
}
.command-capacity.xv-swap{
  opacity: 0.7;
  filter: blur(0.15px);
}

.command-status-chip--stack{
  align-items: flex-start;
}
.command-capacity-cluster{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.command-earned-line{
  display: block;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-4);
  max-width: min(520px, 52vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.command-earned-line[hidden]{
  display: none !important;
}

.command-auth-chip{
  font-size: 12.5px;
  color: var(--text-3);
  padding: 6px 10px;
  border: 1px solid color-mix(in oklab, var(--line-2) 92%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--xv-glass) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.command-auth-chip.is-guest-chip{
  color: color-mix(in oklab, var(--accent) 78%, var(--text-2));
  border-color: color-mix(in oklab, var(--accent) 22%, var(--line));
  background: color-mix(in oklab, var(--xv-pill-wash) 92%, transparent);
}

/* Buttons: calm */
.icon-btn{
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, var(--line-3) 92%, transparent);
  background: color-mix(in oklab, var(--xv-glass) 92%, transparent);
  color: var(--text-2);
  display:inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-press) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.icon-btn:hover{
  background: color-mix(in oklab, var(--xv-glass-2) 92%, transparent);
  border-color: color-mix(in oklab, var(--line-3) 92%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.16);
}
.icon-btn:active{ transform: translateY(0) scale(0.98); }
.icon-btn:focus-visible{ outline: none; box-shadow: var(--ring); }
.icon-btn:disabled,
.icon-btn[aria-disabled="true"]{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn,
.ghost-btn,
.access-link-btn,
.upgrade-btn,
.limit-cta,
.limit-secondary-link,
.refund-link-refresh,
.sidebar-jump-btn{
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, var(--line-3) 92%, transparent);
  background: color-mix(in oklab, var(--xv-glass) 92%, transparent);
  color: var(--text);
  min-height: 40px;
  padding: 0 14px;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-press) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease),
    filter var(--t-fast) var(--ease);
}

.ghost-btn{
  color: var(--text-2);
  opacity: 0.92;
}
.ghost-btn:hover{
  opacity: 1;
}
.btn:hover,
.ghost-btn:hover,
.access-link-btn:hover,
.upgrade-btn:hover,
.limit-cta:hover,
.limit-secondary-link:hover,
.refund-link-refresh:hover,
.sidebar-jump-btn:hover{
  background: color-mix(in oklab, var(--xv-glass-2) 92%, transparent);
  border-color: color-mix(in oklab, var(--line-3) 92%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.16);
}
.btn:active,
.ghost-btn:active,
.access-link-btn:active,
.upgrade-btn:active,
.limit-cta:active{
  transform: translateY(0) scale(0.985);
}
.btn:active,
.ghost-btn:active,
.access-link-btn:active,
.upgrade-btn:active,
.sidebar-jump-btn:active,
.refund-link-refresh:active{
  transform: translateY(0) scale(0.985);
  box-shadow: none;
}
.btn:focus-visible,
.ghost-btn:focus-visible,
.access-link-btn:focus-visible,
.upgrade-btn:focus-visible,
.limit-cta:focus-visible,
.limit-secondary-link:focus-visible,
.refund-link-refresh:focus-visible{
  outline:none;
  box-shadow: var(--ring);
}

.btn:disabled,
.ghost-btn:disabled,
.access-link-btn:disabled,
.upgrade-btn:disabled,
.limit-cta:disabled,
.limit-secondary-link:disabled,
.refund-link-refresh:disabled,
.sidebar-jump-btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

.btn{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: var(--xv-accent-border);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: var(--xv-cta-shadow);
}
.ghost-btn{
  background: rgba(255,255,255,.04);
  border-color: color-mix(in oklab, var(--line-3) 92%, transparent);
  color: var(--text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.access-link-btn{
  background: transparent;
  color: var(--text-3);
  padding: 8px 10px;
}
.upgrade-btn{
  width: 100%;
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}
.upgrade-btn span:last-child{ color: var(--text-3); }

/* Inputs */
.input,
.refund-input,
textarea#messageInput,
input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea{
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, var(--line-3) 88%, transparent);
  background: color-mix(in oklab, var(--xv-glass) 92%, transparent);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.input:focus,
.refund-input:focus,
textarea#messageInput:focus,
input:focus,
select:focus,
textarea:focus{
  border-color: color-mix(in oklab, var(--accent) 38%, var(--line-2));
  box-shadow: var(--ring);
  background: color-mix(in oklab, var(--xv-glass-2) 92%, transparent);
}
select.refund-select{ padding-right: 34px; }

/* Workspace grid */
.workspace-grid{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.workspace-split{ min-height: 0; }
.app{ min-height: 0; }

/* Sidebar: quiet drawer / icon rail */
#sidebarShell{
  position: relative;
  display:flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  transition: width var(--t-slow) var(--ease);
  width: var(--sidebar-collapsed);
}
#sidebarShell[data-sidebar-collapsed="false"]{
  width: var(--sidebar-expanded);
}
#workspaceRoot.workspace-active #sidebarShell{
  border-right-color: color-mix(in oklab, var(--border) 58%, transparent);
  background: color-mix(in oklab, var(--surface) 90%, var(--bg));
}

.sidebar-chrome{
  padding: 10px 8px 6px 8px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
}
.sidebar-topbar{
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 36px;
}
.sidebar-collapse-btn{
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
}
.sidebar-collapse-glyph{
  width: 16px;
  height: 12px;
  display:block;
  position: relative;
}
.sidebar-collapse-glyph::before,
.sidebar-collapse-glyph::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height: 1px;
  background: color-mix(in oklab, var(--text-2) 70%, transparent);
  top: 3px;
  box-shadow: 0 5px 0 color-mix(in oklab, var(--text-2) 55%, transparent);
}
.sidebar-collapse-glyph::after{
  display:none;
}

.sidebar-nav{ display:block; margin-top: 8px; }
.sidebar-nav-group-label{
  display:none;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 10px 12px 6px 12px;
}

.sidebar-nav-items{ display:flex; flex-direction: column; gap: 4px; align-items: stretch; }
.sidebar-nav-divider{
  height: 1px;
  background: color-mix(in oklab, var(--line) 70%, transparent);
  margin: 12px 10px;
}

.sidebar-nav-item{
  position: relative;
  z-index: 0;
  width: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 0 10px;
  min-height: 40px;
  border-radius: 10px;
  border: none;
  box-shadow: none;
  background: transparent;
  color: var(--text-2);
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-press) var(--ease);
  box-sizing: border-box;
}
.sidebar-nav-item::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 10px;
  background: color-mix(in oklab, var(--accent) 11%, rgba(255,255,255,0.03));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent);
  opacity: 0;
  transform: translateY(1px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  z-index: -1;
}
.sidebar-nav-item:hover{
  background: rgba(255,255,255,0.045);
  transform: translateY(-0.5px);
}
.sidebar-nav-item.is-active,
.sidebar-nav-item[aria-selected="true"]{
  color: var(--text);
  background: transparent;
  box-shadow: none;
}
.sidebar-nav-item.is-active::before,
.sidebar-nav-item[aria-selected="true"]::before{
  opacity: 1;
  transform: translateY(0);
}
.sidebar-nav-icon{
  width: 18px;
  height: 18px;
  min-width: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: color-mix(in oklab, var(--text) 72%, transparent);
  flex-shrink: 0;
}
.sidebar-nav-icon svg{
  width: 18px;
  height: 18px;
  display: block;
  opacity: 0.82;
}
.sidebar-nav-item.is-active .sidebar-nav-icon svg,
.sidebar-nav-item[aria-selected="true"] .sidebar-nav-icon svg{
  opacity: 0.92;
}
.sidebar-nav-label{
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  font-weight: 520;
}

/* Collapsed rail behavior */
#sidebarShell[data-sidebar-collapsed="true"] .sidebar-nav-label,
#sidebarShell[data-sidebar-collapsed="true"] .sidebar-nav-group-label{
  display:none;
}
#sidebarShell[data-sidebar-collapsed="true"] .sidebar-nav-item{
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--r-sm);
}

#sidebarShell[data-sidebar-collapsed="true"] .sidebar-nav-item::before{
  border-radius: var(--r-sm);
}
#sidebarShell[data-sidebar-collapsed="true"] .sidebar-nav-label{
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  position: absolute;
}
#sidebarShell[data-sidebar-collapsed="true"] .sidebar-scroll-host{
  display:none;
}

/* Tooltip for collapsed rail using data-cld-tip */
#sidebarShell[data-sidebar-collapsed="true"] [data-cld-tip]{ position: relative; }
#sidebarShell[data-sidebar-collapsed="true"] [data-cld-tip]::after{
  content: attr(data-cld-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-2px);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, var(--line) 85%, transparent);
  background: color-mix(in oklab, var(--bg2) 86%, transparent);
  color: var(--text-2);
  font-size: 12.5px;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0ms linear var(--t-fast);
}
#sidebarShell[data-sidebar-collapsed="true"] [data-cld-tip]:hover::after{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0ms linear 0ms;
}

/* Sidebar scrolling & panels */
.sidebar-scroll-host{
  position: relative;
  flex: 1;
  min-height: 0;
}
.sidebar-scroll{
  height: 100%;
  overflow:auto;
  padding: 10px 8px 14px 8px;
}

.sidebar-panel{
  padding: 0;
  color: var(--text-2);
}
.sidebar-panel[hidden]{ display:none !important; }
.section-label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 6px 6px 10px 6px;
}
.section-label-tight{ margin-top: 2px; }
.muted-copy{
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.45;
}

.auth-card,
.tier-card,
.sidebar-capability-card,
.rail-card,
.rail-surface,
.refund-card{
  background: color-mix(in oklab, var(--surface-soft) 22%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 65%, transparent);
  border-radius: var(--r-md);
  padding: 12px;
}
.auth-card{ display:flex; flex-direction: column; gap: 10px; }
.btn-row{ display:flex; gap: 10px; }
.btn-row.access-links-row{ margin-top: 4px; }
.btn-row .btn, .btn-row .ghost-btn, .btn-row .access-link-btn{ flex:1; }

/* Access panel — premium, scannable hierarchy (status → metrics → action) */
.access-overview-card{
  background: color-mix(in oklab, var(--surface-soft) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 65%, transparent);
  border-radius: var(--r-md);
  padding: 12px;
  margin: 0 0 10px 0;
}
.access-overview-head{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.access-overview-label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.access-overview-state{
  margin-top: 4px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.25;
}
.access-overview-copy{
  margin-top: 8px;
}
.access-state-pill{
  flex-shrink: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text-3);
  border: 1px solid color-mix(in oklab, var(--line) 75%, transparent);
  background: color-mix(in oklab, var(--bg1) 52%, transparent);
}
.access-state-pill.is-signed-in{
  color: color-mix(in oklab, var(--success) 74%, var(--text-2));
  border-color: color-mix(in oklab, var(--success) 22%, var(--line));
  background: color-mix(in oklab, var(--success) 7%, var(--bg1));
}
.access-state-pill.is-guest{
  color: color-mix(in oklab, var(--accent) 78%, var(--text-2));
  border-color: color-mix(in oklab, var(--accent) 20%, var(--line));
  background: color-mix(in oklab, var(--accent) 7%, var(--bg1));
}
.access-metrics{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
}
.access-metric-row{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-3);
  font-size: 13px;
}
.access-metric-k{
  color: var(--text-4);
}
.access-metric-v{
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.02em;
}
.access-link-inline{
  margin-top: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  text-align: left;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.access-link-inline:hover{
  background: color-mix(in oklab, white 4.5%, transparent);
  border-color: color-mix(in oklab, var(--line) 70%, transparent);
  color: var(--text-2);
}
.access-link-inline:focus-visible{ outline: none; box-shadow: var(--ring); }

.auth-card.auth-card-refined{ gap: 12px; }
.auth-field-stack{ display:flex; flex-direction: column; gap: 10px; }
.auth-cta-row .btn{ flex: 1.25; }
.auth-cta-row .ghost-btn{ flex: 0.9; }
.access-cta-reassurance{
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--text-muted) 92%, var(--text-4));
}
.access-utility-row{
  justify-content: flex-start;
}
.access-utility-row .access-link-btn{
  flex: 0 0 auto;
  margin-left: 0;
  opacity: 0.72;
}
.access-utility-row .access-link-btn:hover{
  opacity: 0.92;
}
.auth-hints-fold{
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: color-mix(in oklab, var(--bg2) 52%, transparent);
}
.auth-hints-summary{
  cursor: pointer;
  list-style: none;
  color: var(--text-2);
  font-weight: 540;
  font-size: 13px;
}
.auth-hints-summary::-webkit-details-marker{ display:none; }
.auth-hints{ margin-top: 10px; }

.sidebar-more{
  margin-top: 12px;
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: color-mix(in oklab, var(--bg2) 52%, transparent);
}
.sidebar-more-summary{
  cursor:pointer;
  color: var(--text-2);
  font-weight: 540;
}
.sidebar-panel-hint{ margin: 10px 0 0 0; }

/* Notice */
.notice{
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--line) 75%, transparent);
  background: color-mix(in oklab, var(--bg2) 56%, transparent);
  padding: 12px;
}
.notice.notice-dense{ padding: 10px 12px; }
.notice-sidebar{ margin-top: 4px; }
.notice-header{ display:flex; align-items:center; gap: 10px; }
.notice-dot{
  width: 8px; height: 8px; border-radius: 99px;
  background: color-mix(in oklab, var(--text-3) 60%, transparent);
}
.notice-title{ font-weight: 600; color: var(--text); }
.notice-detail-fold{ margin-top: 10px; }
.notice-detail-fold-summary{ cursor:pointer; color: var(--text-3); font-size: 13px; }
.notice-detail{ color: var(--text-3); font-size: 13px; }
.notice.info{ border-color: var(--line); }
.notice.success{ border-color: color-mix(in oklab, var(--success) 24%, var(--line)); }
.notice.warning{ border-color: color-mix(in oklab, var(--warning) 24%, var(--line)); }
.notice.error{ border-color: color-mix(in oklab, var(--danger) 22%, var(--line)); }
.notice.notice-continuation{ opacity: .92; }

/* Main stage: centered conversation column */
.main{
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.main-canvas{
  background: transparent;
  display:flex;
  flex: 1;
  min-height: 0;
  align-self: stretch;
}
.main-canvas-inner{
  width: 100%;
  min-height: 0;
  display:flex;
  flex: 1;
  justify-content: stretch;
  align-self: stretch;
  overflow: hidden;
}
.main-stage{
  position: relative;
  width: 100%;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(var(--stage-pad) + 2px) var(--stage-pad) calc(var(--stage-pad) + 6px);
  overflow: hidden;
}
.main-stage-ambient{ display:none; }

.xv-stage-scaffold{
  width: 100%;
  margin: 0;
  min-height: 0;
  flex: 1;
  display:flex;
  flex-direction: column;
  overflow: hidden;
}

.main-stage-header{ display:none; }

.main-stage-body{
  flex: 1;
  min-height: 0;
  display:flex;
  flex-direction: column;
  overflow: hidden;
}
.xv-stage-body{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Surfaces: one active at a time via [hidden] */
.xv-surface{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.xv-surface:not([data-surface-panel="workspace"]){
  overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: 10px;
}
.workspace-conversation-column{
  flex: 1;
  min-width: 0;
  min-height: 0;
  display:flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow: hidden;
  max-width: 820px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}
.home-surface{
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: none;
  flex-direction: column;
  overflow: auto;
  overscroll-behavior: contain;
  padding: calc(12px + var(--empty-hero-offset)) var(--composer-pad-x) 12px var(--composer-pad-x);
}
#workspaceRoot.workspace-idle .home-surface{ display:flex; }
#workspaceRoot.workspace-active .home-surface{ display:none; }
#workspaceRoot.workspace-idle .messages-zone{ display:none; }
#workspaceRoot.workspace-active .messages-zone{ display:flex; }
.workspace-conversation-column:has(.empty-state){
  gap: 10px;
}
.workspace-conversation-column:has(.empty-state) .composer-wrap{
  padding-top: 0;
}
#sidebarShell[data-sidebar-collapsed="true"] .sidebar-nav-divider{
  margin-left: 6px;
  margin-right: 6px;
}
.sidebar-nav-item:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}

/* Messages zone */
.messages-zone{
  flex: 1;
  min-height: 0;
  display:flex;
  flex-direction: column;
}
.messages-shell{
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}
.messages-shell.shell-live{
  border: none;
}
#workspaceRoot.workspace-active .messages-shell{
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--surface) 14%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 4%, transparent);
}
.messages{
  height: 100%;
  max-height: 100%;
  overflow:auto;
  overscroll-behavior: contain;
  padding: 4px 0 40px 0;
  display:flex;
  flex-direction: column;
  gap: var(--s-4);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

/* Prevent common flex rows from clipping long copy (wrap instead). */
.usage-line{
  flex-wrap: wrap;
  align-items: flex-start;
}
.usage-line > *{ min-width: 0; }
.usage-line > :first-child{ flex: 1 1 320px; }
.usage-line > :last-child{ flex: 0 0 auto; }

/* Content surfaces: enforce consistent centered reading width. */
.empty-card-launch--claude{
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Section labels: normalize size (keep existing casing/spacing rules). */
.section-label,
.rail-title,
.rail-inline-section-label{
  font-size: 11px;
}
.messages > *{
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.messages:has(> .empty-state){
  justify-content: center;
  align-items: center;
  padding: calc(12px + var(--empty-hero-offset)) var(--composer-pad-x) 12px var(--composer-pad-x);
}

/* Scroll shell fades (sidebar/messages/rail) */
.scroll-shell{ position: relative; }
.scroll-shell::before,
.scroll-shell::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height: var(--fade-top);
  pointer-events:none;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  z-index: 2;
}
.scroll-shell::before{
  top: 0;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--bg) 92%, transparent), transparent);
}
.scroll-shell::after{
  bottom: 0;
  height: var(--fade-bottom);
  background: linear-gradient(to top, color-mix(in oklab, var(--bg) 92%, transparent), transparent);
}
.scroll-shell[data-show-top="true"]::before{ opacity: 1; }
.scroll-shell[data-show-bottom="true"]::after{ opacity: 1; }

/* Scrollbars */
.scroll-area{
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, white 18%, transparent) transparent;
}

/* Thin scrollbar flush to edge */
::-webkit-scrollbar{
  width: 4px;
}
::-webkit-scrollbar-track{
  background: transparent;
  margin: 0;
  padding: 0;
}
::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.15);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.25);
}

/* Keep scroll-area consistent with global webkit rules */
.scroll-area::-webkit-scrollbar{ width: 4px; height: 4px; }
.scroll-area::-webkit-scrollbar-track{ background: transparent; margin: 0; padding: 0; }
.scroll-area::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.15); border-radius: 0; }
.scroll-area::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.25); }

/* Chat: thin, unobtrusive scrollbar (scope to messages only) */
#messages.scroll-area::-webkit-scrollbar{ width: 4px; }
#messages.scroll-area::-webkit-scrollbar-track{ background: transparent; }
#messages.scroll-area::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
}

#messages{
  padding-bottom: 28px !important;
}

/* Extend workspace scroll to viewport edge (scrollbar flush right) */
.messages{
  padding-right: 0;
  margin-right: 0;
}

/* Message cards: flat transcript, no neon */
.msg-group{ display:flex; }
.msg-group.user{ justify-content: flex-start; }
.msg-group.assistant{ justify-content: flex-start; }

.msg-card{
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  padding: 20px;
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.msg-card.user{
  background: transparent;
  border-color: transparent;
}
.msg-card.assistant{
  background: transparent;
  border-color: transparent;
}
.msg-group.user .msg-card{
  padding: 20px;
}
.msg-group.user .reply-text{
  padding: 11px 14px;
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--surface-soft) 35%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 45%, transparent);
}
.msg-head{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.msg-who{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 600;
  color: var(--text);
}
.msg-identity{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: color-mix(in oklab, var(--text) 78%, transparent);
}
.msg-identity svg{
  width: 17px;
  height: 17px;
  display: block;
  opacity: 0.85;
}
.msg-badge{
  width: 20px; height: 20px;
  border-radius: 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  border: none;
  color: color-mix(in oklab, var(--text) 78%, transparent);
}
.msg-badge svg{
  width: 17px;
  height: 17px;
  opacity: 0.85;
}
.msg-time{
  font-size: 12.5px;
  color: var(--text-4);
}

.msg-body{ color: var(--text-2); }
.reply-body{ display:flex; flex-direction: column; gap: 8px; }
.reply-hero-label{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 2px 0 0 0;
  opacity: 0.78;
}
.reply-text{
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-2);
  white-space: normal;
  word-break: break-word;
}
#workspaceRoot.workspace-active .msg-card.assistant .reply-text{
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: -0.015em;
  color: var(--text);
}
#workspaceRoot.workspace-active .msg-card.assistant .xv-zone--reply-output .reply-text{
  font-size: 16.25px;
  line-height: 1.72;
  font-weight: 500;
  letter-spacing: -0.018em;
}
.reply-text p{
  margin: 0 0 12px;
}
.reply-text p:last-child{
  margin-bottom: 0;
}
.reply-text a{ text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--text-3) 55%, transparent); }
.reply-text code{
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--bg1) 62%, transparent);
  color: var(--text-2);
}

.assistant-result-stack{ display:flex; flex-direction: column; gap: 12px; }
.reply-body--outcome{
  gap: 6px;
}
.reply-body--hero{
  gap: 10px;
}
.customer-message-block--reply-hero{
  padding: 12px 14px 14px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--line) 72%, transparent);
  background: color-mix(in oklab, var(--bg2) 42%, transparent);
}
.xv-outcome-decision-cluster .xv-workspace-zone,
.xv-outcome-decision-cluster .xv-workspace-zone + .xv-workspace-zone{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.xv-outcome-decision-cluster .decision-panel{
  margin-top: 6px;
  padding-top: 10px;
}
.xv-outcome-decision-cluster .ticket-result-summary{
  margin-bottom: 8px;
}
.xv-zone--reply-output{
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in oklab, var(--line) 65%, transparent);
}
.assistant-context-line{
  font-size: 12.5px;
  color: color-mix(in oklab, var(--text-muted) 92%, var(--text-4));
  padding: 8px 0 6px 0;
  border-radius: 0;
  border: none;
  border-left: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
  padding-left: 11px;
  background: transparent;
}
.reply-value-reinforcement{
  font-size: 12.5px;
  color: var(--text-3);
}

.reply-prep-meta{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.run-value-summary{
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  color: color-mix(in oklab, var(--text) 88%, var(--text-muted));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  max-width: 100%;
}
.run-value-summary[hidden]{ display: none !important; }
.reply-prep-time{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--bg2) 50%, transparent);
  color: var(--text-4);
  font-size: 12px;
  font-weight: 550;
}

.assistant-footer{
  margin-top: 6px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  opacity: 0.01;
  transform: translateY(2px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.msg-card.assistant:hover .assistant-footer,
.msg-card.assistant:focus-within .assistant-footer{
  opacity: 1;
  transform: translateY(0);
}

.automation-upsell{
  width: 100%;
  margin-top: 16px;
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--accent) 16%, var(--border));
  background: color-mix(in oklab, var(--accent) 5%, transparent);
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.automation-upsell--stacked{
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.automation-upsell-stack{
  width: 100%;
}
.automation-upsell--stacked .automation-upsell-cta{
  align-self: flex-end;
}
.automation-upsell-copy{
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}
.automation-upsell-cta{
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--line));
  background: linear-gradient(
    165deg,
    color-mix(in oklab, var(--accent) 52%, var(--bg3)),
    color-mix(in oklab, var(--accent-2) 40%, var(--bg3))
  );
  color: var(--accent-ink);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 650;
  transition: filter var(--t-med) var(--ease);
}
.automation-upsell-cta:hover{ filter: brightness(1.05); }
.automation-upsell-cta:focus-visible{ outline: none; box-shadow: var(--ring); }

/* Copy control — quiet utility */
.assistant-tools{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mini-btn.copy-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--line-3) 78%, transparent);
  background: color-mix(in oklab, var(--xv-glass) 92%, transparent);
  color: color-mix(in oklab, var(--text-4) 85%, var(--text-2));
  box-shadow: none;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  transition:
    transform var(--t-fast) var(--ease),
    background var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
}
.mini-btn.copy-btn svg{
  width: 15px;
  height: 15px;
  display: block;
  opacity: 0.72;
  transition: opacity var(--t-med) var(--ease);
}
.mini-btn.copy-btn:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--xv-glass-2) 92%, transparent);
  border-color: color-mix(in oklab, var(--line-3) 92%, transparent);
  color: var(--text-2);
  box-shadow: 0 6px 16px rgba(0,0,0,0.14);
}
.mini-btn.copy-btn:hover svg{
  opacity: 0.92;
}
.mini-btn.copy-btn:active{
  transform: translateY(0);
  background: rgba(255,255,255,0.045);
}
.mini-btn.copy-btn:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}

/* Prepared reveal (keep subtle, not glowy) */
.customer-message-block.xv-prepared-reveal{
  animation: preparedPulse 0.78s var(--ease) 1;
}
@keyframes preparedPulse{
  0%{ filter: none; }
  35%{ filter: brightness(1.04); }
  100%{ filter: none; }
}

/* Thinking (single premium block) — calm, subtle, no debug steps */
.xv-thinking-card{
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 14%, transparent);
  color: var(--text-muted);
}
.xv-thinking-head{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.xv-thinking-icon{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in oklab, var(--text) 70%, transparent);
  opacity: 0.9;
}
.xv-thinking-icon svg{
  width: 18px;
  height: 18px;
  display: block;
}
.xv-thinking-label{
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--text) 78%, transparent);
}
.xv-thinking-line{
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: color-mix(in oklab, var(--text-muted) 92%, var(--text-4));
}
.xv-thinking-dots{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 10px;
}
.xv-thinking-dot{
  width: 4px;
  height: 4px;
  border-radius: 99px;
  background: currentColor;
  opacity: 0.28;
  animation: xvThinkingDotPulse 1.15s var(--ease) infinite;
}
.xv-thinking-dot:nth-child(2){ animation-delay: 0.12s; }
.xv-thinking-dot:nth-child(3){ animation-delay: 0.24s; }
@keyframes xvThinkingDotPulse{
  0%, 100%{ opacity: 0.25; }
  45%{ opacity: 0.78; }
}

@media (prefers-reduced-motion: reduce){
  .xv-thinking-card,
  .xv-thinking-dot{
    animation: none !important;
    opacity: 0.85 !important;
  }
}

/* Typing mark: tiny + quiet */
.xalvion-typing-sovereign{ opacity: .75; }
.xalvion-sovereign-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 40%, transparent);
}
.xv-signal-rays,
.xv-spark-orbit{ display:none; }

/* Assistant meta (details fold) */
.assistant-meta-fold{
  border: 1px solid color-mix(in oklab, var(--border) 45%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--surface-soft) 10%, transparent);
  overflow:hidden;
}
.assistant-meta-fold-summary{
  padding: 8px 12px;
  cursor:pointer;
  list-style: none;
  color: color-mix(in oklab, var(--text-3) 45%, var(--text-4));
  font-weight: 500;
  font-size: 12.5px;
}
.assistant-meta-fold-summary::-webkit-details-marker{ display:none; }
.assistant-meta-fold-body{
  border-top: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  padding: 10px 12px 12px 12px;
}
.assistant-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--line) 75%, transparent);
  background: color-mix(in oklab, var(--bg2) 42%, transparent);
  color: var(--text-3);
  font-size: 12px;
}
.meta-chip svg{ width: 14px; height: 14px; opacity: .85; }
.meta-chip strong{ font-weight: 650; }
.meta-chip.is-warning{ border-color: color-mix(in oklab, var(--warning) 26%, var(--line)); }
.meta-chip.is-limit{ border-color: color-mix(in oklab, var(--danger) 20%, var(--line)); }

/* Decision + details panels — flat review strip, premium actions */
.decision-panel{
  margin: 12px 0 0 0;
  padding: 12px 0 6px 0;
  border: none;
  border-radius: 0;
  border-top: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
  background: transparent;
  transition: border-color var(--t-med) var(--ease);
  position: relative;
}
.decision-panel--gate{
  border-top-color: color-mix(in oklab, var(--accent) 18%, var(--border));
}
.decision-panel--safe-clear{
  border-top-color: color-mix(in oklab, var(--success) 16%, var(--border));
}

/* Primary decision callout — scanned before actions */
.decision-callout{
  width: 100%;
  margin: 0 0 8px 0;
  padding: 14px 16px 13px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--line) 55%, var(--accent) 12%);
  background: linear-gradient(
    165deg,
    color-mix(in oklab, var(--accent) 10%, var(--surface-soft)),
    color-mix(in oklab, var(--bg2) 40%, transparent)
  );
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}
.decision-callout-title{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text);
}
.decision-callout-confidence{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in oklab, var(--text-muted) 88%, var(--accent) 22%);
}

.decision-trust-block{
  margin-top: 10px;
}

/* Trust Dominance Layer — compact horizontal strip (no extra scrolling) */
.trust-strip{
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
  padding: 6px 0 0 0;
}
.trust-strip:empty{ display:none; }
.trust-strip--context{
  flex-wrap: wrap;
  white-space: normal;
  padding-top: 2px;
}
.trust-context-line{
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--text-3);
}
.trust-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--line) 75%, transparent);
  background: color-mix(in oklab, var(--bg2) 52%, transparent);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.trust-pill.tone-safe{
  border-color: color-mix(in oklab, var(--success) 22%, var(--line));
  background: color-mix(in oklab, var(--success) 6%, transparent);
  color: color-mix(in oklab, var(--success) 78%, var(--text-2));
}
.trust-pill.tone-review{
  border-color: color-mix(in oklab, var(--warning) 18%, var(--line));
  background: color-mix(in oklab, var(--warning) 6%, transparent);
  color: color-mix(in oklab, var(--warning) 78%, var(--text-2));
}
.trust-pill.tone-risk{
  border-color: color-mix(in oklab, var(--danger) 20%, var(--line));
  background: color-mix(in oklab, var(--danger) 6%, transparent);
  color: color-mix(in oklab, var(--danger) 80%, var(--text-2));
}

.trust-strip-detail{
  display:none;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 18%, transparent);
}
.trust-strip-detail-inner{
  display:grid;
  gap: 6px;
}
.trust-strip-why{
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-3);
}
.trust-strip.tone-risk + .trust-strip-detail{
  border-color: color-mix(in oklab, var(--danger) 14%, var(--border));
}

/* Hover/expand: show WHY without UI clutter */
.decision-trust-block:hover .trust-strip-detail{
  display:block;
}
.xv-governor-surface{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--border) 58%, transparent);
  opacity: 0.94;
}
.xv-governor-surface[hidden]{ display: none !important; }
.xv-governor-eyebrow{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 8px;
}
.xv-governor-reason,
.xv-governor-risk,
.xv-governor-next{
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.xv-governor-k{
  font-size: 11px;
  font-weight: 650;
  color: var(--text-4);
  letter-spacing: 0.02em;
}
.xv-governor-v,
.xv-governor-next-v{
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.45;
}
.decision-outcome-intel{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 35%, transparent);
}
.decision-outcome-intel[hidden]{ display: none !important; }
.decision-outcome-intel-inner{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.decision-outcome-intel__k{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}
.decision-outcome-intel__p{
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-2);
  line-height: 1.45;
}
.decision-outcome-intel__s{
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

.decision-outcome-intel-fold{
  margin-top: 10px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--border) 62%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 12%, transparent);
}
.decision-outcome-intel-fold-summary{
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}
.decision-outcome-intel-fold-summary::-webkit-details-marker{ display: none; }
.decision-outcome-intel-fold .decision-outcome-intel-inner{
  padding: 0 12px 12px;
  border-top: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
}

.xv-governor-fold{
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, var(--border) 65%, transparent);
  background: color-mix(in oklab, var(--surface) 30%, transparent);
}
.xv-governor-fold-summary{
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--text-3);
}
.xv-governor-fold-summary::-webkit-details-marker{ display: none; }
.xv-governor-fold-body{
  padding: 2px 10px 12px;
  border-top: 1px solid color-mix(in oklab, var(--border) 48%, transparent);
}
.xv-governor-fold-body .xv-governor-eyebrow{
  margin-top: 10px;
}

.approval-banner--premium{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border));
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 11%, transparent), color-mix(in oklab, var(--surface-soft) 42%, transparent));
  margin-bottom: 10px;
}
.approval-banner--premium > svg{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.92;
  color: color-mix(in oklab, var(--accent) 72%, var(--text-2));
}
.approval-banner-body{ min-width: 0; }
.approval-banner-eyebrow{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 50%, var(--text-muted));
}
.approval-banner-title{
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.approval-banner-copy{
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}
.approval-banner-gov{
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
  padding-top: 8px;
  border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
.decision-panel-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: static;
  padding-top: 2px;
  padding-bottom: 6px;
}
.decision-controls{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1 1 220px;
}
.decision-controls-secondary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.decision-controls-primary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.decision-controls-tertiary{
  display: inline-flex;
  align-items: center;
}

.consequence-signal{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.02em;
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 22%, transparent);
  color: var(--text-muted);
}
.consequence-signal.signal-safe{
  border-color: color-mix(in oklab, var(--success) 22%, var(--line));
  background: color-mix(in oklab, var(--success) 6%, transparent);
  color: color-mix(in oklab, var(--success) 72%, var(--text-2));
}
.consequence-signal.signal-review{
  border-color: color-mix(in oklab, var(--warning) 20%, var(--line));
  background: color-mix(in oklab, var(--warning) 7%, transparent);
  color: color-mix(in oklab, var(--warning) 78%, var(--text-2));
}
.consequence-signal.signal-approval,
.consequence-signal.signal-high-risk{
  border-color: color-mix(in oklab, var(--accent) 18%, var(--line));
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  color: color-mix(in oklab, var(--accent) 82%, var(--text-2));
}
.consequence-signal.signal-blocked{
  border-color: color-mix(in oklab, var(--danger) 26%, var(--line));
  background: color-mix(in oklab, var(--danger) 7%, transparent);
  color: color-mix(in oklab, var(--danger) 82%, var(--text-2));
}

/* Operator review actions — icon + label, clear hierarchy */
.op-action{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  transition:
    background var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    opacity var(--t-fast) var(--ease),
    transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease),
    filter var(--t-med) var(--ease);
  transform: translateY(0);
  position: relative;
  overflow: hidden;
  user-select: none;
}
.op-action:hover:not(:disabled){
  transform: translateY(-1px);
}
.op-action:active:not(:disabled){
  transform: translateY(0) scale(0.98);
}
.op-action:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}
.op-action:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}
.op-action:disabled:hover{
  transform: none;
  filter: none;
}
.op-action__icon{
  display: inline-flex;
  opacity: 0.88;
}
.op-action__icon svg{
  width: 15px;
  height: 15px;
  display: block;
}
.op-action--secondary{
  border-color: color-mix(in oklab, var(--line-3) 78%, transparent);
  background: color-mix(in oklab, var(--xv-glass) 92%, transparent);
  color: var(--text-2);
}
.op-action--secondary:hover:not(:disabled){
  background: color-mix(in oklab, var(--xv-glass-2) 92%, transparent);
  border-color: color-mix(in oklab, var(--line-3) 92%, transparent);
  color: var(--text);
}
.op-action--tertiary{
  min-height: 34px;
  padding: 0 12px;
  border-color: color-mix(in oklab, var(--line-3) 55%, transparent);
  background: transparent;
  color: var(--text-3);
  font-weight: 550;
  opacity: 0.92;
}
.op-action--tertiary:hover:not(:disabled){
  background: color-mix(in oklab, var(--xv-glass) 70%, transparent);
  border-color: color-mix(in oklab, var(--line-3) 78%, transparent);
  color: var(--text-2);
  opacity: 1;
}
.op-action--tertiary .op-action__icon{
  opacity: 0.72;
}
.op-action--ghost-danger{
  border-color: color-mix(in oklab, var(--danger) 22%, var(--line));
  background: color-mix(in oklab, var(--danger) 5%, transparent);
  color: color-mix(in oklab, var(--danger) 82%, var(--text-2));
}
.op-action--ghost-danger:hover:not(:disabled){
  background: color-mix(in oklab, var(--danger) 10%, transparent);
  border-color: color-mix(in oklab, var(--danger) 30%, var(--line));
}
.op-action--primary{
  border-color: var(--xv-accent-border);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: var(--xv-cta-shadow);
}
.op-action--primary:hover:not(:disabled){
  filter: brightness(1.05);
  border-color: color-mix(in oklab, var(--xv-accent-border) 90%, rgba(255,255,255,0.22));
}
.op-action--primary--hold{
  font-weight: 750;
  min-height: 40px;
  padding: 0 18px;
  font-size: 13.5px;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent-ink) 26%, transparent),
    0 8px 26px color-mix(in oklab, var(--accent) 14%, transparent),
    var(--xv-cta-shadow);
}
.op-action--primary--hold.xv-holdable{
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent-ink) 24%, transparent),
    0 10px 30px color-mix(in oklab, var(--accent) 12%, transparent),
    var(--xv-cta-shadow);
}
.op-action--primary--hold .xv-hold-fill{
  position: absolute;
  inset: 0;
  width: calc(100% * var(--xv-hold-pct, 0));
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--success) 22%, transparent),
    color-mix(in oklab, var(--success) 12%, transparent)
  );
  opacity: 0;
  transition: opacity 120ms var(--ease);
  pointer-events: none;
}
.op-action--primary--hold.xv-hold-armed .xv-hold-fill,
.op-action--primary--hold.xv-hold-active .xv-hold-fill{
  opacity: 0.95;
}
.op-action--primary--hold.xv-hold-active{
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--success) 22%, transparent),
    0 0 0 4px color-mix(in oklab, var(--success) 10%, transparent),
    0 10px 30px color-mix(in oklab, var(--success) 12%, transparent),
    var(--xv-cta-shadow);
}
.op-action--primary--hold.xv-hold-active .op-action__label,
.op-action--primary--hold.xv-hold-armed .op-action__label{
  position: relative;
  z-index: 1;
}
.op-action--primary--hold.xv-hold-active .op-action__icon,
.op-action--primary--hold.xv-hold-armed .op-action__icon{
  position: relative;
  z-index: 1;
}

.xv-check-anim{
  position: relative;
}
.xv-check-anim svg{
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: xvCheckDraw 420ms var(--ease) forwards;
}
@keyframes xvCheckDraw{
  to{ stroke-dashoffset: 0; }
}
.op-action.is-loading{
  pointer-events: none;
  opacity: 0.72;
}
.op-action.is-loading .op-action__label{ opacity: 0.35; }
.op-action.is-loading .op-action__icon{
  animation: xvThinkingBreath 1.2s var(--ease) infinite;
}

.decision-state-pill{
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  max-width: 100%;
  text-align: left;
  color: color-mix(in oklab, var(--accent) 60%, var(--text-muted));
  border: 1px solid color-mix(in oklab, var(--xv-pill-border) 70%, var(--line));
  background: color-mix(in oklab, var(--xv-pill-wash) 74%, transparent);
}
.decision-state-pill[data-status]{
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.decision-state-pill[data-status="prepared"]{
  border-color: color-mix(in oklab, var(--line-3) 78%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 30%, transparent);
  color: var(--text-2);
}
.decision-state-pill[data-status="requires_approval"]{
  border-color: color-mix(in oklab, var(--accent) 20%, var(--line));
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: color-mix(in oklab, var(--accent) 82%, var(--text-2));
}
.decision-state-pill[data-status="executing"]{
  border-color: color-mix(in oklab, var(--warning) 22%, var(--line));
  background: color-mix(in oklab, var(--warning) 9%, transparent);
  color: color-mix(in oklab, var(--warning) 82%, var(--text-2));
}
.decision-state-pill[data-status="executed"]{
  border-color: color-mix(in oklab, var(--success) 22%, var(--line));
  background: color-mix(in oklab, var(--success) 8%, transparent);
  color: color-mix(in oklab, var(--success) 82%, var(--text-2));
}
.decision-state-pill[data-status="failed"]{
  border-color: color-mix(in oklab, var(--danger) 22%, var(--line));
  background: color-mix(in oklab, var(--danger) 8%, transparent);
  color: color-mix(in oklab, var(--danger) 82%, var(--text-2));
}
.decision-state-pill[data-status="simulation"]{
  border-color: color-mix(in oklab, var(--warning) 18%, var(--line));
  background: color-mix(in oklab, var(--warning) 8%, transparent);
  color: color-mix(in oklab, var(--warning) 82%, var(--text-2));
}

.xv-exec-boundary{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 22%, transparent);
  color: var(--text-3);
  min-height: 28px;
}
.xv-exec-boundary[hidden]{ display:none; }
.xv-exec-boundary__title{
  font-size: 12px;
  font-weight: 650;
  color: var(--text-2);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.xv-exec-boundary__sub{
  font-size: 12px;
  color: var(--text-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(340px, 40vw);
}
.xv-exec-boundary[data-status="live"]{
  border-color: color-mix(in oklab, var(--success) 18%, var(--line));
  background: color-mix(in oklab, var(--success) 6%, transparent);
}
.xv-exec-boundary[data-status="simulation"]{
  border-color: color-mix(in oklab, var(--warning) 18%, var(--line));
  background: color-mix(in oklab, var(--warning) 6%, transparent);
}

/* Decision entrance: deliberate, premium, no flash */
.decision-panel{
  opacity: 1;
  transform: translateY(0);
}
.decision-panel.xv-decision-enter{
  animation: xvDecisionEnter 220ms var(--ease) both;
}
@keyframes xvDecisionEnter{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: translateY(0); }
}
.decision-panel.xv-decision-enter::after{
  content:"";
  position:absolute;
  inset: -10px;
  border-radius: calc(var(--r-lg) + 10px);
  pointer-events:none;
  opacity: 0;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent), 0 0 24px color-mix(in oklab, var(--accent) 10%, transparent);
  animation: xvSoftGlowPulse 520ms var(--ease) 1;
}
@keyframes xvSoftGlowPulse{
  0%{ opacity: 0; }
  35%{ opacity: 0.65; }
  100%{ opacity: 0; }
}
.decision-panel.xv-executing{
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--success) 12%, transparent), 0 0 32px color-mix(in oklab, var(--success) 10%, transparent);
}
.decision-panel.xv-executing-failed{
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--danger) 16%, transparent), 0 0 32px color-mix(in oklab, var(--danger) 10%, transparent);
}

/* Prepared time chip entrance (appears just after decision) */
.js-prepared-time{
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.js-prepared-time.xv-prep-chip-enter{
  opacity: 0;
  transform: translateY(4px);
  animation: xvPrepChipIn 220ms var(--ease) forwards;
}
@keyframes xvPrepChipIn{
  to{ opacity: 1; transform: translateY(0); }
}

.decision-panel-note{
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.governor-block{ margin-top: 6px; }
.governor-summary{
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.45;
}
.governor-risk-row{ margin-top: 8px; }
.governor-risk-chip{
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 24%, transparent);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 650;
}
.governor-next-step{
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.governor-factors,
.governor-violations{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
}
.governor-factors-label,
.governor-violations-label{
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text-2);
  margin-bottom: 6px;
}
.governor-factor,
.governor-violation{
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.45;
  padding-left: 12px;
  position: relative;
}
.governor-factor::before,
.governor-violation::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: color-mix(in oklab, var(--text-4) 70%, transparent);
}
.governor-violations{
  border-top-color: color-mix(in oklab, var(--danger) 14%, var(--border));
}
.governor-violations-label{
  color: color-mix(in oklab, var(--danger) 62%, var(--text-2));
}
.decision-panel-note[data-tone="success"]{
  color: color-mix(in oklab, var(--success) 75%, var(--text-2));
}
.decision-panel-error{
  margin-top: 8px;
  font-size: 12.5px;
  color: color-mix(in oklab, var(--danger) 78%, var(--text-2));
}

.decision-panel.decision-state-approved{
  border-top-color: color-mix(in oklab, var(--success) 22%, var(--border));
}
.decision-panel.decision-state-rejected{
  border-top-color: color-mix(in oklab, var(--text-4) 40%, var(--border));
  opacity: .96;
}

/* Session loop continuation (post-approval) */
.xv-next-action{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  display: grid;
  gap: 10px;
}
.xv-next-success{
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--success) 22%, var(--line));
  background: color-mix(in oklab, var(--success) 6%, transparent);
  padding: 10px 12px;
}
.xv-next-success-title{
  font-weight: 650;
  letter-spacing: -0.01em;
  color: color-mix(in oklab, var(--success) 82%, var(--text));
}
.xv-next-success-sub{
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-3);
}
.xv-next-prompt-title{
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}
.xv-next-actions{
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.xv-next-btn{
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 30%, transparent);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 560;
  color: var(--text-2);
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-fast) var(--ease);
}
.xv-next-btn:hover{
  background: color-mix(in oklab, white 5%, var(--surface-soft));
  border-color: var(--line-2);
}
.xv-next-btn:active{ transform: translateY(1px); }
.xv-next-btn:focus-visible{ outline: none; box-shadow: var(--ring); }
.xv-next-btn--ghost{
  background: transparent;
  color: var(--text-3);
}
.xv-next-meta{
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.xv-next-meta-chip{
  font-size: 12px;
  color: var(--text-4);
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--bg2) 52%, transparent);
  border-radius: var(--r-pill);
  padding: 5px 10px;
}
.xv-next-nudge{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--accent) 16%, var(--border));
  background: color-mix(in oklab, var(--accent) 5%, transparent);
}
.xv-next-nudge--subtle{
  border-color: color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 16%, transparent);
}
.xv-next-nudge-copy{
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
}
.xv-next-nudge-cta{
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--line));
  background: linear-gradient(165deg, color-mix(in oklab, var(--accent) 52%, var(--bg3)), color-mix(in oklab, var(--accent-2) 40%, var(--bg3)));
  color: var(--accent-ink);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 650;
  transition: filter var(--t-med) var(--ease);
}
.xv-next-nudge-cta:hover{ filter: brightness(1.05); }
.xv-next-nudge-cta:focus-visible{ outline: none; box-shadow: var(--ring); }
.xv-next-nudge--stacked{
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.xv-next-nudge-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.xv-next-nudge-row .xv-next-nudge-copy{
  flex: 1 1 200px;
}

/* Edit reply sheet */
.edit-mode-container{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
.edit-mode-sheet{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.edit-mode-header{
  padding-bottom: 2px;
}
.edit-mode-title{
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.02em;
}
.edit-mode-sub{
  margin: 4px 0 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.original-response-block{
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 18%, transparent);
}
.original-response-label{
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 6px;
}
.original-response{
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
  max-height: 140px;
  overflow: auto;
}
.edit-compose-label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-2);
}
.decision-edit-textarea{
  min-height: 120px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, var(--line) 85%, transparent);
  background: color-mix(in oklab, var(--bg2) 70%, transparent);
  color: var(--text);
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}
.decision-edit-textarea:focus{
  outline: none;
  border-color: color-mix(in oklab, var(--accent) 22%, var(--line-2));
  box-shadow: var(--ring);
}
.edit-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.btn-cancel-edit{
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  background: transparent;
  color: var(--text-muted);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 520;
  cursor: pointer;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.btn-cancel-edit:hover{
  background: color-mix(in oklab, white 4%, transparent);
  color: var(--text-2);
}
.btn-send-edited{
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--line));
  background: linear-gradient(
    165deg,
    color-mix(in oklab, var(--accent) 52%, var(--bg3)),
    color-mix(in oklab, var(--accent-2) 40%, var(--bg3))
  );
  color: var(--accent-ink);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 620;
  cursor: pointer;
  transition: filter var(--t-med) var(--ease);
}
.btn-send-edited:hover:not(:disabled){
  filter: brightness(1.05);
}
.btn-send-edited:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

.approval-hint{
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

.approval-banner{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
  border-radius: var(--r-md);
  padding: 12px 14px;
  color: var(--text-2);
  margin-top: 10px;
}
.approval-banner svg{
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.85;
}
.approval-banner strong{
  font-weight: 650;
  color: var(--text);
}

/* Empty state: open canvas (not a heavy card) */
.empty-state{
  flex: 0 1 auto;
  display:flex;
  align-items: center;
  justify-content: center;
  width: min(var(--thread-max), 100%);
  padding: 4px 12px 2px 12px;
  box-sizing: border-box;
}
.empty-card{
  width: 100%;
  max-width: min(520px, 100%);
  border-radius: 0;
  border: none;
  background: transparent;
  padding: 0 8px;
  text-align: center;
}
.empty-card-launch--claude{
  max-width: min(640px, 100%);
  text-align: left;
}

/* ROI — authenticated home hero (above greeting / queue) */
.xv-roi-hero{
  position: relative;
  width: 100%;
  max-width: min(640px, 100%);
  margin: 0 auto 18px auto;
  padding: 14px 16px 14px 16px;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--xv-accent-border) 55%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, var(--surface-soft)) 0%, color-mix(in oklab, var(--accent-2) 12%, var(--surface)) 100%),
    color-mix(in oklab, var(--surface-soft) 40%, transparent);
  box-shadow: var(--xv-cta-shadow), inset 0 1px 0 color-mix(in oklab, white 8%, transparent);
  overflow: hidden;
  text-align: left;
}
.xv-roi-hero-glow{
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 120%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 35%, transparent), transparent 72%);
  opacity: 0.55;
  pointer-events: none;
}
.xv-roi-hero-inner{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
}
.xv-roi-hero-main{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: min(280px, 100%);
  flex: 1 1 220px;
}
.xv-roi-hero-emoji{
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
.xv-roi-hero-side{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 200px;
  min-width: 0;
}
.xv-roi-hero-line{
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text);
}
.xv-roi-hero-line--compact{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
}

/* Workspace onboarding — one-line default, details for depth */
.xv-onboarding-flow{
  margin: 0 0 12px 0;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 35%, transparent);
}
.xv-onboarding-flow-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.xv-onboarding-flow-tagline{
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--text);
}
.xv-onboarding-flow-dismiss{
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: -4px -6px 0 0;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
  opacity: 0.75;
}
.xv-onboarding-flow-dismiss:hover{
  opacity: 1;
}
.xv-onboarding-flow-more{
  margin-top: 8px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--border) 65%, transparent);
  background: color-mix(in oklab, var(--bg1) 40%, transparent);
}
.xv-onboarding-flow-more-summary{
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
}
.xv-onboarding-flow-more-summary::-webkit-details-marker{ display: none; }
.xv-onboarding-flow-more[open] .xv-onboarding-flow-more-summary{
  color: var(--text-2);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
.xv-onboarding-flow-steps{
  margin: 0;
  padding: 10px 14px 10px 28px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.xv-onboarding-flow-steps li{ margin: 4px 0; }

/* Demo lab strip (workspace home) */
.xv-demo-lab{
  margin: 12px 0 10px 0;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  border: 1px dashed color-mix(in oklab, var(--warning) 35%, var(--border));
  background: color-mix(in oklab, var(--warning) 8%, var(--surface-soft));
}
.xv-demo-lab__bar{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.xv-demo-lab__title{
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}
.xv-demo-lab__hint{
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 10px 0;
  line-height: 1.45;
}
.xv-demo-lab__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Idle workspace: composer reads as the primary action */
body[data-ui="claude"] .workspace-idle .composer .composer-field-inner{
  border-color: color-mix(in oklab, var(--border) 100%, transparent);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in oklab, white 7%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, white 7%, transparent), color-mix(in oklab, white 2.5%, transparent));
}
body[data-ui="claude"] .workspace-idle #messageInput{
  min-height: 56px;
  padding-top: 16px;
  padding-bottom: 16px;
}
body[data-ui="claude"] .workspace-idle #messageInput::placeholder{
  color: color-mix(in oklab, var(--text-3) 92%, transparent);
  font-weight: 500;
}

.empty-card.empty-card-onboarding .xv-roi-hero{
  margin-bottom: 12px;
}
.empty-card.empty-card-onboarding .cld-welcome-headline{
  margin-bottom: 6px;
}

.empty-card-premium .xv-roi-hero{
  max-width: min(520px, 100%);
  text-align: left;
}
.empty-card-premium .xv-roi-hero-inner{
  justify-content: flex-start;
}

.xv-empty-hero{
  text-align: left;
  max-width: 36rem;
  margin: 0 auto;
}
.xv-empty-hero--legacy{
  text-align: center;
  max-width: none;
}
.xv-empty-kicker{
  margin: 0 0 6px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.cld-welcome-lead{
  margin: 0 0 10px 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
}
.cld-welcome-lead strong{
  color: var(--text);
  font-weight: 650;
}
.xv-queue-details{
  margin-top: 18px;
  text-align: left;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 18%, transparent);
  padding: 0;
}
.xv-queue-details-summary{
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text-2);
}
.xv-queue-details-summary::-webkit-details-marker{ display: none; }
.xv-queue-summary-chip{
  font-size: 11.5px;
  font-weight: 550;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.xv-queue-details .xv-inbox-layer{
  margin-top: 0;
  padding: 0 12px 12px;
}
.empty-card h2{ margin: 0 0 10px 0; font-size: 20px; letter-spacing: .2px; }
.empty-card p{ margin: 0; color: var(--text-2); }

/* Inbox layer (queue intelligence) — additive, quiet */
.xv-inbox-layer{
  margin-top: 14px;
  text-align: left;
}
.xv-inbox-layer--claude{
  margin-top: 12px;
}
.xv-inbox-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 760px){
  .xv-inbox-grid{
    grid-template-columns: 1.05fr 1fr 1.05fr;
    gap: 12px;
  }
  .empty-card-launch--claude .xv-inbox-grid{
    grid-template-columns: 1fr;
  }
}
.xv-inbox-panel{
  border: 1px solid color-mix(in oklab, var(--border) 68%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 22%, transparent);
  border-radius: 14px;
  padding: 12px 12px;
  box-shadow: none;
}
.xv-inbox-panel-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.xv-inbox-title{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--text) 90%, var(--text-3));
}
.xv-inbox-sub{
  font-size: 11.5px;
  color: var(--text-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xv-inbox-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

/* Previous thread fold (queue mode must never render under it) */
.xv-previous-thread{
  width: min(var(--thread-max), 100%);
  margin: 12px auto 0;
  padding: 0 12px;
  box-sizing: border-box;
}
.xv-previous-thread[open] .xv-previous-thread__hint{ display:none; }
.xv-previous-thread__summary{
  cursor: pointer;
  list-style: none;
  user-select: none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--border) 62%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 18%, transparent);
  color: var(--text-2);
}
.xv-previous-thread__summary::-webkit-details-marker{ display:none; }
.xv-previous-thread__hint{
  font-size: 12px;
  color: var(--text-4);
}
.xv-previous-thread__body{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--border) 46%, transparent);
}
.xv-inbox-item{
  width: 100%;
  text-align: left;
  border: 1px solid color-mix(in oklab, var(--line) 75%, transparent);
  background: color-mix(in oklab, var(--xv-glass) 80%, transparent);
  border-radius: 12px;
  padding: 10px 10px;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.xv-inbox-item:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--xv-glass-2) 85%, transparent);
  border-color: color-mix(in oklab, var(--line-3) 85%, transparent);
}
.xv-inbox-item-top{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}
.xv-inbox-item-id{
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--text);
}
.xv-inbox-item-meta{
  font-size: 11.5px;
  color: var(--text-4);
  flex: 1 1 auto;
  min-width: 100px;
}
.xv-inbox-item-preview{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--text-2) 92%, var(--text-4));
}
.xv-inbox-reco-btn{
  width: 100%;
  text-align: left;
  border: 1px solid color-mix(in oklab, var(--line-3) 78%, transparent);
  background: linear-gradient(135deg, color-mix(in oklab, var(--surface-soft) 28%, transparent), color-mix(in oklab, var(--xv-glass-2) 55%, transparent));
  border-radius: 14px;
  padding: 12px 12px;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease), border-color var(--t-fast) var(--ease);
}
.xv-inbox-reco-btn:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--line-3) 92%, transparent); }
.xv-inbox-reco-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.xv-inbox-reco-id{
  font-size: 11.5px;
  font-weight: 650;
  color: var(--text-4);
}
.xv-inbox-reco-preview{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--text-2) 92%, var(--text-4));
}
.xv-inbox-reco-cta{
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 650;
  color: color-mix(in oklab, var(--text) 88%, var(--text-3));
}
.xv-inbox-empty{
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-4);
  padding: 6px 2px 2px 2px;
}
.xv-inbox-footer-hint{
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-4);
  text-align: center;
}

/* Limit / conversion moment: single quiet panel */
.empty-card.limit-moment-card{
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 22px 22px;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 25%, transparent);
  text-align: left;
}

.cld-welcome-headline{
  margin: 0;
  font-size: 22px;
  font-weight: 580;
  letter-spacing: -0.045em;
  line-height: 1.22;
  color: var(--text);
}
.cld-welcome-prompt{
  margin: 0;
  color: color-mix(in oklab, var(--text-muted) 88%, var(--text-4));
  font-size: 13px;
  font-weight: 450;
  line-height: 1.4;
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.01em;
}
.cld-cap-pill{
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--text-3) 96%, var(--text-4));
  border: 1px solid color-mix(in oklab, var(--line) 78%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 38%, transparent);
}
.cld-welcome-support{
  margin: 2px 0 0 0;
  color: var(--text-4);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.limit-moment-card__eyebrow{
  margin: 0 0 8px 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.limit-moment-card__title{
  margin: 0 0 10px 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.2px;
  color: var(--text);
}
.limit-moment-card__lead{ margin: 0 0 10px 0; color: var(--text-2); line-height: 1.55; }
.limit-moment-card__body{ margin: 0 0 18px 0; color: var(--text-3); line-height: 1.55; }
.limit-cta{ margin-top: 2px; }
.limit-cta--claude{
  width: 100%;
  min-height: 44px;
  font-weight: 620;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.limit-secondary-link--claude{
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.limit-secondary-link--claude:hover{
  color: var(--text-2);
}
.limit-secondary-link{
  margin-top: 10px;
  width: 100%;
  background: transparent;
  color: var(--text-3);
  border-color: transparent;
  padding: 9px 10px;
  text-align: center;
}
.limit-secondary-link:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}
.empty-flow-strip{
  display:flex;
  gap: 10px;
  margin: 16px 0 18px 0;
  color: var(--text-4);
  font-size: 12.5px;
  flex-wrap: wrap;
}
.empty-flow-strip span{
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--line) 65%, transparent);
  background: color-mix(in oklab, var(--bg1) 52%, transparent);
}
.empty-actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.empty-chip-hint{ color: var(--text-4); font-size: 12.5px; }

/* Thread view + landing: no narrated strip — capacity lives in the command strip */
body[data-ui="claude"] .composer-wrap.composer-dock.composer-dock--thread .composer-hint-band,
body[data-ui="claude"] .workspace-idle .composer-hint-band{
  display: none;
}

/* Composer — Claude-like: one quiet pill, minimal outer chrome */
.composer-wrap{
  position: relative;
  padding-top: 0;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  flex-shrink: 0;
  flex-grow: 0;
  z-index: 5;
  padding-bottom: max(2px, env(safe-area-inset-bottom, 0px));
  background: transparent;
}
body[data-ui="claude"] .workspace-idle .composer-wrap{
  background: transparent;
}

.composer-dock,
#workspaceComposerDock{
  background: transparent;
}

#workspaceComposerDock .quick-examples,
#workspaceComposerDock .composer-stripe-fold{
  display: none;
}
#workspaceComposerDock:focus-within .quick-examples,
#workspaceComposerDock:focus-within .composer-stripe-fold{
  display: block;
}

.composer-unified{
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  display:flex;
  justify-content: center;
}

.inline-limit{
  width: 100%;
  margin: 0 0 16px 0;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 20%, transparent);
  padding: 20px;
  color: var(--text-2);
}
.inline-limit .inline-limit-eyebrow{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 6px;
}
.inline-limit .inline-limit-title{
  font-weight: 600;
  letter-spacing: -.15px;
  color: var(--text-2);
  font-size: 15px;
  margin-bottom: 6px;
}
.inline-limit .inline-limit-detail{
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}
.inline-limit .inline-limit-actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  align-items: center;
}
.inline-limit .inline-limit-actions .btn{
  font-weight: 600;
  font-size: 14px;
}
.inline-limit .inline-limit-actions .ghost-btn{
  color: var(--text-muted);
  border-color: transparent;
  background: transparent;
}
.inline-limit .inline-limit-actions .muted-copy,
.inline-limit .inline-limit-usage{
  color: var(--text-4);
  font-size: 12px;
  margin-left: auto;
  align-self: center;
}
.inline-limit[data-conversion-moment="preview_cap"]{
  border-color: color-mix(in oklab, var(--accent) 22%, var(--border));
}
.inline-limit[data-conversion-moment="included_free"],
.inline-limit[data-conversion-moment="included_pro"]{
  border-color: color-mix(in oklab, var(--warn) 18%, var(--border));
}

.composer-value-moment{
  width: 100%;
  margin: 0 0 16px 0;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
  background: linear-gradient(
    165deg,
    color-mix(in oklab, var(--accent) 8%, transparent),
    color-mix(in oklab, var(--surface-soft) 22%, transparent)
  );
  padding: 20px;
  color: var(--text-2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.composer-value-moment[hidden]{ display: none !important; }
.composer-value-moment__inner{ display: grid; gap: 8px; }
.composer-value-moment__eyebrow{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.composer-value-moment__title{
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--text-2);
}
.composer-value-moment__detail{
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.composer-value-moment__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.composer-value-moment__cta{
  font-weight: 600;
  font-size: 13px;
}

.plans-upgrade-secondary:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

#sendBtn.send-btn--thinking,
.send-btn.send-btn--thinking{
  opacity: 0.72;
  animation: xvSendThinking 1.2s var(--ease) infinite;
}
@keyframes xvSendThinking{
  0%, 100%{ opacity: 0.55; }
  50%{ opacity: 0.88; }
}
@media (prefers-reduced-motion: reduce){
  #sendBtn.send-btn--thinking,
  .send-btn.send-btn--thinking{
    animation: none;
    opacity: 0.75;
  }
}

/* Thinking swap + response arrival (subtle, fast) */
.js-reply-text{
  transition: opacity var(--t-med) var(--ease);
}
.js-reply-text.xv-fade-out{
  opacity: 0;
}
.msg-card.xv-soft-fade-in{
  animation: xvSoftFadeIn var(--t-med) var(--ease) 1;
}
@keyframes xvSoftFadeIn{
  from{ opacity: 0.01; }
  to{ opacity: 1; }
}

.composer{
  width: 100%;
  max-width: none;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: none;
}
.composer-hint-band{
  padding: 0 2px 4px 4px;
  border-bottom: none;
  background: transparent;
  min-height: 0;
}
.composer-hint-band--integrated{
  background: transparent;
}
.composer-prelude{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.composer-status-cluster{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.composer-thinking-anchor{
  opacity: .48;
  margin-top: 3px;
  flex-shrink: 0;
}
.composer-status-line{
  margin: 0;
  color: color-mix(in oklab, var(--text-2) 58%, var(--text-4));
  font-size: 13px;
  font-weight: 480;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.composer-status-line.composer-status-live{
  color: var(--text-muted);
}
.composer-status-line.composer-status-outcome{
  color: color-mix(in oklab, var(--success) 55%, var(--text-2));
  font-weight: 560;
  transition: color var(--t-fast) var(--ease), font-weight var(--t-fast) var(--ease);
}
.composer-inline-hint{ color: inherit; }

.composer-input-row{
  display:flex;
  gap: 0;
  align-items: stretch;
  padding: 0;
}
.composer-input-row,
.composer-input-wrap,
.composer-field{
  border-radius: 999px;
}
.composer-input-shell{
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
}
.composer-field-inner{
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
  border: 1px solid color-mix(in oklab, var(--border) 92%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), background var(--t-med) var(--ease);
  position: relative;
}
.composer-field-inner:focus-within{
  border-color: color-mix(in oklab, var(--accent) 44%, rgba(255,255,255,0.12));
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px color-mix(in oklab, var(--accent) 16%, transparent);
}

#messageInput{
  flex: 1;
  min-height: 52px;
  max-height: 200px;
  resize: none;
  padding: 14px 52px 14px 18px;
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 14px;
  box-shadow: none;
}
body[data-ui="claude"] #messageInput{
  min-height: 52px;
  font-size: 14px;
  letter-spacing: -0.01em;
}
#messageInput::placeholder{
  color: color-mix(in oklab, var(--text-4) 88%, transparent);
  font-weight: 450;
  opacity: 1;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#messageInput:focus::placeholder{
  opacity: 0.55;
}
#messageInput:focus{
  box-shadow: none;
  outline: none;
}
.composer .composer-field-inner textarea#messageInput,
.composer .composer-field-inner textarea#messageInput:focus{
  border: none;
  background: transparent;
  box-shadow: none;
}

.send-btn,
#sendBtn{
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--xv-accent-border);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  position: absolute;
  right: 12px;
  bottom: 10px;
  align-self: auto;
  margin-bottom: 0;
  transition:
    transform var(--t-press) var(--ease),
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease),
    filter var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
  box-shadow: var(--xv-cta-shadow-strong);
}
.send-btn::before,
#sendBtn::before{
  content:"";
  position:absolute;
  inset: 0;
  margin:auto;
  width: 12px;
  height: 12px;
  transform: translateX(1px);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M2.5 10.3a.9.9 0 0 1 .6-.86l13.9-5.2a.9.9 0 0 1 1.19 1.09l-2.45 11.2a.9.9 0 0 1-1.28.63l-4.06-2.01-2.2 2.9a.9.9 0 0 1-1.61-.44l-.3-4.45-4.48-2.24a.9.9 0 0 1-.46-.62Zm5.95 2.27.22 3.2 1.38-1.82a.9.9 0 0 1 1.13-.27l3.46 1.71 1.77-8.08-9.96 3.73 3.61 1.81a.9.9 0 0 1 .5.73l-.02.26-2.09-.96Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M2.5 10.3a.9.9 0 0 1 .6-.86l13.9-5.2a.9.9 0 0 1 1.19 1.09l-2.45 11.2a.9.9 0 0 1-1.28.63l-4.06-2.01-2.2 2.9a.9.9 0 0 1-1.61-.44l-.3-4.45-4.48-2.24a.9.9 0 0 1-.46-.62Zm5.95 2.27.22 3.2 1.38-1.82a.9.9 0 0 1 1.13-.27l3.46 1.71 1.77-8.08-9.96 3.73 3.61 1.81a.9.9 0 0 1 .5.73l-.02.26-2.09-.96Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .88;
}
.send-btn svg,
#sendBtn svg{
  width: 16px;
  height: 16px;
  display: block;
  margin: auto;
  opacity: 0.9;
}
.send-btn:not(:empty)::before,
#sendBtn:not(:empty)::before{
  display: none;
}
.send-btn:hover,
#sendBtn:hover{
  filter: brightness(1.06);
  border-color: color-mix(in oklab, var(--xv-accent-border) 90%, rgba(255,255,255,0.22));
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 0 46px rgba(124,92,252,.22), 0 18px 44px rgba(0,0,0,0.22);
}
.send-btn:active,
#sendBtn:active{
  transform: translateY(0) scale(0.98);
  box-shadow: 0 10px 26px rgba(0,0,0,0.14);
}
.send-btn:focus-visible,
#sendBtn:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}

.send-btn:disabled,
#sendBtn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: none;
}

/* Send readiness: subtle “alive” state when draft exists */
.composer-has-draft .send-btn:not(:disabled),
.composer-has-draft #sendBtn:not(:disabled){
  opacity: 1;
}
.composer:not(.composer-has-draft) .send-btn,
.composer:not(.composer-has-draft) #sendBtn{
  opacity: 0.62;
}

.quick-actions{
  padding: 3px 0 0 0;
  display:flex;
  gap: 4px;
  flex-wrap: wrap;
}
.chip{
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, rgba(124,92,252,.22) 92%, var(--line));
  background: rgba(124,92,252,.08);
  color: color-mix(in oklab, rgba(200,184,255,.96) 92%, var(--text-2));
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 650;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-press) var(--ease);
}
.chip:hover{
  background: rgba(124,92,252,.10);
  border-color: color-mix(in oklab, rgba(124,92,252,.30) 92%, var(--line-2));
  color: var(--text);
  transform: translateY(-0.5px);
}
.chip:active{ transform: translateY(0) scale(0.985); }
.chip:focus-visible{ outline:none; box-shadow: var(--ring); }

.composer-quick-patterns{
  margin-top: 16px;
  border-top: 1px solid color-mix(in oklab, var(--line) 45%, transparent);
  padding-top: 8px;
}
.composer-quick-patterns-summary{
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-4);
  letter-spacing: 0.04em;
}
.composer-quick-patterns-summary::-webkit-details-marker{ display: none; }
.composer-quick-patterns .quick-actions{
  margin-top: 8px;
}

/* Optional Stripe fold in composer */
.composer-stripe-fold{
  margin-top: 16px;
  border-top: 1px solid color-mix(in oklab, var(--line) 50%, transparent);
  background: transparent;
}

/* Thinking / busy — whole composer breathes subtly */
.workspace-thinking .composer-field-inner{
  border-color: color-mix(in oklab, var(--accent) 14%, var(--border));
}
.workspace-thinking .composer-status-line{
  color: var(--text-muted);
}

/* Details / disclosures (thread explainability) */
.details-wrap{
  border: 1px solid color-mix(in oklab, var(--line) 62%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--bg1) 52%, transparent);
  overflow: hidden;
  padding: 0;
}

/* Smooth disclosures (driven by JS, no layout changes) */
.xv-details-anim{ overflow: hidden !important; }
.xv-details-panel{
  opacity: 0.96;
  transform: translateY(-1px);
  transform-origin: top;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
details[open] > .xv-details-panel{
  opacity: 1;
  transform: translateY(0);
}
.details-toggle{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  color: color-mix(in oklab, var(--text-3) 45%, var(--text-2));
  font-weight: 520;
  font-size: 13px;
}
.details-toggle::-webkit-details-marker{ display:none; }
.details-toggle .chev{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--line) 65%, transparent);
  background: color-mix(in oklab, var(--bg2) 54%, transparent);
  color: var(--text-3);
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.details-toggle .chev svg{
  width: 14px;
  height: 14px;
  display:block;
}
details[open] > .details-toggle .chev{
  transform: rotate(180deg);
  border-color: color-mix(in oklab, var(--line-2) 70%, transparent);
  background: color-mix(in oklab, white 4.5%, var(--bg2));
  color: var(--text-2);
}
.details-panel{
  border-top: 1px solid color-mix(in oklab, var(--line) 62%, transparent);
  padding: 12px;
}
.details-insight-stack{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.details-insight{
  display:flex;
  gap: 10px;
  align-items: baseline;
}
.details-insight-k{
  flex: 0 0 160px;
  color: var(--text-4);
  font-size: 12.5px;
}
.details-insight-v{
  flex: 1;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.55;
}
.details-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.details-box{
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--line) 62%, transparent);
  background: color-mix(in oklab, var(--bg2) 50%, transparent);
  padding: 10px 10px;
}
.details-label{
  color: var(--text-4);
  font-size: 12px;
}
.details-value{
  margin-top: 6px;
  color: var(--text);
  font-weight: 650;
  letter-spacing: -.2px;
}
.details-note{
  margin-top: 10px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.55;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--line) 62%, transparent);
  background: color-mix(in oklab, var(--bg1) 52%, transparent);
  padding: 10px 10px;
}
.details-trace{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  white-space: pre-wrap;
  word-break: break-word;
}
.composer-stripe-fold-summary{
  padding: 12px 14px;
  cursor:pointer;
  color: var(--text-3);
  font-size: 13.5px;
  list-style: none;
}
.composer-stripe-fold-summary::-webkit-details-marker{ display:none; }
.opt-hint{
  color: var(--text-4);
  font-size: 12.5px;
  margin-left: 6px;
}
.composer-stripe-fields{
  padding: 0 14px 14px 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.stripe-context-hint{ flex: 1 1 220px; color: var(--text-4); font-size: 12.5px; }

/* Rail + operator context surfaces */
.rail{
  border-radius: var(--r-md);
}
.rail-in-sidebar{ margin-top: 10px; }
.rail-scroll-host{ position: relative; }
.rail-scroll{ height: 100%; overflow:auto; }
.rail-stack{ display:flex; flex-direction: column; gap: 10px; }

.rail-brief-toggle{
  width: 100%;
  text-align:left;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  border-radius: var(--r-md);
  padding: 10px 12px;
  color: var(--text-2);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.rail-brief-toggle:hover{ background: color-mix(in oklab, white 5%, transparent); }
.rail-brief-toggle-text{ display:flex; flex-direction: column; gap: 2px; }
.rail-brief-tier{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.rail-brief-heading{ font-weight: 650; color: var(--text); }
.rail-brief-chevron{ opacity: .55; }

.rail-brief-panel{ margin-top: 8px; }
.rail-title,
.rail-inline-section-label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 10px;
}
.rail-title-nested{ margin-top: 10px; }
.ops-grid,
.value-gen-grid,
.stat-grid,
.plan-grid{
  display:grid;
  gap: 10px;
}
.ops-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.value-gen-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-grid-split{ grid-template-columns: 1fr auto 1fr; align-items: center; }
.stat-divider{ width: 1px; height: 44px; background: var(--line); }

.ops-metric-label,
.value-gen-label,
.stat-label,
.refund-metric-label{
  color: var(--text-4);
  font-size: 12.5px;
}
.ops-metric-value,
.value-gen-num,
.stat-value,
.refund-metric-value{
  color: var(--text);
  font-weight: 650;
  letter-spacing: -.2px;
  margin-top: 4px;
}
.stat-context{ color: var(--text-4); font-size: 12px; margin-top: 2px; }

.usage-block{ margin-top: 10px; }
.usage-line{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  color: var(--text-3);
  font-size: 13px;
}
.usage-bar{
  height: 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--bg1) 52%, transparent);
  overflow:hidden;
  margin-top: 8px;
}
.usage-bar > div{
  height: 100%;
  width: 0%;
  background: color-mix(in oklab, var(--accent) 50%, var(--bg3));
}
.usage-bar.is-warning > div{ background: color-mix(in oklab, var(--warning) 55%, var(--bg3)); }
.usage-bar.is-limit > div{ background: color-mix(in oklab, var(--danger) 55%, var(--bg3)); }

/* Refund center lists */
.refund-list{
  margin-top: 10px;
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--bg1) 54%, transparent);
  padding: 10px;
}
.refund-empty{ color: var(--text-4); font-size: 13px; padding: 8px; }
.refund-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.refund-copy{ color: var(--text-3); font-size: 13px; margin-top: 10px; }
.refund-disabled{ opacity: .75; }

/* Stripe integration card */
.stripe-card-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.stripe-brand{ font-weight: 700; }
.stripe-status-pill{
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--line-3) 80%, transparent);
  color: var(--text-3);
  background: color-mix(in oklab, var(--xv-glass) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.stripe-status-pill.is-connected{
  color: color-mix(in oklab, var(--success) 70%, var(--text-2));
  border-color: color-mix(in oklab, var(--success) 24%, var(--line));
  background: color-mix(in oklab, var(--success) 8%, var(--bg1));
}

/* Modal (refund UI) */
.refund-modal{
  position: fixed;
  inset: 0;
  display:flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: color-mix(in oklab, var(--bg) 78%, black);
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--t-med) linear,
    visibility 0ms linear var(--t-med);
}
.refund-modal.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--t-med) linear,
    visibility 0ms linear 0ms;
}
.refund-dialog{
  width: min(760px, 96vw);
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: color-mix(in oklab, var(--bg2) 92%, transparent);
  box-shadow: var(--shadow-2);
  padding: 16px;
  opacity: 0;
  transform: translateY(8px) scale(0.99);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease);
}
.refund-modal.open .refund-dialog{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.refund-dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.refund-dialog-title h3{
  margin: 0 0 6px 0;
  font-size: 16px;
}
.refund-dialog-title p{
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
}
.refund-close{
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, var(--line-3) 86%, transparent);
  background: color-mix(in oklab, var(--xv-glass) 92%, transparent);
  color: var(--text-2);
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-press) var(--ease);
}
.refund-close:hover{
  background: color-mix(in oklab, var(--xv-glass-2) 92%, transparent);
  border-color: color-mix(in oklab, var(--line-3) 92%, transparent);
}
.refund-close:active{ transform: scale(0.98); }
.refund-close:focus-visible{ outline:none; box-shadow: var(--ring); }
.refund-inline-note{
  margin: 12px 0 10px 0;
  color: var(--text-3);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg1) 70%, transparent);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.refund-form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.refund-field{ display:flex; flex-direction: column; gap: 6px; }
.refund-field-full{ grid-column: 1 / -1; }
.refund-label{ color: var(--text-4); font-size: 12.5px; }
.refund-footer{
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Access drawer (account / plans / integrations) */
.access-drawer{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 16px;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 85;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 120ms linear,
    visibility 0ms linear 120ms,
    backdrop-filter 120ms linear,
    -webkit-backdrop-filter 120ms linear;
}
.access-drawer::before{
  display: none;
}
.access-drawer.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 120ms linear,
    visibility 0ms linear 0ms,
    backdrop-filter 120ms linear,
    -webkit-backdrop-filter 120ms linear;
}
.access-drawer-panel{
  width: min(520px, 92vw);
  height: 100%;
  max-height: calc(100dvh - 32px);
  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--line-2) 86%, transparent);
  background: color-mix(in oklab, var(--bg2) 92%, transparent);
  box-shadow:
    0 18px 42px rgba(0,0,0,0.26),
    0 2px 0 rgba(255,255,255,0.035) inset;
  padding: 14px;
  display:flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateX(14px) scale(0.985);
  transform-origin: 100% 50%;
  will-change: transform, opacity;
  transition:
    transform 160ms var(--ease),
    opacity 160ms var(--ease);
}

/* Keep the workspace faintly present behind Access */
body.access-open .workspace-root{
  filter: brightness(0.85) saturate(0.9);
}

/* Staged entrance / exit for Access drawer */
.access-drawer[data-access-state="opening"]{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.access-drawer[data-access-state="opening"] .access-drawer-panel{
  opacity: 1;
  transform: translateX(0) scale(1);
}
.access-drawer[data-access-state="open"]{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.access-drawer[data-access-state="open"] .access-drawer-panel{
  opacity: 1;
  transform: translateX(0) scale(1);
}
.access-drawer[data-access-state="closing"]{
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition-delay: 180ms;
}
.access-drawer[data-access-state="closing"] .access-drawer-panel{
  opacity: 0;
  transform: translateX(14px) scale(0.985);
  transition-delay: 60ms;
}

/* Content fade is staged after panel arrival (and first to leave on close) */
.access-drawer-body{
  opacity: 1;
  will-change: opacity;
  transition: opacity 120ms linear;
}
.access-drawer[data-access-state="opening"] .access-drawer-body{
  opacity: 0.01;
  transition-delay: 80ms;
}
.access-drawer[data-access-state="open"] .access-drawer-body{
  opacity: 1;
  transition-delay: 80ms;
}
.access-drawer[data-access-state="closing"] .access-drawer-body{
  opacity: 0;
  transition-delay: 0ms;
}
.access-drawer-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.access-drawer-title{ display:flex; flex-direction: column; gap: 4px; }
.access-hero{
  margin-top: 2px;
  display: grid;
  gap: 8px;
}
.access-hero-title{
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
}
.access-hero-subcopy{
  max-width: 54ch;
  color: color-mix(in oklab, var(--text-muted) 92%, var(--text-4));
}
.access-trust-strip{
  margin-top: 2px;
}
.access-drawer-body{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 2px 6px 2px;
}
.access-drawer-section + .access-drawer-section{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
}

/* Mobile + responsive */
@media (max-width: 900px){
  :root{ --stage-pad: 14px; }
  .command-strip-center{ display:none; }
  .xv-stage-scaffold{ width: min(var(--thread-max), 96vw); }
}

@media (max-width: 720px){
  .workspace-grid{ grid-template-columns: 1fr; }
  #sidebarShell{ display:none; }
  body.mobile-scroll-mode #sidebarShell{ display:none; }
  .messages{ padding: 12px 0 20px 0; }
  .refund-form-grid{ grid-template-columns: 1fr; }
}

/* Small quality-of-life tweaks */
[hidden]{ display:none !important; }
details > summary{ user-select:none; }

/* Conversation-first refinements: reduce nested framing where possible */
.messages-shell{
  box-shadow: none;
}
.empty-card{
  box-shadow: none;
}
.limit-secondary-link:hover{
  background: color-mix(in oklab, white 4.5%, transparent);
  border-color: transparent;
}
.composer{
  outline: none;
}
.composer:hover{
  border-color: transparent;
}
.composer:focus-within{
  border-color: transparent;
  box-shadow: none;
}

/* Plans panel — dual offers, trustworthy hierarchy */
.plans-auth-hint{
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0 0 12px 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 15%, transparent);
}
.plans-auth-hint[hidden],
.plans-tier-note[hidden]{
  display: none !important;
}
.plans-tier-note{
  margin: 12px 0 0 0;
  font-size: 12.5px;
  color: color-mix(in oklab, var(--success) 72%, var(--text-2));
  text-align: center;
  padding: 10px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, var(--success) 18%, var(--line));
  background: color-mix(in oklab, var(--success) 5%, transparent);
}

.plans-stack{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.plan-compare-compact{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding: 12px 10px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 10%, transparent);
  font-size: 12px;
  line-height: 1.45;
}
.plan-compare-compact--sidebar{
  margin-top: 10px;
  padding: 10px 8px;
  gap: 8px;
  font-size: 11px;
}
.plan-compare-col{
  min-width: 0;
}
.plan-compare-name{
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.plan-compare-list{
  margin: 0;
  padding-left: 14px;
  color: var(--text-4);
}
.plan-compare-list li{
  margin: 0 0 4px 0;
}
.plans-upgrade-confidence{
  margin: 10px 0 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-4);
  text-align: center;
}
@media (max-width: 720px){
  .plan-compare-compact{ grid-template-columns: 1fr; }
}
.trust-chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.trust-chip{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, rgba(124,92,252,.22) 92%, var(--line));
  background: rgba(124,92,252,.08);
  color: color-mix(in oklab, rgba(200,184,255,.96) 84%, var(--text-3));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
@media (max-width: 720px){
  .plans-stack{ grid-template-columns: 1fr; }
}
.plan-offer{
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--border) 65%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 12%, transparent);
  padding: 12px 12px 14px 12px;
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.plan-offer--elite{
  border-color: color-mix(in oklab, var(--accent) 18%, var(--line));
  background: color-mix(in oklab, var(--accent) 4%, var(--surface-soft));
}
.plan-offer--pro{
  background: color-mix(in oklab, var(--surface-soft) 14%, transparent);
}
.plan-offer.is-current{
  border-color: color-mix(in oklab, var(--success) 22%, var(--line));
  background: color-mix(in oklab, var(--success) 5%, var(--surface-soft));
}
.plan-offer.is-locked-preview{
  opacity: 0.98;
}
.plan-offer-header{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.plan-offer-title-row{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.plan-offer-name{
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
}
.plan-offer-spec{
  margin: 0;
  font-size: 12px;
  font-weight: 550;
  color: var(--text-4);
}
.plan-offer-badge{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  border-radius: var(--r-pill);
  padding: 3px 8px;
}
.plan-offer-badge--popular{
  color: color-mix(in oklab, var(--accent) 78%, var(--text-2));
  border-color: color-mix(in oklab, var(--accent) 24%, var(--line));
  background: color-mix(in oklab, var(--accent) 7%, transparent);
}
.plan-offer-features{
  margin: 0 0 12px 0;
  padding: 0 0 0 18px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.plan-offer-features li{
  margin-bottom: 4px;
}
.plan-cta{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 620;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter var(--t-med) var(--ease), border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.plan-cta:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}
.plan-cta:disabled,
.plan-cta[disabled]{
  opacity: 0.45;
  cursor: not-allowed;
}
.plan-cta--primary{
  border: 1px solid var(--xv-accent-border);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: var(--xv-cta-shadow);
}
.plan-cta--primary:hover:not(:disabled){
  filter: brightness(1.05);
}
.plan-cta--secondary{
  border: 1px solid color-mix(in oklab, var(--line-3) 86%, transparent);
  background: color-mix(in oklab, var(--xv-glass) 92%, transparent);
  color: var(--text-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.plan-cta--secondary:hover:not(:disabled){
  background: color-mix(in oklab, var(--xv-glass-2) 92%, transparent);
  border-color: color-mix(in oklab, var(--line-3) 92%, transparent);
  color: var(--text);
}

/* Plans surface upgrade CTAs: premium + consistent (Pro + Elite). */
#plansSurfaceGrid .plan-cta[data-upgrade]{
  background: linear-gradient(135deg, #6d28d9, #7c3aed, #8b5cf6);
  color: white;
  font-weight: 600;
  font-size: 14px;
  border: none;
  border-radius: 10px;
  padding: 14px 24px;
  width: 100%;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.4), 0 4px 16px rgba(109, 40, 217, 0.35);
  transition: all 0.15s ease;
}
#plansSurfaceGrid .plan-cta[data-upgrade]:hover:not(:disabled){
  background: linear-gradient(135deg, #7c3aed, #8b5cf6, #a78bfa);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.6), 0 6px 20px rgba(109, 40, 217, 0.45);
  transform: translateY(-1px);
}
#plansSurfaceGrid .plan-cta[data-upgrade]:active:not(:disabled){
  transform: translateY(0px);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.4), 0 2px 8px rgba(109, 40, 217, 0.3);
}

/* Legacy single-card plans (if present) */
.tier-card-plans{
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 18%, transparent);
  padding: 14px;
}
.tier-card-plans .upgrade-btn + .upgrade-btn{
  margin-top: 8px;
}
.plans-upgrade-secondary{
  margin: 12px 0 0 0;
  padding: 0;
  border: none;
  background: none;
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t-med) var(--ease);
}
.plans-upgrade-secondary:hover{
  color: var(--text-2);
}

/* Preview-locked composer (guest cap): no dead controls */
.composer-dock--locked-preview .composer-field-inner{
  opacity: 0.78;
}
.composer-dock--locked-preview .send-btn:disabled,
.composer-dock--locked-preview textarea:disabled{
  cursor: not-allowed;
  opacity: 0.55;
}
.composer-dock--locked-preview .quick-actions .chip:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.stripe-connect-btn--needs-auth{
  border-style: dashed;
}

.upgrade-value-inline{
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding: 0 2px;
}

/* -------------------------------------------------------------------------
   Conversion context blocks (additive, restrained, premium)
   Safe if unused. Used by app.js for usage/locked/value narratives.
   ------------------------------------------------------------------------- */

.conversion-context{
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--line) 72%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 14%, transparent);
  padding: 10px 12px;
}
.conversion-context--value{
  border-color: color-mix(in oklab, var(--success) 18%, var(--line));
  background: color-mix(in oklab, var(--success) 5%, transparent);
}
.conversion-context--urgency{
  border-color: color-mix(in oklab, var(--danger) 14%, var(--line));
  background: color-mix(in oklab, var(--danger) 4%, transparent);
}
.conversion-context--premium{
  border-color: color-mix(in oklab, var(--accent) 16%, var(--line));
  background: color-mix(in oklab, var(--accent) 4%, transparent);
}
.conversion-context--neutral{
  border-color: color-mix(in oklab, var(--line) 72%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 14%, transparent);
}

.value-proof-line{
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.plan-hint{
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-4);
}
.conversion-cta{
  font-weight: 600;
}
.locked-feature-copy{
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.45;
}

/* Workspace onboarding (guest first impression) */
.empty-card.empty-card-onboarding{
  width: 100%;
  max-width: min(640px, 100%);
  text-align: left;
  padding: 0 8px;
}
.onboarding-subline{
  margin-top: 8px;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.onboarding-example{
  margin-top: 14px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 16%, transparent);
  padding: 12px 14px;
}
.onboarding-example-label{
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.onboarding-example-text{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: color-mix(in oklab, var(--text-2) 60%, var(--text-4));
  filter: saturate(0.92);
}

/* Return triggers + momentum (empty state) */
.xv-momentum-line{
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.45;
}
.xv-momentum-sub{
  color: var(--text-4);
}
.xv-recent-block{
  margin-top: 14px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--border) 65%, transparent);
  background: color-mix(in oklab, var(--surface-soft) 16%, transparent);
  padding: 12px;
}
.xv-recent-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.xv-recent-title{
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--text-4);
}

.home-stat-primary {
  font-size: 20px;
  font-weight: 700;
  color: rgba(245,248,255,.96);
  display: block;
}
.home-stat-secondary {
  font-size: 13px;
  color: rgba(205,215,242,.55);
  display: block;
  margin-top: 2px;
}

[data-issue-category="billing"] {
  border-left: 3px solid rgba(239,68,68,0.55) !important;
}
[data-issue-category="damage"] {
  border-left: 3px solid rgba(251,146,60,0.55) !important;
}
[data-issue-category="shipping"] {
  border-left: 3px solid rgba(59,130,246,0.55) !important;
}
[data-issue-category="general"] {
  border-left: 3px solid rgba(255,255,255,0.10) !important;
}
.xv-recent-cta{
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  background: transparent;
  color: var(--text-3);
  padding: 6px 10px;
  font-size: 12.5px;
}
.xv-recent-cta:hover{
  background: color-mix(in oklab, white 4.5%, transparent);
  border-color: var(--line-2);
  color: var(--text-2);
}
.xv-recent-cta:focus-visible{ outline: none; box-shadow: var(--ring); }
.xv-recent-list{
  display: grid;
  gap: 8px;
}
.xv-recent-item{
  text-align: left;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--bg2) 48%, transparent);
  padding: 10px 10px;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-fast) var(--ease);
}
.xv-recent-item:hover{
  background: color-mix(in oklab, white 4.5%, var(--bg2));
  border-color: var(--line-2);
  transform: translateY(-1px);
}
.xv-recent-item:active{ transform: translateY(0); }
.xv-recent-item:focus-visible{ outline: none; box-shadow: var(--ring); }
.xv-recent-item-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.xv-recent-item-id{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-4);
}
.xv-recent-item-meta{
  font-size: 12px;
  color: var(--text-4);
}
.xv-recent-item-preview{
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
}

/* Trust footer (subtle, not sticky) */
.workspace-trust-footer{
  width: 100%;
  margin: 10px 0 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-4);
}

.stripe-trust-line{
  margin-top: 12px;
  text-align: left;
}

/* —— Per-ticket result summary (conversion + clarity) —— */
.ticket-result-summary{
  margin: 10px 0 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--xv-pill-border);
  background: linear-gradient(165deg, rgba(124,92,252,.10), rgba(255,255,255,.03));
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.ticket-result-summary--metadata{
  opacity: 0.92;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.ticket-result-summary--metadata .ticket-result-summary__v{
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.ticket-result-summary--metadata .ticket-result-summary__value-strip,
.ticket-result-summary--metadata .ticket-result-summary__mode-why{
  color: var(--text-3);
}
.ticket-result-summary__title{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 10px;
}
.ticket-result-summary__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
@media (min-width: 720px){
  .ticket-result-summary__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ticket-result-summary__k{
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-4);
  margin-bottom: 4px;
}
.ticket-result-summary__v{
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.35;
}
.ticket-result-summary__hint{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-3);
}
.ticket-result-summary__value-strip{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
}
.ticket-result-summary__mode-row{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}
.ticket-result-summary__mode-pill{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.05);
  color: var(--text-2);
}
.ticket-result-summary__mode-why{
  flex: 1 1 220px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
}
.ticket-result-summary__email{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}
.ticket-result-summary__grid--top .ticket-result-summary__v{
  line-height: 1.3;
}
.ticket-result-summary__est{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-left: 4px;
}
.ticket-result-summary__more{
  margin-top: 12px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  background: color-mix(in oklab, var(--bg2) 40%, transparent);
}
.ticket-result-summary__more-summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ticket-result-summary__more-summary::-webkit-details-marker{ display: none; }
.ticket-result-summary__more-chev::before{
  content: "+";
  display: inline-block;
  font-weight: 700;
  color: var(--text-4);
}
.ticket-result-summary__more[open] .ticket-result-summary__more-chev::before{
  content: "−";
}
.ticket-result-summary__more-body{
  padding: 0 10px 10px;
  border-top: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
}
.ticket-result-summary__detail-block{
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
}
.ticket-result-summary__detail-k{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 4px;
}
.ticket-result-summary__detail-v{
  color: var(--text-2);
}
.ticket-result-summary__mode-row--nested{
  margin-top: 8px;
}

.xv-workspace-zone{
  display: block;
}
.xv-workspace-zone + .xv-workspace-zone{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklab, var(--line) 65%, transparent);
}
.xv-int-actions--merged{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.decision-panel-integration-hint-inner--merged .xv-int-lead{
  margin-top: 0;
}
.xv-next-nudge-row--merged{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.xv-next-nudge--merged .xv-next-nudge-copy{
  margin-bottom: 2px;
}
.xv-zone--next .assistant-footer{
  margin-top: 10px;
  padding: 10px 0 0;
  background: transparent;
  border: none;
  border-radius: 0;
  border-top: 1px solid color-mix(in oklab, var(--line) 55%, transparent);
}

.xv-int-lead{
  margin: 0 0 6px 0;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text-2);
}
.xv-int-checklist{
  margin: 0 0 8px 16px;
  padding: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
}
.xv-int-checklist li{
  margin: 3px 0;
}
.xv-int-footnote{
  margin: 0 0 10px 0;
  font-size: 11.5px;
  line-height: 1.4;
}
.decision-panel-integration-hint-inner .xv-int-lead{
  margin-top: 2px;
}

.xv-first-outcome-list{
  margin: 0 0 10px 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.xv-first-outcome-list--compact{
  font-size: 12.5px;
  margin-bottom: 8px;
  color: var(--text-2);
}
.xv-first-outcome-list li{
  margin: 4px 0;
}
.xv-first-outcome-minihead{
  margin: 10px 0 4px 0;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in oklab, #5ee4a8 42%, var(--text-3));
}
.xv-first-outcome-foot{
  margin: 0 0 8px 0;
  font-size: 12px;
}
.xv-growth-feedback-block--quiet{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in oklab, var(--line) 80%, transparent);
  opacity: 0.82;
}
.xv-growth-feedback-eyebrow{
  margin: 0 0 6px 0;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
}
.xv-growth-feedback-block--quiet .xv-growth-q{
  font-size: 11.5px;
  color: var(--text-3);
}
.xv-first-outcome-cta--quiet{
  font-size: 12px;
  padding: 6px 12px;
  font-weight: 600;
}
.xv-growth-surface{
  margin-top: 12px;
}
.xv-growth-referral{
  margin-top: 10px;
}
.xv-growth-surface > .xv-growth-referral:first-child{
  margin-top: 0;
}

/* —— Plan limit upgrade pressure —— */
.usage-at-limit-upgrade{
  margin-top: 10px;
  padding: 14px 14px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(124,92,252,.35);
  background: linear-gradient(180deg, rgba(124,92,252,.14), rgba(255,255,255,.03));
}
.usage-at-limit-upgrade__eyebrow{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 6px;
}
.usage-at-limit-upgrade__title{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.35;
  margin: 0 0 8px;
}
.usage-at-limit-upgrade__lead{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3);
}
.usage-at-limit-upgrade__list{
  margin: 0 0 12px 1.1em;
  padding: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
}
.usage-at-limit-upgrade__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.usage-at-limit-upgrade__primary{
  flex: 0 0 auto;
}
.usage-at-limit-upgrade__secondary{
  flex: 0 0 auto;
}