/* Veluria Client Stylesheet
 *
 * PRIMITIVE TOKENS (color, type, spacing, radius, shadow, motion) come from
 *   ../../../design_system/colors_and_type.css
 * imported below. They are NOT redeclared in this file. If you need to
 * change a brand value, edit the master; this file consumes it.
 *
 * This file owns:
 *   - Tailwind 4 entry
 *   - STRUCTURAL / COMPONENT tokens (btn-*, card-*, toast-*, rail-*, ...)
 *     that compose primitives into component contracts.
 *   - Forced-colors (Windows High Contrast) mappings.
 *   - Component CSS (all .card, .btn, .toast, etc. rules).
 *
 * Source: UX-DR1 (color), UX-DR2 (typography), UX-DR3 (spacing), UX-DR32 (rem).
 * Architecture: component-architecture-1-2b.md §Design Token System.
 */

/* No `@import "tailwindcss"` here, deliberately. There is no Tailwind toolchain
   in this repo (no config, no CLI, no dependency — package.json carries only
   Playwright and the Tauri CLI), and nothing in this file uses `@apply`,
   `@tailwind`, `@config` or `theme()`. The import was inert: trunk copies this
   file verbatim, so the browser resolved `/tailwindcss` against the gateway,
   got the SPA fallback `index.html` back with a 200, and discarded it as
   invalid CSS — one wasted request on every page load, on a public origin.
   If Tailwind is ever adopted, add the toolchain first, then the import. */

/* Primitive tokens are provided by ../../../design_system/colors_and_type.css,
   loaded as a sibling <link data-trunk rel="css"> in index.html. */

/* ==========================================================================
 * STRUCTURAL / COMPONENT TOKENS
 * Built on top of the primitive tokens imported from the design-system master.
 * ========================================================================== */

:root {
  /* ---------- Z-INDEX LAYERS (ordered: header < overlay < modal) ---------- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* ---------- BORDER RADIUS (extended component radii) ---------- */
  /* --radius-card, --radius-pill, --radius-full come from master. */

  /* --- Button Tokens — Story 1-4a, UX-DR7 --- */
  --btn-height-standard:    2.75rem;    /* 44px — WCAG 2.5.5 min touch target */
  --btn-height-compact:     2rem;       /* 32px — dense contexts only */
  --btn-padding-h-standard: 1rem;       /* 16px horizontal padding */
  --btn-padding-h-compact:  0.75rem;    /* 12px horizontal padding */
  --btn-icon-size:          1.25rem;    /* 20px — icon inside button */
  --btn-border-radius:      var(--radius-pill);
  --btn-font-size:          var(--text-body);
  --btn-font-weight:        var(--font-weight-medium);
  --btn-transition:         background-color var(--duration-fast) ease,
                            color var(--duration-fast) ease,
                            border-color var(--duration-fast) ease,
                            opacity var(--duration-fast) ease;
  --btn-focus-ring-width:   2px;
  --btn-focus-ring-offset:  2px;
  --btn-focus-ring-color:   var(--interactive-focus);  /* UX-DR33 */

  /* --- Rail Tokens — Story 1-4a, UX-DR9 --- */
  /* --rail-width comes from master. */
  --rail-icon-size:         1.25rem;    /* 20px — UX-DR9 */
  --rail-item-height:       3rem;       /* 48px square touch target */
  --rail-bg:                var(--surface-secondary);
  --rail-border:            var(--border-default);
  --rail-item-selected-bg:  var(--surface-tertiary);
  --rail-item-hover-bg:     var(--surface-tertiary);
  --rail-label-font-size:   var(--text-caption);
  --rail-z-index:           calc(var(--z-header) - 1);  /* Below header = 99 */

  /* --- Layout Fixed Positioning Tokens — Story 1-11, UX-DR14 --- */
  --header-height:          3rem;       /* 48px — matches rail-item-height */
  --chat-input-height:      4rem;       /* 64px — enough for textarea + send button */
  --chat-input-padding-v:   var(--space-sm);
  --chat-input-padding-h:   var(--space-md);
  --min-viewport-width:     1024px;     /* UX-DR53 — minimum window size */

  /* --- Scroll Shadow Tokens — UX-DR5 --- */
  --scroll-shadow-size:     0.25rem;    /* 4px gradient */
  --scroll-shadow-color:    rgba(0, 0, 0, 0.08);
  --scroll-shadow-top:      linear-gradient(to bottom, var(--scroll-shadow-color) 0%, transparent var(--scroll-shadow-size));
  --scroll-shadow-bottom:   linear-gradient(to top, var(--scroll-shadow-color) 0%, transparent var(--scroll-shadow-size));

  /* --- Panel Overlay Tokens — UX-DR10 --- */
  --panel-width:            26rem;
  --panel-slide-duration:   var(--duration-fast);
  --panel-bg:               var(--surface-primary);
  --panel-backdrop:         rgba(0,0,0,0.4);
  --panel-z-index:          var(--z-overlay);

  /* --- Kill Switch Modal Tokens — UX-DR25 --- */
  --modal-z-index:          var(--z-modal);
  --modal-max-width:        28rem;
  --modal-padding:          var(--space-xl);

  /* --- Contextual Header Tokens — UX-DR42 --- */
  --header-crossfade:       opacity var(--duration-fast) ease;

  /* --- Briefing Page Tokens — UX-DR15, UX-DR20 --- */
  --briefing-card-gap:      var(--space-sm);
  --all-clear-duration:     0.6s;

  /* Card structural tokens — Story 1-4b, UX-DR6 */
  --card-min-height: 4.5rem;
  --card-max-height-stack: 12.5rem;
  --card-accent-border-width: 0.25rem;
  /* --card-padding, --card-gap, --card-radius come from master. */
  --card-badge-font-size: var(--text-caption);
  --card-badge-font-weight: var(--font-weight-semibold);
  --card-icon-size: 1rem;
  --card-dismiss-size: 1.5rem;
  /* Card variant border accent colors.
     NOTE: These render as thin left-stripes on `--surface-primary` (white).
     Using the *-strong WCAG AA variants for calm/attentive so the 3px mark
     hits SC 1.4.11 non-text contrast ≥3:1. Decisive base passes at 4.36:1. */
  --card-border-informational: var(--accent-calm-strong);
  --card-border-calm:          var(--accent-calm-strong);
  --card-border-attentive:     var(--accent-attentive-strong);
  --card-border-decisive:      var(--accent-decisive);
  --card-border-meeting-prep:  var(--accent-attentive-strong);
  --card-border-catch-up:      var(--content-secondary);
  --card-border-completion:    var(--accent-calm-strong);
  /* --space-2xs, --radius-full, --duration-pulse come from master. */

  /* --- Toast Tokens — Story 1-4c, UX-DR12 --- */
  --toast-bottom: 1.5rem;
  --toast-left: 1.5rem;
  --toast-max-width: 24rem;
  --toast-z-index: 900;
  --toast-gap: var(--space-sm);
  --toast-countdown-bg: var(--surface-secondary);
  --toast-radius: var(--radius-card);
  --toast-padding: var(--space-md);
  --toast-close-size: 2.75rem;
  --toast-icon-size: 1rem;
  --toast-font-size: var(--text-callout);
  --toast-transition: opacity var(--duration-instant) ease, transform var(--duration-fast) ease;
  --toast-countdown-height: 0.1875rem;
  --toast-shadow: var(--shadow-floating);
  /* Variant background tokens (light mode) */
  --toast-bg-info: var(--accent-intelligence-subtle);
  --toast-bg-success: var(--accent-calm-subtle);
  --toast-bg-warning: var(--accent-attentive-subtle);
  --toast-bg-error: var(--accent-decisive-subtle);
}

/* ==========================================================================
 * DARK MODE — COMPONENT TOKEN OVERRIDES ONLY
 * Primitive dark values (surface/content/accent/interactive/border/shadow)
 * are owned by ../../../design_system/colors_and_type.css. This block
 * only overrides component-scoped tokens that need different values in dark.
 * ========================================================================== */

/* stylelint-disable color-no-hex -- component-scoped dark toast tints
   are intentionally darker than accent-*-subtle to retain contrast on
   dark toast backgrounds. These are the ONLY hex literals outside the
   design-system master and are limited to this block. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Toast variant backgrounds — Story 1-4c, UX-DR12 */
    --toast-bg-info:    #2A2740;
    --toast-bg-success: #1A2E24;
    --toast-bg-warning: #2E2410;
    --toast-bg-error:   #2E1A1A;
  }
}
[data-theme="dark"] {
  --toast-bg-info:    #2A2740;
  --toast-bg-success: #1A2E24;
  --toast-bg-warning: #2E2410;
  --toast-bg-error:   #2E1A1A;
}
/* stylelint-enable color-no-hex */

/* ==========================================================================
 * REDUCED MOTION — Disables all transitions for accessibility
 * Architecture: progressive enhancement layer per component-architecture-1-2a.md
 * ========================================================================== */

@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;
  }
}

/* ==========================================================================
 * BASE STYLES
 * Applies token-based defaults to all elements.
 * ========================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--surface-base);
  color: var(--content-primary);
  font-family: var(--font-family-base);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
 * TYPOGRAPHY UTILITY CLASSES
 * Story 1-2b: font-weight references updated to use var(--font-weight-*) tokens.
 * ========================================================================== */

.text-large-title {
  font-size: var(--text-large-title);
  line-height: var(--line-height-large-title);
  font-weight: var(--font-weight-bold);
}

.text-title-1 {
  font-size: var(--text-title-1);
  line-height: var(--line-height-title-1);
  font-weight: var(--font-weight-semibold);
}

.text-title-2 {
  font-size: var(--text-title-2);
  line-height: var(--line-height-title-2);
  font-weight: var(--font-weight-semibold);
}

.text-body {
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
}

.text-callout {
  font-size: var(--text-callout);
  line-height: var(--line-height-callout);
  font-weight: var(--font-weight-regular);
}

.text-caption {
  font-size: var(--text-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-regular);
}

/* ==========================================================================
 * LAYOUT UTILITIES
 * Per UX spec §Layout Architecture
 * ========================================================================== */

.app-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--surface-base);
  min-width: 1024px;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--surface-primary);
  border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-floating);
  position: fixed;
  top: 0;
  left: var(--rail-width);
  right: 0;
  height: var(--header-height);
  z-index: var(--z-header);
}

.app-content {
  flex: 1;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* Card scroll region — only scrollable area in the shell (UX-DR14) */
.card-scroll-region {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-lg);
  position: relative;
  scroll-behavior: smooth;
}

/* Scroll shadow wrapper — float shadows over card region (UX-DR5) */
.card-scroll-region-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  overflow: hidden;
}
.card-scroll-region-wrapper::before,
.card-scroll-region-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--scroll-shadow-size);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-instant) ease;
}
.card-scroll-region-wrapper::before {
  top: 0;
  background: var(--scroll-shadow-top);
}
.card-scroll-region-wrapper::after {
  bottom: 0;
  background: var(--scroll-shadow-bottom);
}
.card-scroll-region-wrapper.scroll-shadow--top::before { opacity: 1; }
.card-scroll-region-wrapper.scroll-shadow--bottom::after { opacity: 1; }

/* Chat input — fixed bottom (UX-DR14) */
.chat-input-bar {
  position: fixed;
  bottom: 0;
  left: var(--rail-width);
  right: 0;
  height: var(--chat-input-height);
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--chat-input-padding-v) var(--chat-input-padding-h);
  background-color: var(--surface-primary);
  border-top: 1px solid var(--border-default);
}
.chat-input-bar__field {
  flex: 1;
  min-height: 2.75rem; /* 44px WCAG 2.5.5 */
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background-color: var(--surface-secondary);
  color: var(--content-primary);
  font-size: var(--text-body);
  font-family: var(--font-family-base);
  resize: none;
  outline: none;
}
.chat-input-bar__field:focus-visible {
  border-color: var(--border-strong);
  outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
  outline-offset: var(--btn-focus-ring-offset);
}
.chat-input-bar__send {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-card);
  background-color: var(--accent-calm-strong);  /* WCAG AA: 5.12:1 for white glyph */
  color: var(--content-inverse);
  cursor: pointer;
}
.chat-input-bar__send:focus-visible {
  outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
  outline-offset: var(--btn-focus-ring-offset);
}

/* Skip link — WCAG 2.4.1 Bypass Blocks */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--rail-width);
  z-index: 9999;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-primary);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--content-primary);
  font-weight: var(--font-weight-medium);
}
.skip-link:focus { top: var(--space-sm); }

/* Panel overlay — slide-from-right (UX-DR10) */
.panel-backdrop {
  position: fixed;
  inset: 0;
  background: var(--panel-backdrop);
  z-index: 199;
}
.panel-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--panel-width);
  background-color: var(--surface-primary);
  z-index: 200;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-floating);
  transform: translateX(0);
  transition: transform var(--panel-slide-duration) ease;
}
.panel-overlay--closing {
  transform: translateX(100%);
}
.panel-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}
.panel-overlay__close-btn,
.panel-overlay__back-btn {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-card);
  background: none;
  cursor: pointer;
  color: var(--content-secondary);
}
.panel-overlay__close-btn:focus-visible,
.panel-overlay__back-btn:focus-visible {
  outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
  outline-offset: var(--btn-focus-ring-offset);
}
.panel-overlay__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-lg);
}

