/* =============================================================================
   vv.css — ViralVids FrontEnd Design System
   Parameterized HSL theme with relative hue/sat/lit offsets.
   Single file for the shell prototype — will split into SCSS partials later.
   ============================================================================= */

/* =============================================================================
   1. THEME CUSTOM PROPERTIES — HSL Parameterized
   All colors derive from a small set of base H/S/L values.
   To re-theme: change the base hue/sat/lit and everything shifts.
   ============================================================================= */

:root {
  /* ── Base accent (grape purple) ── */
  --hue-accent: 263;
  --sat-accent: 84%;
  --lit-accent: 58%;

  /* ── Secondary accent (teal) ── */
  --hue-teal: 174;
  --sat-teal: 72%;
  --lit-teal: 42%;

  /* ── Surface base hue — cool violet undertone ── */
  --hue-surface: 260;
  --sat-surface: 30%;

  /* ── Surface tiers — light default ── */
  --surface-0: hsl(var(--hue-surface), 20%, 96%);
  --surface-1: hsl(var(--hue-surface), 22%, 100%);
  --surface-2: hsl(var(--hue-surface), 18%, 94%);
  --surface-3: hsl(var(--hue-surface), 16%, 90%);

  /* ── Accent palette — deeper for contrast on white ── */
  --accent-900: hsl(var(--hue-accent), var(--sat-accent), 94%);
  --accent-800: hsl(var(--hue-accent), var(--sat-accent), 88%);
  --accent-700: hsl(var(--hue-accent), var(--sat-accent), 78%);
  --accent-600: hsl(var(--hue-accent), var(--sat-accent), 48%);
  --accent-500: hsl(var(--hue-accent), var(--sat-accent), var(--lit-accent));
  --accent-400: hsl(var(--hue-accent), calc(var(--sat-accent) - 10%), calc(var(--lit-accent) - 8%));
  --accent-300: hsl(var(--hue-accent), calc(var(--sat-accent) - 15%), calc(var(--lit-accent) - 16%));
  --accent-200: hsl(var(--hue-accent), calc(var(--sat-accent) - 20%), calc(var(--lit-accent) - 24%));
  --accent-100: hsl(var(--hue-accent), calc(var(--sat-accent) - 30%), 96%);

  /* ── Teal accent — derived ── */
  --teal-500: hsl(var(--hue-teal), var(--sat-teal), var(--lit-teal));
  --teal-400: hsl(var(--hue-teal), var(--sat-teal), calc(var(--lit-teal) + 12%));
  --teal-300: hsl(var(--hue-teal), calc(var(--sat-teal) - 10%), calc(var(--lit-teal) + 24%));

  /* ── Semantic — each has own hue, shared sat/lit pattern ── */
  --hue-success: 160;
  --hue-warning: 43;
  --hue-danger: 0;
  --hue-info: 217;
  --sat-semantic: 65%;
  --lit-semantic: 55%;

  --color-success: hsl(var(--hue-success), var(--sat-semantic), var(--lit-semantic));
  --color-warning: hsl(var(--hue-warning), var(--sat-semantic), var(--lit-semantic));
  --color-danger:  hsl(var(--hue-danger),  var(--sat-semantic), var(--lit-semantic));
  --color-info:    hsl(var(--hue-info),    var(--sat-semantic), var(--lit-semantic));

  /* ── Text — dark on light ── */
  --text-primary:  hsl(var(--hue-surface), 30%, 14%);
  --text-secondary: hsl(var(--hue-surface), 16%, 42%);
  --text-muted:    hsl(var(--hue-surface), 12%, 62%);
  --text-inverse:  hsl(var(--hue-surface), 10%, 96%);

  /* ── Border — accent-tinted, light ── */
  --border-color: hsl(var(--hue-accent), 24%, 84%);
  --border-subtle: hsl(var(--hue-accent), 14%, 90%);

  /* ── Topbar gradient — deep accent-hued ── */
  --topbar-base: #220e44;
  --topbar-end: #3a167b;

  /* ── Layout metrics ── */
  --app-margin: 28px;
  --panel-gap: 8px;
  --panel-pad: 24px;
  --panel-radius: 12px;
  --header-h: 56px;
  --sidebar-w: 260px;
  --tools-w: 300px;
  --status-h: 140px;

  /* ── Typography ── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
  --font-size-xs: 0.6875rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.8125rem;
  --font-size-lg: 0.9375rem;
  --font-size-xl: 1.125rem;
  --font-size-2xl: 1.375rem;

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ── Shadows — soft for light bg ── */
  --shadow-sm: 0 1px 3px hsla(var(--hue-accent), 20%, 40%, 0.08);
  --shadow-md: 0 4px 12px hsla(var(--hue-accent), 20%, 40%, 0.10);
  --shadow-lg: 0 8px 32px hsla(var(--hue-accent), 20%, 40%, 0.14);

  /* ── Z-index ── */
  --z-base: 0;
  --z-raised: 10;
  --z-splitter: 20;
  --z-overlay: 100;
  --z-modal: 200;
  --z-toast: 300;
}


/* =============================================================================
   2. RESET & BASE
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar styling — very subtle normally, visible on hover */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; border-radius: 3px; }
::-webkit-scrollbar-thumb {
  background: hsla(var(--hue-accent), 15%, 50%, 0.12);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsla(var(--hue-accent), var(--sat-accent), 50%, 0.4);
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: hsla(var(--hue-accent), 15%, 50%, 0.12) transparent;
}

/* =============================================================================
   3. APP SHELL — 2-row grid: topbar + body
   ============================================================================= */

.app-shell {
  height: 100vh;
  padding: var(--app-margin);
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
}

/* ── Topbar ── */
.topbar {
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 var(--panel-pad);
  background: linear-gradient(135deg, var(--topbar-base), var(--topbar-end));
  border: 1px solid hsla(var(--hue-accent), 50%, 30%, 0.4);
  border-radius: var(--panel-radius);
  flex-shrink: 0;
  gap: 16px;
}

.topbar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__logo-text {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent-300);
}

.topbar__nav {
  display: flex;
  gap: 2px;
  margin-left: 24px;
}

.topbar__nav-item {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: hsla(var(--hue-accent), 30%, 80%, 0.7);
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.topbar__nav-item:hover { color: #fff; background: hsla(var(--hue-accent), 50%, 50%, 0.2); }
.topbar__nav-item.is-active { color: var(--accent-300); background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.2); }

.topbar__spacer { flex: 1; }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar__icon-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid hsla(var(--hue-accent), 50%, 50%, 0.25);
  background: hsla(var(--hue-accent), 50%, 50%, 0.12);
  color: hsla(var(--hue-accent), 30%, 80%, 0.7);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.topbar__icon-btn:hover { color: #fff; border-color: hsla(var(--hue-accent), 60%, 60%, 0.4); background: hsla(var(--hue-accent), 50%, 50%, 0.2); }

.topbar__icon-btn { position: relative; }
.topbar__icon-btn--spin svg { animation: vv-spin 0.8s linear infinite; }
@keyframes vv-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.topbar__tooltip {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 0.7rem;
  white-space: nowrap;
  color: #fff;
  background: var(--surface-3, #2a2a3a);
  border: 1px solid hsla(var(--hue-accent), 50%, 50%, 0.3);
  border-radius: 6px;
  pointer-events: none;
  z-index: 1000;
}
.topbar__icon-btn:hover .topbar__tooltip { display: block; }

.topbar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--accent-500);
  border: 2px solid hsla(var(--hue-accent), 50%, 50%, 0.4);
  margin-left: 4px;
}

/* =============================================================================
   4. APP BODY — 5-column CSS Grid (sidebar | gap | middle | gap | tools)
   Middle column is 2-row grid (workspace + status)
   ============================================================================= */

.app-body {
  flex: 1;
  display: grid;
  grid-template-columns:
    var(--sidebar-w)
    var(--panel-gap)
    1fr
    var(--panel-gap)
    var(--tools-w);
  min-height: 0;
  gap: 0;
  transition: grid-template-columns 250ms ease;
}
/* Disable transitions during drag for smooth 60fps resize */
.app-body.is-dragging { user-select: none; cursor: col-resize; transition: none; }
.app-body.is-dragging-v { user-select: none; cursor: row-resize; }

/* ── Middle column — 2-row sub-grid ── */
.app-middle {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr var(--panel-gap) var(--status-h);
  min-height: 0;
  min-width: 0;
  transition: grid-template-rows 250ms ease;
}
/* Disable row transition during drag for smooth resize */
.app-middle.is-resizing { transition: none; }

.app-middle.status-hidden {
  grid-template-rows: 1fr var(--panel-gap) 48px;
}
.app-middle.status-hidden .splitter--h { display: none; }
.app-middle.status-hidden .status-host { min-height: 48px; max-height: 48px; overflow: hidden; }
.app-middle.status-hidden .status-host .vv-panel__body { display: none; }
.app-middle.status-hidden .status-host .vv-panel { border-radius: 8px; }

/* Status panel — full border radius all corners */
.status-host { overflow: hidden; min-height: 0; }
.status-host .vv-panel {
  border-radius: var(--panel-radius);
}

/* Workspace host — must allow shrinking when status grows */
.workspace-host { min-height: 0; overflow: hidden; }
.workspace-host .vv-panel__body { overflow-y: auto; }
.workspace-host .vv-panel__body::-webkit-scrollbar { width: 6px; height: 6px; }
.workspace-host .vv-panel__body::-webkit-scrollbar-track { background: transparent; border-radius: 3px; }
.workspace-host .vv-panel__body::-webkit-scrollbar-thumb {
  background: hsla(var(--hue-accent), 15%, 50%, 0.12);
  border-radius: 3px;
}
.workspace-host .vv-panel__body::-webkit-scrollbar-thumb:hover {
  background: hsla(var(--hue-accent), var(--sat-accent), 50%, 0.4);
}
.workspace-host .vv-panel__body > * { flex-shrink: 0; }


/* =============================================================================
   5. SPLITTER — drag handles between panels
   Each splitter occupies its own grid column/row (the gap).
   Indicator bar is centered via flexbox. Hit area extends beyond.
   ============================================================================= */

.splitter {
  position: relative;
  z-index: var(--z-splitter);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: col-resize;
  /* Fill the entire grid cell */
  width: 100%;
  height: 100%;
}
.splitter--h {
  cursor: row-resize;
}

/* Visual indicator — small bar centered in the gap */
.splitter::before {
  content: '';
  border-radius: 1px;
  background: var(--border-color);
  transition: background var(--transition-base), width var(--transition-base), height var(--transition-base);
  flex-shrink: 0;
}
.splitter:not(.splitter--h)::before { width: 2px; height: 32px; }
.splitter--h::before { width: 32px; height: 2px; }

.splitter:hover::before,
.splitter.is-active::before {
  background: var(--accent-500);
}
.splitter:hover:not(.splitter--h)::before,
.splitter.is-active:not(.splitter--h)::before { height: 48px; }
.splitter:hover.splitter--h::before,
.splitter.is-active.splitter--h::before { width: 48px; }

/* Expanded hit area — extends beyond the gap for easier grabbing */
.splitter::after {
  content: '';
  position: absolute;
}
.splitter:not(.splitter--h)::after { inset: 0 -4px; }
.splitter--h::after { inset: -4px 0; }

/* =============================================================================
   6. VV-PANEL — the ONE unified panel component
   Replaces: vv-p (pane) + vv-w (widget) + vv-w__container/vlayout/client/content/layout
   Structure: panel > panel__header + panel__body
   That's it. 2 levels. Done.
   ============================================================================= */

.vv-panel {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--panel-radius);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

/* ── Panel header ── */
.vv-panel__header {
  flex-shrink: 0;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-1);
}

