/* ========================================================================== 
   AI-SEHL SOVEREIGN DESIGN SYSTEM
   Token layer + responsive hardening
   --------------------------------------------------------------------------
   This file is intentionally loaded LAST. It normalizes the legacy v4 UI and
   the modular v7 surfaces without changing application behavior.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Primitive palette ------------------------------------------------- */
  --ai-c-ash-1000: #0A0C0E;
  --ai-c-ash-950: #0E1012;
  --ai-c-ash-900: #15181C;
  --ai-c-ash-850: #1A1E23;
  --ai-c-ash-800: #21262C;
  --ai-c-ash-750: #262B31;
  --ai-c-ash-700: #2B3138;
  --ai-c-ash-600: #555B63;
  --ai-c-ash-500: #7A828B;
  --ai-c-ash-400: #9BA2AA;

  --ai-c-gold-700: #8F672A;
  --ai-c-gold-500: #C89A47;
  --ai-c-gold-300: #E4C77C;
  --ai-c-gold-200: #F1DEAE;

  --ai-c-ivory-100: #F4F3EF;
  --ai-c-platinum-300: #AEB7C4;
  --ai-c-platinum-200: #CFD5DD;

  --ai-c-success: #8FB78A;
  --ai-c-danger: #D58A80;
  --ai-c-info: #9EB5CB;
  --ai-c-warning: #D6A557;
  --ai-c-blue: #3B82F6;
  --ai-c-cyan: #06B6D4;
  --ai-c-violet: #A78BFA;
  --ai-c-neutral-100: #E5E7EB;
  --ai-c-neutral-400: #9CA3AF;
  --ai-c-white: #FFFFFF;
  --ai-c-black: #000000;

  --ai-rgb-gold: 200, 154, 71;
  --ai-rgb-gold-light: 228, 199, 124;
  --ai-rgb-gold-deep: 143, 103, 42;
  --ai-rgb-success: 143, 183, 138;
  --ai-rgb-danger: 213, 138, 128;
  --ai-rgb-info: 158, 181, 203;
  --ai-rgb-warning: 214, 165, 87;
  --ai-rgb-white: 255, 255, 255;
  --ai-rgb-black: 0, 0, 0;
  --ai-rgb-ash-1000: 10, 12, 14;
  --ai-rgb-ash-950: 14, 16, 18;
  --ai-rgb-ash-900: 21, 24, 28;
  --ai-rgb-ash-850: 26, 30, 35;
  --ai-rgb-ash-800: 33, 38, 44;
  --ai-rgb-ash-750: 38, 43, 49;
  --ai-rgb-blue: 59, 130, 246;
  --ai-rgb-cyan: 6, 182, 212;
  --ai-rgb-violet: 167, 139, 250;
  --ai-rgb-neutral-100: 229, 231, 235;
  --ai-rgb-navy-800: 31, 41, 55;
  --ai-rgb-navy-900: 17, 24, 39;
  --ai-rgb-runtime-deep: 12, 14, 20;
  --ai-rgb-navy-950: 9, 13, 25;
  --ai-rgb-field-deep: 5, 10, 20;
  --ai-rgb-field-deep-2: 5, 8, 16;
  --ai-rgb-field-navy: 11, 15, 26;
  --ai-rgb-field-navy-2: 11, 17, 32;
  --ai-rgb-field-blue: 120, 180, 255;
  --ai-rgb-field-cyan: 90, 210, 230;
  --ai-rgb-field-info: 96, 160, 232;
  --ai-rgb-field-info-deep: 64, 120, 192;
  --ai-rgb-field-gold-white: 255, 244, 210;
  --ai-rgb-field-gold-warm: 255, 232, 160;
  --ai-rgb-field-danger: 255, 85, 85;
  --ai-rgb-field-danger-soft: 255, 160, 160;
  --ai-rgb-field-danger-text: 255, 205, 205;
  --ai-rgb-platinum: 174, 183, 196;
  --ai-rgb-scroll: 140, 148, 155;

  /* --- Semantic color tokens -------------------------------------------- */
  --ai-bg-canvas: var(--ai-c-ash-950);
  --ai-bg-deep: var(--ai-c-ash-1000);
  --ai-bg-surface: var(--ai-c-ash-900);
  --ai-bg-elevated: var(--ai-c-ash-850);
  --ai-bg-interactive: var(--ai-c-ash-800);
  --ai-bg-hover: var(--ai-c-ash-700);
  --ai-bg-code: #060A12;

  --ai-text-primary: #F1F0EC;
  --ai-text-secondary: #C2C6CB;
  --ai-text-tertiary: #8E949B;
  --ai-text-muted: rgba(241, 240, 236, .44);
  --ai-text-on-accent: #241803;

  --ai-accent-primary: var(--ai-c-gold-500);
  --ai-accent-strong: var(--ai-c-gold-300);
  --ai-accent-soft: var(--ai-c-gold-200);
  --ai-accent-deep: var(--ai-c-gold-700);

  --ai-border-subtle: rgba(244, 243, 239, .055);
  --ai-border-soft: rgba(244, 243, 239, .10);
  --ai-border-medium: rgba(244, 243, 239, .14);
  --ai-divider: rgba(244, 243, 239, .07);
  --ai-border-accent: rgba(var(--ai-rgb-gold-light), .34);
  --ai-border-accent-strong: rgba(var(--ai-rgb-gold-light), .52);

  --ai-glass-soft: rgba(38, 43, 49, .42);
  --ai-glass: rgba(26, 30, 35, .56);
  --ai-glass-strong: rgba(26, 30, 35, .78);
  --ai-glass-solid: rgba(14, 16, 18, .94);
  --ai-glass-highlight: inset 0 1px 0 rgba(var(--ai-rgb-white), .065);

  --ai-state-success: var(--ai-c-success);
  --ai-state-danger: var(--ai-c-danger);
  --ai-state-info: var(--ai-c-info);
  --ai-state-warning: var(--ai-c-warning);
  --ai-state-success-soft: rgba(var(--ai-rgb-success), .12);
  --ai-state-danger-soft: rgba(var(--ai-rgb-danger), .12);
  --ai-state-info-soft: rgba(var(--ai-rgb-info), .12);
  --ai-state-warning-soft: rgba(var(--ai-rgb-warning), .12);


  /* --- Sovereign decision palette --------------------------------------- */
  --ai-decision-corroborated-bg: #064E3B;
  --ai-decision-corroborated-fg: #6EE7B7;
  --ai-decision-parametric-bg: #1E3A8A;
  --ai-decision-parametric-fg: #93C5FD;
  --ai-decision-contextual-bg: #312E81;
  --ai-decision-contextual-fg: #A5B4FC;
  --ai-decision-conflict-bg: #7C2D12;
  --ai-decision-conflict-fg: #FDBA74;
  --ai-decision-abstain-bg: #374151;
  --ai-decision-abstain-fg: #D1D5DB;
  --ai-tier-1: #16A34A;
  --ai-tier-1-deep: #14532D;
  --ai-tier-1-soft: #F0FDF4;
  --ai-tier-2: #2563EB;
  --ai-tier-2-deep: #1E3A8A;
  --ai-tier-2-soft: #EFF6FF;
  --ai-tier-3: #7C3AED;
  --ai-tier-3-deep: #4C1D95;
  --ai-tier-3-soft: #F5F3FF;
  --ai-tier-4: #6B7280;
  --ai-tier-4-deep: #374151;
  --ai-tier-5: #DC2626;
  --ai-tier-5-deep: #7F1D1D;
  --ai-tier-5-soft: #FEF2F2;
  --ai-neutral-panel: #1F2937;
  --ai-neutral-panel-hover: #374151;
  --ai-neutral-light: #F3F4F6;
  --ai-neutral-lighter: #F9FAFB;
  --ai-conflict-light: #FFF7ED;

  /* --- Gradients --------------------------------------------------------- */
  --ai-gradient-gold: linear-gradient(135deg,
    var(--ai-c-gold-200) 0%,
    var(--ai-c-gold-300) 38%,
    var(--ai-c-gold-500) 72%,
    var(--ai-c-gold-700) 100%);
  --ai-gradient-panel: linear-gradient(145deg,
    rgba(var(--ai-rgb-white), .055),
    rgba(var(--ai-rgb-white), .018));
  --ai-gradient-panel-accent: linear-gradient(145deg,
    rgba(var(--ai-rgb-gold), .11),
    rgba(var(--ai-rgb-gold), .018));
  --ai-gradient-top-glow: radial-gradient(ellipse at 50% 0%,
    rgba(var(--ai-rgb-gold), .13), transparent 68%);

  /* --- Typography -------------------------------------------------------- */
  --ai-font-display: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --ai-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ai-font-mono: 'JetBrains Mono', 'SF Mono', Monaco, Menlo, Consolas, monospace;
  --ai-font-size-xs: .6875rem;
  --ai-font-size-sm: .8125rem;
  --ai-font-size-md: .9375rem;
  --ai-font-size-lg: 1.0625rem;
  --ai-font-size-xl: 1.375rem;
  --ai-line-body: 1.68;
  --ai-tracking-label: .12em;

  /* --- Spacing ----------------------------------------------------------- */
  --ai-space-1: 4px;
  --ai-space-2: 8px;
  --ai-space-3: 12px;
  --ai-space-4: 16px;
  --ai-space-5: 20px;
  --ai-space-6: 24px;
  --ai-space-7: 32px;
  --ai-space-8: 40px;

  /* --- Shape ------------------------------------------------------------- */
  --ai-radius-xs: 7px;
  --ai-radius-sm: 9px;
  --ai-radius-md: 14px;
  --ai-radius-lg: 20px;
  --ai-radius-xl: 26px;
  --ai-radius-pill: 999px;

  /* --- Elevation / blur -------------------------------------------------- */
  --ai-blur-glass: blur(24px) saturate(170%);
  --ai-shadow-1: 0 1px 2px rgba(var(--ai-rgb-black), .25);
  --ai-shadow-2: 0 8px 22px rgba(var(--ai-rgb-black), .30), var(--ai-glass-highlight);
  --ai-shadow-3: 0 18px 46px rgba(var(--ai-rgb-black), .42), var(--ai-glass-highlight);
  --ai-shadow-4: 0 30px 72px rgba(var(--ai-rgb-black), .56), var(--ai-glass-highlight);
  --ai-shadow-focus: 0 0 0 3px rgba(var(--ai-rgb-gold), .13);
  --ai-shadow-accent: 0 0 28px rgba(var(--ai-rgb-gold), .23);

  /* --- Motion ------------------------------------------------------------ */
  --ai-duration-fast: 140ms;
  --ai-duration-base: 220ms;
  --ai-duration-slow: 360ms;
  --ai-ease-out: cubic-bezier(.22, .61, .36, 1);
  --ai-ease-spring: cubic-bezier(.34, 1.42, .5, 1);

  /* --- Layout ------------------------------------------------------------ */
  --ai-sidebar-width: clamp(252px, 19vw, 288px);
  --ai-sidebar-rail-width: 72px;
  --ai-preview-width: clamp(380px, 39vw, 620px);
  --ai-content-width: 780px;
  --ai-panel-width: 920px;
  --ai-header-height: 58px;
  --ai-touch-target: 42px;
  --ai-page-gutter: clamp(14px, 2.1vw, 28px);
  --ai-safe-top: env(safe-area-inset-top, 0px);
  --ai-safe-right: env(safe-area-inset-right, 0px);
  --ai-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ai-safe-left: env(safe-area-inset-left, 0px);

  /* --- Z-index ----------------------------------------------------------- */
  --ai-z-base: 1;
  --ai-z-header: 10;
  --ai-z-drawer-scrim: 30;
  --ai-z-drawer: 40;
  --ai-z-preview: 50;
  --ai-z-modal: 80;
  --ai-z-menu: 90;
  --ai-z-toast: 100;
  --ai-z-auth: 120;

  /* --- Compatibility aliases: legacy index.html ------------------------- */
  --ash-1000: var(--ai-c-ash-1000);
  --ash-950: var(--ai-c-ash-950);
  --ash-900: var(--ai-c-ash-900);
  --ash-850: var(--ai-c-ash-850);
  --ash-800: var(--ai-c-ash-800);
  --ash-700: var(--ai-c-ash-700);
  --ash-600: var(--ai-c-ash-600);
  --ash-500: var(--ai-c-ash-500);
  --ash-400: var(--ai-c-ash-400);
  --gold-deep: var(--ai-accent-deep);
  --gold: var(--ai-accent-primary);
  --gold-light: var(--ai-accent-strong);
  --gold-pale: var(--ai-accent-soft);
  --ivory: var(--ai-c-ivory-100);
  --platinum: var(--ai-c-platinum-300);
  --platinum-light: var(--ai-c-platinum-200);
  --success: var(--ai-state-success);
  --danger: var(--ai-state-danger);
  --info: var(--ai-state-info);
  --warning: var(--ai-state-warning);
  --bg: var(--ai-bg-canvas);
  --text-1: var(--ai-text-primary);
  --text-2: var(--ai-text-secondary);
  --text-3: var(--ai-text-tertiary);
  --border-soft: var(--ai-border-soft);
  --border-subtle: var(--ai-border-subtle);
  --divider: var(--ai-divider);
  --glass: var(--ai-glass);
  --glass-strong: var(--ai-glass-strong);
  --glass-soft: var(--ai-glass-soft);
  --glass-border: var(--ai-border-soft);
  --glass-hi: var(--ai-glass-highlight);
  --blur: var(--ai-blur-glass);
  --font-display: var(--ai-font-display);
  --font-ui: var(--ai-font-ui);
  --font-mono: var(--ai-font-mono);
  --r-sm: var(--ai-radius-sm);
  --r-md: var(--ai-radius-md);
  --r-lg: var(--ai-radius-lg);
  --r-xl: var(--ai-radius-xl);
  --r-pill: var(--ai-radius-pill);
  --gold-grad: var(--ai-gradient-gold);
  --shadow-float: var(--ai-shadow-4);
  --maxw: var(--ai-content-width);
  --dur-1: var(--ai-duration-fast);
  --dur-2: var(--ai-duration-base);
  --dur-3: var(--ai-duration-slow);
  --ease-out: var(--ai-ease-out);
  --ease-spring: var(--ai-ease-spring);
  --e1: var(--ai-shadow-1);
  --e2: var(--ai-shadow-2);
  --e3: var(--ai-shadow-3);
  --e4: var(--ai-shadow-4);

  /* --- Compatibility aliases: modular UI -------------------------------- */
  --bg-deep: var(--ai-bg-deep);
  --bg-surf: var(--ai-bg-surface);
  --bg-elev: var(--ai-bg-elevated);
  --bg-hov: var(--ai-bg-hover);
  --gold-b: var(--ai-accent-strong);
  --gold-dim: rgba(var(--ai-rgb-gold), .12);
  --gold-glo: rgba(var(--ai-rgb-gold), .20);
  --gold-bdr: rgba(var(--ai-rgb-gold), .30);
  --gold-bdr-strong: rgba(var(--ai-rgb-gold), .50);
  --gold-txt: rgba(var(--ai-rgb-gold), .88);
  --accent: var(--ai-state-info);
  --accent-dim: var(--ai-state-info-soft);
  --accent-bdr: rgba(var(--ai-rgb-info), .30);
  --cyan: #80B4EC;
  --cyan-dim: rgba(128, 180, 236, .12);
  --cyan-bdr: rgba(128, 180, 236, .30);
  --violet: #B2A5C9;
  --violet-dim: rgba(178, 165, 201, .12);
  --violet-bdr: rgba(178, 165, 201, .30);
  --ok: var(--ai-state-success);
  --ok-dim: var(--ai-state-success-soft);
  --ok-bdr: rgba(var(--ai-rgb-success), .30);
  --err: var(--ai-state-danger);
  --err-dim: var(--ai-state-danger-soft);
  --err-bdr: rgba(var(--ai-rgb-danger), .30);
  --warn: var(--ai-state-warning);
  --warn-dim: var(--ai-state-warning-soft);
  --warn-bdr: rgba(var(--ai-rgb-warning), .30);
  --t1: var(--ai-text-primary);
  --t2: var(--ai-text-secondary);
  --t3: var(--ai-text-tertiary);
  --t4: var(--ai-text-muted);
  --b0: rgba(var(--ai-rgb-white), .04);
  --b1: rgba(var(--ai-rgb-white), .08);
  --b2: rgba(var(--ai-rgb-white), .13);
  --glass-l: var(--ai-glass);
  --glass-m: var(--ai-glass-strong);
  --glass-d: rgba(var(--ai-rgb-white), .04);
  --glass-blur: blur(20px);
  --glass-sat: saturate(150%);
  --sh-card: var(--ai-shadow-3);
  --sh-gold: var(--ai-shadow-accent);
  --sh-gold-soft: 0 0 16px rgba(var(--ai-rgb-gold), .18);
  --sh-panel: var(--ai-shadow-3);
  --sh-deep: var(--ai-shadow-4);
  --tr: var(--ai-duration-base) var(--ai-ease-spring);
  --tr-fast: var(--ai-duration-fast) ease;
  --hdr-h: var(--ai-header-height);
  --f-serif: var(--ai-font-display);
  --f-ui: var(--ai-font-ui);
  --f-mono: var(--ai-font-mono);
}

