/*
 * Vertical Flows shared presentation tokens.
 * This :root block is the only place raw colour, duration, and easing
 * values may appear. Component rules below consume semantic tokens only.
 * Light and Dark values resolve through light-dark(); the default theme
 * follows the system, and [data-theme] pins an explicit choice.
 */
:root {
  /* VF-VISUAL-CONTRACT:ROOT:START */
  color-scheme: light dark;

  /* Text roles */
  --vf-ink: light-dark(#0e1116, #eceef1);
  --vf-carbon: light-dark(#2a2e37, #c6cbd3);
  --vf-slate: light-dark(#5b6068, #9aa1ab);

  /* Surface roles */
  --vf-paper: light-dark(#ffffff, #1b1f26);
  --vf-gallery: light-dark(#f7f7f2, #15181d);
  --vf-porcelain: light-dark(#fbfbf8, #181c22);
  --vf-hairline: light-dark(rgba(14, 17, 22, 0.08), rgba(255, 255, 255, 0.1));
  --vf-sidebar-surface: light-dark(#101318, #0f1216);
  --vf-menu-surface: light-dark(#191d24, #222731);
  --vf-scrim: light-dark(rgba(14, 17, 22, 0.46), rgba(2, 4, 7, 0.62));

  /* Signal roles; each value holds WCAG AA contrast in its own theme */
  --vf-go: light-dark(#0f8f72, #2fae8c);
  --vf-go-deep: light-dark(#0a6b55, #4cc9a4);
  --vf-go-wash: light-dark(#e7f6f1, #14302a);
  --vf-focus: light-dark(#3446eb, #93a0ff);
  --vf-caution: light-dark(#b86b16, #d9a05b);
  --vf-stop: light-dark(#c8394a, #f97583);
  --vf-stop-deep: light-dark(#a73240, #ffa3ad);
  --vf-stop-wash: light-dark(#fdf1f3, #2c1a1e);
  --vf-on-signal: light-dark(#ffffff, #15181d);

  /* Text and line roles for permanently dark chrome (sidebar, menus, dialogs) */
  --vf-on-dark: #ffffff;
  --vf-on-dark-strong: rgba(255, 255, 255, 0.92);
  --vf-on-dark-muted: rgba(255, 255, 255, 0.74);
  --vf-on-dark-faint: rgba(255, 255, 255, 0.62);
  --vf-on-dark-dim: rgba(255, 255, 255, 0.5);
  --vf-on-dark-hairline: rgba(255, 255, 255, 0.14);
  --vf-on-dark-fill: rgba(255, 255, 255, 0.07);

  /* Type scale */
  --vf-text-caption: 11px;
  --vf-text-label: 12px;
  --vf-text-small: 13px;
  --vf-text-body: 14px;
  --vf-text-subtitle: 15px;
  --vf-text-reading: 16px;
  --vf-text-emphasis: 18px;
  --vf-text-large: 20px;
  --vf-text-title: 22px;
  --vf-text-display: clamp(30px, 4vw, 42px);

  /* Spacing scale (4px grid plus the canonical panel inset) */
  --vf-space-1: 4px;
  --vf-space-2: 8px;
  --vf-space-3: 12px;
  --vf-space-4: 16px;
  --vf-space-5: 20px;
  --vf-space-6: 24px;
  --vf-space-7: 32px;
  --vf-space-8: 40px;
  --vf-space-9: 48px;
  --vf-space-panel: 16px;
  --vf-space-gutter: 20px;

  /* Radius scale */
  --vf-radius-tiny: 4px;
  --vf-radius-small: 6px;
  --vf-radius-card: 8px;
  --vf-radius-pill: 8px;
  --vf-radius-large: 12px;
  --vf-radius-full: 999px;
  --vf-control-height: 36px;
  --vf-control-radius: 8px;

  /* Mobile viewport / on-screen keyboard docking. Published from visualViewport
     in vee-mobile.js; these defaults keep the composer correct before JS runs and
     on surfaces with no keyboard (desktop). --vf-keyboard-inset is the live bottom
     keyboard overlap, used to cancel the safe-area inset so it is never stacked on
     top of the keyboard. */
  --vf-app-height: 100dvh;
  --vf-keyboard-inset: 0px;
  --vf-viewport-offset-top: 0px;

  /* Weight calibration */
  --vf-control-weight: 450;
  --vf-weight-heading: 600;
  --vf-weight-selected: 520;
  --vf-control-letter-spacing: 0;

  /* Depth / blur; component rules must consume these tokens, never raw blur() values */
  --vf-blur-header: blur(16px);
  --vf-blur-modal: blur(14px);
  /* Restrained material blur for the future-glass shell/status/flow layers.
     Resolves to the depth.blur.soft tier in Docs/ui-runtime-doctrine-v2.md. */
  --vf-blur-panel: blur(8px);

  /* Elevation; default surfaces stay flat */
  --vf-shadow-lift: 0 18px 54px rgba(14, 17, 22, 0.1), 0 1px 3px rgba(14, 17, 22, 0.04);
  --vf-shadow-soft: none;
  --vf-shadow-composer: 0 10px 28px rgba(14, 17, 22, 0.055);
  --vf-shadow-control: none;
  --vf-shadow-menu: 0 10px 28px rgba(14, 17, 22, 0.14);
  --vf-shadow-drawer: 18px 0 44px rgba(14, 17, 22, 0.16);

  /* Motion tokens; restrained, purposeful, transform/opacity first */
  --vf-duration-fast: 120ms;
  --vf-duration-moderate: 180ms;
  --vf-duration-slow: 320ms;
  --vf-duration-pulse: 900ms;
  /* Slow, calm drift for the vertical-flow field traces (upward work movement) */
  --vf-duration-flow: 2600ms;
  --vf-ease: cubic-bezier(0.2, 0, 0, 1);
  --vf-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --vf-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --vf-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* Explicit product-scope contract resolutions; inert until a later scoped surface adopts them. */
  --vf-mobile-gutter: 16px;
  --vf-desktop-gutter: 20px;
  --vf-layout-shell: 620px;
  --vf-layout-section-gap: 20px;
  --vf-state-ready: visual-ready-state;
  --vf-state-blocked: visual-blocked-state;
  /* VF-VISUAL-CONTRACT:ROOT:END */

  color: var(--vf-ink);
  background: var(--vf-gallery);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

.vf-account-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--vf-control-height);
  padding: 0 var(--vf-space-3);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-control-radius);
  background: var(--vf-porcelain);
  color: var(--vf-carbon);
  font: inherit;
  font-size: var(--vf-text-small);
  font-weight: var(--vf-weight-selected);
  cursor: pointer;
}

.vf-workspace-shell.is-sidebar-expanded .vf-account-status {
  display: none;
}

/* Hold the header sign-in control until the shell has settled (auth resolved and
   sidebar expansion applied), so it never flashes visible -> hidden on load. */
.vf-workspace-shell:not(.is-shell-settled) .vf-account-status {
  visibility: hidden;
}

.vf-account-status:hover,
.vf-account-status:focus-visible {
  color: var(--vf-go-deep);
  border-color: color-mix(in srgb, var(--vf-go) 55%, var(--vf-hairline));
  background: color-mix(in srgb, var(--vf-go) 12%, var(--vf-paper));
  outline: none;
}

.vf-account-status:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vf-go) 45%, transparent);
}

.vf-account-status[data-mode="authenticated"] {
  color: var(--vf-go-deep);
  background: var(--vf-go-wash);
}

/* Issue 623 Scope C: the header control is the guest sign-in trigger only.
   An authenticated professional's identity/plan already live in the one
   sidebar account menu (vf-account-menu-trigger), reachable in every sidebar
   state including collapsed and the mobile drawer - so this never needs to
   also show a plan badge here, which is what "persistent top-right plan
   badge" described. Higher specificity than the base rule above settles it
   regardless of sidebar/media state. */
.vf-account-status[data-mode="authenticated"] {
  display: none;
}

.vf-auth-dialog {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--vf-space-4);
  background: var(--vf-scrim);
  backdrop-filter: var(--vf-blur-modal);
}

.vf-auth-dialog[hidden] {
  display: none;
}

.vf-auth-dialog-card {
  position: relative;
  width: min(100%, 420px);
  padding: var(--vf-space-7);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-large);
  background: var(--vf-paper);
  box-shadow: var(--vf-shadow-lift);
}

.vf-auth-dialog-card h2 {
  margin: 0 0 var(--vf-space-2);
  font-size: var(--vf-text-title);
  letter-spacing: -0.02em;
}

.vf-auth-dialog-card > p {
  margin: 0 0 var(--vf-space-5);
  color: var(--vf-slate);
}

.vf-auth-close {
  position: absolute;
  top: var(--vf-space-3);
  right: var(--vf-space-3);
}

.vf-auth-options,
.vf-auth-firm-list {
  display: grid;
  gap: var(--vf-space-2);
}

.vf-auth-options[hidden] {
  display: none;
}

.vf-auth-choice {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vf-space-3);
  padding: 0 var(--vf-space-4);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-control-radius);
  background: var(--vf-porcelain);
  color: var(--vf-ink);
  font: inherit;
  font-weight: var(--vf-control-weight);
  text-align: center;
  cursor: pointer;
}

.vf-auth-choice[hidden],
.vf-auth-divider[hidden] {
  display: none;
}

.vf-auth-provider-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.vf-auth-choice:hover,
.vf-auth-choice:focus-visible {
  border-color: var(--vf-focus);
  outline: none;
}

/* Not-yet-configured provider (OAuth pending Tier 4 activation): shown, honest,
   and clearly not clickable, rather than hidden. */
.vf-auth-choice-soon {
  cursor: default;
  opacity: 0.62;
}

.vf-auth-choice-soon:hover,
.vf-auth-choice-soon:focus-visible {
  border-color: var(--vf-hairline);
}

.vf-auth-choice-badge {
  margin-left: auto;
  padding: 2px var(--vf-space-2);
  border-radius: 999px;
  background: var(--vf-hairline);
  color: var(--vf-muted);
  font-size: 0.72rem;
  font-weight: var(--vf-control-weight);
}

.vf-auth-email-form {
  display: grid;
  gap: var(--vf-space-2);
}

.vf-auth-email-form[hidden] {
  display: none;
}

.vf-auth-email-form label,
.vf-auth-scope-note {
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
}

.vf-auth-divider {
  display: flex;
  align-items: center;
  gap: var(--vf-space-3);
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
}

.vf-auth-divider::before,
.vf-auth-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--vf-hairline);
}

.vf-auth-email-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 12px auto;
  gap: 0;
}

.vf-auth-email-row input {
  grid-column: 1;
  grid-row: 1;
  min-height: 44px;
  min-width: 0;
  padding: 0 var(--vf-space-3);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-control-radius);
  background: var(--vf-paper);
  color: var(--vf-ink);
  font: inherit;
}

.vf-auth-email-row input:hover,
.vf-auth-email-row input:focus-visible {
  border-color: color-mix(in srgb, var(--vf-go) 55%, var(--vf-hairline));
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vf-go) 35%, transparent);
}

.vf-auth-email-row .vf-btn-go {
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  border-radius: var(--vf-control-radius);
}

/* Password managers can inject a direct child beside the email field. Keep
   that affordance over the input instead of letting it create another grid
   row and double the intentional input-to-action spacing. */
.vf-auth-email-row > :not(input):not(.vf-btn-go) {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: end;
}

.vf-auth-code-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--vf-space-2);
}

.vf-auth-text-button {
  appearance: none;
  padding: var(--vf-space-1) 0;
  border: 0;
  background: transparent;
  color: var(--vf-go-deep);
  font: inherit;
  font-size: var(--vf-text-small);
  font-weight: var(--vf-control-weight);
  cursor: pointer;
}

.vf-auth-text-button:hover,
.vf-auth-text-button:focus-visible {
  color: var(--vf-focus);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vf-auth-status {
  min-height: 1.5em;
  margin-top: var(--vf-space-4) !important;
  font-size: var(--vf-text-small);
}

.vf-auth-status[data-tone="error"] {
  color: var(--vf-stop-deep);
}

.vf-auth-status[data-tone="success"] {
  color: var(--vf-go-deep);
}

@media (max-width: 520px) {
  #install {
    display: none;
  }

  .vf-auth-dialog {
    align-items: end;
    padding: 0;
  }

  .vf-auth-dialog-card {
    width: 100%;
    max-height: calc(var(--vf-app-height) - var(--vf-space-4));
    overflow: auto;
    padding: var(--vf-space-6) var(--vf-space-4) calc(var(--vf-space-6) + env(safe-area-inset-bottom));
    border-radius: var(--vf-radius-large) var(--vf-radius-large) 0 0;
  }

  .vf-account-status {
    max-width: 104px;
    min-height: 36px;
    padding: 4px 8px;
    line-height: 1.15;
  }

  #artifact-reopen {
    width: 38px;
    min-width: 38px;
    padding-inline: 8px;
  }

  #artifact-reopen span {
    display: none;
  }
}

body {
  background: var(--vf-gallery);
  color: var(--vf-ink);
  line-height: 1.5;
  font-weight: 400;
  overflow: hidden;
}

a {
  color: var(--vf-go-deep);
}

/* The brand label is a restrained sender/brand identifier immediately above
   the opening question - part of the Vee turn, not a marketing hero. Shown
   only for a genuinely first-ever conversation (see the suppression rules
   below); the question and support line beneath it are unconditional and
   match the existing landing prompt shown to every visitor. */
.vf-landing-brand {
  margin: 0;
  max-width: 36rem;
  color: var(--vf-slate);
  font-size: var(--vf-text-reading);
  font-weight: var(--vf-weight-heading);
  line-height: 1.3;
  text-align: center;
}

.vf-landing-question {
  margin: 0;
  color: var(--vf-ink);
  font-size: var(--vf-text-display);
  line-height: 1.12;
  letter-spacing: 0;
  text-align: center;
  font-weight: var(--vf-weight-heading);
}

/* Truthful state-aware suppression only: driven by the same resolved
   account-mode signal the workspace shell uses, never a crawler check.
   Read off <html> (not <body>) so the pre-paint bootstrap script can apply a
   cached last-known-authenticated hint before <body> exists, avoiding a
   flash of the brand label on a returning signed-in user's cold load; the
   real /api/auth/session check in notify() always confirms or corrects
   this. The first-conversation-started hint is permanent per browser (guest
   or authenticated) once this browser's first real turn has happened, and
   is never corrected by a server response - see vee-mobile.js. */
html[data-account-mode="authenticated"] .vf-landing-brand,
html[data-first-conversation-started="1"] .vf-landing-brand {
  display: none;
}

.vf-shell {
  min-height: 100vh;
  min-height: var(--vf-app-height, 100dvh);
  height: 100vh;
  height: var(--vf-app-height, 100dvh);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--vf-paper);
  overflow: hidden;
}

.vf-workspace-shell {
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: 1fr;
  background: var(--vf-paper);
}

.vf-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: var(--vf-app-height, 100dvh);
  max-height: 100vh;
  max-height: var(--vf-app-height, 100dvh);
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--vf-space-panel);
  width: 58px;
  padding: 14px 10px;
  background: var(--vf-sidebar-surface);
  color: var(--vf-on-dark);
  overflow: hidden;
  transition: none;
  z-index: 5;
}

.vf-sidebar .vf-brand-subtitle,
.vf-sidebar .vf-status,
.vf-sidebar .vf-muted {
  color: var(--vf-on-dark-faint);
}

/* Issue 591 Controlling Amendment C.2: the compact toggle stays top-left and
   the current firm/workspace name sits top-right of the same header row. */
.vf-sidebar-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vf-space-2);
  min-width: 0;
}

