/* Scoped verbatim presentation from apps/headless-app/app/prototype.css at17e3dc78^; only selector/font/keyframe names are isolated. */
/* ============================================================
   InsurancePlus Agent Desktop v2 — style.css
   ============================================================ */

/* ── Custom properties ─────────────────────────────────────── */
.scene-headless {
  --bg:            #F8F8FB;
  --surface:       #FFFFFF;
  --border:        #D8D8E8;
  --border-light:  #E4E4EE;

  --accent:        #4E50FE;
  --accent-light:  #EEEEFF;
  --accent-dim:    #A5A6FF;

  --amber:         #D97706;
  --amber-light:   #FFFBEB;
  --green:         #059669;
  --green-light:   #ECFDF5;
  --red:           #DC2626;

  --text-primary:  #111118;
  --text-secondary:#5C5C7A;
  --text-tertiary: #74749A;

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.07);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.10);

  --radius:        12px;
  --radius-sm:     8px;
  --radius-xs:     6px;

  --topnav-h:      54px;
}

/* ── Reset & base ───────────────────────────────────────────── */
.scene-headless *, .scene-headless *::before, .scene-headless *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scene-headless {
  zoom: 1.1;
}

.scene-headless, .scene-headless {
  height: 100%;
  overflow: hidden;
  scrollbar-width: none;
  font-family: 'Scene Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.scene-headless {
  display: flex;
  flex-direction: column;
}

/* ── Top nav ─────────────────────────────────────────────────── */
.scene-headless .topnav {
  height: var(--topnav-h);
  background: var(--surface);
  border-bottom: 1px solid rgba(50,50,93,0.08);
  box-shadow: 0 1px 4px rgba(50,50,93,0.08), 0 1px 2px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
}

.scene-headless .topnav__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.scene-headless .topnav__brand { display: flex; align-items: center; }

.scene-headless .brand-logo {
  height: 26px;
  width: auto;
  display: block;
}

.scene-headless .topnav__context {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(50,50,93,0.08), 0 1px 2px rgba(0,0,0,0.04);
  transition: background 0.12s;
}

.scene-headless .topnav__context:hover { background: #f7f9fb; }

.scene-headless .topnav__search {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
}

.scene-headless .search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F0F0F4;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  color: var(--text-tertiary);
}

.scene-headless .search-box input {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
  border: none;
  outline: none;
  background: transparent;
}

.scene-headless .search-box input::placeholder { color: var(--text-tertiary); }

.scene-headless .topnav__right {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.scene-headless .topnav__icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  position: relative;
  transition: background 0.12s;
  cursor: pointer;
  border: none;
  background: none;
}

.scene-headless .topnav__icon-btn:hover { background: #f7f9fb; }

.scene-headless .notif-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  border: 1.5px solid var(--surface);
}

.scene-headless .topnav__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, var(--accent));
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 1px 3px rgba(99,91,255,0.35);
}

.scene-headless .online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  border: 1.5px solid var(--surface);
}

/* ── Prototype annotation bar ───────────────────────────────── */
.scene-headless .proto-bar {
  display: none;
}

.scene-headless .proto-bar__state {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.scene-headless .proto-bar__divider {
  color: rgba(255,255,255,0.25);
  font-size: 11px;
}

.scene-headless .proto-bar__label {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}

/* ── Main layout ────────────────────────────────────────────── */
.scene-headless .app {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Side nav ────────────────────────────────────────────────── */
.scene-headless .side-nav {
  width: 64px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.scene-headless .side-nav--expanded {
  width: 200px;
}

/* Logo / toggle row — always visible */
.scene-headless .side-nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0 12px;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: padding 0.22s;
}

.scene-headless .side-nav__logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99,91,255,0.35);
}

.scene-headless .side-nav__logo-text {
  display: none;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.scene-headless .side-nav__logo-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  line-height: 1.2;
}

.scene-headless .side-nav__logo-sub {
  font-size: 10.5px;
  color: var(--text-tertiary);
  white-space: nowrap;
  line-height: 1.3;
}

.scene-headless .side-nav__logo-chevron {
  display: none;
  flex-shrink: 0;
  color: var(--text-tertiary);
}

/* Expanded logo state */
.scene-headless .side-nav--expanded .side-nav__logo {
  justify-content: flex-start;
  padding: 16px 14px 12px;
}
.scene-headless .side-nav--expanded .side-nav__logo-text { display: flex; }
.scene-headless .side-nav--expanded .side-nav__logo-chevron { display: none; }

.scene-headless .side-nav__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0 8px;
  flex-shrink: 0;
}

/* Nav items */
.scene-headless .side-nav__items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 6px;
  flex: 1;
  align-items: center;
}

.scene-headless .side-nav--expanded .side-nav__items {
  padding: 4px 8px;
  align-items: stretch;
}

.scene-headless .side-nav__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  width: 38px;
  height: 38px;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  position: relative;
  flex-shrink: 0;
}

.scene-headless .side-nav--expanded .side-nav__item {
  width: 100%;
  height: auto;
  padding: 7px 8px;
  justify-content: flex-start;
}

.scene-headless .side-nav__item:hover { background: var(--bg); }

.scene-headless .side-nav__item--active {
  background: var(--accent-light);
  font-weight: 600;
  color: var(--accent);
}

.scene-headless .side-nav__item svg { flex-shrink: 0; color: var(--text-primary); }

.scene-headless .side-nav__item--active svg { color: var(--accent); }

.scene-headless .side-nav__item span { display: none; }
.scene-headless .side-nav--expanded .side-nav__item span { display: inline; }

/* Bottom section */
.scene-headless .side-nav__bottom {
  padding: 0 6px 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.scene-headless .side-nav--expanded .side-nav__bottom {
  padding: 0 8px 12px;
  align-items: stretch;
}

.scene-headless .side-nav__divider {
  display: none;
}

/* Notifications bell with dot */
.scene-headless .side-nav__notif-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.scene-headless .side-nav__notif-dot {
  position: absolute;
  top: -3px;
  right: -4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid white;
}

/* Avatar row */
.scene-headless .side-nav__avatar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  justify-content: center;
  transition: background 0.12s;
}
.scene-headless .side-nav__avatar-item:hover { background: var(--bg); }

.scene-headless .side-nav--expanded .side-nav__avatar-item {
  justify-content: flex-start;
  padding: 5px 8px;
}

.scene-headless .side-nav__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #111118;
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

.scene-headless .side-nav__online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  border: 1.5px solid white;
}

.scene-headless .side-nav__status-dot {
  display: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  flex-shrink: 0;
}
.scene-headless .side-nav--expanded .side-nav__status-dot { display: inline-block; }

.scene-headless .side-nav__avatar-info {
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.scene-headless .side-nav--expanded .side-nav__avatar-info { display: flex; }

.scene-headless .side-nav__avatar-name {
  display: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  line-height: 1.2;
}

.scene-headless .side-nav__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.scene-headless .side-nav__item--expanded-only { display: none; }
.scene-headless .side-nav--expanded .side-nav__item--expanded-only { display: flex; }

/* ── Work panel ─────────────────────────────────────────────── */
.scene-headless .work-panel {
  width: 260px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.2s ease;
}

.scene-headless .work-panel.work-panel--collapsed {
  width: 0;
  overflow: hidden;
}

.scene-headless .work-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 10px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-light);
}

.scene-headless .work-panel__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  flex: 1;
}

.scene-headless .work-panel__count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
}

.scene-headless .work-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}

.scene-headless .work-panel__section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.scene-headless .wp-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
}

.scene-headless .wp-item:hover { background: var(--bg); }

.scene-headless .wp-item--current {
  background: rgba(99,91,255,0.07);
  border-left: none;
  border-radius: var(--radius-sm);
  margin: 0 8px;
  padding: 8px 10px;
}

.scene-headless .wp-item--current:hover { background: rgba(99,91,255,0.14); }

.scene-headless .wp-item__icon {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.scene-headless .wp-item__icon--phone,
.scene-headless .wp-item__icon--agent,
.scene-headless .wp-item__icon--task {
  background: var(--bg);
  color: var(--text-tertiary);
}

.scene-headless .wp-item--current .wp-item__icon--phone,
.scene-headless .wp-item--current .wp-item__icon--agent,
.scene-headless .wp-item--current .wp-item__icon--task {
  background: transparent;
  color: var(--accent);
  border: none;
}

.scene-headless .wp-item__body {
  flex: 1;
  min-width: 0;
}

.scene-headless .wp-item__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.scene-headless .wp-item--current .wp-item__name { color: var(--accent); font-weight: 600; }

.scene-headless .wp-item__meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scene-headless .wp-item__status {
  font-weight: 500;
}

.scene-headless .wp-item__status--working { color: var(--accent); }
.scene-headless .wp-item__status--review  { color: var(--amber); }
.scene-headless .wp-item__status--due     { color: var(--red); }

.scene-headless .wp-item__timer {
  font-variant-numeric: tabular-nums;
  color: var(--green);
  font-weight: 600;
}

.scene-headless .wp-item__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.25);
  animation: scene-headless-pulse-dot 2s ease-in-out infinite;
}

@keyframes scene-headless-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 2px rgba(16,185,129,0.25); }
  50%       { box-shadow: 0 0 0 4px rgba(16,185,129,0.15); }
}

/* ── Call bar ───────────────────────────────────────────────── */
.scene-headless .call-bar {
  background: linear-gradient(160deg, #0D1526 0%, #141B2D 60%, #1A2035 100%);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.scene-headless .call-bar__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.scene-headless .call-bar__info { display: flex; flex-direction: column; gap: 2px; }

.scene-headless .call-bar__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.scene-headless .call-bar__name {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.1px;
}

.scene-headless .call-bar__phone { font-size: 11px; color: rgba(255,255,255,0.55); }

.scene-headless .call-bar__timer {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #34D399;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.scene-headless .call-bar__controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.scene-headless .call-ctrl-btn {
  height: 28px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
}

.scene-headless .call-ctrl-btn:hover {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
}

.scene-headless .call-ctrl-btn--end {
  background: rgba(207,54,38,0.28);
  color: #FFFFFF;
  border-color: rgba(207,54,38,0.45);
  margin-left: auto;
}

.scene-headless .call-ctrl-btn--end:hover {
  background: rgba(207,54,38,0.45);
}

/* ── Main column ────────────────────────────────────────────── */
.scene-headless .col-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: var(--bg);
}

.scene-headless .col-main--call {
  /* col-main stays column; the inner panels row handles the horizontal layout */
}

/* Inner row — queue panel + work-main column */
.scene-headless .col-main__panels {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
}

/* During a call the queue panel floats over the left edge — doesn't affect work-surface width */
.scene-headless .col-main--call .col-main__panels {
  flex-direction: column;
}

.scene-headless .col-main--call .work-queue-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 10;
}


/* Persistent SA bar — col-main level, never resizes regardless of call state */
.scene-headless .sa-bar-persistent {
  flex-shrink: 0;
  padding: 12px 24px 20px;
  background: linear-gradient(to bottom, transparent 0%, var(--bg) 28px);
  position: relative;
  z-index: 10;
}

.scene-headless .sa-bar-persistent .home-ask {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}


/* ── Secondary nav (breadcrumb) ─────────────────────────────── */
.scene-headless .subnav {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 16px;
  height: 38px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.scene-headless .subnav__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 32px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-decoration: none;
  border-radius: 6px 6px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
  position: relative;
  bottom: -1px;
  white-space: nowrap;
}

.scene-headless .subnav__tab:hover { color: var(--text-primary); background: var(--bg); }

.scene-headless .subnav__tab--active {
  color: var(--text-primary);
  font-weight: 600;
  background: var(--bg);
  border-color: var(--border);
  border-bottom-color: var(--bg);
}

.scene-headless .subnav__tab svg { flex-shrink: 0; width: 12px; height: 12px; }

.scene-headless .subnav__tab--call {
  color: var(--accent);
}
.scene-headless .subnav__tab--call svg {
  color: var(--accent);
}

.scene-headless .subnav__tab--task {
  color: var(--accent);
}
.scene-headless .subnav__tab--task svg {
  color: var(--accent);
}

/* ── Work surface ───────────────────────────────────────────── */
.scene-headless .work-surface {
  flex: 1;
  overflow: visible;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Service assistant input block ──────────────────────────── */
.scene-headless .sa-input-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 12px 16px 10px;
  flex-shrink: 0;
}

.scene-headless .sa-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scene-headless .sa-input-row__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

.scene-headless .sa-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13.5px;
  color: var(--text-primary);
  background: transparent;
  font-family: inherit;
}

.scene-headless .sa-input::placeholder { color: var(--text-tertiary); }

.scene-headless .sa-input__send {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.scene-headless .sa-input__send:hover { background: #4f46e5; }
.scene-headless .sa-input__send svg { flex-shrink: 0; }

.scene-headless .sa-input__chips {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  flex-wrap: wrap;
}

/* ── Card grid ──────────────────────────────────────────────── */
.scene-headless .card-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scene-headless .card-grid__section-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-tertiary);
  padding: 0 2px;
  margin-top: 6px;
}

.scene-headless .card-grid__section-label:first-child { margin-top: 0; }

.scene-headless .card-grid__focus { /* full width, no extra styles needed */ }

.scene-headless .card-grid__hints {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.scene-headless #hints-container .card-grid__hints {
  grid-template-columns: 1fr;
}

.scene-headless #hints-container .card-grid__section-label {
  margin-top: 0;
}

/* ── Call strip ─────────────────────────────────────────────── */
/* ── Work surface — call mode: full-height passthrough ──────── */
.scene-headless .home-sa-footer {
  flex-shrink: 0;
  padding: 12px 0 20px;
  width: 100%;
  max-width: 860px;
  align-self: center;
  box-sizing: border-box;
}

.scene-headless .work-surface--call {
  overflow: hidden;
  padding: 0;
  height: 100%;
}

/* ── Call view two-column layout ────────────────────────────── */
.scene-headless .call-view {
  display: flex;
  flex-direction: column;
  max-width: 860px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  gap: 0;
}


/* Hero headline — same vertical space as home screen headline */
.scene-headless .call-view__hero {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px 24px 14px;
  width: 100%;
}

.scene-headless .call-view__hero-headline {
  font-family: 'Scene Poppins', sans-serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--text-primary);
  line-height: 1.2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  width: 100%;
  text-align: left;
}

.scene-headless .call-view__hero-spark {
  margin-top: 0.12em;
}

.scene-headless .call-view__hero-text {
  text-align: center;
  flex: 1;
}

.scene-headless .call-view__hero-spark {
  width: 1em;
  height: 1em;
  color: var(--accent);
  flex-shrink: 0;
}

.scene-headless .call-view__hero-sub {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 8px;
  letter-spacing: -0.01em;
  text-align: center;
  width: 100%;
}

.scene-headless .call-view__columns {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.scene-headless .call-view__sa-row {
  flex-shrink: 0;
  padding: 0 0 20px;
}

/* Task journey side panel is content-height only */
.scene-headless .call-view--task .call-view__side {
  align-self: start;
}

.scene-headless .call-view__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  flex: 1;
}

/* Customer context strip — compact one-liner below controls bar */
.scene-headless .call-customer-strip {
  font-size: 14px;
  color: var(--text-secondary);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.scene-headless .call-controls-box {
  margin: 4px 16px 12px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.scene-headless .call-customer-strip__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-right: 8px;
}
.scene-headless .call-customer-strip__auth {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-secondary);
  font-weight: 500;
}
.scene-headless .call-customer-strip__auth svg {
  flex-shrink: 0;
  background: var(--green);
  color: white;
  border-radius: 50%;
  padding: 2px;
  width: 14px;
  height: 14px;
  stroke: white;
}
.scene-headless .call-customer-strip__sep { color: var(--border); }
.scene-headless .call-customer-strip__disputed { color: var(--text-secondary); }

