/* ==========================================================================
   Emeric Dashboard — Material Design 3 & M3 Expressive Design System
   Canonical Design Tokens: Color Roles (HCT), 10-Step Shapes, Springs, Typography, Elevation
   Strict Zero-Emoji Policy
   ========================================================================== */

:root {
  /* --- 10-Step M3 Expressive Shape Scale --- */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;       /* M3 Expressive Card/Container */
  --md-sys-shape-corner-extra-large: 28px;           /* M3 Dialog / Drawer */
  --md-sys-shape-corner-extra-large-increased: 32px; /* M3 Expressive Hero */
  --md-sys-shape-corner-extra-extra-large: 48px;     /* M3 Expressive Giant Surface */
  --md-sys-shape-corner-full: 9999px;                /* M3 Pills, FABs, Search Capsules */

  /* --- M3 Expressive Springs & Motion Curves --- */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  
  /* Expressive Springs */
  --md-sys-motion-spring-fast: cubic-bezier(0.42, 1.67, 0.21, 0.90);     /* 350ms quick punch */
  --md-sys-motion-spring-default: cubic-bezier(0.38, 1.21, 0.22, 1.00);  /* 500ms organic settle */
  --md-sys-motion-spring-slow: cubic-bezier(0.36, 1.01, 0.32, 1.00);     /* 700ms smooth drift */
  --md-sys-motion-spring-effects: cubic-bezier(0.34, 0.80, 0.34, 1.00);  /* 200ms opacity/color */

  /* Motion Durations */
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;

  /* --- State Layers Opacity --- */
  --md-sys-state-hover-layer: 0.08;
  --md-sys-state-focus-layer: 0.10;
  --md-sys-state-pressed-layer: 0.12;
  --md-sys-state-dragged-layer: 0.16;

  /* --- M3 Typography Scale (30 Styles: Baseline & Emphasized) --- */
  --md-ref-typeface-plain: 'Google Sans Text', -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', sans-serif;
  --md-ref-typeface-brand: 'Google Sans Text', -apple-system, BlinkMacSystemFont, 'Roboto Flex', sans-serif;

  /* Display */
  --md-sys-typescale-display-large: 400 57px/64px var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium: 400 45px/52px var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small: 400 36px/44px var(--md-ref-typeface-brand);
  /* Headline */
  --md-sys-typescale-headline-large: 400 32px/40px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium: 400 28px/36px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small: 400 24px/32px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-emphasized: 700 24px/32px var(--md-ref-typeface-brand);
  /* Title */
  --md-sys-typescale-title-large: 500 22px/28px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large-emphasized: 700 22px/28px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-medium: 500 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium-emphasized: 700 16px/24px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-small: 500 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small-emphasized: 700 14px/20px var(--md-ref-typeface-brand);
  /* Body */
  --md-sys-typescale-body-large: 400 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-emphasized: 500 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium: 400 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-emphasized: 500 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small: 400 12px/16px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-emphasized: 500 12px/16px var(--md-ref-typeface-plain);
  /* Label */
  --md-sys-typescale-label-large: 500 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-emphasized: 700 14px/20px var(--md-ref-typeface-brand);
  --md-sys-typescale-label-medium: 500 12px/16px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-emphasized: 700 12px/16px var(--md-ref-typeface-brand);
  --md-sys-typescale-label-small: 500 11px/16px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-emphasized: 700 11px/16px var(--md-ref-typeface-brand);

  /* --- Default Light Palette (Cyan Accent Default) --- */
  --md-sys-color-surface: #f8fafc;
  --md-sys-color-surface-dim: #dedfe3;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f1f5f9;
  --md-sys-color-surface-container: #e2e8f0;
  --md-sys-color-surface-container-high: #cbd5e1;
  --md-sys-color-surface-container-highest: #94a3b8;

  --md-sys-color-on-surface: #0f172a;
  --md-sys-color-on-surface-rgb: 15, 23, 42;
  --md-sys-color-on-surface-variant: #475569;
  --md-sys-color-outline: #64748b;
  --md-sys-color-outline-variant: #cbd5e1;

  --md-sys-color-primary: #0277bd;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e0f2fe;
  --md-sys-color-on-primary-container: #0369a1;

  --md-sys-color-secondary: #0277bd;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #bae6fd;
  --md-sys-color-on-secondary-container: #075985;

  --md-sys-color-tertiary: #0f766e;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ccfbf1;
  --md-sys-color-on-tertiary-container: #115e59;

  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-inverse-surface: #1e293b;
  --md-sys-color-inverse-on-surface: #f8fafc;
  --md-sys-color-inverse-primary: #7dd3fc;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  /* Elevation Shadows (Light) */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0px 1px 3px 1px rgba(15, 23, 42, 0.08), 0px 1px 2px 0px rgba(15, 23, 42, 0.12);
  --md-sys-elevation-level2: 0px 2px 6px 2px rgba(15, 23, 42, 0.08), 0px 1px 2px 0px rgba(15, 23, 42, 0.14);
  --md-sys-elevation-level3: 0px 4px 10px 3px rgba(15, 23, 42, 0.09), 0px 1px 3px 0px rgba(15, 23, 42, 0.15);
  --md-sys-elevation-level4: 0px 6px 14px 4px rgba(15, 23, 42, 0.10), 0px 2px 4px 0px rgba(15, 23, 42, 0.16);
  --md-sys-elevation-level5: 0px 8px 18px 6px rgba(15, 23, 42, 0.11), 0px 4px 6px 0px rgba(15, 23, 42, 0.18);

  /* Backward Compatibility Aliases */
  --bg: var(--md-sys-color-surface);
  --fg: var(--md-sys-color-on-surface);
  --muted: var(--md-sys-color-on-surface-variant);
  --line: var(--md-sys-color-outline-variant);
  --line-active: var(--md-sys-color-outline);
  --field: var(--md-sys-color-surface-container-low);
  --card-bg: var(--md-sys-color-surface-container-lowest);
  --surface: var(--md-sys-color-surface-container);
  --hover: rgba(var(--md-sys-color-on-surface-rgb), var(--md-sys-state-hover-layer));
  --invert: var(--md-sys-color-inverse-surface);
  --on-invert: var(--md-sys-color-inverse-on-surface);

  --accent: var(--md-sys-color-primary);
  --accent-rgb: 2, 119, 189;
  --accent-hover: #0369a1;
  --accent-subtle: var(--md-sys-color-primary-container);
  --accent-glow: rgba(2, 119, 189, 0.28);
  --accent-text: var(--md-sys-color-on-primary-container);

  /* Adaptive App Icon Brand Colors */
  --app-icon-bg: #0284c7;
  --app-icon-fg: #ffffff;
  --app-icon-stroke: rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Dark Theme (Base Tones)
   ========================================================================== */

:root[data-theme="dark"] {
  --md-sys-color-surface: #0b0f17;
  --md-sys-color-surface-dim: #080b10;
  --md-sys-color-surface-bright: #1a2232;
  --md-sys-color-surface-container-lowest: #05070c;
  --md-sys-color-surface-container-low: #0f1523;
  --md-sys-color-surface-container: #141c2e;
  --md-sys-color-surface-container-high: #1a243a;
  --md-sys-color-surface-container-highest: #24314c;

  --md-sys-color-on-surface: #f1f5f9;
  --md-sys-color-on-surface-rgb: 241, 245, 249;
  --md-sys-color-on-surface-variant: #94a3b8;
  --md-sys-color-outline: #64748b;
  --md-sys-color-outline-variant: #26334d;

  --md-sys-color-primary: #38bdf8;
  --md-sys-color-on-primary: #00344d;
  --md-sys-color-primary-container: #004d71;
  --md-sys-color-on-primary-container: #bae6fd;

  --md-sys-color-secondary: #7dd3fc;
  --md-sys-color-on-secondary: #003549;
  --md-sys-color-secondary-container: #004d6b;
  --md-sys-color-on-secondary-container: #c3e7ff;

  --md-sys-color-tertiary: #5eead4;
  --md-sys-color-on-tertiary: #003731;
  --md-sys-color-tertiary-container: #005047;
  --md-sys-color-on-tertiary-container: #7af8e0;

  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;

  --md-sys-color-inverse-surface: #f1f5f9;
  --md-sys-color-inverse-on-surface: #0f172a;
  --md-sys-color-inverse-primary: #0284c7;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  /* Elevation Shadows (Dark) */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0px 1px 3px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px 0px rgba(0, 0, 0, 0.35);
  --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.50), 0px 1px 2px 0px rgba(0, 0, 0, 0.40);
  --md-sys-elevation-level3: 0px 4px 10px 3px rgba(0, 0, 0, 0.55), 0px 1px 3px 0px rgba(0, 0, 0, 0.45);
  --md-sys-elevation-level4: 0px 6px 14px 4px rgba(0, 0, 0, 0.60), 0px 2px 4px 0px rgba(0, 0, 0, 0.50);
  --md-sys-elevation-level5: 0px 8px 18px 6px rgba(0, 0, 0, 0.65), 0px 4px 6px 0px rgba(0, 0, 0, 0.55);

  /* Backward Compatibility Aliases */
  --bg: var(--md-sys-color-surface);
  --fg: var(--md-sys-color-on-surface);
  --muted: var(--md-sys-color-on-surface-variant);
  --line: var(--md-sys-color-outline-variant);
  --line-active: var(--md-sys-color-outline);
  --field: var(--md-sys-color-surface-container-low);
  --card-bg: var(--md-sys-color-surface-container);
  --surface: var(--md-sys-color-surface-container-high);
  --hover: rgba(var(--md-sys-color-on-surface-rgb), var(--md-sys-state-hover-layer));
  --invert: var(--md-sys-color-inverse-surface);
  --on-invert: var(--md-sys-color-inverse-on-surface);

  --accent: var(--md-sys-color-primary);
  --accent-rgb: 56, 189, 248;
  --accent-hover: #7dd3fc;
  --accent-subtle: var(--md-sys-color-primary-container);
  --accent-glow: rgba(56, 189, 248, 0.35);
  --accent-text: var(--md-sys-color-on-primary-container);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-sys-color-surface: #0b0f17;
    --md-sys-color-surface-dim: #080b10;
    --md-sys-color-surface-bright: #1a2232;
    --md-sys-color-surface-container-lowest: #05070c;
    --md-sys-color-surface-container-low: #0f1523;
    --md-sys-color-surface-container: #141c2e;
    --md-sys-color-surface-container-high: #1a243a;
    --md-sys-color-surface-container-highest: #24314c;

    --md-sys-color-on-surface: #f1f5f9;
    --md-sys-color-on-surface-rgb: 241, 245, 249;
    --md-sys-color-on-surface-variant: #94a3b8;
    --md-sys-color-outline: #64748b;
    --md-sys-color-outline-variant: #26334d;

    --md-sys-color-primary: #38bdf8;
    --md-sys-color-on-primary: #00344d;
    --md-sys-color-primary-container: #004d71;
    --md-sys-color-on-primary-container: #bae6fd;

    --md-sys-color-secondary: #7dd3fc;
    --md-sys-color-on-secondary: #003549;
    --md-sys-color-secondary-container: #004d6b;
    --md-sys-color-on-secondary-container: #c3e7ff;

    --md-sys-color-tertiary: #5eead4;
    --md-sys-color-on-tertiary: #003731;
    --md-sys-color-tertiary-container: #005047;
    --md-sys-color-on-tertiary-container: #7af8e0;

    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;

    --md-sys-color-inverse-surface: #f1f5f9;
    --md-sys-color-inverse-on-surface: #0f172a;
    --md-sys-color-inverse-primary: #0284c7;
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;

    /* Elevation Shadows (Dark) */
    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1: 0px 1px 3px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px 0px rgba(0, 0, 0, 0.35);
    --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.50), 0px 1px 2px 0px rgba(0, 0, 0, 0.40);
    --md-sys-elevation-level3: 0px 4px 10px 3px rgba(0, 0, 0, 0.55), 0px 1px 3px 0px rgba(0, 0, 0, 0.45);
    --md-sys-elevation-level4: 0px 6px 14px 4px rgba(0, 0, 0, 0.60), 0px 2px 4px 0px rgba(0, 0, 0, 0.50);
    --md-sys-elevation-level5: 0px 8px 18px 6px rgba(0, 0, 0, 0.65), 0px 4px 6px 0px rgba(0, 0, 0, 0.55);

    /* Backward Compatibility Aliases */
    --bg: var(--md-sys-color-surface);
    --fg: var(--md-sys-color-on-surface);
    --muted: var(--md-sys-color-on-surface-variant);
    --line: var(--md-sys-color-outline-variant);
    --line-active: var(--md-sys-color-outline);
    --field: var(--md-sys-color-surface-container-low);
    --card-bg: var(--md-sys-color-surface-container);
    --surface: var(--md-sys-color-surface-container-high);
    --hover: rgba(var(--md-sys-color-on-surface-rgb), var(--md-sys-state-hover-layer));
    --invert: var(--md-sys-color-inverse-surface);
    --on-invert: var(--md-sys-color-inverse-on-surface);

    --accent: var(--md-sys-color-primary);
    --accent-rgb: 56, 189, 248;
    --accent-hover: #7dd3fc;
    --accent-subtle: var(--md-sys-color-primary-container);
    --accent-glow: rgba(56, 189, 248, 0.35);
    --accent-text: var(--md-sys-color-on-primary-container);
  }
}

