/* ============================================================
   Tier 3 (preview): bring the legacy workspace surfaces
   (Overview / Analysis / Training / Experiments) onto the same
   VolkCell editorial system the chat uses.

   The legacy app.css/site.css style is a separate editorial look:
   Syne display type, square corners, hard black shadows, a pale-blue
   accent and a gradient/grain page background. This layer remaps the
   `--vc-*` tokens onto the chat's warm-grey / teal palette and aligns
   the type, surfaces, buttons and sidebar.

   Everything is scoped to `body.vc-shell:not(.cv-chat-page)`, so the
   chat page (which sets `cv-chat-page`) is completely untouched.
   Presentation only: no markup, JS or behaviour change.
   ============================================================ */

body.vc-shell:not(.cv-chat-page) {
  --vc-black: #101010;
  --vc-ink: #1a1a1a;
  --vc-graphite: #5c5c5c;
  --vc-muted: #5c5c5c;
  --vc-line: #e4e3e1;
  --vc-paper: #f8f8f7;
  --vc-paper-2: #f2f1f0;
  --vc-white: #ffffff;
  --vc-accent: #1f6b7a;
  --vc-accent-2: #14525e;
  --vc-teal: #1f6b7a;
  --vc-teal-soft: #14525e;
  --vc-accent-tint: rgba(31, 107, 122, 0.09);
  --vc-navy: #070b1c;
  --vc-navy-deep: #070b1c;
  --vc-warn: #b45309;
  --vc-shadow: 0 1px 3px rgba(16, 16, 16, 0.08);
  --vc-shadow-hard: 0 4px 24px rgba(16, 16, 16, 0.10);
  --vc-radius: 12px;
  --font-heading: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-brand: "Geist", ui-sans-serif, system-ui, sans-serif;
  background: #f8f8f7;
  color: #1a1a1a;
}

html[data-theme="dark"] body.vc-shell:not(.cv-chat-page) {
  --vc-black: #ffffff;
  --vc-ink: #ffffff;
  --vc-graphite: #b4b7c3;
  --vc-muted: #b4b7c3;
  --vc-line: rgba(255, 255, 255, 0.16);
  --vc-paper: #070b1c;
  --vc-paper-2: #151b33;
  --vc-white: #0f1428;
  --vc-accent: #7fb8c2;
  --vc-accent-2: #c2dfe5;
  --vc-teal: #7fb8c2;
  --vc-teal-soft: #c2dfe5;
  --vc-accent-tint: rgba(127, 184, 194, 0.14);
  --vc-navy: #070b1c;
  --vc-navy-deep: #05070f;
  --vc-warn: #f5a524;
  --vc-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --vc-shadow-hard: 0 4px 24px rgba(0, 0, 0, 0.45);
  background: #070b1c;
  color: #ffffff;
}

/* Flatten the decorative page background (radial gradients + film grain). */
body.vc-shell:not(.cv-chat-page)::before { display: none; }