html[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;
  --ai-bg-canvas: #E8E4DB;
  --ai-bg-deep: #E2DDD4;
  --ai-bg-surface: #EDE9E1;
  --ai-bg-elevated: #F0ECE4;
  --ai-bg-interactive: #F4F1EA;
  --ai-bg-hover: #E4DED3;
  --ai-text-primary: #1B1E22;
  --ai-text-secondary: #4C525A;
  --ai-text-tertiary: #707780;
  --ai-text-muted: rgba(27, 30, 34, .48);
  --ai-border-subtle: rgba(20, 22, 26, .07);
  --ai-border-soft: rgba(20, 22, 26, .11);
  --ai-border-medium: rgba(20, 22, 26, .16);
  --ai-divider: rgba(20, 22, 26, .08);
  --ai-glass-soft: rgba(255, 255, 255, .54);
  --ai-glass: rgba(251, 248, 241, .70);
  --ai-glass-strong: rgba(251, 248, 241, .88);
  --ai-glass-solid: rgba(244, 241, 234, .96);
  --ai-glass-highlight: inset 0 1px 0 rgba(var(--ai-rgb-white), .72);
  --ai-shadow-1: 0 1px 2px rgba(20, 22, 26, .10);
  --ai-shadow-2: 0 8px 22px rgba(20, 22, 26, .12), var(--ai-glass-highlight);
  --ai-shadow-3: 0 18px 46px rgba(20, 22, 26, .16), var(--ai-glass-highlight);
  --ai-shadow-4: 0 30px 72px rgba(20, 22, 26, .20), var(--ai-glass-highlight);

  --ai-decision-corroborated-bg: #D1FAE5;
  --ai-decision-corroborated-fg: #065F46;
  --ai-decision-parametric-bg: #DBEAFE;
  --ai-decision-parametric-fg: #1E40AF;
  --ai-decision-contextual-bg: #E0E7FF;
  --ai-decision-contextual-fg: #3730A3;
  --ai-decision-conflict-bg: #FED7AA;
  --ai-decision-conflict-fg: #9A3412;
  --ai-decision-abstain-bg: var(--ai-c-neutral-100);
  --ai-decision-abstain-fg: #374151;
}