/* ==========================================================================
   4 Dynamic M3 Accent Color Themes (Light & Dark)
   ========================================================================== */

/* 1. Cyan (Électrique / Digital) */
:root[data-accent="cyan"] {
  --md-sys-color-primary: #0277bd;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e0f2fe;
  --md-sys-color-on-primary-container: #0369a1;
  --md-sys-color-secondary: #0277bd;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #bae6fd;
  --md-sys-color-on-secondary-container: #075985;
  --md-sys-color-tertiary: #0f766e;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ccfbf1;
  --md-sys-color-on-tertiary-container: #115e59;
  --md-sys-color-outline: #64748b;
  --md-sys-color-outline-variant: #cbd5e1;
  --line: var(--md-sys-color-outline-variant);
  --line-active: var(--md-sys-color-outline);
  --accent: #0277bd;
  --accent-rgb: 2, 119, 189;
  --accent-hover: #0369a1;
  --accent-subtle: #e0f2fe;
  --accent-glow: rgba(2, 119, 189, 0.3);
  --accent-text: #0369a1;
  --app-icon-bg: #0284c7;
  --app-icon-fg: #ffffff;
  --app-icon-stroke: rgba(0, 0, 0, 0.08);
}
:root[data-theme="dark"][data-accent="cyan"] {
  --md-sys-color-primary: #38bdf8;
  --md-sys-color-on-primary: #00344d;
  --md-sys-color-primary-container: #004d71;
  --md-sys-color-on-primary-container: #bae6fd;
  --md-sys-color-secondary: #7dd3fc;
  --md-sys-color-on-secondary: #003549;
  --md-sys-color-secondary-container: #004d6b;
  --md-sys-color-on-secondary-container: #c3e7ff;
  --md-sys-color-tertiary: #5eead4;
  --md-sys-color-on-tertiary: #003731;
  --md-sys-color-tertiary-container: #005047;
  --md-sys-color-on-tertiary-container: #7af8e0;
  --md-sys-color-outline: #64748b;
  --md-sys-color-outline-variant: #26334d;
  --line: var(--md-sys-color-outline-variant);
  --line-active: var(--md-sys-color-outline);
  --accent: #38bdf8;
  --accent-rgb: 56, 189, 248;
  --accent-hover: #7dd3fc;
  --accent-subtle: #004d71;
  --accent-glow: rgba(56, 189, 248, 0.4);
  --accent-text: #bae6fd;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="cyan"] {
    --md-sys-color-primary: #38bdf8;
    --md-sys-color-on-primary: #00344d;
    --md-sys-color-primary-container: #004d71;
    --md-sys-color-on-primary-container: #bae6fd;
    --md-sys-color-secondary: #7dd3fc;
    --md-sys-color-on-secondary: #003549;
    --md-sys-color-secondary-container: #004d6b;
    --md-sys-color-on-secondary-container: #c3e7ff;
    --md-sys-color-tertiary: #5eead4;
    --md-sys-color-on-tertiary: #003731;
    --md-sys-color-tertiary-container: #005047;
    --md-sys-color-on-tertiary-container: #7af8e0;
    --md-sys-color-outline: #64748b;
    --md-sys-color-outline-variant: #26334d;
    --line: var(--md-sys-color-outline-variant);
    --line-active: var(--md-sys-color-outline);
    --accent: #38bdf8;
    --accent-rgb: 56, 189, 248;
    --accent-hover: #7dd3fc;
    --accent-subtle: #004d71;
    --accent-glow: rgba(56, 189, 248, 0.4);
    --accent-text: #bae6fd;
  }
}