/* Kill switch modal (UX-DR25) */
.kill-switch-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: calc(var(--z-modal) - 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kill-switch-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
  background-color: var(--surface-primary);
  border-radius: var(--radius-card);
  padding: var(--modal-padding);
  max-width: var(--modal-max-width);
  width: calc(100% - 2 * var(--space-xl));
  box-shadow: var(--shadow-floating);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.kill-switch-modal__title {
  font-size: var(--text-title-2);
  font-weight: var(--font-weight-semibold);
  color: var(--content-primary);
  margin: 0;
}
.kill-switch-modal__body {
  color: var(--content-secondary);
  font-size: var(--text-body);
}
.kill-switch-modal__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

/* ==========================================================================
 * KILL SWITCH STATE TOKENS — Story 3-1b
 * Classes applied to a status indicator element to reflect KillSwitchUiState.
 * ========================================================================== */

/* Idle: no visual change from default — class present for CSS specificity. */
.kill-switch-status--idle {
  /* intentionally empty; inherits default surface/content tokens */
}

/* Triggered: warn-level accent — action in progress */
.kill-switch-status--triggered {
  --kill-switch-badge-bg:     var(--accent-attentive);
  --kill-switch-badge-color:  var(--content-inverse);
}

/* Halted: decisive accent — terminal state */
.kill-switch-status--halted {
  --kill-switch-badge-bg:     var(--accent-decisive);
  --kill-switch-badge-color:  var(--content-inverse);
}

/* Status badge — rendered when state != Idle */
.kill-switch-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-sm);
  height: 1.5rem;
  border-radius: var(--radius-pill, 9999px);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  background-color: var(--kill-switch-badge-bg, var(--accent-attentive));
  color: var(--kill-switch-badge-color, var(--content-inverse));
  animation: kill-switch-badge-in var(--duration-fast, 150ms) ease;
}

@keyframes kill-switch-badge-in {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Forced-colors (Windows High Contrast) override */
@media (forced-colors: active) {
  .kill-switch-status--triggered .kill-switch-status-badge,
  .kill-switch-status--halted    .kill-switch-status-badge {
    background-color: ButtonFace;
    color:            ButtonText;
    border:           1px solid ButtonText;
    forced-color-adjust: none;
  }
}

/* Contextual header zone — 200ms crossfade (UX-DR42) */
.header-zone {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  transition: var(--header-crossfade);
}
.header-zone--transitioning { opacity: 0; }

/* Briefing page — priority stack (UX-DR15, UX-DR20, UX-DR29) */
.briefing-page {
  width: 100%;
}
.briefing-page__stack {
  display: flex;
  flex-direction: column;
  gap: var(--briefing-card-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.briefing-page__show-more {
  display: flex;
  justify-content: center;
  padding: var(--space-md);
}
.briefing-page__show-more-btn {
  min-height: 2.75rem;
  min-width: 8rem;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-secondary);
  color: var(--content-primary);
  cursor: pointer;
  font-size: var(--text-body);
}
.briefing-page__show-more-btn:focus-visible {
  outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
  outline-offset: var(--btn-focus-ring-offset);
}
.all-clear {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  gap: var(--space-md);
  text-align: center;
  animation: all-clear-fade-in var(--all-clear-duration) ease;
}
.all-clear__text {
  font-size: var(--text-title-2);
  font-weight: var(--font-weight-semibold);
  color: var(--accent-calm-strong);  /* WCAG AA: 4.90:1 on surface-base (text role → -strong) */
}
@keyframes all-clear-fade-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .all-clear { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-overlay { transition: none; transition-duration: 0s; }
}

/* Connection status indicator */
.connection-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  min-width: 44px;
  min-height: 44px;
  cursor: default;
  font-size: var(--text-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--duration-fast) ease;
}

.connection-status--calm {
  color: var(--accent-calm);
  background-color: var(--accent-calm-subtle);
}

.connection-status--attentive {
  color: var(--accent-attentive);
  background-color: var(--accent-attentive-subtle);
}

.connection-status--decisive {
  color: var(--accent-decisive);
  background-color: var(--accent-decisive-subtle);
}

/* Syncing pulse animation — disabled by prefers-reduced-motion */
@keyframes pulse-sync {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.connection-status--syncing {
  color: var(--accent-calm);
  background-color: var(--accent-calm-subtle);
  animation: pulse-sync var(--duration-pulse) ease-in-out infinite;
}

/* ==========================================================================
 * BUTTON COMPONENT — Story 1-4a, UX-DR7
 * 7 variants × 3 sizes × 6 states — all via CSS custom properties.
 * ========================================================================== */

/* --- Base --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: 1px solid transparent;
  border-radius: var(--btn-border-radius);
  font-family: var(--font-family-base);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: var(--btn-transition);
  /* Focus ring — UX-DR33: outline uses var(--interactive-focus) token */
  outline: none;
}

.btn:focus-visible {
  outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
  outline-offset: var(--btn-focus-ring-offset);
}

/* --- Sizes --- */
.btn--standard {
  min-height: var(--btn-height-standard);
  padding: 0 var(--btn-padding-h-standard);
}

.btn--compact {
  min-height: var(--btn-height-compact);
  padding: 0 var(--btn-padding-h-compact);
}

.btn--icon-only-size {
  min-height: var(--btn-height-standard);
  min-width: var(--btn-height-standard);
  padding: 0;
}

.btn--compact.btn--icon-only-size {
  min-height: var(--btn-height-compact);
  min-width: var(--btn-height-compact);
}

/* --- Primary Variant --- */
.btn--primary {
  background-color: var(--interactive-primary);
  color: var(--content-inverse);
  border-color: var(--interactive-primary);
}

.btn--primary:hover:not(.btn--disabled):not(.btn--loading) {
  background-color: var(--interactive-primary-hover);
  border-color: var(--interactive-primary-hover);
}

.btn--primary:active:not(.btn--disabled):not(.btn--loading) {
  opacity: 0.88;
}

/* --- Approve Variant --- */
.btn--approve {
  background-color: var(--accent-calm-strong);  /* WCAG AA for white text */
  color: var(--content-inverse);
  border-color: var(--accent-calm-strong);
}

.btn--approve:hover:not(.btn--disabled):not(.btn--loading) {
  filter: brightness(1.08);
}

.btn--approve:active:not(.btn--disabled):not(.btn--loading) {
  opacity: 0.88;
}

/* --- Reject Variant --- */
.btn--reject {
  background-color: var(--accent-decisive-strong);  /* WCAG AA for white text */
  color: var(--content-inverse);
  border-color: var(--accent-decisive-strong);
}

.btn--reject:hover:not(.btn--disabled):not(.btn--loading) {
  background-color: var(--accent-decisive-vivid);
  border-color: var(--accent-decisive-vivid);
}

.btn--reject:active:not(.btn--disabled):not(.btn--loading) {
  opacity: 0.88;
}

/* --- Edit Variant --- */
.btn--edit {
  background-color: transparent;
  color: var(--interactive-primary);
  border-color: var(--border-strong);
}

.btn--edit:hover:not(.btn--disabled):not(.btn--loading) {
  background-color: var(--surface-secondary);
  border-color: var(--interactive-primary);
}

.btn--edit:active:not(.btn--disabled):not(.btn--loading) {
  background-color: var(--surface-tertiary);
}

/* --- Ghost Variant --- */
.btn--ghost {
  background-color: transparent;
  color: var(--content-secondary);
  border-color: transparent;
}

.btn--ghost:hover:not(.btn--disabled):not(.btn--loading) {
  background-color: var(--surface-secondary);
  color: var(--content-primary);
}

.btn--ghost:active:not(.btn--disabled):not(.btn--loading) {
  background-color: var(--surface-tertiary);
}

/* --- Decisive Variant (Terminate / destructive action) --- */
.btn--decisive {
  background-color: var(--accent-decisive-strong);  /* WCAG AA for white text */
  color: var(--content-inverse);
  border-color: var(--accent-decisive-strong);
}

.btn--decisive:hover:not(.btn--disabled):not(.btn--loading) {
  filter: brightness(0.92);
}

.btn--decisive:active:not(.btn--disabled):not(.btn--loading) {
  opacity: 0.88;
}

/* --- Danger Variant --- */
.btn--danger {
  background-color: var(--accent-decisive-subtle);
  color: var(--accent-decisive-vivid);
  border-color: var(--accent-decisive);
}

.btn--danger:hover:not(.btn--disabled):not(.btn--loading) {
  background-color: var(--accent-decisive-strong);  /* WCAG AA for white text */
  color: var(--content-inverse);
}

.btn--danger:active:not(.btn--disabled):not(.btn--loading) {
  opacity: 0.88;
}

/* --- Icon-Only Variant --- */
.btn--icon-only {
  background-color: transparent;
  color: var(--content-secondary);
  border-color: transparent;
}

.btn--icon-only:hover:not(.btn--disabled):not(.btn--loading) {
  background-color: var(--surface-secondary);
  color: var(--content-primary);
}

/* --- Disabled State (shared) --- */
.btn--disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Loading State --- */
.btn--loading {
  cursor: wait;
  pointer-events: none;
  position: relative;
}

.btn__spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin var(--duration-normal) linear infinite;
}

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

/* --- Icon and Label sub-elements --- */
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  flex-shrink: 0;
}

.btn__label {
  /* Inherits font from .btn */
}

/* ==========================================================================
 * RAIL COMPONENT — Story 1-4a, UX-DR9
 * 48px vertical strip, 4 fixed items, roving tabindex, shield status colors.
 * ========================================================================== */

.rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--rail-width);
  background-color: var(--rail-bg);
  border-right: 1px solid var(--rail-border);
  padding: var(--space-sm) 0;
  gap: var(--space-xs);
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100vh;
  z-index: var(--rail-z-index);
  overflow: hidden;
  transition: width var(--duration-fast) ease;
}

/* Rail expands to show labels (first 7 days or hover) */
.rail:has(.rail-item__label:not(.rail-item__label--hidden)) {
  width: auto;
  min-width: var(--rail-width);
  padding: var(--space-sm) var(--space-xs);
}

/* --- Rail Item --- */
.rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  width: 100%;
  min-height: var(--rail-item-height);
  padding: var(--space-xs);
  background-color: transparent;
  border: none;
  border-radius: var(--radius-card);
  cursor: pointer;
  color: var(--content-secondary);
  transition: background-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
  outline: none;
}

.rail-item:focus-visible {
  outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
  outline-offset: var(--btn-focus-ring-offset);
}

.rail-item:hover:not(.rail-item--selected) {
  background-color: var(--rail-item-hover-bg);
  color: var(--content-primary);
}

.rail-item--selected {
  background-color: var(--rail-item-selected-bg);
  color: var(--content-primary);
}

/* --- Rail Item Icon --- */
.rail-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rail-icon-size);
  height: var(--rail-icon-size);
  font-size: var(--rail-icon-size);
  line-height: 1;
  flex-shrink: 0;
}

/* --- Rail Item Label --- */
.rail-item__label {
  font-size: var(--rail-label-font-size);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.rail-item__label--hidden {
  display: none;
}

/* --- Shield Icon Status Colors (UX-DR68) --- */
/* --accent-calm → green shield */
.rail-shield--green {
  color: var(--accent-calm);
}

/* --accent-attentive → amber shield */
.rail-shield--amber {
  color: var(--accent-attentive);
}

/* --accent-decisive → red shield */
.rail-shield--red {
  color: var(--accent-decisive);
}

/* Shield pulsing animation when syncing — matches connection-status--syncing */
.rail-item__icon.rail-shield--green.rail-item--syncing {
  animation: pulse-sync var(--duration-pulse) ease-in-out infinite;
}

/* ==========================================================================
 * APPSHELL WITH RAIL — Story 1-4a
 * ========================================================================== */

.app-shell--with-rail .app-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  margin-left: var(--rail-width);
  margin-top: var(--header-height);
  margin-bottom: var(--chat-input-height);
  height: calc(100vh - var(--header-height) - var(--chat-input-height));
  overflow: hidden;
}

.app-shell--with-rail .app-content {
  flex: 1;
  max-width: 720px;
}

/* Narrow viewport: card stack hidden when panel is active (UX-DR54) */
@media (max-width: 1100px) {
  .app-shell--panel-active .app-body { display: none; }
  .panel-overlay { width: calc(100vw - var(--rail-width) - var(--space-lg)); }
}