/* Insight chips — horizontal row below ambient bar */
.scene-headless .call-insights-strip {
  display: flex;
  gap: 6px;
  padding: 0 20px 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.scene-headless .call-insight-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.scene-headless .call-insight-chip svg { color: var(--accent); flex-shrink: 0; }
.scene-headless .call-insight-chip--soon { color: #92400E; border-color: rgba(217,119,6,0.25); background: #FFFBEB; }
.scene-headless .call-insight-chip--soon svg { color: #D97706; }
.scene-headless .call-insight-chip--ai { color: #374151; border-color: var(--border-light); background: #FFFFFF; }
.scene-headless .call-insight-chip--ai svg { color: #374151; }

/* Single white container wrapping all main-column content */
.scene-headless .call-main-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 0 0;
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* SA input — pushed to bottom of card */
.scene-headless .call-view__sa-bottom {
  padding: 0 18px;
  margin-top: auto;
}

.scene-headless .call-view__sa-bottom--full {
  border-top: 1px solid var(--border-light);
  padding: 16px 18px 20px;
  flex-shrink: 0;
}

.scene-headless .call-view__side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  order: 2;
  align-self: start;
}

/* Transcript grows to fill available side space */
.scene-headless .call-view__side .transcript { display: none; }
.scene-headless .call-view__side .transcript--hidden {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.scene-headless .call-view__side .transcript .transcript__header {
  flex-shrink: 0;
}

.scene-headless .call-view__side .transcript .transcript__body {
  flex: 1 1 0;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;
}

/* Call strip (phone) never pushed off screen by transcript growth */
.scene-headless .call-view__side .call-strip--controls {
  flex: 0 0 auto;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}

.scene-headless .call-phone-controls {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-light);
  background: var(--surface);
}

.scene-headless .call-details-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #EFEFF3;
  border-radius: 8px;
  flex-shrink: 0;
}

.scene-headless .call-details-bar__inbound {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.scene-headless .call-details-bar__controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.scene-headless .call-details-bar .call-phone-btn {
  padding: 4px 9px;
  font-size: 11px;
}

.scene-headless .call-details-bar .sentiment-combined {
  flex-shrink: 0;
}

.scene-headless .call-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  background: white;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.scene-headless .call-phone-btn:hover { background: var(--bg); border-color: #C9C8D3; color: var(--text-primary); }

.scene-headless .call-phone-btn--end {
  background: #DC2626;
  border-color: #DC2626;
  color: white;
  margin-left: auto;
}
.scene-headless .call-phone-btn--end:hover { background: #B91C1C; border-color: #B91C1C; }

.scene-headless .home-ask__suggestion {
  flex: 1;
  font-size: 13.5px;
  color: var(--text-primary);
  font-style: italic;
}

/* Decision card inside side column loses its own border/shadow */
.scene-headless .call-view__side .queue-decision-card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--border);
}

/* Task panel inside side column */
.scene-headless .call-view__side .task-panel {
  border-bottom: 1px solid var(--border);
}

/* ── Transcript ──────────────────────────────────────────────── */
.scene-headless .transcript {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.scene-headless .transcript__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.scene-headless .call-view__inbound-badge--sm {
  font-size: 10px;
  padding: 2px 7px;
  gap: 4px;
}

.scene-headless .transcript__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.scene-headless .transcript__label svg {
  width: 12px;
  height: 12px;
  color: var(--accent);
}

.scene-headless .transcript__live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: scene-headless-pulse-dot 1.8s ease-in-out infinite;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 5px;
}

@keyframes scene-headless-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.scene-headless .transcript__body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 480px;
  overflow-y: auto;
}

.scene-headless .transcript__body--empty {
  color: var(--text-tertiary);
  font-size: 12px;
  font-style: italic;
  padding: 14px 12px;
  align-items: center;
  justify-content: center;
}

.scene-headless .transcript__line {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.scene-headless .transcript__who {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-tertiary);
}

.scene-headless .transcript__line--agent .transcript__who { color: var(--accent); }

.scene-headless .transcript__text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.scene-headless .transcript__line--agent .transcript__text {
  color: var(--text-primary);
}

.scene-headless .transcript__line--ivr .transcript__who { color: var(--text-tertiary); }
.scene-headless .transcript__line--ivr .transcript__text { color: var(--text-tertiary); font-style: italic; }

.scene-headless .transcript__section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.scene-headless .transcript__divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.scene-headless .transcript__divider::before,
.scene-headless .transcript__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

.scene-headless .transcript__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.scene-headless .transcript__time {
  font-size: 9.5px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.scene-headless .transcript__topic-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 3px;
  padding: 1px 5px;
}

.scene-headless .transcript__sentiment-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 3px;
  padding: 1px 5px;
}

.scene-headless .transcript__sentiment-badge.sentiment-pill--green {
  color: var(--accent);
  background: var(--accent-light);
}

.scene-headless .transcript__sentiment-badge.sentiment-pill--yellow {
  color: var(--accent);
  background: var(--accent-light);
}

.scene-headless .transcript__sentiment-badge.sentiment-pill--red {
  color: var(--accent);
  background: #FEF2F2;
}

.scene-headless .transcript__loading {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}
.scene-headless .transcript__loading-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: scene-headless-transcript-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
.scene-headless .transcript__loading-dot:nth-child(2) { animation-delay: 0.2s; }
.scene-headless .transcript__loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes scene-headless-transcript-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}
.scene-headless .transcript__loading-text {
  font-size: 11px;
  color: var(--accent);
  font-style: italic;
  margin-left: 4px;
}

/* ── Inline hints (upcoming tasks in main column) ───────────── */
.scene-headless .call-main-card #topics-container,
.scene-headless .call-main-card #left-content-slot {
  padding: 0 18px;
}

.scene-headless .call-main-card--wrapup {
  gap: 6px;
}

/* Topics area scrolls when content overflows in full-height call mode */
.scene-headless .work-surface--call .call-main-card #topics-container {
  overflow-y: auto;
  flex-shrink: 1;
  min-height: 0;
}

/* Task surface — allow full content to scroll rather than clipping */
.scene-headless .work-surface--call .call-main-card {
  overflow: hidden;
  gap: 0;
}

.scene-headless .call-main-card .topic-card--focus {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.scene-headless .hints-inline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 18px;
}

.scene-headless .hints-inline__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-tertiary);
  padding: 0 2px 6px;
}

.scene-headless .hints-inline__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Dismiss button on hint cards */
.scene-headless .topic-card__dismiss {
  margin-left: auto;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.scene-headless .topic-card--hint:hover .topic-card__dismiss { opacity: 1; }
.scene-headless .topic-card__dismiss:hover { background: var(--bg); color: var(--text-primary); }

.scene-headless .topic-card__dismiss svg {
  width: 11px;
  height: 11px;
}

.scene-headless .call-strip {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  overflow: hidden;
}

/* Customer info card */
.scene-headless .call-strip--customer {
  padding: 14px;
}

.scene-headless .call-strip__account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.scene-headless .call-strip__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, var(--accent));
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.scene-headless .call-strip__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.scene-headless .call-strip__auth {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--green);
}

.scene-headless .call-strip__badges {
  margin-top: 4px;
}

.scene-headless .call-strip__sentiment-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--green);
  background: var(--green-light);
  border-radius: 20px;
  padding: 2px 8px;
}

.scene-headless .call-strip__details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.scene-headless .call-strip__detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.scene-headless .call-strip__detail-label {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.scene-headless .call-strip__detail-value {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: right;
}


/* Phone controls card */
.scene-headless .call-strip--controls {
  padding: 10px 10px;
  background: #1E4DB7;
  border-color: #2558CA;
}

/* Softphone caller info */
.scene-headless .softphone__caller {
  width: 100%;
  padding: 4px 0 8px;
  margin-bottom: 2px;
  text-align: left;
}

.scene-headless .softphone__caller-phone {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.scene-headless .softphone__caller-name {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin-top: 3px;
}

/* Softphone skeleton (loading state) */
.scene-headless .call-strip--skeleton {
  pointer-events: none;
}

.scene-headless .softphone__caller--loading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 4px;
}

.scene-headless .softphone-skel {
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.08) 75%);
  background-size: 200% 100%;
  animation: scene-headless-shimmer 1.4s ease-in-out infinite;
}

.scene-headless .softphone-skel--name  { height: 10px; width: 80px; }
.scene-headless .softphone-skel--phone { height: 8px;  width: 110px; }
.scene-headless .softphone-skel--key   { height: 32px; border-radius: 8px; }
.scene-headless .softphone-skel--btn   { height: 40px; border-radius: 20px; width: 100%; }

.scene-headless .softphone-skel-dialpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  margin-bottom: 6px;
}

/* Softphone */
.scene-headless .softphone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.scene-headless .softphone__sentiment {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #4ade80;
  background: rgba(74,222,128,0.15);
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: 20px;
  padding: 3px 10px;
}

.scene-headless .softphone__sentiment--hidden,
.scene-headless .softphone__dialpad--hidden,
.scene-headless .softphone__actions--hidden { display: none !important; }

/* Loading state */
.scene-headless .softphone__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
}

.scene-headless .softphone__loader-dots {
  display: flex;
  gap: 6px;
}

.scene-headless .softphone__loader-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  animation: scene-headless-softphone-pulse 1.2s ease-in-out infinite;
}

.scene-headless .softphone__loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.scene-headless .softphone__loader-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes scene-headless-softphone-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.9); }
  40% { opacity: 1; transform: scale(1.1); }
}

.scene-headless .softphone__loader-text {
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
}

.scene-headless .softphone__dialpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
}

.scene-headless .softphone__key {
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s;
}

.scene-headless .softphone__key:hover { background: rgba(255,255,255,0.16); }
.scene-headless .softphone__key:active { background: rgba(255,255,255,0.24); }

.scene-headless .softphone__actions {
  display: flex;
  gap: 6px;
  width: 100%;
}

.scene-headless .softphone__action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s;
}

.scene-headless .softphone__action-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }

.scene-headless .softphone__end-btn {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  background: var(--accent);
  border: none;
  color: white;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.12s;
}

.scene-headless .softphone__end-btn:hover { background: #b02e20; }

.scene-headless .softphone__end-btn--call {
  background: var(--accent);
}
.scene-headless .softphone__end-btn--call:hover { background: #059669; }

.scene-headless .btn--save-close {
  min-width: 140px;
  justify-content: center;
}

/* Call ended state */
.scene-headless .softphone--ended {
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 0;
}

.scene-headless .softphone__ended-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(207,54,38,0.15);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene-headless .softphone__ended-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.01em;
}

.scene-headless .softphone__ended-duration {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.4);
}

.scene-headless .call-strip__context {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-top: 1px solid var(--border-light);
  background: var(--bg);
  flex-wrap: wrap;
}

.scene-headless .ctx-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
}

.scene-headless .ctx-pill--green {
  color: var(--green);
  background: var(--green-light);
  border-color: rgba(16,185,129,0.2);
}

.scene-headless .ctx-pill--purple {
  color: var(--accent);
  background: var(--accent-light);
  border-color: rgba(99,91,255,0.15);
}


/* ── Topics section ──────────────────────────────────────────── */
.scene-headless .topics-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* .topics-section__label removed — replaced by .card-grid__section-label */

/* ── Hint card skeleton (upcoming tasks loading state) ───────── */
.scene-headless .topic-card--hint-skeleton-card {
  background: var(--surface);
  border-style: solid;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

.scene-headless .hint-card-skeleton {
  display: block;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--border-light) 25%, #e8e8f5 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: scene-headless-shimmer 1.4s ease-in-out infinite;
}

.scene-headless .hint-card-skeleton--icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

.scene-headless .hint-card-skeleton--label {
  width: 70%;
  height: 8px;
  margin-left: 4px;
}

/* ── Hint card overrides in card grid ───────────────────────── */
.scene-headless .card-grid__hints .topic-card--hint {
  background: var(--surface);
  border-style: solid;
  box-shadow: var(--shadow-sm);
}

.scene-headless .card-grid__hints .topic-card--hint.topic-card--new {
  border-color: var(--amber);
}

.scene-headless .card-grid__hints .topic-card--hint.topic-card--low {
  border-color: var(--border);
}

/* ── Topic card (horizontal) ─────────────────────────────────── */
.scene-headless .topic-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: stretch;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.scene-headless .topic-card--resolved { opacity: 0.65; }

.scene-headless .topic-card--hint {
  background: var(--bg);
  box-shadow: none;
  border-style: dashed;
}

.scene-headless .topic-card--hint.topic-card--new  { border-color: var(--amber); }
.scene-headless .topic-card--hint.topic-card--resolved { border-color: var(--border-light); }

.scene-headless .topic-card__hint-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  width: 100%;
}

.scene-headless .topic-card__hint-progress {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}

@keyframes scene-headless-topic-fade-out {
  0%   { opacity: 1; transform: scaleY(1); max-height: 60px; }
  60%  { opacity: 0; transform: scaleY(0.9); }
  100% { opacity: 0; transform: scaleY(0.85); max-height: 0; margin: 0; padding: 0; }
}

.scene-headless .topic-card--fading {
  animation: scene-headless-topic-fade-out 0.45s ease-in forwards;
  overflow: hidden;
  pointer-events: none;
}

.scene-headless .topic-card__pin {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.scene-headless .topic-card__pin svg { width: 12px; height: 12px; }

.scene-headless .topic-card:hover .topic-card__pin,
.scene-headless .topic-card--focus:hover .topic-card__pin { opacity: 1; }

.scene-headless .topic-card__pin:hover { color: var(--accent); }

.scene-headless .topic-card__pin--active {
  opacity: 1;
  color: var(--accent);
}

.scene-headless .topic-card__hint-loading {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--accent);
  font-weight: 500;
}

.scene-headless .hint-spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--accent-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: scene-headless-hint-spin 0.7s linear infinite;
}

@keyframes scene-headless-hint-spin {
  to { transform: rotate(360deg); }
}

.scene-headless .topic-card--focus {
  box-shadow: var(--shadow-md);
}

.scene-headless .topic-card__left {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scene-headless .topic-card__header-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.scene-headless .topic-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.scene-headless .topic-card__status-dot--active { background: var(--accent); }
.scene-headless .topic-card__status-dot--new    { background: var(--amber); }
.scene-headless .topic-card__status-dot--low    { border: 1.5px solid var(--text-tertiary); }

.scene-headless .topic-card__status-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.scene-headless .topic-card__status-icon svg { width: 11px; height: 11px; }

.scene-headless .topic-card__status-icon--done   { background: var(--green-light);  color: var(--green); border-radius: 50%; }
.scene-headless .topic-card__status-icon--active { background: var(--accent-light);  color: var(--accent); }
.scene-headless .topic-card__status-icon--new    { background: var(--amber-light);   color: var(--amber); }
.scene-headless .topic-card__status-icon--low    { background: var(--border-light);  color: var(--text-tertiary); }

.scene-headless .topic-card__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}

.scene-headless .topic-card__source {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}

.scene-headless .topic-card__source--right {
  margin-left: auto;
}

.scene-headless .topic-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scene-headless .topic-card__content .wf-step:first-child {
  margin-top: 4px;
}

.scene-headless .topic-content__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}

.scene-headless .topic-content__key {
  color: var(--text-tertiary);
  font-weight: 500;
  min-width: 70px;
  flex-shrink: 0;
}

.scene-headless .topic-content__val {
  color: var(--text-primary);
  font-weight: 400;
}

.scene-headless .topic-content__script {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
  padding: 6px 10px;
  background: var(--bg);
  border-radius: var(--radius-xs);
}

.scene-headless .topic-content__script--editorial {
  font-size: 17px;
  font-weight: 500;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.55;
  letter-spacing: -0.3px;
  padding: 16px 18px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.scene-headless .topic-content__note--row {
  margin-top: 10px;
}

.scene-headless .topic-content__note {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.scene-headless .topic-content__note--row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scene-headless .confidence-score {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-light);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Workflow fields ─────────────────────────────────────────── */
.scene-headless .workflow-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scene-headless .workflow-field {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 11.5px;
}

.scene-headless .workflow-field__key {
  color: var(--text-tertiary);
  font-weight: 500;
  min-width: 68px;
  flex-shrink: 0;
}

.scene-headless .workflow-field__val {
  color: var(--text-primary);
}

.scene-headless .workflow-field__val--pass {
  color: var(--green);
  font-weight: 500;
}

.scene-headless .workflow-field__val--pending {
  color: var(--amber);
  font-weight: 500;
}

/* ── Timeline header ─────────────────────────────────────────── */
.scene-headless .tl__ivr-badge {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 18px;
}

/* ── Timeline (right side of card) ──────────────────────────── */
.scene-headless .tl {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg);
  min-width: 148px;
  flex-shrink: 0;
}

.scene-headless .tl-step {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.scene-headless .tl-step__track {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 16px;
}

.scene-headless .tl-step__node {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  transition: all 0.2s;
}

.scene-headless .tl-step__node--done {
  background: var(--green);
  color: white;
}

.scene-headless .tl-step__node--done svg { width: 10px; height: 10px; }

.scene-headless .tl-step__node--pending {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-tertiary);
}

.scene-headless .tl-step__line {
  width: 1.5px;
  flex: 1;
  min-height: 14px;
  background: var(--border);
  margin: 2px 0;
}

.scene-headless .tl-step__line--done { background: var(--green); opacity: 0.4; }

.scene-headless .tl-step__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 1px 0 14px;
  line-height: 1.3;
}

.scene-headless .tl-step__label--done { color: var(--text-tertiary); font-weight: 400; }

/* ── Work surface loading state ─────────────────────────────── */
.scene-headless .ws-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 0 16px;
  animation: scene-headless-fadeIn 0.2s ease both;
}

.scene-headless .ws-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: scene-headless-hint-spin 0.7s linear infinite;
}

.scene-headless .ws-spinner--sm {
  width: 13px;
  height: 13px;
  border-width: 1.5px;
  flex-shrink: 0;
}

.scene-headless .topic-content__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 2px;
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}

.scene-headless .content-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 2px;
}

.scene-headless .content-skeleton__line {
  height: 8px;
  border-radius: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--border-light) 25%, #e8e8f5 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: scene-headless-shimmer 1.4s ease-in-out infinite;
}

.scene-headless .content-skeleton__line--med   { width: 75%; }
.scene-headless .content-skeleton__line--short { width: 50%; }
.scene-headless .content-skeleton--fields      { gap: 10px; padding: 4px 0 4px; }

.scene-headless .topic-content__script-loaded {
  animation: scene-headless-fadeInContent 0.3s ease both;
}

@keyframes scene-headless-fadeInContent {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scene-headless .ws-loading__text {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* ── Task workflow ───────────────────────────────────────────── */
.scene-headless .task-workflow {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.scene-headless .task-workflow__header {
  margin-bottom: 20px;
}

.scene-headless .task-workflow__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.scene-headless .task-workflow__sub {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.scene-headless .wf-step {
  display: flex;
  gap: 14px;
  padding-bottom: 20px;
  position: relative;
}

.scene-headless .wf-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 26px;
  bottom: 0;
  width: 1.5px;
  background: var(--border);
}

.scene-headless .wf-step--done::after  { background: var(--green) !important; opacity: 0.3; }

.scene-headless .wf-step:last-child { padding-bottom: 0; }

.scene-headless .wf-step__marker {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.scene-headless .wf-step__marker--done {
  background: var(--green);
  color: white;
}

.scene-headless .wf-step__marker--done svg { width: 12px; height: 12px; }

.scene-headless .wf-step__marker--active {
  background: var(--text-primary);
  color: white;
}

.scene-headless .wf-step__marker--pending {
  background: var(--bg);
  border: 1.5px solid var(--border);
  color: var(--text-tertiary);
}

.scene-headless .wf-step__body {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
}

.scene-headless .wf-step__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.scene-headless .wf-step__label--muted {
  color: var(--text-tertiary);
  font-weight: 500;
  margin-bottom: 0;
}

.scene-headless .wf-step__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scene-headless .wf-step--done .wf-step__content { display: none; }

.scene-headless .wf-detail-row {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
}

.scene-headless .wf-premium-card {
  border: 1px solid var(--amber);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}

.scene-headless .wf-premium-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
}

.scene-headless .wf-premium-card__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--amber);
}

.scene-headless .wf-premium-card__total {
  font-size: 14px;
  font-weight: 700;
  color: var(--amber);
}

.scene-headless .wf-premium-card__rows {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.scene-headless .wf-premium-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}

.scene-headless .wf-premium-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border-light);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg);
}