/* ==========================================================================
   Global resilience
   ========================================================================== */
html {
  min-width: 0;
  background: var(--ai-bg-canvas);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-width: 0;
  background: var(--ai-bg-canvas);
}
img, svg, video, canvas, iframe { max-width: 100%; }
button, input, textarea, select { min-width: 0; }
:where(button, [role="button"], input, textarea, select, a) { -webkit-tap-highlight-color: transparent; }
:where(button, input, textarea, select, a, [tabindex]):focus-visible {
  outline: 2px solid var(--ai-accent-strong);
  outline-offset: 2px;
}

/* Tokenize the high-impact surfaces that previously carried literals. */
::selection { background: rgba(var(--ai-rgb-gold), .28); }
.ambient {
  background:
    radial-gradient(80% 55% at 50% -8%, rgba(var(--ai-rgb-gold), .10), transparent 60%),
    radial-gradient(60% 50% at 92% 8%, rgba(var(--ai-rgb-gold-deep), .08), transparent 55%),
    radial-gradient(70% 60% at 0% 100%, rgba(174, 183, 196, .05), transparent 55%),
    var(--ai-bg-canvas) !important;
}
.card,
.auth-card,
.panel,
.cmdk,
.menu,
.toast,
.composer {
  border-color: var(--ai-border-soft);
}
.card,
.panel,
.cmdk,
.menu,
.toast {
  background: var(--ai-glass-strong);
  box-shadow: var(--ai-shadow-4);
}
.composer {
  background: var(--ai-glass-strong);
  box-shadow: var(--ai-shadow-2);
}
.composer:focus-within {
  border-color: var(--ai-border-accent-strong);
  box-shadow: var(--ai-shadow-2), var(--ai-shadow-focus) !important;
}
.btn-primary,
.primary-btn {
  background: var(--ai-gradient-gold);
  color: var(--ai-text-on-accent);
}