/* Responsive breakpoints (UX-DR10) */
@media (max-width: 1440px) {
  .panel-overlay { position: fixed; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn__spinner { animation: none; }
  .rail { transition: none; }
}

/* ── Card Component ─────────────────────────────────────── */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--card-min-height);
  max-height: var(--card-max-height-stack);
  border-radius: var(--card-radius);
  background-color: var(--surface-primary);
  border-left: var(--card-accent-border-width) solid var(--content-secondary);
  padding: var(--card-padding);
  gap: var(--card-gap);
  overflow: hidden;
  cursor: pointer;
}
.card--informational { border-left-color: var(--card-border-informational); }
.card--calm { border-left-color: var(--card-border-calm); }
.card--attentive { border-left-color: var(--card-border-attentive); }
.card--decisive { border-left-color: var(--card-border-decisive); }
.card--meeting-prep { border-left-color: var(--card-border-meeting-prep); }
.card--catch-up { border-left-color: var(--card-border-catch-up); }
.card--completion { border-left-color: var(--card-border-completion); }
.card--focused { outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color); outline-offset: var(--btn-focus-ring-width); }
.card--hovered { background-color: var(--surface-secondary); }
.card--expanded { max-height: none; }
.card--loading { opacity: 0.6; pointer-events: none; }
.card--error { border-left-color: var(--accent-decisive); }
.card--seen { opacity: 0.6; }
.card--completing { animation: completing-fade var(--duration-normal) ease forwards; }
@keyframes completing-fade { to { opacity: 0; transform: translateX(2rem); } }
.card__header {
  display: flex;
  align-items: center;
  gap: var(--card-gap);
}
.card__icon {
  width: var(--card-icon-size);
  height: var(--card-icon-size);
  flex-shrink: 0;
}
.card__badge {
  font-size: var(--card-badge-font-size);
  font-weight: var(--card-badge-font-weight);
  flex: 1;
}
.card__dismiss {
  width: var(--card-dismiss-size);
  height: var(--card-dismiss-size);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.625rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--content-secondary);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__body { flex: 1; }
.card__skeleton {
  flex: 1;
  min-height: 2rem;
  background: linear-gradient(90deg, var(--surface-secondary) 25%, var(--surface-primary) 50%, var(--surface-secondary) 75%);
  background-size: 200% 100%;
  animation: skeleton-sweep var(--duration-pulse) ease-in-out infinite;
  border-radius: var(--radius-card);
}
@keyframes skeleton-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.card__error { color: var(--accent-decisive); }
@media (prefers-reduced-motion: reduce) {
  .card--completing { animation: none; opacity: 0.3; }
  .card__skeleton { animation: none; background: var(--surface-secondary); }
}

/* ── Toast Component ─────────────────────────────────────── */
/* Story 1-4c, UX-DR12: Bottom-left fixed notification stack. */
.toast-container {
  position: fixed;
  bottom: var(--toast-bottom);
  left: var(--toast-left);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--toast-gap);
  z-index: var(--toast-z-index);
  max-width: var(--toast-max-width);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--toast-padding);
  border-radius: var(--toast-radius);
  background-color: var(--surface-primary);
  box-shadow: var(--toast-shadow);
  pointer-events: all;
  animation: toast-slide-in var(--duration-fast) ease;
}
@keyframes toast-slide-in { from { transform: translateX(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
.toast--info    { border-left: 0.25rem solid var(--accent-intelligence);        background-color: var(--toast-bg-info); }
.toast--success { border-left: 0.25rem solid var(--accent-calm-strong);          background-color: var(--toast-bg-success); }
.toast--warning { border-left: 0.25rem solid var(--accent-attentive-strong);     background-color: var(--toast-bg-warning); }
.toast--error   { border-left: 0.25rem solid var(--accent-decisive);             background-color: var(--toast-bg-error); }
.toast__icon {
  flex-shrink: 0;
  font-size: var(--toast-icon-size);
}
.toast__message {
  flex: 1;
  font-size: var(--toast-font-size);
}
.toast__countdown {
  height: var(--toast-countdown-height);
  background-color: var(--toast-countdown-bg);
  border-radius: var(--radius-full);
  transition: width var(--duration-normal) linear;
}
.toast__actions { display: flex; gap: var(--space-xs); flex-shrink: 0; }
.toast__close,
.toast__undo {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--content-secondary);
  font-size: var(--toast-font-size);
  min-width: var(--toast-close-size);
  min-height: var(--toast-close-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--toast-radius);
}
.toast__close:focus-visible,
.toast__undo:focus-visible {
  outline: 2px solid var(--interactive-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; opacity: 1; }
  .toast__countdown { transition: none; }
}

/* ── Playground ─────────────────────────────────────────── */
/* Story 1-4c, UX-DR79: Dev-mode design system catalogue. */
.playground { padding: var(--space-lg); }
.playground__title { font-size: var(--text-title-1); margin-bottom: var(--space-lg); }
.playground__themes { display: flex; gap: var(--space-xl); }
.playground__theme {
  flex: 1;
  padding: var(--space-md);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-default);
}
[data-theme="dark"] {
  background-color: var(--surface-base);
  color: var(--content-primary);
  color-scheme: dark;
}
.playground__section { margin-bottom: var(--space-lg); }
.playground__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.playground__stack { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 24rem; }

/* ==========================================================================
 * FORCED COLORS (Windows High Contrast / Forced Colors API)
 * Story 1-23: FS-17 — maps design tokens to CSS system palette keywords
 * WCAG 2.2 SC 1.4.3 compliance in forced-colors mode
 * ========================================================================== */

@media (forced-colors: active) {
  :root {
    /* Register accent (green/calm semantic) → LinkText (interactive/semantic) */
    --accent-calm:              LinkText;
    --accent-calm-subtle:       Canvas;

    /* Attentive accent (amber/warning semantic) → ButtonText */
    --accent-attentive:         ButtonText;
    --accent-attentive-subtle:  Canvas;

    /* Decisive/destructive tokens → ButtonText */
    --accent-decisive:          ButtonText;
    --accent-decisive-subtle:   Canvas;
    --accent-decisive-vivid:    ButtonText;

    /* Border tokens → system CanvasText/ButtonText */
    --border-register:          ButtonText;
    --border-default:           CanvasText;
    --border-strong:            CanvasText;
    --border-card:              CanvasText;

    /* Content tokens — ensure high-contrast text */
    --content-primary:          CanvasText;
    --content-secondary:        CanvasText;
    --content-tertiary:         GrayText;
    --content-disabled:         GrayText;
    --content-inverse:          Canvas;
  }

  /* Decisive button: explicit ButtonFace override */
  .btn--decisive {
    background-color: ButtonFace;
    color:            ButtonText;
    border-color:     ButtonText;
    forced-color-adjust: none;
  }
}

/* ==========================================================================
 * STORY 2-1: Gmail OAuth2 — Component CSS
 * Classes: .gmail-connect-btn, .gmail-connection-card,
 *          .reauth-notification-banner, .settings-page
 * Design tokens: Epic 1 color/spacing/radius/typography tokens
 * ========================================================================== */

/* ── GmailConnectButton ─────────────────────────────────── */
.gmail-connect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  height: var(--btn-height-standard);
  padding: 0 var(--btn-padding-h-standard);
  border-radius: var(--btn-border-radius, var(--radius-card));
  font-size: var(--btn-font-size, var(--text-body));
  font-weight: var(--btn-font-weight, var(--font-weight-bold));
  background-color: var(--accent-calm-strong);  /* WCAG AA for white text */
  color: var(--content-inverse);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--btn-transition, opacity 150ms ease);
}
.gmail-connect-btn:hover:not(:disabled) {
  opacity: 0.9;
}
.gmail-connect-btn:focus-visible {
  outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
  outline-offset: var(--btn-focus-ring-width);
}
.gmail-connect-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* State modifiers */
.gmail-connect-btn--connecting {
  background-color: var(--accent-calm-subtle);
  color: var(--content-primary);
}
.gmail-connect-btn--connected {
  background-color: var(--surface-secondary);
  color: var(--content-secondary);
  border-color: var(--border-default);
}
.gmail-connect-btn--token-expired {
  background-color: var(--accent-attentive-strong);  /* WCAG AA for white text */
  color: var(--content-inverse);
}
.gmail-connect-btn--revoking {
  background-color: var(--surface-secondary);
  color: var(--content-secondary);
  border-color: var(--border-default);
}
.gmail-connect-btn--error {
  background-color: var(--accent-decisive-strong);  /* WCAG AA for white text */
  color: var(--content-inverse);
}
.gmail-connect-btn--awaiting-consent {
  background-color: var(--accent-attentive-subtle);
  color: var(--content-primary);
}

/* ── GmailConnectionCard ─────────────────────────────────── */
.gmail-connection-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--card-padding, var(--space-md));
  border-radius: var(--card-radius, var(--radius-card));
  background-color: var(--surface-primary);
  border: 1px solid var(--border-card, var(--border-default));
}
.gmail-connection-card--connected {
  border-color: var(--accent-calm);
}
.gmail-connection-card--connecting {
  border-color: var(--accent-calm-subtle);
  opacity: 0.85;
}
.gmail-connection-card--awaiting-consent {
  border-color: var(--accent-attentive);
}
.gmail-connection-card--token-expired {
  border-color: var(--accent-attentive);
}
.gmail-connection-card--revoking {
  opacity: 0.7;
}
.gmail-connection-card--error {
  border-color: var(--accent-decisive);
}
.gmail-connection-card__email {
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  color: var(--content-primary);
}
.gmail-connection-card__status {
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  color: var(--content-primary);
}
.gmail-connection-card__consent-link {
  font-size: var(--text-body);
  color: var(--accent-calm);
  text-decoration: underline;
}
.gmail-connection-card__error {
  font-size: var(--text-body);
  color: var(--accent-decisive);
}

/* ── CalendarConnectionCard (cf-integrations-07) ─────────── */
.calendar-connection-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--card-padding, var(--space-md));
  border-radius: var(--card-radius, var(--radius-card));
  background-color: var(--surface-primary);
  border: 1px solid var(--border-card, var(--border-default));
}
.calendar-connection-card--connecting {
  border-color: var(--accent-calm-subtle);
  opacity: 0.85;
}
.calendar-connection-card--awaiting-consent {
  border-color: var(--accent-attentive);
}
.calendar-connection-card--error {
  border-color: var(--accent-decisive);
}
.calendar-connection-card__status {
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  color: var(--content-primary);
}
.calendar-connection-card__consent-link {
  font-size: var(--text-body);
  color: var(--accent-calm);
  text-decoration: underline;
}
.calendar-connection-card__error {
  font-size: var(--text-body);
  color: var(--accent-decisive);
}

/* ── TelegramConnectionCard (cf-integrations-06) ─────────── */
.telegram-connection-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--card-padding, var(--space-md));
  border-radius: var(--card-radius, var(--radius-card));
  background-color: var(--surface-primary);
  border: 1px solid var(--border-card, var(--border-default));
}
.telegram-connection-card--paired {
  border-color: var(--accent-calm);
}
.telegram-connection-card--unpaired {
  border-color: var(--accent-attentive);
}
.telegram-connection-card--loading {
  opacity: 0.85;
}
.telegram-connection-card--error {
  border-color: var(--accent-decisive);
}
.telegram-connection-card__status {
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  color: var(--content-primary);
}
.telegram-connection-card__hint {
  font-size: var(--text-caption, var(--text-body));
  color: var(--content-secondary);
  margin: 0;
}
.telegram-connection-card__code-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-card);
  background-color: var(--accent-attentive-subtle);
}
.telegram-connection-card__code {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-title-2);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
  color: var(--content-primary);
}
.telegram-connection-card__count {
  font-size: var(--text-body);
  color: var(--content-secondary);
}
.telegram-connection-card__error {
  font-size: var(--text-body);
  color: var(--accent-decisive);
}

/* ── ReauthNotificationBanner ────────────────────────────── */
.reauth-notification-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-card);
  background-color: var(--accent-attentive-subtle);
  border: 1px solid var(--accent-attentive);
}
.reauth-notification-banner--visible {
  display: flex;
}
.reauth-notification-banner--hidden {
  display: none;
}
.reauth-notification-banner__message {
  font-size: var(--text-body);
  color: var(--content-primary);
  margin: 0;
}
.reauth-notification-banner__button {
  align-self: flex-start;
}

/* ── SettingsPage ────────────────────────────────────────── */
.settings-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-lg);
  max-width: 48rem;
}
.settings-page__title {
  font-size: var(--text-title-1);
  font-weight: var(--font-weight-bold);
  color: var(--content-primary);
  margin: 0;
}
.settings-page__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.settings-page__section-title {
  font-size: var(--text-title-2);
  font-weight: var(--font-weight-bold);
  color: var(--content-primary);
  margin: 0;
}

/* ── Story 2-5: Email Send with HITL Approval — Design Tokens & Components ── */