.scene-headless .wf-step__actions {
  display: flex;
  gap: 8px;
}
.scene-headless .wf-step__actions .btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  gap: 4px;
}
.scene-headless .wf-step__actions .btn svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* ── Stat tiles ─────────────────────────────────────────────── */
.scene-headless .stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.scene-headless .stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: box-shadow 0.15s;
}

.scene-headless .stat-tile:hover {
  box-shadow: var(--shadow-sm);
}

.scene-headless .stat-tile__icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  font-size: 14px;
}

.scene-headless .stat-tile__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.scene-headless .stat-tile__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
}

.scene-headless .stat-tile__sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ── Focus card ─────────────────────────────────────────────── */
.scene-headless .focus-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  animation: scene-headless-cardIn 0.3s ease both;
}

@keyframes scene-headless-cardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scene-headless .focus-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.scene-headless .focus-card__eyebrow svg {
  width: 13px;
  height: 13px;
}

.scene-headless .focus-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}

.scene-headless .focus-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.scene-headless .meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
}

.scene-headless .meta-item svg {
  width: 13px;
  height: 13px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.scene-headless .meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
}

.scene-headless .meta-dot--outline {
  background: transparent;
  border: 1.5px solid var(--text-tertiary);
}

/* ── Eligibility / info row ─────────────────────────────────── */
.scene-headless .info-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.scene-headless .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}

.scene-headless .badge svg { width: 11px; height: 11px; }

.scene-headless .badge--green  { background: var(--green-light);  color: var(--green); }
.scene-headless .badge--amber  { background: var(--amber-light);  color: var(--amber); }
.scene-headless .badge--purple { background: var(--accent-light); color: var(--accent); }
.scene-headless .badge--grey   { background: var(--bg);           color: var(--text-secondary); border: 1px solid var(--border); }
.scene-headless .badge--red    { background: #FEF2F2;              color: var(--red); }

/* ── Incoming call notification ─────────────────────────────── */
.scene-headless .incoming-call-notif {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
  animation: scene-headless-notifSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.scene-headless .incoming-call-notif--out {
  animation: scene-headless-notifSlideOut 0.25s ease both;
}

@keyframes scene-headless-notifSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scene-headless-notifSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

.scene-headless .incoming-call-notif__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.scene-headless .incoming-call-notif__ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: scene-headless-ringPulse 1s ease-in-out infinite;
}

@keyframes scene-headless-ringPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(78,80,254,0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(78,80,254,0); }
}

.scene-headless .incoming-call-notif__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #374151;
  margin-bottom: 2px;
}

.scene-headless .incoming-call-notif__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.scene-headless .incoming-call-notif__meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.scene-headless .incoming-call-notif__actions {
  display: flex;
  gap: 8px;
}

.scene-headless .incoming-call-notif__btn {
  flex: 1;
  padding: 7px 0;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}

.scene-headless .incoming-call-notif__btn:hover { opacity: 0.85; }

.scene-headless .incoming-call-notif__btn--accept {
  background: #0D9966;
  color: white;
}

.scene-headless .incoming-call-notif__btn--decline {
  background: var(--red);
  color: white;
  border: 1px solid var(--red);
}

/* ── Home / My Work view ─────────────────────────────────────── */
.scene-headless .home-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
}

.scene-headless .home-view__header { }

.scene-headless .call-view__customer-card {
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  margin-bottom: 8px;
}

.scene-headless .call-view__header-card {
  padding: 16px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  border-bottom: 1px solid var(--border-light);
}

/* Live call badge — top right */
.scene-headless .call-view__live-badge {
  position: absolute;
  top: 14px;
  right: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.scene-headless .call-view__live-timer {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--green);
  line-height: 1.1;
  letter-spacing: 0.02em;
  background: var(--green-light);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  padding: 4px 10px;
}

.scene-headless .sentiment-combined {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 12px;
  line-height: 1.1;
}
.scene-headless .sentiment-combined svg { flex-shrink: 0; }
.scene-headless #ws-call-timer { color: var(--text-primary); font-weight: 600; }
.scene-headless .sentiment-divider {
  color: var(--text-secondary);
  opacity: 1;
  font-weight: 400;
  font-size: 18px;
}
.scene-headless .sentiment-combined.sentiment-pill--green {
  background: #FFFFFF;
  color: #059669;
  border-color: #C9C8D3;
}
.scene-headless .sentiment-combined.sentiment-pill--yellow {
  background: #FFFFFF;
  color: #B45309;
  border-color: #C9C8D3;
}
.scene-headless .sentiment-combined.sentiment-pill--red {
  background: #FFFFFF;
  color: #DC2626;
  border-color: #C9C8D3;
}

.scene-headless .call-view__live-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
}

.scene-headless .call-view__live-label svg {
  flex-shrink: 0;
}

/* Name row with auth badge inline */
.scene-headless .call-view__account-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scene-headless .call-view__auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-primary);
}

.scene-headless .call-view__auth-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #10B981;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Account info block */
.scene-headless .call-view__account-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.scene-headless .call-view__account-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.scene-headless .call-view__account-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.scene-headless .call-view__account-meta-item {
  font-size: 12px;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.scene-headless .call-view__account-meta-item svg { flex-shrink: 0; }

.scene-headless .call-view__account-meta-item--green {
  color: var(--green);
  font-weight: 500;
}

.scene-headless .call-view__account-meta-sep {
  font-size: 10px;
  color: var(--border);
}

/* Account snapshot rows inside customer card */
.scene-headless .call-view__account-snapshot {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-light);
  margin-top: 2px;
  padding-top: 8px;
}
.scene-headless .call-view__snapshot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.scene-headless .call-view__snapshot-row + .call-view__snapshot-row {
  border-top: 1px solid var(--border-light);
}
.scene-headless .call-view__snapshot-key {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.scene-headless .call-view__snapshot-val {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}
.scene-headless .call-view__snapshot-val--amber { color: var(--amber); }
.scene-headless .call-view__snapshot-val--green { color: var(--green); }
.scene-headless .call-view__snapshot-val--red   { color: #DC2626; }

/* Insights panel — right side column */
.scene-headless .call-view__insights {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.scene-headless .call-view__insights-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 6px;
}
.scene-headless .call-view__insights-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
}
.scene-headless .call-view__insights-list {
  display: flex;
  flex-direction: column;
}
.scene-headless .call-view__insight-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
}
.scene-headless .call-view__insight-item:last-child { border-bottom: none; }
.scene-headless .call-view__insight-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.scene-headless .call-view__insight-.app { flex: 1; min-width: 0; }
.scene-headless .call-view__insight-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.scene-headless .call-view__insight-sub {
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-top: 1px;
  line-height: 1.4;
}
.scene-headless .call-view__insight-badge {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
  margin-top: 2px;
}

.scene-headless .call-view__headline-row {
  padding: 14px 20px 12px;
}

.scene-headless .call-view__header-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 6px;
}
.scene-headless .call-view__header-eyebrow svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.scene-headless .call-view__header-eyebrow--center {
  justify-content: center;
  margin-bottom: 10px;
}

.scene-headless .transcript__inbound-row {
  padding: 6px 12px 8px;
  border-bottom: 1px solid var(--border-light);
}

.scene-headless .call-view__inbound-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  background: #F0F0F4;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 9px;
}
.scene-headless .call-view__inbound-badge svg {
  color: var(--text-tertiary);
  flex-shrink: 0;
}


.scene-headless .call-view__header-headline {
  font-family: 'Scene Poppins', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.scene-headless .call-view__header-meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.scene-headless .call-view__header-meta-item {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.scene-headless .call-view__header-meta-item--timer {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--green);
  letter-spacing: 0.04em;
}

.scene-headless .call-view__header-meta-sep {
  font-size: 10px;
  color: var(--border);
}

.scene-headless .call-view__subtitle {
  font-size: 12.5px;
  color: var(--text-tertiary);
  font-weight: 400;
}

.scene-headless .home-view__title {
  font-family: 'Scene Poppins', sans-serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.scene-headless .call-view__title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
}

.scene-headless .call-view__title-icon svg {
  width: 22px;
  height: 22px;
}

/* Ambient AI line — standalone block above topics */
.scene-headless .call-ambient-bar {
  background: var(--accent-light);
  border-radius: 6px;
  padding: 11px 16px;
  margin: 0 18px 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.scene-headless .call-ambient-bar--inline {
  margin: 0 18px 14px;
  align-items: center;
}

.scene-headless .call-ambient-bar svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 0;
}
.scene-headless .call-ambient-bar .ms-ambient {
  font-size: 14px;
}
.scene-headless .ms-bullet {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  line-height: 1.5;
}
.scene-headless .ms-bullet + .ms-bullet {
  margin-top: 5px;
}
.scene-headless .ms-bullet__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.scene-headless .ms-ambient:has(.ms-bullet) {
  display: flex;
  flex-direction: column;
}

/* Ask bar */
.scene-headless .home-ask {
  background: var(--surface);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: 14px 16px 12px;
  box-shadow: 0 0 0 3px var(--accent-light);
}

.scene-headless .home-ask__label { display: none; }

.scene-headless .home-ask__input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scene-headless .home-ask__spark {
  flex-shrink: 0;
  color: var(--accent);
  width: 15px;
  height: 15px;
}

.scene-headless .home-ask__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--text-primary);
  background: transparent;
  font-family: inherit;
}

.scene-headless .home-ask__input::placeholder { color: var(--text-secondary); }

.scene-headless .home-ask__upload {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s;
}
.scene-headless .home-ask__upload:hover { background: var(--bg); }

.scene-headless .home-ask__icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.scene-headless .home-ask__icon-btn:hover { background: var(--border-light); color: var(--text-primary); }

.scene-headless .home-ask__send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.scene-headless .home-ask__toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  min-height: 34px;
}

.scene-headless .home-ask__toggle {
  display: inline-flex;
  align-items: center;
  background: #DDDDE8;
  border-radius: 20px;
  padding: 3px;
  gap: 0;
  border: none;
  margin-top: 0;
}

.scene-headless .home-ask__toggle-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 13px;
  border-radius: 17px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}

.scene-headless .home-ask__toggle-opt svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.scene-headless .home-ask__toggle-opt--active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

.scene-headless .home-ask__divider { display: none; }
.scene-headless .home-ask__ambient { display: none; }

/* Sections */
.scene-headless .home-section { display: flex; flex-direction: column; gap: 10px; }

.scene-headless .home-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scene-headless .home-section__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.scene-headless .home-section__count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 7px;
}

/* Work card grid */
.scene-headless .home-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.scene-headless .home-work-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.scene-headless .home-work-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #d0cff0;
}

.scene-headless .home-work-card--live {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light), var(--shadow-sm);
}

.scene-headless .home-work-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
}

.scene-headless .home-work-card--live .home-work-card__eyebrow {
  color: var(--accent);
}

.scene-headless .home-work-card__eyebrow--agent {
  color: var(--accent);
  font-weight: 600;
}

.scene-headless .home-work-card__eyebrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.scene-headless .home-work-card__eyebrow-icon svg {
  width: 11px;
  height: 11px;
}

.scene-headless .home-work-card__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

.scene-headless .home-work-card__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.scene-headless .home-work-card__meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.scene-headless .home-work-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.scene-headless .home-work-card__timer {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.scene-headless .home-work-card__action {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
}

/* Decision banner — full-width, sits above Open Tasks */
.scene-headless .home-decision-banner {
  background: var(--surface);
  border: 1.5px solid #FCD34D;
  border-radius: var(--radius);
  box-shadow: 0 0 0 3px #FFFBEB, var(--shadow-sm);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: scene-headless-cardIn 0.3s ease both;
}

.scene-headless .home-decision-banner__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.scene-headless .home-decision-banner__top-left { flex: 1; min-width: 0; }

.scene-headless .home-decision-banner__top-right {
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex-shrink: 0;
  align-items: flex-start;
}

.scene-headless .home-decision-banner__top-right .home-task-card__decision-btn {
  white-space: nowrap;
  padding: 5px 16px;
}

.scene-headless .home-decision-banner__type {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.scene-headless .home-decision-banner__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 2px;
}

.scene-headless .home-decision-banner__detail {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

.scene-headless .home-decision-banner__q {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 6px;
  line-height: 1.3;
}

.scene-headless .home-decision-banner__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
}

.scene-headless .home-decision-banner__footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.scene-headless .home-decision-banner__eyebrow {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scene-headless .home-decision-banner--resolved {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-light), var(--shadow-sm);
}

.scene-headless .home-decision-banner--out {
  animation: scene-headless-bannerOut 0.35s ease both;
}

@keyframes scene-headless-bannerOut {
  from { opacity: 1; transform: translateY(0); max-height: 200px; }
  to   { opacity: 0; transform: translateY(-6px); max-height: 0; padding: 0; margin: 0; }
}

/* Open task cards */
.scene-headless .home-task-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.scene-headless .home-task-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #d0cff0;
}

.scene-headless .home-task-card__type {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.scene-headless .home-task-card__name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.scene-headless .home-task-card__meta {
  font-size: 11px;
  color: var(--text-tertiary);
}

.scene-headless .home-task-card--decision {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-light), var(--shadow-sm);
}

.scene-headless .home-task-card__decision {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--amber-light);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scene-headless .home-task-card__decision-q {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.scene-headless .home-task-card__decision-q svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--accent);
}

.scene-headless .home-task-card__decision-detail {
  font-size: 11px;
  color: var(--text-secondary);
  padding-left: 16px;
}

.scene-headless .home-task-card__decision-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.scene-headless .home-task-card__decision-btn {
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}

.scene-headless .home-task-card__decision-btn:hover { opacity: 0.85; }

.scene-headless .home-task-card__decision-btn--yes {
  background: var(--accent);
  color: white;
}

.scene-headless .home-task-card__decision-btn--no {
  background: white;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.scene-headless .home-task-card--resolved .home-task-card__decision {
  background: var(--green-light);
}

.scene-headless .home-task-card__resolved-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--green);
}

.scene-headless .home-task-card__resolved-msg svg { flex-shrink: 0; stroke: var(--green); }

.scene-headless .home-task-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}

.scene-headless .home-task-card__select-assistant {
  position: relative;
}

.scene-headless .home-task-card__select-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  background: white;
  border: 1px solid rgba(99,91,255,0.3);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.scene-headless .home-task-card__select-btn:hover { background: var(--accent-light); }

.scene-headless .home-task-card__select-btn svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.scene-headless .home-task-card__dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  z-index: 200;
  overflow: hidden;
}

.scene-headless .home-task-card__dropdown--open { display: block; }

.scene-headless .home-task-card__dropdown-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.1s;
}

.scene-headless .home-task-card__dropdown-item:hover { background: var(--bg); }

.scene-headless .home-task-card__agent {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
}

.scene-headless .home-task-card__agent-icon {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}

.scene-headless .home-task-card__agent-icon svg {
  width: 11px;
  height: 11px;
}

/* Task list */
.scene-headless .home-task-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.scene-headless .home-task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
}

.scene-headless .home-task-item:last-child { border-bottom: none; }

.scene-headless .home-task-item__icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.scene-headless .home-task-item__icon svg { width: 10px; height: 10px; }

.scene-headless .home-task-item__body { flex: 1; min-width: 0; }

.scene-headless .home-task-item__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.scene-headless .home-task-item__inline-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.scene-headless .home-task-item__inline-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 1.6;
}

.scene-headless .home-task-item__inline-chip svg { flex-shrink: 0; }

.scene-headless .home-task-item__inline-chip--med {
  color: var(--amber);
  background: var(--amber-light);
  border-color: transparent;
}

.scene-headless .home-task-item__inline-chip--low {
  color: var(--green);
  background: var(--green-light);
  border-color: transparent;
}

.scene-headless .home-task-item__meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* ── Decision card ──────────────────────────────────────────── */
.scene-headless .decision-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  animation: scene-headless-cardIn 0.3s ease both;
}