.vv-panel__caption {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.vv-panel__header-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.vv-panel__header-action:hover { color: var(--text-primary); background: var(--surface-2); }

/* ── Panel body — the single content container ── */
.vv-panel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ── Workspace panel modifier — no outer border, bottom radii 0 ── */
.vv-panel--workspace {
  border: none;
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  background: transparent;
}
.vv-panel--workspace > .vv-panel__header {
  border-bottom: 1px solid var(--border-color);
}
.vv-panel--workspace > .vv-tabs {
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
/* =============================================================================
   7. UNIFIED TAB SYSTEM � .vv-tabs / .vv-tabs__item
   One base style for ALL tabs. Override only when situation demands.
   ============================================================================= */

/* Base tab strip */
.vv-tabs {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 38px;
  padding: 0;
  background: hsl(261.4, 100%, 97.3%);
  border-bottom: 1px solid var(--border-color);
}
[data-theme="dark"] .vv-tabs {
  background: var(--surface-1);
}

/* Base tab item � full height of strip, visible hover + active */
.vv-tabs__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px;
  height: 100%;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all var(--transition-fast);
}
.vv-tabs__item:hover {
  color: var(--text-primary);
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.08);
}
.vv-tabs__item.is-active {
  color: var(--accent-400);
  font-weight: 600;
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.12);
  border-bottom-color: var(--accent-400);
}

/* Tab notification dot — pulses when new results arrive */
.vv-tabs__item--notify { position: relative; }
.vv-tabs__item--notify::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
}

/* Sidebar scope override � same height, tabs fill width, bg-color active */
.vv-tabs--scope {
  padding: 0 8px;
  gap: 4px;
}
.vv-tabs--scope > .vv-tabs__item {
  flex: 1;
  border-bottom: 2px solid transparent;
}

/* Numbered circle inside tab (stage tabs) */
.vv-tabs__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.15);
  border: 2px solid hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.5);
  color: var(--accent-400);
}

/* Tab content � fills remaining space below strip */
.vv-tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* =============================================================================
   8. SIDEBAR — nav tree host
   ============================================================================= */

/* ── Nav tree ── */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  isolation: isolate;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: hsla(var(--hue-accent), 15%, 50%, 0.12);
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: hsla(var(--hue-accent), var(--sat-accent), 50%, 0.4);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 120ms;
  font-size: var(--font-size-base);
  font-weight: 450;
}
.nav-item:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-item.is-active,
.nav-item.is-expanded {
  color: var(--accent-300);
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.15);
}

.nav-item__icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  flex-shrink: 0;
}
.nav-item.is-active .nav-item__icon,
.nav-item.is-expanded .nav-item__icon { opacity: 1; }

.nav-item__badge {
  margin-left: auto;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.2);
  color: var(--accent-400);
}

/* ── Nav children (indented) ── */
.nav-children { padding-left: 20px; }

.nav-child {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  transition: all 120ms;
  position: relative;
}
.nav-child::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.2);
}
.nav-child:hover { color: var(--text-secondary); background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.06); }
.nav-child.is-active { color: var(--accent-400); }


/* =============================================================================
   9. CONTENT AREA — breadcrumb, page heading, scrollable content, panels
   All siblings. No nesting beyond panel > panel-head + panel-body.
   ============================================================================= */

.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
  min-width: 0;
  min-height: 0;
}

/* ── Breadcrumb bar ── */
.vv-breadcrumb { display: flex; align-items: center; gap: 6px; }
.vv-breadcrumb__seg { font-size: var(--font-size-base); color: var(--text-primary); }
.vv-breadcrumb__sep { font-size: 11px; color: var(--text-muted); }

.breadcrumb-bar {
  display: flex;
  align-items: center;
  padding: 12px var(--panel-pad);
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--panel-radius);
  flex-shrink: 0;
  gap: 6px;
  font-size: var(--font-size-base);
}
.breadcrumb-bar__item { color: var(--text-secondary); }
.breadcrumb-bar__sep { color: var(--text-muted); font-size: 11px; }
.breadcrumb-bar__current { color: var(--text-primary); font-weight: 500; }

/* ── Page heading — accent-hued, intensity close to panel header ── */
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--panel-pad);
  background: hsl(261.4, 100%, 97.3%);
  border: 1px solid var(--border-color);
  border-top-color: transparent;
  border-radius: 0 0 var(--panel-radius) var(--panel-radius);
  flex-shrink: 0;
}

.page-heading__left { display: flex; align-items: center; gap: 14px; }

.page-heading__icon {
  width: 44px;
  height: 44px;
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-heading__title { font-size: 1.25rem; font-weight: 700; color: hsl(var(--hue-accent), var(--sat-accent), 25%); }
.page-heading__subtitle { font-size: 0.8rem; color: hsl(var(--hue-accent), 40%, 45%); margin-top: 2px; }

.page-heading__actions { display: flex; gap: 8px; }

/* ── Scrollable content region ── */
.content-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
  padding-bottom: var(--panel-gap);
}
.content-scroll::-webkit-scrollbar { width: 6px; }
.content-scroll::-webkit-scrollbar-thumb {
  background: hsla(var(--hue-accent), 15%, 50%, 0.12);
  border-radius: 3px;
}
.content-scroll::-webkit-scrollbar-thumb:hover {
  background: hsla(var(--hue-accent), var(--sat-accent), 50%, 0.4);
}

/* ── Content panel (inside scroll) ── */
.content-panel {
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--panel-radius);
  overflow: hidden;
  flex-shrink: 0;
}

.content-panel__head {
  padding: 14px var(--panel-pad);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-panel__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-300);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.content-panel__count {
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.2);
  color: var(--accent-400);
}

.content-panel__body { padding: var(--panel-pad); }

/* =============================================================================
   10. CARDS — campaign cards, stat cards, product cards
   ============================================================================= */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.card {
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
  transition: all var(--transition-fast);
  cursor: pointer;
}
.card:hover { border-color: var(--accent-600); background: var(--surface-3); }

.card__progress {
  height: 3px;
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.15);
  border-radius: 2px;
  margin-bottom: 12px;
  overflow: hidden;
}
.card__progress-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-500), var(--accent-400));
}

.card__meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.card__status { font-size: 11px; font-weight: 500; display: flex; align-items: center; gap: 5px; }
.card__pct { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.card__title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.card__desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.5; }
.card__tags { display: flex; gap: 5px; margin-bottom: 12px; }
.card__footer { display: flex; justify-content: space-between; align-items: center; }
.card__date { font-size: 11px; color: var(--text-muted); }

/* Status dots — semantic hue-based */
.status-dot {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.status-dot--active  { background: var(--color-success); }
.status-dot--review  { background: var(--color-warning); }
.status-dot--draft   { background: var(--color-info); }

/* Tags — accent-tinted */
.tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.tag--accent  { background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.2); color: var(--accent-400); }
.tag--success { background: hsla(var(--hue-success), var(--sat-semantic), var(--lit-semantic), 0.15); color: var(--color-success); }
.tag--info    { background: hsla(var(--hue-info), var(--sat-semantic), var(--lit-semantic), 0.15); color: var(--color-info); }

/* Stat cards */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-card {
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
}
.stat-card__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; }
.stat-card__value { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.stat-card__note { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* Avatar stack */
.avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  border: 2px solid var(--surface-1);
  margin-left: -6px;
}
.avatar:first-child { margin-left: 0; }

/* =============================================================================
   11. BUTTONS
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn--ghost {
  background: hsla(0, 0%, 100%, 0.06);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--accent-600); }
.btn--accent { background: var(--accent-500); color: #fff; }
.btn--accent:hover { background: var(--accent-600); }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.btn--xs { padding: 3px 6px; font-size: 11px; }
.btn--outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.btn--outline:hover {
  background: var(--surface-2);
  border-color: var(--accent-500);
  color: var(--accent-500);
}
.btn--outline:active {
  background: var(--accent-500);
  color: #fff;
  border-color: var(--accent-500);
}

/* =============================================================================
   12. TOOLS PANEL — AI Chat, Analytics, Feedback tabs
   ============================================================================= */

.tools-panel {
  min-width: 200px;
  width: 100%;
  height: 100%;
}

/* ── AI Chat ── */
.ai-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ai-chat__messages::-webkit-scrollbar-thumb {
  background: hsla(var(--hue-accent), 15%, 50%, 0.12);
}
.ai-chat__messages::-webkit-scrollbar-thumb:hover {
  background: hsla(var(--hue-accent), var(--sat-accent), 50%, 0.4);
}

.ai-msg { display: flex; gap: 10px; align-items: flex-start; }
.ai-msg--user { flex-direction: row-reverse; }

.ai-msg__avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ai-msg__avatar--ai {
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.1);
  border: 1px solid hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.2);
}
.ai-msg__avatar--user {
  background: var(--accent-500);
  color: white;
  font-size: 12px;
  font-weight: 700;
}

.ai-msg__bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: var(--font-size-base);
  line-height: 1.55;
}
.ai-msg__bubble--ai {
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}
.ai-msg__bubble--user {
  background: linear-gradient(135deg,
    hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.2),
    hsla(var(--hue-accent), calc(var(--sat-accent) - 20%), calc(var(--lit-accent) + 15%), 0.15));
  border: 1px solid hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.2);
  color: var(--text-primary);
}
.ai-msg__bubble p { margin: 0; }

/* AI insight card */
.ai-insight {
  margin-top: 10px;
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.06);
  border: 1px solid hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.15);
  border-radius: 6px;
  overflow: hidden;
}
.ai-insight__header {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  font-size: 12px; font-weight: 600;
  color: var(--accent-400);
  border-bottom: 1px solid hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.1);
}
.ai-insight__body { padding: 8px 12px; }
.ai-insight__item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 12px; color: var(--text-secondary);
}
.ai-insight__rank { font-size: 10px; font-weight: 700; color: var(--accent-400); min-width: 20px; }

/* Chat input */
.ai-chat__input {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--surface-2);
  flex-shrink: 0;
}
.ai-chat__input-field {
  flex: 1;
  padding: 9px 14px;
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  transition: border-color var(--transition-fast);
}
.ai-chat__input-field::placeholder { color: var(--text-muted); }
.ai-chat__input-field:focus { outline: none; border-color: var(--accent-500); }

.ai-chat__send-btn {
  width: 38px; height: 38px;
  border-radius: 6px;
  background: var(--accent-500);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.ai-chat__send-btn:hover { background: var(--accent-600); }

/* =============================================================================
   13. STATUS PANEL — messages + log tabs
   ============================================================================= */

.status-messages {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  padding: 8px 12px;
  overflow-y: auto;
}

.status-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle);
  line-height: 1.5;
}
.status-row__ts { color: var(--text-muted); flex-shrink: 0; }
.status-row__sep { color: var(--text-muted); flex-shrink: 0; }
.status-row__action { color: var(--text-secondary); flex-shrink: 0; }
.status-row--info .status-row__text { color: var(--color-info); }
.status-row--success .status-row__text { color: var(--color-success); }
.status-row--warning .status-row__text { color: var(--color-warning); }
.status-row--error .status-row__text { color: var(--color-danger); }

/* =============================================================================
   14. FORM ELEMENTS — for content pages (campaign stages etc.)
   ============================================================================= */

.vv-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.vv-field { display: flex; flex-direction: column; gap: 4px; }

.vv-field__label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
}
.vv-field__label--required::after {
  content: ' *';
  color: var(--color-danger);
}

.vv-field__input,
.vv-field__select,
.vv-field__textarea {
  padding: 8px 12px;
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  transition: border-color var(--transition-fast);
}
.vv-field__input:focus,
.vv-field__select:focus,
.vv-field__textarea:focus {
  outline: none;
  border-color: var(--accent-500);
}
.vv-field__input::placeholder,
.vv-field__textarea::placeholder { color: var(--text-muted); }
.vv-field__input:disabled,
.vv-field__select:disabled,
.vv-field__textarea:disabled { opacity: 0.5; cursor: not-allowed; }