/* 2. Orange (Chaleureux / Solaire) */
:root[data-accent="orange"] {
  --md-sys-color-surface: #fffbf7;
  --md-sys-color-surface-dim: #f7ebe1;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #fef5ec;
  --md-sys-color-surface-container: #fdeede;
  --md-sys-color-surface-container-high: #f6deca;
  --md-sys-color-surface-container-highest: #ebcdb5;

  --md-sys-color-outline: #9a5b32;
  --md-sys-color-outline-variant: #fed0b0;
  --line: var(--md-sys-color-outline-variant);
  --line-active: var(--md-sys-color-outline);

  --md-sys-color-primary: #ca3a04;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #ffedd5;
  --md-sys-color-on-primary-container: #7c2d12;
  --md-sys-color-secondary: #ca3a04;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #fed7aa;
  --md-sys-color-on-secondary-container: #7c2d12;
  --md-sys-color-tertiary: #b45309;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #fef3c7;
  --md-sys-color-on-tertiary-container: #78350f;
  --accent: #ca3a04;
  --accent-rgb: 202, 58, 4;
  --accent-hover: #9a2c03;
  --accent-subtle: #ffedd5;
  --accent-glow: rgba(202, 58, 4, 0.3);
  --accent-text: #7c2d12;
  --app-icon-bg: #ea580c;
  --app-icon-fg: #ffffff;
  --app-icon-stroke: rgba(0, 0, 0, 0.08);
}
:root[data-theme="dark"][data-accent="orange"] {
  --md-sys-color-surface: #130e0b;
  --md-sys-color-surface-dim: #0e0a08;
  --md-sys-color-surface-bright: #2b1f18;
  --md-sys-color-surface-container-lowest: #080605;
  --md-sys-color-surface-container-low: #18110e;
  --md-sys-color-surface-container: #201712;
  --md-sys-color-surface-container-high: #2a1e18;
  --md-sys-color-surface-container-highest: #382921;

  --md-sys-color-outline: #9a5b32;
  --md-sys-color-outline-variant: #4a2c1a;
  --line: var(--md-sys-color-outline-variant);
  --line-active: var(--md-sys-color-outline);

  --md-sys-color-primary: #fb923c;
  --md-sys-color-on-primary: #4d1e00;
  --md-sys-color-primary-container: #702d00;
  --md-sys-color-on-primary-container: #fed7aa;
  --md-sys-color-secondary: #fdba74;
  --md-sys-color-on-secondary: #431b04;
  --md-sys-color-secondary-container: #5a2404;
  --md-sys-color-on-secondary-container: #fed7aa;
  --md-sys-color-tertiary: #fcd34d;
  --md-sys-color-on-tertiary: #451a03;
  --md-sys-color-tertiary-container: #78350f;
  --md-sys-color-on-tertiary-container: #fde68a;
  --accent: #fb923c;
  --accent-rgb: 251, 146, 60;
  --accent-hover: #fdba74;
  --accent-subtle: #702d00;
  --accent-glow: rgba(251, 146, 60, 0.4);
  --accent-text: #fed7aa;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="orange"] {
    --md-sys-color-surface: #130e0b;
    --md-sys-color-surface-dim: #0e0a08;
    --md-sys-color-surface-bright: #2b1f18;
    --md-sys-color-surface-container-lowest: #080605;
    --md-sys-color-surface-container-low: #18110e;
    --md-sys-color-surface-container: #201712;
    --md-sys-color-surface-container-high: #2a1e18;
    --md-sys-color-surface-container-highest: #382921;

    --md-sys-color-outline: #9a5b32;
    --md-sys-color-outline-variant: #4a2c1a;
    --line: var(--md-sys-color-outline-variant);
    --line-active: var(--md-sys-color-outline);

    --md-sys-color-primary: #fb923c;
    --md-sys-color-on-primary: #4d1e00;
    --md-sys-color-primary-container: #702d00;
    --md-sys-color-on-primary-container: #fed7aa;
    --md-sys-color-secondary: #fdba74;
    --md-sys-color-on-secondary: #431b04;
    --md-sys-color-secondary-container: #5a2404;
    --md-sys-color-on-secondary-container: #fed7aa;
    --md-sys-color-tertiary: #fcd34d;
    --md-sys-color-on-tertiary: #451a03;
    --md-sys-color-tertiary-container: #78350f;
    --md-sys-color-on-tertiary-container: #fde68a;
    --accent: #fb923c;
    --accent-rgb: 251, 146, 60;
    --accent-hover: #fdba74;
    --accent-subtle: #702d00;
    --accent-glow: rgba(251, 146, 60, 0.4);
    --accent-text: #fed7aa;
  }
}