.vf-sidebar-header-row .vf-workspace-switcher {
  width: auto;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

.vf-sidebar.is-expanded {
  box-shadow: var(--vf-shadow-drawer);
}

/* The 320px expanded-rail width only applies at the desktop breakpoint where
   the sidebar is a vertical rail (>=981px, scoped below). Below that, the
   681-980px band uses a horizontal top-bar layout (see the 980px band further
   down) and the <=680px band uses its own 100vw mobile-drawer rule; an
   unscoped width here previously beat both of those resets by specificity
   and produced a broken fixed-width/collapsed-height sidebar box between
   681-980px (issue 623 Scope A). */
@media (min-width: 981px) {
  .vf-sidebar {
    position: fixed;
    /* The public introduction band (when visible) occupies the top of the
       viewport in normal flow; --vf-app-height already excludes its real
       rendered height, so the fixed rail starts exactly where it ends. */
    top: calc(100dvh - var(--vf-app-height, 100dvh));
    right: auto;
    bottom: auto;
    left: 0;
  }

  .vf-workspace-main {
    grid-column: 2;
  }

  .vf-workspace-shell.is-sidebar-expanded {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .vf-workspace-shell.is-sidebar-expanded .vf-sidebar {
    width: 320px;
    transition: none;
  }
}

.vf-workspace-shell.is-sidebar-expanded .vf-nav-label,
.vf-workspace-shell.is-sidebar-expanded .vf-conversation-tools,
.vf-workspace-shell.is-sidebar-expanded .vf-conversation-list,
.vf-workspace-shell.is-sidebar-expanded .vf-history-section,
.vf-workspace-shell.is-sidebar-expanded .vf-sidebar-toggle {
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

.vf-brand-copy,
.vf-nav-label,
.vf-conversation-tools,
.vf-conversation-list,
.vf-history-section,
.vf-sidebar-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--vf-duration-fast) var(--vf-ease);
}

.vf-sidebar.is-expanded .vf-nav-label,
.vf-sidebar.is-expanded .vf-conversation-tools,
.vf-sidebar.is-expanded .vf-conversation-list,
.vf-sidebar.is-expanded .vf-history-section,
.vf-sidebar.is-expanded .vf-sidebar-toggle {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.vf-conversation-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: var(--vf-space-2);
  overflow: hidden;
}

/* Desktop rail toggle: one compact icon control, always discoverable in both
   the collapsed and expanded state. Hover/focus may style the control itself
   but must never change sidebar width, labels, or layout (issue 591 Amendment A). */
.vf-sidebar-expand-toggle {
  width: 36px;
  height: 36px;
  min-height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--vf-radius-card);
  padding: 0;
  background: transparent;
  color: var(--vf-on-dark-faint);
  justify-self: start;
}

.vf-sidebar-expand-toggle:hover,
.vf-sidebar-expand-toggle:focus-visible {
  background: var(--vf-on-dark-fill);
  color: var(--vf-on-dark);
}

.vf-sidebar-expand-toggle:focus-visible {
  outline: 2px solid var(--vf-focus);
  outline-offset: 2px;
}

.vf-sidebar-expand-toggle .vf-svg-icon {
  width: 18px;
  height: 18px;
}

.vf-new-chat-button,
.vf-sidebar-toggle {
  width: 100%;
  min-height: var(--vf-control-height);
  display: flex;
  align-items: center;
  justify-content: start;
  gap: var(--vf-space-2);
  border-color: transparent;
  border-radius: var(--vf-radius-card);
  background: var(--vf-on-dark-fill);
  color: var(--vf-on-dark-strong);
  text-align: left;
  padding: var(--vf-space-2);
}

.vf-new-chat-button:hover,
.vf-new-chat-button:focus-visible,
.vf-sidebar-toggle:hover,
.vf-sidebar-toggle:focus-visible {
  background: transparent;
  color: var(--vf-on-dark);
}

.vf-sidebar-section-title {
  padding: var(--vf-space-1) var(--vf-space-2);
  color: var(--vf-on-dark-faint);
  font-size: var(--vf-text-caption);
  font-weight: 450;
  text-transform: none;
}

.vf-conversation-tools {
  padding: 0 4px;
}

.vf-history-section {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--vf-space-1);
  overflow: hidden;
}

.vf-history-section.is-collapsed {
  grid-template-rows: auto;
}

.vf-history-section.is-collapsed .vf-conversation-list {
  display: none;
}

.vf-history-toggle {
  justify-content: space-between;
}

.vf-history-caret::before {
  content: "⌄";
}

.vf-history-section.is-collapsed .vf-history-caret::before {
  content: "›";
}

.vf-conversation-search {
  width: 100%;
  height: var(--vf-control-height);
  border: 1px solid var(--vf-on-dark-hairline);
  border-radius: var(--vf-control-radius);
  padding: 0 var(--vf-space-2);
  background: var(--vf-on-dark-fill);
  color: var(--vf-on-dark);
}

.vf-conversation-search::placeholder {
  color: var(--vf-on-dark-dim);
}

.vf-conversation-list-inner {
  display: grid;
  gap: 2px;
}

/* Settings -> History (issue 447): renders the same conversation-row component the
   sidebar uses for Recent chats, but the sidebar is always a dark rail (--vf-on-dark
   text is fixed white) while Settings follows the page's light/dark theme. Give the
   panel its own permanently-dark surface so the reused rows stay legible in both
   themes instead of introducing a themed variant of the row styling. */
.vf-settings-history-panel {
  background: var(--vf-sidebar-surface);
  color: var(--vf-on-dark);
  border-radius: var(--vf-control-radius);
  padding: var(--vf-space-2);
}

.vf-conversation-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.vf-conversation-empty {
  min-height: 58px;
  display: grid;
  gap: 2px;
  padding: 10px 8px;
  color: var(--vf-on-dark-faint);
  font-size: var(--vf-text-label);
}

.vf-conversation-empty strong {
  color: var(--vf-on-dark-strong);
}

.vf-conversation-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 2px;
  min-height: var(--vf-control-height);
  padding: 2px 4px;
  border-radius: var(--vf-control-radius);
}

.vf-conversation-row.menu-open {
  z-index: 25;
}

.vf-conversation-row.active,
.vf-conversation-row:hover {
  background: transparent;
}

.vf-conversation-row.active .vf-conversation-open strong {
  color: color-mix(in srgb, var(--vf-go) 80%, var(--vf-on-dark));
  font-weight: var(--vf-weight-selected);
}

.vf-conversation-row:hover .vf-conversation-open strong,
.vf-conversation-row:focus-within .vf-conversation-open strong {
  color: var(--vf-on-dark-strong);
}

.vf-conversation-open {
  min-width: 0;
  display: grid;
  gap: 0;
  border: 0;
  background: transparent;
  color: var(--vf-on-dark);
  text-align: left;
  padding: var(--vf-space-1) 6px;
}

.vf-conversation-open strong,
.vf-conversation-open span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vf-conversation-open span {
  color: var(--vf-on-dark-dim);
  font-size: var(--vf-text-caption);
}

.vf-conversation-actions {
  position: relative;
  display: grid;
  place-items: center;
}

.vf-conversation-more {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--vf-control-radius);
  background: transparent;
  color: var(--vf-on-dark-dim);
  font-size: var(--vf-text-emphasis);
  line-height: 1;
  opacity: 0.78;
}

.vf-conversation-row:hover .vf-conversation-more,
.vf-conversation-row:focus-within .vf-conversation-more,
.vf-conversation-row.active .vf-conversation-more,
.vf-conversation-row.menu-open .vf-conversation-more {
  color: var(--vf-on-dark-muted);
  opacity: 1;
}

.vf-conversation-more:hover,
.vf-conversation-more:focus-visible,
.vf-conversation-row.menu-open .vf-conversation-more {
  background: transparent;
  color: var(--vf-on-dark);
}

.vf-conversation-menu {
  position: absolute;
  top: 28px;
  right: 0;
  z-index: 20;
  min-width: 128px;
  display: grid;
  gap: 2px;
  padding: 5px;
  border: 0;
  border-radius: var(--vf-radius-card);
  background: var(--vf-menu-surface);
  box-shadow: var(--vf-shadow-menu);
  pointer-events: auto;
}

.vf-conversation-menu[hidden] {
  display: none;
}

.vf-conversation-action {
  min-height: 32px;
  width: 100%;
  border: 0;
  border-radius: var(--vf-radius-small);
  padding: var(--vf-space-1) var(--vf-space-2);
  background: transparent;
  color: var(--vf-on-dark-strong);
  font-size: var(--vf-text-small);
  text-align: left;
}

.vf-conversation-action:hover,
.vf-conversation-action:focus-visible {
  color: var(--vf-on-dark);
  background: transparent;
}

.vf-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--vf-space-gutter);
  background: var(--vf-scrim);
}

.vf-dialog {
  width: min(440px, 100%);
  display: grid;
  gap: var(--vf-space-3);
  border: 1px solid var(--vf-on-dark-hairline);
  border-radius: var(--vf-radius-card);
  padding: var(--vf-space-4);
  background: var(--vf-menu-surface);
  color: var(--vf-on-dark);
  box-shadow: var(--vf-shadow-lift);
}

.vf-dialog-title {
  font-size: var(--vf-text-subtitle);
}

.vf-dialog-copy {
  margin: 0;
  color: var(--vf-on-dark-muted);
  font-size: var(--vf-text-small);
  line-height: 1.45;
}

.vf-dialog-input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--vf-on-dark-hairline);
  border-radius: var(--vf-control-radius);
  padding: 8px 10px;
  background: var(--vf-on-dark-fill);
  color: var(--vf-on-dark);
  font: inherit;
}

.vf-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--vf-space-2);
}

.vf-dialog-button {
  min-height: var(--vf-control-height);
  border: 1px solid var(--vf-on-dark-hairline);
  border-radius: var(--vf-control-radius);
  padding: 8px 12px;
  background: transparent;
  color: var(--vf-on-dark-muted);
}

.vf-dialog-button.is-primary {
  border-color: transparent;
  background: var(--vf-ink);
  color: var(--vf-paper);
}

.vf-dialog-button.is-danger {
  border-color: transparent;
  background: var(--vf-stop);
  color: var(--vf-on-signal);
}

.vf-workspace-switcher {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: var(--vf-space-2);
  border: 0;
  border-radius: var(--vf-radius-card);
  padding: var(--vf-space-2);
  background: transparent;
  color: var(--vf-on-dark-strong);
}

.vf-workspace-switcher .vf-svg-icon {
  width: 16px;
  height: 16px;
}

.vf-firm-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  opacity: 0;
}

.vf-sidebar.is-expanded .vf-firm-name {
  opacity: 1;
}

.vf-nav {
  min-height: 0;
  display: grid;
  gap: var(--vf-space-1);
  align-content: start;
  overflow: hidden;
}

.vf-nav-item {
  width: 100%;
  min-height: var(--vf-control-height);
  display: flex;
  align-items: center;
  justify-content: start;
  gap: var(--vf-space-2);
  border-color: transparent;
  background: transparent;
  color: var(--vf-on-dark-muted);
  text-align: left;
  padding: var(--vf-space-1) var(--vf-space-2);
}

.vf-nav-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--vf-radius-card);
  color: var(--vf-on-dark-strong);
}

.vf-nav-icon .vf-svg-icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

.vf-nav-item.active,
.vf-nav-item:hover {
  background: transparent;
}

.vf-nav-item.active {
  color: color-mix(in srgb, var(--vf-go) 82%, var(--vf-on-dark));
  font-weight: var(--vf-weight-selected);
}

.vf-nav-item:hover {
  color: var(--vf-on-dark);
}

.vf-workspace-main {
  min-width: 0;
  height: 100vh;
  height: var(--vf-app-height, 100dvh);
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.vf-landing-workspace {
  background: var(--vf-paper);
}

.vf-page-title {
  display: block;
  color: var(--vf-ink);
  font-size: var(--vf-text-title);
}

/* The conversation owns the layout. The preview column does not exist in
   the grid template unless a preview is open, so a closed preview cannot
   reserve a track, a gap, or any right-side footprint. */
.vf-content-grid {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--vf-space-4);
  padding: 18px;
  overflow: hidden;
}

@media (min-width: 981px) {
  .vf-content-grid.has-preview-open {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    column-gap: var(--vf-space-4);
  }

  /* Amendment A: the drawer scrim only exists for the <=980px overlay
     drawer; the explicit desktop rail never needs a backdrop. */
  .vf-mobile-menu-scrim {
    display: none;
  }
}

.vf-chat-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  overflow: hidden;
  background: var(--vf-paper);
}

.vf-landing-chat-pane {
  border: 0;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
}

.vf-artifact-pane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 0;
  border-radius: var(--vf-radius-card);
  background: color-mix(in srgb, var(--vf-porcelain) 72%, transparent);
  box-shadow: none;
  overflow: hidden;
}

.vf-artifact-pane.has-work-stack {
  grid-template-rows: auto auto minmax(0, 1fr);
}

/* Closed or absent means gone: no box, no track, no ghost column.
   Correct layout beats animation here; the pane fades in on open
   (opacity only) and disappears deterministically on close. */
.vf-artifact-pane[hidden],
.vf-artifact-pane.is-closed {
  display: none;
}

@media (min-width: 981px) {
  .vf-artifact-pane {
    position: sticky;
    top: 86px;
    height: calc(var(--vf-app-height, 100dvh) - 110px);
    align-self: start;
    background: color-mix(in srgb, var(--vf-paper) 98%, transparent);
    box-shadow: none;
    animation: vfFadeIn var(--vf-duration-moderate) var(--vf-ease-enter);
  }
}

.vf-landing-canvas[hidden] {
  display: none;
}

.vf-artifact-pane.is-empty {
  opacity: 0.74;
}

.vf-artifact-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vf-space-3);
  padding: 12px 14px;
  border-bottom: 1px solid var(--vf-hairline);
}

.vf-artifact-surface {
  min-height: 0;
  overflow-y: auto;
  padding: var(--vf-space-panel);
}

.vf-work-stack-mount[hidden],
.vf-mobile-work-stack-header-mount[hidden] {
  display: none;
}

.vf-work-stack-mount {
  min-width: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--vf-hairline);
  background: var(--vf-paper);
}

.vf-artifact-empty {
  min-height: 220px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--vf-space-2);
  color: var(--vf-slate);
  text-align: center;
}

.vf-artifact-empty p {
  max-width: 320px;
  margin: 0;
}

.vf-artifact-empty-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: var(--vf-space-2);
  border: 0;
  border-radius: var(--vf-radius-full);
  background: color-mix(in srgb, var(--vf-ink) 5%, transparent);
  color: var(--vf-slate);
}

.vf-artifact-empty-icon .vf-svg-icon {
  width: 22px;
  height: 22px;
}

.vf-artifact-empty strong,
.vf-artifact-title {
  color: var(--vf-ink);
}

.vf-artifact-empty strong {
  font-size: var(--vf-text-subtitle);
}

.vf-artifacts-panel {
  display: grid;
  gap: var(--vf-space-3);
}

.vf-artifact-list {
  display: grid;
  gap: var(--vf-space-2);
}

.vf-artifact-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  min-height: 66px;
  padding: 10px;
  text-align: left;
  background: color-mix(in srgb, var(--vf-paper) 72%, transparent);
}

.vf-artifact-item .vf-muted {
  grid-column: 2;
}

.vf-artifact-thumb {
  grid-row: span 2;
  width: 38px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  color: var(--vf-slate);
  font-size: var(--vf-text-caption);
  font-weight: var(--vf-control-weight);
}

.vf-artifact-preview {
  display: grid;
  gap: var(--vf-space-3);
}

.vf-review-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  gap: var(--vf-space-panel);
  align-content: start;
  padding: 18px 16px 124px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--vf-go) 8%, transparent), transparent 240px),
    var(--vf-gallery);
}

.vf-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vf-space-3);
  padding: 14px 16px;
  background: color-mix(in srgb, var(--vf-paper) 95%, transparent);
  border-bottom: 1px solid var(--vf-hairline);
}

.vf-landing-header {
  background: color-mix(in srgb, var(--vf-porcelain) 86%, transparent);
  backdrop-filter: var(--vf-blur-header);
}

.vf-landing-workspace.is-chatting .vf-landing-header {
  min-height: 50px;
  padding: 8px 18px;
}

.vf-landing-workspace.is-chatting .vf-landing-header > div {
  display: flex;
  align-items: baseline;
  gap: var(--vf-space-2);
  min-width: 0;
}

.vf-landing-workspace.is-chatting .vf-page-title {
  font-size: var(--vf-text-reading);
  line-height: 1;
}

.vf-landing-workspace.is-chatting .vf-brand-subtitle {
  overflow: hidden;
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vf-landing-workspace.is-chatting .vf-breadcrumb {
  display: none;
}

.vf-landing-workspace.is-chatting .vf-top-action {
  min-height: 32px;
  max-width: 168px;
  overflow: hidden;
  padding: 6px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vf-top-action {
  min-height: var(--vf-control-height);
  border-radius: var(--vf-radius-pill);
  padding: 7px 12px;
  background: var(--vf-paper);
  color: var(--vf-carbon);
  font-size: var(--vf-text-small);
  font-weight: var(--vf-control-weight);
}

.vf-header-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-2);
  margin-left: auto;
}

.vf-preview-reopen {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-2);
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-pill);
  background: transparent;
  color: var(--vf-carbon);
  font-size: var(--vf-text-small);
  font-weight: var(--vf-control-weight);
  white-space: nowrap;
}

.vf-preview-reopen[hidden] {
  display: none;
}

.vf-preview-reopen:hover,
.vf-preview-reopen:focus-visible {
  color: var(--vf-ink);
  border-color: color-mix(in srgb, var(--vf-ink) 22%, var(--vf-hairline));
}