/* ==========================================================================
   Main legacy v4 shell: fluid desktop behavior
   ========================================================================== */
#app {
  grid-template-columns: var(--ai-sidebar-width) minmax(0, 1fr) 0 !important;
}
#app.pv-open {
  grid-template-columns: var(--ai-sidebar-width) minmax(320px, 1fr) var(--pv-w, var(--ai-preview-width)) !important;
}
#app.sb-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) 0 !important;
}
#app.sb-collapsed.pv-open {
  grid-template-columns: 0 minmax(320px, 1fr) var(--pv-w, var(--ai-preview-width)) !important;
}
.sidebar,
.main,
.preview,
.scroll,
.thread,
.dock,
.composer,
.panel,
.panel-wrap,
.panel-body,
.pv-body {
  min-width: 0;
  min-height: 0;
}
.topbar {
  min-height: var(--ai-header-height);
  padding-inline: var(--ai-page-gutter);
  padding-top: max(0px, var(--ai-safe-top));
}
.thread {
  width: min(100%, var(--ai-content-width));
  padding-inline: var(--ai-page-gutter);
}
.dock {
  padding-inline: var(--ai-page-gutter);
  padding-bottom: max(18px, calc(12px + var(--ai-safe-bottom)));
}
.composer { width: min(100%, var(--ai-content-width)); }
.panel { width: min(var(--ai-panel-width), calc(100vw - 2 * var(--ai-space-6))); }
.panel-body { overflow-wrap: anywhere; }
.body { overflow-wrap: anywhere; }
.body pre,
.body code { max-width: 100%; }
.body pre { overflow-x: auto; }
.body table { display: table; max-width: 100%; }