:root {
  /* Friction tier colour tokens (ApprovalCard — Story 2-5).
     All source tokens come from the design-system master; no hex fallbacks. */
  --friction-auto-bg:         var(--accent-success-subtle);
  --friction-auto-border:     var(--accent-success-strong, var(--accent-success));
  --friction-one-tap-bg:      var(--accent-attentive-subtle);
  --friction-one-tap-border:  var(--accent-attentive-strong);
  --friction-review-bg:       var(--accent-destructive-subtle);
  --friction-review-border:   var(--accent-destructive-strong, var(--accent-destructive));

  /* Undo toast tokens */
  --undo-toast-bg:     var(--surface-tertiary);
  --undo-toast-text:   var(--content-primary);
  --undo-toast-radius: var(--radius-pill);
  --undo-toast-shadow: var(--shadow-elevated);
  --undo-toast-z:      var(--z-modal);

  /* Rate-limit banner tokens */
  --rate-limit-warning-bg:     var(--accent-attentive-subtle);
  --rate-limit-warning-border: var(--accent-attentive-strong);
  --rate-limit-blocked-bg:     var(--accent-destructive-subtle);
  --rate-limit-blocked-border: var(--accent-destructive-strong, var(--accent-destructive));
}

/* ── ApprovalCard friction tier modifiers ────────────────── */
.card--approval {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-default);
}

.card--friction-auto {
  background-color: var(--friction-auto-bg);
  border-color: var(--friction-auto-border);
}

.card--friction-one-tap {
  background-color: var(--friction-one-tap-bg);
  border-color: var(--friction-one-tap-border);
}

.card--friction-review {
  background-color: var(--friction-review-bg);
  border-color: var(--friction-review-border);
}

.approval-card__tier-label {
  font-size: var(--text-title-2);
  font-weight: var(--font-weight-bold);
  color: var(--content-primary);
  margin: 0;
}

.approval-card__actions {
  display: flex;
  gap: var(--space-sm);
}

.approval-card__reauth {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-card);
  background-color: var(--surface-subtle);
}

/* ── UndoToast ───────────────────────────────────────────── */
.undo-toast {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--undo-toast-bg);
  color: var(--undo-toast-text);
  border-radius: var(--undo-toast-radius);
  box-shadow: var(--undo-toast-shadow);
  z-index: var(--undo-toast-z);
  white-space: nowrap;
}

.undo-toast__countdown {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
}

.undo-toast__undo-btn {
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  color: var(--undo-toast-text);
  background: none;
  border: 1px solid var(--undo-toast-text);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
}

/* ── RateLimitBanner ─────────────────────────────────────── */
.rate-limit-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  font-size: var(--text-body);
}

.rate-limit-banner--warning {
  background-color: var(--rate-limit-warning-bg);
  border-color: var(--rate-limit-warning-border);
  color: var(--content-primary);
}

.rate-limit-banner--blocked {
  background-color: var(--rate-limit-blocked-bg);
  border-color: var(--rate-limit-blocked-border);
  color: var(--content-primary);
  flex-direction: column;
  align-items: flex-start;
}

/* ── SendProgressIndicator ───────────────────────────────── */
.send-progress {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-body);
}

.send-progress__spinner {
  color: var(--content-secondary);
}

.send-progress__success {
  color: var(--accent-success-strong);
  font-weight: var(--font-weight-medium);
}

.send-progress__error {
  color: var(--accent-destructive-strong);
  font-weight: var(--font-weight-medium);
}

/* ── Newsletter / Spam tokens (Story 2-6) ───────────────────────────────
   Semantic colour maps onto the intelligence (blue-violet, informational)
   and decisive (red, flagged) registers from the design-system master. */
:root {
  --color-newsletter-bg:         var(--accent-intelligence-subtle);
  --color-newsletter-border:     color-mix(in srgb, var(--accent-intelligence) 40%, transparent);
  --color-newsletter-badge-bg:   var(--accent-intelligence-subtle);
  --color-newsletter-badge-text: var(--accent-intelligence-strong);
  --color-spam-badge-bg:         var(--accent-destructive-subtle);
  --color-spam-badge-text:       var(--accent-destructive-strong);
}

.newsletter-section {
  background-color: var(--color-newsletter-bg);
  border: 1px solid var(--color-newsletter-border);
  border-radius: var(--radius-md, 0.5rem);
  padding: var(--space-sm, 0.5rem);
}

.newsletter-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: var(--font-weight-medium, 500);
  padding: var(--space-xs, 0.25rem) 0;
}

.newsletter-section__chevron {
  margin-left: var(--space-xs, 0.25rem);
}

.newsletter-section__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.newsletter-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  padding: var(--space-xs, 0.25rem) 0;
}

.newsletter-row__info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.email-filter-settings {
  padding: var(--space-sm, 0.5rem);
}

.email-filter-settings__title {
  font-weight: var(--font-weight-medium, 500);
  margin-bottom: var(--space-sm, 0.5rem);
}

.email-filter-settings__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.email-filter-settings__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  padding: var(--space-xs, 0.25rem) 0;
}

.badge--newsletter {
  background-color: var(--color-newsletter-badge-bg);
  color: var(--color-newsletter-badge-text);
  border-radius: var(--radius-sm, 0.25rem);
  padding: 0.125rem 0.375rem;
  font-size: var(--text-caption, 0.75rem);
}

.badge--spam {
  background-color: var(--color-spam-badge-bg);
  color: var(--color-spam-badge-text);
  border-radius: var(--radius-sm, 0.25rem);
  padding: 0.125rem 0.375rem;
  font-size: var(--text-caption, 0.75rem);
}

/* ── Follow-up tracking design tokens — Story 2-7 ──────────────────────────
   Maps onto the attentive register from the design-system master. */
:root {
  --color-attentive:       var(--accent-attentive);
  --color-attentive-bg:    var(--accent-attentive-subtle);
  --color-attentive-text:  var(--accent-attentive-strong);
  --followup-card-border:  var(--accent-attentive-strong);
}

/* Follow-up card (card--attentive variant) */
.card--attentive {
  background-color: var(--color-attentive-bg);
  border: 1px solid var(--followup-card-border);
  border-radius: var(--radius-md, 0.5rem);
  padding: var(--space-md, 1rem);
}

.follow-up-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
}

.follow-up-card__heading {
  font-size: var(--text-body, 1rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-attentive-text);
  margin: 0;
}

.follow-up-card__body {
  font-size: var(--text-body, 1rem);
  color: var(--color-attentive-text);
  margin: 0;
}

.follow-up-card__party {
  font-size: var(--text-caption, 0.75rem);
  color: var(--color-attentive);
  margin: 0;
}

/* Briefing follow-up reminder */
.briefing-followup-reminder {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  padding: var(--space-xs, 0.25rem) 0;
}

.briefing-followup-reminder__commitment {
  flex: 1;
  font-size: var(--text-body, 1rem);
}

.briefing-followup-reminder__due {
  font-size: var(--text-caption, 0.75rem);
  color: var(--color-attentive);
}

/* Follow-up action bar */
.follow-up-action-bar {
  display: flex;
  gap: var(--space-xs, 0.25rem);
  flex-wrap: wrap;
  margin-top: var(--space-sm, 0.5rem);
}

/* Snooze selector */
.snooze-selector {
  display: flex;
  gap: var(--space-xs, 0.25rem);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm, 0.25rem);
  padding: var(--space-xs, 0.25rem);
}

.snooze-selector__option {
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  font-size: var(--text-caption, 0.75rem);
  cursor: pointer;
  border-radius: var(--radius-xs, 0.125rem);
}

.snooze-selector__option:hover {
  background-color: var(--color-attentive-bg);
}

/* ── Email attachment design tokens — Story 2-8 ───────────────────────────
   Neutral file-row palette maps onto the master surface/content scale. */
:root {
  --color-attachment-bg:     var(--surface-secondary);
  --color-attachment-border: var(--border-default);
  --color-attachment-icon:   var(--content-secondary);
  --color-attachment-size:   var(--content-tertiary);
}

/* Attachment list container */
.attachment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.25rem);
}

.attachment-list--empty {
  padding: var(--space-xs, 0.25rem) 0;
}

.attachment-list__empty-state {
  font-size: var(--text-caption, 0.75rem);
  color: var(--color-attachment-size);
  margin: 0;
}

/* Attachment row */
.attachment-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 0.25rem);
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  background-color: var(--color-attachment-bg);
  border: 1px solid var(--color-attachment-border);
  border-radius: var(--radius-sm, 0.25rem);
}

.attachment-row__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-attachment-icon);
}

.attachment-row__filename {
  flex: 1;
  font-size: var(--text-body, 1rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-row__size {
  font-size: var(--text-caption, 0.75rem);
  color: var(--color-attachment-size);
  flex-shrink: 0;
}

.attachment-row__download {
  flex-shrink: 0;
}

/* Inline attachment badge */
.attachment-badge--inline {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-caption, 0.75rem);
  padding: 0 var(--space-xs, 0.25rem);
  background-color: var(--color-attachment-border);
  color: var(--color-attachment-icon);
  border-radius: var(--radius-sm, 0.25rem);
}

/* ── Account switcher design tokens (Story 2-9) ───────────────────────────
   Active row uses intelligence tint; status dots map onto calm/attentive/
   decisive registers (strong variants for AA contrast as badge text). */
:root {
  --color-account-active-bg:      var(--accent-intelligence-subtle);
  --color-account-active-border:  color-mix(in srgb, var(--accent-intelligence) 40%, transparent);
  --color-account-status-ok:      var(--accent-calm-strong);
  --color-account-status-pending: var(--accent-attentive-strong);
  --color-account-status-error:   var(--accent-destructive-strong);
}

/* Account switcher layout */
.account-switcher {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.25rem);
}

.account-switcher__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
}

.account-switcher__row--active {
  background-color: var(--color-account-active-bg);
  border: 1px solid var(--color-account-active-border);
  border-radius: var(--radius-sm, 0.25rem);
}

.account-switcher__name {
  flex: 1;
  font-size: var(--text-body, 1rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Account status badge */
.account-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-caption, 0.75rem);
  padding: 0 var(--space-xs, 0.25rem);
  border-radius: var(--radius-sm, 0.25rem);
}

.account-status-badge--connected {
  color: var(--color-account-status-ok);
}

.account-status-badge--connecting {
  color: var(--color-account-status-pending);
}

.account-status-badge--error {
  color: var(--color-account-status-error);
}

/* ── Briefing design tokens (Story 2-10) ──────────────────────────────────
   Stale timestamp = attentive register, new-item badge = intelligence. */
:root {
  --color-briefing-stale:        var(--accent-attentive-strong);
  --color-briefing-new-badge:    var(--accent-intelligence-strong);
  --color-briefing-new-badge-bg: var(--accent-intelligence-subtle);
}

.briefing-timestamp {
  font-size: var(--text-caption, 0.75rem);
  color: var(--content-secondary);
}

.briefing-timestamp--stale {
  color: var(--color-briefing-stale);
  font-weight: 500;
}

.briefing-delta-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-caption, 0.75rem);
  font-weight: 600;
  padding: 0 var(--space-xs, 0.25rem);
  background-color: var(--color-briefing-new-badge-bg);
  color: var(--color-briefing-new-badge);
  border-radius: var(--radius-full, 9999px);
}

/* ==========================================================================
 * STAGING QUEUE HITL APPROVAL INTERFACE — Story 3-2
 * Source: frontend-spec-3-2-staging-queue-hitl-approval-interface.md §5
 * ========================================================================== */

/* §5.1 Friction Tier Border Tokens (AC2, UX-DR15) — map to master strong variants */
:root {
  --staging-border-auto-with-undo:   var(--accent-calm-strong);
  --staging-border-one-tap:          var(--accent-attentive-strong);
  --staging-border-review-confirm:   var(--accent-destructive-strong);

  /* §5.2 Confidence Tone Indicator Tokens (UX-DR22) */
  --confidence-tone-high:   var(--accent-calm-strong);
  --confidence-tone-medium: var(--accent-attentive-strong);
  --confidence-tone-low:    var(--accent-destructive-strong);

  /* §5.3 Staging Re-auth Modal Tokens */
  --staging-reauth-modal-backdrop: var(--overlay-panel);
  --staging-reauth-modal-bg:       var(--surface-primary);
  --staging-reauth-modal-border:   var(--border-default);

  /* §5.4 All-Clear Ceremony Animation (AC7, UX-DR29) */
  --all-clear-ceremony-duration: 600ms;
  --all-clear-ceremony-easing:   ease-in-out;

  /* §5.5 Inline Edit Panel Tokens */
  --inline-edit-panel-bg:     var(--surface-secondary);
  --inline-edit-panel-border: var(--border-default);
}

/* Friction tier card border classes */
.card--staging-auto-with-undo   { border-left: 4px solid var(--staging-border-auto-with-undo); }
.card--staging-one-tap          { border-left: 4px solid var(--staging-border-one-tap); }
.card--staging-review-confirm   { border-left: 4px solid var(--staging-border-review-confirm); }