.scene-headless .decision-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--amber);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.scene-headless .decision-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.scene-headless .decision-card__note {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.scene-headless .decision-card__checklist {
  list-style: none;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scene-headless .decision-card__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.scene-headless .decision-card__checklist li svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.scene-headless .decision-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.scene-headless .decision-card__actions .btn--sm {
  padding: 3px 11px;
  font-size: 12px;
  line-height: 1.5;
  border-width: 1px;
}

/* ── Buttons ────────────────────────────────────────────────── */
.scene-headless .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  font-family: inherit;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.scene-headless .btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.scene-headless .btn--primary {
  background: var(--accent);
  color: white;
}
.scene-headless .btn--primary:hover { background: #1D4ED8; box-shadow: 0 2px 8px rgba(37,99,235,0.35); }

.scene-headless .btn--secondary {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.scene-headless .btn--secondary:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); }

.scene-headless .btn--outline-accent {
  background: var(--surface);
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.scene-headless .btn--outline-accent:hover { background: var(--accent-light); }

.scene-headless .btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.scene-headless .btn--ghost:hover { color: var(--text-primary); background: var(--bg); }

.scene-headless .btn--amber {
  background: var(--amber);
  color: white;
}
.scene-headless .btn--amber:hover { background: #d97706; }

.scene-headless .btn--green {
  background: var(--green);
  color: white;
}
.scene-headless .btn--green:hover { background: #059669; }

.scene-headless .btn--sm {
  padding: 6px 12px;
  font-size: 12px;
}

/* ── Flow steps ─────────────────────────────────────────────── */
.scene-headless .flow-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.scene-headless .flow-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.scene-headless .flow-step__num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.scene-headless .flow-step__num--done  { background: var(--green); color: white; }
.scene-headless .flow-step__num--active{ background: var(--accent); color: white; }
.scene-headless .flow-step__num--todo  { background: var(--border); color: var(--text-secondary); }

.scene-headless .flow-step__text {
  flex: 1;
}

.scene-headless .flow-step__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.scene-headless .flow-step__sub {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* ── Claim detail card ──────────────────────────────────────── */
.scene-headless .claim-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  animation: scene-headless-cardIn 0.3s ease both;
}

.scene-headless .claim-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.scene-headless .claim-card__id {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.scene-headless .claim-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.scene-headless .claim-detail-item {
  padding: 4px 0;
}

.scene-headless .claim-detail-item__label {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 3px;
}

.scene-headless .claim-detail-item__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Claim status update (inside topic card) ────────────────── */
.scene-headless .claim-status-update {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scene-headless .claim-status-update__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scene-headless .claim-status-update__id {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.scene-headless .claim-status-update__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.scene-headless .claim-status-update__action {
  background: var(--accent-light);
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  overflow: hidden;
  position: relative;
}

.scene-headless .claim-status-update__action-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: rgba(37,99,235,0.1);
}

.scene-headless .claim-status-update__action-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  animation: scene-headless-progress-sweep 1.6s ease-in-out infinite;
}

@keyframes scene-headless-progress-sweep {
  0%   { left: -40%; }
  100% { left: 110%; }
}

.scene-headless .claim-status-update__action-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--amber);
  margin-bottom: 5px;
}

.scene-headless .claim-status-update__action-label svg { width: 11px; height: 11px; }

.scene-headless .claim-status-update__action-label--spark {
  color: var(--accent);
}

.scene-headless .claim-status-update__action-label--spark svg {
  width: 11px;
  height: 11px;
  color: var(--accent);
}

.scene-headless .claim-action-btn--wide {
  min-width: 110px;
  justify-content: center;
  white-space: nowrap;
}

.scene-headless .claim-status-update__action-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.scene-headless .claim-status-update__action-note {
  font-size: 11.5px;
  color: var(--text-secondary);
}

/* ── Summary card ───────────────────────────────────────────── */
.scene-headless .summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  animation: scene-headless-cardIn 0.3s ease both;
}

.scene-headless .summary-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.scene-headless .summary-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.scene-headless .summary-card__elapsed {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}

.scene-headless .summary-card__elapsed svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.scene-headless .summary-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.scene-headless .summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}

.scene-headless .summary-item svg {
  width: 16px;
  height: 16px;
  color: var(--green);
  flex-shrink: 0;
}

.scene-headless .summary-item__text {
  font-size: 13px;
  color: var(--text-secondary);
}

.scene-headless .notes-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
  margin-bottom: 6px;
}

.scene-headless .notes-textarea {
  width: 100%;
  height: 80px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg);
  resize: none;
  outline: none;
  transition: border-color 0.15s;
  margin-bottom: 14px;
}

.scene-headless .notes-textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
}

.scene-headless .notes-textarea::placeholder {
  color: var(--text-tertiary);
}

/* ── Topic chip ─────────────────────────────────────────────── */
.scene-headless .topic-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.scene-headless .topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--amber-light);
  color: var(--amber);
  border: 1px solid #FDE68A;
  animation: scene-headless-chipIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes scene-headless-chipIn {
  from { opacity: 0; transform: scale(0.8) translateX(-10px); }
  to   { opacity: 1; transform: scale(1) translateX(0); }
}

.scene-headless .topic-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse 1.5s ease-in-out infinite;
}

/* ── Topic steps loading skeleton ───────────────────────────── */
.scene-headless .tl--loading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  padding: 12px 14px;
  background: var(--bg);
  min-width: 148px;
  flex-shrink: 0;
}

.scene-headless .tl-skeleton {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--border-light) 25%, #e8e8f5 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: scene-headless-shimmer 1.4s ease-in-out infinite;
  width: 100%;
}

.scene-headless .tl-skeleton--short { width: 60%; }
.scene-headless .tl-skeleton--med   { width: 80%; }

@keyframes scene-headless-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.scene-headless .topic-card__hint-skeleton {
  margin-left: auto;
  display: block;
  width: 80px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--border-light) 25%, #e8e8f5 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: scene-headless-shimmer 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Call header row (call strip + optional decision card) ───── */
.scene-headless .call-header-row {
  display: contents;
}

.scene-headless .call-header-row--split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: stretch;
}

/* ── Queue decision card ─────────────────────────────────────── */
.scene-headless .queue-decision-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
  max-width: 260px;
  flex-shrink: 0;
}

.scene-headless .queue-decision-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amber);
}

.scene-headless .queue-decision-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.scene-headless .queue-decision-card__detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scene-headless .queue-decision-card__detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.scene-headless .queue-decision-card__key {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.scene-headless .queue-decision-card__val {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
}

.scene-headless .queue-decision-card__val--green {
  color: var(--green);
}

.scene-headless .queue-decision-card__delta {
  font-size: 10px;
  font-weight: 600;
  color: var(--amber);
}

.scene-headless .queue-decision-card__note {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
  border-top: 1px solid var(--border-light);
  padding-top: 8px;
}

.scene-headless .queue-decision-card__actions {
  display: flex;
  gap: 6px;
}

.scene-headless .btn--sm {
  padding: 5px 10px;
  font-size: 11.5px;
  border-radius: var(--radius-xs);
}

/* ── Mission surface (inside call strip) ────────────────────── */
.scene-headless .call-strip__mission {
  padding: 10px 16px 12px;
  border-radius: var(--radius);
  background: #eeedf8;
}

.scene-headless .ms-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.scene-headless .ms-sparkle {
  flex-shrink: 0;
  color: #635BFF;
}

.scene-headless .ms-.app {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.scene-headless .ms-sa-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  white-space: nowrap;
  line-height: 1;
}

.scene-headless .ms-ambient {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  font-style: italic;
  line-height: 1.4;
}

.scene-headless .ms-ambient[data-loading="true"]::after {
  content: '...';
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  animation: scene-headless-ellipsis-dots 1.4s steps(4, end) infinite;
}

@keyframes scene-headless-ellipsis-dots {
  0%   { width: 0; }
  25%  { width: 0.35em; }
  50%  { width: 0.65em; }
  75%  { width: 1em; }
  100% { width: 0; }
}

/* .sa-bar removed — replaced by .sa-input-block rendered inline */

.scene-headless #sa-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.scene-headless .sa-chip {
  font-size: 11.5px;
  color: #4B5563;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}

.scene-headless .sa-chip:hover { border-color: var(--accent); color: var(--accent); }

/* ── Call strip SA section ───────────────────────────────────── */
.scene-headless .call-strip__sa {
  padding: 8px 16px 10px;
  border-top: 1px solid var(--border-light);
  background: var(--bg);
}

.scene-headless .call-strip__sa-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 6px 8px 6px 12px;
}

.scene-headless .call-strip__sa-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 8px;
  border-right: 1px solid var(--border);
}

.scene-headless .call-strip__sa-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 12.5px;
  color: var(--text-primary);
  background: transparent;
  font-family: inherit;
}

.scene-headless .call-strip__sa-input::placeholder { color: var(--text-tertiary); }

.scene-headless .call-strip__sa-send {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.scene-headless .call-strip__sa-send:hover { background: var(--accent); color: white; border-color: var(--accent); }

.scene-headless .call-strip__sa-chips {
  display: flex;
  gap: 6px;
  margin-top: 7px;
  padding-left: 2px;
}


/* ── SA query result block ──────────────────────────────────── */
.scene-headless .sa-query-card__icon svg {
  width: 11px;
  height: 11px;
}

.scene-headless .sa-result-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 10px;
}

.scene-headless .sa-result-block__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
}

.scene-headless .sa-result-block__key {
  color: var(--text-tertiary);
  font-weight: 500;
  min-width: 72px;
  flex-shrink: 0;
}

.scene-headless .sa-result-block__val {
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.scene-headless .sa-result-block__val svg { width: 11px; height: 11px; flex-shrink: 0; }

.scene-headless .sa-result-block__val--green {
  color: var(--green);
  font-weight: 500;
}

/* ── Transitions between states ─────────────────────────────── */

.scene-headless .state-transition-enter {
  animation: scene-headless-stateIn 0.3s ease both;
}

@keyframes scene-headless-stateIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Typing indicator ───────────────────────────────────────── */
.scene-headless .typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px 12px 12px 12px;
  align-self: flex-start;
  width: fit-content;
}

.scene-headless .typing-dot {
  width: 6px;
  height: 6px;
  background: var(--text-tertiary);
  border-radius: 50%;
  animation: scene-headless-typingBounce 1.2s ease-in-out infinite;
}
.scene-headless .typing-dot:nth-child(2) { animation-delay: 0.15s; }
.scene-headless .typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes scene-headless-typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%            { transform: translateY(-5px); opacity: 1; }
}

/* ── Divider ────────────────────────────────────────────────── */
.scene-headless .section-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin: 2px 0;
}

.scene-headless .section-divider::before,
.scene-headless .section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

/* ── Sparkline (inline SVG chart) ───────────────────────────── */
.scene-headless .sparkline-wrap {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 12px;
}

.scene-headless .sparkline-label {
  font-size: 11px;
  color: var(--text-tertiary);
  min-width: 80px;
}

.scene-headless .sparkline-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-left: auto;
}

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 960px) {
  .scene-headless .work-panel { width: 180px; }
  .scene-headless .stat-row   { grid-template-columns: repeat(2, 1fr); }
}

/* ── Task journey — side panel ──────────────────────────────── */
.scene-headless .task-panel {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scene-headless .task-panel__headline {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.scene-headless .task-panel__section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scene-headless .task-panel__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}

.scene-headless .task-panel__value--green {
  color: var(--accent);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
}
.scene-headless .task-panel__kv {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 2px 0;
}
.scene-headless .task-panel__kv span:last-child {
  color: var(--text-primary);
  font-weight: 500;
}
.scene-headless .task-panel__confidence {
  display: flex;
  align-items: center;
  gap: 8px;
}
.scene-headless .task-panel__confidence-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
}
.scene-headless .task-panel__confidence-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.scene-headless .task-panel__confidence-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

/* ── Task journey — coverage analysis card content ──────────── */
.scene-headless .coverage-analysis {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scene-headless .coverage-analysis__headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.scene-headless .coverage-analysis__body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.scene-headless .coverage-analysis__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.scene-headless .coverage-analysis__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border-light);
}
.scene-headless .coverage-analysis__row:last-child { border-bottom: none; }
.scene-headless .coverage-analysis__key { font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
.scene-headless .coverage-analysis__val { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.scene-headless .coverage-analysis__val--accent { color: var(--accent); }
.scene-headless .coverage-analysis__val--amber { color: var(--amber); }
.scene-headless .coverage-analysis__rationale {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.5;
}
.scene-headless .coverage-analysis__rationale svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--text-tertiary);
}

/* ── Task journey — email draft ─────────────────────────────── */
.scene-headless .email-draft {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.scene-headless .email-draft__header {
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  padding: 10px 14px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scene-headless .email-draft__meta-row {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
}
.scene-headless .email-draft__meta-key {
  color: var(--text-tertiary);
  width: 44px;
  flex-shrink: 0;
}
.scene-headless .email-draft__meta-val { color: var(--text-primary); }
.scene-headless .email-draft__body {
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  padding: 14px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scene-headless .email-draft__body p { margin: 0; }
.scene-headless .email-draft__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--accent);
  margin-top: 8px;
}
.scene-headless .email-draft__badge svg {
  width: 11px;
  height: 11px;
}

/* ── .call-strip__auth variant for task (purple spark) ──────── */
.scene-headless .call-strip__auth--task {
  background: var(--accent-light);
  color: var(--accent);
  border-color: transparent;
}
.scene-headless .call-strip__auth--task svg { color: var(--accent); }

/* ── State 0 loading skeletons ──────────────────────────────── */
.scene-headless .headline-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 2px;
}

.scene-headless .headline-skel {
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--border-light) 25%, #e8e8f5 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: scene-headless-shimmer 1.4s ease-in-out infinite;
}

.scene-headless .headline-skel--long  { width: 88%; }
.scene-headless .headline-skel--med   { width: 56%; }

.scene-headless .ms-ambient-skeleton {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 2px 0;
}

.scene-headless .ms-skel {
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(37,99,235,0.15) 25%, rgba(37,99,235,0.3) 50%, rgba(37,99,235,0.15) 75%);
  background-size: 200% 100%;
  animation: scene-headless-shimmer 1.4s ease-in-out infinite;
}

.scene-headless .ms-skel--long  { width: 92%; }
.scene-headless .ms-skel--med   { width: 65%; }

/* Loading activity card — labelled progress rows */
.scene-headless .greeting-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  margin-top: 2px;
  padding: 52px 20px;
  overflow: hidden;
}

.scene-headless .greeting-loading-card__spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: scene-headless-hint-spin 0.9s linear infinite;
  flex-shrink: 0;
}

.scene-headless .greeting-loading-card__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  transition: opacity 0.3s;
}

/* hide legacy multi-row elements */
.scene-headless .greeting-loading-card__row,
.scene-headless .greeting-loading-card__check,
.scene-headless .greeting-loading-card__dot,
.scene-headless .greeting-loading-card__text { display: none; }

/* ── Detected topic tray ─────────────────────────────────────── */
.scene-headless .detected-topic-tray {
  margin: 0 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scene-headless .detected-topic-tray__eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 2px;
}
.scene-headless .detected-topic-tray__eyebrow svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.scene-headless .detected-topic-tray .greeting-action {
  pointer-events: auto;
  justify-content: space-between;
}
.scene-headless .detected-topic-tray__dismiss {
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Greeting action tiles ───────────────────────────────────── */
.scene-headless .greeting-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scene-headless .greeting-actions__eyebrow {
  font-family: 'Scene Poppins', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 4px;
}

.scene-headless .greeting-actions__eyebrow--loading {
  margin-bottom: 8px;
}

.scene-headless .greeting-heading-skel {
  height: 22px;
  width: 220px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--border-light) 25%, #e8e8f5 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: scene-headless-shimmer 1.4s ease-in-out infinite;
}

.scene-headless .greeting-actions__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scene-headless .greeting-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid #C9C8D3;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  width: 100%;
}

.scene-headless .greeting-action:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}

.scene-headless .greeting-action--static {
  cursor: default;
}

@keyframes scene-headless-agendaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(99,91,255,0.35); }
  70%  { box-shadow: 0 0 0 8px rgba(99,91,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,91,255,0); }
}

.scene-headless .greeting-action--pulse {
  animation: scene-headless-agendaPulse 0.6s ease-out;
}
.scene-headless .greeting-action--static:hover {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}
.scene-headless .greeting-action--static:hover .greeting-action__icon--accent {
  background: var(--accent-light);
  color: var(--accent);
}


.scene-headless .greeting-action__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.scene-headless .greeting-action__icon--accent {
  background: var(--accent-light);
  color: var(--accent);
  border-color: transparent;
}

.scene-headless .greeting-action:hover .greeting-action__icon--accent {
  background: var(--accent);
  color: white;
  border-color: transparent;
}

.scene-headless .greeting-action__icon svg {
  width: 14px;
  height: 14px;
}

.scene-headless .greeting-action__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.scene-headless .greeting-action__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}


.scene-headless .greeting-action__sub {
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.3;
}

.scene-headless .greeting-action__arrow {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s;
}

.scene-headless .greeting-action:hover .greeting-action__arrow {
  opacity: 1;
}

.scene-headless .greeting-action__arrow svg {
  width: 13px;
  height: 13px;
}

/* ── Case progress stepper ───────────────────────────────────── */
.scene-headless .case-progress {
  display: flex;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
}

.scene-headless .case-progress__step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: #F3F4F6;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
  margin-right: 2px;
}

.scene-headless .case-progress__step:first-child {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}

.scene-headless .case-progress__step:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
  margin-right: 0;
}

.scene-headless .case-progress__step--done {
  background: #A7F3D0;
  color: #059669;
}

.scene-headless .case-progress__step--active {
  background: #1E2939;
  color: #fff;
  font-weight: 600;
}

/* ── Call main card header band ─────────────────────────────── */
.scene-headless .call-main-card__header-band {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

/* ── Call main card two-column body ─────────────────────────── */
.scene-headless .call-main-card__body {
  display: flex;
  flex-direction: row;
  flex: 0 1 auto;
  overflow: visible;
  padding: 14px;
  gap: 14px;
}

.scene-headless .call-summary-col {
  width: 220px;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scene-headless .call-summary-col__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding-top: 6px;
  letter-spacing: 0.07em;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 5px;
}

.scene-headless .call-summary-col__label svg { width: 11px; height: 11px; }

.scene-headless .call-summary-col__body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: scene-headless-fadeIn 0.4s ease;
}

@keyframes scene-headless-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

.scene-headless .call-summary-col__body p { margin: 0; }
.scene-headless .call-summary-col__body strong { color: var(--text-primary); font-weight: 600; }

.scene-headless .call-summary-col__facts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 6px;
}

.scene-headless .call-summary-col__fact {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  gap: 8px;
}

.scene-headless .call-summary-col__fact-label {
  color: var(--text-tertiary, var(--text-secondary));
  flex-shrink: 0;
}

.scene-headless .call-content-col {
  flex: 1;
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding-top: 4px;
  padding-bottom: 14px;
  gap: 14px;
}

.scene-headless .call-agenda-col {
  width: 210px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-light);
  overflow: visible;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Wrap-up left panel: agenda recap + decision card stacked vertically */