/* 3. Vert (Émeraude / Bio) */
:root[data-accent="green"] {
  --md-sys-color-surface: #f7fcf9;
  --md-sys-color-surface-dim: #e6f3ec;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #edf8f2;
  --md-sys-color-surface-container: #e0f2e9;
  --md-sys-color-surface-container-high: #cde7da;
  --md-sys-color-surface-container-highest: #b9dac9;

  --md-sys-color-outline: #407c60;
  --md-sys-color-outline-variant: #bfe5d1;
  --line: var(--md-sys-color-outline-variant);
  --line-active: var(--md-sys-color-outline);

  --md-sys-color-primary: #047857;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d1fae5;
  --md-sys-color-on-primary-container: #065f46;
  --md-sys-color-secondary: #047857;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #a7f3d0;
  --md-sys-color-on-secondary-container: #065f46;
  --md-sys-color-tertiary: #0f766e;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ccfbf1;
  --md-sys-color-on-tertiary-container: #134e4a;
  --accent: #047857;
  --accent-rgb: 4, 120, 87;
  --accent-hover: #065f46;
  --accent-subtle: #d1fae5;
  --accent-glow: rgba(4, 120, 87, 0.3);
  --accent-text: #065f46;
  --app-icon-bg: #059669;
  --app-icon-fg: #ffffff;
  --app-icon-stroke: rgba(0, 0, 0, 0.08);
}
:root[data-theme="dark"][data-accent="green"] {
  --md-sys-color-surface: #0a120e;
  --md-sys-color-surface-dim: #070e0a;
  --md-sys-color-surface-bright: #1b2d23;
  --md-sys-color-surface-container-lowest: #050907;
  --md-sys-color-surface-container-low: #101a14;
  --md-sys-color-surface-container: #16241c;
  --md-sys-color-surface-container-high: #1c2e24;
  --md-sys-color-surface-container-highest: #263e31;

  --md-sys-color-outline: #3d6951;
  --md-sys-color-outline-variant: #1f3d2b;
  --line: var(--md-sys-color-outline-variant);
  --line-active: var(--md-sys-color-outline);

  --md-sys-color-primary: #34d399;
  --md-sys-color-on-primary: #003824;
  --md-sys-color-primary-container: #005237;
  --md-sys-color-on-primary-container: #a7f3d0;
  --md-sys-color-secondary: #6ee7b7;
  --md-sys-color-on-secondary: #002d1d;
  --md-sys-color-secondary-container: #00452d;
  --md-sys-color-on-secondary-container: #a7f3d0;
  --md-sys-color-tertiary: #2dd4bf;
  --md-sys-color-on-tertiary: #042f2e;
  --md-sys-color-tertiary-container: #134e4a;
  --md-sys-color-on-tertiary-container: #99f6e4;
  --accent: #34d399;
  --accent-rgb: 52, 211, 153;
  --accent-hover: #6ee7b7;
  --accent-subtle: #005237;
  --accent-glow: rgba(52, 211, 153, 0.4);
  --accent-text: #a7f3d0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="green"] {
    --md-sys-color-surface: #0a120e;
    --md-sys-color-surface-dim: #070e0a;
    --md-sys-color-surface-bright: #1b2d23;
    --md-sys-color-surface-container-lowest: #050907;
    --md-sys-color-surface-container-low: #101a14;
    --md-sys-color-surface-container: #16241c;
    --md-sys-color-surface-container-high: #1c2e24;
    --md-sys-color-surface-container-highest: #263e31;

    --md-sys-color-outline: #3d6951;
    --md-sys-color-outline-variant: #1f3d2b;
    --line: var(--md-sys-color-outline-variant);
    --line-active: var(--md-sys-color-outline);

    --md-sys-color-primary: #34d399;
    --md-sys-color-on-primary: #003824;
    --md-sys-color-primary-container: #005237;
    --md-sys-color-on-primary-container: #a7f3d0;
    --md-sys-color-secondary: #6ee7b7;
    --md-sys-color-on-secondary: #002d1d;
    --md-sys-color-secondary-container: #00452d;
    --md-sys-color-on-secondary-container: #a7f3d0;
    --md-sys-color-tertiary: #2dd4bf;
    --md-sys-color-on-tertiary: #042f2e;
    --md-sys-color-tertiary-container: #134e4a;
    --md-sys-color-on-tertiary-container: #99f6e4;
    --accent: #34d399;
    --accent-rgb: 52, 211, 153;
    --accent-hover: #6ee7b7;
    --accent-subtle: #005237;
    --accent-glow: rgba(52, 211, 153, 0.4);
    --accent-text: #a7f3d0;
  }
}