/* Confidence tone dot indicator */
.confidence-tone--high   { background-color: var(--confidence-tone-high); }
.confidence-tone--medium { background-color: var(--confidence-tone-medium); }
.confidence-tone--low    { background-color: var(--confidence-tone-low); }

/* All-clear state ceremony animation */
.all-clear-state {
  animation: all-clear-ceremony var(--all-clear-ceremony-duration) var(--all-clear-ceremony-easing);
}

@keyframes all-clear-ceremony {
  0%   { opacity: 0; transform: scale(0.92); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1.0); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --all-clear-ceremony-duration: 0ms;
  }
  .all-clear-state {
    animation: none;
  }
}

/* Staging re-auth modal */
.staging-reauth-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--staging-reauth-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
}

.staging-reauth-modal {
  background: var(--staging-reauth-modal-bg);
  border: 1px solid var(--staging-reauth-modal-border);
  border-radius: var(--radius-md, 0.5rem);
  padding: var(--space-lg, 1.5rem);
  min-width: 20rem;
  max-width: 28rem;
}

/* Inline edit panel */
.inline-edit-panel {
  background: var(--inline-edit-panel-bg);
  border: 1px solid var(--inline-edit-panel-border);
  border-radius: var(--radius-sm, 0.25rem);
  padding: var(--space-sm, 0.5rem);
}

.inline-edit-panel__input {
  width: 100%;
  min-height: 4rem;
  background: var(--surface-primary);
  border: 1px solid var(--inline-edit-panel-border);
  border-radius: var(--radius-sm, 0.25rem);
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  font-family: inherit;
  font-size: var(--text-body, 1rem);
  resize: vertical;
}

.inline-edit-panel__actions {
  display: flex;
  gap: var(--space-sm, 0.5rem);
  margin-top: var(--space-xs, 0.25rem);
  justify-content: flex-end;
}

/* ==========================================================================
 * AUDIT TRAIL — Story 3-6
 * ========================================================================== */

/* ---- Design tokens ---- */
:root {
  --audit-entry-bg:           var(--surface-secondary);
  --audit-entry-border:       var(--border-default);
  --audit-entry-hash-color:   var(--content-secondary);
  --audit-verified-color:     var(--accent-calm);
  --audit-broken-color:       var(--accent-decisive);
  --audit-unknown-color:      var(--accent-attentive);
  --audit-panel-max-width:    640px;
}

/* ---- AuditTrailPanel ---- */
.audit-trail-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 1rem);
  padding: var(--space-md, 1rem);
  max-width: var(--audit-panel-max-width);
  background-color: var(--surface-primary);
}

.audit-trail-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.audit-trail-panel__title {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 600;
  margin: 0;
}

.audit-trail-panel__close-btn,
.audit-trail-panel__verify-btn,
.audit-trail-panel__export-btn,
.audit-trail-panel__page-btn {
  min-height: 48px;
  min-width: 48px;
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border-default);
  background-color: var(--surface-secondary);
  cursor: pointer;
}

.audit-trail-panel__filters {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
}

.audit-trail-panel__filter-select {
  min-height: 48px;
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm, 4px);
}

.audit-trail-panel__integrity {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
}

.audit-trail-panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.25rem);
}

.audit-trail-panel__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm, 0.5rem);
}

.audit-trail-panel__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs, 0.25rem);
}

/* The panel's one alert region — list, verify and export failures all land
   here (followups §25). It had no rule at all while it was export-only, so the
   message rendered as unstyled body text wedged beside the button by the flex
   row above; hence the column direction. */
.audit-trail-panel__error {
  align-self: stretch;
  color: var(--accent-decisive);
  text-align: right;
}

.audit-trail-panel__empty {
  padding: var(--space-md, 1rem);
  text-align: center;
  color: var(--content-secondary);
}

/* ---- AuditTrailEntryRow ---- */
.audit-entry {
  border: 1px solid var(--audit-entry-border);
  border-radius: var(--radius-card, 8px);
  background-color: var(--audit-entry-bg);
  overflow: hidden;
}

.audit-entry__summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  width: 100%;
  min-height: 48px;
  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.audit-entry__event-type {
  font-weight: 500;
  flex: 1;
}

.audit-entry__timestamp {
  color: var(--content-secondary);
  font-size: var(--text-sm, 0.875rem);
}

.audit-entry__chain-status--verified { color: var(--audit-verified-color); }
.audit-entry__chain-status--broken   { color: var(--audit-broken-color); font-weight: 600; }
.audit-entry__chain-status--unknown  { color: var(--audit-unknown-color); }

.audit-entry__hash {
  font-family: monospace;
  font-size: var(--text-xs, 0.75rem);
  color: var(--audit-entry-hash-color);
}

.audit-entry__detail {
  padding: var(--space-md, 1rem);
  border-top: 1px solid var(--audit-entry-border);
}

.audit-entry__provenance {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  margin: 0;
}

.audit-entry__hash-full {
  font-family: monospace;
  font-size: var(--text-xs, 0.75rem);
  word-break: break-all;
  color: var(--audit-entry-hash-color);
}

/* ---- AuditIntegrityIndicator ---- */
.audit-integrity {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 0.25rem);
  font-size: var(--text-sm, 0.875rem);
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  border-radius: var(--radius-sm, 4px);
}

.audit-integrity--idle    { color: var(--content-secondary); }
.audit-integrity--pending { color: var(--accent-attentive); }
.audit-integrity--verified {
  color: var(--audit-verified-color);
  background-color: color-mix(in srgb, var(--audit-verified-color) 10%, transparent);
}
.audit-integrity--broken {
  color: var(--audit-broken-color);
  background-color: color-mix(in srgb, var(--audit-broken-color) 10%, transparent);
  font-weight: 600;
}

/* ---- Forced-colors (Windows High Contrast) ---- */
@media (forced-colors: active) {
  .audit-entry { border-color: ButtonText; }
  .audit-entry__summary { color: ButtonText; }
  .audit-entry__chain-status--verified,
  .audit-entry__chain-status--broken { color: ButtonText; }
  .audit-integrity--verified,
  .audit-integrity--broken {
    background-color: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
  .audit-trail-panel__export-btn,
  .audit-trail-panel__verify-btn,
  .audit-trail-panel__page-btn,
  .audit-trail-panel__close-btn {
    background-color: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }
}

/* ======================================================================== */
/* Story 3-7: Activity Log Panel                                              */
/* ======================================================================== */

/* ---- Design tokens ---- */
:root {
  --activity-panel-bg: var(--surface-primary);
  --activity-panel-border: var(--border-default);
  --activity-entry-border: var(--border-default);
  --activity-entry-bg: var(--surface-secondary);
  --activity-undo-btn-color: var(--accent-primary);
  --activity-undo-btn-border: var(--accent-primary);
  --activity-done-badge-color: var(--content-secondary);
  --activity-countdown-color: var(--accent-attentive);
}

/* ---- Panel shell ---- */
.activity-log-panel {
  display: flex;
  flex-direction: column;
  background: var(--activity-panel-bg);
  border: 1px solid var(--activity-panel-border);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  max-height: 80vh;
}

/* ---- Header ---- */
.activity-log-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md, 1rem);
  border-bottom: 1px solid var(--activity-panel-border);
}

.activity-log-panel__title {
  margin: 0;
  font-size: var(--text-lg, 1.125rem);
  font-weight: 600;
}

.activity-log-panel__close-btn {
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-lg, 1.125rem);
  color: var(--content-secondary);
  border-radius: var(--radius-sm, 4px);
}

/* ---- Error banner ---- */
.activity-log-panel__error {
  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  background: color-mix(in srgb, var(--state-error) 10%, transparent);
  color: var(--state-error);
  font-size: var(--text-sm, 0.875rem);
  border-bottom: 1px solid var(--state-error);
}

/* ---- Loading / empty states ---- */
.activity-log-panel__loading,
.activity-log-panel__empty {
  padding: var(--space-xl, 2rem);
  text-align: center;
  color: var(--content-secondary);
  font-size: var(--text-sm, 0.875rem);
}

/* ---- Feed list ---- */
.activity-log-panel__list {
  overflow-y: auto;
  flex: 1;
  padding: var(--space-sm, 0.5rem) 0;
}

/* ---- Individual entry ---- */
.activity-entry {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  border-bottom: 1px solid var(--activity-entry-border);
  background: var(--activity-entry-bg);
  min-height: 48px;
}

.activity-entry__type {
  flex: 1;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: var(--content-primary);
}

.activity-entry__status {
  font-size: var(--text-xs, 0.75rem);
  color: var(--activity-countdown-color);
  font-weight: 600;
  min-width: 3rem;
  text-align: right;
}

.activity-entry__undo-btn {
  min-width: 64px;
  min-height: 36px;
  padding: 0 var(--space-sm, 0.5rem);
  background: none;
  border: 1px solid var(--activity-undo-btn-border);
  color: var(--activity-undo-btn-color);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
}

.activity-entry__done-badge {
  font-size: var(--text-xs, 0.75rem);
  color: var(--activity-done-badge-color);
  min-width: 3rem;
  text-align: center;
}

/* ---- Forced-colors (Windows High Contrast) ---- */
@media (forced-colors: active) {
  .activity-log-panel { border-color: ButtonText; }
  .activity-entry { border-color: ButtonText; }
  .activity-entry__undo-btn {
    background-color: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }
  .activity-log-panel__close-btn {
    background-color: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }
  .activity-log-panel__error {
    background-color: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }
}

/* ============================================================
   Story 3-8: Anti-Rubber-Stamp — Approve Button Countdown Timer
   ============================================================ */

/* ---- Approve button: counting state ---- */
.approval-card__approve-btn--counting {
  position: relative;
  overflow: hidden;
  cursor: not-allowed;
}

/* Progress bar fill (left-to-right) shrinks as countdown decreases */
.approval-card__approve-btn--counting::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--progress-pct, 100%);
  background: color-mix(in srgb, currentColor 15%, transparent);
  pointer-events: none;
  transition: width 0.9s linear;
}

/* ============================================================
   Story 3-8: Anti-Rubber-Stamp — Rubber Stamp Cooldown Banner
   ============================================================ */

.rubber-stamp-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
  padding: var(--space-md, 1rem);
  background: color-mix(in srgb, var(--state-warning) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--state-warning) 40%, transparent);
  border-radius: var(--radius-md, 8px);
  margin-block: var(--space-sm, 0.5rem);
}

.rubber-stamp-banner__text {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--content-primary);
  line-height: 1.5;
}

.rubber-stamp-banner__ack-btn {
  align-self: flex-end;
  min-height: 48px;
  min-width: 140px;
  padding: 0 var(--space-md, 1rem);
}

/* ---- Forced-colors (Windows High Contrast) ---- */
@media (forced-colors: active) {
  .approval-card__approve-btn--counting::after {
    background-color: Highlight;
  }
  .rubber-stamp-banner {
    border-color: ButtonText;
    background-color: ButtonFace;
  }
  .rubber-stamp-banner__text {
    color: ButtonText;
  }
}

/* ============================================================
   Story 3-10: Security Event Notifications — UX-DR38
   Components: SecurityNotificationCenter, WeeklyTrustReportCard,
               SecuritySettingsPanel
   ============================================================ */

/* ---- Notification Bell ---- */
.notification-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.notification-bell__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radius-full, 9999px);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: var(--text-lg, 1.125rem);
  transition: background 0.15s ease;
}

.notification-bell__trigger:hover,
.notification-bell__trigger:focus-visible {
  background: color-mix(in srgb, var(--content-primary) 8%, transparent);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Unread badge ---- */
.notification-badge {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--state-danger);
  color: var(--content-inverse);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  line-height: 18px;
  text-align: center;
  border-radius: var(--radius-full, 9999px);
  pointer-events: none;
}

/* ---- Dropdown panel ---- */
.notification-dropdown {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: var(--z-dropdown, 200);
  min-width: 320px;
  max-width: 420px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-elevated);
  padding: var(--space-xs, 0.25rem) 0;
}

.notification-dropdown__empty {
  padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
  margin: 0;
  color: var(--content-secondary);
  font-size: var(--text-sm, 0.875rem);
}

/* ---- Notification items ---- */
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm, 0.5rem);
  width: 100%;
  padding: var(--space-sm, 0.5rem) var(--space-lg, 1.5rem);
  background: transparent;
  border: none;
  text-align: start;
  cursor: pointer;
  font-size: var(--text-sm, 0.875rem);
  color: var(--content-primary);
  line-height: 1.4;
  transition: background 0.1s ease;
}

.notification-item:hover,
.notification-item:focus-visible {
  background: color-mix(in srgb, var(--content-primary) 5%, transparent);
  outline: none;
}

.notification-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.notification-item--unread {
  font-weight: var(--weight-semibold, 600);
  background: color-mix(in srgb, var(--brand-primary) 4%, transparent);
}

.notification-item--security {
  border-inline-start: 3px solid var(--state-danger);
}

.notification-item--warning {
  border-inline-start: 3px solid var(--state-warning);
}