.scene-headless .call-wrapup-left {
  width: 210px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* ── Call Agenda ─────────────────────────────────────────────── */
.scene-headless .call-agenda {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scene-headless .call-agenda__header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-primary);
  padding-bottom: 2px;
}

.scene-headless .call-agenda__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scene-headless .agenda-item {
  display: flex;
  gap: 10px;
  padding: 10px 11px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}

.scene-headless .agenda-item--done {
  background: #F9FAFB;
  border-color: var(--border-light);
}

.scene-headless .agenda-item__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: white;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}

.scene-headless .agenda-item__dot--done {
  background: var(--green);
  border-color: var(--green);
  color: white;
}

.scene-headless .agenda-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.scene-headless .agenda-item__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.scene-headless .agenda-item__sub {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.scene-headless .agenda-item__type {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 3px;
  width: fit-content;
}

.scene-headless .agenda-item__label--done {
  color: var(--text-tertiary);
  font-weight: 500;
}

.scene-headless .agenda-item__sub--done {
  display: none;
}

.scene-headless .agenda-item--skeleton {
  pointer-events: none;
}

.scene-headless .agenda-item__dot--skel {
  background: #F3F4F6;
  border-color: #E5E7EB;
}

.scene-headless .agenda-skel {
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(90deg, #F3F4F6 25%, #E9EAEC 50%, #F3F4F6 75%);
  background-size: 200% 100%;
  animation: scene-headless-shimmer 1.4s infinite;
  margin-bottom: 4px;
}

.scene-headless .agenda-skel--short { height: 8px; }

.scene-headless .agenda-skel--chip {
  height: 14px;
  width: 36px !important;
  border-radius: 2px;
  margin-top: 2px;
}

/* ── Utility classes ─────────────────────────────────────────── */
.scene-headless .hidden { display: none !important; }
.scene-headless .flex   { display: flex; }
.scene-headless .gap-8  { gap: 8px; }
.scene-headless .mt-12  { margin-top: 12px; }
.scene-headless .fw-600 { font-weight: 600; }
.scene-headless .text-sm { font-size: 12px; }
.scene-headless .text-muted { color: var(--text-secondary); }

/* ── Visual UI — two-column home layout ─────────────────────── */
.scene-headless .v8-home__left { min-width: 0; }
.scene-headless .v8-home__right {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 0;
  padding-top: 0;
  padding-bottom: 20px;
  overflow-y: auto;
  /* hidden (not visible) so a too-wide surface clips to the 320px track instead
     of spilling past the viewport's right edge (the "tiles cut off" bug); the
     components themselves now shrink via min-width:0, so nothing should clip. */
  overflow-x: hidden;
  /* a grid track defaults to min-width:auto; allow it to shrink so its content
     can't force the column wider than 320px. */
  min-width: 0;
  max-height: calc(100vh - 180px);
  scrollbar-width: none;
}

/* A2UI surfaces fill their column and never widen it. */
.scene-headless .v8-home__right .a2ui-surfaces,
.scene-headless .v8-home__right .a2ui-surface {
  width: 100%;
  min-width: 0;
}
.scene-headless .v8-home__right::-webkit-scrollbar { display: none; }
.scene-headless .v8-home__right .v8-kpi-grid {
  margin-bottom: 20px;
}
.scene-headless .v8-home__right .v8-section-header {
  margin-top: 0;
  margin-bottom: 12px;
}
.scene-headless .v8-home__right .v8-system-panel {
  margin-top: 0;
}

/* Agent live stats bar */
/* KPI grid */
.scene-headless .v8-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.scene-headless .v8-kpi-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scene-headless .v8-kpi-block__label {
  font-family: 'Scene Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #374151;
}

.scene-headless .v8-kpi-block__value {
  font-family: 'Scene Poppins', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.scene-headless .v8-kpi-block__value--amber { color: var(--text-primary); }
.scene-headless .v8-kpi-block__value--green { color: var(--text-primary); }

.scene-headless .v8-kpi-block__delta {
  font-family: 'Scene Inter', sans-serif;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
}
.scene-headless .v8-kpi-block__delta { color: #111118; }
.scene-headless .v8-kpi-block__delta--up   { color: #DC2626; font-weight: 600; background: #FEE2E2; border-radius: 20px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 3px; }
.scene-headless .v8-kpi-block__delta--down { color: #059669; font-weight: 600; background: #DCFCE7; border-radius: 20px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 3px; }
.scene-headless .v8-kpi-delta__arrow { font-size: 9px; line-height: 1; }

/* KPI tiles */
.scene-headless .v8-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.scene-headless .v8-kpi-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.scene-headless .v8-kpi-tile__value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}
.scene-headless .v8-kpi-tile__label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* System activity panel */
.scene-headless .v8-system-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
}
.scene-headless .v8-system-panel .v8-system-item:first-child { border-radius: 14px 14px 0 0; }
.scene-headless .v8-system-panel .v8-system-item:last-child  { border-radius: 0 0 14px 14px; }
.scene-headless .v8-system-panel__header {
  padding: 14px 18px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
}
.scene-headless .v8-system-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-light);
}
.scene-headless .v8-system-item:last-child { border-bottom: none; }
.scene-headless .v8-system-item__dot { display: none; }

.scene-headless .v8-system-item__menu-wrap {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}
.scene-headless .v8-system-item__menu-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.12s, border-color 0.12s;
}
.scene-headless .v8-system-item__menu-btn:hover,
.scene-headless .v8-system-item__menu-btn--open { background: var(--bg); border-color: #B0B0C0; }
.scene-headless .v8-system-item__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  min-width: 140px;
  z-index: 100;
  overflow: hidden;
}
.scene-headless .v8-system-item__menu-item {
  display: block;
  width: 100%;
  padding: 9px 14px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  color: var(--text-primary);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}
.scene-headless .v8-system-item__menu-item:hover { background: var(--bg); }
.scene-headless .v8-system-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.scene-headless .v8-system-item__when-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.scene-headless .v8-system-item__when {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
}
.scene-headless .v8-system-item__status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.scene-headless .v8-system-item__status-dot {
  display: none;
}
.scene-headless .v8-system-item__status { color: #1D4ED8; background: #EFF6FF; border-radius: 20px; padding: 2px 7px; line-height: 1; }
.scene-headless .v8-system-item__status .v8-system-item__status-dot { background: #1D4ED8; }
.scene-headless .v8-system-item__status--purple { color: #7C3AED; background: #F5F3FF; }
.scene-headless .v8-system-item__status--purple .v8-system-item__status-dot { background: #7C3AED; }
.scene-headless .v8-system-item__status--amber  { color: #B45309; background: #FFFBEB; }
.scene-headless .v8-system-item__status--amber  .v8-system-item__status-dot { background: #D97706; }
.scene-headless .v8-system-item__text {
  font-family: 'Scene Inter', sans-serif;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  flex: 1;
}
.scene-headless .v8-system-item__badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── v8 Home View ────────────────────────────────────────────── */
.scene-headless .v8-home {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: visible;
}

/* Scrollable middle zone — headline + cards; footer stays pinned below */
.scene-headless .v8-home__scroll-zone {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  scrollbar-width: none;
  padding: 52px 48px 72px;
}
.scene-headless .v8-home__scroll-zone::-webkit-scrollbar { display: none; }

.scene-headless .v8-home__spacer { display: none; }
.scene-headless .v8-home__spacer--top { display: none; }
.scene-headless .v8-home__spacer--mid { display: none; }

.scene-headless .v8-home__middle { display: contents; }

.scene-headless .v8-home__content {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}

.scene-headless .v8-home__greeting {
  font-size: 17px;
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
}

.scene-headless .v8-home__headline {
  font-family: 'Scene Poppins', sans-serif;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -.03em;
  text-align: left;
  color: var(--text-primary);
  line-height: 1.15;
  max-width: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  white-space: normal;
}

.scene-headless .v8-home__headline-spark {
  width: 30px;
  height: 30px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 6px;
}

.scene-headless .v8-home__subheadline {
  font-family: 'Scene Inter', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-secondary);
  text-align: left;
  margin-top: 8px;
  margin-bottom: 18px;
  width: 100%;
  letter-spacing: 0;
  line-height: 1.5;
}

.scene-headless .v8-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 10px;
}
.scene-headless .v8-section-header__title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1a1a2e;
  white-space: nowrap;
}
.scene-headless .v8-section-header__sub {
  font-size: 14px;
  color: var(--text-secondary);
}

.scene-headless .v8-section-header__time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #4B5563;
  background: #E4E4ED;
  border: none;
  border-radius: 20px;
  padding: 4px 11px;
  white-space: nowrap;
  box-shadow: none;
}

.scene-headless .v8-section-header__time svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Input block */
.scene-headless .v8-ask {
  width: 100%;
  max-width: 780px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

.scene-headless .v8-ask__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  flex-wrap: wrap;
}

.scene-headless .v8-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  white-space: nowrap;
  transition: opacity .15s;
}
.scene-headless .v8-chip:hover { opacity: .8; }

.scene-headless .v8-chip--agent {
  background: var(--accent-light);
  color: var(--accent);
}

.scene-headless .v8-chip--app {
  background: #F0F0F4;
  color: var(--text-secondary);
}

.scene-headless .v8-chip--add {
  background: transparent;
  border: 1.5px dashed var(--border);
  color: var(--text-tertiary);
  padding: 4px 10px;
  font-size: 14px;
}

.scene-headless .v8-ask__spacer { flex: 1; min-width: 20px; }

.scene-headless .v8-ask__btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  background: none;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: background .15s;
}
.scene-headless .v8-ask__btn:hover { background: var(--bg); }

.scene-headless .v8-ask__btn--send {
  background: var(--text-primary);
  color: white;
}
.scene-headless .v8-ask__btn--send:hover { background: #2a2a3a; }

/* Suggestion cards */
.scene-headless .v8-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 20px;
}

.scene-headless .v8-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  position: relative;
}

.scene-headless .v8-card__dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .12s, color .12s;
}
.scene-headless .v8-card__dismiss:hover { background: var(--bg); color: var(--text-primary); }
.scene-headless .v8-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.06); border-color: #D4D2F0; }

.scene-headless .v8-card--accent {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light), var(--shadow-sm);
}

.scene-headless .v8-card__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 24px;
  justify-content: center;
}

/* col 2 — supporting info */
.scene-headless .v8-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 22px;
  justify-content: center;
}

.scene-headless .v8-card__meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #374151;
  line-height: 1.45;
}

.scene-headless .v8-card__meta-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.scene-headless .v8-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--accent);
  margin-bottom: 6px;
}

.scene-headless .v8-card__tag-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.scene-headless .v8-card__tag--approval { color: #059669; }
.scene-headless .v8-card__tag--approval .v8-card__tag-icon { background: none; box-shadow: none; }
.scene-headless .v8-card__tag--claim    { color: #DC2626; }
.scene-headless .v8-card__tag--claim    .v8-card__tag-icon { background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.10); }
.scene-headless .v8-card__tag--ai       { color: #059669; }
.scene-headless .v8-card__tag--ai       .v8-card__tag-icon { background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.10); }
.scene-headless .v8-card__tag--research .v8-card__tag-icon { background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.10); }
.scene-headless .v8-card__tag--research { color: #7C3AED; }
.scene-headless .v8-card__tag--research .v8-card__tag-icon { background: #F5F3FF; }

.scene-headless .v8-card__headline {
  font-family: 'Scene Poppins', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-top: 6px;
  margin-bottom: 6px;
}

.scene-headless .v8-card__sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}

.scene-headless .v8-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.scene-headless .v8-card__tag-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.scene-headless .v8-card__confidence {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.scene-headless .v8-app-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
}

.scene-headless .v8-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 1.5px solid #C4C4D0;
  border-radius: 100px;
  padding: 7px 18px;
  min-width: 110px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.scene-headless .v8-card__action:hover {
  border-color: var(--accent);
  background: transparent;
  box-shadow: 0 2px 8px rgba(78,80,254,0.15), 0 1px 3px rgba(78,80,254,0.10);
}
.scene-headless .v8-card__action .v8-card__action-arrow { display: none; }
.scene-headless .v8-card__action:hover .v8-card__action-arrow { display: inline; }

.scene-headless .v8-card__approve-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 100px;
  padding: 7px 18px;
  min-width: 110px;
  position: relative;
  box-shadow: 0 1px 3px rgba(78,80,254,0.25), 0 1px 2px rgba(0,0,0,0.08);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.scene-headless .v8-card__approve-btn svg { position: absolute; right: 14px; opacity: 0; transition: opacity 0.15s; stroke: white; }
.scene-headless .v8-card__approve-btn:hover svg { opacity: 1; }
.scene-headless .v8-card__approve-btn:hover { background: #3a3cd4; border-color: #3a3cd4; opacity: 1; }

/* Hide preview and meta columns in Visual UI */
.scene-headless .v8-card__preview { display: none !important; }
.scene-headless .v8-card__meta { display: none !important; }

/* Dismiss button on tri cards */
.scene-headless .v8-card--tri { position: relative; }
.scene-headless .v8-card--tri .v8-card__dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Task accordion */
.scene-headless .v8-task-accordion {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.scene-headless .v8-task-accordion__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Scene Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: left;
  transition: background 0.12s;
}
.scene-headless .v8-task-accordion__toggle:hover { background: var(--bg); }

.scene-headless .v8-task-row__chevron-box {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.scene-headless .v8-task-accordion__body {}

.scene-headless .v8-task-row {
  border-bottom: 1px solid var(--border-light);
}
.scene-headless .v8-task-row:last-child { border-bottom: none; }

.scene-headless .v8-task-row__main {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.12s;
}
.scene-headless .v8-task-row__main:hover { background: var(--bg); }

.scene-headless .v8-task-row__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.scene-headless .v8-task-row__detail {
  padding: 0 20px 16px;
  border-top: none;
  background: white;
}

.scene-headless .v8-task-row__detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  padding: 14px 0 12px;
}

.scene-headless .v8-task-row__detail-item {
  font-family: 'Scene Inter', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--text-primary);
}

.scene-headless .v8-task-row__detail-key {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
}

.scene-headless .v8-task-row__detail-.app {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.scene-headless .v8-task-row__detail-.app .v8-task-row__detail-grid {
  flex: 1;
}

.scene-headless .v8-task-row__detail-actions {
  flex-shrink: 0;
  width: 160px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 14px;
}

.scene-headless .v8-task-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 1.5px solid #C4C4D0;
  border-radius: 100px;
  padding: 7px 18px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.scene-headless .v8-task-row__cta:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(78,80,254,0.15), 0 1px 3px rgba(78,80,254,0.10); }
.scene-headless .v8-task-row__cta .v8-task-row__cta-arrow { display: none; }
.scene-headless .v8-task-row__cta:hover .v8-task-row__cta-arrow { display: inline; }

.scene-headless .v8-task-row__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}
.scene-headless .v8-task-row__tag--sign {
  color: var(--accent);
}

.scene-headless .v8-task-row__icon--approval { display: none; }
.scene-headless .v8-task-row__icon--claim    { display: none; }
.scene-headless .v8-task-row__icon--ai       { display: none; }
.scene-headless .v8-task-row__icon--research { display: none; }

.scene-headless .v8-task-row__body { flex: 1; min-width: 0; }

.scene-headless .v8-task-row__title {
  font-family: 'Scene Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.scene-headless .v8-task-row__sub {
  font-family: 'Scene Inter', sans-serif;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.scene-headless .v8-task-row__time {
  font-family: 'Scene Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #4B5563;
  background: #E4E4ED;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.scene-headless .v8-task-row__check {
  color: var(--border);
  flex-shrink: 0;
  transition: color 0.15s;
}
.scene-headless .v8-task-row:hover .v8-task-row__check { color: var(--accent); }

/* Tri-column card layout */
.scene-headless .v8-card--tri {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  padding: 20px 24px 16px;
  gap: 20px 24px;
  cursor: default;
}

.scene-headless .v8-card--tri .v8-card__tri-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.scene-headless .v8-card--tri .v8-card__tri-center {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 2px;
  min-width: 0;
}

.scene-headless .v8-card__detail-line {
  font-family: 'Scene Inter', sans-serif;
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.4;
}
.scene-headless .v8-card__detail-key {
  font-family: 'Scene Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.015em;
  color: var(--text-secondary);
}

.scene-headless .v8-card--tri .v8-card__tri-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  padding-right: 28px;
}

/* See intelligence toggle */
.scene-headless .v8-card__intel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  cursor: pointer;
  font-family: inherit;
  margin-top: auto;
  padding-top: 5px;
  align-self: flex-start;
  width: fit-content;
}
.scene-headless .v8-card__intel-toggle:hover { opacity: 0.75; }

.scene-headless .v8-card__intel-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px 0 2px;
  border-top: 1px solid var(--border-light);
  margin-top: 4px;
  grid-column: 1 / -1;
}