/* 4. Rose (Vif / Expressif) */
:root[data-accent="pink"] {
  --md-sys-color-surface: #fdf8fa;
  --md-sys-color-surface-dim: #f8eaf1;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #fdf2f7;
  --md-sys-color-surface-container: #fae4f0;
  --md-sys-color-surface-container-high: #f4d0e4;
  --md-sys-color-surface-container-highest: #ecc0d7;

  --md-sys-color-outline: #9d406f;
  --md-sys-color-outline-variant: #f3d0e2;
  --line: var(--md-sys-color-outline-variant);
  --line-active: var(--md-sys-color-outline);

  --md-sys-color-primary: #be185d;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #fce7f3;
  --md-sys-color-on-primary-container: #9d174d;
  --md-sys-color-secondary: #be185d;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #fbcfe8;
  --md-sys-color-on-secondary-container: #831843;
  --md-sys-color-tertiary: #7c3aed;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ede9fe;
  --md-sys-color-on-tertiary-container: #4c1d95;
  --accent: #be185d;
  --accent-rgb: 190, 24, 93;
  --accent-hover: #9d174d;
  --accent-subtle: #fce7f3;
  --accent-glow: rgba(190, 24, 93, 0.3);
  --accent-text: #9d174d;
  --app-icon-bg: #db2777;
  --app-icon-fg: #ffffff;
  --app-icon-stroke: rgba(0, 0, 0, 0.08);
}
:root[data-theme="dark"][data-accent="pink"] {
  --md-sys-color-surface: #130a10;
  --md-sys-color-surface-dim: #0e070c;
  --md-sys-color-surface-bright: #2d1726;
  --md-sys-color-surface-container-lowest: #080406;
  --md-sys-color-surface-container-low: #190e16;
  --md-sys-color-surface-container: #22131e;
  --md-sys-color-surface-container-high: #2c1a27;
  --md-sys-color-surface-container-highest: #3b2334;

  --md-sys-color-outline: #9d437a;
  --md-sys-color-outline-variant: #4a223c;
  --line: var(--md-sys-color-outline-variant);
  --line-active: var(--md-sys-color-outline);

  --md-sys-color-primary: #f472b6;
  --md-sys-color-on-primary: #50002b;
  --md-sys-color-primary-container: #73003f;
  --md-sys-color-on-primary-container: #fbcfe8;
  --md-sys-color-secondary: #f9a8d4;
  --md-sys-color-on-secondary: #400022;
  --md-sys-color-secondary-container: #5c0032;
  --md-sys-color-on-secondary-container: #fbcfe8;
  --md-sys-color-tertiary: #c4b5fd;
  --md-sys-color-on-tertiary: #2e1065;
  --md-sys-color-tertiary-container: #4c1d95;
  --md-sys-color-on-tertiary-container: #ddd6fe;
  --accent: #f472b6;
  --accent-rgb: 244, 114, 182;
  --accent-hover: #f9a8d4;
  --accent-subtle: #73003f;
  --accent-glow: rgba(244, 114, 182, 0.4);
  --accent-text: #fbcfe8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="pink"] {
    --md-sys-color-surface: #130a10;
    --md-sys-color-surface-dim: #0e070c;
    --md-sys-color-surface-bright: #2d1726;
    --md-sys-color-surface-container-lowest: #080406;
    --md-sys-color-surface-container-low: #190e16;
    --md-sys-color-surface-container: #22131e;
    --md-sys-color-surface-container-high: #2c1a27;
    --md-sys-color-surface-container-highest: #3b2334;

    --md-sys-color-outline: #9d437a;
    --md-sys-color-outline-variant: #4a223c;
    --line: var(--md-sys-color-outline-variant);
    --line-active: var(--md-sys-color-outline);

    --md-sys-color-primary: #f472b6;
    --md-sys-color-on-primary: #50002b;
    --md-sys-color-primary-container: #73003f;
    --md-sys-color-on-primary-container: #fbcfe8;
    --md-sys-color-secondary: #f9a8d4;
    --md-sys-color-on-secondary: #400022;
    --md-sys-color-secondary-container: #5c0032;
    --md-sys-color-on-secondary-container: #fbcfe8;
    --md-sys-color-tertiary: #c4b5fd;
    --md-sys-color-on-tertiary: #2e1065;
    --md-sys-color-tertiary-container: #4c1d95;
    --md-sys-color-on-tertiary-container: #ddd6fe;
    --accent: #f472b6;
    --accent-rgb: 244, 114, 182;
    --accent-hover: #f9a8d4;
    --accent-subtle: #73003f;
    --accent-glow: rgba(244, 114, 182, 0.4);
    --accent-text: #fbcfe8;
  }
}