.notification-item--info {
  border-inline-start: 3px solid var(--brand-primary);
}

.notification-item__message {
  flex: 1;
}

/* ---- Weekly Trust Report Card ---- */
.trust-report-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 1rem);
  padding: var(--space-lg, 1.5rem);
  background: color-mix(in srgb, var(--brand-primary) 4%, var(--surface-card));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, transparent);
  border-radius: var(--radius-lg, 12px);
}

.trust-report-card--ambient {
  background: color-mix(in srgb, var(--state-success) 4%, var(--surface-card));
  border-color: color-mix(in srgb, var(--state-success) 20%, transparent);
}

.trust-report-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
}

.trust-report-card__shield {
  font-size: var(--text-xl, 1.25rem);
  line-height: 1;
}

.trust-report-card__title {
  margin: 0;
  font-size: var(--text-base, 1rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--content-primary);
}

.trust-report-card__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.25rem);
}

.trust-report-card__items li {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs, 0.25rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--content-primary);
}

.trust-report-card__tagline {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--content-secondary);
  font-style: italic;
}

/* ---- Security Settings Panel ---- */
.security-settings-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 1.5rem);
  padding: var(--space-lg, 1.5rem);
}

.security-settings-panel__heading {
  margin: 0;
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--content-primary);
  display: flex;
  align-items: center;
  gap: var(--space-xs, 0.25rem);
}

.security-panel__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.25rem);
  padding-block-end: var(--space-md, 1rem);
  border-block-end: 1px solid var(--border-subtle);
}

.security-panel__section:last-child {
  border-block-end: none;
  padding-block-end: 0;
}

.security-panel__section-title {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--content-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.security-panel__status-ok {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--state-success);
  font-weight: var(--weight-medium, 500);
}

.security-panel__status-alert {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--state-danger);
  font-weight: var(--weight-semibold, 600);
}

/* ---- Forced-colors (Windows High Contrast) — Story 3-10 ---- */
@media (forced-colors: active) {
  .notification-badge {
    background-color: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
  .notification-dropdown {
    border-color: ButtonText;
    background-color: ButtonFace;
    box-shadow: none;
  }
  .notification-item--security,
  .notification-item--warning,
  .notification-item--info {
    border-inline-start-color: ButtonText;
  }
  .notification-item--unread {
    background-color: Highlight;
    color: HighlightText;
  }
  .trust-report-card,
  .trust-report-card--ambient {
    border-color: ButtonText;
    background-color: ButtonFace;
  }
  .trust-report-card__title,
  .trust-report-card__items li {
    color: ButtonText;
  }
  .security-panel__status-ok,
  .security-panel__status-alert {
    color: ButtonText;
    forced-color-adjust: none;
  }
  .security-panel__status-alert {
    text-decoration: underline;
  }
  .security-panel__section {
    border-block-end-color: ButtonText;
  }
}

/* ==========================================================================
 * VELURIA APP SHELL (.vapp) — designed frontend (claude.ai/design "Veluria App")
 * All colors/type/shadows come from the primitive tokens; nothing hardcoded
 * except the macOS traffic-light dots, which are platform chrome.
 * ========================================================================== */

@keyframes vapp-fade-slide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vapp-breathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.vapp {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface-base);
  color: var(--content-primary);
  font-family: var(--font-family-base);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  box-sizing: border-box;
}
.vapp *, .vapp *::before, .vapp *::after { box-sizing: border-box; }
.vapp ::-webkit-scrollbar { width: 8px; height: 8px; }
.vapp ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 4px; }

/* ---- status dots ---- */
.vapp-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.vapp-dot--calm         { background: var(--accent-calm); }
.vapp-dot--attentive    { background: var(--accent-attentive); }
.vapp-dot--decisive     { background: var(--accent-decisive); }
.vapp-dot--intelligence { background: var(--accent-intelligence); }
.vapp-dot--breathe      { animation: vapp-breathe 2.4s ease-in-out infinite; }

/* ---- titlebar ---- */
.vapp-titlebar {
  height: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  background: var(--surface-primary);
  border-bottom: 1px solid var(--border-default);
  -webkit-app-region: drag;
}
/* `.vapp-tl-dot*` deleted — the fake macOS traffic lights they styled are gone
   from the markup on every platform (see the note in pages/veluria_app.rs).
   These were the file's only hardcoded hex colours. */
.vapp-titlebar__status {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-caption);
  line-height: var(--line-height-caption);
  color: var(--content-tertiary);
}
.vapp-kbd-btn {
  margin-left: auto;
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  color: var(--content-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

/* ---- body / nav rail ---- */
.vapp-body { flex: 1; display: flex; min-height: 0; position: relative; }
.vapp-nav {
  width: 48px;
  flex: 0 0 48px;
  background: var(--surface-secondary);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 6px;
}
.vapp-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--content-secondary);
  border: none;
  cursor: pointer;
}
.vapp-nav-btn.is-active {
  background: var(--surface-primary);
  color: var(--content-primary);
  box-shadow: inset 0 0 0 1px var(--border-default);
}
/* HP-17: hamburger drawer toggle — hidden at desktop widths (icon rail +
   always-visible sidebar cover navigation there); shown at the phone-width
   breakpoint below. */
.vapp-nav-hamburger { display: none; }
.vapp-nav-sep { width: 24px; height: 1px; background: var(--border-default); margin: 4px 0; }
.vapp-nav-spacer { flex: 1; }
.vapp-nav > .vapp-dot { margin-bottom: 4px; }

/* ---- sessions sidebar ---- */
.vapp-sidebar {
  width: 220px;
  flex: 0 0 220px;
  background: var(--surface-secondary);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vapp-sidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; }
.vapp-sidebar__label {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--content-tertiary);
}
.vapp-newchat-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--content-secondary);
  cursor: pointer;
  font-size: var(--text-callout);
  line-height: 1;
}
.vapp-sess-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.vapp-sess-row { display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 8px; cursor: pointer; }
.vapp-sess-row.is-active { background: var(--surface-primary); }
.vapp-sess-row__text { flex: 1; min-width: 0; }
.vapp-sess-title {
  font-size: var(--text-callout);
  font-weight: var(--font-weight-medium);
  color: var(--content-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vapp-sess-time { font-size: var(--text-caption); color: var(--content-tertiary); margin-top: 2px; }
.vapp-pin-btn {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--content-tertiary);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vapp-pin-btn.is-pinned { color: var(--accent-intelligence-strong); }

/* ---- chat ---- */
.vapp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; background: var(--surface-base); }
.vapp-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.vapp-chat__head { height: 38px; flex: 0 0 38px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--border-default); }
.vapp-chat__title { font-size: var(--text-title-2); font-weight: var(--font-weight-semibold); }
.vapp-chat__scroll { flex: 1; overflow-y: auto; padding: 20px 0; }
.vapp-chat__col { max-width: 640px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 8px; }

.vapp-intro { text-align: center; padding: 60px 20px 20px; }
.vapp-intro__title {
  font-size: var(--text-large-title);
  line-height: var(--line-height-large-title);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  color: var(--content-primary);
}
.vapp-intro__sub { color: var(--content-secondary); margin-top: 6px; }
.vapp-sugs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
.vapp-sug {
  font-size: var(--text-callout);
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-default);
  background: var(--surface-primary);
  color: var(--content-secondary);
  cursor: pointer;
}

.vapp-msg-user {
  align-self: flex-end;
  max-width: 80%;
  background: var(--interactive-primary);
  color: var(--content-inverse);
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  animation: vapp-fade-slide 0.3s cubic-bezier(0.2, 0, 0.2, 1) both;
}
.vapp-msg-assistant {
  align-self: flex-start;
  max-width: 80%;
  color: var(--content-primary);
  line-height: 1.5;
  padding: 2px;
  animation: vapp-fade-slide 0.3s cubic-bezier(0.2, 0, 0.2, 1) both;
}

/* ---- cards ---- */
.vapp-card {
  align-self: stretch;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-intelligence);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  box-shadow: var(--shadow-card);
  animation: vapp-fade-slide 0.35s cubic-bezier(0.2, 0, 0.2, 1) both;
}
.vapp-card--calm      { border-left-color: var(--accent-calm); }
.vapp-card--attentive { border-left-color: var(--accent-attentive); }
.vapp-card--decisive  { border-left-color: var(--accent-decisive); }
.vapp-card--tint-intelligence { background: var(--accent-intelligence-subtle); }
.vapp-card--tint-calm         { background: var(--accent-calm-subtle); }
.vapp-card--tint-attentive    { background: var(--accent-attentive-subtle); }
.vapp-card--tint-decisive     { background: var(--accent-decisive-subtle); }
.vapp-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  gap: 8px;
}
.vapp-card__label { color: var(--accent-intelligence-strong); }
.vapp-card--calm      .vapp-card__label { color: var(--accent-calm-strong); }
.vapp-card--attentive .vapp-card__label { color: var(--accent-attentive-strong); }
.vapp-card--decisive  .vapp-card__label { color: var(--accent-decisive-strong); }
.vapp-card__when {
  color: var(--content-tertiary);
  font-weight: var(--font-weight-regular);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.vapp-card__title { font-size: var(--text-title-2); font-weight: var(--font-weight-semibold); color: var(--content-primary); margin-bottom: 6px; }
.vapp-card__body { color: var(--content-secondary); line-height: 1.5; }
.vapp-card__draft {
  background: var(--surface-secondary);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
  color: var(--content-primary);
  line-height: 1.55;
  border-left: 2px solid var(--border-default);
}
.vapp-card__prov {
  font-size: var(--text-callout);
  font-style: italic;
  color: var(--accent-intelligence-strong);
  margin-top: 10px;
  line-height: 1.5;
}
.vapp-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
  align-items: center;
  flex-wrap: wrap;
}
.vapp-act {
  font-size: var(--text-callout);
  font-weight: var(--font-weight-medium);
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: var(--content-secondary);
  border: 1px solid var(--border-default);
}
.vapp-act--primary { background: var(--interactive-primary); color: var(--content-inverse); border-color: transparent; }
.vapp-act--calm    { background: var(--accent-calm-strong); color: var(--content-inverse); border-color: transparent; }
.vapp-act--link    { background: transparent; color: var(--interactive-link); border: none; }

/* ---- inline step-up reauth prompt (FR48) — apps/client/src/pages/veluria_app.rs card_view */
.chat-card__reauth-label {
  display: block;
  margin-block-start: var(--space-sm);
  margin-block-end: var(--space-xs);
  color: var(--content-secondary);
  font-size: var(--text-caption);
}
.chat-card__reauth-input {
  inline-size: 100%;
  padding: var(--space-xs);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-secondary);
  color: var(--content-primary);
  font-family: inherit;
}

/* ---- killed banner + composer ---- */
.vapp-killed-banner {
  margin: 0 16px 10px;
  padding: 10px 14px;
  background: var(--accent-decisive-subtle);
  border: 1px solid var(--accent-decisive);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-callout);
  color: var(--accent-decisive-strong);
}
.vapp-killed-banner > span { flex: 1; }
.vapp-resume-btn {
  font-size: var(--text-callout);
  font-weight: var(--font-weight-semibold);
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  background: var(--accent-decisive-strong);
  color: var(--content-inverse);
  cursor: pointer;
}
.vapp-composer-bar {
  flex: 0 0 auto;
  background: var(--surface-primary);
  border-top: 1px solid var(--border-default);
  padding: 10px 16px;
  position: relative;
}
.vapp-killswitch-btn {
  position: absolute;
  right: 24px;
  bottom: 60px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  color: var(--content-tertiary);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
.vapp-composer {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 4px 6px 4px 14px;
  height: 40px;
}
.vapp-composer__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-family-base);
  font-size: var(--text-body);
  color: var(--content-primary);
}
.vapp-send-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--interactive-primary);
  color: var(--content-inverse);
  border: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.vapp-send-btn:disabled, .vapp-composer__input:disabled { opacity: 0.5; cursor: default; }

/* ── HP-17: phone-width app shell ──────────────────────────────────────
   Ports the "Veluria App - Android" design file's collapsed layout: the
   220px sessions sidebar collapses into a hamburger-toggled off-canvas
   drawer, .vapp-main becomes the only visible column, the composer bar
   respects the safe-area inset, and the kill switch becomes a floating
   circular button above the composer. Phone breakpoint only — no
   tablet-intermediate step (out of scope per the story). Desktop
   (> 640px) styles above are untouched. */