.scene-headless .v8-intel-col {
  background: white;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scene-headless .v8-intel-col__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.scene-headless .v8-intel-col__headline {
  font-family: 'Scene Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
}
.scene-headless .v8-intel-col__sub {
  font-family: 'Scene Inter', sans-serif;
  font-size: 12px;
  color: #374151;
  line-height: 1.5;
}

/* Preview thumbnails — col 3 (kept for reference, hidden above) */
.scene-headless .v8-card__preview-inner {
  background: var(--surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
}

.scene-headless .v8-card__preview--renewal { background: #EFF6FF; }
.scene-headless .v8-card__preview--claim   { background: #EFF6FF; }
.scene-headless .v8-card__preview--gap     { background: #EFF6FF; }
.scene-headless .v8-card__preview--chart   { background: #EFF6FF; }

/* Renewal preview */
.scene-headless .v8-preview-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scene-headless .v8-preview-row {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 10px;
}

.scene-headless .v8-preview-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.scene-headless .v8-preview-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.scene-headless .v8-preview-val--accent { color: #2563EB; font-size: 18px; }

.scene-headless .v8-preview-arrow {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  padding: 1px 0;
}

.scene-headless .v8-preview-delta--up { color: var(--accent); font-weight: 600; }

/* Claim preview */
.scene-headless .v8-preview-claim {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.scene-headless .v8-preview-badge {
  font-size: 12px;
  font-weight: 700;
  color: #2563EB;
  background: #DBEAFE;
  border-radius: 5px;
  padding: 2px 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.scene-headless .v8-preview-amount {
  font-size: 24px;
  font-weight: 700;
  color: #1E40AF;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.scene-headless .v8-preview-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Coverage gap preview */
.scene-headless .v8-preview-gap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scene-headless .v8-preview-gap-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.scene-headless .v8-preview-gap-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  width: 38px;
  flex-shrink: 0;
}

.scene-headless .v8-preview-gap-bar-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.scene-headless .v8-preview-gap-bar {
  height: 7px;
  border-radius: 4px;
  flex: 1;
  max-width: 100%;
}

.scene-headless .v8-preview-gap-bar--amber { background: #BFDBFE; }
.scene-headless .v8-preview-gap-bar--accent { background: #2563EB; }

.scene-headless .v8-preview-gap-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.scene-headless .v8-preview-gap-row:last-child .v8-preview-gap-val { color: #2563EB; }

/* Chart preview */
.scene-headless .v8-preview-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 50px;
}

.scene-headless .v8-preview-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
}

.scene-headless .v8-preview-bar-fill {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: #BFDBFE;
}

.scene-headless .v8-preview-bar-fill--hi { background: #2563EB; }

.scene-headless .v8-preview-bar-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.scene-headless .v8-preview-bar-label--hi {
  color: #2563EB;
  font-weight: 700;
}

/* ── Softphone popup ──────────────────────────────────────────── */
.scene-headless .softphone-popup {
  position: fixed;
  bottom: 24px;
  left: 80px; /* clear the 64px side nav + 16px gap */
  width: 220px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 8000;
  overflow: hidden;
  animation: scene-headless-softphoneIn 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
}

.scene-headless .softphone-popup--hidden {
  display: none;
}

@keyframes scene-headless-softphoneIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.scene-headless .softphone-popup__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 10px;
  background: white;
  border-bottom: 1px solid var(--border-light);
}

.scene-headless .softphone-popup__caller {
  flex: 1;
  min-width: 0;
}

.scene-headless .softphone-popup__caller-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.scene-headless .softphone-popup__caller-meta {
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.scene-headless .softphone-popup__timer {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #10B981;
  flex-shrink: 0;
}

.scene-headless .softphone-popup__close {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s;
}
.scene-headless .softphone-popup__close:hover { background: var(--border-light); }

.scene-headless .softphone-popup__display {
  padding: 8px 14px 4px;
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  letter-spacing: 0.1em;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.scene-headless .softphone-popup__keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px 12px 10px;
}

.scene-headless .softphone-popup__key {
  height: 34px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s;
}
.scene-headless .softphone-popup__key:hover { background: var(--border-light); }
.scene-headless .softphone-popup__key:active { background: var(--border); }

.scene-headless .softphone-popup__actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
  justify-content: center;
}

.scene-headless .softphone-popup__action-btn {
  width: 44px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: white;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.scene-headless .softphone-popup__action-btn:hover { background: var(--bg); }
.scene-headless .softphone-popup__action-btn--active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.scene-headless .softphone-popup__action-btn--end {
  background: #DC2626;
  border-color: #DC2626;
  color: white;
}
.scene-headless .softphone-popup__action-btn--end:hover { background: #B91C1C; border-color: #B91C1C; }

/* ── Call Wrap-up Phase A: summary items ────────────────── */
.scene-headless .wrapup-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scene-headless .wrapup-summary__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-primary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.scene-headless .wrapup-summary__hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--amber);
}

.scene-headless .wrapup-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  animation: scene-headless-cardIn 0.25s ease both;
}

.scene-headless .wrapup-item__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ECFDF5;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.scene-headless .wrapup-item__icon svg { width: 12px; height: 12px; }

.scene-headless .wrapup-item__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.scene-headless .wrapup-item__sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* ── Call Wrap-up Phase B: editable notes ───────────────── */
.scene-headless .wrapup-notes-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: scene-headless-cardIn 0.25s ease both;
}

.scene-headless .wrapup-notes-panel__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--green);
}

.scene-headless .wrapup-notes-panel__eyebrow svg { width: 12px; height: 12px; }

.scene-headless .notes-textarea--expanded {
  min-height: 160px;
  font-size: 13px;
  line-height: 1.6;
}

/* ── v9: Work Queue Panel ────────────────────────────────────── */
/* ── v9: Work queue panel ───────────────────────────────────── */

.scene-headless .work-queue-panel {
  width: 260px;
  flex-shrink: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 12px;
  gap: 0;
  scrollbar-width: none;
}

.scene-headless .work-queue-panel::-webkit-scrollbar { display: none; }

.scene-headless .work-queue-panel__header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-tertiary);
  padding: 0 4px 10px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* Card-style queue items — like account insights */
.scene-headless .work-queue-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.scene-headless .work-queue-item:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.scene-headless .work-queue-item--active {
  background: var(--accent-light);
  border-color: rgba(37,99,235,0.3);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.08);
}

.scene-headless .work-queue-item--active:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
}

.scene-headless .work-queue-item__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.scene-headless .work-queue-item__icon svg { width: 14px; height: 14px; }

.scene-headless .work-queue-item__body {
  min-width: 0;
  flex: 1;
}

.scene-headless .work-queue-item__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.scene-headless .work-queue-item--active .work-queue-item__label {
  color: var(--accent);
}

.scene-headless .work-queue-item__sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── v9: Split layout (call + side panel) ───────────────────── */
.scene-headless .call-split-layout {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 0;
}

.scene-headless .call-split-layout__call {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
}

.scene-headless .call-split-layout__panel {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  animation: scene-headless-slideInRight 0.22s ease both;
}

@keyframes scene-headless-slideInRight {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.scene-headless .queue-side-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 16px 16px;
  gap: 12px;
}

.scene-headless .queue-side-panel::-webkit-scrollbar { display: none; }

.scene-headless .queue-side-panel__header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

/* ── v9: Post-call reflection card ──────────────────────────── */
.scene-headless .v8-card--reflection {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-light), 0 2px 8px rgba(0,0,0,0.06);
}

.scene-headless .v8-card__reflection-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--green-light);
  border-top: 1px solid rgba(5,150,105,0.12);
}

.scene-headless .v8-card__reflection-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.scene-headless .v8-card__reflection-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}

.scene-headless .v8-card__reflection-stat-label {
  font-size: 10.5px;
  color: var(--text-secondary);
}

/* ── Chat Expand (Ephemeral Behavior) ───────────────────────────────────────
   A side conversation grows UPWARD out of the ask bar, leaving the home
   surfaces intact. Ported from the prototype's .command/.expanded-answer (same
   740ms cubic-bezier grow, thinking dots, stacked Q/A bubbles). Scoped to
   .home-ask so it layers on the existing ask-bar styling. */