.vf-preview-reopen .vf-svg-icon {
  width: 14px;
  height: 14px;
}

.vf-jump-latest {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 104px;
  z-index: 4;
  width: fit-content;
  margin-inline: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-2);
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-full);
  background: var(--vf-paper);
  color: var(--vf-carbon);
  font-size: var(--vf-text-small);
  font-weight: var(--vf-control-weight);
  box-shadow: var(--vf-shadow-menu);
  animation: vfSurfaceEnter var(--vf-duration-fast) var(--vf-ease-enter);
}

.vf-jump-latest[hidden] {
  display: none;
}

.vf-jump-latest:hover,
.vf-jump-latest:focus-visible {
  color: var(--vf-ink);
}

.vf-jump-latest .vf-svg-icon {
  width: 14px;
  height: 14px;
}

.vf-app-update-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vf-space-3);
  flex-wrap: wrap;
  padding: var(--vf-space-3) var(--vf-space-4) calc(var(--vf-space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--vf-hairline);
  background: var(--vf-paper);
  color: var(--vf-ink);
  font-size: var(--vf-text-small);
  box-shadow: var(--vf-shadow-menu);
  animation: vfSurfaceEnter var(--vf-duration-fast) var(--vf-ease-enter);
}

.vf-app-update-banner[hidden] {
  display: none;
}

.vf-app-update-banner-refresh {
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-full);
  padding: 6px 16px;
  background: var(--vf-ink);
  color: var(--vf-paper);
  font-size: var(--vf-text-small);
  font-weight: var(--vf-control-weight);
  cursor: pointer;
}

.vf-app-update-banner-refresh:hover,
.vf-app-update-banner-refresh:focus-visible {
  opacity: 0.9;
}

.vf-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.vf-glyph {
  width: var(--vf-control-height);
  height: var(--vf-control-height);
  border-radius: 50%;
  background: var(--vf-ink);
  color: var(--vf-paper);
  display: grid;
  place-items: center;
  font-weight: var(--vf-weight-heading);
  flex: none;
}

.vf-brand-title,
.vf-card-title {
  color: var(--vf-ink);
  font-weight: var(--vf-weight-heading);
}

.vf-brand-subtitle,
.vf-status,
.vf-muted,
.vf-trust,
.vf-trust-line {
  color: var(--vf-slate);
}

.vf-brand-subtitle,
.vf-status,
.vf-muted {
  font-size: var(--vf-text-small);
}

.vf-breadcrumb {
  display: block;
  margin-top: 2px;
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  font-weight: 450;
}

.vf-sidebar .vf-memory-panel {
  border-color: var(--vf-on-dark-hairline);
}

.vf-sidebar .vf-meta-row {
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 7px 0;
  background: transparent;
  border-color: var(--vf-on-dark-hairline);
}

.vf-sidebar .vf-meta-row dt,
.vf-sidebar .vf-meta-row dd {
  color: var(--vf-on-dark-muted);
}

.vf-thread {
  padding: 18px 16px 128px;
  display: grid;
  gap: var(--vf-space-4);
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The thread scrolls at full pane width so the scrollbar sits quietly at
   the pane edge instead of beside the text; the content itself keeps a
   calm centered reading measure. */
.vf-workspace-shell .vf-thread {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--vf-space-3) 0 104px;
  container: vf-thread / inline-size;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--vf-ink) 18%, transparent) transparent;
}

.vf-workspace-shell .vf-thread {
  --vf-thread-readable-width: 860px;
  --vf-vee-message-width: 760px;
}

.vf-workspace-shell .vf-thread > * {
  width: min(860px, calc(100% - 48px));
  margin-inline: auto;
}

.vf-landing-canvas {
  width: min(860px, 100%);
  min-height: clamp(420px, 58vh, 620px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--vf-space-6);
  margin: 0 auto;
  padding: 48px 18px 34px;
}

.vf-landing-workspace.is-landing .vf-thread {
  display: none;
}

.vf-landing-workspace.is-chatting .vf-landing-canvas {
  display: none;
}

.vf-landing-workspace.is-chatting .vf-chat-pane {
  grid-template-rows: minmax(0, 1fr) auto;
}

.vf-landing-composer {
  width: min(860px, 100%);
  display: grid;
  gap: 0;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-control-radius);
  background: var(--vf-paper);
  color: var(--vf-ink);
  box-shadow: var(--vf-shadow-composer);
}

.vf-voice-composer {
  background: var(--vf-paper);
}

.vf-voice-input-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 42px 46px;
  gap: var(--vf-space-2);
  align-items: center;
}

.vf-landing-label {
  gap: var(--vf-space-2);
  font-size: 0;
}

.vf-landing-composer .vf-landing-input {
  min-height: 48px;
  max-height: 100px;
  border: 0;
  border-radius: 0;
  padding: 11px 4px;
  background: transparent;
  color: var(--vf-ink);
  font-size: var(--vf-text-reading);
  font-weight: 400;
  resize: none;
  overflow: hidden;
}

.vf-landing-composer .vf-landing-input::placeholder,
.vf-chat-composer .vf-chat-input::placeholder {
  color: color-mix(in srgb, var(--vf-carbon) 62%, transparent);
}

.vf-landing-composer .vf-landing-input:focus {
  outline: 0;
  border-color: transparent;
}

.vf-landing-composer:focus-within,
.vf-chat-composer:focus-within {
  border-color: color-mix(in srgb, var(--vf-go) 20%, var(--vf-hairline));
  box-shadow: var(--vf-shadow-composer);
}

.vf-landing-actions {
  justify-content: space-between;
  padding: 0 4px 2px;
}

.vf-landing-actions .vf-btn {
  min-width: 86px;
}

.vf-icon-button {
  width: 42px;
  height: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--vf-carbon);
}

.vf-icon-button:hover,
.vf-icon-button:focus-visible {
  background: transparent;
  color: var(--vf-ink);
}

.vf-attachment-button,
.vf-mic-button {
  color: var(--vf-slate);
  background: transparent;
  border-color: transparent;
}

.vf-attachment-button:hover,
.vf-attachment-button:focus-visible,
.vf-mic-button:hover,
.vf-mic-button:focus-visible {
  color: var(--vf-ink);
  background: transparent;
  border-color: transparent;
}

.vf-mobile-menu-button,
.vf-mobile-menu-close {
  display: none;
}

.vf-send-icon {
  width: 40px;
  height: 40px;
  min-height: 40px;
  background: var(--vf-go);
  color: var(--vf-on-signal);
}

.vf-send-icon:hover,
.vf-send-icon:focus-visible,
.vf-mic-button.is-listening {
  background: var(--vf-go-deep);
  color: var(--vf-on-signal);
}

.vf-svg-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Vee Source-to-Request Ingestion v1 (issue 598) PR1 - composer drag-over
   state and pre-request source chips. Secondary to the conversation (sits
   inside the composer, not the message list), per the Visible Surface
   Standard. */
.vf-landing-composer.is-drag-over,
.vf-chat-composer.is-drag-over {
  border-color: var(--vf-go);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vf-go) 24%, transparent), var(--vf-shadow-composer);
}

.vf-source-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-2);
  padding: 0 4px 4px;
}

.vf-source-chips[hidden] {
  display: none;
}

.vf-source-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-1);
  max-width: 100%;
  min-height: 28px;
  padding: 4px 6px 4px var(--vf-space-3);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-pill);
  background: var(--vf-porcelain);
  color: var(--vf-carbon);
  font-size: var(--vf-text-label);
}

.vf-source-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.vf-source-chip-status {
  color: var(--vf-slate);
  white-space: nowrap;
}

.vf-source-chip-uploading {
  border-color: color-mix(in srgb, var(--vf-slate) 30%, var(--vf-hairline));
}

.vf-source-chip-ready {
  border-color: color-mix(in srgb, var(--vf-go) 24%, var(--vf-hairline));
  background: var(--vf-go-wash);
  color: var(--vf-go-deep);
}

.vf-source-chip-blocked,
.vf-source-chip-error {
  border-color: color-mix(in srgb, var(--vf-stop) 28%, var(--vf-hairline));
  background: var(--vf-stop-wash);
  color: var(--vf-stop-deep);
}

.vf-source-chip-blocked .vf-source-chip-status,
.vf-source-chip-error .vf-source-chip-status {
  color: var(--vf-stop-deep);
}

.vf-source-chip-remove {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
}

.vf-source-chip-remove:hover,
.vf-source-chip-remove:focus-visible {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.vf-source-chip-remove .vf-svg-icon {
  width: 13px;
  height: 13px;
}

.vf-landing-chips {
  max-width: 760px;
  justify-content: center;
  flex-wrap: wrap;
  overflow: visible;
}

.vf-vertical-suggestions {
  margin-top: -8px;
  padding: 8px 12px 4px;
}

.vf-landing-chips .vf-chip {
  min-height: 34px;
  background: color-mix(in srgb, var(--vf-paper) 62%, transparent);
  border-color: color-mix(in srgb, var(--vf-ink) 9%, transparent);
  color: var(--vf-carbon);
  font-size: var(--vf-text-small);
}

.vf-quiet-prompts {
  opacity: 0.86;
}

.vf-voice-status,
.vf-transcript {
  max-width: 720px;
  margin: 0;
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
  text-align: center;
}

.vf-mic-button.is-realtime-active {
  background: var(--vf-go-deep);
  color: var(--vf-on-signal);
}

.vf-realtime-voice-strip {
  display: grid;
  gap: 4px;
  margin: 6px 4px 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--vf-go) 7%, var(--vf-paper));
  border: 1px solid color-mix(in srgb, var(--vf-go) 18%, transparent);
}

.vf-realtime-voice-strip[data-realtime-voice-state="degraded"] {
  background: color-mix(in srgb, var(--vf-caution) 8%, var(--vf-paper));
  border-color: color-mix(in srgb, var(--vf-caution) 26%, transparent);
}

.vf-realtime-voice-state-label {
  font-size: var(--vf-text-small);
  font-weight: 600;
  color: var(--vf-go-deep);
}

.vf-realtime-voice-strip[data-realtime-voice-state="degraded"] .vf-realtime-voice-state-label {
  color: var(--vf-caution);
}

.vf-realtime-caption {
  margin: 0;
  font-size: var(--vf-text-small);
  color: var(--vf-carbon);
  line-height: 1.4;
}

.vf-realtime-caption-user {
  color: var(--vf-slate);
}

.vf-realtime-voice-end {
  justify-self: start;
  min-height: 28px;
  padding: 2px 12px;
  margin-top: 2px;
}

.vf-recent-chats {
  width: min(760px, 100%);
  display: grid;
  gap: var(--vf-space-2);
  margin-top: 2px;
}

.vf-recent-title {
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  font-weight: var(--vf-control-weight);
}

.vf-recent-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vf-space-2);
}

.vf-recent-chat {
  display: grid;
  gap: 2px;
  min-height: 56px;
  padding: var(--vf-space-3) var(--vf-space-3);
  text-align: left;
  background: color-mix(in srgb, var(--vf-paper) 72%, transparent);
}

.vf-recent-chat span {
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
}

.vf-experience-preview {
  width: min(760px, 100%);
  box-shadow: none;
}

/* Inside the pane the preview is one calm surface: the card wrapper adds
   no chrome, and the request sections are the only bordered layer. */
.vf-artifact-pane .vf-preview-card {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.vf-client-preview {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.vf-client-preview-title {
  color: var(--vf-ink);
}

.vf-magic-link-preview {
  display: grid;
  gap: var(--vf-space-panel);
  padding: 0;
  border: 0;
  background: transparent;
}

.vf-magic-link-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--vf-carbon);
  font-size: var(--vf-text-small);
  font-weight: var(--vf-control-weight);
}

.vf-magic-link-brand::before {
  content: "";
  width: 3px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--vf-firm-form-accent, var(--vf-go));
}

.vf-magic-link-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--vf-radius-card);
  background: var(--vf-go);
  color: var(--vf-on-signal);
  font-size: var(--vf-text-label);
  font-weight: var(--vf-weight-heading);
  letter-spacing: 0;
}

.vf-brand-logo-mark {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--vf-carbon);
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
}

.vf-magic-link-mark.vf-brand-logo-mark {
  background: transparent;
  color: var(--vf-carbon);
  border-radius: 0;
  box-shadow: none;
}

.vf-product-logo-mark {
  width: 32px;
  height: 32px;
}

.vf-product-logo-svg {
  width: 26px;
  height: 26px;
  display: block;
}

.vf-brand-logo-mark[data-logo-fallback="true"] {
  font-size: var(--vf-text-label);
  font-weight: var(--vf-weight-heading);
}

.vf-brand-logo-image,
.vf-magic-link-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.vf-magic-link-intro {
  display: grid;
  gap: var(--vf-space-2);
}

.vf-magic-link-intro p {
  margin: 0;
  color: var(--vf-carbon);
}

.vf-magic-link-fields {
  display: grid;
  gap: var(--vf-space-3);
}

.vf-client-form-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--vf-space-3);
  align-items: center;
  color: var(--vf-carbon);
  font-size: var(--vf-text-small);
}

.vf-client-form-progress-bar {
  height: 4px;
  overflow: hidden;
  border-radius: var(--vf-radius-card);
  background: color-mix(in srgb, var(--vf-ink) 9%, transparent);
}

.vf-client-form-progress-fill {
  display: block;
  width: 25%;
  height: 100%;
  border-radius: inherit;
  background: var(--vf-go);
}

.vf-client-form-next {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-1);
  color: var(--vf-carbon);
  font-size: var(--vf-text-small);
}

.vf-client-form-next strong {
  color: var(--vf-ink);
}

.vf-magic-link-pro-chrome {
  display: grid;
  gap: var(--vf-space-2);
  margin-bottom: var(--vf-space-3);
}

.vf-magic-link-pro-chrome-annotations {
  display: grid;
  gap: var(--vf-space-1);
}

.vf-client-form-sections {
  display: grid;
  gap: var(--vf-space-3);
}

.vf-client-form-section {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--vf-ink) 6%, transparent);
  border-radius: var(--vf-radius-card);
  background: var(--vf-paper);
}

.vf-client-form-section.is-blocked {
  border-color: color-mix(in srgb, var(--vf-stop) 24%, transparent);
  background: var(--vf-stop-wash);
}

.vf-client-form-section-head {
  min-width: 0;
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 13px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.vf-client-form-section-head:hover .vf-client-form-chevron {
  color: var(--vf-ink);
}

.vf-client-form-section-head:hover .vf-client-form-section-copy span {
  color: var(--vf-carbon);
}

.vf-client-form-section-head:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vf-go) 24%, transparent);
  outline-offset: -2px;
}

.vf-client-form-state {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid var(--vf-hairline);
  border-radius: 50%;
  color: var(--vf-slate);
}

.vf-client-form-state .vf-svg-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}

.vf-client-form-section.is-complete .vf-client-form-state {
  background: var(--vf-go-wash);
  border-color: color-mix(in srgb, var(--vf-go) 55%, transparent);
  color: var(--vf-go-deep);
}

.vf-client-form-section.is-active .vf-client-form-state {
  background: transparent;
  border-color: var(--vf-go);
  color: var(--vf-go-deep);
}

.vf-client-form-section.is-active .vf-client-form-state::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vf-go-deep);
}

.vf-client-form-section.is-blocked .vf-client-form-state {
  background: var(--vf-stop-wash);
  border-color: color-mix(in srgb, var(--vf-stop) 45%, transparent);
  color: var(--vf-stop);
}

.vf-client-form-section-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.vf-client-form-section-copy strong {
  color: var(--vf-ink);
  font-size: var(--vf-text-body);
  font-weight: var(--vf-weight-selected);
}

.vf-client-form-section-copy span {
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
}

.vf-client-form-chevron {
  color: var(--vf-slate);
  font-size: var(--vf-text-emphasis);
  font-weight: 400;
  line-height: 1;
}

.vf-client-form-section-body {
  display: grid;
  gap: var(--vf-space-3);
  padding: 0 var(--vf-space-panel) var(--vf-space-panel);
  animation: vfFadeIn var(--vf-duration-moderate) var(--vf-ease-enter);
}

.vf-client-form-section-body[hidden] {
  display: none;
}

.vf-client-form-section-note {
  margin: 0;
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
}

.vf-magic-field {
  display: grid;
  gap: var(--vf-space-1);
  color: var(--vf-carbon);
  font-size: var(--vf-text-label);
  font-weight: 430;
}

.vf-magic-field .vf-input {
  min-height: 40px;
  max-height: none;
  resize: none;
  border-radius: var(--vf-radius-large);
  padding: 9px 10px;
  background: var(--vf-paper);
  font-size: var(--vf-text-body);
  font-weight: 400;
}