@media (max-width: 640px) {
  /* The nav drawer (below) takes over the sidebar's job as an overlay. */
  .vapp-sidebar { display: none; }

  .vapp-nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    color: var(--content-secondary);
    border: none;
    cursor: pointer;
    margin-bottom: 4px;
  }

  .vapp-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-panel);
    z-index: var(--z-overlay);
    display: flex;
  }
  .vapp-drawer {
    width: 260px;
    max-width: 80vw;
    height: 100%;
    background: var(--surface-secondary);
    border-right: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .vapp-drawer__nav {
    display: flex;
    flex-direction: column;
    padding: 10px 8px;
    gap: 2px;
    border-bottom: 1px solid var(--border-default);
    flex: 0 0 auto;
  }
  .vapp-drawer-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--content-secondary);
    cursor: pointer;
    text-align: left;
  }
  .vapp-drawer-nav-btn.is-active {
    background: var(--surface-primary);
    color: var(--content-primary);
  }
  .vapp-drawer-nav-btn__label {
    font-size: var(--text-callout);
    font-weight: var(--font-weight-medium);
  }
  .vapp-drawer__sessions { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .vapp-drawer__sessions .vapp-sess-list { flex: 1; }

  /* Composer bar: safe-area padding so the input isn't obscured by
     on-screen nav bars on real devices (root cause of the live-QA-confirmed
     unreachable composer). */
  .vapp-composer-bar {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }

  /* Kill switch: floating circular icon button above the composer instead
     of the desktop's inline labeled pill. font-size: 0 collapses the text
     node without touching the Leptos markup (icon SVG keeps its own
     explicit width/height, CSS-only per story scope). */
  .vapp-killswitch-btn {
    right: 14px;
    bottom: 64px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    gap: 0;
    justify-content: center;
  }
}

/* ---- full pages (skills / messaging / artifacts) ---- */
.vapp-page { height: 100%; overflow-y: auto; }
.vapp-page__col { max-width: 680px; margin: 0 auto; padding: 28px 24px 60px; }
.vapp-page__title {
  font-size: var(--text-large-title);
  line-height: var(--line-height-large-title);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  color: var(--content-primary);
}
.vapp-page__sub { color: var(--content-secondary); margin-top: 6px; }
.vapp-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.vapp-settings__content .vapp-cards, .vapp-panel-scroll .vapp-cards { margin-top: 0; }

.vapp-item-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-card);
}
.vapp-item__text { flex: 1; min-width: 0; }
.vapp-item__name { font-size: var(--text-title-2); font-weight: var(--font-weight-semibold); color: var(--content-primary); }
.vapp-item__desc { font-size: var(--text-callout); color: var(--content-secondary); margin-top: 4px; line-height: 1.4; }
.vapp-item__detail { font-size: var(--text-caption); font-family: var(--font-family-mono); color: var(--content-tertiary); margin-top: 6px; }

.vapp-list-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 22px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-primary);
}
.vapp-panel-scroll .vapp-list-box { margin-top: 0; }
.vapp-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-default); }
.vapp-list-box .vapp-row:last-child { border-bottom: none; }
.vapp-row--boxed { border: 1px solid var(--border-default); border-radius: 10px; padding: 12px 14px; }
.vapp-row__text { flex: 1; min-width: 0; }
.vapp-row__name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-callout);
  font-weight: var(--font-weight-medium);
  color: var(--content-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vapp-row--boxed .vapp-row__text .vapp-row__name { font-size: var(--text-body); font-weight: var(--font-weight-regular); }
.vapp-row__when { font-size: var(--text-caption); color: var(--content-tertiary); flex: 0 0 auto; }

.vapp-btn-ghost {
  font-size: var(--text-callout);
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--content-secondary);
  cursor: pointer;
  flex: 0 0 auto;
}
.vapp-btn-ghost--start { align-self: flex-start; padding: 6px 14px; border-radius: 8px; }
.vapp-btn-ghost--wide { flex: 1; padding: 9px 0; border-radius: 8px; font-weight: var(--font-weight-medium); }
.vapp-btn-ghost:disabled { opacity: 0.5; cursor: default; }

/* ---- toggle ---- */
.vapp-toggle {
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: var(--surface-tertiary);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}
.vapp-toggle.is-on { background: var(--accent-calm); }
.vapp-toggle__knob {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-primary);
  position: absolute;
  top: 2px;
  transform: translateX(2px);
  transition: transform var(--duration-instant) cubic-bezier(0.2, 0, 0.2, 1);
}
.vapp-toggle.is-on .vapp-toggle__knob { transform: translateX(14px); }

/* ---- overlay ---- */
.vapp-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
}
.vapp-overlay-panel {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: var(--shadow-elevated);
  width: 740px;
  max-width: 92vw;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vapp-overlay__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
}
.vapp-overlay__title { font-size: var(--text-title-1); font-weight: var(--font-weight-semibold); color: var(--content-primary); }
.vapp-close-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--content-secondary);
  cursor: pointer;
  font-size: 15px;
}
.vapp-panel-scroll { flex: 1; overflow-y: auto; padding: 22px 24px; }
.vapp-panel__sub { font-size: var(--text-callout); color: var(--content-secondary); margin-bottom: 16px; }
.vapp-empty { font-size: var(--text-callout); color: var(--content-tertiary); padding: 8px 0; }

/* ---- settings ---- */
.vapp-settings { flex: 1; display: flex; min-height: 0; }
.vapp-settings__nav { width: 190px; flex: 0 0 190px; border-right: 1px solid var(--border-default); padding: 14px 8px; overflow-y: auto; }
.vapp-settings__tab {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--text-callout);
  font-weight: var(--font-weight-medium);
  color: var(--content-secondary);
  margin-bottom: 2px;
}
.vapp-settings__tab.is-active { background: var(--surface-secondary); color: var(--content-primary); }
.vapp-settings__content { flex: 1; overflow-y: auto; padding: 22px 24px; }
.vapp-kv-col { display: flex; flex-direction: column; gap: 14px; max-width: 440px; }
.vapp-kv { display: flex; justify-content: space-between; align-items: center; }
.vapp-kv--sep { padding-top: 6px; border-top: 1px solid var(--border-default); }
.vapp-kv__k { color: var(--content-primary); }
.vapp-kv__k--dotted { display: flex; align-items: center; gap: 8px; }
.vapp-kv__v { font-size: var(--text-callout); color: var(--content-secondary); }
.vapp-kv__v--calm { color: var(--accent-calm-strong); }
.vapp-kv__head { font-size: var(--text-callout); font-weight: var(--font-weight-semibold); color: var(--content-primary); margin-bottom: 6px; }
.vapp-kv__hint { font-size: var(--text-callout); color: var(--content-tertiary); }
.vapp-about__name { font-size: var(--text-title-2); font-weight: var(--font-weight-semibold); color: var(--content-primary); }
.vapp-about__version { font-size: var(--text-callout); color: var(--content-tertiary); font-family: var(--font-family-mono); }
.vapp-link { font-size: var(--text-callout); color: var(--interactive-link); }

/* ---- command center ---- */
.vapp-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.vapp-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--border-default);
  border-radius: 20px;
  background: var(--accent-calm-subtle);
}
.vapp-chip--attentive { background: var(--accent-attentive-subtle); }
.vapp-chip--decisive  { background: var(--accent-decisive-subtle); }
.vapp-chip__label { font-size: var(--text-callout); font-weight: var(--font-weight-medium); color: var(--content-primary); }
.vapp-chip__status { font-size: var(--text-caption); color: var(--content-tertiary); }
.vapp-sechead {
  font-size: var(--text-callout);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--content-tertiary);
  margin-bottom: 10px;
}
.vapp-weekline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--accent-calm-subtle);
  color: var(--accent-calm-strong);
  border-radius: 20px;
  font-size: var(--text-callout);
  font-weight: var(--font-weight-medium);
  margin-bottom: 22px;
}
.vapp-log-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-primary);
  font-size: var(--text-callout);
}
.vapp-list-box .vapp-log-row:last-child { border-bottom: none; }
.vapp-log-row__text { color: var(--content-primary); }
.vapp-log-row__time { font-size: var(--text-caption); font-family: var(--font-family-mono); color: var(--content-tertiary); flex: 0 0 auto; }

/* ---- cron ---- */
.vapp-cron-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-primary);
  box-shadow: var(--shadow-card);
}
.vapp-cron__text { flex: 1; min-width: 0; }
.vapp-cron__name { font-size: var(--text-title-2); font-weight: var(--font-weight-semibold); color: var(--content-primary); }
.vapp-cron__sched { font-size: var(--text-callout); color: var(--content-secondary); margin-top: 2px; }
.vapp-cron__side { text-align: right; flex: 0 0 auto; }
.vapp-cron__nextlabel { font-size: var(--text-caption); color: var(--content-tertiary); }
.vapp-cron__next { font-size: var(--text-callout); font-family: var(--font-family-mono); color: var(--content-primary); }

/* ---- profiles / agents ---- */
.vapp-profile-row, .vapp-agent-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-primary);
  box-shadow: var(--shadow-card);
}
.vapp-agent-row { gap: 12px; }
.vapp-profile-row.is-active { border-color: var(--accent-calm); }
.vapp-active-tag {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent-calm-strong);
}
.vapp-newprofile-btn {
  align-self: flex-start;
  margin-top: 4px;
  font-size: var(--text-callout);
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px dashed var(--border-default);
  background: transparent;
  color: var(--content-secondary);
  cursor: pointer;
}
.vapp-agent__side { text-align: right; flex: 0 0 auto; }
.vapp-agent__status {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.vapp-agent__status--intelligence { color: var(--accent-intelligence-strong); }
.vapp-agent__status--calm         { color: var(--accent-calm-strong); }
.vapp-agent__status--attentive    { color: var(--accent-attentive-strong); }
.vapp-agent__status--decisive     { color: var(--accent-decisive-strong); }
.vapp-agent__since { font-size: var(--text-caption); color: var(--content-tertiary); margin-top: 2px; }

/* ---- starmap ---- */
.vapp-star-wrap { flex: 1; display: flex; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface-base); }
.vapp-star-canvas { flex: 1; min-width: 0; overflow-y: auto; padding: var(--space-lg); }
.vapp-star-side { width: 360px; flex: 0 0 360px; border-left: 1px solid var(--border-default); padding: var(--space-lg); overflow-y: auto; background: var(--surface-primary); }
.kg-dashboard { display: flex; flex-direction: column; gap: var(--space-md); max-width: 760px; margin: 0 auto; }
.kg-search-label { font-size: var(--text-callout); font-weight: var(--font-weight-semibold); color: var(--content-primary); }
.kg-search-bar { width: 100%; padding: var(--space-sm) var(--space-md); color: var(--content-primary); background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.kg-type-filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.kg-type-chip, .kg-pagination button, .kg-entity-detail-close, .kg-edit-confirm-btn, .kg-edit-cancel-btn, .kg-provenance-toggle { padding: var(--space-xs) var(--space-sm); color: var(--content-secondary); background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-pill); cursor: pointer; }
.kg-type-chip[aria-pressed="true"] { color: var(--accent-intelligence-strong); background: var(--accent-intelligence-subtle); border-color: var(--accent-intelligence); }
.kg-entity-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.kg-entity-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-md); align-items: center; padding: var(--space-md); text-align: left; color: var(--content-primary); background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-card); cursor: pointer; }
.kg-entity-row:hover { background: var(--surface-secondary); }
.kg-entity-name { min-width: 0; font-weight: var(--font-weight-semibold); }
.kg-entity-type, .kg-entity-trust, .kg-trust-score, .kg-temporal-arc { font-size: var(--text-caption); color: var(--content-secondary); }
.kg-pagination { display: flex; justify-content: space-between; gap: var(--space-sm); }
.kg-loading-state, .kg-empty-state { color: var(--content-tertiary); }
.kg-error-state, .kg-inline-edit-error { color: var(--accent-decisive); }
.kg-entity-detail { display: flex; flex-direction: column; gap: var(--space-md); color: var(--content-primary); }
.kg-entity-detail h2 { margin: 0; font-size: var(--text-title-2); }
.kg-facts-panel, .kg-relationship-map, .kg-provenance-detail { display: flex; flex-direction: column; gap: var(--space-sm); }
.kg-fact-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-default); }
.kg-fact-row input { min-width: 0; color: var(--content-primary); background: var(--surface-base); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.kg-search-bar:focus-visible, .kg-type-chip:focus-visible, .kg-entity-row:focus-visible, .kg-pagination button:focus-visible, .kg-entity-detail button:focus-visible, .kg-entity-detail input:focus-visible { outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color); outline-offset: var(--btn-focus-ring-width); }

@media (max-width: 768px) {
  .vapp-star-wrap { flex-direction: column; overflow-y: auto; }
  .vapp-star-canvas { flex: 0 0 auto; overflow: visible; padding: var(--space-md); }
  .vapp-star-side { width: 100%; flex: 0 0 auto; overflow: visible; padding: var(--space-md); border-left: none; border-top: 1px solid var(--border-default); }
  .kg-entity-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); }
  .kg-entity-name { grid-column: 1 / -1; }
}