.vv-field__hint {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.vv-field__tier-badge {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
}
.vv-field__tier-badge--basic {
  background: hsla(var(--hue-teal), var(--sat-teal), var(--lit-teal), 0.15);
  color: var(--teal-400);
}
.vv-field__tier-badge--advanced {
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.15);
  color: var(--accent-400);
}

/* Section label inside stage body */
.vv-section-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--accent-300);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 0 8px;
}

/* =============================================================================
   15. COLLAPSE HOSTS — sidebar and tools collapse behavior
   ============================================================================= */

.sidebar-host {
  width: 100%; height: 100%; overflow: hidden;
  min-width: 180px;
  max-width: 400px;
  transition: min-width 250ms ease;
}
.sidebar-host .vv-panel__body { transition: opacity 200ms ease; }
.sidebar-host.is-collapsed .vv-panel__caption { display: none; }
.sidebar-host.is-collapsed .vv-panel__header img { display: none; }
.sidebar-host.is-collapsed .vv-panel__header {
  padding: 0;
  justify-content: center;
  border-bottom: none;
}
.sidebar-host.is-collapsed .vv-panel {
  border-radius: 8px;
}
.sidebar-host.is-collapsed .vv-panel__body {
  opacity: 0;
  pointer-events: none;
}

.tools-host {
  width: 100%; height: 100%; overflow: hidden;
  min-width: 200px;
  max-width: 720px;
  transition: min-width 250ms ease;
}
.tools-host .vv-panel__body { transition: opacity 200ms ease; }
.tools-host.is-collapsed .vv-panel__caption { display: none; }
.tools-host.is-collapsed .vv-panel__header {
  padding: 0;
  justify-content: center;
  border-bottom: none;
}
.tools-host.is-collapsed .vv-panel {
  border-radius: 8px;
  min-width: 0;
}
.tools-host.is-collapsed .vv-panel__body {
  opacity: 0;
  pointer-events: none;
}

/* =============================================================================
   16. UTILITY
   ============================================================================= */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Concept label — removed */

/* =============================================================================
   17. CUSTOM SCROLLBAR (JS-driven overlay, non-destructive)
   Applied to elements with class "vv-scrollable". JS appends track+thumb to
   document.body as fixed-position overlays — never inside the scroll container.
   This avoids the track scrolling with content.
   ============================================================================= */

.vv-scroll-track {
  position: fixed;
  width: 6px;
  z-index: var(--z-overlay);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.vv-scroll-track.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.vv-scroll-thumb {
  position: absolute;
  right: 0;
  width: 6px;
  min-height: 24px;
  border-radius: 3px;
  background: hsla(var(--hue-accent), 15%, 50%, 0.12);
  cursor: pointer;
  transition: background 150ms ease, width 150ms ease;
}
.vv-scroll-thumb:hover,
.vv-scroll-thumb.is-dragging {
  background: hsla(var(--hue-accent), var(--sat-accent), 50%, 0.4);
  width: 8px;
}

/* Hide native scrollbar on custom-scrolled elements */
.vv-scrollable {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.vv-scrollable::-webkit-scrollbar { display: none; }

/* =============================================================================
   18. DARK THEME
   Same hue/sat structure, inverted lightness. Applied via data-theme="dark"
   on <html>. Light is the default — dark is the alternate.
   ============================================================================= */

[data-theme="dark"] {
  /* ── Surface tiers (dark base) ── */
  --surface-0: hsl(var(--hue-surface), var(--sat-surface), 7%);
  --surface-1: hsl(var(--hue-surface), var(--sat-surface), 10%);
  --surface-2: hsl(var(--hue-surface), var(--sat-surface), 13%);
  --surface-3: hsl(var(--hue-surface), var(--sat-surface), 17%);

  /* ── Text — light on dark ── */
  --text-primary:  hsl(var(--hue-surface), 10%, 91%);
  --text-secondary: hsl(var(--hue-surface), 10%, 65%);
  --text-muted:    hsl(var(--hue-surface), 8%, 45%);
  --text-inverse:  hsl(var(--hue-surface), 30%, 14%);

  /* ── Borders — dark, accent-tinted ── */
  --border-color: hsl(var(--hue-accent), 18%, 22%);
  --border-subtle: hsl(var(--hue-accent), 12%, 16%);

  /* ── Accent palette — brighter for contrast on dark ── */
  --accent-900: hsl(var(--hue-accent), var(--sat-accent), 15%);
  --accent-800: hsl(var(--hue-accent), var(--sat-accent), 22%);
  --accent-700: hsl(var(--hue-accent), var(--sat-accent), 35%);
  --accent-600: hsl(var(--hue-accent), var(--sat-accent), 48%);
  --accent-500: hsl(var(--hue-accent), var(--sat-accent), var(--lit-accent));
  --accent-400: hsl(var(--hue-accent), calc(var(--sat-accent) - 5%), calc(var(--lit-accent) + 8%));
  --accent-300: hsl(var(--hue-accent), calc(var(--sat-accent) - 10%), calc(var(--lit-accent) + 16%));
  --accent-200: hsl(var(--hue-accent), calc(var(--sat-accent) - 15%), calc(var(--lit-accent) + 24%));
  --accent-100: hsl(var(--hue-accent), calc(var(--sat-accent) - 25%), 18%);

  /* ── Shadows — stronger for dark bg ── */
  --shadow-sm: 0 1px 3px hsla(0, 0%, 0%, 0.25);
  --shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.35);
  --shadow-lg: 0 8px 32px hsla(0, 0%, 0%, 0.45);
}

/* Dark theme — page heading bg */
[data-theme="dark"] .page-heading {
  background: hsl(262.5, 25.8%, 12.2%);
}

/* Dark theme — scrollbar thumb (subtle on dark surfaces) */
[data-theme="dark"] .vv-scroll-thumb {
  background: hsla(var(--hue-accent), 15%, 60%, 0.15);
}
[data-theme="dark"] .vv-scroll-thumb:hover,
[data-theme="dark"] .vv-scroll-thumb.is-dragging {
  background: hsla(var(--hue-accent), var(--sat-accent), 55%, 0.45);
}

/* Dark theme — native scrollbar fallback */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: hsla(var(--hue-surface), 10%, 8%, 0.5);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: hsla(var(--hue-accent), 15%, 60%, 0.15);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: hsla(var(--hue-accent), var(--sat-accent), 55%, 0.45);
}
[data-theme="dark"] .vv-stage-group {
  background: hsla(270, 8.3%, 4.7%, 0.25);
}
[data-theme="dark"] * {
  scrollbar-color: hsla(var(--hue-accent), 15%, 60%, 0.15) hsla(var(--hue-surface), 10%, 8%, 0.5);
}

/* Dark theme — user bubble */
[data-theme="dark"] .ai-msg__bubble--user {
  background: linear-gradient(135deg,
    hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.2),
    hsla(var(--hue-accent), calc(var(--sat-accent) - 20%), calc(var(--lit-accent) + 15%), 0.15));
  border-color: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.2);
}

/* Dark theme — ghost button */
[data-theme="dark"] .btn--ghost {
  background: hsla(0, 0%, 100%, 0.06);
}


/* =============================================================================
   19. NAV TREE � recursive tree component (.vv-nav__)
   Mirrors the *.App nav tree styling, adapted to HSL theme variables.
   ============================================================================= */

.vv-nav__node {
  display: flex;
  flex-direction: column;
}

.vv-nav__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast);
}
.vv-nav__row:hover {
  background: var(--surface-2);
}
.vv-nav__row:hover .vv-nav__icon { color: var(--text-primary); opacity: 1; }
.vv-nav__row:hover .vv-nav__label { color: var(--text-primary); }
.vv-nav__row:hover .vv-nav__chevron { color: var(--text-primary); opacity: 0.7; }

.vv-nav__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  opacity: 0.5;
  cursor: pointer;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.vv-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.6;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.vv-nav__label {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  transition: color var(--transition-fast);
}
.vv-nav__label--group {
  cursor: pointer;
}

.vv-nav__children {
  display: flex;
  flex-direction: column;
}

/* -- Active path: chevron gets accent pill with white stroke -- */
.vv-nav__chevron.is-on-path {
  background: var(--accent-500);
  color: #fff;
  border-radius: 4px;
  opacity: 1;
  position: relative;
  overflow: visible;
}

/* -- Connector lines on chevron icons via pseudo-elements -- */
/* Color: #87cdde, uniform 2px thickness */

/* ::before = L-shape entering from middle-left (mid + last nodes) */
.vv-nav__chevron.is-path-mid::before,
.vv-nav__chevron.is-path-last::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 50%;
  width: 9px;
  height: calc(50% + 10px);
  border-left: 2px solid #87cdde;
  border-bottom: 2px solid #87cdde;
  border-bottom-left-radius: 6px;
  pointer-events: none;
}

/* ::after = vertical line from bottom-middle going down (first + mid) */
.vv-nav__chevron.is-path-first::after,
.vv-nav__chevron.is-path-mid::after {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: 100%;
  width: 2px;
  height: 14px;
  background: #87cdde;
  pointer-events: none;
}

/* -- Vertical pass-through on sibling nodes before the on-path child -- */
/* Applied to .vv-nav__node so it covers the row AND any expanded subtree */
.vv-nav__node.is-path-passthrough {
  position: relative;
}
.vv-nav__node.is-path-passthrough::before {
  content: "";
  position: absolute;
  left: var(--vert-left, 15px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: #87cdde;
  pointer-events: none;
}

/* -- Leaf node on the active path -- */
.vv-nav__row.is-path-leaf {
  position: relative;
}

/* Leaf endpoint icon: highlighted like an expander + L-connector */
.vv-nav__icon.is-path-endpoint {
  background: var(--accent-500);
  color: #fff !important;
  border-radius: 4px;
  opacity: 1 !important;
  position: relative;
  overflow: visible;
}
.vv-nav__icon.is-path-endpoint svg {
  stroke: #fff;
}
.vv-nav__icon.is-path-endpoint::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 50%;
  width: 9px;
  height: calc(50% + 10px);
  border-left: 2px solid #87cdde;
  border-bottom: 2px solid #87cdde;
  border-bottom-left-radius: 6px;
  pointer-events: none;
}

/* -- Selected node � any active row regardless of children -- */
.vv-nav__row.is-active {
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.15);
  border-radius: 3px;
}
.vv-nav__row.is-active .vv-nav__label {
  color: var(--accent-400);
  font-weight: 600;
}
.vv-nav__row.is-active .vv-nav__icon {
  color: var(--accent-400);
  opacity: 1;
}


/* =============================================================================
   VV-PREFIXED PAGE STYLES � used by ported reference app pages
   ============================================================================= */

/* -- Page heading � top of content page, below tabstrip -- */
.vv-page-heading {
  padding: var(--panel-pad);
  background: hsl(261.4, 100%, 97.3%);
  border: 1px solid var(--border-color);
  border-top-color: transparent;
  border-radius: 0 0 var(--panel-radius) var(--panel-radius);
  flex-shrink: 0;
}
.vv-page-heading__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: hsl(var(--hue-accent), var(--sat-accent), 25%);
  margin: 0;
}
.vv-page-heading__subtitle {
  font-size: 0.8rem;
  color: hsl(var(--hue-accent), 40%, 45%);
  margin: 4px 0 0;
}
.vv-page-heading__breadcrumb { margin-bottom: 6px; }

