/* /app/css/nocturne.css — Thème Nocturne Azur (noir, gris foncé, bleu) */
:root{
  /* Surfaces profondes avec nuances bleu nuit */
  --surface-1:#03050a;
  --surface-2:#050813;
  --surface-3:#080e1f;
  --surface-4:#0e172d;
  --surface-5:#162648;

  /* Texte glacé */
  --text:#e6f0ff;
  --text-muted:#9fb6d9;

  /* États / accents */
  --border:#1f2f52;
  --primary:#3f8cff;     /* bleu électrique principal */
  --accent:#66e0ff;      /* accent cyan */
  --success:#4fdda4;
  --warning:#ffc857;
  --danger:#ff6b81;
  --link:#89b7ff;

  /* Bulles de messages */
  --bubble-me: color-mix(in oklab, var(--primary), var(--surface-2) 50%);
  --bubble-me-fg: #e6f0ff;

  /* Bouton scroll-to-bottom */
  --scroll-btn-icon:#ffffff;
  --scroll-btn-icon-hover:#d6f0ff;
  --scroll-badge-text:#08101f;

  /* Overlays / headers */
  --overlay-bg: rgba(2,5,12,.78);
  --header-bg:#040916;
  --header-border:#1a2745;

  /* Topbar Glassmorphism */
  --topbar-glass-bg: rgba(5, 12, 24, 0.82);
  --topbar-border-subtle: rgba(130, 170, 230, 0.12);

  /* Topbar Brand/Logo */
  --topbar-brand-glow: linear-gradient(135deg, rgba(63, 140, 255, 0.35) 0%, rgba(102, 224, 255, 0.18) 50%, rgba(63, 140, 255, 0.35) 100%);
  --topbar-brand-text-gradient-start: #66e0ff;
  --topbar-brand-text-gradient-end: #3f8cff;
  --topbar-brand-hover-bg: rgba(63, 140, 255, 0.12);

  /* Topbar Shimmer/Accent */
  --topbar-shimmer-mid1: rgba(63, 140, 255, 0.45);
  --topbar-shimmer-mid2: rgba(102, 224, 255, 0.45);

  /* Topbar Flash Button */
  --topbar-flash-gradient-start: #66e0ff;
  --topbar-flash-gradient-end: #3f8cff;
  --topbar-flash-hover-text: #050b16;

  /* Topbar Navigation */
  --topbar-link-hover-bg: rgba(255, 255, 255, 0.10);
  --topbar-link-active-bg: rgba(63, 140, 255, 0.18);
  --topbar-link-active-color: #a8d5ff;
  --topbar-link-active-indicator: linear-gradient(90deg, #66e0ff, #3f8cff);

  /* Topbar Menu */
  --topbar-menu-bg: rgba(7, 13, 26, 0.96);
  --topbar-menu-border: rgba(130, 170, 230, 0.16);
  --topbar-menu-item-hover-bg: rgba(63, 140, 255, 0.15);
  --topbar-menu-item-hover-shadow: inset 3px 0 0 rgba(102, 224, 255, 0.8);
  --topbar-menu-item-sweep-gradient: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.18) 50%, transparent 100%);

  /* Topbar Admin Link */
  --topbar-admin-bg: rgba(255, 107, 129, 0.08);
  --topbar-admin-border: rgba(255, 107, 129, 0.22);
  --topbar-admin-hover-bg: rgba(255, 107, 129, 0.15);
  --topbar-admin-hover-shadow: inset 3px 0 0 rgba(255, 107, 129, 0.75);

  /* Conversation Header Buttons */
  --header-back-btn-bg: color-mix(in oklab, var(--surface-2) 80%, #000 20%);
  --header-back-btn-hover-bg: color-mix(in oklab, var(--surface-2) 65%, #000 35%);
  --header-back-btn-border: color-mix(in oklab, var(--border) 80%, transparent);
  --header-call-btn-hover-bg: rgba(255, 255, 255, 0.08);

  /* Modals */
  --modal-overlay-bg: rgba(3, 6, 14, 0.9);
  --modal-bg-hover: rgba(102, 224, 255, 0.08);
  --modal-card-bg: #050b16;
  --modal-input-bg: #030711;
  --modal-border: #1f2f52;
  --modal-text: #e2edff;

  /* ===== Aliases rétro-compat ===== */
  --color1: var(--surface-1);
  --color2: var(--surface-2);
  --color3: var(--surface-3);
  --color4: var(--surface-4);
  --color5: var(--surface-5);
  --colorfont: var(--text);
  --colorfontalt: var(--text-muted);

  --bg: var(--surface-1);
  --card: var(--surface-3);
  --fg: var(--text);
  --muted: rgba(230,240,255,.75);
  --ok: var(--success);

  /* ── Encre sur fond plein — garanti AA 4.5:1 (design system §3.3) ── */
  --on-primary: #03050a;
  --on-accent: #03050a;
  --on-success: #03050a;
  --on-warning: #03050a;
  --on-danger: #03050a;

  /* ── Variante texte/icône sur surface — garanti AA sur surface-1..3 ── */
  --primary-fg: #3f8cff;
  --success-fg: #4fdda4;
  --warning-fg: #ffc857;
  --danger-fg: #ff6b81;
}