/* ==========================================================================
   Modular shell: same design scale
   ========================================================================== */
.shell {
  grid-template-columns: var(--ai-sidebar-width) minmax(0, 1fr);
  gap: var(--ai-space-3);
  padding: var(--ai-space-3);
}
body.canvas-active .shell,
.shell.canvas-active,
.shell.pv-on,
body.canvas-active #shell,
#shell.canvas-active,
#shell.pv-on {
  grid-template-columns: var(--ai-sidebar-width) minmax(320px, 1fr) var(--ai-preview-width);
}
body[data-sidebar-pinned="false"] .shell,
body[data-sidebar-pinned="false"] #shell {
  grid-template-columns: var(--ai-sidebar-rail-width) minmax(0, 1fr);
}
body[data-sidebar-pinned="false"].canvas-active .shell,
body[data-sidebar-pinned="false"] .shell.canvas-active,
body[data-sidebar-pinned="false"] #shell.canvas-active,
body[data-sidebar-pinned="false"] #shell.pv-on {
  grid-template-columns: var(--ai-sidebar-rail-width) minmax(320px, 1fr) var(--ai-preview-width);
}
.view-scroll { padding: clamp(14px, 2vw, 24px); }
.control-form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ==========================================================================
   Responsive tier 1 — compact desktop / tablet landscape
   ========================================================================== */