[data-theme="dark"] .vv-page-heading {
  background: hsl(262.5, 25.8%, 12.2%);
}
[data-theme="dark"] .vv-page-heading__title {
  color: hsl(var(--hue-accent), calc(var(--sat-accent) - 10%), calc(var(--lit-accent) + 16%));
}
[data-theme="dark"] .vv-page-heading__subtitle {
  color: var(--text-secondary);
}

/* -- Page section � content sections, all 4 corners rounded -- */
.vv-page-section {
  padding: var(--panel-pad);
  background: hsl(261.4, 100%, 97.3%);
  border: 1px solid var(--border-color);
  border-radius: var(--panel-radius);
  flex-shrink: 0;
  margin-top: 24px;
}
.vv-page-section__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: hsl(var(--hue-accent), var(--sat-accent), 25%);
  margin: 0;
}
.vv-page-section__subtitle {
  font-size: 0.8rem;
  color: hsl(var(--hue-accent), 40%, 45%);
  margin: 4px 0 0;
}
.vv-page-section__hero-subtitle {
  font-size: 0.8rem;
  color: hsl(var(--hue-accent), 40%, 45%);
  margin: 0 0 4px;
}
/* Section with hero-subtitle sits adjacent to hero � no top gap, no top corners */
.vv-page-section:has(.vv-page-section__hero-subtitle) {
  border-radius: 0 0 var(--panel-radius) var(--panel-radius);
  margin-top: 0;
}
.vv-page-section__hero-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: hsl(var(--hue-accent), var(--sat-accent), 25%);
  margin: 0;
}
[data-theme="dark"] .vv-page-section__hero-heading {
  color: hsl(var(--hue-accent), calc(var(--sat-accent) - 10%), calc(var(--lit-accent) + 16%));
}

[data-theme="dark"] .vv-page-section {
  background: hsl(262.5, 25.8%, 12.2%);
}
[data-theme="dark"] .vv-page-section__title {
  color: hsl(var(--hue-accent), calc(var(--sat-accent) - 10%), calc(var(--lit-accent) + 16%));
}
[data-theme="dark"] .vv-page-section__subtitle {
  color: var(--text-secondary);
}
[data-theme="dark"] .vv-page-section__hero-subtitle {
  color: var(--text-secondary);
}

/* -- Card grid -- */
.vv-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  padding: 0.75rem 1.5rem;
}
.vv-card-grid--narrow {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.vv-card-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* -- Card -- */
.vv-card {
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.vv-card--clickable { cursor: pointer; }
.vv-card--clickable:hover {
  border-color: var(--accent-500);
  background: var(--surface-3);
}

.vv-card__icon {
  color: var(--accent-400);
  margin-bottom: 4px;
}
.vv-card__heading {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.vv-card__text {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
}
.vv-card__meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: auto;
}
.vv-card__value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

/* Card variants */
.vv-card--summary {
  text-align: center;
  align-items: center;
}
.vv-card--summary .vv-card__icon { color: var(--accent-400); }

.vv-card__badge {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  align-self: flex-start;
  background: var(--surface-3);
  color: var(--text-secondary);
}

/* -- Badge -- */
.vv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-secondary);
}
.vv-badge--active { background: hsla(var(--hue-success, 140), 60%, 45%, 0.15); color: hsl(var(--hue-success, 140), 60%, 35%); }
.vv-badge--warning { background: hsla(var(--hue-warning, 38), 60%, 45%, 0.15); color: hsl(var(--hue-warning, 38), 60%, 35%); }
.vv-badge--info { background: hsla(var(--hue-info, 210), 60%, 45%, 0.15); color: hsl(var(--hue-info, 210), 60%, 35%); }
.vv-badge--neutral { background: var(--surface-3); color: var(--text-secondary); }

/* -- Campaign detail -- */
.vv-campaign-header__main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vv-campaign-header__name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.vv-campaign-header__badges {
  display: flex;
  gap: 6px;
}

/* Stage tabs variant � top-rounded, attaches to panel below */
.vv-tabs--stage {
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  border: 1px solid var(--border-color);
  border-bottom: none;
  padding: 0 var(--panel-pad);
  overflow-x: auto;
}

/* Stage content panel � attached to tabs above */
.vv-stage-panel {
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 var(--panel-radius) var(--panel-radius);
  padding: var(--panel-pad);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Rounded field groups inside stage panel */
.vv-stage-group {
  background: hsla(255, 20%, 96.1%, 0.25);
  border: 1px solid var(--border-color);
  border-radius: var(--panel-radius);
  padding: var(--panel-pad);
}
.vv-stage-group__title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

/* Collapsible section toggle */
.vv-collapse-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  color: var(--text-primary);
  width: 100%;
}
.vv-collapse-toggle:hover {
  opacity: 0.8;
}
.vv-collapse-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.vv-collapse-toggle .vv-stage-group__title {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* 2-col form grid inside stage groups */
.vv-stage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}

/* Stage form fields */
.vv-field { display: flex; flex-direction: column; gap: 4px; }
.vv-field__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.vv-field__input,
.vv-field__select,
.vv-field__textarea {
  font-size: 0.8rem;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: inherit;
}
.vv-field__input:disabled,
.vv-field__select:disabled,
.vv-field__textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.vv-field__input:focus,
.vv-field__select:focus,
.vv-field__textarea:focus {
  outline: none;
  border-color: var(--accent-400);
  box-shadow: 0 0 0 2px hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.15);
}
.vv-field__textarea { resize: vertical; min-height: 60px; }
.vv-field__hint {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Info box inside stage */
.vv-stage-info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.06);
  border: 1px solid hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.2);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.vv-stage-info-box svg { flex-shrink: 0; margin-top: 2px; color: var(--accent-400); }

/* Feedback entries */
.vv-stage-feedback {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.vv-stage-feedback__entry {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.vv-stage-feedback__meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.vv-stage-feedback__text {
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.5;
}

/* -- Content container -- */
.vv-content-container {
  padding: 0 1.5rem;
}

/* =============================================================================
   CONFIG / FORM COMPONENTS � used by SystemConfigure, Preferences, TenantOptions
   ============================================================================= */

/* Breadcrumb back button */
.vv-breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.vv-breadcrumb-back:hover { color: var(--accent-400); }

/* Alert banner */
.vv-sys-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 16px var(--panel-pad);
  border-radius: 8px;
  font-size: 0.8rem;
}
.vv-sys-alert--success {
  background: hsla(140, 50%, 45%, 0.1);
  border: 1px solid hsla(140, 50%, 45%, 0.3);
  color: hsl(140, 50%, 30%);
}
[data-theme="dark"] .vv-sys-alert--success { color: hsl(140, 50%, 65%); }
[data-theme="dark"] .vv-config-group { background: var(--surface-2); }
.vv-sys-alert > span { flex: 1; }

/* Config group � collapsible section with rounded border */
.vv-config-group {
  background: hsl(0, 0%, 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--panel-radius);
  margin: 16px var(--panel-pad);
  overflow: hidden;
}
.vv-config-group__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}
.vv-config-group__header:hover { background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.04); }
.vv-config-group__chevron {
  flex-shrink: 0;
  transition: transform 150ms ease;
  color: var(--text-muted);
}
.vv-config-group.is-expanded > .vv-config-group__header > .vv-config-group__chevron {
  transform: rotate(90deg);
}
.vv-config-group__title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vv-config-group__count {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.vv-config-group__body {
  border-top: 1px solid var(--border-color);
  padding: 8px 0;
}

/* Config entry � single field row */
.vv-config-entry {
  padding: 10px 16px;
}
.vv-config-entry + .vv-config-entry {
  border-top: 1px solid var(--border-color);
}
.vv-config-entry.is-disabled { opacity: 0.5; pointer-events: none; }
.vv-config-entry__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.vv-config-entry__label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
}
.vv-config-entry__description {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0 0 6px 0;
}
.vv-config-group__body > .vv-config-entry__description {
  padding: 0 16px;
}
.vv-config-entry__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vv-config-entry__field input,
.vv-config-entry__field select,
.vv-config-entry__field textarea {
  font-size: 0.8rem;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: inherit;
  max-width: 400px;
}
.vv-config-entry__field input:focus,
.vv-config-entry__field select:focus,
.vv-config-entry__field textarea:focus {
  outline: none;
  border-color: var(--accent-400);
  box-shadow: 0 0 0 2px hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.15);
}
.vv-config-entry__field textarea { resize: vertical; min-height: 60px; }
.vv-config-entry__default {
  font-size: 0.68rem;
  color: var(--text-muted);
}
.vv-config-entry__browse-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.vv-config-entry__browse-row input { flex: 1; }

/* Change policy badges */
.vv-change-policy {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vv-change-policy--hot { background: hsla(140, 50%, 45%, 0.12); color: hsl(140, 50%, 35%); }
.vv-change-policy--reboot { background: hsla(38, 60%, 45%, 0.12); color: hsl(38, 60%, 35%); }
.vv-change-policy--maintenance { background: hsla(210, 60%, 45%, 0.12); color: hsl(210, 60%, 35%); }
.vv-change-policy--locked { background: hsla(0, 50%, 45%, 0.12); color: hsl(0, 50%, 40%); }

/* Service badges */
.vv-services-badge {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.vv-services-badge--configured    { background: hsla(140, 50%, 45%, 0.12); color: hsl(140, 50%, 35%); }
.vv-services-badge--configured-sm { background: hsla(140, 50%, 45%, 0.12); color: hsl(140, 50%, 35%); }
.vv-services-badge--not-configured    { background: hsla(0, 0%, 50%, 0.12); color: var(--text-muted); }
.vv-services-badge--not-configured-sm { background: hsla(0, 0%, 50%, 0.12); color: var(--text-muted); }
.vv-services-badge--auth-sm { background: hsla(280, 50%, 45%, 0.12); color: hsl(280, 50%, 40%); }
.vv-services-badge--default { background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.15); color: var(--accent-400); }

/* Service provider links */
.vv-services-provider__links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 16px 8px;
}
.vv-services-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--accent-400);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.vv-services-link:hover { opacity: 0.8; text-decoration: underline; }

/* Service providers container */
.vv-services-providers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 1.5rem;
}

/* Toggle switch */
.vv-services-provider__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.vv-services-provider__toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-400);
}

/* Footer with action buttons */
.vv-services-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px var(--panel-pad);
}

/* Buttons */
.vv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
.vv-btn--primary {
  background: var(--accent-400);
  color: #fff;
  border-color: var(--accent-400);
}
.vv-btn--primary:hover { filter: brightness(1.1); }
.vv-btn--secondary {
  background: var(--surface-1);
  color: var(--text-secondary);
}
.vv-btn--secondary:hover { background: var(--surface-2); }
.vv-btn--sm { padding: 4px 10px; font-size: 0.72rem; }

/* Icon button (dismiss etc) */
.vv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
}
.vv-icon-btn:hover { color: var(--text-primary); background: var(--surface-2); }

/* Folder explorer */
.vv-folder-explorer {
  margin: 12px var(--panel-pad);
  border: 1px solid var(--border-color);
  border-radius: var(--panel-radius);
  background: var(--surface-1);
  padding: 12px;
}
.vv-folder-explorer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.vv-folder-explorer__path {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  font-family: monospace;
}
.vv-folder-explorer__actions { display: flex; gap: 6px; }
.vv-folder-explorer__tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vv-folder-explorer__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.vv-folder-explorer__item:hover { background: var(--surface-2); }
.vv-folder-explorer__item.is-selected {
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.12);
  color: var(--accent-400);
}
.vv-folder-explorer__name-input {
  font-size: 0.8rem;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: inherit;
  flex: 1;
}
.vv-folder-explorer__empty {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 8px 0;
}

/* =============================================================================
   FILTER BAR � used by TenantEvents, SystemEvents
   ============================================================================= */