/* 5. Rouge (Intense / Carmin) */
:root[data-accent="red"] {
  --md-sys-color-surface: #fff8f8;
  --md-sys-color-surface-dim: #fde8e8;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #fef2f2;
  --md-sys-color-surface-container: #fee2e2;
  --md-sys-color-surface-container-high: #fecaca;
  --md-sys-color-surface-container-highest: #fca5a5;

  --md-sys-color-outline: #b91c1c;
  --md-sys-color-outline-variant: #fecaca;
  --line: var(--md-sys-color-outline-variant);
  --line-active: var(--md-sys-color-outline);

  --md-sys-color-primary: #dc2626;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #fee2e2;
  --md-sys-color-on-primary-container: #991b1b;
  --md-sys-color-secondary: #dc2626;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #fee2e2;
  --md-sys-color-on-secondary-container: #991b1b;
  --md-sys-color-tertiary: #b91c1c;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #fee2e2;
  --md-sys-color-on-tertiary-container: #450a0a;
  --accent: #dc2626;
  --accent-rgb: 220, 38, 38;
  --accent-hover: #b91c1c;
  --accent-subtle: #fee2e2;
  --accent-glow: rgba(220, 38, 38, 0.3);
  --accent-text: #991b1b;
  --app-icon-bg: #dc2626;
  --app-icon-fg: #ffffff;
  --app-icon-stroke: rgba(0, 0, 0, 0.08);
}
:root[data-theme="dark"][data-accent="red"] {
  --md-sys-color-surface: #14090a;
  --md-sys-color-surface-dim: #0f0607;
  --md-sys-color-surface-bright: #2c1417;
  --md-sys-color-surface-container-lowest: #080304;
  --md-sys-color-surface-container-low: #190b0d;
  --md-sys-color-surface-container: #201012;
  --md-sys-color-surface-container-high: #2a1518;
  --md-sys-color-surface-container-highest: #3a1d21;

  --md-sys-color-outline: #b9292a;
  --md-sys-color-outline-variant: #4c1d22;
  --line: var(--md-sys-color-outline-variant);
  --line-active: var(--md-sys-color-outline);

  --md-sys-color-primary: #f87171;
  --md-sys-color-on-primary: #450a0a;
  --md-sys-color-primary-container: #7f1d1d;
  --md-sys-color-on-primary-container: #fecaca;
  --md-sys-color-secondary: #fca5a5;
  --md-sys-color-on-secondary: #450a0a;
  --md-sys-color-secondary-container: #5c0d11;
  --md-sys-color-on-secondary-container: #fecaca;
  --md-sys-color-tertiary: #f87171;
  --md-sys-color-on-tertiary: #450a0a;
  --md-sys-color-tertiary-container: #7f1d1d;
  --md-sys-color-on-tertiary-container: #fee2e2;
  --accent: #f87171;
  --accent-rgb: 248, 113, 113;
  --accent-hover: #fca5a5;
  --accent-subtle: #7f1d1d;
  --accent-glow: rgba(248, 113, 113, 0.4);
  --accent-text: #fecaca;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="red"] {
    --md-sys-color-surface: #14090a;
    --md-sys-color-surface-dim: #0f0607;
    --md-sys-color-surface-bright: #2c1417;
    --md-sys-color-surface-container-lowest: #080304;
    --md-sys-color-surface-container-low: #190b0d;
    --md-sys-color-surface-container: #201012;
    --md-sys-color-surface-container-high: #2a1518;
    --md-sys-color-surface-container-highest: #3a1d21;

    --md-sys-color-outline: #b9292a;
    --md-sys-color-outline-variant: #4c1d22;
    --line: var(--md-sys-color-outline-variant);
    --line-active: var(--md-sys-color-outline);

    --md-sys-color-primary: #f87171;
    --md-sys-color-on-primary: #450a0a;
    --md-sys-color-primary-container: #7f1d1d;
    --md-sys-color-on-primary-container: #fecaca;
    --md-sys-color-secondary: #fca5a5;
    --md-sys-color-on-secondary: #450a0a;
    --md-sys-color-secondary-container: #5c0d11;
    --md-sys-color-on-secondary-container: #fecaca;
    --md-sys-color-tertiary: #f87171;
    --md-sys-color-on-tertiary: #450a0a;
    --md-sys-color-tertiary-container: #7f1d1d;
    --md-sys-color-on-tertiary-container: #fee2e2;
    --accent: #f87171;
    --accent-rgb: 248, 113, 113;
    --accent-hover: #fca5a5;
    --accent-subtle: #7f1d1d;
    --accent-glow: rgba(248, 113, 113, 0.4);
    --accent-text: #fecaca;
  }
}