@media (max-width: 1180px) {
  .pv-resize { display: none !important; }
  :root {
    --ai-sidebar-width: 260px;
    --ai-preview-width: min(46vw, 520px);
    --ai-content-width: 740px;
    --ai-page-gutter: 18px;
  }

  #app.pv-open,
  #app.sb-collapsed.pv-open {
    grid-template-columns: var(--ai-sidebar-width) minmax(0, 1fr) 0 !important;
  }
  #app.sb-collapsed.pv-open { grid-template-columns: 0 minmax(0, 1fr) 0 !important; }
  #app.pv-open .preview {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(520px, 54vw) !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    z-index: var(--ai-z-preview) !important;
    box-shadow: var(--ai-shadow-4) !important;
    border-left: 1px solid var(--ai-border-soft) !important;
    background: var(--ai-glass-solid) !important;
  }

  body.canvas-active .shell,
  .shell.canvas-active,
  .shell.pv-on,
  body.canvas-active #shell,
  #shell.canvas-active,
  #shell.pv-on,
  body[data-sidebar-pinned="false"].canvas-active .shell,
  body[data-sidebar-pinned="false"] .shell.canvas-active,
  body[data-sidebar-pinned="false"] #shell.canvas-active,
  body[data-sidebar-pinned="false"] #shell.pv-on {
    grid-template-columns: var(--ai-sidebar-width) minmax(0, 1fr);
  }
  #right-canvas {
    position: fixed;
    inset: var(--ai-space-3) var(--ai-space-3) var(--ai-space-3) auto;
    width: min(520px, 54vw);
    z-index: var(--ai-z-preview);
    box-shadow: var(--ai-shadow-4);
  }
}

/* ==========================================================================
   Responsive tier 2 — tablet / mobile drawer
   ========================================================================== */