.vv-filter-bar {
  padding: 0.5rem 0;
}
.vv-filter-bar__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vv-filter-bar__select,
.vv-filter-bar__input {
  font-size: 0.78rem;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--panel-radius);
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast);
}
.vv-filter-bar__select:focus,
.vv-filter-bar__input:focus {
  border-color: var(--accent-400);
  box-shadow: 0 0 0 2px hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.15);
}
.vv-filter-bar__select--sm { max-width: 160px; }
.vv-filter-bar__input { flex: 1; min-width: 120px; }
.vv-filter-bar__btn {
  font-size: 0.75rem;
  padding: 4px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--panel-radius);
  background: var(--surface-1);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.vv-filter-bar__btn:hover { background: var(--surface-2); color: var(--text-primary); }
.vv-filter-bar__btn--clear { color: var(--color-danger); border-color: hsla(0, 60%, 50%, 0.3); }
.vv-filter-bar__btn--clear:hover { background: hsla(0, 60%, 50%, 0.08); }

/* -- Filter pill � small inline tag -- */
.vv-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* =============================================================================
   ALERT BANNERS � colored band alerts for flags and status
   ============================================================================= */

.vv-alert {
  display: flex;
  align-items: stretch;
  border-radius: var(--panel-radius);
  overflow: hidden;
  font-size: 0.8rem;
  margin: 0 0 0.5rem;
  background: var(--surface-2);
}
.vv-alert__band {
  width: 4px;
  flex-shrink: 0;
}
.vv-alert__content {
  padding: 8px 12px;
  color: var(--text-primary);
  flex: 1;
}
.vv-alert--success .vv-alert__band { background: hsl(140, 55%, 45%); }
.vv-alert--success { border: 1px solid hsla(140, 55%, 45%, 0.25); }
.vv-alert--danger .vv-alert__band { background: var(--color-danger); }
.vv-alert--danger { border: 1px solid hsla(0, 60%, 50%, 0.25); }
.vv-alert--warning .vv-alert__band { background: var(--color-warning); }
.vv-alert--warning { border: 1px solid hsla(38, 70%, 50%, 0.25); }
.vv-alert--info .vv-alert__band { background: var(--color-info); }
.vv-alert--info { border: 1px solid hsla(210, 60%, 50%, 0.25); }

/* =============================================================================
   EVENT LIST � log rows for TenantEvents
   ============================================================================= */

.vv-event-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vv-event-list__empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 12px 0;
}
.vv-event {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-left: 3px solid transparent;
}
.vv-event:hover { background: var(--surface-2); }
.vv-event__time {
  flex-shrink: 0;
  min-width: 100px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.vv-event__severity {
  flex-shrink: 0;
  min-width: 50px;
  font-weight: 600;
  font-size: 0.72rem;
}
.vv-event__summary {
  flex: 1;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vv-event__tags {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.vv-event__detail {
  padding: 8px 12px 8px 24px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  background: var(--surface-2);
  border-radius: 0 0 6px 6px;
  margin-top: -2px;
  color: var(--text-secondary);
}
.vv-event__detail pre { margin: 0; white-space: pre-wrap; word-break: break-all; }

/* Event severity colors */
.vv-event--critical { border-left-color: var(--color-danger); }
.vv-event--critical .vv-event__severity { color: var(--color-danger); }
.vv-event--error { border-left-color: hsl(0, 60%, 55%); }
.vv-event--error .vv-event__severity { color: hsl(0, 60%, 55%); }
.vv-event--warn { border-left-color: var(--color-warning); }
.vv-event--warn .vv-event__severity { color: var(--color-warning); }
.vv-event--info { border-left-color: var(--color-info); }
.vv-event--info .vv-event__severity { color: var(--color-info); }
.vv-event--debug { border-left-color: var(--text-muted); }
.vv-event--debug .vv-event__severity { color: var(--text-muted); }

/* =============================================================================
   HOME PAGE � hero, workflow timeline, RCBE strip
   ============================================================================= */

.vv-home-hero {
  padding: 2.5rem var(--panel-pad) 2rem;
  text-align: center;
  background: #dfd7fa;
}
[data-theme="dark"] .vv-home-hero {
  background: hsl(262.5, 25.8%, 14%);
}
.vv-home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-400);
  margin-bottom: 12px;
}
.vv-home-hero__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0 0 12px;
}
.vv-home-hero__title em {
  font-style: normal;
  color: var(--accent-400);
}
.vv-home-hero__sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto 20px;
  line-height: 1.6;
}
.vv-home-hero__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Workflow timeline */
.vv-workflow {
  padding: 1rem var(--panel-pad);
  overflow-x: auto;
}
.vv-workflow__track {
  display: flex;
  gap: 4px;
  min-width: max-content;
}
.vv-workflow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  min-width: 100px;
  flex: 1;
  transition: all var(--transition-fast);
}
.vv-workflow__step--done {
  border-color: hsla(var(--hue-success), 60%, 45%, 0.4);
  background: hsla(var(--hue-success), 60%, 45%, 0.06);
}
.vv-workflow__step--ai {
  border-color: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.4);
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.08);
}
.vv-workflow__node {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--surface-3);
  color: var(--text-secondary);
  border: 2px solid var(--border-color);
}
.vv-workflow__step--done .vv-workflow__node {
  background: hsla(var(--hue-success), 60%, 45%, 0.15);
  border-color: hsla(var(--hue-success), 60%, 45%, 0.5);
  color: var(--color-success);
}
.vv-workflow__step--ai .vv-workflow__node {
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.15);
  border-color: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.5);
  color: var(--accent-400);
}
.vv-workflow__label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
}
.vv-workflow__badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.2);
  color: var(--accent-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* RCBE strip */
.vv-rcbe-strip {
  display: flex;
  gap: 16px;
  padding: var(--panel-pad);
  margin: 0;
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.04);
  border: 1px solid hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.15);
  border-radius: var(--panel-radius);
}
.vv-rcbe-strip__icon {
  flex-shrink: 0;
  color: var(--accent-400);
  margin-top: 2px;
}
.vv-rcbe-strip__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-400);
  margin: 0 0 6px;
}
.vv-rcbe-strip__text {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 10px;
}
.vv-rcbe-strip__dims {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.vv-rcbe-strip__dim {
  font-size: 0.65rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.12);
  color: var(--accent-400);
}


/* =============================================================================
   LOGIN PAGE
   ============================================================================= */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-family: var(--font-family);
}

.login-card {
  width: 340px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px hsla(260, 30%, 20%, 0.12);
  border: 1px solid #beafd8;
}

.login-card__header {
  background: #d3cee2;
  padding: 28px 24px 20px;
  display: flex;
  justify-content: center;
}

.login-card__logo {
  width: 56px;
  height: auto;
}

.login-card__form {
  background: #beafd8;
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.login-field__label {
  font-size: 12px;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}

.login-field__input {
  padding: 8px 12px;
  border: 1px solid #c5b8db;
  border-radius: 6px;
  background: #f5f3f8;
  font-size: 13px;
  font-family: inherit;
  color: #1a1a1a;
  outline: none;
  transition: border-color 0.2s;
}
.login-field__input:focus {
  border-color: var(--accent-500, #8c61d8);
  background: #fff;
}
.login-field__input::placeholder {
  color: #aaa;
}

.login-card__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #1a1a1a;
  cursor: pointer;
}
.login-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  accent-color: #46336a;
}

.login-link {
  font-size: 12px;
  color: #46336a;
  text-decoration: none;
  font-weight: 500;
}
.login-link:hover {
  text-decoration: underline;
}

.login-card__error {
  font-size: 12px;
  color: #c0392b;
  padding: 6px 10px;
  background: hsla(0, 60%, 50%, 0.08);
  border-radius: 4px;
}

.login-card__revoked {
  font-size: 12px;
  color: hsl(43, 75%, 42%);
  padding: 8px 10px;
  background: hsla(43, 75%, 50%, 0.1);
  border: 1px solid hsla(43, 75%, 50%, 0.2);
  border-radius: 4px;
  line-height: 1.5;
}

.login-card__actions {
  display: flex;
  justify-content: flex-end;
}

.login-btn {
  padding: 9px 28px;
  background: #46336a;
  color: #e0dbe9;
  border: 1px solid #beafd8;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s;
}
.login-btn:hover {
  background: #553392;
}
.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-card__footer {
  text-align: right;
}

/* ── Register page ──────────────────────────────────────────────────── */

.vv-register {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.vv-register__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #beafd8;
  padding: 20px 24px 24px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.vv-register__field {
  display: flex;
  flex-direction: column;
}

/* ── OAuth buttons (matches register-preview.html) ──────────────────── */

.vv-oauth {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vv-oauth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #5a4a6e;
}
.vv-oauth__divider::before,
.vv-oauth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #a898c0;
}