.vf-magic-field .vf-input[readonly] {
  cursor: text;
  color: var(--vf-carbon);
  background: color-mix(in srgb, var(--vf-paper) 78%, transparent);
}

.vf-magic-field .vf-input[readonly]:hover {
  border-color: color-mix(in srgb, var(--vf-ink) 18%, var(--vf-hairline));
}

.vf-magic-field .vf-input[readonly]:focus {
  outline: 2px solid color-mix(in srgb, var(--vf-go) 24%, transparent);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--vf-go) 40%, var(--vf-hairline));
}

.vf-preview-hint {
  margin: 0;
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
}

/* Amendment A2.2-3: edit-in-preview chrome + client-facing field notes. */
.vf-magic-field-note {
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
  font-weight: 400;
}

.vf-preview-version-chip {
  align-self: flex-start;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--vf-line);
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
  font-weight: 500;
}

.vf-preview-approval-voided {
  font-weight: 500;
}

/* Inline edit-in-preview: editing happens on the rendered surface itself.
   The affordance stays quiet - a subtle hover cue on the field name, plain
   text note controls, no filled or primary treatment anywhere. */
.vf-magic-field.is-editable > span:first-child:not(.vf-preview-inline-edit) {
  justify-self: start;
  cursor: text;
  border-bottom: 1px dashed transparent;
}

.vf-magic-field.is-editable:hover > span:first-child:not(.vf-preview-inline-edit) {
  border-bottom-color: color-mix(in srgb, var(--vf-ink) 24%, transparent);
}

.vf-preview-inline-edit,
.vf-preview-inline-note-edit {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-2);
  width: 100%;
}

.vf-preview-inline-edit-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  padding: 4px 8px;
  font-size: var(--vf-text-small);
}

.vf-preview-inline-required {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-1);
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
  white-space: nowrap;
}

.vf-preview-section-note-add {
  justify-self: start;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--vf-slate);
  font: inherit;
  font-size: var(--vf-text-small);
  cursor: pointer;
}

.vf-preview-section-note-add:hover {
  color: var(--vf-carbon);
  text-decoration: underline;
}

.vf-magic-section-note {
  margin: 0;
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
}

.vf-magic-upload {
  display: grid;
  gap: var(--vf-space-1);
  padding: var(--vf-space-3);
  border: 1px dashed var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  background: color-mix(in srgb, var(--vf-ink) 2%, transparent);
}

.vf-magic-upload span:last-child,
.vf-magic-checklist {
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
}

.vf-client-form-save,
.vf-client-form-submit {
  min-height: 44px;
  border: 0;
  border-radius: var(--vf-control-radius);
  font: inherit;
  font-weight: var(--vf-control-weight);
}

/* A blocked action reads as blocked: never action green. */
.vf-client-form-save {
  background: transparent;
  color: var(--vf-slate);
}

.vf-client-form-submit {
  background: var(--vf-go);
  color: var(--vf-on-signal);
}

.vf-client-form-save.is-readonly,
.vf-client-form-submit.is-readonly,
.vf-client-form-save[disabled],
.vf-client-form-submit[disabled] {
  cursor: default;
  opacity: 0.72;
  box-shadow: none;
}

.vf-client-form-submit.is-readonly,
.vf-client-form-submit[disabled] {
  background: color-mix(in srgb, var(--vf-ink) 8%, transparent);
  color: var(--vf-carbon);
}

.vf-transcript {
  color: var(--vf-carbon);
}

.vf-message {
  width: min(860px, 100%);
  display: grid;
  gap: 3px;
  margin: 0 auto;
  color: var(--vf-ink);
  font-size: var(--vf-text-reading);
  line-height: 1.55;
}

.vf-message-user {
  justify-items: end;
}

.vf-message-user .vf-message-copy {
  max-width: min(680px, 82%);
  padding: var(--vf-space-3) var(--vf-space-3);
  border-radius: var(--vf-radius-large);
  color: var(--vf-paper);
  background: var(--vf-ink);
  border-bottom-right-radius: var(--vf-radius-tiny);
}

.vf-message-vee {
  justify-items: start;
}

.vf-message-vee .vf-message-copy {
  max-width: min(760px, 100%);
  white-space: pre-wrap;
}

/* Amendment A (issue 623): deliberately not a speech-bubble shape - a bordered,
   full-measure notice so a legacy (pre-message_log) conversation can never
   read as a successfully restored reply. */
.vf-thread-legacy-notice {
  /* Width/alignment come from the shared governed-column rule below
     (.vf-workspace-shell .vf-thread > .vf-work-item-card, .vf-artifact-list,
     .vf-thread-legacy-notice) - only this element's own visual treatment
     lives here. */
  display: grid;
  gap: var(--vf-space-1);
  margin-top: var(--vf-space-2);
  margin-bottom: var(--vf-space-2);
  padding: var(--vf-space-3);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  background: var(--vf-porcelain);
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
}

.vf-thread-legacy-notice strong {
  color: var(--vf-ink);
  font-weight: var(--vf-weight-selected);
}

.vf-thread-legacy-notice-label {
  color: var(--vf-slate);
  font-weight: var(--vf-weight-selected);
}

/* Timestamps are reference detail, not content; they surface on hover or
   focus so the conversation reads as an exchange, not a log. */
.vf-message-time {
  color: var(--vf-slate);
  font-size: var(--vf-text-caption);
  opacity: 0;
  transition: opacity var(--vf-duration-fast) var(--vf-ease);
}

.vf-message:hover .vf-message-time,
.vf-message:focus-within .vf-message-time {
  opacity: 1;
}

.vf-message-user .vf-message-time {
  padding-right: 6px;
}

.vf-message-streaming .vf-message-copy::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: vfTypingPulse var(--vf-duration-pulse) var(--vf-ease-in-out) infinite;
}

.vf-message-typing .vf-message-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--vf-slate);
}

.vf-typing-dots {
  display: inline-flex;
  gap: 3px;
}

.vf-typing-dots span {
  width: 4px;
  height: 4px;
  border-radius: var(--vf-radius-full);
  background: currentColor;
  animation: vfTypingPulse var(--vf-duration-pulse) var(--vf-ease-in-out) infinite;
}

.vf-typing-dots span:nth-child(2) {
  animation-delay: var(--vf-duration-fast);
}

.vf-typing-dots span:nth-child(3) {
  animation-delay: calc(var(--vf-duration-fast) * 2);
}

@keyframes vfTypingPulse {
  0%,
  80%,
  100% {
    opacity: 0.32;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.vf-card {
  display: grid;
  gap: var(--vf-space-3);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  background: color-mix(in srgb, var(--vf-paper) 96%, transparent);
  padding: var(--vf-space-panel);
  box-shadow: var(--vf-shadow-soft);
}

.vf-workflow-command-card {
  border-color: var(--vf-hairline);
}

.vf-context-card {
  box-shadow: none;
}

.vf-landing-chat-pane .vf-thread-context {
  display: none;
}

.vf-chat-composer-mount[hidden] {
  display: none;
}

.vf-chat-composer {
  width: min(860px, calc(100% - 48px));
  margin: 0 auto;
  padding: 8px 10px;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-control-radius);
  background: var(--vf-paper);
  color: var(--vf-ink);
  box-shadow: var(--vf-shadow-composer);
}

.vf-chat-composer-mount {
  display: grid;
  justify-items: center;
  padding: var(--vf-space-2) clamp(14px, 3vw, 28px) 18px;
  background: transparent;
}

.vf-chat-composer .vf-voice-input-row {
  grid-template-columns: 44px minmax(0, 1fr) 42px 46px;
  gap: var(--vf-space-2);
}

.vf-chat-composer .vf-chat-input {
  min-height: 48px;
  max-height: 96px;
  border: 0;
  border-radius: 0;
  padding: 11px 4px;
  resize: none;
  background: transparent;
  color: var(--vf-ink);
  font-size: var(--vf-text-reading);
  font-weight: 400;
  line-height: 1.35;
  overflow: hidden;
}

.vf-chat-composer .vf-chat-input:focus {
  outline: 0;
  background: transparent;
  border-color: transparent;
}

.vf-card-head {
  display: grid;
  gap: var(--vf-space-1);
}

.vf-kicker {
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  font-weight: 430;
  letter-spacing: 0;
  text-transform: none;
}

.vf-trust-line {
  margin: 0;
  font-size: var(--vf-text-small);
}

.vf-meta-grid {
  display: grid;
  gap: 0;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  overflow: hidden;
}

.vf-meta-row {
  display: grid;
  grid-template-columns: minmax(86px, 0.42fr) 1fr;
  gap: var(--vf-space-2);
  margin: 0;
  padding: var(--vf-space-2) var(--vf-space-2);
  background: var(--vf-paper);
  border-bottom: 1px solid var(--vf-hairline);
}

.vf-meta-row:last-child {
  border-bottom: 0;
}

.vf-meta-row dt {
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  font-weight: 430;
  letter-spacing: 0;
  text-transform: none;
}

.vf-meta-row dd {
  margin: 0;
  min-width: 0;
  color: var(--vf-carbon);
  overflow-wrap: anywhere;
}

.vf-known-context-card {
  box-shadow: none;
  background: color-mix(in srgb, var(--vf-gallery) 48%, var(--vf-paper));
}

.vf-known-context-line {
  margin: 0;
  color: var(--vf-carbon);
  font-size: var(--vf-text-small);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.vf-reasoning-disclosure {
  color: var(--vf-slate);
  font-size: var(--vf-text-caption);
  line-height: 1.35;
  max-width: 56ch;
  opacity: 0.82;
}

.vf-message-vee .vf-reasoning-disclosure {
  justify-self: start;
  margin-top: var(--vf-space-1);
  width: min(56ch, 100%);
}

.vf-reference-line {
  color: var(--vf-slate);
  font-size: var(--vf-text-caption);
  line-height: 1.35;
  max-width: 56ch;
  opacity: 0.82;
  margin: 0;
}

.vf-message-vee .vf-reference-line {
  justify-self: start;
  margin-top: var(--vf-space-1);
  width: min(56ch, 100%);
}

.vf-reasoning-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-1);
  cursor: pointer;
  color: var(--vf-slate);
  font-size: var(--vf-text-caption);
  font-weight: var(--vf-control-weight);
  line-height: 1.25;
  list-style-position: inside;
  min-height: 22px;
  padding: 0;
}

.vf-reasoning-summary::marker {
  color: color-mix(in srgb, var(--vf-slate) 70%, transparent);
}

.vf-reasoning-disclosure[open] .vf-reasoning-summary {
  color: var(--vf-carbon);
}

.vf-reasoning-body {
  display: grid;
  gap: var(--vf-space-2);
  margin-top: var(--vf-space-1);
  padding-left: var(--vf-space-3);
  border-left: 1px solid var(--vf-hairline);
}

.vf-reasoning-section {
  display: grid;
  gap: 2px;
}

.vf-reasoning-section .vf-list {
  color: var(--vf-slate);
  font-size: var(--vf-text-caption);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.vf-list-group {
  display: grid;
  gap: var(--vf-space-2);
}

.vf-list-heading {
  font-size: var(--vf-text-small);
}

.vf-reasoning-section .vf-list-heading {
  color: var(--vf-slate);
  font-size: var(--vf-text-caption);
  font-weight: var(--vf-control-weight);
}

@media (max-width: 640px) {
  .vf-reasoning-disclosure {
    max-width: 100%;
    opacity: 0.66;
  }

  .vf-reasoning-disclosure[open] {
    opacity: 0.82;
  }

  .vf-reasoning-body {
    gap: var(--vf-space-1);
    padding-left: var(--vf-space-2);
  }
}

.vf-list,
.vf-badge-list {
  margin: 0;
  padding-left: 18px;
}

.vf-card-actions,
.vf-actions {
  display: flex;
  gap: var(--vf-space-2);
  flex-wrap: wrap;
}

.vf-card-actions:empty,
.vf-actions:empty,
.vf-chip-row:empty,
.vf-chips:empty {
  display: none;
}

.vf-btn,
button,
a.vf-btn {
  min-height: var(--vf-control-height);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-control-radius);
  padding: var(--vf-space-2) var(--vf-space-3);
  background: var(--vf-paper);
  color: var(--vf-ink);
  font: inherit;
  font-size: var(--vf-text-small);
  font-weight: var(--vf-control-weight);
  letter-spacing: var(--vf-control-letter-spacing);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.vf-btn-go,
button.primary,
.primary {
  background: var(--vf-go);
  border-color: var(--vf-go);
  color: var(--vf-on-signal);
}

.vf-btn-go:hover,
button.primary:hover,
.primary:hover {
  background: var(--vf-go);
  opacity: 0.9;
}

.vf-btn-secondary {
  background: var(--vf-gallery);
}

.vf-btn-guarded:disabled {
  color: var(--vf-slate);
  cursor: not-allowed;
  background: color-mix(in srgb, var(--vf-caution) 6%, var(--vf-paper));
  border-color: color-mix(in srgb, var(--vf-caution) 24%, transparent);
}

.vf-search-panel {
  display: grid;
  gap: var(--vf-space-3);
}

.vf-module-panel {
  display: grid;
  gap: var(--vf-space-panel);
}

.vf-module-actions {
  display: flex;
  gap: var(--vf-space-2);
  flex-wrap: wrap;
}

.vf-search-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-control-radius);
  padding: 10px 12px;
  background: var(--vf-paper);
  color: var(--vf-ink);
  font: inherit;
}

.vf-search-results {
  display: grid;
  gap: var(--vf-space-2);
}

.vf-search-result {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: auto;
  padding: var(--vf-space-3) var(--vf-space-3);
  text-align: left;
  background: var(--vf-paper);
}

.vf-chip-row,
.vf-chips {
  display: flex;
  gap: var(--vf-space-2);
  overflow-x: auto;
  padding-bottom: 4px;
}

.vf-chip {
  flex: none;
  min-height: 32px;
  border-radius: var(--vf-radius-pill);
  white-space: nowrap;
}

.vf-thread .vf-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-2);
  overflow: visible;
  padding: 0;
  opacity: 1;
  transform: none;
  animation: none;
  pointer-events: auto;
}

.vf-thread .vf-action-chip {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  background: var(--vf-paper);
  border-color: var(--vf-hairline);
  color: var(--vf-ink);
}

.vf-thread .vf-action-chip-primary {
  background: color-mix(in srgb, var(--vf-go) 7%, var(--vf-paper));
  border-color: color-mix(in srgb, var(--vf-go) 28%, var(--vf-hairline));
  color: var(--vf-go-deep);
  font-weight: var(--vf-weight-selected);
}

.vf-thread .vf-action-chip.is-selected,
.vf-thread .vf-action-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--vf-ink) 6%, var(--vf-paper));
  border-color: var(--vf-ink);
  color: var(--vf-ink);
}

.vf-chip-primary {
  background: transparent;
  border-color: transparent;
  color: var(--vf-go-deep);
  font-weight: var(--vf-weight-selected);
}

.vf-composer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: var(--vf-space-2);
  /* Safe-area inset applies only when the keyboard is closed; --vf-keyboard-inset
     cancels it while the keyboard is open so the composer docks against the
     keyboard without a stacked second offset. */
  padding: var(--vf-space-2) var(--vf-space-3)
    calc(var(--vf-space-3) + max(env(safe-area-inset-bottom, 0px) - var(--vf-keyboard-inset, 0px), 0px));
  background: color-mix(in srgb, var(--vf-paper) 97%, transparent);
  border-top: 1px solid var(--vf-hairline);
}

.vf-workspace-shell .vf-composer {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
}

.vf-workspace-shell .vf-chat-composer {
  padding: 8px 10px;
}

.vf-label {
  display: grid;
  gap: var(--vf-space-2);
  color: var(--vf-carbon);
  font-weight: 430;
}

.vf-input {
  width: 100%;
  min-height: 72px;
  max-height: 160px;
  resize: vertical;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-control-radius);
  padding: var(--vf-space-3);
  background: var(--vf-gallery);
  color: var(--vf-ink);
  font: inherit;
}

.vf-input:focus {
  outline: 2px solid color-mix(in srgb, var(--vf-go) 24%, transparent);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--vf-go) 40%, var(--vf-hairline));
  background: var(--vf-paper);
}

.vf-trust {
  font-size: var(--vf-text-small);
}

.vf-integrations {
  display: none;
}

.vf-memory-panel {
  display: grid;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  overflow: hidden;
}

/* --- Vee Memory settings: one title, calm rhythm, calibrated destructive rows --- */
.vf-memory-settings {
  display: grid;
  justify-items: start;
  gap: var(--vf-space-4);
  max-width: 640px;
}

