/* Slice 18 / 23.5.UI-2 – AI shell design tokens (scoped roots only; no legacy overrides) */

.ai-shell,
[data-ai-shell-root],
#zr-shell-root,
.ai-layout-root,
.ai-shell-root,
.ai-lcl-root,
html.ai-auth-page-root {
  /* Brand */
  --ai-shell-color-primary: #3f6ad8;
  --ai-shell-color-primary-soft: rgba(63, 106, 216, 0.12);
  --ai-shell-color-primary-softer: rgba(63, 106, 216, 0.08);

  /* Surfaces */
  --ai-shell-color-surface: #ffffff;
  --ai-shell-color-surface-muted: #f4f6f8;
  --ai-shell-color-border: #ced4da;

  /* Text */
  --ai-shell-color-text: #212529;
  --ai-shell-color-text-muted: #6c757d;
  --ai-shell-color-text-inverse: #ffffff;

  /* Status */
  --ai-shell-color-warning-surface: #fff8e1;
  --ai-shell-color-warning-border: #ffe082;
  --ai-shell-color-danger-surface: #fdecea;
  --ai-shell-color-danger-text: #b42318;

  /* Spacing */
  --ai-shell-space-xs: 0.25rem;
  --ai-shell-space-sm: 0.5rem;
  --ai-shell-space-md: 1rem;
  --ai-shell-space-lg: 1.5rem;

  /* Radius */
  --ai-shell-radius-sm: 0.375rem;
  --ai-shell-radius-md: 0.5rem;

  /* Typography */
  --ai-shell-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ai-shell-font-size-sm: 0.875rem;
  --ai-shell-font-size-md: 1rem;
  --ai-shell-font-size-lg: 1.25rem;

  /* DevExtreme host hints (do not override global .dx-* ) */
  --ai-shell-dx-selection-bg: var(--ai-shell-color-primary-soft);
  --ai-shell-dx-focus-bg: var(--ai-shell-color-primary-softer);
  --ai-shell-dx-selection-text: var(--ai-shell-color-text);
  --ai-shell-dx-selection-accent: var(--ai-shell-color-primary);
  --lyn-shell-treeview-chevron-size: 1.25rem;
  --lyn-shell-treeview-row-gap: 0.5rem;
  /* UI-4-impl-B.2 — muted TreeView expand/collapse chevron (not selection blue). */
  --lyn-shell-sidebar-chevron-color: #9aa3b2;
  --lyn-shell-muted-icon-color: var(--lyn-shell-sidebar-chevron-color);

  /* Layout – final direction (--lyn-shell-*) with transitional --ai-shell-* aliases */
  /* Expanded 24rem (384px) is the single authoritative expanded width (normal + collapsed-hover). */
  /* Collapsed rail 80px. Hover slide-out must match expanded — not a narrower Architect leftover. */
  /* Narrow/compact tokens apply under medium breakpoints (see production-layout media queries). */
  /* T23.5.UI-RTL-1/2/5B.1 — chrome-dir tokens; Mode B geometry is CSS-attribute scoped. */
  --lyn-shell-chrome-dir-ltr: ltr;
  --lyn-shell-chrome-dir-rtl: rtl;
  --lyn-shell-sidebar-offset-left: var(--lyn-shell-sidebar-width);
  --lyn-shell-sidebar-offset-right: 0px;
  --lyn-shell-sidebar-width: 24rem;
  --lyn-shell-sidebar-width-narrow: 20rem;
  --lyn-shell-sidebar-width-compact: 18rem;
  --lyn-shell-sidebar-width-collapsed: 80px;
  /* T23.5.UI-RTL-5B.1 — hover uses the same expanded width (parity LTR/RTL). */
  --lyn-shell-sidebar-width-hover: var(--lyn-shell-sidebar-width);
  --zr-shell-sidebar-expanded-width: var(--lyn-shell-sidebar-width);
  /* Deep TreeView indent: early levels normal, deeper compressed, total capped. */
  --lyn-shell-tv-indent-l1: 0;
  --lyn-shell-tv-indent-l2: 0.75rem;
  --lyn-shell-tv-indent-l3: 1.35rem;
  --lyn-shell-tv-indent-l4: 1.85rem;
  --lyn-shell-tv-indent-l5: 2.25rem;
  --lyn-shell-tv-indent-l6: 2.55rem;
  --lyn-shell-tv-indent-cap: 2.75rem;
  --lyn-shell-header-height: 60px;
  --lyn-shell-header-zone-gap: 0.5rem;
  --lyn-shell-mega-panel-z-index: 1100;
  --lyn-shell-mega-panel-bg: #ffffff;
  --lyn-shell-mega-panel-border: rgba(15, 23, 42, 0.1);
  --lyn-shell-mega-panel-shadow: 0 12px 28px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
  --lyn-shell-mega-panel-radius: 0.5rem;
  --lyn-shell-mega-heading-color: #2f3642;
  --lyn-shell-mega-link-color: var(--ai-shell-color-primary, #3f6ad8);
  --lyn-shell-mega-link-hover-bg: var(--ai-shell-color-primary-softer, rgba(63, 106, 216, 0.08));
  --lyn-shell-mega-icon-color: #6b7a99;
  --lyn-shell-mega-divider: rgba(15, 23, 42, 0.08);
  --lyn-shell-mega-badge-bg: var(--ai-shell-color-primary-soft, rgba(63, 106, 216, 0.12));
  --lyn-shell-mega-badge-color: var(--ai-shell-color-primary, #3f6ad8);
  --lyn-shell-header-surface-icon-color: #6b7a99;
  --lyn-shell-header-surface-z-index: 1100;
  --lyn-shell-header-badge-notification: #c2410c;
  --lyn-shell-header-badge-alert: #b45309;
  /* D.1 language panel — solid header tokens; future image override via CSS var only (no schema). */
  --lyn-shell-language-panel-header-bg: #3f6ad8;
  --lyn-shell-language-panel-header-color: #ffffff;
  --lyn-shell-language-panel-bg: #ffffff;
  --lyn-shell-language-panel-border: rgba(15, 23, 42, 0.1);
  --lyn-shell-language-panel-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  --lyn-shell-language-panel-row-hover: rgba(63, 106, 216, 0.08);
  --lyn-shell-language-panel-row-active: rgba(63, 106, 216, 0.12);
  /* T23.5.UI-SHELL-6A — shared header popover foundation tokens */
  --lyn-shell-popover-bg: #ffffff;
  --lyn-shell-popover-border: rgba(15, 23, 42, 0.1);
  --lyn-shell-popover-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  --lyn-shell-popover-radius: 0.5rem;
  --lyn-shell-popover-padding-x: 0.75rem;
  --lyn-shell-popover-padding-y: 0.65rem;
  --lyn-shell-popover-section-gap: 0.35rem;
  --lyn-shell-popover-divider: rgba(15, 23, 42, 0.08);
  --lyn-shell-popover-pointer-size: 0.55rem;
  --lyn-shell-popover-icon-slot: 1.25rem;
  --lyn-shell-popover-row-min-height: 2.25rem;
  --lyn-shell-popover-row-hover: rgba(63, 106, 216, 0.08);
  --lyn-shell-popover-row-focus: rgba(63, 106, 216, 0.14);
  --lyn-shell-popover-title-size: 0.875rem;
  --lyn-shell-popover-subtitle-size: 0.75rem;
  --lyn-shell-popover-z-index: 1100;
  --lyn-shell-popover-width-compact: 16rem;
  --lyn-shell-popover-width-standard: 18rem;
  --lyn-shell-popover-width-wide: 22rem;
  --lyn-shell-popover-width-narrow: min(22rem, calc(100vw - 1.25rem));
  --lyn-shell-popover-max-height: min(70vh, 24rem);
  --lyn-shell-popover-avatar-size: 2.25rem;
  --lyn-shell-workspace-min-height: calc(100vh - 140px);

  --ai-shell-sidebar-width: var(--lyn-shell-sidebar-width);
  --ai-shell-sidebar-width-collapsed: var(--lyn-shell-sidebar-width-collapsed);
  --ai-shell-sidebar-width-hover: var(--lyn-shell-sidebar-width-hover);
  --ai-shell-header-height: var(--lyn-shell-header-height);
  --ai-shell-workspace-min-height: var(--lyn-shell-workspace-min-height);
}