.vv-oauth__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #c5b8db;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.vv-oauth__btn:hover {
  background: #f5f3f8;
  border-color: #a090c0;
}
.vv-oauth__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vv-oauth__btn--google:hover { border-color: #4285F4; }
.vv-oauth__btn--microsoft:hover { border-color: #00A4EF; }
.vv-oauth__btn--aws:hover { border-color: #FF9900; }

/* Search spinner animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* =============================================================================
   VIDEO CARD — Tools Panel Results
   ============================================================================= */

.vv-vidcard {
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.vv-vidcard:hover {
  border-color: var(--accent-500);
}

/* Thumbnail area — 3x the old 90px = 270px */
.vv-vidcard__thumb {
  height: 270px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  overflow: hidden;
}
.vv-vidcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Not-available thumb — gradient placeholder */
.vv-vidcard__thumb-na {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #21074e 0%, #0d9488 100%);
}

/* Play button overlay */
.vv-vidcard__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

/* Video card platform header */
.vv-vidcard__platform {
  padding: 4px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
}

.vv-vidcard__play svg {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.vv-vidcard__play:hover {
  opacity: 1;
}
.vv-vidcard:hover .vv-vidcard__play {
  opacity: 0.85;
}

/* Watch progress bar */
.vv-vidcard__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: hsla(0,0%,20%,0.5);
  border-radius: 0 0 6px 6px;
}
.vv-vidcard__progress-fill {
  height: 100%;
  border-radius: 0 0 6px 6px;
  transition: width 0.3s ease, background-color 0.5s ease;
}

/* Card body */
.vv-vidcard__body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vv-vidcard__headline {
  font-size: 0.72rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vv-vidcard__meta {
  font-size: 0.62rem;
  color: var(--text-muted);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.vv-vidcard__shortlist-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-size: 0.72rem;
  font-family: inherit;
}
.vv-vidcard__shortlist-btn:hover {
  opacity: 0.8;
}
.vv-vidcard__shortlist-check {
  font-size: 1rem;
}


/* Shortlist tick */
.vv-vidcard__shortlist {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  margin-top: 2px;
}
.vv-vidcard__shortlist input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--color-success);
  width: 14px;
  height: 14px;
}
.vv-vidcard__shortlist-label {
  font-size: 0.62rem;
}

/* Tools panel video player — sits below results at full tab width */
.vv-tools-player {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-top: 16px;
  height: 320px;
  min-height: 200px;
  max-height: 700px;
  overflow: hidden;
}
.vv-tools-player video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: contain;
}
.vv-tools-player__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-subtle);
}
.vv-tools-player__url {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vv-tools-player__close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.vv-tools-player__resize {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  background: linear-gradient(to bottom, transparent, var(--border-color));
}
.vv-tools-player__resize:hover {
  background: var(--accent-500);
  opacity: 0.5;
}


/* ═══════════════════════════════════════════════════════════════
   FLOATING VIDEO PLAYER WINDOW
   ═══════════════════════════════════════════════════════════════ */
.vv-float-player {
  position: fixed;
  z-index: 1000;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  min-width: 320px;
  min-height: 240px;
  transition: opacity 0.15s;
}
.vv-float-player.is-dragging {
  opacity: 0.7;
  cursor: move;
}
.vv-float-player__titlebar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border-color);
  border-radius: 8px 8px 0 0;
  cursor: move;
  user-select: none;
}
.vv-float-player__title {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.vv-float-player__close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 4px;
}
.vv-float-player__close:hover {
  color: var(--color-danger);
}
.vv-float-player__content {
  flex: 1;
  overflow: hidden;
  background: #000;
}
.vv-float-player__content video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.vv-float-player__url {
  padding: 6px 12px;
  font-size: 0.68rem;
  color: var(--text-muted);
  background: var(--surface-1);
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Resize handles */
.vv-float-player__resize {
  position: absolute;
  z-index: 10;
}
.vv-float-player__resize--n { top: -4px; left: 8px; right: 8px; height: 8px; cursor: ns-resize; }
.vv-float-player__resize--s { bottom: -4px; left: 8px; right: 8px; height: 8px; cursor: ns-resize; }
.vv-float-player__resize--e { right: -4px; top: 8px; bottom: 8px; width: 8px; cursor: ew-resize; }
.vv-float-player__resize--w { left: -4px; top: 8px; bottom: 8px; width: 8px; cursor: ew-resize; }
.vv-float-player__resize--ne { top: -4px; right: -4px; width: 12px; height: 12px; cursor: nesw-resize; }
.vv-float-player__resize--nw { top: -4px; left: -4px; width: 12px; height: 12px; cursor: nwse-resize; }
.vv-float-player__resize--se { bottom: -4px; right: -4px; width: 12px; height: 12px; cursor: nwse-resize; }
.vv-float-player__resize--sw { bottom: -4px; left: -4px; width: 12px; height: 12px; cursor: nesw-resize; }

/* ═══════════════════════════════════════════════════════════════
   SHORTLIST CARDS
   ═══════════════════════════════════════════════════════════════ */
.vv-shortlist-section.is-animating {
  animation: shortlist-pulse 0.3s ease-out;
}
@keyframes shortlist-pulse {
  0% { background: transparent; }
  50% { background: hsla(var(--hue-accent), 50%, 50%, 0.15); }
  100% { background: transparent; }
}
.vv-shortlist-card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vv-shortlist-card:hover {
  border-color: var(--accent-500);
}
.vv-shortlist-card.is-selected {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 2px hsla(var(--hue-accent), 50%, 50%, 0.25);
}
.vv-shortlist-card__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 5;
  background: hsla(0, 0%, 0%, 0.6);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  color: #fff;
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.vv-shortlist-card:hover .vv-shortlist-card__remove {
  opacity: 1;
}
.vv-shortlist-card__thumb {
  position: relative;
  width: 100%;
  height: 90px;
  background: #000;
}
.vv-shortlist-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vv-shortlist-card__thumb-na {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #21074e, #0d9488);
}
.vv-shortlist-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsla(0, 0%, 0%, 0.5);
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.vv-shortlist-card__play:hover {
  background: hsla(0, 0%, 0%, 0.7);
}
.vv-shortlist-card:hover .vv-shortlist-card__play {
  opacity: 1;
}
.vv-shortlist-card__play--visible {
  opacity: 1;
}
.vv-shortlist-card__body {
  cursor: pointer;
}
.vv-shortlist-card__title {
  padding: 8px 10px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vv-shortlist-card__meta {
  padding: 0 10px 8px;
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* Selected Video display */
.vv-selected-video-section.is-animating {
  animation: vv-pulse-success 0.3s ease;
}
.vv-selected-video-display {
  display: flex;
  gap: 16px;
  padding: 12px;
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.08);
  border: 1px solid hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.2);
  border-radius: 8px;
}
.vv-selected-video-display__thumb {
  width: 160px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}
.vv-selected-video-display__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vv-selected-video-display__thumb-na {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #21074e, #0d9488);
}
.vv-selected-video-display__info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.vv-selected-video-display__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}
.vv-selected-video-display__meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   Stage 4 Intelligence UI
   ═══════════════════════════════════════════════════════════════ */

/* Sub-tabs (smaller variant) */
.vv-tabs--sub {
    margin-bottom: 16px;
    gap: 4px;
}
.vv-tabs--sub .vv-tabs__item {
    padding: 6px 14px;
    font-size: 0.75rem;
}

/* Stat cards grid */
.vv-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

/* Individual stat card */
.vv-stat-card {
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 12px 16px;
}
.vv-stat-card__label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.vv-stat-card__value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.vv-stat-card__value--lg {
    font-size: 1.5rem;
}
.vv-stat-card__value--sm {
    font-size: 0.85rem;
}
.vv-stat-card__note {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Extraction list */
.vv-extraction-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vv-extraction-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.vv-extraction-item:hover {
    border-color: var(--border-color);
}
.vv-extraction-item.is-selected {
    border-color: var(--accent-500);
    background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.06);
}
.vv-extraction-item__info {
    flex: 1;
    min-width: 0;
}
.vv-extraction-item__id {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vv-extraction-item__meta {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* 3-column grid variant */
.vv-stage-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
    .vv-stage-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .vv-stage-grid--3col {
        grid-template-columns: 1fr;
    }
}

/* Empty state */
.vv-empty-state {
    padding: 32px 24px;
    text-align: center;
    color: var(--text-muted);
}
.vv-empty-state svg {
    margin-bottom: 12px;
    opacity: 0.5;
}
.vv-empty-state p {
    font-size: 0.9rem;
    margin: 0;
}
.vv-empty-state__hint {
    font-size: 0.8rem;
    margin-top: 4px;
}
.vv-empty-state .btn {
    margin-top: 16px;
}

/* Score display */
.vv-score-display {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-400);
}

/* JSON display */
.vv-json-display {
    padding: 10px 14px;
    background: var(--surface-2);
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
}


/* =============================================================================
   AI PROFILE CONFIGURATION — 3-panel layout
   Left: Profiles | Middle: Capabilities | Right: Provider Config
   ============================================================================= */

.vv-ai-config {
  display: grid;
  grid-template-columns: 280px 300px 1fr;
  gap: 16px;
  min-height: 500px;
  padding: 0 var(--panel-pad);
}

@media (max-width: 1200px) {
  .vv-ai-config {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.vv-ai-config__panel {
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--panel-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vv-ai-config__panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-primary);
  background: var(--surface-2);
}

/* ── Profile List ────────────────────────────────────────────────────────────── */

.vv-ai-config__profile-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.vv-ai-config__profile-card {
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vv-ai-config__profile-card:hover {
  border-color: var(--teal-500);
  background: hsla(var(--hue-teal), var(--sat-teal), var(--lit-teal), 0.05);
}

.vv-ai-config__profile-card--selected {
  border-color: var(--teal-500);
  background: hsla(var(--hue-teal), var(--sat-teal), var(--lit-teal), 0.1);
}

.vv-ai-config__profile-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.vv-ai-config__profile-name {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-primary);
}

.vv-ai-config__profile-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* ── New Profile Form ────────────────────────────────────────────────────────── */

.vv-ai-config__new-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--teal-500);
  background: transparent;
  border: 1px solid var(--teal-500);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vv-ai-config__new-btn:hover {
  background: hsla(var(--hue-teal), var(--sat-teal), var(--lit-teal), 0.1);
}

.vv-ai-config__new-btn span {
  font-size: 14px;
  line-height: 1;
}

.vv-ai-config__new-form {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vv-ai-config__input {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: inherit;
}

.vv-ai-config__input::placeholder {
  color: var(--text-muted);
}

.vv-ai-config__input:focus {
  outline: none;
  border-color: var(--teal-500);
}

.vv-ai-config__new-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Capability List ─────────────────────────────────────────────────────────── */

.vv-ai-config__cap-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.vv-ai-config__cap-card {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vv-ai-config__cap-card:hover {
  border-color: var(--accent-500);
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.05);
}

.vv-ai-config__cap-card--selected {
  border-color: var(--accent-500);
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.1);
}

.vv-ai-config__cap-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.vv-ai-config__cap-icon {
  font-size: 16px;
}

.vv-ai-config__cap-name {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-primary);
}

.vv-ai-config__cap-provider {
  display: flex;
  gap: 8px;
  font-size: 0.72rem;
}

.vv-ai-config__provider-name {
  color: var(--teal-500);
  font-weight: 500;
}

.vv-ai-config__model-name {
  color: var(--text-muted);
}

/* ── Provider Config Panel ───────────────────────────────────────────────────── */

.vv-ai-config__provider-list {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  border-bottom: 1px solid var(--border-color);
}

.vv-ai-config__provider-card {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vv-ai-config__provider-card:hover {
  border-color: var(--accent-400);
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.05);
}

.vv-ai-config__provider-card--selected {
  border-color: var(--accent-400);
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.1);
}

.vv-ai-config__provider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.vv-ai-config__provider-title {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-primary);
}

.vv-ai-config__provider-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* ── Config Form Fields ──────────────────────────────────────────────────────── */

.vv-ai-config__model-section,
.vv-ai-config__field-section,
.vv-ai-config__toggle-section {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
}

.vv-ai-config__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.vv-ai-config__select {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: inherit;
}

.vv-ai-config__select:focus {
  outline: none;
  border-color: var(--teal-500);
}

.vv-ai-config__hint {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.vv-ai-config__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-primary);
  cursor: pointer;
}

.vv-ai-config__toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--teal-500);
}

.vv-ai-config__links {
  padding: 12px;
  display: flex;
  gap: 16px;
}

.vv-ai-config__links a {
  font-size: 0.72rem;
  color: var(--teal-500);
  text-decoration: none;
}

.vv-ai-config__links a:hover {
  text-decoration: underline;
}

.vv-ai-config__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 24px;
}

/* ── Badges ──────────────────────────────────────────────────────────────────── */

.vv-ai-config__badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 4px;
}

.vv-ai-config__badge--active {
  background: hsla(var(--hue-success), var(--sat-semantic), var(--lit-semantic), 0.15);
  color: var(--color-success);
}

.vv-ai-config__badge--disabled {
  background: hsla(0, 0%, 50%, 0.15);
  color: var(--text-muted);
}

.vv-ai-config__badge--paid {
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.15);
  color: var(--accent-400);
}

.vv-ai-config__badge--self-hosted {
  background: hsla(var(--hue-teal), var(--sat-teal), var(--lit-teal), 0.15);
  color: var(--teal-500);
}

.vv-ai-config__badge--free {
  background: hsla(var(--hue-success), var(--sat-semantic), var(--lit-semantic), 0.15);
  color: var(--color-success);
}

/* ── Footer Actions ──────────────────────────────────────────────────────────── */

.vv-ai-config__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
  padding: 16px var(--panel-pad);
  border-top: 1px solid var(--border-color);
}

.vv-ai-config__action-btn {
  padding: 10px 20px;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  font-family: inherit;
}

.vv-ai-config__action-btn--primary {
  background: linear-gradient(135deg, var(--teal-500), var(--accent-500));
  color: white;
}

.vv-ai-config__action-btn--primary:hover {
  filter: brightness(1.1);
}

.vv-ai-config__action-btn--secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.vv-ai-config__action-btn--secondary:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}


/* =============================================================================
   AI CHAT — Viro assistant chat interface
   Colors extracted from vv-ai-chatbox.svg design
   ============================================================================= */