.vf-memory-settings > * {
  margin: 0;
}

.vf-memory-settings .vf-trust-line {
  color: var(--vf-slate);
}

.vf-memory-status {
  color: var(--vf-go-deep);
  font-size: var(--vf-text-small);
  font-weight: var(--vf-weight-selected);
}

.vf-memory-view-heading {
  margin-top: var(--vf-space-2);
  font-size: var(--vf-text-body);
  font-weight: var(--vf-weight-heading);
}

.vf-memory-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-2) var(--vf-space-5);
}

.vf-memory-toggle,
.vf-memory-confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-2);
  color: var(--vf-carbon);
  font-size: var(--vf-text-body);
  cursor: pointer;
}

.vf-memory-toggle input[type="checkbox"],
.vf-memory-confirm input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  min-height: 16px;
  display: grid;
  place-content: center;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--vf-ink) 20%, transparent);
  border-radius: var(--vf-radius-tiny);
  background: var(--vf-paper);
}

.vf-memory-toggle input[type="checkbox"]::before,
.vf-memory-confirm input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: transform var(--vf-duration-fast) var(--vf-ease-enter);
  background: var(--vf-go-deep);
  clip-path: polygon(14% 44%, 0 58%, 38% 96%, 100% 18%, 86% 6%, 36% 68%);
}

.vf-memory-toggle input[type="checkbox"]:checked,
.vf-memory-confirm input[type="checkbox"]:checked {
  border-color: var(--vf-go-deep);
}

.vf-memory-toggle input[type="checkbox"]:checked::before,
.vf-memory-confirm input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.vf-memory-toggle input[type="checkbox"]:focus-visible,
.vf-memory-confirm input[type="checkbox"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vf-go) 28%, transparent);
  outline-offset: 2px;
}

.vf-memory-list {
  width: 100%;
  display: grid;
  gap: var(--vf-space-1);
}

.vf-memory-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--vf-space-3);
  min-height: 44px;
  padding: var(--vf-space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--vf-ink) 6%, transparent);
}

.vf-memory-row .vf-kicker {
  white-space: nowrap;
}

.vf-memory-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vf-memory-clear {
  width: 100%;
  display: grid;
  gap: var(--vf-space-3);
  margin-top: var(--vf-space-2);
  padding-top: var(--vf-space-4);
  border-top: 1px solid var(--vf-hairline);
}

/* The warning reads once; confirm and the compact danger action share one row. */
.vf-memory-clear-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--vf-space-3);
}

.vf-memory-clear .vf-btn-danger {
  flex: none;
  min-height: 36px;
}

/* Destructive focus reads in signal.stop, never signal.go. This is the product
   theme's danger-focus treatment (the generated bridge names it
   --vf-shadow-danger-focus); it resolves to the same signal.stop role. */
.vf-memory-clear .vf-btn-danger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vf-stop) 55%, transparent);
  outline-offset: 2px;
}

@media (max-width: 680px) {
  .vf-memory-clear .vf-btn-danger {
    width: 100%;
  }
}

.vf-preview-sections[hidden] {
  display: none;
}

.vf-badge {
  margin-bottom: 4px;
}

.vf-review-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vf-space-2);
  padding: var(--vf-space-panel);
  background: color-mix(in srgb, var(--vf-paper) 97%, transparent);
  border-top: 1px solid var(--vf-hairline);
}

.vf-review-actions .vf-btn-go {
  grid-column: span 2;
}

.vf-receipt-icon,
.vf-error-icon,
.vf-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: var(--vf-weight-heading);
}

.vf-receipt-icon .vf-svg-icon,
.vf-error-icon .vf-svg-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.vf-receipt-icon {
  background: var(--vf-go);
  color: var(--vf-on-signal);
}

.vf-receipt-failure .vf-receipt-icon {
  background: var(--vf-stop-wash);
  color: var(--vf-stop);
}

.vf-error-card {
  border-color: color-mix(in srgb, var(--vf-stop) 28%, transparent);
  background: var(--vf-stop-wash);
}

.vf-error-icon {
  border: 2px solid color-mix(in srgb, var(--vf-stop) 45%, transparent);
  background: var(--vf-stop-wash);
  color: var(--vf-stop);
}

.vf-inline-link {
  font-weight: var(--vf-control-weight);
}

@media (min-width: 760px) {
  .vf-shell,
  .vf-review-shell,
  .vf-composer,
  .vf-review-actions {
    max-width: 560px;
    margin: 0 auto;
  }

  .vf-shell,
  .vf-review-shell {
    border-left: 1px solid var(--vf-hairline);
    border-right: 1px solid var(--vf-hairline);
  }
}

@media (min-width: 760px) {
  .vf-workspace-shell,
  .vf-workspace-shell .vf-composer {
    max-width: none;
    margin: 0;
  }

  .vf-workspace-shell {
    border: 0;
  }
}

/* Controlling Amendment A (issue 623): the 681-980px band previously rendered
   the sidebar as a horizontal top bar - CSS Grid track-sizing bugs aside
   (see the removed comment this replaced), a full-width slab across the top
   of the viewport obscured the workspace and was never a coherent compact
   mode. This band now reuses the exact same left overlay drawer mechanics as
   <=680px below (position:fixed, scrim, close control, Escape, focus
   containment - all owned by vee-mobile.js's setMobileMenuOpen), just with a
   narrower Amendment-A-specified drawer width instead of full-bleed 100vw.
   >=981px keeps the explicit desktop rail (58px collapsed / 320px expanded,
   scoped above); nothing in that band changes. */
@media (max-width: 980px) {
  .vf-workspace-shell {
    /* The base (>=981px-oriented) grid-template-columns: 58px minmax(0,1fr)
       reserved a real 58px column even though the drawer is now
       position:fixed and out of grid flow, leaving main as the sole grid
       item auto-placed into that narrow first column instead of spanning
       full width - confirmed live (main measured 58px wide at 960px). One
       column here is correct: the drawer never shares layout space with
       main, it overlays on top of it. */
    grid-template-columns: 1fr;
    height: var(--vf-app-height, 100dvh);
    min-height: var(--vf-app-height, 100dvh);
    overflow: hidden;
  }

  .vf-workspace-main {
    grid-column: 1;
  }

  .vf-mobile-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: var(--vf-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--vf-duration-fast) var(--vf-ease);
  }

  .vf-workspace-shell.is-mobile-menu-open .vf-mobile-menu-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .vf-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    /* Amendment A: a bounded drawer, never full-bleed - at least a 64px
       "safe gutter" of the underlying workspace stays visible (and tappable
       via the scrim) behind it, on any viewport down to 390px. */
    width: min(320px, calc(100vw - 64px));
    min-height: 100dvh;
    display: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-rows: max-content;
    align-content: start;
    align-items: start;
    row-gap: var(--vf-space-4);
    padding: calc(var(--vf-space-4) + env(safe-area-inset-top, 0px)) var(--vf-space-4)
      calc(var(--vf-space-4) + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--vf-shadow-drawer);
    transform: none;
    transition: none;
    overflow-y: auto;
    z-index: 30;
  }

  .vf-workspace-shell.is-mobile-menu-open .vf-sidebar,
  .vf-sidebar.is-mobile-menu-open {
    display: grid;
    transform: none;
  }

  .vf-sidebar.is-expanded,
  .vf-sidebar:hover,
  .vf-sidebar:focus-within {
    width: min(320px, calc(100vw - 64px));
  }

  .vf-mobile-menu-button,
  .vf-mobile-menu-close {
    display: grid;
  }

  .vf-mobile-menu-close {
    justify-self: end;
    color: var(--vf-on-dark);
  }

  .vf-sidebar .vf-firm-name,
  .vf-sidebar .vf-nav-label,
  .vf-sidebar .vf-brand-copy,
  .vf-sidebar .vf-conversation-tools,
  .vf-sidebar .vf-conversation-list,
  .vf-sidebar .vf-history-section,
  .vf-sidebar .vf-sidebar-toggle {
    opacity: 1;
    pointer-events: auto;
  }

  .vf-sidebar .vf-conversation-panel {
    width: 100%;
  }

  .vf-sidebar .vf-nav {
    grid-column: auto;
    display: grid;
    gap: 4px;
    width: 100%;
    overflow: visible;
  }

  .vf-sidebar .vf-nav-item {
    width: 100%;
    min-height: 48px;
    gap: 12px;
    padding: 10px 12px;
    justify-content: start;
    text-align: left;
  }

  .vf-sidebar .vf-nav-icon {
    width: 28px;
    height: 28px;
  }

  .vf-sidebar .vf-new-chat-button {
    min-height: 48px;
  }

  .vf-content-grid {
    grid-template-columns: 1fr;
    padding: var(--vf-space-panel);
  }

}

@media (max-width: 680px) {
  /* Amendment A (issue 623): the drawer's own position/width/visibility/
     internal-layout mechanics now live once, in the @media (max-width: 980px)
     block above, which already covers this narrower range too - duplicating
     them here at equal specificity would let this block's later source order
     win and silently re-widen the drawer back to 100vw below 680px only,
     producing exactly the inconsistent-width bug Amendment A closes. Only
     genuinely phone-specific content adjustments (not drawer mechanics)
     remain in this block. */
  .vf-landing-workspace.is-chatting .vf-landing-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .vf-landing-workspace.is-chatting .vf-landing-header > div {
    min-width: 0;
  }

  .vf-landing-workspace.is-chatting .vf-top-action {
    display: none;
  }

  .vf-content-grid {
    padding: 0 14px 14px;
    gap: 0;
  }

  .vf-chat-pane {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .vf-mobile-work-stack-header-mount {
    display: block;
  }

  .vf-work-stack-mount {
    padding: 10px 12px;
  }

  .vf-work-stack-row {
    min-height: 60px;
    grid-template-columns: minmax(0, 1fr);
  }

  .vf-work-stack-side {
    justify-items: start;
  }

  .vf-workspace-shell .vf-thread {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 16px 0 118px;
  }

  .vf-workspace-shell .vf-thread > * {
    width: calc(100% - 36px);
  }

  .vf-message {
    width: 100%;
  }

  .vf-message-user .vf-message-copy {
    max-width: min(100%, 680px);
  }

  /* Mobile client preview owns the viewport: a solid, fully opaque surface
     above the composer and chat thread so no underlying Vee content, message,
     or suggestion chip can show through. Safe-area padding prevents any
     transparent gap at the edges. */
  .vf-artifact-pane {
    position: fixed;
    inset: 0;
    z-index: 60;
    width: 100vw;
    height: var(--vf-app-height, 100dvh);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--vf-paper);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: none;
  }

  /* The Current Work tray/detail view (not a focus-owning modal) must stop
     short of the composer instead of covering it - an inset:0 overlay would
     otherwise sit visually on top of the composer even while it stays
     technically un-hidden in the DOM. --vf-composer-height is the composer
     mount's real rendered height (vee-mobile.js, applyViewportMetrics); the
     fallback covers the first paint before it is measured. Only the explicit
     document-preview modal (body.vf-preview-modal-open) keeps the full-bleed
     inset:0 surface from the base rule above. */
  body:not(.vf-preview-modal-open) .vf-artifact-pane {
    height: auto;
    bottom: var(--vf-composer-height, 88px);
  }

  /* While any artifact pane (Current Work tray or a document preview) owns
     the viewport, lock the background so the previous Vee layer cannot be
     exposed by scrolling. Hiding the composer is reserved for an explicit
     document-preview modal (body.vf-preview-modal-open) - the Current Work
     tray/detail view is a glance-only surface, not a focus-owning modal, so
     the composer must stay visible per the Vee chat presentation invariant. */
  body.vf-preview-open {
    overflow: hidden;
  }

  body.vf-preview-modal-open .vf-chat-composer-mount,
  body.vf-preview-modal-open .vf-composer,
  body.vf-preview-modal-open .vf-jump-latest {
    display: none;
  }

  .vf-jump-latest {
    bottom: 132px;
  }

  .vf-artifact-surface {
    padding: var(--vf-space-panel);
  }

  .vf-landing-canvas {
    min-height: calc(100dvh - 156px);
    padding: 24px 18px 18px;
    gap: 16px;
  }

  /* Calmer, lighter empty-state headline on mobile — less vertical weight. */
  .vf-landing-question {
    font-size: clamp(24px, 6vw, 30px);
    line-height: 1.16;
  }

  /* 10px native gap above the keyboard/chrome (within the 8–12px target). The
     bottom safe-area inset is only added when the keyboard is closed: while it is
     open, --vf-keyboard-inset (set from visualViewport) cancels the inset so the
     home-indicator space is never stacked on top of the keyboard, which is what
     produced the detached dead gap. */
  .vf-chat-composer-mount {
    padding: 0 12px calc(10px + max(env(safe-area-inset-bottom, 0px) - var(--vf-keyboard-inset, 0px), 0px));
  }

  /* Native chat composer: premium rounded rectangle that blends with the chat
     surface — soft fill, hairline-light outline, no heavy form box or glow. */
  .vf-landing-composer,
  .vf-chat-composer {
    width: 100%;
    margin: 0;
    padding: 4px 6px 4px 8px;
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--vf-hairline) 72%, transparent);
    background: color-mix(in srgb, var(--vf-gallery) 58%, var(--vf-paper));
    box-shadow: none;
  }

  /* Keep source chips from forcing horizontal scroll at narrow widths
     (390px target). */
  .vf-source-chip-label {
    max-width: 44vw;
  }

  .vf-landing-composer:focus-within,
  .vf-chat-composer:focus-within {
    border-color: color-mix(in srgb, var(--vf-go) 28%, var(--vf-hairline));
    box-shadow: none;
  }

  .vf-voice-input-row {
    grid-template-columns: 36px minmax(0, 1fr) 36px 38px;
    gap: 4px;
    align-items: center;
  }

  .vf-realtime-voice-strip {
    margin: 4px 2px 2px;
    padding: 8px 10px;
  }

  /* Compact, vertically-centred input that does not fight the send button. */
  .vf-landing-composer .vf-landing-input,
  .vf-chat-composer .vf-chat-input {
    min-height: 40px;
    max-height: 104px;
    padding: 9px 2px;
    font-size: var(--vf-text-reading);
    line-height: 1.3;
    overflow-y: auto;
  }

  .vf-landing-composer .vf-landing-input::placeholder,
  .vf-chat-composer .vf-chat-input::placeholder {
    color: color-mix(in srgb, var(--vf-carbon) 52%, transparent);
  }

  .vf-landing-composer .vf-icon-button,
  .vf-chat-composer .vf-icon-button {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .vf-send-icon {
    width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .vf-landing-chips {
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    width: 100%;
    gap: 6px;
    padding-bottom: 0;
  }

  .vf-landing-chips .vf-chip {
    flex: 1 1 148px;
    min-width: min(100%, 148px);
    white-space: normal;
  }

  .vf-workspace-shell .vf-composer {
    position: sticky;
    bottom: 0;
    z-index: 3;
  }

  .vf-header {
    position: sticky;
    top: 0;
  }
}

body.vf-modal-open {
  overflow: hidden;
}

.vf-control-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--vf-space-6);
  background: var(--vf-scrim);
  backdrop-filter: var(--vf-blur-modal);
}

.vf-control-modal {
  width: min(1040px, calc(100vw - 32px));
  height: min(88vh, 820px);
  max-height: 90vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  background: var(--vf-paper);
  box-shadow: var(--vf-shadow-lift);
}

.vf-control-modal-header {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--vf-space-4);
  align-items: start;
  padding: var(--vf-space-gutter) 20px var(--vf-space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--vf-ink) 6%, transparent);
  background: color-mix(in srgb, var(--vf-porcelain) 96%, transparent);
}

.vf-control-modal-heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.vf-control-modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--vf-paper);
}

.vf-control-close {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: var(--vf-radius-card);
  color: var(--vf-slate);
}

.vf-control-pane {
  min-width: min(760px, 100vw);
}

.vf-control-surface {
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-panel);
  color: var(--vf-ink);
  min-height: 100%;
  padding: 0;
}

.vf-control-title {
  margin: 0;
  font-size: var(--vf-text-title);
  line-height: 1.2;
  font-weight: var(--vf-weight-heading);
  letter-spacing: 0;
}

.vf-control-tabs {
  display: flex;
  gap: var(--vf-space-2);
  flex-wrap: wrap;
}

.vf-settings-layout {
  min-height: 100%;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}

.vf-settings-nav {
  display: grid;
  align-content: start;
  gap: var(--vf-space-1);
  padding: var(--vf-space-4);
  border-right: 0;
  background: color-mix(in srgb, var(--vf-porcelain) 56%, transparent);
}