@media (max-width: 900px) {
  :root {
    --ai-page-gutter: 16px;
    --ai-content-width: 100%;
    --ai-header-height: 56px;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  #app,
  #app.pv-open,
  #app.sb-collapsed,
  #app.sb-collapsed.pv-open {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #app.hide,
  #app.hide.pv-open,
  #app.hide.sb-collapsed,
  #app.hide.sb-collapsed.pv-open {
    display: none !important;
  }

  .main {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(86vw, 320px) !important;
    max-width: 320px !important;
    height: 100dvh !important;
    padding-left: var(--ai-safe-left);
    z-index: var(--ai-z-drawer) !important;
    transform: translate3d(-105%, 0, 0) !important;
    pointer-events: none !important;
    background: var(--ai-glass-solid) !important;
    box-shadow: var(--ai-shadow-4);
  }
  .sidebar.open,
  body.sb-open .sidebar,
  #app.sb-open .sidebar {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
  }
  .backdrop { z-index: var(--ai-z-drawer-scrim) !important; }

  .topbar {
    padding:
      calc(8px + var(--ai-safe-top))
      calc(var(--ai-page-gutter) + var(--ai-safe-right))
      8px
      calc(var(--ai-page-gutter) + var(--ai-safe-left)) !important;
    gap: 8px !important;
    min-height: calc(var(--ai-header-height) + var(--ai-safe-top)) !important;
    overflow: visible !important;
  }
  .hamb { display: grid !important; flex: 0 0 var(--ai-touch-target); width: var(--ai-touch-target); height: var(--ai-touch-target); }
  .tb-title { min-width: 0; flex: 1; overflow: hidden; }
  .tb-title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-actions { flex: 0 0 auto; gap: 2px !important; }
  .tb-actions .iconbtn,
  .tb-actions .lang-btn {
    width: var(--ai-touch-target);
    height: var(--ai-touch-target);
    min-width: var(--ai-touch-target);
    padding: 0 !important;
    display: grid;
    place-items: center;
  }

  .scroll { overscroll-behavior: contain; }
  .thread { padding: 14px var(--ai-page-gutter) 12px !important; gap: 20px !important; }
  .landing {
    min-height: 100%;
    height: auto;
    padding: clamp(28px, 7vh, 64px) var(--ai-page-gutter) clamp(100px, 15vh, 150px);
  }
  .landing .chips { max-width: 100%; }
  .dock {
    padding: 8px calc(var(--ai-page-gutter) + var(--ai-safe-right))
      calc(10px + var(--ai-safe-bottom))
      calc(var(--ai-page-gutter) + var(--ai-safe-left)) !important;
  }
  .composer {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--ai-radius-lg) !important;
  }
  .composer .ta-wrap { padding: 12px 14px 4px !important; }
  .composer textarea { font-size: 16px !important; max-height: min(32dvh, 220px); }
  .composer .ctrl { gap: 6px; padding: 6px 8px 9px !important; }

  /* Preview becomes a real full-screen workspace, never a squeezed column. */
  .preview { display: none !important; }
  #app.pv-open .preview {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    z-index: var(--ai-z-preview) !important;
    border: 0 !important;
    background: var(--ai-bg-surface) !important;
    box-shadow: none !important;
  }
  #app.pv-open .main { visibility: hidden !important; pointer-events: none !important; }
  #app.pv-open .sidebar { visibility: hidden !important; pointer-events: none !important; }
  .pv-head {
    width: 100% !important;
    min-height: calc(62px + var(--ai-safe-top)) !important;
    padding:
      calc(10px + var(--ai-safe-top))
      calc(10px + var(--ai-safe-right))
      10px
      calc(10px + var(--ai-safe-left)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "meta tools" "tabs tabs" !important;
    gap: 8px !important;
  }
  .pv-meta { grid-area: meta; min-width: 0; overflow: hidden; }
  .pv-tools { grid-area: tools; display: flex; justify-content: flex-end; gap: 4px; }
  .pv-tabs {
    grid-area: tabs;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .pv-tabs::-webkit-scrollbar { display: none; }
  .pv-title,
  .pv-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pv-tab { flex: 0 0 auto !important; min-width: 76px; }
  .pv-body { flex: 1 1 auto; overflow: auto !important; -webkit-overflow-scrolling: touch; }
  .pv-body > *, .pv-code, .pv-preview, .pv-content { min-width: 0 !important; max-width: 100% !important; }

  /* Panels become usable sheets instead of cropped desktop dialogs. */
  .panel-overlay {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 10px !important;
    padding-top: calc(10px + var(--ai-safe-top)) !important;
    padding-bottom: calc(10px + var(--ai-safe-bottom)) !important;
  }
  .panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: var(--ai-radius-lg) !important;
  }
  .panel-top { padding: 12px 14px !important; min-height: 56px; }
  .panel-wrap { flex-direction: column !important; }
  .panel-tabs {
    width: 100% !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px !important;
    gap: 4px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ai-border-subtle) !important;
    scrollbar-width: none;
  }
  .panel-tabs::-webkit-scrollbar { display: none; }
  .ptab { flex: 0 0 auto; white-space: nowrap; }
  .panel-body { padding: 16px !important; }

  .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
  .body table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .body th, .body td { white-space: nowrap; }

  /* Auth, both embedded and standalone. */
  .auth,
  .auth-body {
    align-items: flex-start !important;
    padding:
      calc(18px + var(--ai-safe-top))
      calc(16px + var(--ai-safe-right))
      calc(18px + var(--ai-safe-bottom))
      calc(16px + var(--ai-safe-left)) !important;
  }
  .card,
  .auth-card {
    width: min(100%, 460px);
    padding: 34px 26px 24px;
  }
  .auth-shell { width: min(100%, 460px); margin: auto; }

  /* Modular shell: single-column main + drawer/canvas overlays. */
  .shell,
  body[data-sidebar-pinned="false"] .shell,
  body[data-sidebar-pinned="false"] #shell,
  body.canvas-active .shell,
  .shell.canvas-active,
  .shell.pv-on,
  body.canvas-active #shell,
  #shell.canvas-active,
  #shell.pv-on {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  #right-canvas {
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }
  .view-scroll { padding: 14px; }
  .control-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Responsive tier 3 — phones
   ========================================================================== */