/* ── AI Chat Theme Variables ─────────────────────────────────────────────────── */
:root {
  /* Viro (AI) colors */
  --viro-primary: #5500d4;
  --viro-accent: #330080;
  --viro-bubble-bg: #f2edfa;
  --viro-bubble-border: #ac92d4;
  --viro-bubble-bg-dark: hsl(262, 30%, 18%);
  --viro-bubble-border-dark: hsl(262, 40%, 35%);

  /* User colors */
  --user-primary: #11846e;
  --user-bubble-bg: #f0f9f7;
  --user-bubble-border: #6e847f;
  --user-bubble-bg-dark: hsl(165, 25%, 15%);
  --user-bubble-border-dark: hsl(165, 20%, 30%);
}

/* ── AI Chat Container ───────────────────────────────────────────────────────── */
.vv-ai-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--panel-radius);
  overflow: hidden;
}

.vv-ai-chat__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-color);
}

.vv-ai-chat__header-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.vv-ai-chat__header-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.vv-ai-chat__header-status {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* ── Message List ────────────────────────────────────────────────────────────── */
.vv-ai-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Message Bubble ──────────────────────────────────────────────────────────── */
.vv-ai-chat__message {
  display: flex;
  gap: 10px;
  max-width: 85%;
}

.vv-ai-chat__message--viro {
  align-self: flex-start;
}

.vv-ai-chat__message--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.vv-ai-chat__avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vv-ai-chat__avatar--viro {
  background: var(--viro-bubble-bg);
  border: 2px solid var(--viro-primary);
}

.vv-ai-chat__avatar--user {
  background: var(--user-bubble-bg);
  border: 2px solid var(--user-primary);
}

[data-theme="dark"] .vv-ai-chat__avatar--viro {
  background: var(--viro-bubble-bg-dark);
}

[data-theme="dark"] .vv-ai-chat__avatar--user {
  background: var(--user-bubble-bg-dark);
}

.vv-ai-chat__avatar svg {
  width: 20px;
  height: 20px;
}

.vv-ai-chat__bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.vv-ai-chat__bubble--viro {
  background: var(--viro-bubble-bg);
  border: 1px solid var(--viro-bubble-border);
  border-top-left-radius: 4px;
}

.vv-ai-chat__bubble--user {
  background: var(--user-bubble-bg);
  border: 1px solid var(--user-bubble-border);
  border-top-right-radius: 4px;
}

[data-theme="dark"] .vv-ai-chat__bubble--viro {
  background: var(--viro-bubble-bg-dark);
  border-color: var(--viro-bubble-border-dark);
}

[data-theme="dark"] .vv-ai-chat__bubble--user {
  background: var(--user-bubble-bg-dark);
  border-color: var(--user-bubble-border-dark);
}

.vv-ai-chat__timestamp {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.vv-ai-chat__message--viro .vv-ai-chat__timestamp {
  text-align: left;
}

.vv-ai-chat__message--user .vv-ai-chat__timestamp {
  text-align: right;
}

/* ── Suggestion Actions ──────────────────────────────────────────────────────── */
.vv-ai-chat__suggestion {
  margin-top: 8px;
  padding: 8px 12px;
  background: hsla(var(--hue-accent), var(--sat-accent), var(--lit-accent), 0.08);
  border: 1px dashed var(--viro-bubble-border);
  border-radius: 8px;
}

.vv-ai-chat__suggestion-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--viro-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.vv-ai-chat__suggestion-value {
  font-size: 0.78rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.vv-ai-chat__suggestion-actions {
  display: flex;
  gap: 8px;
}

.vv-ai-chat__accept-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 500;
  background: var(--viro-primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: filter 0.15s;
}

.vv-ai-chat__accept-btn:hover {
  filter: brightness(1.15);
}

.vv-ai-chat__reject-btn {
  padding: 4px 12px;
  font-size: 0.72rem;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.vv-ai-chat__reject-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}

/* ── Input Area ──────────────────────────────────────────────────────────────── */
.vv-ai-chat__input-area {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--border-color);
}

.vv-ai-chat__input {
  flex: 1;
  padding: 10px 14px;
  font-size: 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: inherit;
  resize: none;
  min-height: 40px;
  max-height: 120px;
}

.vv-ai-chat__input:focus {
  outline: none;
  border-color: var(--viro-primary);
  box-shadow: 0 0 0 2px hsla(262, 100%, 42%, 0.15);
}

.vv-ai-chat__input::placeholder {
  color: var(--text-muted);
}

.vv-ai-chat__send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--viro-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.15s;
  flex-shrink: 0;
}

.vv-ai-chat__send-btn:hover {
  filter: brightness(1.15);
}

.vv-ai-chat__send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Typing Indicator ────────────────────────────────────────────────────────── */
.vv-ai-chat__typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
}

.vv-ai-chat__typing-dot {
  width: 6px;
  height: 6px;
  background: var(--viro-primary);
  border-radius: 50%;
  animation: vv-typing-bounce 1.4s infinite ease-in-out both;
}

.vv-ai-chat__typing-dot:nth-child(1) { animation-delay: -0.32s; }
.vv-ai-chat__typing-dot:nth-child(2) { animation-delay: -0.16s; }
.vv-ai-chat__typing-dot:nth-child(3) { animation-delay: 0s; }

@keyframes vv-typing-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ── Chat Topic Divider ──────────────────────────────────────────────────────── */
.vv-ai-chat__topic-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}

.vv-ai-chat__topic-divider::before,
.vv-ai-chat__topic-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.vv-ai-chat__topic-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── AI Chat Floating Button & Panel ─────────────────────────────────────────── */
.vv-ai-chat-float {
  position: fixed;
  right: 0;
  top: var(--ai-chat-y, 200px);
  z-index: 100;
  transition: top 0.05s linear;
}

.vv-ai-chat-float.is-dragging {
  transition: none;
  cursor: grabbing;
}

/* Floating Action Button (collapsed state) */
.vv-ai-chat-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  background: linear-gradient(135deg, var(--viro-primary), var(--viro-secondary));
  border: none;
  border-radius: 26px 0 0 26px;
  box-shadow: -4px 4px 16px hsla(262, 80%, 30%, 0.3);
  cursor: grab;
  transition: all 0.2s ease;
  position: relative;
}

.vv-ai-chat-fab:hover {
  width: 56px;
  box-shadow: -6px 6px 24px hsla(262, 80%, 30%, 0.4);
}

.vv-ai-chat-fab:active {
  cursor: grabbing;
}

.vv-ai-chat-fab__icon {
  width: 28px;
  height: 28px;
  filter: brightness(1.1);
}

.vv-ai-chat-fab__badge {
  position: absolute;
  top: -4px;
  left: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-danger);
  border-radius: 10px;
  box-shadow: 0 2px 6px hsla(0, 70%, 50%, 0.3);
}

/* Expanded Panel */
.vv-ai-chat-panel {
  width: 380px;
  height: 480px;
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-right: none;
  border-radius: var(--panel-radius) 0 0 var(--panel-radius);
  box-shadow: -8px 8px 32px hsla(0, 0%, 0%, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.vv-ai-chat-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--viro-primary), var(--viro-secondary));
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  min-height: 48px;
}

.vv-ai-chat-panel__header:active {
  cursor: grabbing;
}

.vv-ai-chat-panel__header-icon {
  width: 24px;
  height: 24px;
  filter: brightness(1.2);
}

.vv-ai-chat-panel__header-title {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}

.vv-ai-chat-panel__minimize {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: hsla(0, 0%, 100%, 0.2);
  border: 1px solid hsla(0, 0%, 100%, 0.3);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.vv-ai-chat-panel__minimize:hover {
  background: hsla(0, 0%, 100%, 0.35);
  border-color: hsla(0, 0%, 100%, 0.5);
}

.vv-ai-chat-panel__minimize:active {
  transform: scale(0.95);
}

.vv-ai-chat-panel .vv-ai-chat {
  flex: 1;
  border: none;
  border-radius: 0;
}

.vv-ai-chat-panel .vv-ai-chat__header {
  display: none; /* Hide duplicate header */
}

/* Legacy container (deprecated) */
.vv-ai-chat-container {
  display: none;
}

.vv-ai-assist-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Field Label Row (for AI assist button alignment) ────────────────────────── */
.vv-field__label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.vv-field__label-row .vv-field__label {
  margin-bottom: 0;
}

/* ── Campaign Stage Monitor ──────────────────────────────────────────────────── */
.vv-stage-monitor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--panel-radius);
}

.vv-stage-monitor__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vv-stage-monitor__title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.vv-stage-monitor__progress {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent-400);
}

.vv-stage-monitor__stages {
  display: flex;
  gap: 4px;
}

.vv-stage-monitor__stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.15s;
}

.vv-stage-monitor__stage--ready {
  border-color: var(--color-success);
  background: hsla(var(--hue-success), 60%, 45%, 0.08);
}

.vv-stage-monitor__stage--partial {
  border-color: var(--color-warning);
  background: hsla(var(--hue-warning), 60%, 45%, 0.08);
}

.vv-stage-monitor__stage-num {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-secondary);
}

.vv-stage-monitor__stage--ready .vv-stage-monitor__stage-num {
  background: var(--color-success);
  color: #fff;
}

.vv-stage-monitor__stage--partial .vv-stage-monitor__stage-num {
  background: var(--color-warning);
  color: #fff;
}

.vv-stage-monitor__stage-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  text-align: center;
}

.vv-stage-monitor__stage-pct {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.vv-stage-monitor__missing {
  font-size: 0.7rem;
  color: var(--color-warning);
  padding: 8px;
  background: hsla(var(--hue-warning), 60%, 45%, 0.08);
  border-radius: 6px;
}

.vv-stage-monitor__missing-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.vv-stage-monitor__missing-list {
  margin: 0;
  padding-left: 16px;
  font-size: 0.68rem;
}


/* =============================================================================
   AI ASSIST BUTTON — Inline button to trigger Viro assistance for form fields
   ============================================================================= */

.vv-ai-assist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: 6px;
  background: transparent;
  border: 1px solid var(--viro-bubble-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.vv-ai-assist-btn:hover {
  background: var(--viro-bubble-bg);
  border-color: var(--viro-primary);
  box-shadow: 0 0 12px hsla(262, 80%, 55%, 0.5), 0 0 4px hsla(262, 80%, 55%, 0.3);
  animation: vv-ai-assist-pulse 1.5s ease-in-out infinite;
}

@keyframes vv-ai-assist-pulse {
  0%, 100% { box-shadow: 0 0 12px hsla(262, 80%, 55%, 0.5), 0 0 4px hsla(262, 80%, 55%, 0.3); }
  50% { box-shadow: 0 0 18px hsla(262, 80%, 55%, 0.7), 0 0 8px hsla(262, 80%, 55%, 0.5); }
}

.vv-ai-assist-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--viro-primary-light);
  border-color: var(--viro-primary);
}

.vv-ai-assist-btn:focus-visible {
  outline: 2px solid var(--viro-primary);
  outline-offset: 2px;
}

.vv-ai-assist-btn:active {
  transform: scale(0.95);
  animation: none;
}

.vv-ai-assist-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.vv-ai-assist-btn__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* Dark theme adjustments */
[data-theme="dark"] .vv-ai-assist-btn {
  border-color: var(--viro-bubble-border-dark);
}

[data-theme="dark"] .vv-ai-assist-btn:hover {
  background: var(--viro-bubble-bg-dark);
}

/* Larger variant for prominent placement */
.vv-ai-assist-btn--lg {
  width: 32px;
  height: 32px;
}

.vv-ai-assist-btn--lg .vv-ai-assist-btn__icon {
  width: 20px;
  height: 20px;
}

/* Inline with form labels */
.vv-form-label .vv-ai-assist-btn {
  margin-left: 4px;
  vertical-align: text-bottom;
}

/* =============================================================================
   HINT TEXT — subtle guidance text for disabled states
   ============================================================================= */

.vv-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
  padding: 4px 0;
}

.vv-hint--warning {
  color: var(--color-warning);
}