/* ---- command palette ---- */
.vapp-palette-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-panel);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  z-index: calc(var(--z-overlay) + 10);
}
.vapp-palette {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: var(--shadow-elevated);
  width: 480px;
  max-width: 90vw;
  overflow: hidden;
}
.vapp-palette__input {
  width: 100%;
  border: none;
  outline: none;
  padding: 14px 18px;
  font-family: var(--font-family-base);
  font-size: var(--text-body);
  color: var(--content-primary);
  border-bottom: 1px solid var(--border-default);
  background: transparent;
}
.vapp-palette__list { max-height: 320px; overflow-y: auto; padding: 6px; }
.vapp-palette__item {
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--text-callout);
  color: var(--content-primary);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.vapp-palette__item:hover { background: var(--surface-secondary); }
.vapp-palette__shortcut { font-size: var(--text-caption); font-family: var(--font-family-mono); color: var(--content-tertiary); }

/* ---- kill modal ---- */
.vapp-killmodal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}
.vapp-killmodal {
  background: var(--surface-primary);
  border: 1px solid var(--accent-decisive);
  border-radius: 16px;
  box-shadow: var(--shadow-elevated);
  width: 380px;
  max-width: 90vw;
  padding: 24px;
  text-align: center;
}
.vapp-killmodal__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-decisive-subtle);
  color: var(--accent-decisive-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.vapp-killmodal__title { font-size: var(--text-title-1); font-weight: var(--font-weight-semibold); color: var(--content-primary); }
.vapp-killmodal__body { color: var(--content-secondary); margin-top: 8px; line-height: 1.5; }
.vapp-killmodal__actions { display: flex; gap: 8px; margin-top: 20px; }
.vapp-halt-btn {
  flex: 1;
  font-size: var(--text-callout);
  font-weight: var(--font-weight-semibold);
  padding: 9px 0;
  border-radius: 8px;
  border: none;
  background: var(--accent-decisive-vivid);
  color: #fff;
  cursor: pointer;
}

/* ── Schedule configuration rows (Story 9-2, T-LEPTOS-03) ──────────────── */
/* Visual pause indicator for schedule rows; class applied by
   schedule_config_panel.rs (SCHEDULE_ROW_PAUSED_CLASS). */
.schedule-row--paused {
  opacity: 0.55;
  color: var(--content-disabled);
}

/* ── NL workflow plan panel (Story 9-3, T-UI-06) ───────────────────────── */
/* Classes applied by src/workflow/mod.rs. */
.workflow-plan-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}

.workflow-step {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--content-primary);
}

.workflow-step--needs-approval {
  color: var(--accent-attentive);
}

.workflow-step__description {
  font-size: var(--text-body);
}

/* ── Activity feed & unprocessed count badge (Story 5-10) ──────────────── */
/* Classes mirror the T-MUTANT CSS constants in
   veluria_gateway::briefing::activity_feed and their local mirror copies in
   apps/client/src/components/activity_feed_view.rs. */

.unprocessed-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--accent-intelligence);
  color: var(--content-inverse);
  border-radius: var(--radius-pill);
  font: var(--caption);
  font-weight: var(--font-weight-semibold);
  min-width: 1.5rem;
}

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.activity-feed__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.activity-feed__group-label {
  font: var(--caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--content-tertiary);
}

.activity-feed__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.activity-feed__item {
  padding: var(--space-sm) var(--card-gap);
  border-radius: var(--radius-card);
  background: var(--surface-secondary);
  font: var(--body);
  color: var(--content-primary);
}

/* New (unseen-this-session) activity feed item — AC3. */
.activity-feed__item--new {
  background: var(--accent-intelligence-subtle);
  border-left: 3px solid var(--accent-intelligence);
  font-weight: var(--font-weight-medium);
}

/* Needs-Your-Input section — AC4. */
.needs-input-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--accent-attentive-subtle);
  border: 1px solid var(--accent-attentive);
  border-radius: var(--radius-card);
}

/* ── HP-16: Pairing & device connection flow ─────────────────────────────
   Classes applied by src/pages/pairing.rs — Welcome / Pairing form / Success
   / Settings → Connection screens. All colors/spacing reuse the tokens
   above (design_system/colors_and_type.css); no new tokens declared here. */

.vpair-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-2xl) var(--space-lg);
  background: var(--surface-base);
  color: var(--content-primary);
  text-align: center;
}

.vpair-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  max-width: 28rem;
  padding: var(--space-xl);
  background: var(--surface-primary);
  border: 1px solid var(--border-card);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.vpair-title {
  font: var(--title-1);
  color: var(--content-primary);
  margin: 0;
}

.vpair-subtitle {
  font: var(--body);
  color: var(--content-secondary);
  margin: 0;
}

.vpair-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.vpair-field label {
  font: var(--callout);
  font-weight: var(--font-weight-medium);
  color: var(--content-secondary);
}

.vpair-field input {
  height: var(--input-height);
  padding: 0 var(--space-md);
  font: var(--body);
  color: var(--content-primary);
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}

.vpair-field input:focus {
  outline: none;
  border-color: var(--accent-intelligence);
  box-shadow: 0 0 0 3px var(--interactive-focus);
}

.vpair-button {
  height: var(--input-height);
  padding: 0 var(--space-lg);
  font: var(--body);
  font-weight: var(--font-weight-medium);
  color: var(--content-inverse);
  background: var(--interactive-primary);
  border: none;
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease);
}

.vpair-button:hover:not(:disabled) {
  background: var(--interactive-primary-hover);
}

.vpair-button:disabled {
  background: var(--content-disabled);
  cursor: not-allowed;
}

.vpair-button--secondary {
  color: var(--content-primary);
  background: transparent;
  border: 1px solid var(--border-strong);
}

.vpair-button--destructive {
  color: var(--content-inverse);
  background: var(--accent-destructive-strong);
}

/* Inline error banner (HP-16 §4) — distinguishes invalid/expired code vs
   unreachable gateway using auth_pair's Err string verbatim, not a generic
   message. */
.vpair-error-banner {
  padding: var(--space-sm) var(--space-md);
  font: var(--callout);
  color: var(--accent-decisive-strong);
  background: var(--accent-decisive-subtle);
  border: 1px solid var(--accent-decisive);
  border-radius: var(--radius-card);
}

.vpair-success-icon {
  font-size: var(--text-large-title);
  color: var(--accent-calm-strong);
}

.vpair-status-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-default);
}

.vpair-status-row:last-child {
  border-bottom: none;
}

.vpair-status-row__label {
  font: var(--callout);
  color: var(--content-secondary);
}

.vpair-status-row__value {
  font: var(--body);
  color: var(--content-primary);
  word-break: break-all;
}

/* ==========================================================================
 * WS-E — RESPONSIVE BREAKPOINTS (append-only)
 *
 * The same stylesheet now dresses desktop (Tauri), Android and the web client,
 * so "somewhat responsive" has to live here rather than in a web-only fork.
 *
 * APPEND-ONLY BY CONTRACT: everything below is inside new `@media (max-width:)`
 * blocks at the end of the file. Nothing above this comment is edited, which is
 * the mechanical guarantee that desktop pixels cannot move — a width-media rule
 * simply never matches at desktop widths.
 *
 * Only selectors that actually carry a fixed `width` / `min-width` / fixed grid
 * track above the 390px target are touched. Typography scale, colours, radii,
 * shadows and motion are deliberately untouched.
 *
 * ponytail: CSS-only. Several screens would collapse more gracefully with a
 * markup change (see WS-E summary); that is a component-level change and is
 * out of this workstream's file ownership.
 * ========================================================================== */

/* ---- Tablet / large phone ---------------------------------------------- */
@media (max-width: 768px) {
  /* The single biggest cause of page-level horizontal scroll: the shell
     refuses to be narrower than a small laptop. */
  .app-shell {
    min-width: 0;
  }

  /* Header is a flex row of controls; let it scroll inside itself rather
     than push the page wider. */
  .app-header {
    overflow-x: auto;
  }

  /* Fixed-width columns become fluid. */
  .app-content,
  .app-shell--with-rail .app-content,
  .card-scroll-region,
  .vapp-composer {
    max-width: 100%;
  }

  .vapp-sidebar {
    width: 180px;
    flex: 0 0 180px;
  }

  /* Fixed-width dialogs/dropdowns capped to the viewport. */
  .vapp-overlay-panel,
  .vapp-palette,
  .vapp-killmodal,
  .notification-dropdown,
  .staging-reauth-modal {
    max-width: calc(100vw - var(--space-lg));
  }

  .staging-reauth-modal {
    min-width: 0;
  }
}

/* ---- Phone (covers the 390px target) ------------------------------------ */
@media (max-width: 480px) {
  /* One step tighter: --space-lg (24px) -> --space-md (16px). */
  .vapp-chat__col,
  .vapp-page__col {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* Centred fixed-width dialogs go full-bleed. */
  .vapp-overlay-panel,
  .vapp-killmodal {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .vapp-palette {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }

  .notification-dropdown {
    max-width: 100vw;
  }

  /* Anything still declaring a fixed track or a min-width above the target
     is relaxed so the container — not the page body — absorbs the overflow. */
  .audit-entry__provenance {
    grid-template-columns: 1fr;
  }

  .vapp-kv-col {
    max-width: 100%;
  }

  /* Wide content scrolls inside its own box. */
  pre,
  table,
  .vapp-list-box {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Interactive targets stay >= 44x44 even after the padding step down.
     The literal is deliberate — see the WS-F note below on why
     `--btn-height-standard` cannot be used for a touch-target floor. */
  .vapp-nav-hamburger,
  .vapp-send-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ===========================================================================
   WS-F — MOBILE ERGONOMICS FOR THE AUTHENTICATED SHELL
   ---------------------------------------------------------------------------
   Append-only, same contract as the block above: every rule lives inside a
   max-width media query, so no desktop declaration is reachable and desktop
   pixels cannot move.

   Unlike the block above, every rule here was derived from MEASURING the real
   authenticated shell in a headless browser at 390px (logged in against a live
   gateway), not from reading declarations. What the measurement actually found:

     - Layout is already sound. Page scrollWidth == innerWidth (390/390) on the
       chat view, the sessions drawer, and all ten nav views. The pre-existing
       640px block already collapses `.vapp-sidebar` and reveals the hamburger.
       So there are no width fixes here — there was nothing to fix.
     - 16 interactive targets were under the WCAG 2.5.5 44x44 minimum: ten
       `.vapp-nav-btn` at 36x36, `.vapp-pin-btn` at 18x18, `.vapp-kbd-btn` at
       39x25, three `.vapp-sug` at 32px tall, `.vapp-composer__input` at 21px.
     - Exactly two elements rendered outside the viewport, both in Settings:
       `.vapp-kv__v` (right edge 400 > 390) and `.btn.gmail-connect-btn`
       (right edge 437 > 390 — 47px of the button unreachable).

   WHY 44px IS A LITERAL HERE AND NOT `var(--btn-height-standard)`:
   that token is declared `2.75rem` and commented "44px — WCAG 2.5.5 min touch
   target" (line 38), but the root font-size in this design system is **15px**,
   not 16px — so it computes to **41.25px** and has never actually been 44.
   Verified in the browser: getComputedStyle(:root).fontSize == "15px", and an
   element sized `height: var(--btn-height-standard)` measures 41.25px. Using
   the token for a WCAG floor silently yields a non-conforming 41px target.
   The token is fine for visual button height (its real job); it is wrong for
   this. Do not "tidy" these literals back into the token without first
   re-measuring in a browser.
   =========================================================================== */

@media (max-width: 768px) {
  /* WCAG 2.5.5 touch targets. `.vapp-nav` is `flex: 0 0 48px`, so a 44px
     button fits with 2px either side and the rail width is unchanged. */
  .vapp-nav-btn,
  .vapp-nav-hamburger {
    width: 44px;
    height: 44px;
  }

  .vapp-kbd-btn {
    min-width: 44px;
    min-height: 44px;
    padding-block: 4px;
    padding-inline: 12px;
  }

  /* The pin glyph stays 18px; the hit area grows around it and the negative
     margin absorbs the growth so `.vapp-sess-row` keeps its height.
     ponytail: margin trick beats restructuring the row — revisit only if the
     row ever needs the reclaimed space for something else. */
  .vapp-pin-btn {
    width: 44px;
    height: 44px;
    margin: -13px;
  }

  .vapp-sug,
  .vapp-composer__input {
    min-height: 44px;
  }

  /* Settings stacked instead of side-by-side. The 190px fixed `__nav` left
     only ~200px of content at 390px, which is what pushed `.vapp-kv__v` past
     the right edge — so this is the width fix, not a cosmetic preference. */
  .vapp-settings {
    flex-direction: column;
  }

  .vapp-settings__nav {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-default);
    padding: 8px;
  }

  .vapp-settings__tab {
    display: flex;
    align-items: center;
    min-height: 44px;
    white-space: nowrap;
  }

  /* Long opaque values (user ids, URLs) wrap instead of being clipped. */
  .vapp-kv__v {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* `white-space: nowrap` on a fixed-content button ran this 47px past the
     viewport. Let it wrap and it can never exceed its column again. */
  .gmail-connect-btn {
    max-width: 100%;
    white-space: normal;
  }
}