/* ── Welcome banner: flat canvas, Geist type, no Syne / grain ── */
body.vc-shell:not(.cv-chat-page) .vc-welcome {
  background: #ffffff !important;
  border-bottom: 1px solid var(--vc-line) !important;
}
html[data-theme="dark"] body.vc-shell:not(.cv-chat-page) .vc-welcome { background: #0f1428 !important; }
body.vc-shell:not(.cv-chat-page) .vc-welcome-grain { display: none !important; }
body.vc-shell:not(.cv-chat-page) .vc-welcome-title { font-family: var(--font-heading) !important; font-weight: 500; letter-spacing: -0.03em; }
body.vc-shell:not(.cv-chat-page) .vc-welcome-name {
  font-style: normal !important; background-image: none !important; padding-bottom: 0;
  color: var(--vc-accent) !important;
}
body.vc-shell:not(.cv-chat-page) .vc-welcome-readout {
  background: var(--vc-white) !important; border: 1px solid var(--vc-line) !important; border-radius: var(--vc-radius); overflow: hidden;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.vc-shell:not(.cv-chat-page) .vc-readout-stat { border-color: var(--vc-line) !important; }
body.vc-shell:not(.cv-chat-page) .vc-readout-stat dt,
body.vc-shell:not(.cv-chat-page) .vc-readout-stat dd { font-family: var(--font-mono); }

/* ── Quick-access cards and activity feed: rounded hairline surfaces ── */
body.vc-shell:not(.cv-chat-page) .vc-quick-card {
  border-radius: var(--vc-radius) !important; background-image: none !important; background-color: var(--vc-white) !important;
  box-shadow: none !important;
}
body.vc-shell:not(.cv-chat-page) .vc-quick-card:hover {
  border-color: var(--vc-accent) !important; box-shadow: var(--vc-shadow) !important; transform: translateY(-2px);
}
body.vc-shell:not(.cv-chat-page) .vc-quick-title { font-family: var(--font-heading) !important; font-weight: 500; letter-spacing: -0.02em; }
body.vc-shell:not(.cv-chat-page) .vc-quick-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--vc-accent);
}
body.vc-shell:not(.cv-chat-page) .vc-quick-card:hover .vc-quick-cta { color: var(--vc-ink); }
body.vc-shell:not(.cv-chat-page) .vc-quick-card:hover .vc-quick-cta span[aria-hidden] { transform: translateX(3px); }
body.vc-shell:not(.cv-chat-page) .vc-quick-cta span[aria-hidden] { transition: transform 0.18s ease; }
body.vc-shell:not(.cv-chat-page) .vc-activity-list {
  border-radius: var(--vc-radius) !important; overflow: hidden; background: var(--vc-white) !important; box-shadow: none !important;
}
body.vc-shell:not(.cv-chat-page) .vc-activity-list .vc-activity-row { border-color: var(--vc-line) !important; }
body.vc-shell:not(.cv-chat-page) .vc-activity-row a { font-family: var(--font-body) !important; }