.vv-hint--info {
  color: var(--color-info);
}


/* =============================================================================
   CONTENT STATE DISPLAY — Loading, Error, No Data states
   Used across all content pages for consistent state handling
   ============================================================================= */

.vv-content-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
  min-height: 240px;
  max-width: 520px;
  margin: 2rem auto;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--panel-radius);
}

.vv-content-state__icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  line-height: 1;
}

.vv-content-state__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.vv-content-state__message,
.vv-content-state__context {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0.25rem 0;
  line-height: 1.5;
}

.vv-content-state__resolution {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  border-radius: 6px;
  line-height: 1.5;
}

.vv-content-state__contact {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  border-radius: 6px;
  border-left: 3px solid var(--accent-500);
  text-align: left;
  font-size: 0.8125rem;
}

.vv-content-state__contact p {
  margin: 0.25rem 0;
}

.vv-content-state__contact a {
  color: var(--accent-500);
  text-decoration: none;
}

.vv-content-state__contact a:hover {
  text-decoration: underline;
}

.vv-content-state__code {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 1rem;
  font-family: var(--font-mono);
  opacity: 0.6;
}

/* Loading state */
.vv-content-state--loading .vv-content-state__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--surface-3);
  border-top-color: var(--accent-500);
  border-radius: 50%;
  animation: vv-state-spin 0.8s linear infinite;
  margin-bottom: 0.75rem;
}

@keyframes vv-state-spin {
  to { transform: rotate(360deg); }
}

/* Error state */
.vv-content-state--error {
  border-color: hsla(0, 60%, 55%, 0.3);
  background: hsla(0, 60%, 97%, 0.5);
}

.vv-content-state--error .vv-content-state__title {
  color: hsl(0, 55%, 50%);
}

/* No data state */
.vv-content-state--nodata {
  border-style: dashed;
  border-color: var(--border-color);
}

/* Buttons */
.vv-content-state__btn {
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.8125rem;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

.vv-content-state__btn:hover {
  transform: translateY(-1px);
}

.vv-content-state__btn:active {
  transform: translateY(0);
}

.vv-content-state__btn--primary {
  background: var(--accent-500);
  color: white;
}

.vv-content-state__btn--primary:hover {
  background: var(--accent-400);
}

.vv-content-state__btn--secondary {
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.vv-content-state__btn--secondary:hover {
  background: var(--surface-3);
}

/* Dark theme adjustments */
[data-theme="dark"] .vv-content-state {
  background: var(--surface-1);
}

[data-theme="dark"] .vv-content-state--error {
  background: hsla(0, 50%, 12%, 0.4);
  border-color: hsla(0, 55%, 45%, 0.4);
}

[data-theme="dark"] .vv-content-state--error .vv-content-state__title {
  color: hsl(0, 65%, 60%);
}

/* =============================================================================
   TOAST NOTIFICATIONS
   ============================================================================= */

.vv-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.vv-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.8rem;
  max-width: 420px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  animation: vv-toast-in 0.2s ease;
  border-left: 3px solid transparent;
}

.vv-toast--info    { background: var(--surface-2); border-color: var(--accent); color: var(--text-primary); }
.vv-toast--success { background: #0d2b1a; border-color: #22c55e; color: #86efac; }
.vv-toast--warning { background: #2b1f0a; border-color: #f59e0b; color: #fcd34d; }
.vv-toast--error   { background: #2b0a0a; border-color: #ef4444; color: #fca5a5; }

.vv-toast__action {
  font-weight: 600;
  opacity: 0.8;
  white-space: nowrap;
}

.vv-toast__text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes vv-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   DNA REPORT COMPONENT
   ============================================================================= */

/* Traffic-light tokens — work on both light and dark themes */
:root {
  --tl-green:  #16a34a;
  --tl-lime:   #65a30d;
  --tl-amber:  #d97706;
  --tl-orange: #ea580c;
  --tl-red:    #dc2626;
}
[data-theme="dark"] {
  --tl-green:  #34d399;
  --tl-lime:   #a3e635;
  --tl-amber:  #fbbf24;
  --tl-orange: #fb923c;
  --tl-red:    #f87171;
}

.vv-dna-report {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

/* Header */
.vv-dna-report__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 10px;
}
.vv-dna-report__header-left { flex: 1; min-width: 0; }
.vv-dna-report__title {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--accent-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 3px;
}
.vv-dna-report__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.vv-dna-report__meta strong { color: var(--text-secondary); }
.vv-dna-report__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}
.vv-dna-report__ctrl-label { font-size: var(--font-size-xs); color: var(--text-muted); }
.vv-dna-report__model-sel { font-size: var(--font-size-xs); padding: 2px 6px; }

/* Overall score */
.vv-dna-report__overall {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.vv-dna-report__overall-score {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
}
.vv-dna-report__overall-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Cards grid */
.vv-dna-report__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}

/* Individual card */
.vv-dna-card {
  border-radius: 7px;
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--card-accent, var(--accent-500));
  position: relative;
}
/* Dark mode: use a pseudo-element tint so we don't need color-mix() */
[data-theme="dark"] .vv-dna-card {
  background: var(--surface-1);
  border-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .vv-dna-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: var(--card-accent, var(--accent-500));
  opacity: 0.07;
  pointer-events: none;
}

.vv-dna-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.vv-dna-card__title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
[data-theme="dark"] .vv-dna-card__title {
  color: var(--accent-300);
}
.vv-dna-card__score {
  font-size: 0.875rem;
  font-weight: 700;
}

/* Dimension row */
.vv-dna-dim {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1px 0;
}
.vv-dna-dim__name {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vv-dna-dim__right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.vv-dna-dim__val {
  font-size: var(--font-size-xs);
  font-weight: 600;
  min-width: 32px;
  text-align: right;
}
.vv-dna-card__contrib {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.vv-dna-dim__contrib {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Score bar */
.vv-dna-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--border-subtle);
  margin: 2px 0 4px;
}
.vv-dna-bar__fill {
  height: 100%;
  border-radius: 2px;
  opacity: 0.85;
}
[data-theme="dark"] .vv-dna-bar__fill { opacity: 1; }

.vv-dna-report__model-badge {
  font-size: var(--font-size-xs);
  background: var(--accent-900);
  color: var(--accent-500);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  font-weight: 500;
}

.vv-dna-report__rationale {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}


/* ── Dialog overlay (non-modal panels) ── */
.vv-dialog-overlay {
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.vv-dialog {
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px hsla(0, 0%, 0%, 0.3);
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow: hidden;
}
.vv-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}
.vv-dialog__body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}
.vv-dialog__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}


/* ── HTML display (read-only rendered content) ── */
.vv-html-display {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary);
}
.vv-html-display h1, .vv-html-display h2, .vv-html-display h3 {
    margin: 12px 0 6px;
    color: var(--accent);
}
.vv-html-display h1 { font-size: 1.1rem; }
.vv-html-display h2 { font-size: 1rem; }
.vv-html-display h3 { font-size: 0.9rem; }
.vv-html-display p { margin: 4px 0; }
.vv-html-display ul, .vv-html-display ol { padding-left: 20px; margin: 4px 0; }
.vv-html-display strong { font-weight: 600; }
.vv-html-display em { font-style: italic; }

/* =============================================================================
   MOBILE GATE — blocks app on screens below 1024px
   ============================================================================= */

.vv-mobile-gate {
  display: none;
}

@media (max-width: 1023px) {
  .vv-mobile-gate {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1028 0%, #2d1f4e 40%, #46336a 100%);
    padding: 24px;
  }
  .vv-mobile-gate__card {
    max-width: 420px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .vv-mobile-gate__logo {
    width: 80px;
    height: 80px;
    background: #46336a;
    border: 2px solid #beafd8;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px hsla(260, 40%, 15%, 0.5);
  }
  .vv-mobile-gate__heading {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  .vv-mobile-gate__icon {
    opacity: 0.4;
    color: #e0dbe9;
  }
  .vv-mobile-gate__message {
    font-size: 15px;
    line-height: 1.6;
    color: #c5b8db;
    max-width: 340px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  .vv-mobile-gate__footer {
    font-size: 12px;
    color: #8a7da0;
    margin-top: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
}

/* =============================================================================
   TOAST NOTIFICATIONS
   ============================================================================= */

.vv-toast-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  max-width: 380px;
  pointer-events: none;
}

.vv-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: var(--font-size-base, 13px);
  font-family: 'Inter', sans-serif;
  box-shadow: 0 4px 16px hsla(260, 30%, 10%, 0.2);
  pointer-events: auto;
  animation: vv-toast-in 0.25s ease-out;
}

@keyframes vv-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.vv-toast--info    { background: hsl(217, 65%, 95%); color: hsl(217, 65%, 30%); border-left: 3px solid hsl(217, 65%, 55%); }
.vv-toast--warning { background: hsl(43, 65%, 94%);  color: hsl(43, 65%, 28%);  border-left: 3px solid hsl(43, 65%, 55%); }
.vv-toast--error   { background: hsl(0, 65%, 95%);   color: hsl(0, 65%, 30%);   border-left: 3px solid hsl(0, 65%, 55%); }

.vv-toast__icon { font-size: 16px; flex-shrink: 0; }
.vv-toast__message { flex: 1; line-height: 1.4; }
.vv-toast__close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0 2px;
}
.vv-toast__close:hover { opacity: 1; }

/* =============================================================================
   DNA PROGRESS GRID
   ============================================================================= */

.vv-dna-grid { overflow-x: auto; }
.vv-dna-grid__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  font-family: 'Inter', sans-serif;
}
.vv-dna-grid__th {
  text-align: left;
  padding: 6px 8px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}
.vv-dna-grid__td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.vv-dna-grid__row--completed .vv-dna-grid__td { color: var(--text-primary); }
.vv-dna-grid__row--running .vv-dna-grid__td { color: var(--accent-400); font-weight: 500; }
.vv-dna-grid__row--failed .vv-dna-grid__td { color: var(--color-danger); }
.vv-dna-grid__row--pending .vv-dna-grid__td { color: var(--text-muted); }

.vv-dna-grid__badge {
  display: inline-block;
  width: 16px;
  text-align: center;
  margin-right: 4px;
}
.vv-dna-grid__badge--ok   { color: var(--color-success); }
.vv-dna-grid__badge--run  { color: var(--accent-400); animation: vv-spin 1.1s linear infinite; }
.vv-dna-grid__badge--fail { color: var(--color-danger); }
.vv-dna-grid__badge--wait { color: var(--text-muted); }

/* =============================================================================
   PLATFORM BRAND IDENTITY — Ad Intelligence
   CSS variables and accent classes for ad platform result display.
   ============================================================================= */

:root {
  --vv-platform-meta-primary: #1877F2;
  --vv-platform-meta-secondary: #FFFFFF;
  --vv-platform-tiktok-primary: #000000;
  --vv-platform-tiktok-secondary: #25F4EE;
  --vv-platform-google-primary: #4285F4;
  --vv-platform-google-secondary: #EA4335;
  --vv-platform-linkedin-primary: #0A66C2;
  --vv-platform-linkedin-secondary: #FFFFFF;
  --vv-platform-youtube-primary: #FF0000;
  --vv-platform-youtube-secondary: #FFFFFF;
}

.vv-platform-meta     { border-left: 3px solid var(--vv-platform-meta-primary); }
.vv-platform-tiktok   { border-left: 3px solid var(--vv-platform-tiktok-secondary); }
.vv-platform-google   { border-left: 3px solid var(--vv-platform-google-primary); }
.vv-platform-linkedin { border-left: 3px solid var(--vv-platform-linkedin-primary); }
.vv-platform-youtube  { border-left: 3px solid var(--vv-platform-youtube-primary); }