/* 6. Blanc (Monochrome / Pur) */
:root[data-accent="white"] {
  --md-sys-color-surface: #ffffff;
  --md-sys-color-surface-dim: #e5e5e7;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f5f5f7;
  --md-sys-color-surface-container: #ebebf0;
  --md-sys-color-surface-container-high: #e1e1e6;
  --md-sys-color-surface-container-highest: #d1d1d6;

  --md-sys-color-outline: #8e8e93;
  --md-sys-color-outline-variant: #d1d1d6;
  --line: var(--md-sys-color-outline-variant);
  --line-active: var(--md-sys-color-outline);

  --md-sys-color-primary: #1c1c1e;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e5e5ea;
  --md-sys-color-on-primary-container: #1c1c1e;
  --md-sys-color-secondary: #2c2c2e;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #1c1c1e;
  --md-sys-color-on-secondary-container: #ffffff;
  --md-sys-color-tertiary: #48484a;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #f2f2f7;
  --md-sys-color-on-tertiary-container: #1c1c1e;
  --accent: #1c1c1e;
  --accent-rgb: 28, 28, 30;
  --accent-hover: #000000;
  --accent-subtle: #e5e5ea;
  --accent-glow: rgba(0, 0, 0, 0.2);
  --accent-text: #1c1c1e;
  --app-icon-bg: #ffffff;
  --app-icon-fg: #0f172a;
  --app-icon-stroke: rgba(0, 0, 0, 0.16);
}
:root[data-theme="dark"][data-accent="white"] {
  --md-sys-color-surface: #0a0a0c;
  --md-sys-color-surface-dim: #050507;
  --md-sys-color-surface-bright: #1c1c20;
  --md-sys-color-surface-container-lowest: #020203;
  --md-sys-color-surface-container-low: #111114;
  --md-sys-color-surface-container: #18181c;
  --md-sys-color-surface-container-high: #202026;
  --md-sys-color-surface-container-highest: #2c2c34;

  --md-sys-color-outline: #71717a;
  --md-sys-color-outline-variant: #27272a;
  --line: var(--md-sys-color-outline-variant);
  --line-active: var(--md-sys-color-outline);

  --md-sys-color-primary: #ffffff;
  --md-sys-color-on-primary: #000000;
  --md-sys-color-primary-container: #2c2c34;
  --md-sys-color-on-primary-container: #ffffff;
  --md-sys-color-secondary: #e4e4e7;
  --md-sys-color-on-secondary: #09090b;
  --md-sys-color-secondary-container: #ffffff;
  --md-sys-color-on-secondary-container: #000000;
  --md-sys-color-tertiary: #d4d4d8;
  --md-sys-color-on-tertiary: #09090b;
  --md-sys-color-tertiary-container: #27272a;
  --md-sys-color-on-tertiary-container: #fafafa;
  --accent: #ffffff;
  --accent-rgb: 255, 255, 255;
  --accent-hover: #e4e4e7;
  --accent-subtle: #27272a;
  --accent-glow: rgba(255, 255, 255, 0.4);
  --accent-text: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="white"] {
    --md-sys-color-surface: #0a0a0c;
    --md-sys-color-surface-dim: #050507;
    --md-sys-color-surface-bright: #1c1c20;
    --md-sys-color-surface-container-lowest: #020203;
    --md-sys-color-surface-container-low: #111114;
    --md-sys-color-surface-container: #18181c;
    --md-sys-color-surface-container-high: #202026;
    --md-sys-color-surface-container-highest: #2c2c34;

    --md-sys-color-outline: #71717a;
    --md-sys-color-outline-variant: #27272a;
    --line: var(--md-sys-color-outline-variant);
    --line-active: var(--md-sys-color-outline);

    --md-sys-color-primary: #ffffff;
    --md-sys-color-on-primary: #000000;
    --md-sys-color-primary-container: #2c2c34;
    --md-sys-color-on-primary-container: #ffffff;
    --md-sys-color-secondary: #e4e4e7;
    --md-sys-color-on-secondary: #09090b;
    --md-sys-color-secondary-container: #ffffff;
    --md-sys-color-on-secondary-container: #000000;
    --md-sys-color-tertiary: #d4d4d8;
    --md-sys-color-on-tertiary: #09090b;
    --md-sys-color-tertiary-container: #27272a;
    --md-sys-color-on-tertiary-container: #fafafa;
    --accent: #ffffff;
    --accent-rgb: 255, 255, 255;
    --accent-hover: #e4e4e7;
    --accent-subtle: #27272a;
    --accent-glow: rgba(255, 255, 255, 0.4);
    --accent-text: #ffffff;
  }
}

/* ==========================================================================
   M3 Expressive Hero Animations & Motion Keyframes
   ========================================================================== */

@keyframes cardEnterSpring {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  65% {
    opacity: 1;
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes composerIndeterminateTrack {
  0% { left: -35%; width: 35%; }
  60% { left: 35%; width: 55%; }
  100% { left: 100%; width: 35%; }
}

@keyframes themeRipplePulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.card-enter-spring {
  animation: cardEnterSpring var(--md-sys-motion-duration-long2) var(--md-sys-motion-spring-default) forwards;
}

/* ==========================================================================
   Global Reset & M3 Plain Typography
   ========================================================================== */

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

/* Material Design 3 Expressive Floating Slim Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  transition: background-color var(--md-sys-motion-duration-short2) ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--md-sys-color-outline);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-spring-effects),
              color var(--md-sys-motion-duration-short4) var(--md-sys-motion-spring-effects);
}

/* Empty State Placeholders for Feeds and Grids */
.feed > .empty,
.feed > .m3-empty-state,
.wiki-grid > .empty,
.wiki-grid > .m3-empty-state,
#chatFeed > .empty,
#chatFeed > .m3-empty-state {
  grid-column: 1 / -1;
  width: 100%;
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-medium);
  padding: 32px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  margin: auto;
  align-self: center;
  justify-self: center;
}

/* M3 Focus Rings */
:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* Accessible High-Contrast Placeholders (WCAG AA/AAA Compliant) */
input::placeholder,
textarea::placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 1;
}

/* ==========================================================================
   Dynamic Scroll Edge Gradients & Soft-Edge Masks (Material Design 3)
   Universal scroll fade affordance matching Settings & Calendar
   ========================================================================== */