.vf-settings-nav-item {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: var(--vf-radius-card);
  padding: var(--vf-space-2) var(--vf-space-2);
  background: transparent;
  color: var(--vf-carbon);
  font-weight: 400;
  text-align: left;
}

.vf-settings-nav-item:hover,
.vf-settings-nav-item:focus-visible {
  background: transparent;
  color: var(--vf-ink);
  box-shadow: none;
}

.vf-settings-nav-item.active {
  background: transparent;
  color: var(--vf-go-deep);
  font-weight: var(--vf-weight-selected);
  box-shadow: none;
}

.vf-settings-content {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--vf-space-panel);
  padding: var(--vf-space-gutter);
}

.vf-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vf-space-3);
}

.vf-control-card,
.vf-control-row {
  border: 0;
  border-radius: var(--vf-radius-card);
  background: transparent;
  padding: var(--vf-space-panel);
  box-shadow: var(--vf-shadow-control);
}

.vf-control-card {
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-3);
  box-shadow: none;
}

.vf-overview-card {
  min-height: 104px;
  text-align: left;
  cursor: pointer;
}

.vf-settings-resource-link {
  color: var(--vf-go-deep);
  font-size: var(--vf-text-body);
  text-decoration: none;
}

.vf-settings-resource-link:hover,
.vf-settings-resource-link:focus-visible {
  text-decoration: underline;
}

.vf-control-row,
.vf-user-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.3fr) minmax(120px, 1fr) auto auto auto;
  gap: var(--vf-space-2);
  align-items: center;
}

.vf-module-row {
  display: grid;
  grid-template-columns: minmax(120px, 2fr) auto auto minmax(0, 3fr);
  gap: var(--vf-space-2) var(--vf-space-3);
  align-items: center;
  min-height: 44px;
}

.vf-module-row.vf-module-row-connection {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--vf-space-5);
  padding-block: var(--vf-space-2);
}

.vf-module-row-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vf-module-row .vf-module-row-name {
  font-weight: 500;
}

.vf-module-row .vf-module-row-desc {
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
}

.vf-connections-stack,
.vf-agent-connections,
.vf-agent-setup,
.vf-agent-activity {
  display: grid;
  gap: var(--vf-space-4);
}

.vf-agent-intro {
  max-width: 680px;
  display: grid;
  gap: var(--vf-space-2);
}

.vf-agent-intro h3,
.vf-agent-setup h3,
.vf-agent-setup h4,
.vf-agent-activity h4 {
  margin: 0;
}

.vf-agent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vf-space-3);
}

.vf-agent-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--vf-space-3);
  padding: var(--vf-space-4);
  border: 1px solid color-mix(in srgb, var(--vf-ink) 9%, transparent);
  border-radius: var(--vf-radius-card);
  background: color-mix(in srgb, var(--vf-paper) 95%, var(--vf-porcelain));
}

.vf-agent-card[data-connection-status="Connected"],
.vf-agent-card[data-connection-status="Checked now"] {
  border-color: color-mix(in srgb, var(--vf-go-deep) 24%, var(--vf-hairline));
}

.vf-agent-card-header,
.vf-agent-identity,
.vf-agent-actions,
.vf-agent-setup-header,
.vf-agent-activity-row {
  display: flex;
  align-items: center;
  gap: var(--vf-space-2);
}

.vf-agent-card-header,
.vf-agent-setup-header {
  justify-content: space-between;
}

.vf-agent-identity {
  min-width: 0;
}

.vf-agent-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--vf-ink) 10%, transparent);
  border-radius: 10px;
  background: var(--vf-ink);
  color: var(--vf-paper);
  font-size: var(--vf-text-small);
  font-weight: var(--vf-weight-selected);
  letter-spacing: -0.02em;
}

.vf-agent-details {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
  gap: 6px var(--vf-space-3);
  margin: 0;
  padding: var(--vf-space-3) 0;
  border-top: 1px solid color-mix(in srgb, var(--vf-ink) 7%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--vf-ink) 7%, transparent);
  font-size: var(--vf-text-small);
}

.vf-agent-details dt {
  color: var(--vf-slate);
}

.vf-agent-details dd {
  min-width: 0;
  margin: 0;
  color: var(--vf-ink);
  overflow-wrap: anywhere;
}

.vf-agent-actions {
  flex-wrap: wrap;
}

.vf-agent-activity {
  gap: var(--vf-space-2);
}

.vf-agent-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px var(--vf-space-2);
  font-size: var(--vf-text-small);
}

.vf-agent-activity-row time {
  grid-column: 1 / -1;
}

.vf-agent-setup {
  position: relative;
  overflow: hidden;
  padding: var(--vf-space-5);
  border: 1px solid color-mix(in srgb, var(--vf-go-deep) 20%, var(--vf-hairline));
  border-radius: var(--vf-radius-card);
  background: color-mix(in srgb, var(--vf-go-wash) 32%, var(--vf-paper));
}

.vf-agent-setup::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--vf-go-deep);
}

.vf-agent-setup-header {
  justify-content: flex-start;
  align-items: flex-start;
}

.vf-agent-setup-header > div {
  display: grid;
  gap: 3px;
}

.vf-agent-steps {
  counter-reset: agent-step;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--vf-ink) 8%, transparent);
  border-radius: var(--vf-radius-card);
  overflow: hidden;
}

.vf-agent-step {
  counter-increment: agent-step;
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
  background: var(--vf-paper);
  font-size: var(--vf-text-small);
}

.vf-agent-step::before {
  content: counter(agent-step, decimal-leading-zero);
  color: var(--vf-go-deep);
  font-size: 10px;
  font-weight: var(--vf-weight-selected);
}

.vf-agent-permissions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vf-space-2);
}

.vf-agent-permission {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--vf-space-2);
  padding: var(--vf-space-3);
  border: 1px solid color-mix(in srgb, var(--vf-ink) 9%, transparent);
  border-radius: var(--vf-radius-card);
  background: var(--vf-paper);
  cursor: pointer;
}

.vf-agent-permission.is-disabled {
  background: var(--vf-gallery);
  cursor: not-allowed;
}

.vf-agent-permission-copy {
  display: grid;
  gap: 3px;
  font-size: var(--vf-text-small);
}

.vf-agent-permission-copy span {
  line-height: 1.35;
}

.vf-agent-server-details {
  padding-top: var(--vf-space-2);
  border-top: 1px solid color-mix(in srgb, var(--vf-ink) 8%, transparent);
}

.vf-agent-server-details summary {
  cursor: pointer;
  color: var(--vf-go-deep);
  font-weight: var(--vf-weight-selected);
}

.vf-agent-server-details[open] {
  display: grid;
  gap: var(--vf-space-3);
}

.vf-agent-loading {
  min-height: 160px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  color: var(--vf-slate);
}

.vf-agent-test-outcome {
  margin: 0;
  padding: var(--vf-space-2) var(--vf-space-3);
  border: 1px solid color-mix(in srgb, var(--vf-ink) 9%, transparent);
  border-radius: var(--vf-radius-card);
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
}

.vf-agent-test-outcome[data-test-result="blocked"] {
  border-color: color-mix(in srgb, var(--vf-stop) 45%, transparent);
  background: var(--vf-stop-wash);
  color: var(--vf-stop-deep);
}

.vf-control-field {
  display: grid;
  gap: var(--vf-space-2);
  font-size: var(--vf-text-body);
  color: var(--vf-slate);
  font-weight: 430;
}

.vf-control-field input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  display: grid;
  place-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--vf-ink) 20%, transparent);
  border-radius: var(--vf-radius-tiny);
  background: var(--vf-paper);
  resize: none;
}

.vf-control-field input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: transform var(--vf-duration-fast) var(--vf-ease-enter);
  background: var(--vf-go-deep);
  clip-path: polygon(14% 44%, 0 58%, 38% 96%, 100% 18%, 86% 6%, 36% 68%);
}

.vf-control-field input[type="checkbox"]:checked {
  border-color: var(--vf-go-deep);
}

.vf-control-field input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.vf-control-field input[type="checkbox"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vf-go) 28%, transparent);
  outline-offset: 2px;
}

.vf-control-field select,
.vf-control-field input:not([type="checkbox"]):not([type="color"]) {
  min-height: 40px;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  padding: 8px 10px;
  background: var(--vf-paper);
  color: var(--vf-ink);
  font: inherit;
}

.vf-control-card button:disabled,
.vf-control-row button:disabled {
  cursor: not-allowed;
  border-color: var(--vf-hairline);
  background: var(--vf-gallery);
  color: var(--vf-slate);
  box-shadow: none;
}

.vf-status-pill {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: var(--vf-radius-card);
  border: 0;
  padding: 3px 0;
  background: transparent;
  color: var(--vf-ink);
  font-size: var(--vf-text-label);
  font-weight: 430;
  white-space: nowrap;
}

.vf-control-error {
  color: var(--vf-danger);
  font-weight: var(--vf-control-weight);
}

.vf-hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.vf-firm-logo-control {
  display: grid;
  gap: var(--vf-space-3);
  min-width: 0;
  padding: var(--vf-space-3);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  background: color-mix(in srgb, var(--vf-paper) 92%, transparent);
}

.vf-firm-logo-preview {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--vf-space-3);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  background: var(--vf-paper);
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
  text-align: center;
}

.vf-firm-logo-preview img {
  max-width: 180px;
  max-height: 64px;
  object-fit: contain;
}

.vf-profile-autopopulate {
  gap: var(--vf-space-4);
}

.vf-profile-header,
.vf-profile-url-row,
.vf-profile-approval-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--vf-space-3);
}

.vf-profile-header {
  justify-content: space-between;
  align-items: center;
}

.vf-profile-url-row .vf-control-field {
  flex: 1 1 280px;
}

.vf-profile-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--vf-space-3);
}

.vf-profile-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--vf-space-3);
  min-width: 0;
  padding: var(--vf-space-4);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  background: color-mix(in srgb, var(--vf-paper) 92%, transparent);
}

.vf-profile-group-head,
.vf-profile-action-row,
.vf-profile-approval-actions,
.vf-profile-preview-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vf-space-2);
}

.vf-profile-group-head,
.vf-profile-preview-label {
  justify-content: space-between;
}

.vf-profile-group-head strong {
  font-size: var(--vf-text-body);
  font-weight: 520;
}

.vf-profile-logo-preview {
  width: 88px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--vf-space-2);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  background: var(--vf-paper);
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
}

.vf-profile-logo-preview img {
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
}

.vf-profile-brand-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-2);
}

.vf-profile-swatch {
  width: 36px;
  height: 36px;
  border-radius: var(--vf-radius-card);
  border: 1px solid var(--vf-hairline);
}

.vf-profile-client-preview-canvas {
  display: grid;
  gap: var(--vf-space-3);
  min-width: 0;
  padding: var(--vf-space-3);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  background: color-mix(in srgb, var(--vf-gallery) 44%, var(--vf-paper));
}

.vf-profile-details {
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  padding: var(--vf-space-3);
  background: transparent;
}

.vf-profile-details summary {
  cursor: pointer;
  color: var(--vf-carbon);
  font-weight: var(--vf-control-weight);
}

.vf-profile-detail-list {
  display: grid;
  gap: var(--vf-space-2);
  margin-top: var(--vf-space-3);
}

.vf-profile-detail-row {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(120px, .8fr) minmax(0, 1.4fr);
  gap: var(--vf-space-2);
  min-width: 0;
  font-size: var(--vf-text-small);
}

.vf-profile-detail-row span,
.vf-profile-detail-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vf-firm-brand-card {
  gap: var(--vf-space-4);
}

.vf-firm-brand-layout {
  display: block;
}

.vf-firm-brand-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-2);
  align-items: center;
}

.vf-brand-header-preview {
  display: grid;
  gap: var(--vf-space-3);
  min-width: 0;
}

.vf-brand-preview-label {
  font-size: var(--vf-text-small);
  color: var(--vf-slate);
}

.vf-brand-header-preview-shell {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--vf-space-3);
  align-items: center;
  padding: var(--vf-space-4);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  background: var(--vf-paper);
  box-shadow: var(--vf-shadow-lift);
}

.vf-brand-header-preview-shell::before {
  content: "";
  position: absolute;
  left: var(--vf-space-4);
  right: var(--vf-space-4);
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--vf-firm-brand-colour, var(--vf-go));
}

.vf-brand-edit-surface {
  max-width: 640px;
}

.vf-brand-edit-header {
  position: relative;
}

.vf-brand-logo-editor,
.vf-brand-colour-editor {
  position: relative;
  min-width: 0;
}

.vf-brand-logo-edit-button {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--vf-carbon);
  cursor: pointer;
}

.vf-brand-logo-edit-button:hover,
.vf-brand-logo-edit-button:focus-visible,
.vf-brand-logo-edit-button.is-drag-over {
  border-color: color-mix(in srgb, var(--vf-firm-brand-colour, var(--vf-go)) 46%, var(--vf-hairline));
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-firm-brand-colour, var(--vf-go)) 18%, transparent);
}

.vf-brand-logo-preview {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--vf-carbon);
  font-size: var(--vf-text-label);
  font-weight: var(--vf-control-weight);
}

.vf-brand-logo-affordance {
  position: absolute;
  right: 2px;
  bottom: 2px;
  max-width: calc(100% - 4px);
  padding: 2px 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--vf-ink) 78%, transparent);
  color: var(--vf-paper);
  font-size: 10px;
  font-weight: var(--vf-control-weight);
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
  transition: opacity var(--vf-duration-fast) var(--vf-ease);
}

.vf-brand-logo-edit-button[data-logo-state="has-logo"] .vf-brand-logo-affordance {
  opacity: 0;
}

.vf-brand-logo-edit-button[data-logo-state="empty"] .vf-brand-logo-affordance,
.vf-brand-logo-edit-button[data-logo-state="has-logo"]:hover .vf-brand-logo-affordance,
.vf-brand-logo-edit-button[data-logo-state="has-logo"]:focus .vf-brand-logo-affordance,
.vf-brand-logo-edit-button[data-logo-state="has-logo"]:focus-visible .vf-brand-logo-affordance,
.vf-brand-logo-edit-button[data-logo-state="has-logo"].is-drag-over .vf-brand-logo-affordance {
  opacity: 1;
}

.vf-brand-logo-popover {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  left: 0;
  width: min(260px, 78vw);
  display: grid;
  gap: var(--vf-space-2);
  padding: var(--vf-space-3);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  background: var(--vf-paper);
  box-shadow: var(--vf-shadow-lift);
}

.vf-brand-logo-popover[hidden] {
  display: none;
}

.vf-brand-logo-menu-action {
  justify-content: flex-start;
}

.vf-brand-logo-hint {
  margin: 0;
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
  line-height: 1.4;
}

.vf-brand-header-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.vf-brand-name-edit-button {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vf-carbon);
  font: inherit;
  font-weight: var(--vf-control-weight);
  text-align: left;
  cursor: text;
}

.vf-brand-name-edit-button:hover,
.vf-brand-name-edit-button:focus-visible {
  color: var(--vf-go);
  outline: 0;
}

.vf-brand-inline-name-input {
  width: min(100%, 320px);
  min-height: 36px;
  padding: 6px 8px;
  border-radius: var(--vf-radius-control);
}

.vf-brand-header-copy strong,
.vf-brand-header-copy p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vf-brand-header-copy p {
  margin: 0;
  color: var(--vf-carbon);
}

.vf-brand-colour-editor {
  display: flex;
  align-items: center;
  gap: var(--vf-space-2);
  justify-self: end;
}

.vf-brand-colour-swatch {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--vf-hairline);
  border-radius: 999px;
  background: var(--vf-firm-brand-colour, var(--vf-go));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--vf-paper) 72%, transparent);
  cursor: pointer;
}

.vf-brand-colour-swatch:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--vf-go) 32%, transparent);
  outline-offset: 2px;
}

.vf-brand-colour-value {
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
}

.vf-brand-colour-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vf-control-toast {
  border: 1px solid color-mix(in srgb, var(--vf-go) 38%, var(--vf-hairline));
  border-radius: var(--vf-radius-card);
  padding: 10px 12px;
  background: color-mix(in srgb, var(--vf-go) 10%, var(--vf-paper));
  color: var(--vf-ink);
  /* Transient confirmation: fade in on render, fade out on auto-dismiss. */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--vf-duration-moderate) var(--vf-ease), transform var(--vf-duration-moderate) var(--vf-ease);
}

.vf-control-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.vf-control-toast.is-dismissed {
  opacity: 0;
  transform: translateY(-2px);
}

.vf-btn-danger {
  border-color: color-mix(in srgb, var(--vf-stop) 55%, transparent);
  color: var(--vf-stop-deep);
  background: var(--vf-stop-wash);
}

.vf-control-list {
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-2);
}