/* ── Buttons: the chat's 8px Geist Mono language, no shine, no hard shadow ── */
body.vc-shell:not(.cv-chat-page) .vc-btn-primary,
body.vc-shell:not(.cv-chat-page) .vc-btn-secondary {
  font-family: var(--font-mono) !important;
  font-weight: 500; text-transform: none; letter-spacing: -0.01em;
  border-radius: var(--vc-radius); box-shadow: none; overflow: visible;
}
body.vc-shell:not(.cv-chat-page) .vc-btn-primary::before,
body.vc-shell:not(.cv-chat-page) .vc-btn-secondary::before { display: none; }
body.vc-shell:not(.cv-chat-page) .vc-btn-primary { background: #101010 !important; color: #ffffff !important; border-color: #101010 !important; }
body.vc-shell:not(.cv-chat-page) .vc-btn-primary:hover { background: #14525e !important; border-color: #14525e !important; }
html[data-theme="dark"] body.vc-shell:not(.cv-chat-page) .vc-btn-primary { background: #7fb8c2 !important; color: #070b1c !important; border-color: #7fb8c2 !important; }
html[data-theme="dark"] body.vc-shell:not(.cv-chat-page) .vc-btn-primary:hover { background: #c2dfe5 !important; border-color: #c2dfe5 !important; }

/* The signed-out marketing hero is a dark band; keep its CTAs readable
   (a light button, not the dark editorial primary). */
body.vc-shell:not(.cv-chat-page) .vc-hero .vc-btn-primary { background: #ffffff !important; color: #101010 !important; border-color: #ffffff !important; }
body.vc-shell:not(.cv-chat-page) .vc-hero .vc-btn-primary:hover { background: #e4e3e1 !important; border-color: #e4e3e1 !important; }
body.vc-shell:not(.cv-chat-page) .vc-hero .vc-btn-secondary { background: transparent !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.4) !important; }

/* Sidebar styling lives in app-sidebar.css (shared by workspace and chat pages). */

/* ── Topbar breadcrumb: mono micro-label ── */
body.vc-shell:not(.cv-chat-page) .vc-topbar-breadcrumb { font-family: var(--font-mono); letter-spacing: 0.06em; }

/* ── Remove the legacy blue decorative glows (panel, dropzone, footer) ── */
html:has(body.vc-shell:not(.cv-chat-page)) { background: #f8f8f7; }
html[data-theme="dark"]:has(body.vc-shell:not(.cv-chat-page)) { background: #070b1c; }
body.vc-shell:not(.cv-chat-page) .vc-panel::before,
body.vc-shell:not(.cv-chat-page) .vc-workflow-card::before,
body.vc-shell:not(.cv-chat-page) .vc-footer::before { display: none !important; }
body.vc-shell:not(.cv-chat-page) .vc-dropzone { background: var(--vc-white) !important; }
body.vc-shell:not(.cv-chat-page) .vc-panel,
body.vc-shell:not(.cv-chat-page) .vc-workflow-card,
body.vc-shell:not(.cv-chat-page) .vc-metric-card { box-shadow: var(--vc-shadow); }

/* ── Legacy Tailwind palette layer (app.css §"palette compatibility")
   remapped from the blue brand/surface ramps onto editorial teal and warm
   grey. Scoped to the light theme: dark mode already has its own overrides
   in site.css, and forcing these values there would darken dark-mode text. ── */
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-brand-50 { background-color: #f0f5f6 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-brand-100 { background-color: #e2eef0 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-brand-200 { background-color: #c2dfe5 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-brand-300 { background-color: #a7d2da !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-brand-400 { background-color: #7fb8c2 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-brand-500 { background-color: #2f8494 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-brand-600 { background-color: #1f6b7a !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-brand-700 { background-color: #14525e !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-brand-800 { background-color: #0f3f49 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-brand-900 { background-color: #0b2f36 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-brand-950 { background-color: #071f24 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-brand-50 { color: #f0f5f6 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-brand-100 { color: #e2eef0 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-brand-200 { color: #c2dfe5 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-brand-300 { color: #a7d2da !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-brand-400 { color: #7fb8c2 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-brand-500 { color: #2f8494 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-brand-600 { color: #1f6b7a !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-brand-700 { color: #14525e !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-brand-800 { color: #0f3f49 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-brand-900 { color: #0b2f36 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .border-brand-100 { border-color: #e2eef0 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .border-brand-200 { border-color: #c2dfe5 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .border-brand-300 { border-color: #a7d2da !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .border-brand-500 { border-color: #2f8494 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .border-brand-600 { border-color: #1f6b7a !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .ring-brand-200 { --tw-ring-color: #c2dfe5 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .ring-brand-400 { --tw-ring-color: #7fb8c2 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .ring-brand-500 { --tw-ring-color: #2f8494 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .accent-brand-600 { accent-color: #1f6b7a !important; }

html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-surface-50 { background-color: #faf9f8 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-surface-100 { background-color: #f2f1f0 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-surface-200 { background-color: #e4e3e1 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-surface-300 { background-color: #d3d2cf !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-surface-800 { background-color: #1a1a1a !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .bg-surface-900 { background-color: #101010 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-surface-300 { color: #d3d2cf !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-surface-400 { color: #8a8a8a !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-surface-500 { color: #666666 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-surface-600 { color: #5c5c5c !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-surface-700 { color: #3d3d3d !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-surface-800 { color: #1a1a1a !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .text-surface-900 { color: #101010 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .border-surface-100 { border-color: #f2f1f0 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .border-surface-200 { border-color: #e4e3e1 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .border-surface-300 { border-color: #d3d2cf !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .hover\:bg-surface-50:hover { background-color: #faf9f8 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .hover\:bg-surface-100:hover { background-color: #f2f1f0 !important; }
html[data-theme="light"] body.vc-shell:not(.cv-chat-page) .hover\:bg-surface-800:hover { background-color: #1a1a1a !important; }

/* ── Page headings: cap the oversized display type to the chat's scale.
   The marketing hero keeps its own large title (.vc-hero-title excluded). ── */
body.vc-shell:not(.cv-chat-page) main h1:not(.vc-hero-title) {
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  font-weight: 500 !important;
}

/* ── Workflow / experiment cards: drop the 4px left accent bar and soften the
   hover to the chat's card language (hairline border, soft shadow). ── */
body.vc-shell:not(.cv-chat-page) .vc-workflow-card::after { display: none !important; }
body.vc-shell:not(.cv-chat-page) .vc-workflow-card:hover {
  transform: translateY(-2px); border-color: var(--vc-line-strong) !important;
  box-shadow: var(--vc-shadow) !important;
}

/* ── Section eyebrow: the square marker becomes a hairline rule, matching the
   chat's eyebrow treatment. ── */
body.vc-shell:not(.cv-chat-page) .vc-section-label::before {
  width: 1.5rem; height: 1px; border: 0; background: var(--vc-accent); opacity: 0.6;
}

/* ── Inline Tailwind CTAs, panels and form controls. Many legacy pages style
   buttons and panels with raw utility classes rather than the .vc-btn-* and
   .vc-panel components: uppercase, square corners. Bring those onto the
   editorial language too. ── */
body.vc-shell:not(.cv-chat-page) :is(a, button).uppercase {
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-family: var(--font-mono) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  border-radius: var(--vc-radius) !important;
}
body.vc-shell:not(.cv-chat-page) :is(a, button).bg-black { border-radius: var(--vc-radius) !important; }
body.vc-shell:not(.cv-chat-page) :is(div, article, form, section).bg-white.border { border-radius: var(--vc-radius); }
body.vc-shell:not(.cv-chat-page) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]) {
  border-radius: var(--vc-radius);
}
body.vc-shell:not(.cv-chat-page) :is(.bg-emerald-50, .bg-amber-50, .bg-red-50).border { border-radius: var(--vc-radius); }

/* Dark-mode inline black CTAs read as the editorial primary (teal). */
html[data-theme="dark"] body.vc-shell:not(.cv-chat-page) :is(a, button).bg-black {
  background-color: #7fb8c2 !important; color: #070b1c !important; border-color: #7fb8c2 !important;
}

/* ── CTA hierarchy. The blanket "uppercase → small mono" rule above is right
   for secondary actions, but it flattened the primary CTA on each page. Give
   the primary action (page CTA / form submit) a bigger, semibold treatment so
   it reads as the obvious next step. ── */
body.vc-shell:not(.cv-chat-page) :is(.vc-btn-primary, button[type="submit"]) {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ── Guided tour: invite card and Driver.js popover onto the editorial
   language (rounded, Geist/Mono, soft shadow) instead of the square/Syne look. ── */
body.vc-shell:not(.cv-chat-page) .vc-tour-invite {
  border-radius: var(--vc-radius); border-color: var(--vc-line); background: var(--vc-white);
  box-shadow: var(--vc-shadow-hard);
}
body.vc-shell:not(.cv-chat-page) .vc-tour-invite-title { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.02em; color: var(--vc-ink); }
body.vc-shell:not(.cv-chat-page) .vc-tour-invite-body { color: var(--vc-muted); }
body.vc-shell:not(.cv-chat-page) :is(.vc-tour-invite-yes, .vc-tour-invite-no) {
  border-radius: var(--vc-radius); text-transform: none; font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.01em;
}
body.vc-shell:not(.cv-chat-page) .vc-tour-invite-yes { background: #101010; border-color: #101010; color: #ffffff; }
html[data-theme="dark"] body.vc-shell:not(.cv-chat-page) .vc-tour-invite-yes { background: #7fb8c2; border-color: #7fb8c2; color: #070b1c; }
body.vc-shell:not(.cv-chat-page) .vc-tour-invite-no { border-color: var(--vc-line-strong); color: var(--vc-ink); }

body.vc-shell:not(.cv-chat-page) .vc-tour-popover.driver-popover {
  border-radius: var(--vc-radius); border-color: var(--vc-line); background: var(--vc-white);
  box-shadow: var(--vc-shadow-hard);
}
body.vc-shell:not(.cv-chat-page) .vc-tour-popover .driver-popover-title { font-family: var(--font-heading); font-weight: 500; }
body.vc-shell:not(.cv-chat-page) .vc-tour-popover .driver-popover-navigation-btns button {
  border-radius: var(--vc-radius); text-transform: none; font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.01em;
}