@media (max-width: 600px) {
  :root {
    --ai-page-gutter: 12px;
    --ai-touch-target: 40px;
  }

  .topbar { gap: 6px !important; }
  .tb-title { font-size: .9rem; }
  .tb-actions { gap: 0 !important; }
  .tb-actions .iconbtn,
  .tb-actions .lang-btn { width: 38px; min-width: 38px; height: 38px; }
  .lang-btn span:not(.ic) { display: none; }

  .landing { padding-inline: 16px; }
  .landing .lmark { width: 64px; height: 64px; }
  .landing h1 { font-size: clamp(1.35rem, 7vw, 1.7rem) !important; }
  .landing p { font-size: .9rem; }
  .landing .chips { gap: 7px; margin-top: 18px; }
  .landing .chip { width: 100%; padding: 10px 12px; text-align: left; }

  .thread { gap: 18px !important; }
  .body { font-size: .95rem; line-height: 1.7; }
  .body h1 { font-size: 1.25rem; }
  .body h2 { font-size: 1.12rem; }
  .body pre { margin-inline: -2px; }

  .composer { border-radius: 18px !important; }
  .composer .ctrl { flex-wrap: wrap; }
  .cc-actions { margin-left: auto; }

  .panel-overlay { padding-inline: 0 !important; padding-bottom: 0 !important; }
  .panel { border-radius: var(--ai-radius-lg) var(--ai-radius-lg) 0 0 !important; }
  .panel-top h2 { font-size: 1rem; }
  .panel-body { padding: 14px 12px !important; }
  .kpis { grid-template-columns: 1fr !important; }

  .card,
  .auth-card { padding: 30px 20px 22px; border-radius: 22px; }
  .card .mark { width: 72px; height: 72px; }
  .card .mark img { width: 72px; height: 72px; }
  .auth-logo { width: 78px; height: 78px; margin-bottom: 14px; }
  .auth-card h1 { font-size: 25px; letter-spacing: 5px; }
  .password-row { grid-template-columns: minmax(0, 1fr) auto; }

  .pv-head { gap: 6px !important; }
  .pv-tools .iconbtn,
  .pv-tools button { width: 36px !important; min-width: 36px !important; height: 36px !important; }
  .pv-tab { min-width: 70px !important; height: 32px !important; padding-inline: 9px !important; }

  .view-header-card { padding: 16px; }
  .view-header-card h2 { font-size: 19px; letter-spacing: 2px; }
  .subpanel-hero { padding: 16px 14px !important; }
  .nav-subpanel-card { min-width: 0; }
}

/* Extra-small safety: do not remove actions; compact them. */
@media (max-width: 380px) {
  :root { --ai-page-gutter: 9px; }
  .tb-actions .iconbtn,
  .tb-actions .lang-btn,
  .hamb { width: 34px !important; min-width: 34px !important; height: 34px !important; }
  .topbar .ic { width: 18px; height: 18px; }
  .card, .auth-card { padding-inline: 16px; }
  .composer .ta-wrap { padding-inline: 12px !important; }
  .composer .ctrl { padding-inline: 6px !important; }
}

/* Landscape phones / short screens. */
@media (max-height: 560px) and (max-width: 900px) and (orientation: landscape) {
  .landing { justify-content: flex-start; padding-top: 22px; padding-bottom: 90px; }
  .landing .lmark { width: 52px; height: 52px; }
  .landing .chips { margin-top: 12px; }
  .card, .auth-card { padding-top: 24px; padding-bottom: 20px; }
  .auth-logo, .card .mark, .card .mark img { width: 58px; height: 58px; }
  .panel-overlay { padding: 4px !important; }
}

/* Accessibility / resource preference. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ai-duration-fast: 0ms;
    --ai-duration-base: 0ms;
    --ai-duration-slow: 0ms;
    --glass-blur: blur(0px);
    --glass-sat: saturate(100%);
  }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --ai-glass-soft: var(--ai-bg-interactive);
    --ai-glass: var(--ai-bg-elevated);
    --ai-glass-strong: var(--ai-bg-surface);
    --ai-glass-solid: var(--ai-bg-surface);
    --ai-blur-glass: none;
  }
  .sidebar, .preview, .composer, .card, .auth-card, .panel, .menu, .cmdk, .toast {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}