.vf-control-denied {
  display: grid;
  align-content: center;
  gap: var(--vf-space-2);
  min-height: 260px;
  padding: var(--vf-space-7);
}

@media (max-width: 680px) {
  .vf-control-backdrop {
    padding: 0;
    align-items: stretch;
  }

  .vf-control-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .vf-control-modal-header {
    padding: 14px 16px 12px;
  }

  .vf-settings-layout {
    grid-template-columns: 1fr;
  }

  .vf-settings-nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--vf-hairline);
  }

  .vf-settings-content {
    padding: var(--vf-space-4);
  }

  .vf-agent-grid,
  .vf-agent-steps,
  .vf-agent-permissions {
    grid-template-columns: 1fr;
  }

  .vf-agent-card,
  .vf-agent-setup {
    padding: var(--vf-space-3);
  }

  .vf-agent-card-header {
    align-items: flex-start;
  }

  .vf-agent-actions > button {
    flex: 1 1 100%;
  }

  .vf-control-grid,
  .vf-control-row,
  .vf-user-row {
    grid-template-columns: 1fr;
  }

  .vf-profile-detail-row {
    grid-template-columns: 1fr;
  }

  .vf-firm-brand-layout {
    display: block;
  }

  .vf-brand-header-preview-shell {
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--vf-space-3);
  }

  .vf-brand-colour-editor {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .vf-brand-logo-popover {
    position: fixed;
    inset: auto var(--vf-space-3) var(--vf-space-3);
    width: auto;
    border-radius: var(--vf-radius-card) var(--vf-radius-card) 18px 18px;
  }

  .vf-brand-logo-edit-button[data-logo-state="has-logo"] .vf-brand-logo-affordance {
    opacity: 1;
  }

  .vf-module-row {
    grid-template-columns: 1fr auto;
  }

  .vf-module-row .vf-module-row-name {
    grid-row: 1;
    grid-column: 1;
  }

  .vf-module-row .vf-status-pill {
    grid-row: 1;
    grid-column: 2;
  }

  .vf-module-row button {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .vf-module-row .vf-module-row-desc {
    grid-row: 3;
    grid-column: 1 / -1;
  }

  .vf-module-row.vf-module-row-connection {
    grid-template-columns: 1fr auto;
  }

  .vf-module-row.vf-module-row-connection button {
    grid-row: 1;
    grid-column: 2;
  }

  .vf-module-row.vf-module-row-connection .vf-module-row-copy {
    grid-row: 1;
    grid-column: 1;
  }

  .vf-module-row.vf-module-row-connection .vf-module-row-copy .vf-module-row-name,
  .vf-module-row.vf-module-row-connection .vf-module-row-copy .vf-module-row-desc {
    grid-row: auto;
    grid-column: auto;
  }

  .vf-control-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
}

/* --- Motion: interaction states and surface entrances --- */

.vf-btn,
button,
a.vf-btn,
.vf-input,
.vf-search-input,
.vf-control-field select,
.vf-control-field input:not([type="checkbox"]):not([type="color"]) {
  transition:
    color var(--vf-duration-fast) var(--vf-ease),
    background-color var(--vf-duration-fast) var(--vf-ease),
    border-color var(--vf-duration-fast) var(--vf-ease),
    opacity var(--vf-duration-fast) var(--vf-ease),
    box-shadow var(--vf-duration-fast) var(--vf-ease);
}

@keyframes vfFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes vfSurfaceEnter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.vf-control-backdrop,
.vf-dialog-backdrop {
  animation: vfFadeIn var(--vf-duration-moderate) var(--vf-ease-enter);
}

.vf-control-modal,
.vf-dialog {
  animation: vfSurfaceEnter var(--vf-duration-moderate) var(--vf-ease-enter);
}

.vf-conversation-menu {
  animation: vfSurfaceEnter var(--vf-duration-fast) var(--vf-ease-enter);
}

.vf-thread .vf-message,
.vf-thread .vf-card,
.vf-thread .vf-chip-row:not(.vf-action-row) {
  animation: vfSurfaceEnter var(--vf-duration-moderate) var(--vf-ease-enter);
}

.vf-workspace-shell .vf-thread .vf-chip-row {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* In-thread action cards — compact, native-feeling, no dashboard chrome */
.vf-request-draft-card,
.vf-update-confirmation-card {
  max-width: 420px;
  padding: var(--vf-space-3);
  gap: var(--vf-space-2);
  box-shadow: none;
  background: color-mix(in srgb, var(--vf-gallery) 60%, var(--vf-paper));
}

.vf-request-draft-card .vf-card-actions,
.vf-update-confirmation-card .vf-card-actions {
  flex-wrap: wrap;
  gap: var(--vf-space-1);
}

.vf-request-draft-card .vf-meta-grid,
.vf-update-confirmation-card .vf-meta-grid {
  border-radius: var(--vf-radius-control);
}

/* Mobile menu group labels */
.vf-menu-group {
  display: grid;
  gap: 0;
}

.vf-menu-group + .vf-menu-group {
  margin-top: var(--vf-space-3);
  padding-top: var(--vf-space-3);
  border-top: 1px solid var(--vf-hairline);
}

.vf-menu-group-label {
  padding: 0 var(--vf-space-panel) var(--vf-space-1);
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  font-weight: 430;
  letter-spacing: 0;
}

/* --- Prepared-artifacts list: every preview/draft for the active client --- */
.vf-artifact-list {
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-1);
  margin-top: var(--vf-space-2);
  padding: var(--vf-space-2);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  background: var(--vf-paper);
}

.vf-artifact-list-title {
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  font-weight: 460;
}

.vf-artifact-rows {
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-1);
}

.vf-artifact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vf-space-2);
  width: 100%;
  text-align: left;
  appearance: none;
  cursor: pointer;
  padding: var(--vf-space-1) var(--vf-space-2);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  background: var(--vf-paper);
  color: var(--vf-ink);
  transition: background var(--vf-duration-fast) var(--vf-ease), border-color var(--vf-duration-fast) var(--vf-ease);
}

.vf-artifact-row:hover {
  background: var(--vf-gallery);
}

.vf-artifact-row.is-active {
  border-color: color-mix(in srgb, var(--vf-go) 45%, var(--vf-hairline));
  background: color-mix(in srgb, var(--vf-go) 8%, var(--vf-paper));
  cursor: pointer;
}

.vf-artifact-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.vf-artifact-row-eyebrow {
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  font-weight: var(--vf-control-weight);
  line-height: 1.2;
}

.vf-artifact-row-title {
  font-size: var(--vf-text-body);
  font-weight: 460;
  overflow-wrap: anywhere;
}

.vf-artifact-row-owner {
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  overflow-wrap: anywhere;
}

.vf-artifact-row-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: max-content;
}

.vf-artifact-row-status {
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  white-space: nowrap;
}

.vf-artifact-row-eyebrow.is-ready,
.vf-artifact-row-status.is-active {
  color: var(--vf-go-deep);
  font-weight: var(--vf-weight-heading);
}

.vf-artifact-row-status.is-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vf-artifact-row-status.is-active::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--vf-radius-full);
  background: var(--vf-go);
}

.vf-work-stack {
  display: grid;
  gap: var(--vf-space-2);
  min-width: 0;
}

.vf-work-stack-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vf-space-2);
}

.vf-work-stack-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.vf-work-stack-heading strong {
  font-size: var(--vf-text-body);
  font-weight: 560;
}

.vf-work-stack-heading span,
.vf-work-stack-group-label,
.vf-work-stack-meta,
.vf-work-stack-action {
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
}

.vf-work-stack-status.is-ready,
.vf-work-stack-action.is-active {
  color: var(--vf-go-deep);
  font-weight: var(--vf-weight-heading);
}

.vf-work-stack-status.is-waiting {
  color: var(--vf-caution);
}

.vf-work-stack-status.is-sent {
  color: var(--vf-go-deep);
}

.vf-work-stack-action.is-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vf-work-stack-action.is-active::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--vf-radius-full);
  background: var(--vf-go);
}

.vf-work-stack-list {
  display: grid;
  gap: var(--vf-space-1);
  min-width: 0;
}

.vf-work-stack-row {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--vf-space-2);
  padding: 10px 12px;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-card);
  background: color-mix(in srgb, var(--vf-paper) 96%, var(--vf-porcelain));
  color: var(--vf-ink);
  text-align: left;
  cursor: default;
}

.vf-work-stack-row:hover {
  background: var(--vf-gallery);
}

.vf-work-stack-row-body {
  min-width: 0;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: grid;
  padding: 0;
  text-align: left;
}

.vf-work-stack-row-body:focus-visible,
.vf-work-stack-row-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vf-go) 64%, transparent);
  outline-offset: 3px;
}

.vf-work-stack-row.is-selected {
  border-color: color-mix(in srgb, var(--vf-go) 42%, var(--vf-hairline));
  background: color-mix(in srgb, var(--vf-go) 7%, var(--vf-paper));
}

.vf-work-stack-main,
.vf-work-stack-side {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.vf-work-stack-side {
  justify-items: end;
}

.vf-work-stack-row-action {
  appearance: none;
  border: 0;
  border-radius: var(--vf-radius-pill);
  background: transparent;
  color: var(--vf-slate);
  cursor: pointer;
  font-size: var(--vf-text-label);
  font-weight: 520;
  min-height: 28px;
  padding: 4px 0;
  white-space: nowrap;
}

.vf-work-stack-row-action:hover {
  color: var(--vf-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.vf-work-stack-title,
.vf-work-stack-status {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vf-work-stack-title {
  font-size: var(--vf-text-body);
  font-weight: 520;
}

.vf-work-stack-status {
  font-size: var(--vf-text-label);
  font-weight: 520;
}

.vf-mobile-work-stack-header-mount {
  display: none;
}

.vf-mobile-work-stack-header {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vf-space-2);
  padding: 8px 14px;
  border-bottom: 1px solid var(--vf-hairline);
  background: var(--vf-paper);
}

.vf-mobile-work-stack-text {
  min-width: 0;
  color: var(--vf-ink);
  font-size: var(--vf-text-body);
  font-weight: 520;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vf-mobile-work-stack-action {
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-pill);
  background: var(--vf-paper);
  color: var(--vf-ink);
  font-size: var(--vf-text-label);
  font-weight: 520;
}

.vf-work-item-card {
  box-sizing: border-box;
  width: min(100%, 760px);
  max-width: 760px;
  min-height: 68px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-small);
  background: var(--vf-paper);
  box-shadow: none;
  color: var(--vf-ink);
  text-align: left;
  overflow: hidden;
}

.vf-work-item-card-open {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--vf-space-2) var(--vf-space-3);
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Controlling Amendment A (issue 623): one governed content column for every
   card-shaped thread child. .vf-artifact-list (the "Prepared request(s)"
   card) and .vf-thread-legacy-notice previously had no rule of their own, so
   they fell back to the generic ".vf-thread > *" rule (860px, centered),
   while .vf-work-item-card/-actions were explicitly 760px and left-aligned -
   two different alignment systems on sibling thread children produced
   visibly staggered left/right edges. All four now share this one formula. */
.vf-workspace-shell .vf-thread > .vf-work-item-card,
.vf-workspace-shell .vf-thread > .vf-artifact-list,
.vf-workspace-shell .vf-thread > .vf-thread-legacy-notice {
  width: min(var(--vf-vee-message-width), calc(100% - 48px));
  margin-left: max(24px, calc((100% - var(--vf-thread-readable-width)) / 2));
  margin-right: auto;
  justify-self: start;
}

.vf-work-item-card:hover,
.vf-work-item-card:focus-within {
  border-color: color-mix(in srgb, var(--vf-ink) 14%, var(--vf-hairline));
  background: color-mix(in srgb, var(--vf-paper) 94%, var(--vf-porcelain));
}

.vf-work-item-card-open:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vf-go) 40%, transparent);
  outline-offset: -2px;
}

.vf-work-item-card-main {
  min-width: 0;
  max-width: 100%;
  display: grid;
  align-content: center;
  gap: 3px;
}

.vf-work-item-card-eyebrow {
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  line-height: 1.3;
}

.vf-work-item-card-meta {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  line-height: 1.35;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.vf-work-item-card-eyebrow.is-ready {
  color: var(--vf-go-deep);
  font-weight: var(--vf-weight-heading);
}

.vf-work-item-card-eyebrow.is-waiting {
  color: var(--vf-caution);
}

.vf-work-item-card-title {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: var(--vf-text-body);
  font-weight: 560;
  line-height: 1.35;
  word-break: normal;
}

.vf-work-item-card-side {
  min-width: 0;
  max-width: 100%;
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 4px;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .vf-workspace-shell .vf-thread > .vf-work-item-card,
  .vf-workspace-shell .vf-thread > .vf-artifact-list,
  .vf-workspace-shell .vf-thread > .vf-thread-legacy-notice {
    width: calc(100% - 36px);
    max-width: none;
    margin-left: 18px;
    margin-right: 18px;
  }

  .vf-work-item-card {
    width: 100%;
    min-height: 84px;
  }

  .vf-work-item-card-open {
    min-height: 84px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--vf-space-2);
  }

  .vf-work-item-card-side {
    min-width: 0;
    width: 100%;
    justify-items: flex-start;
  }
}

@container vf-thread (max-width: 560px) {
  .vf-work-item-card {
    min-height: 84px;
  }

  .vf-work-item-card-open {
    min-height: 84px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .vf-work-item-card-side {
    min-width: 0;
    width: 100%;
    justify-items: flex-start;
  }
}

@media (max-width: 680px) {
  .vf-work-item-card {
    width: 100%;
    gap: var(--vf-space-2);
  }

  .vf-work-item-card-open {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--vf-space-2);
  }

  .vf-work-item-card-side {
    width: 100%;
    justify-content: flex-start;
  }
}

.vf-work-item-detail {
  display: grid;
  align-content: start;
  gap: var(--vf-space-3);
}

.vf-work-item-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--vf-space-3);
}

.vf-work-item-heading {
  display: grid;
  gap: var(--vf-space-2);
  min-width: 0;
}

.vf-work-item-back {
  appearance: none;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-small);
  background: transparent;
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  font-weight: 520;
}

.vf-work-item-back:hover {
  color: var(--vf-ink);
  border-color: color-mix(in srgb, var(--vf-go) 28%, var(--vf-hairline));
}

.vf-review-surface-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--vf-space-2);
  margin-bottom: var(--vf-space-3);
}

.vf-review-surface-actions {
  justify-content: flex-end;
  margin-top: var(--vf-space-4);
  padding-top: var(--vf-space-3);
  border-top: 1px solid var(--vf-hairline);
}

.vf-review-surface-actions .vf-btn-secondary {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  font-weight: 560;
  box-shadow: none;
}

.vf-review-surface-actions .vf-btn-secondary:hover {
  color: var(--vf-ink);
  background: transparent;
  border-color: transparent;
}

.vf-review-surface-footer-actions {
  margin-bottom: var(--vf-space-4);
}

.vf-work-item-status {
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-pill);
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
}

.vf-work-item-status.is-ready {
  border-color: color-mix(in srgb, var(--vf-go) 36%, var(--vf-hairline));
  color: var(--vf-go-deep);
  font-weight: var(--vf-weight-heading);
}

.vf-work-item-status.is-waiting {
  color: var(--vf-caution);
}

.vf-work-item-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}

.vf-work-item-copy,
.vf-work-item-next,
.vf-work-item-empty,
.vf-work-item-disabled-reason {
  margin: 0;
  color: var(--vf-slate);
}

.vf-work-item-visible-state {
  display: grid;
  grid-template-columns: minmax(124px, max-content) minmax(0, 1fr);
  column-gap: var(--vf-space-3);
  row-gap: var(--vf-space-2);
  margin: 0;
  padding: var(--vf-space-3);
  border: 1px solid var(--vf-hairline);
  border-radius: var(--vf-radius-small);
  background: color-mix(in srgb, var(--vf-paper) 96%, var(--vf-porcelain));
}

.vf-work-item-visible-state dt {
  margin: 0;
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  font-weight: 520;
}

.vf-work-item-visible-state dd {
  min-width: 0;
  margin: 0;
  color: var(--vf-ink);
  overflow-wrap: anywhere;
}

.vf-work-item-disabled-reason {
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--vf-caution) 28%, var(--vf-hairline));
  border-radius: var(--vf-radius-small);
  background: color-mix(in srgb, var(--vf-caution) 8%, var(--vf-paper));
}

.vf-work-item-label {
  font-size: var(--vf-text-label);
  color: var(--vf-slate);
}

.vf-work-item-missing {
  display: grid;
  gap: var(--vf-space-1);
  margin: 0;
  padding-left: 18px;
}