.scroll-fade-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.scroll-fade-edge {
  position: absolute;
  left: 0;
  right: 0;
  height: 32px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects);
}

.scroll-fade-top {
  top: 0;
  background: linear-gradient(to bottom, var(--scroll-fade-color, var(--md-sys-color-surface)) 0%, rgba(0, 0, 0, 0) 100%);
}

.scroll-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--scroll-fade-color, var(--md-sys-color-surface)) 0%, rgba(0, 0, 0, 0) 100%);
}

.scroll-fade-wrap.can-scroll-up .scroll-fade-top,
.scroll-fade-wrap.can-scroll-up > .scroll-fade-top,
.can-scroll-up > .scroll-fade-top {
  opacity: 1;
}

.scroll-fade-wrap.can-scroll-down .scroll-fade-bottom,
.scroll-fade-wrap.can-scroll-down > .scroll-fade-bottom,
.can-scroll-down > .scroll-fade-bottom {
  opacity: 1;
}

/* Container-specific fade color overrides */
.chat-sessions-sidebar,
.chat-sessions-list-wrap,
.notes-supporting-pane,
.supporting-pane-scroll-wrap {
  --scroll-fade-color: var(--md-sys-color-surface-container-low);
}

.modal-card,
.modal-body-wrap,
.search-modal {
  --scroll-fade-color: var(--md-sys-color-surface-container-high);
}

/* Modern container scroll-state queries support (Baseline / Progressive Enhancement) */
@supports (container-type: scroll-state) {
  .scroll-fade-wrap {
    container-type: scroll-state;
  }
  @container scroll-state(scrollable: top) {
    .scroll-fade-top {
      opacity: 1;
    }
  }
  @container scroll-state(scrollable: bottom) {
    .scroll-fade-bottom {
      opacity: 1;
    }
  }
}

/* Dynamic soft-edge masks for content */
.has-scroll-fade,
#chatFeed,
#notesFeed,
#chatSessionsList,
#wikiContent,
.supporting-pane-body,
.modal-body,
.search-results,
.cal-week-body-scroll,
.cal-day-body-scroll,
.composer-slash-menu,
.doc-preview-sheet-wrap {
  transition: -webkit-mask-image var(--md-sys-motion-duration-short3) ease,
              mask-image var(--md-sys-motion-duration-short3) ease;
}

.has-scroll-fade.can-scroll-up.can-scroll-down,
#chatFeed.can-scroll-up.can-scroll-down,
#notesFeed.can-scroll-up.can-scroll-down,
#chatSessionsList.can-scroll-up.can-scroll-down,
#wikiContent.can-scroll-up.can-scroll-down,
.supporting-pane-body.can-scroll-up.can-scroll-down,
.modal-body.can-scroll-up.can-scroll-down,
.search-results.can-scroll-up.can-scroll-down,
.cal-week-body-scroll.can-scroll-up.can-scroll-down,
.cal-day-body-scroll.can-scroll-up.can-scroll-down,
.composer-slash-menu.can-scroll-up.can-scroll-down,
.doc-preview-sheet-wrap.can-scroll-up.can-scroll-down {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
}

.has-scroll-fade.can-scroll-down:not(.can-scroll-up),
#chatFeed.can-scroll-down:not(.can-scroll-up),
#notesFeed.can-scroll-down:not(.can-scroll-up),
#chatSessionsList.can-scroll-down:not(.can-scroll-up),
#wikiContent.can-scroll-down:not(.can-scroll-up),
.supporting-pane-body.can-scroll-down:not(.can-scroll-up),
.modal-body.can-scroll-down:not(.can-scroll-up),
.search-results.can-scroll-down:not(.can-scroll-up),
.cal-week-body-scroll.can-scroll-down:not(.can-scroll-up),
.cal-day-body-scroll.can-scroll-down:not(.can-scroll-up),
.composer-slash-menu.can-scroll-down:not(.can-scroll-up),
.doc-preview-sheet-wrap.can-scroll-down:not(.can-scroll-up) {
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 28px), transparent 100%);
}

.has-scroll-fade.can-scroll-up:not(.can-scroll-down),
#chatFeed.can-scroll-up:not(.can-scroll-down),
#notesFeed.can-scroll-up:not(.can-scroll-down),
#chatSessionsList.can-scroll-up:not(.can-scroll-down),
#wikiContent.can-scroll-up:not(.can-scroll-down),
.supporting-pane-body.can-scroll-up:not(.can-scroll-down),
.modal-body.can-scroll-up:not(.can-scroll-down),
.search-results.can-scroll-up:not(.can-scroll-down),
.cal-week-body-scroll.can-scroll-up:not(.can-scroll-down),
.cal-day-body-scroll.can-scroll-up:not(.can-scroll-down),
.composer-slash-menu.can-scroll-up:not(.can-scroll-down),
.doc-preview-sheet-wrap.can-scroll-up:not(.can-scroll-down) {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 28px, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 28px, black 100%);
}

.has-scroll-fade:not(.can-scroll-up):not(.can-scroll-down),
#chatFeed:not(.can-scroll-up):not(.can-scroll-down),
#notesFeed:not(.can-scroll-up):not(.can-scroll-down),
#chatSessionsList:not(.can-scroll-up):not(.can-scroll-down),
#wikiContent:not(.can-scroll-up):not(.can-scroll-down),
.supporting-pane-body:not(.can-scroll-up):not(.can-scroll-down),
.modal-body:not(.can-scroll-up):not(.can-scroll-down),
.search-results:not(.can-scroll-up):not(.can-scroll-down),
.cal-week-body-scroll:not(.can-scroll-up):not(.can-scroll-down),
.cal-day-body-scroll:not(.can-scroll-up):not(.can-scroll-down),
.composer-slash-menu:not(.can-scroll-up):not(.can-scroll-down),
.doc-preview-sheet-wrap:not(.can-scroll-up):not(.can-scroll-down) {
  -webkit-mask-image: none;
  mask-image: none;
}