.scene-headless .home-ask.answer-open {
  border-color: var(--accent-dim);
  box-shadow: 0 24px 70px rgba(78, 80, 254, 0.14);
}
.scene-headless .home-ask .expanded-answer {
  max-height: 0;
  opacity: 0;
  transform: translateY(10px);
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 740ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 520ms ease,
    transform 620ms ease,
    margin-bottom 620ms ease;
}
.scene-headless .home-ask.answer-open .expanded-answer {
  max-height: 540px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  margin-bottom: 12px;
}
.scene-headless .home-ask .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.scene-headless .home-ask .panel-head__label {
  font-family: 'Scene Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.scene-headless .home-ask .panel-head__collapse {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}
.scene-headless .home-ask .panel-head__collapse:hover {
  background: var(--bg);
}
.scene-headless .home-ask .panel-.app {
  padding: 4px 2px 10px;
  max-height: 420px;
  overflow: auto;
  display: grid;
  gap: 12px;
}
.scene-headless .home-ask .msg {
  border-radius: 16px;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.48;
}
.scene-headless .home-ask .msg.user {
  justify-self: end;
  max-width: 80%;
  background: var(--accent);
  color: #fff;
}
.scene-headless .home-ask .msg.agent {
  justify-self: start;
  max-width: 92%;
  background: var(--bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.scene-headless .home-ask .thinking-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  padding-left: 4px;
}
.scene-headless .home-ask .dots {
  display: inline-flex;
  gap: 3px;
}
.scene-headless .home-ask .dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: scene-headless-headless-chat-dot 1.2s infinite;
}
.scene-headless .home-ask .dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.scene-headless .home-ask .dots span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes scene-headless-headless-chat-dot {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* ── Treatment-driven surface reveals ────────────────────────────────────────
   The a2ui-react renderer stamps `data-treatment` on each surface wrapper
   (quiet|focus|reframe|unfold). The catalog components carry the content; these
   rules give each treatment its signature MOTION so the ephemeral behavior reads
   as designed without bespoke per-region JS. */
.scene-headless .a2ui-surface[data-treatment='quiet'],
.scene-headless .a2ui-surface[data-treatment='unfold'] {
  animation: scene-headless-headless-quiet-in 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes scene-headless-headless-quiet-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* A reframe recomposes the WHOLE home in one frame; a soft cross-fade signals
   the surface reorganized around a new lens. */
.scene-headless .a2ui-surface[data-treatment='reframe'] {
  animation: scene-headless-headless-reframe-in 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes scene-headless-headless-reframe-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@font-face { font-family:"Scene Inter";src:url("./assets/inter.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:block; }

/* Scene boundary for the original v8 presentation. The shipped frontend used
   html zoom:1.1; keep those logical dimensions inside the fixed export canvas. */
.scene-desktop.scene-headless { width:100%;height:100%;zoom:1.1;font:14px/1.5 "Scene Figtree",sans-serif;color:var(--text-primary);background:var(--bg);letter-spacing:normal; }
.scene-desktop.scene-headless *, .scene-desktop.scene-headless *::before, .scene-desktop.scene-headless *::after { animation:none !important;transition:none !important; }
.scene-headless .app { width:100%;height:100%; }
.scene-headless .side-nav__logo { border:0;background:transparent;color:var(--text-primary); }
.scene-headless .side-nav__logo img { object-fit:contain; }
.scene-headless .side-nav__avatar-item { border:0;background:transparent;font:inherit;text-align:left; }
.scene-headless .headless-brand-name { margin-left:10px;font-weight:700;font-size:14px;white-space:nowrap; }
.scene-headless .v8-home__scroll-zone.scene-hl-scroll { padding:52px 48px 72px;display:flex;overflow-y:auto; }
.scene-headless .headless-empty-hint { font-size:14px;color:var(--text-secondary);line-height:1.5;padding:8px 0; }
.scene-headless .headless-canvas-main { display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start; }
.scene-headless .headless-canvas-main>* { grid-column:span 2; }
.scene-headless .headless-canvas-main>.headless-canvas-surface[data-canvas-span="1"] { grid-column:span 1; }
.scene-headless .headless-canvas-surface { min-width:0; }
.scene-headless .headless-canvas-full { width:100%;max-width:1200px;display:flex;flex-direction:column;gap:10px; }
.scene-headless .v8-home__left>.headless-canvas-surface { margin-bottom:10px; }
.scene-headless .v8-home__right>.headless-canvas-surface { margin-bottom:12px; }
.scene-headless .headless-canvas-surface>.v8-card { display:block; }
.scene-headless .headless-surface-heading { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.scene-headless .headless-surface-heading>button { border:0;background:transparent;color:var(--text-tertiary);display:flex;padding:3px;border-radius:4px; }
.scene-headless .headless-surface-heading .v8-card__tag { display:flex;align-items:center;gap:8px; }
.scene-headless .v8-card h2.v8-card__headline { font-family:"Scene Poppins",sans-serif;font-size:19px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--text-primary);margin:6px 0; }
.scene-headless .v8-card .v8-card__sub { font-size:12px;font-weight:400;color:var(--text-secondary);line-height:1.4;white-space:pre-wrap; }
.scene-headless .headless-canvas-details { display:flex;flex-direction:column;gap:10px;margin-top:14px; }
.scene-headless .headless-canvas-details>div { display:flex;justify-content:space-between;gap:16px; }
.scene-headless .headless-canvas-details dt { font-size:12px;color:var(--text-secondary); }
.scene-headless .headless-canvas-details dd { font-size:13px;font-weight:500;text-align:right;white-space:pre-wrap; }
.scene-headless .headless-canvas-form { margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.scene-headless .headless-canvas-form label { display:flex;flex-direction:column;gap:5px;min-width:0;font-size:12px;color:var(--text-secondary); }
.scene-headless .headless-canvas-form input { width:100%;border:1px solid var(--border);border-radius:7px;padding:9px 11px;color:var(--text-primary);background:var(--surface);outline-color:var(--accent);font:14px/1.4 "Scene Figtree",sans-serif; }
.scene-headless .headless-canvas-form .v8-card__footer { grid-column:1/-1;display:flex;justify-content:flex-end;padding:0;margin-top:3px; }
.scene-headless .headless-canvas-form [role="status"] { grid-column:1/-1;font-size:12px;color:var(--green); }
.scene-headless .headless-canvas-form .v8-card__action { display:inline-flex;align-items:center;justify-content:center;gap:7px; }
.scene-headless .headless-task-list { display:flex;flex-direction:column;gap:10px;margin-top:14px; }
.scene-headless .headless-task-list>button,.scene-headless .headless-task-list>div { width:100%;display:flex;gap:10px;text-align:left;background:transparent;border:0;padding:10px 0;border-top:1px solid var(--border-light); }
.scene-headless .headless-task-list>div { flex-direction:column;gap:3px; }
.scene-headless .headless-task-list strong { display:block;font-size:13px;font-weight:500;color:var(--text-primary); }
.scene-headless .headless-task-list small,.scene-headless .headless-task-list>div>span { display:block;font-size:12px;color:var(--text-secondary);margin-top:2px; }
.scene-headless .headless-task-check { width:17px;height:17px;border:1px solid var(--border);border-radius:5px;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center; }
.scene-headless .headless-task-check.is-complete { background:var(--accent);border-color:var(--accent);color:#fff; }
.scene-headless .headless-top-actions { position:absolute;top:16px;right:16px;z-index:50;display:flex;gap:8px; }
.scene-headless .headless-top-actions>button { display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--surface);border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow-sm);font:12.5px/1.5 "Scene Figtree",sans-serif;color:var(--text-secondary); }
.scene-headless .headless-top-actions>button.is-active { border-color:var(--accent-dim);background:var(--accent-light);color:var(--accent); }
.scene-headless .headless-reopen-row { width:100%;max-width:1200px;margin:0 auto 8px; }
.scene-headless .headless-conversation-toggle { display:inline-flex;align-items:center;gap:7px;padding:6px 14px;background:var(--surface);border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow-sm);font:13px/1.5 "Scene Figtree",sans-serif;color:var(--text-secondary); }
.scene-headless .home-ask__input { font:15px/1.5 "Scene Figtree",sans-serif; }
.scene-headless .home-ask__input::placeholder { color:var(--text-secondary);opacity:1; }
.scene-headless .home-ask__send:disabled { opacity:.5; }
.scene-headless .home-ask__icon-btn:disabled { opacity:.5;cursor:default; }
.scene-headless .expanded-answer .scene-workspace-transcript { max-height:none;overflow:visible;border:0;background:none;padding:0; }
.scene-headless .headless-record-context { background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px; }
.scene-headless .headless-record-context h2 { font:600 16px/1.4 "Scene Figtree",sans-serif;color:var(--text-primary);letter-spacing:normal;margin-bottom:12px; }
.scene-headless .headless-record-context>div>button { display:flex;align-items:center;gap:7px;width:100%;padding:9px 0;border:0;border-top:1px solid var(--border-light);background:none;text-align:left;font-weight:500; }
.scene-headless .headless-record-context dl { padding:4px 0 10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px; }
.scene-headless .headless-record-context dt { font-size:11px;color:var(--text-tertiary); }
.scene-headless .headless-record-context dd { font-size:12px;color:var(--text-secondary);overflow-wrap:anywhere; }
.scene-headless .headless-activity-drawer { position:absolute;z-index:70;right:0;top:0;bottom:0;width:370px;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);padding:20px;overflow:auto; }
.scene-headless .headless-activity-drawer>header { display:flex;align-items:center;justify-content:space-between;margin-bottom:24px; }
.scene-headless .headless-activity-drawer>header>button { border:0;background:none;display:flex;color:var(--text-secondary); }
.scene-headless .headless-activity-drawer>.headless-record-context { margin-top:20px; }
.scene-headless .headless-profile-menu { position:absolute;bottom:80px;z-index:80;display:flex;flex-direction:column;min-width:184px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-lg);gap:4px; }
.scene-headless .headless-profile-menu>strong { padding:5px 8px;font-size:13px; }
.scene-headless .headless-profile-menu>button { border:0;background:none;padding:8px;text-align:left;border-radius:5px;font-size:13px; }
.scene-headless .headless-profile-menu>button[aria-checked="true"] { color:var(--accent);background:var(--accent-light); }

/* Source call-bar / work-queue vocabulary, adapted to a saved Scene voice tray.
   The historical home did not expose voice; this is its bounded extension. */
.scene-headless .headless-voice-tray { position:absolute;z-index:45;right:24px;top:62px;width:320px;max-height:calc(100% - 80px);display:flex;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden; }
.scene-headless .headless-voice-shell { min-height:0;display:flex;flex-direction:column;width:100%; }
.scene-headless .headless-voice-header { display:flex;align-items:center;gap:9px;padding:15px 16px;border-bottom:1px solid var(--border-light);color:var(--text-primary); }
.scene-headless .headless-voice-header>strong { font-size:14px;font-weight:600;flex:1; }
.scene-headless .headless-voice-header>button,.scene-headless .headless-work-heading>button { background:none;border:0;display:flex;padding:3px;color:var(--text-tertiary); }
.scene-headless .headless-voice-tabs { display:flex;gap:6px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border-light); }
.scene-headless .headless-voice-tabs>button { flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 8px;background:none;border:0;border-radius:7px;font-size:12px;color:var(--text-secondary); }
.scene-headless .headless-voice-tabs>button[aria-selected="true"] { background:var(--accent-light);color:var(--accent);font-weight:600; }
.scene-headless .headless-voice-scroll { overflow-y:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin; }
.scene-headless .headless-voice-scroll .work-queue-panel { width:100%;overflow:visible; }
.scene-headless .headless-work-item { flex-direction:column;gap:10px;cursor:default; }
.scene-headless .headless-work-heading { display:flex;gap:9px;align-items:center;width:100%; }
.scene-headless .headless-work-heading>div { min-width:0;flex:1; }
.scene-headless .headless-work-heading strong { display:block;font-size:13px;font-weight:600;overflow-wrap:anywhere; }
.scene-headless .headless-work-heading small { display:block;font-size:11px;color:var(--text-secondary); }
.scene-headless .headless-work-heading>img { border-radius:8px;object-fit:cover; }
.scene-headless .headless-work-queue { font-size:10px;font-weight:600;color:var(--accent); }
.scene-headless .headless-work-context { width:100%; }
.scene-headless .headless-work-context dl { display:flex;flex-direction:column;gap:9px; }
.scene-headless .headless-work-context dt { color:var(--text-tertiary);font-size:11px; }
.scene-headless .headless-work-context dd,.scene-headless .headless-work-context p { font-size:12px;color:var(--text-primary);white-space:pre-wrap;overflow-wrap:anywhere; }
.scene-headless .headless-work-context p { margin-top:12px; }
.scene-headless .headless-work-actions { width:100%;display:flex;gap:8px;justify-content:flex-end; }
.scene-headless .headless-work-actions>button { border:1px solid var(--border);border-radius:7px;background:var(--surface);padding:6px 13px;font-size:12px; }
.scene-headless .headless-primary-button { background:var(--accent) !important;color:#fff !important;border:1px solid var(--accent) !important;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 13px;font-size:12px; }
.scene-headless .headless-voice-empty { padding:24px 8px;display:flex;align-items:center;flex-direction:column;gap:10px;color:var(--text-tertiary);text-align:center; }
.scene-headless .headless-voice-empty strong { color:var(--text-secondary);font-size:13px; }
.scene-headless .headless-voice-empty p { font-size:12px; }
.scene-headless .headless-voice-empty>button { border:1px solid var(--border);border-radius:7px;padding:6px 20px;background:var(--surface);font-size:12px; }
.scene-headless .call-bar__identity { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.scene-headless .headless-call-status { margin-top:-5px;font-size:11px;color:rgba(255,255,255,.6); }
.scene-headless .headless-call-controls { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px; }
.scene-headless .headless-call-controls .call-ctrl-btn { width:100%;display:flex;align-items:center;justify-content:center;gap:6px;height:30px; }
.scene-headless .call-ctrl-btn.is-active { background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff; }
.scene-headless .headless-end-call { background:#BA3349;border:1px solid #C9495C;border-radius:8px;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;font-size:12px; }
.scene-headless .headless-call-participant { display:flex;align-items:center;gap:8px;border-top:1px solid rgba(255,255,255,.1);padding-top:10px;color:#fff;font-size:12px; }
.scene-headless .headless-call-participant>span { flex:1; }
.scene-headless .headless-call-participant small { display:block;color:rgba(255,255,255,.55);font-size:10px; }
.scene-headless .headless-call-participant>button { color:rgba(255,255,255,.65);border:0;background:none;display:flex; }
.scene-headless .headless-voice-form { display:flex;flex-direction:column;gap:12px;padding:18px 16px; }
.scene-headless .headless-voice-form>strong { font-size:14px; }
.scene-headless .headless-voice-form>label { display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-secondary); }
.scene-headless .headless-voice-form input,.scene-headless .headless-voice-form textarea,.scene-headless .headless-voice-form select { border:1px solid var(--border);border-radius:7px;padding:8px 10px;width:100%;color:var(--text-primary);font-size:13px; }
.scene-headless .headless-voice-dialer { padding:18px 16px; }
.scene-headless .headless-number-entry { display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;padding:8px 10px; }
.scene-headless .headless-number-entry>input { border:0;min-width:0;width:100%;outline:none;background:none;font-size:14px; }
.scene-headless .headless-number-entry>button { display:flex;border:0;background:none;color:var(--text-tertiary); }
.scene-headless .headless-dialpad { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0; }
.scene-headless .headless-dialpad>button { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 0;background:var(--bg);border:1px solid var(--border-light);border-radius:9px;color:var(--text-primary); }
.scene-headless .headless-dialpad strong { font-size:20px;font-weight:500;line-height:1.3; }
.scene-headless .headless-dialpad small { font-size:9px;color:var(--text-tertiary);letter-spacing:.08em;line-height:1.4; }
.scene-headless .headless-voice-dialer>.headless-primary-button { width:100%; }
.scene-headless .headless-voice-dialer>output { display:block;min-height:30px;padding:4px 8px;border-bottom:1px solid var(--border-light);font-variant-numeric:tabular-nums;letter-spacing:.1em;font-size:16px; }



/* Component tokens inherit the selected TrueServe branding. Brand values live
   in branding.json / branding.css, never in an individual renderer. */
.cc-catalog { font-family:var(--font-sans, "Scene Figtree", sans-serif); color:var(--foreground); font-size:14px; line-height:1.55; text-align:left; }
.cc-catalog, .cc-catalog * { box-sizing:border-box; }
.cc-card { border:1px solid var(--border); border-radius:16px; background:var(--card); padding:24px 26px; min-width:0; container-type:inline-size; }
.cc-catalog h1,.cc-catalog h2,.cc-catalog p,.cc-catalog ul,.cc-catalog ol,.cc-catalog dl,.cc-catalog blockquote { margin:0; }
.cc-catalog h2 { font-size:21px; font-weight:600; line-height:1.3; letter-spacing:-.035em; margin:10px 0 14px; text-wrap:pretty; }
.cc-kicker { display:flex; align-items:center; gap:8px; color:var(--primary); font-weight:600; font-size:12px; letter-spacing:.01em; }
.cc-kicker>svg,.cc-kicker>.cc-status { margin-left:auto; }
.cc-seed { width:8px; height:11px; border-radius:8px 0 8px 0; background:var(--primary); flex:none; opacity:.75; }
.cc-status { font-size:11px; line-height:1.3; font-weight:500; padding:5px 8px; border-radius:5px; color:var(--muted-foreground); background:var(--muted); white-space:nowrap; align-self:start; }
.cc-body { color:var(--muted-foreground); max-width:66ch; font-size:14px; }
.cc-patient { font-size:14px; font-weight:600; margin-bottom:10px!important; }
.cc-patient span { font-weight:400; color:var(--muted-foreground); }
.cc-focus { background:var(--accent); border-color:color-mix(in srgb,var(--primary) 18%,var(--border)); }
.cc-suggestion { border-left:2px solid var(--primary); padding:0 0 0 14px; margin-top:22px; }
.cc-suggestion>span { color:var(--primary); font-size:11px; font-weight:600; }
.cc-suggestion p { margin-top:4px; font-size:14px; }
.cc-footer { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-top:22px; flex-wrap:wrap; }
.cc-source { display:flex; align-items:flex-start; gap:6px; font-size:11px; line-height:1.5; color:var(--muted-foreground); max-width:56ch; margin-top:15px!important; }
.cc-source svg { flex:none; margin-top:2px; }
.cc-button { display:inline-flex; justify-content:center; align-items:center; gap:14px; background:var(--primary); color:var(--primary-foreground); border:1px solid var(--primary); border-radius:8px; font:600 12px/1.4 var(--font-sans, sans-serif); padding:10px 14px; cursor:pointer; min-height:38px; }
.cc-button-secondary { background:transparent; color:var(--primary); border-color:color-mix(in srgb,var(--primary) 25%,transparent); }
.cc-button:hover:not(:disabled) { filter:brightness(.93); }
.cc-button:focus-visible,.cc-catalog summary:focus-visible,.cc-catalog input:focus-visible,.cc-catalog select:focus-visible { outline:2px solid var(--primary); outline-offset:4px; }
.cc-button:disabled { opacity:.55; cursor:default; }
.cc-error { color:var(--destructive); margin-top:8px!important; font-size:12px; }
.cc-briefing { padding:4px 0 28px; }
.cc-briefing h1 { font:500 35px/1.28 var(--font-heading, "Scene Poppins", sans-serif); letter-spacing:-.05em; margin:24px 0 20px; }
.cc-briefing h1>span { color:var(--primary); }
.cc-date { color:var(--muted-foreground); font-weight:400; margin-left:auto; }
.cc-lead { font-size:15px; color:var(--muted-foreground); max-width:65ch; }
.cc-briefing-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-top:16px; }
.cc-briefing-bottom .cc-source { margin-top:0!important; }
.cc-briefing-bottom .cc-button { border:0; padding:0; min-height:28px; font-weight:500; }
.cc-quiet { border-color:transparent; background:var(--muted); padding:21px 22px; }
.cc-quiet h2 { font-size:18px; }
.cc-agenda { list-style:none; padding:0; }
.cc-agenda li { display:flex; gap:17px; padding:18px 0; border-bottom:1px solid var(--border); }
.cc-agenda li:last-child { border-bottom:0; }
.cc-agenda time { width:57px; flex:none; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.cc-agenda strong { font-weight:600; font-size:14px; }
.cc-agenda p { font-size:12px; margin-top:3px; color:var(--muted-foreground); }
.cc-agenda span { font-size:10px; margin-top:8px; display:block; color:var(--primary); }
.cc-note { font-size:12px; color:var(--muted-foreground); margin-top:16px!important; margin-bottom:15px!important; }
.cc-person { display:flex; gap:13px; align-items:center; margin:17px 0; }
.cc-avatar { width:45px; height:45px; flex:none; display:grid; place-items:center; border-radius:13px; background:var(--accent); color:var(--primary); font-size:15px; font-weight:600; }
.cc-person strong { font-size:16px; font-weight:600; }
.cc-person p { color:var(--muted-foreground); font-size:12px; margin-top:3px; }
.cc-rows { padding:0; list-style:none; margin-top:14px!important; }
.cc-rows li { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:13px 0; border-top:1px solid var(--border); }
.cc-rows strong { font-weight:500; font-size:13px; }
.cc-rows p { font-size:12px; color:var(--muted-foreground); margin-top:3px; }
.cc-answer { font-size:17px; line-height:1.55; margin:10px 0 18px!important; }
.cc-evidence { padding:14px 0; border-block:1px solid var(--border); }
.cc-evidence summary { font-size:12px; font-weight:600; color:var(--primary); cursor:pointer; }
.cc-evidence>div { margin-top:14px; font-size:12px; }
.cc-evidence strong { font-weight:600; }
.cc-evidence p { color:var(--muted-foreground); margin-top:3px; }
.cc-evidence small { display:block; color:var(--muted-foreground); font-size:11px; margin-top:4px; }
.cc-document-insight { padding:21px 22px; }
.cc-document-insight h2 { font-size:18px; }
.cc-document-status { color:var(--primary); font-size:11px; font-weight:600; margin-bottom:10px!important; }
.cc-document-summary { font-size:13px; color:var(--muted-foreground); margin-bottom:15px!important; }
.cc-outreach-goal { margin:18px 0; padding-left:15px; border-left:2px solid var(--primary); }
.cc-outreach-goal>span { font-size:11px; color:var(--muted-foreground); }
.cc-outreach-goal>p { margin-top:5px; font-size:15px; }
.cc-outreach-call { display:flex; align-items:center; gap:13px; padding:16px; background:var(--accent); color:var(--primary); border-radius:10px; }
.cc-outreach-call>div { flex:1; }
.cc-outreach-call strong { font-size:14px; font-weight:600; }
.cc-outreach-call p { font-size:12px; margin-top:3px; }
.cc-outreach-audio { animation:cc-call-pulse 1.5s ease-in-out infinite; }
@keyframes cc-call-pulse { 50% { opacity:.4; } }
@media(prefers-reduced-motion:reduce) { .cc-outreach-audio { animation:none; } }
.cc-outreach-transcript { list-style:none; padding:0; margin:16px 0!important; }
.cc-outreach-transcript li { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; margin-bottom:12px; font-size:12px; }
.cc-outreach-transcript strong { font-weight:600; color:var(--primary); }
.cc-outreach-transcript p { color:var(--muted-foreground); }
.cc-outreach-direction { margin-top:18px; }
.cc-outreach-direction label { display:block; margin:14px 0; font-size:12px; color:var(--muted-foreground); }
.cc-outreach-direction textarea { display:block; width:100%; min-height:75px; margin-top:7px; resize:vertical; padding:10px; background:var(--card); border:1px solid var(--border); border-radius:6px; color:var(--foreground); font:13px/1.5 var(--font-sans,sans-serif); }
.cc-arrival { border-top:3px solid var(--primary); }
.cc-arrival blockquote { font-size:18px; letter-spacing:-.025em; line-height:1.5; margin:18px 0; }
.cc-choices { padding:0; list-style:none; margin-top:20px!important; }
.cc-choices li { display:flex; gap:12px; align-items:flex-start; padding:15px 0; border-top:1px solid var(--border); }
.cc-choices li>div { flex:1; }
.cc-choice-mark { display:flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:50%; color:var(--primary); background:var(--accent); flex:none; }
.cc-choices li[data-decision="Declined"] .cc-choice-mark { background:var(--muted); color:var(--muted-foreground); }
.cc-choices strong { font-size:14px; font-weight:500; }
.cc-choices p { font-size:12px; color:var(--muted-foreground); margin-top:5px; }
.cc-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:21px; }
.cc-fields label { display:flex; flex-direction:column; gap:7px; color:var(--muted-foreground); font-size:12px; }
.cc-fields input,.cc-fields select { width:100%; min-width:0; font:14px/1.5 var(--font-sans,sans-serif); color:var(--foreground); border:1px solid var(--border); background:var(--card); border-radius:7px; padding:9px 11px; }
.cc-field-wide { grid-column:1/-1; }
.cc-appointment { display:flex; align-items:center; gap:16px; padding:20px 18px; border-radius:12px; background:var(--accent); margin-top:20px; color:var(--primary); }
.cc-appointment>div { flex:1; }
.cc-appointment strong { font-size:16px; font-weight:600; }
.cc-appointment p { font-size:13px; margin-top:4px; }
.cc-appointment .cc-status { background:var(--card); }
.cc-facts { margin-top:20px!important; display:flex; flex-direction:column; gap:10px; font-size:12px; }
.cc-facts>div { display:flex; justify-content:space-between; gap:18px; }
.cc-facts dt { color:var(--muted-foreground); }
.cc-facts dd { margin:0; text-align:right; font-weight:500; }
@container (max-width:380px) {
  .cc-footer { align-items:start; flex-direction:column; }
  .cc-choices .cc-status { white-space:normal; max-width:70px; }
  .cc-fields { grid-template-columns:1fr; }
  .cc-appointment { flex-wrap:wrap; }
}

/* Brand adapter: intentionally separate from brand-neutral component styles.
   Apply to a containing .cc-theme element in the review/Scene host. */
.cc-theme {
  --primary:#0F6B4C; --primary-foreground:#FFFFFF;
  --foreground:#173A2B; --background:#F5F8F6;
  --card:#FFFFFF; --card-foreground:#173A2B;
  --muted:#F0F5F1; --muted-foreground:#52685B;
  --accent:#EDF6F0; --accent-foreground:#173A2B;
  --border:#D5E3DA; --destructive:#A43836;
  --font-sans:"Scene Figtree",sans-serif; --font-heading:"Scene Poppins",sans-serif;
}
.cc-theme .scene-headless {
  --bg:var(--background); --surface:var(--card);
  --border:#D5E3DA; --border-light:#E2EBE5;
  --accent:#0F6B4C; --accent-light:#EDF6F0; --accent-dim:#9BCBB0;
  --text-primary:#173A2B; --text-secondary:#52685B; --text-tertiary:#607367;
  --shadow-sm:0 1px 3px #173A2B08; --shadow-lg:0 10px 35px #173A2B12;
  --green:#0F6B4C; --green-light:#EDF6F0;
}
/* The archived shell uses --accent for its action color; catalogue semantics
   use --accent for a pale background, so restore it at the catalogue boundary. */
.cc-theme .scene-headless .cc-catalog { --accent:#EDF6F0; }
.cc-theme .scene-headless .headless-canvas-main { gap:18px; }
.cc-theme .scene-headless .v8-home__right>.headless-canvas-surface { margin-bottom:20px; }
.cc-theme .scene-headless .v8-home__scroll-zone.scene-hl-scroll { padding-top:54px; }
.cc-theme .scene-headless .side-nav__logo img { width:32px; height:36px; }
.cc-theme .scene-headless .headless-top-actions>button { box-shadow:none; }
.cc-theme .scene-headless .home-ask { box-shadow:0 5px 30px #173A2B0A; border-color:var(--border); }

@font-face { font-family:"Scene Figtree";src:url("./assets/figtree-400.ttf");font-weight:400;font-display:swap; }
@font-face { font-family:"Scene Figtree";src:url("./assets/figtree-500.ttf");font-weight:500;font-display:swap; }
@font-face { font-family:"Scene Figtree";src:url("./assets/figtree-600.ttf");font-weight:600;font-display:swap; }
@font-face { font-family:"Scene Figtree";src:url("./assets/figtree-700.ttf");font-weight:700;font-display:swap; }
@font-face { font-family:"Scene Poppins";src:url("./assets/poppins.ttf");font-weight:100 900;font-display:swap; }
* { box-sizing:border-box; }
html,body,#root { margin:0; min-height:100%; }
body { background:#F5F8F6; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; }
.review-app { color:var(--foreground); font:14px/1.5 "Scene Figtree",sans-serif; min-height:100vh; }
.review-header { height:78px; padding:0 34px; display:flex; align-items:center; gap:24px; background:var(--card); border-bottom:1px solid var(--border); }
.review-wordmark { display:flex; align-items:center; }
.review-wordmark img { width:194px; height:auto; }
.review-title { border-left:1px solid var(--border); padding-left:24px; display:flex; flex-direction:column; gap:2px; }
.review-title>span { font-size:13px; font-weight:600; }
.review-title small { font-size:11px; color:var(--muted-foreground); }
.review-draft { margin-left:auto; color:var(--muted-foreground); font-size:11px; padding:5px 10px; border:1px solid var(--border); border-radius:5px; }
.review-download { display:inline-flex; align-items:center; gap:9px; font-size:12px; color:var(--primary); text-decoration:none; font-weight:600; padding:8px 0; }
.review-nav { display:flex; align-items:center; height:49px; padding:0 34px; gap:28px; border-bottom:1px solid var(--border); background:var(--card); }
.review-nav button { height:100%; padding:0; color:var(--muted-foreground); border:0; background:transparent; position:relative; font-size:12px; }
.review-nav button[aria-current="page"] { color:var(--primary); font-weight:600; }
.review-nav button[aria-current="page"]::after { content:""; position:absolute; height:2px; background:var(--primary); bottom:0; left:0; right:0; }
.review-nav>p { margin-left:auto; font-size:10px; color:var(--muted-foreground); }
.review-context { min-height:53px; display:flex; align-items:center; justify-content:space-between; padding:8px 34px; gap:16px; }
.review-views { display:flex; flex-wrap:wrap; gap:5px; }
.review-views button,.review-variants button { background:transparent; border:1px solid transparent; border-radius:6px; padding:6px 10px; font-size:11px; color:var(--muted-foreground); }
.review-views button[aria-pressed="true"],.review-variants button[aria-pressed="true"] { border-color:var(--border); color:var(--primary); background:var(--card); font-weight:600; }
.review-reset { display:flex; gap:7px; align-items:center; background:none; border:0; font-size:11px; color:var(--muted-foreground); }
.review-canvas-frame { position:relative; height:calc(100vh - 221px); min-height:700px; margin:0 22px; border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 5px 20px #173A2B05; }
.review-canvas-frame .scene-headless { position:relative; }
.review-canvas-frame .scene-headless .v8-home__content { max-width:1240px; }
.review-canvas-frame .scene-headless .v8-home__right { width:320px; flex-shrink:0; }
.review-canvas-frame .scene-headless .v8-home__left { min-width:0; }
.review-canvas-frame .scene-headless .v8-section-header__title { color:var(--text-secondary); }
.review-canvas-frame .scene-headless .home-ask .expanded-answer .panel-body { max-height:200px; overflow:auto; }
.review-canvas-frame .scene-headless .review-reply { padding:4px 12px 10px; }
.review-reply>span { font-size:11px; color:var(--primary); font-weight:600; }
.review-reply>p { font-size:14px; color:var(--foreground); white-space:pre-line; margin-top:10px; }
.review-receipt-panel { position:absolute; width:min(450px,calc(100% - 40px)); right:20px; top:20px; z-index:90; filter:drop-shadow(0 8px 28px #173A2B22); }
.review-close { background:var(--card); border:1px solid var(--border); border-radius:5px; margin-bottom:8px; padding:6px 10px; font-size:11px; color:var(--muted-foreground); }
.review-show-response { position:absolute; bottom:110px; left:30%; padding:10px 15px; border:1px solid var(--border); border-radius:7px; background:var(--card); color:var(--primary); }
.review-document-dialog { color:var(--foreground); background:var(--card); border:1px solid var(--border); border-radius:14px; padding:0; width:min(1250px,calc(100vw - 40px)); max-height:92dvh; overflow:auto; font:14px/1.5 "Scene Figtree",sans-serif; }
.review-document-dialog::backdrop { background:color-mix(in srgb,var(--foreground) 45%,transparent); }
.review-document-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px 26px; border-bottom:1px solid var(--border); }
.review-document-header h2 { font:500 22px/1.3 "Scene Poppins",sans-serif; margin:0 0 8px; }
.review-document-header p:last-child { font-size:12px; color:var(--muted-foreground); margin:0; }
.review-document-close { border:1px solid var(--border); background:var(--card); color:var(--foreground); padding:9px; border-radius:7px; display:flex; }
.review-document-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; }
.review-document-paper { background:var(--muted); min-width:0; padding:18px; }
.review-document-controls { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:12px; }
.review-document-controls>span { font-size:12px; font-variant-numeric:tabular-nums; }
.review-document-controls button { display:inline-flex; align-items:center; gap:6px; color:var(--primary); background:var(--card); border:1px solid var(--border); border-radius:6px; min-height:36px; padding:7px; font-size:12px; }
.review-document-controls button:disabled { opacity:.4; cursor:default; }
.review-document-controls a { margin-left:auto; }
.review-document-page-note { font-size:12px; color:var(--muted-foreground); margin:0 0 14px; }
.review-document-image { width:100%; overflow:auto; border:1px solid var(--border); }
.review-document-image img { display:block; width:100%; height:auto; }
.review-document-image[data-enlarged="true"] img { width:150%; max-width:none; }
.review-document-evidence { padding:24px; min-width:0; }
.review-document-evidence h3 { font-size:16px; margin:0 0 12px; font-weight:600; }
.review-document-evidence dl { margin:0 0 24px; }
.review-document-evidence dl>div { padding:12px 0; border-bottom:1px solid var(--border); }
.review-document-evidence dt { font-size:11px; color:var(--muted-foreground); }
.review-document-evidence dd { margin:4px 0 0; font-size:14px; font-weight:500; }
.review-document-evidence small { display:block; color:var(--muted-foreground); margin-top:4px; font-size:11px; font-weight:400; }
.review-document-evidence>p { font-size:13px; }
.review-document-note { border-left:2px solid var(--primary); padding-left:12px; color:var(--muted-foreground); }
.review-document-evidence .review-document-disclaimer { font-size:11px; color:var(--muted-foreground); margin-top:24px; }
.review-document-dialog button:focus-visible,.review-document-dialog a:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
@media(max-width:760px) {
  .review-document-dialog { width:calc(100vw - 16px); max-height:96dvh; }
  .review-document-header { padding:18px; }
  .review-document-header h2 { font-size:18px; }
  .review-document-layout { grid-template-columns:minmax(0,1fr); }
  .review-document-paper { padding:10px; }
  .review-document-evidence { padding:20px; }
}
.review-footer { display:flex; justify-content:space-between; gap:20px; padding:14px 34px; color:var(--muted-foreground); font-size:10px; }
.review-library { display:grid; grid-template-columns:290px minmax(0,1fr); max-width:1390px; margin:0 auto; min-height:calc(100vh - 170px); }
.review-component-list { border-right:1px solid var(--border); padding:36px 25px 35px 20px; }
.review-eyebrow { font-size:11px; letter-spacing:.045em; font-weight:600; color:var(--primary); margin:0 0 12px; }
.review-component-list h1 { font:500 25px/1.35 "Scene Poppins",sans-serif; letter-spacing:-.045em; margin:15px 0 25px; }
.review-component-list>button { display:flex; align-items:center; gap:12px; width:100%; border:0; background:transparent; border-radius:7px; padding:11px 12px; text-align:left; color:var(--muted-foreground); font-size:12px; }
.review-component-list>button>span { font-size:10px; opacity:.75; }
.review-component-list>button>svg { margin-left:auto; opacity:0; }
.review-component-list>button[aria-current="true"] { background:var(--accent); color:var(--primary); font-weight:600; }
.review-component-list>button[aria-current="true"]>svg { opacity:1; }
.review-component-detail { padding:44px 55px; min-width:0; }
.review-component-heading { display:flex; justify-content:space-between; gap:30px; align-items:start; }
.review-component-heading h2 { font-size:26px; font-weight:500; letter-spacing:-.04em; margin:8px 0; }
.review-component-heading p:not(.review-eyebrow) { font-size:13px; max-width:55ch; color:var(--muted-foreground); }
.review-theme-switch { display:flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--border); border-radius:6px; font-size:10px; padding:8px 10px; white-space:nowrap; color:var(--muted-foreground); }
.review-specimen { max-width:770px; margin:30px 0; padding:24px; background:var(--card); border:1px dashed var(--border); border-radius:13px; }
.review-specimen>.cc-card { max-width:700px; }
.review-specimen>.cc-briefing { padding:20px; }
.review-variants { display:flex; gap:6px; margin-top:18px; }
.review-component-notes { display:grid; grid-template-columns:1fr 1fr; gap:35px; padding-top:20px; border-top:1px solid var(--border); max-width:770px; }
.review-component-notes strong { font-size:12px; font-weight:600; }
.review-component-notes p { font-size:12px; color:var(--muted-foreground); max-width:45ch; }
.review-response-block { max-width:770px; margin-bottom:25px; padding:20px; border-left:2px solid var(--primary); background:var(--accent); font-size:13px; }
.review-response-block strong { font-size:11px; color:var(--primary); }
.review-response-block p { white-space:pre-line; }
.review-neutral { --primary:#384B61; --primary-foreground:#FFFFFF; --foreground:#263546; --card:#FFFFFF; --accent:#EDF1F7; --border:#CBD4DF; --muted:#F1F4F7; --muted-foreground:#546578; }
.review-brand,.review-script { max-width:1260px; margin:0 auto; padding:56px 40px; }
.review-brand>h1,.review-script-header h1 { font:500 40px/1.25 "Scene Poppins",sans-serif; letter-spacing:-.055em; margin:12px 0 20px; }
.review-brand-intro { max-width:660px; color:var(--muted-foreground); font-size:17px; line-height:1.6; }
.review-brand-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); gap:55px; margin-top:52px; }
.review-brand-layout h2 { font-weight:500; font-size:20px; letter-spacing:-.025em; }
.review-brand-layout>section>p { color:var(--muted-foreground); font-size:13px; max-width:64ch; }
.review-brand-logo { display:block; width:280px; margin:30px 0 36px; }
.review-swatches { display:grid; grid-template-columns:repeat(4,1fr); gap:20px 16px; }
.review-swatches article>div { height:68px; border-radius:8px; border:1px solid #173A2B12; margin-bottom:10px; }
.review-swatches strong,.review-swatches code { display:block; font-size:11px; }
.review-swatches strong { font-weight:600; }
.review-swatches code { font-size:10px; color:var(--muted-foreground); margin-top:4px; }
.review-swatches p { font-size:11px; color:var(--muted-foreground); }
.review-type { border-left:1px solid var(--border); padding-left:35px; padding-top:10px; }
.review-type h3 { font:500 33px/1.35 "Scene Poppins",sans-serif; letter-spacing:-.05em; margin:27px 0 17px; color:var(--primary); }
.review-type h4 { font-size:22px; font-weight:500; line-height:1.4; margin:50px 0 12px; }
.review-type-details { display:flex; flex-direction:column; gap:12px; font-size:22px; margin-top:45px; color:var(--muted-foreground); }
.review-principles { display:grid; grid-template-columns:1fr 1fr; gap:15px 35px; border-top:1px solid var(--border); margin:50px 0 25px; padding-top:25px; }
.review-principles p { display:flex; gap:15px; font-size:13px; margin:8px 0; }
.review-principles span { font-size:11px; font-weight:600; color:var(--primary); }
.review-script { max-width:1150px; }
.review-script-header { display:flex; justify-content:space-between; align-items:start; gap:30px; }
.review-script-header h1 { max-width:720px; font-size:36px; }
.review-script-header p:not(.review-eyebrow) { color:var(--muted-foreground); max-width:77ch; font-size:15px; }
.review-script-header .review-download { flex:none; }
.review-setting { margin:25px 0; font-size:12px; color:var(--muted-foreground); }
.review-cast { border-block:1px solid var(--border); padding:18px 0; font-size:13px; }
.review-cast summary { cursor:pointer; font-weight:600; color:var(--primary); }
.review-cast>div { margin-top:20px; }
.review-cast p,.review-cast li { color:var(--muted-foreground); margin:10px 0; }
.review-chapter { margin-top:55px; }
.review-chapter>header { display:flex; align-items:center; gap:20px; }
.review-chapter>header>span { font-size:32px; color:var(--primary); opacity:.65; font-weight:400; }
.review-chapter h2 { margin:3px 0 0; font-size:24px; font-weight:500; letter-spacing:-.035em; }
.review-chapter header p { margin:0; color:var(--muted-foreground); font-size:11px; }
.review-intent { font-size:13px; color:var(--muted-foreground); margin:16px 0 22px; }
.review-lines { border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.review-lines>div { display:grid; grid-template-columns:130px minmax(0,1fr); gap:26px; padding:18px 22px; border-bottom:1px solid var(--border); background:var(--card); }
.review-lines>div:last-child { border-bottom:0; }
.review-lines>div[data-mode="On screen"] { background:var(--accent); }
.review-lines>div[data-mode="Action"] { background:var(--muted); }
.review-lines strong { display:block; font-size:13px; font-weight:600; }
.review-lines span { display:block; color:var(--muted-foreground); font-size:10px; margin-top:3px; }
.review-lines p { margin:0; font-size:14px; line-height:1.65; }
.review-direction { display:flex; align-items:start; gap:12px; padding:18px 0; color:var(--muted-foreground); font-size:12px; }
.review-direction svg { flex:none; margin-top:2px; color:var(--primary); }
.review-direction strong { color:var(--foreground); font-weight:600; }
.review-direction p { margin:5px 0 8px; }
.review-direction small { font-size:10px; }
.review-outcome { display:flex; gap:12px; font-size:12px; color:var(--primary); border-bottom:1px solid var(--border); padding-bottom:20px; }
.review-outcome svg { flex:none; }
.review-script-notes { margin-top:40px; }
.review-script-notes h2 { font-size:20px; font-weight:500; }
.review-script-notes li { margin:12px 0; font-size:13px; color:var(--muted-foreground); }
.review-notice { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:150; display:flex; align-items:center; gap:12px; padding:12px 18px; background:var(--foreground); color:var(--card); border-radius:9px; max-width:calc(100% - 30px); box-shadow:0 5px 22px #173A2B25; font-size:12px; }
.review-notice button { border:0; background:transparent; color:inherit; font-size:19px; padding:0 5px; }
.review-skip { position:fixed; top:-70px; left:20px; z-index:200; background:var(--card); padding:10px 15px; border:2px solid var(--primary); border-radius:6px; }
.review-skip:focus { top:10px; }
.review-app button:focus-visible,.review-app a:focus-visible,.review-app summary:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
@media(max-width:1100px) {
  .review-nav>p { display:none; }
  .review-canvas-frame .scene-headless .v8-home__scroll-zone.scene-hl-scroll { padding:55px 25px 45px; }
  .review-canvas-frame .scene-headless .v8-home__right { width:260px; }
  .review-canvas-frame .cc-briefing h1 { font-size:28px; }
  .review-component-detail { padding:35px 25px; }
  .review-component-heading { flex-direction:column; gap:5px; }
}
@media(max-width:760px) {
  .review-header { height:68px; padding:0 18px; gap:14px; }
  .review-wordmark img { width:155px; }
  .review-title,.review-draft { display:none; }
  .review-header .review-download { margin-left:auto; }
  .review-nav { padding:0 18px; gap:22px; overflow:auto; white-space:nowrap; }
  .review-context { padding:10px 18px; align-items:start; }
  .review-reset { font-size:0; padding:8px; }
  .review-canvas-frame { margin:0 10px; height:840px; min-height:0; }
  .review-canvas-frame .scene-headless { zoom:.85; }
  .review-canvas-frame .scene-headless .v8-home__content { grid-template-columns:minmax(0,1fr); width:100%; gap:28px; }
  .review-canvas-frame .scene-headless .v8-home__left,.review-canvas-frame .scene-headless .v8-home__right { width:100%; flex:none; }
  .review-canvas-frame .scene-headless .v8-home__right { position:static; }
  .review-canvas-frame .scene-headless .v8-home__scroll-zone.scene-hl-scroll { padding:60px 18px 30px; }
  .review-canvas-frame .scene-headless .sa-bar-persistent { padding:10px 15px; }
  .review-canvas-frame .scene-headless .sa-chips-row { flex-wrap:wrap; }
  .review-canvas-frame .cc-card { padding:20px; }
  .review-canvas-frame .cc-briefing h1 { font-size:28px; }
  .review-footer { padding:16px 18px; flex-direction:column; gap:4px; }
  .review-library { grid-template-columns:1fr; }
  .review-component-list { border-right:0; border-bottom:1px solid var(--border); padding:22px 18px; display:flex; gap:8px; flex-wrap:wrap; }
  .review-component-list h1,.review-component-list>.review-eyebrow { display:none; }
  .review-component-list>button { width:auto; padding:7px 10px; border:1px solid var(--border); }
  .review-component-list>button>svg,.review-component-list>button>span { display:none; }
  .review-component-detail { padding:28px 18px; }
  .review-specimen { padding:12px; }
  .review-component-notes { grid-template-columns:1fr; gap:12px; }
  .review-brand,.review-script { padding:35px 22px; }
  .review-brand-layout { grid-template-columns:1fr; gap:35px; }
  .review-brand>h1,.review-script-header h1 { font-size:31px; }
  .review-type { padding-left:0; border:0; }
  .review-swatches { grid-template-columns:repeat(3,1fr); }
  .review-principles { grid-template-columns:1fr; }
  .review-script-header { flex-direction:column; gap:5px; }
  .review-lines>div { grid-template-columns:1fr; gap:7px; padding:16px; }
  .review-lines>div>div { display:flex; align-items:center; gap:10px; }
  .review-lines span { margin:0; }
}