.vf-work-item-known {
  display: grid;
  grid-template-columns: minmax(100px, max-content) minmax(0, 1fr);
  column-gap: var(--vf-space-3);
  row-gap: var(--vf-space-2);
  margin: 0;
}

.vf-work-item-known dt {
  margin: 0;
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
}

.vf-work-item-known dd {
  min-width: 0;
  margin: 0;
  color: var(--vf-ink);
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .vf-work-item-visible-state,
  .vf-work-item-known {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vf-work-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-2);
  margin-top: var(--vf-space-1);
}

.vf-work-item-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-2);
  padding: 0;
  border: 0;
}

.vf-work-item-card-actions:empty {
  display: none;
}

.vf-workspace-shell .vf-thread > .vf-work-item-card-actions {
  width: min(var(--vf-vee-message-width), calc(100% - 48px));
  max-width: 760px;
  margin: calc(var(--vf-space-4) * -1 + 6px) auto 0 max(24px, calc((100% - var(--vf-thread-readable-width)) / 2));
  justify-self: start;
}

.vf-work-item-actions .vf-btn {
  min-height: 36px;
}

.vf-work-item-card-actions .vf-btn {
  min-height: 32px;
  border-radius: var(--vf-radius-pill);
  background: transparent;
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
  font-weight: 520;
}

.vf-work-item-card-actions .vf-btn:hover {
  border-color: color-mix(in srgb, var(--vf-go) 28%, var(--vf-hairline));
  color: var(--vf-ink);
  background: color-mix(in srgb, var(--vf-go) 4%, transparent);
}

.vf-work-item-card-actions .vf-btn-primary {
  background: color-mix(in srgb, var(--vf-go) 5%, transparent);
  color: var(--vf-go-deep);
  border-color: color-mix(in srgb, var(--vf-go) 24%, var(--vf-hairline));
  font-weight: var(--vf-weight-selected);
}

@media (max-width: 680px) {
  .vf-workspace-shell .vf-thread > .vf-work-item-card-actions {
    width: calc(100% - 36px);
    max-width: none;
    margin-left: 18px;
    margin-right: 18px;
  }
}

/* --- Account / profile menu — premium across the three sidebar states ---
   Issue 623 Scope C: one menu, owned by this control, replacing the
   always-visible email+sign-out row and the separate top-right plan badge. */
.vf-menu-group-account {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vf-space-2);
  padding: var(--vf-space-2) var(--vf-space-panel);
  margin-top: var(--vf-space-2);
  border-top: 1px solid var(--vf-hairline);
}

.vf-account-email {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--vf-ink);
  font-size: var(--vf-text-label);
  font-weight: 460;
}

.vf-account-menu-trigger {
  display: flex;
  align-items: center;
  gap: var(--vf-space-2);
  width: 100%;
  appearance: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--vf-radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--vf-ink);
  font: inherit;
  text-align: left;
  transition: background var(--vf-duration-fast) var(--vf-ease), border-color var(--vf-duration-fast) var(--vf-ease);
}

.vf-account-menu-trigger:hover,
.vf-account-menu-trigger:focus-visible,
.vf-account-menu-trigger[aria-expanded="true"] {
  background: var(--vf-on-dark-fill);
  border-color: var(--vf-hairline);
  outline: none;
}

.vf-account-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--vf-go-wash);
  color: var(--vf-go-deep);
  font-size: var(--vf-text-caption);
  font-weight: var(--vf-weight-selected);
}

.vf-account-menu-trigger .vf-account-email {
  color: inherit;
}

.vf-account-plan-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--vf-radius-pill);
  background: var(--vf-on-dark-fill);
  color: var(--vf-on-dark-faint);
  font-size: var(--vf-text-caption);
  font-weight: 460;
}

.vf-account-menu-trigger .vf-svg-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--vf-on-dark-faint);
}

.vf-account-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: var(--vf-space-panel);
  right: var(--vf-space-panel);
  z-index: 20;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 0;
  border-radius: var(--vf-radius-card);
  background: var(--vf-menu-surface);
  box-shadow: var(--vf-shadow-menu);
  pointer-events: auto;
}

.vf-account-menu[hidden] {
  display: none;
}

.vf-account-menu-identity {
  display: grid;
  gap: 1px;
  padding: var(--vf-space-2);
  margin-bottom: 4px;
  border-bottom: 1px solid var(--vf-on-dark-fill);
}

.vf-account-menu-identity strong {
  color: var(--vf-on-dark);
  font-size: var(--vf-text-label);
  font-weight: var(--vf-weight-selected);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vf-account-menu-identity span {
  color: var(--vf-on-dark-faint);
  font-size: var(--vf-text-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vf-account-menu-action {
  min-height: 36px;
  width: 100%;
  border: 0;
  border-radius: var(--vf-radius-small);
  padding: var(--vf-space-1) var(--vf-space-2);
  background: transparent;
  color: var(--vf-on-dark-strong);
  font-size: var(--vf-text-small);
  text-align: left;
}

.vf-account-menu-action:hover,
.vf-account-menu-action:focus-visible {
  color: var(--vf-on-dark);
  background: var(--vf-on-dark-fill);
  outline: none;
}

.vf-sign-in-button {
  width: 100%;
  min-height: 36px;
  appearance: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--vf-control-radius);
  border: 1px solid color-mix(in srgb, var(--vf-go) 30%, var(--vf-hairline));
  background: color-mix(in srgb, var(--vf-go) 7%, var(--vf-paper));
  color: var(--vf-go-deep);
  font-size: var(--vf-text-label);
  font-weight: var(--vf-weight-selected);
  white-space: nowrap;
  transition: background var(--vf-duration-fast) var(--vf-ease), color var(--vf-duration-fast) var(--vf-ease), border-color var(--vf-duration-fast) var(--vf-ease);
}

.vf-sign-in-button:hover {
  background: color-mix(in srgb, var(--vf-go) 14%, var(--vf-paper));
  border-color: color-mix(in srgb, var(--vf-go) 55%, var(--vf-hairline));
  color: var(--vf-go-deep);
}

.vf-sign-in-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vf-go) 55%, transparent);
  outline-offset: 2px;
}

/* Collapsed desktop sidebar: the menu trigger shrinks to an icon-only circle
   (same pattern issue 591 Amendment D established for the old sign-out
   control) - identity text, plan badge and chevron drop out of flow so the
   avatar centres cleanly; the popover still opens, anchored to the circle. */
.vf-sidebar.is-collapsed .vf-menu-group-account {
  justify-content: center;
  padding-left: var(--vf-space-1);
  padding-right: var(--vf-space-1);
}

.vf-sidebar.is-collapsed .vf-account-menu-trigger {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 50%;
}

.vf-sidebar.is-collapsed .vf-account-menu-trigger .vf-account-email,
.vf-sidebar.is-collapsed .vf-account-plan-badge,
.vf-sidebar.is-collapsed .vf-account-menu-trigger .vf-svg-icon {
  display: none;
}

.vf-sidebar.is-collapsed .vf-account-menu {
  left: 0;
  right: auto;
  bottom: 0;
  min-width: 220px;
}

.vf-sidebar.is-collapsed .vf-sign-in-button {
  display: none;
}

/* Mobile drawer: comfortable full-width tap targets. */
@media (max-width: 680px) {
  .vf-workspace-shell.is-sidebar-expanded .vf-account-status {
    display: inline-flex;
  }

  .vf-workspace-shell.is-sidebar-expanded .vf-account-status[data-mode="authenticated"] {
    display: none;
  }

  .vf-menu-group-account {
    padding: var(--vf-space-2) var(--vf-space-3);
  }

  .vf-account-menu-trigger {
    padding: 8px;
  }

  .vf-sign-in-button {
    padding: 8px 14px;
  }

}

/* ===========================================================================
   Future Glass Material + Vertical Flow Field v1
   ---------------------------------------------------------------------------
   A restrained, Apple-like material layer and a VF-native flow field composed
   only from the canonical tokens above. No new palette, no local blur/glow
   constants: glass is a translucent surface + the --vf-blur-panel token; flow
   state maps to the existing signal roles (go / focus / caution / stop). Work
   reads upward — brief -> artifact -> proof -> approval -> handoff. Motion is
   transform/opacity only and yields to the reduced-motion block below.
   =========================================================================== */

/* Material: for shell, status, artifact, proof, and flow surfaces only — never
   dense content cards or text blocks, where legibility and trust come first. */
.vf-glass {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--vf-ink) 8%, transparent);
  border-radius: var(--vf-radius-large);
  background: color-mix(in srgb, var(--vf-paper) 74%, transparent);
  backdrop-filter: var(--vf-blur-panel);
  -webkit-backdrop-filter: var(--vf-blur-panel);
  box-shadow: var(--vf-shadow-composer);
}

/* Calmer material for client-facing surfaces: no elevation, higher opacity. */
.vf-glass-quiet {
  background: color-mix(in srgb, var(--vf-paper) 88%, transparent);
  box-shadow: none;
}

/* Vertical flow field — the signature live-state primitive. A slim vertical
   rail (work rises) beside a readable state and stage summary. */
.vf-flow-field {
  --vf-flow-accent: var(--vf-focus);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--vf-space-3);
  align-items: stretch;
  padding: var(--vf-space-3) var(--vf-space-4);
}

.vf-flow-rail {
  position: relative;
  width: 5px;
  min-height: 60px;
  align-self: stretch;
  overflow: hidden;
  border-radius: var(--vf-radius-full);
  background: color-mix(in srgb, var(--vf-ink) 8%, transparent);
}

/* Completion rises from the base to the current work level. */
.vf-flow-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--vf-flow-progress, 0.5) * 100%);
  border-radius: inherit;
  background: linear-gradient(to top, var(--vf-flow-accent), color-mix(in srgb, var(--vf-flow-accent) 42%, transparent));
  transition: height var(--vf-duration-slow) var(--vf-ease);
}

/* Subtle traces drift upward and fade — visible intelligence, not clutter. */
.vf-flow-trace {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 3px;
  height: 12px;
  margin-left: -1.5px;
  border-radius: var(--vf-radius-full);
  background: var(--vf-flow-accent);
  opacity: 0;
  transform: translateY(0);
  animation: vfFlowRise var(--vf-duration-flow) var(--vf-ease-in-out) infinite;
}

.vf-flow-trace:nth-child(3) {
  animation-delay: calc(var(--vf-duration-flow) / 3);
}

.vf-flow-trace:nth-child(4) {
  animation-delay: calc(var(--vf-duration-flow) / 3 * 2);
}

.vf-flow-body {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: var(--vf-space-2);
}

.vf-flow-state-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--vf-space-1) var(--vf-space-2);
}

.vf-flow-state-label {
  color: var(--vf-ink);
  font-size: var(--vf-text-body);
  font-weight: var(--vf-weight-selected);
}

.vf-flow-state-note {
  color: var(--vf-slate);
  font-size: var(--vf-text-small);
}

.vf-flow-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-1) var(--vf-space-3);
}

.vf-flow-stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--vf-slate);
  font-size: var(--vf-text-label);
}

.vf-flow-stage::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--vf-radius-full);
  background: color-mix(in srgb, var(--vf-ink) 20%, transparent);
}

.vf-flow-stage.is-complete {
  color: var(--vf-carbon);
}

.vf-flow-stage.is-complete::before {
  background: var(--vf-flow-accent);
}

.vf-flow-stage.is-current {
  color: var(--vf-ink);
  font-weight: var(--vf-weight-selected);
}

.vf-flow-stage.is-current::before {
  background: var(--vf-flow-accent);
  animation: vfFlowPulse var(--vf-duration-pulse) var(--vf-ease-in-out) infinite;
}

/* Safe "why / proof" disclosure — professional surfaces only. */
.vf-flow-proof {
  color: var(--vf-slate);
  font-size: var(--vf-text-caption);
}

.vf-flow-proof-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-1);
  min-height: 22px;
  cursor: pointer;
  color: var(--vf-slate);
  font-size: var(--vf-text-caption);
  font-weight: var(--vf-control-weight);
}

.vf-flow-proof[open] .vf-flow-proof-summary {
  color: var(--vf-carbon);
}

.vf-flow-proof-body {
  display: grid;
  gap: 2px;
  margin-top: var(--vf-space-1);
  padding-left: var(--vf-space-3);
  border-left: 1px solid var(--vf-hairline);
  color: var(--vf-slate);
}

/* State accents map to the canonical signal roles, never a new palette. */
.vf-flow-field[data-flow-state="understanding"],
.vf-flow-field[data-flow-state="drafting"],
.vf-flow-field[data-flow-state="checking"] {
  --vf-flow-accent: var(--vf-focus);
}

.vf-flow-field[data-flow-state="ready"],
.vf-flow-field[data-flow-state="approval"],
.vf-flow-field[data-flow-state="sent"],
.vf-flow-field[data-flow-state="received"] {
  --vf-flow-accent: var(--vf-go);
}

.vf-flow-field[data-flow-state="needs-detail"],
.vf-flow-field[data-flow-state="waiting"] {
  --vf-flow-accent: var(--vf-caution);
}

.vf-flow-field[data-flow-state="blocked"] {
  --vf-flow-accent: var(--vf-stop);
}

/* Blocked is a stop, not a flow: the traces rest. */
.vf-flow-field[data-flow-state="blocked"] .vf-flow-trace {
  animation: none;
  opacity: 0;
}

@keyframes vfFlowRise {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  28% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateY(-420%);
  }
}

@keyframes vfFlowPulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}

@media (max-width: 680px) {
  .vf-flow-field {
    padding: var(--vf-space-3);
  }
}

/* Billing Settings v1 (issue 639): Billing tab and Administration Overview
   plan/usage cards. Reuses the existing .vf-control-card/.vf-status-pill
   tokens and spacing scale rather than introducing a parallel visual system. */
.vf-billing-stack {
  display: grid;
  gap: var(--vf-space-3);
}

.vf-billing-status-card h3 {
  margin: 0;
  font-size: var(--vf-text-large);
}

.vf-billing-status-card[data-trial-urgency="elevated"] {
  border-left: 3px solid color-mix(in srgb, var(--vf-go-deep) 60%, transparent);
  padding-left: calc(var(--vf-space-panel) - 3px);
}

.vf-billing-status-card[data-trial-urgency="high"] {
  border-left: 3px solid var(--vf-go-deep);
  padding-left: calc(var(--vf-space-panel) - 3px);
}

.vf-billing-status-card[data-trial-urgency="critical"],
.vf-billing-status-card[data-billing-ui-state="payment_action_required"] {
  border-left: 3px solid var(--vf-danger);
  padding-left: calc(var(--vf-space-panel) - 3px);
}

.vf-billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-2);
}

.vf-billing-checklist-list {
  display: grid;
  gap: var(--vf-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vf-billing-checklist-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--vf-space-2);
  font-size: var(--vf-text-body);
}

.vf-billing-checklist-marker {
  min-width: 56px;
  padding: 2px var(--vf-space-2);
  border-radius: var(--vf-radius-card);
  background: color-mix(in srgb, var(--vf-ink) 8%, transparent);
  color: var(--vf-slate);
  font-size: var(--vf-text-caption);
  text-align: center;
}

.vf-billing-checklist-item.is-complete .vf-billing-checklist-marker {
  background: color-mix(in srgb, var(--vf-go) 18%, transparent);
  color: var(--vf-go-deep);
}

.vf-billing-progress-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: var(--vf-radius-card);
  background: color-mix(in srgb, var(--vf-ink) 9%, transparent);
}

.vf-billing-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--vf-go);
}

.vf-billing-graph-wrapper {
  display: grid;
  gap: var(--vf-space-2);
  margin-top: var(--vf-space-2);
}

.vf-billing-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 64px;
  padding: var(--vf-space-1);
  border-radius: var(--vf-radius-card);
  background: color-mix(in srgb, var(--vf-ink) 3%, transparent);
  overflow-x: auto;
}

.vf-billing-bar {
  flex: 1 0 4px;
  min-width: 4px;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.vf-billing-bar-fill {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--vf-go-deep);
}

.vf-billing-graph-table summary {
  cursor: pointer;
  color: var(--vf-go-deep);
  font-size: var(--vf-text-small);
}

.vf-billing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vf-text-small);
}

.vf-billing-table th,
.vf-billing-table td {
  padding: var(--vf-space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--vf-ink) 8%, transparent);
  text-align: left;
}

.vf-billing-table tr.is-current-plan td:first-child {
  font-weight: 600;
  color: var(--vf-go-deep);
}

.vf-billing-comparison {
  overflow-x: auto;
}

@media (max-width: 680px) {
  .vf-billing-checklist-item {
    grid-template-columns: auto 1fr;
  }

  .vf-billing-table {
    min-width: 480px;
  }
}

/* Motion is optional; the interface stays fully usable without it. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}