/* ==========================================================================
   MODULOGICAL — SHARED DESIGN SYSTEM (holographic / calming / animated)
   One token layer + one set of component classes, reused on every page.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,380..800;1,14..32,380..800&display=swap');

:root{
  /* =====================================================================
     THEME TOKENS
     ===================================================================== */

  /* ---- general UI ------------------------------------------------------- */
  --bg:             #06070a;
  --surface-1:      rgba(255,255,255,.035);
  --surface-2:      rgba(255,255,255,.05);
  --surface-3:      rgba(255,255,255,.075);
  --surface-raised: rgba(255,255,255,.045);

  --line:           rgba(255,255,255,.09);
  --line-strong:    rgba(255,255,255,.16);
  --line-accent:    rgba(196,181,253,.4);

  /* ---- text: shared defaults ------------------------------------------- */
  --text-1:         #f3f1f8;
  --text-2:         #a3a2b3;
  --text-3:         #6d6c7c;
  --text-inverse:   #0a0a10;

  /* ---- text: per UI ---------------------------------------------------- */
  --text-nav:       var(--text-1);
  --text-dashboard: var(--text-1);
  --text-chat:      var(--text-1);
  --text-settings:  var(--text-1);
  --text-muted:     var(--text-3);

  /* ---- dashboard / topbar --------------------------------------------- */
  /* The dashboard and persistent topbar intentionally share one base colour. */
  --dashboard-bg:   #06070a;
  --dashboard-glow-1: var(--left-glow-primary);
  --dashboard-glow-2: var(--left-glow-secondary);
  --dashboard-glow-3: var(--right-glow-primary);
  --dashboard-glow-4: var(--right-glow-secondary);

  /* ---- buttons --------------------------------------------------------- */
  /* ---- semantic button roles -------------------------------------------- */
  /* Generic product actions (non-page-specific CTAs) */
  --button-default-bg: var(--accent);
  --button-default-text: var(--text-inverse);
  --button-default-hover: var(--accent-dim);
  --button-default-accent-text: var(--text-inverse);
  --button-default-ghost-bg: var(--surface-1);
  --button-default-ghost-text: var(--text-1);

  /* Chat send/action */
  --button-chat-bg:           var(--accent);
  --button-chat-text:         var(--text-inverse);
  --button-chat-hover:        var(--accent-dim);
  --button-chat-border:       transparent;
  --button-chat-hover-border: transparent;

  /* Chat model/temperature controls */
  --button-chat-preference-bg:           var(--surface-2);
  --button-chat-preference-text:         var(--text-1);
  --button-chat-preference-hover:        var(--surface-3);
  --button-chat-preference-border:       var(--line);
  --button-chat-preference-hover-border: var(--line-strong);

  /* Sidebar controls/navigation */
  --button-sidebar-bg:           var(--surface-2);
  --button-sidebar-text:         var(--text-2);
  --button-sidebar-hover:        var(--surface-3);
  --button-sidebar-hover-text:   var(--text-1);
  --button-sidebar-border:       var(--line);
  --button-sidebar-hover-border: var(--line-strong);

  /* Persistent topbar controls */
  --button-topbar-bg:           var(--surface-1);
  --button-topbar-text:         var(--text-2);
  --button-topbar-hover:        var(--surface-2);
  --button-topbar-hover-text:   var(--text-1);
  --button-topbar-border:       var(--line);
  --button-topbar-hover-border: var(--line-strong);

  /* Settings-page controls */
  --button-settings-bg:           var(--surface-1);
  --button-settings-text:         var(--text-1);
  --button-settings-hover:        var(--surface-2);
  --button-settings-hover-text:   var(--text-1);
  --button-settings-border:       var(--line);
  --button-settings-hover-border: var(--line-strong);

  --button-default-bg:   var(--accent);
  --button-default-text: var(--text-inverse);
  --button-default-hover: var(--accent-dim);

  --button-default-accent-text:  var(--text-inverse);
  --button-default-ghost-bg:     var(--surface-1);
  --button-default-ghost-text:   var(--text-1);

  /* ---- holographic accent system --------------------------------------- */
--left-glow-secondary:    #7dd3fc;
  --left-glow-primary:  #c4b5fd;
  --right-glow-primary:    #f5b8da;
  --right-glow-secondary:    #67e8f9;
  --accent:  #a5b4fc;

  --logo-mark: url('/assets/img/logo-mark/holographic-dark.png');

  --loader-blue: #7ED3FC;
  --loader-red: #F5B8DA;
  --loader-purple: #AB9FDD;

  --accent:        #b9aaff;      /* representative solid, for small dots/carets */
  --accent-dim:    #786fb0;
  --accent-wash:   rgba(185,170,255,.1);
  --accent-line:   rgba(185,170,255,.35);

  /* Reusable brand/accent gradient (buttons, gradient text, etc.) */
  --accent-gradient: linear-gradient(
    115deg,
    var(--left-glow-secondary) 0%,
    var(--left-glow-primary) 32%,
    var(--right-glow-primary) 64%,
    var(--right-glow-secondary) 100%
  );
  --accent-gradient-size: 260%;

  /* ---- signal colors -----------------------------------------------------*/
  --success:       #7be3ae;
  --success-wash:  rgba(123,227,174,.1);
  --danger:        #f2879a;
  --danger-wash:   rgba(242,135,154,.1);  

  /* ---- type ------------------------------------------------------------*/
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;

  /* ---- shape / motion --------------------------------------------------*/
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 160ms;
  --med:  280ms;
  --slow: 480ms;

  --shell-max: 1180px;
  --blur-glass: 22px;
}

/* ---------------------------------------------------------------------- */
/* Theme: greyscale — black / grey / white only                            */
/* Toggle with data-theme="greyscale" on <html> or <body>                  */
/* ---------------------------------------------------------------------- */
[data-theme="Company-Colours"] {
  /* semantic button roles */
  --logo-mark: url('/assets/img/logo-mark/company-colours.png');

  --button-chat-bg: #22b2ff;
  --button-chat-text: #07131c;
  --button-chat-hover: #4b6bff;
  --button-chat-border: transparent;
  --button-chat-hover-border: transparent;

  --button-chat-preference-bg: #151823;
  --button-chat-preference-text: #f2f5ff;
  --button-chat-preference-hover: #20263a;
  --button-chat-preference-border: var(--line);
  --button-chat-preference-hover-border: var(--line-strong);

  --button-sidebar-bg: #151823;
  --button-sidebar-text: #b8c4dc;
  --button-sidebar-hover: #20263a;
  --button-sidebar-hover-text: #f2f5ff;
  --button-sidebar-border: var(--line);
  --button-sidebar-hover-border: var(--line-strong);

  --button-topbar-bg: #10131d;
  --button-topbar-text: #b8c4dc;
  --button-topbar-hover: #1d2231;
  --button-topbar-hover-text: #f2f5ff;
  --button-topbar-border: var(--line);
  --button-topbar-hover-border: var(--line-strong);

  --button-settings-bg: #151823;
  --button-settings-text: #f2f5ff;
  --button-settings-hover: #20263a;
  --button-settings-hover-text: #f2f5ff;
  --button-settings-border: var(--line);
  --button-settings-hover-border: var(--line-strong);


  --dashboard-bg: #06070a;
  --dashboard-glow-1: var(--left-glow-primary);
  --dashboard-glow-2: var(--left-glow-secondary);
  --dashboard-glow-3: var(--right-glow-primary);
  --dashboard-glow-4: var(--right-glow-secondary);

  --button-default-bg: var(--text-1);
  --button-default-text: var(--text-inverse);
  --button-default-hover: #d9d8d2;
  --button-default-accent-text: #14121f;

  --loader-blue: #1CB8F5;
  --loader-red: #E9425E;
  --loader-purple: #7951D6;

  --left-glow-secondary:    #17b2ff;   /* primary electric blue, from the emblem's left/blue facets */
  --left-glow-primary:  #4b6bff;   /* blue-leaning transition tone, replaces violet */
  --right-glow-primary:    #ff2f52;   /* neon red, from the emblem's right/red facets */
  --right-glow-secondary:    #22e6ff;   /* bright cyan highlight */
  --accent:  #3d5aff;

  --accent:        #22b2ff;      /* representative solid, for small dots/carets — leads with blue so it reads distinctly from the danger/error red below */
  --accent-dim:    #1478ad;
  --accent-wash:   rgba(34,178,255,.1);
  --accent-line:   rgba(34,178,255,.35);

  --accent-gradient: linear-gradient(115deg, var(--left-glow-secondary) 0%, var(--left-glow-primary) 32%, var(--right-glow-primary) 64%, var(--right-glow-secondary) 100%);
  --accent-gradient-size: 260%;

  /* ---- signal colors -----------------------------------------------------*/
  --success:       #7be3ae;
  --success-wash:  rgba(123,227,174,.1);
  --danger:        #ff8a5b;   /* shifted to orange-red rather than pink-red, so error states stay visually distinct from the brand's own neon red */
  --danger-wash:   rgba(255,138,91,.1);
}

[data-theme="Holographic dark"] {
  /* semantic button roles */
  --logo-mark: url('/assets/img/logo-mark/holographic-dark.png');

  --button-chat-bg: #b9aaff;
  --button-chat-text: #14121f;
  --button-chat-hover: #c4b5fd;
  --button-chat-border: transparent;
  --button-chat-hover-border: transparent;

  --button-chat-preference-bg: #171522;
  --button-chat-preference-text: #f4f2ff;
  --button-chat-preference-hover: #211d30;
  --button-chat-preference-border: var(--line);
  --button-chat-preference-hover-border: var(--line-strong);

  --button-sidebar-bg: #171522;
  --button-sidebar-text: #c8c2d9;
  --button-sidebar-hover: #211d30;
  --button-sidebar-hover-text: #f4f2ff;
  --button-sidebar-border: var(--line);
  --button-sidebar-hover-border: var(--line-strong);

  --button-topbar-bg: #111018;
  --button-topbar-text: #c8c2d9;
  --button-topbar-hover: #1c1926;
  --button-topbar-hover-text: #f4f2ff;
  --button-topbar-border: var(--line);
  --button-topbar-hover-border: var(--line-strong);

  --button-settings-bg: #171522;
  --button-settings-text: #f4f2ff;
  --button-settings-hover: #211d30;
  --button-settings-hover-text: #f4f2ff;
  --button-settings-border: var(--line);
  --button-settings-hover-border: var(--line-strong);


  --dashboard-bg: #06070a;
  --dashboard-glow-1: var(--left-glow-primary);
  --dashboard-glow-2: var(--left-glow-secondary);
  --dashboard-glow-3: var(--right-glow-primary);
  --dashboard-glow-4: var(--right-glow-secondary);

  --button-default-bg: var(--text-1);
  --button-default-text: var(--text-inverse);
  --button-default-hover: #d9d8d2;
  --button-default-accent-text: #14121f;

  --loader-blue: #7ED3FC;
  --loader-red: #F5B8DA;
  --loader-purple: #AB9FDD;

  --left-glow-secondary:    #7dd3fc;
  --left-glow-primary:  #c4b5fd;
  --right-glow-primary:    #f5b8da;
  --right-glow-secondary:    #67e8f9;
  --accent:  #a5b4fc;

  --accent:        #b9aaff;      /* representative solid, for small dots/carets */
  --accent-dim:    #786fb0;
  --accent-wash:   rgba(185,170,255,.1);
  --accent-line:   rgba(185,170,255,.35);

  --accent-gradient: linear-gradient(115deg, var(--left-glow-secondary) 0%, var(--left-glow-primary) 32%, var(--right-glow-primary) 64%, var(--right-glow-secondary) 100%);
  --accent-gradient-size: 260%;

  /* ---- signal colors -----------------------------------------------------*/
  --success:       #7be3ae;
  --success-wash:  rgba(123,227,174,.1);
  --danger:        #f2879a;
  --danger-wash:   rgba(242,135,154,.1);
}

[data-theme="Greyscale"]{
  /* semantic button roles */
  --logo-mark: url('/assets/img/logo-mark/greyscale.png');

  --button-chat-bg: #d6d6db;
  --button-chat-text: #0a0a0a;
  --button-chat-hover: #eeeeF2;
  --button-chat-border: transparent;
  --button-chat-hover-border: transparent;

  --button-chat-preference-bg: #181818;
  --button-chat-preference-text: #eeeeee;
  --button-chat-preference-hover: #262626;
  --button-chat-preference-border: var(--line);
  --button-chat-preference-hover-border: var(--line-strong);

  --button-sidebar-bg: #181818;
  --button-sidebar-text: #bcbcbc;
  --button-sidebar-hover: #262626;
  --button-sidebar-hover-text: #ffffff;
  --button-sidebar-border: var(--line);
  --button-sidebar-hover-border: var(--line-strong);

  --button-topbar-bg: #111111;
  --button-topbar-text: #bcbcbc;
  --button-topbar-hover: #202020;
  --button-topbar-hover-text: #ffffff;
  --button-topbar-border: var(--line);
  --button-topbar-hover-border: var(--line-strong);

  --button-settings-bg: #181818;
  --button-settings-text: #eeeeee;
  --button-settings-hover: #262626;
  --button-settings-hover-text: #eeeeee;
  --button-settings-border: var(--line);
  --button-settings-hover-border: var(--line-strong);


  --dashboard-bg: #06070a;
  --dashboard-glow-1: var(--left-glow-primary);
  --dashboard-glow-2: var(--left-glow-secondary);
  --dashboard-glow-3: var(--right-glow-primary);
  --dashboard-glow-4: var(--right-glow-secondary);

  --button-default-bg: var(--text-1);
  --button-default-text: var(--text-inverse);
  --button-default-hover: #f0f0f0;
  --button-default-accent-text: #0a0a0a;

  --loader-blue: #CFCFD5;
  --loader-red: #E8E7EC;
  --loader-purple: #87878F;

  --left-glow-secondary:    #cfcfd6;
  --left-glow-primary:  #9a9aa3;
  --right-glow-primary:    #e8e8ec;
  --right-glow-secondary:    #b5b5bd;
  --accent:  #7d7d86;

  --accent:       #d6d6db;
  --accent-dim:   #8b8b93;
  --accent-wash:  rgba(255,255,255,.08);
  --accent-line:  rgba(255,255,255,.28);
  --line-accent:  rgba(255,255,255,.3);

  --accent-gradient: linear-gradient(115deg, #e8e8ec 0%, #b5b5bd 32%, #8b8b93 64%, #d6d6db 100%);

  /* NOTE: success/danger are both near-white greys here, distinguished only
     by brightness rather than hue — worth deciding whether every theme
     should be allowed to override these, or whether they stay color-coded
     (green/red) regardless of theme so status is always readable at a glance. */
  --success:      #eaeaea;
  --success-wash: rgba(255,255,255,.06);
  --danger:       #f5f5f5;
  --danger-wash:  rgba(255,255,255,.12);
}


[data-theme="Hacker-Terminal"] {
  /* semantic button roles */
  --logo-mark: url('/assets/img/logo-mark/hacker-terminal.png');

  /* loading animation: outlines instead of fills */
  --loader-blue: transparent;
  --loader-red: transparent;
  --loader-purple: transparent;
  --loader-outline: #01FC4B;
  --loader-blend: normal;

  --button-chat-bg: #00ff41;
  --button-chat-text: #001a08;
  --button-chat-hover: #39ff14;
  --button-chat-border: transparent;
  --button-chat-hover-border: transparent;

  --button-chat-preference-bg: #07140b;
  --button-chat-preference-text: #00ff41;
  --button-chat-preference-hover: #0b2112;
  --button-chat-preference-border: var(--line);
  --button-chat-preference-hover-border: var(--line-strong);

  --button-sidebar-bg: #07140b;
  --button-sidebar-text: #00cc33;
  --button-sidebar-hover: #0b2112;
  --button-sidebar-hover-text: #00ff41;
  --button-sidebar-border: var(--line);
  --button-sidebar-hover-border: var(--line-strong);

  --button-topbar-bg: #050b07;
  --button-topbar-text: #00cc33;
  --button-topbar-hover: #0a170d;
  --button-topbar-hover-text: #00ff41;
  --button-topbar-border: var(--line);
  --button-topbar-hover-border: var(--line-strong);

  --button-settings-bg: #07140b;
  --button-settings-text: #00ff41;
  --button-settings-hover: #0b2112;
  --button-settings-hover-text: #00ff41;
  --button-settings-border: var(--line);
  --button-settings-hover-border: var(--line-strong);


  --dashboard-bg: #06070a;
  --dashboard-glow-1: #003d15;
  --dashboard-glow-2: #00250d;
  --dashboard-glow-3: #006b20;
  --dashboard-glow-4: #003b12;

  --button-default-bg: #00ff41;
  --button-default-text: #001a08;
  --button-default-hover: #39ff14;
  --button-default-accent-text: #001a08;

  --loader-blue: #00ff41;
  --loader-red: #00ff41;
  --loader-purple: #00ff41;

  --left-glow-secondary:    #06070a;   /* primary electric blue, from the emblem's left/blue facets */
  --left-glow-primary:  #090c0a;   /* blue-leaning transition tone, replaces violet */
  --right-glow-primary:    #06070a;  /* neon red, from the emblem's right/red facets */
  --right-glow-secondary:    #06070a;   /* bright cyan highlight */
  --accent:  #0de631;

  --font: "Consolas", monospace;
  --text-1: #00ff41;  /* primary/main text */
  --text-2: #00cc33;  /* secondary text */
  --text-3: #008f24;  /* muted/subtle text */
  --text-inverse:  #f3f3f3;

  --accent:        #22ff3f;      /* representative solid, for small dots/carets — leads with blue so it reads distinctly from the danger/error red below */
  --accent-dim:    #14ad21;
  --accent-wash:   rgba(30, 255, 0, 0.493);
  --accent-line:   rgba(4, 255, 46, 0.596);

  --accent-gradient: linear-gradient(115deg, var(--left-glow-secondary) 0%, var(--left-glow-primary) 32%, var(--right-glow-primary) 64%, var(--right-glow-secondary) 100%);
  --accent-gradient-size: 260%;

  /* ---- signal colors -----------------------------------------------------*/
  --success:       #7be3ae;
  --success-wash:  rgba(123,227,174,.1);
  --danger:        #ff8a5b;   /* shifted to orange-red rather than pink-red, so error states stay visually distinct from the brand's own neon red */
  --danger-wash:   rgba(255,138,91,.1);
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                    */
/* ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ color-scheme: dark; -webkit-text-size-adjust: 100%; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  position: relative;
  isolation: isolate;
}
h1,h2,h3,h4,p,figure{ margin: 0; }
ul{ margin: 0; padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; color: inherit; }
input, textarea, select{ font-family: inherit; color: inherit; }
img,svg{ display: block; max-width: 100%; }

::selection{ background: var(--accent-wash); color: var(--text-1); }

:focus-visible{
  outline: 2px solid var(--left-glow-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

*{ scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar{ width: 8px; height: 8px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.26); }

/* ---------------------------------------------------------------------- */
/* Ambient holographic aurora — calm, slow-drifting background            */
/* Pure background layer: no markup needed on any page.                    */
/* ---------------------------------------------------------------------- */
body::before, body::after{
  content: "";
  position: fixed;
  z-index: -2;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
  will-change: transform;
}
body::before{
  top: -18%;
  left: -12%;
  width: 60vw;
  height: 60vw;
  max-width: 780px;
  max-height: 780px;
  background: radial-gradient(circle at 30% 30%, var(--left-glow-primary), transparent 68%),
              radial-gradient(circle at 70% 70%, var(--left-glow-secondary), transparent 70%);
  animation: aurora-drift-a 34s ease-in-out infinite alternate;
}
body::after{
  bottom: -22%;
  right: -14%;
  width: 55vw;
  height: 55vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle at 40% 40%, var(--right-glow-primary), transparent 66%),
              radial-gradient(circle at 65% 60%, var(--right-glow-secondary), transparent 72%);
  animation: aurora-drift-b 40s ease-in-out infinite alternate;
}
@keyframes aurora-drift-a{
  0%{   transform: translate(0, 0) scale(1); }
  50%{  transform: translate(4vw, 3vw) scale(1.08); }
  100%{ transform: translate(-2vw, 5vw) scale(.98); }
}
@keyframes aurora-drift-b{
  0%{   transform: translate(0, 0) scale(1); }
  50%{  transform: translate(-3vw, -4vw) scale(1.06); }
  100%{ transform: translate(3vw, -2vw) scale(.97); }
}
.atmosphere{ display: none; } /* superseded by body::before/::after */

/* ---------------------------------------------------------------------- */
/* Typography scale                                                         */
/* ---------------------------------------------------------------------- */
.display{
  font-size: clamp(2.6rem, 5vw + 1rem, 4.6rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  font-weight: 620;
  color: var(--text-1);
}
.h1{ font-size: 2rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 620; }
.h2{ font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.014em; font-weight: 600; }
.h3{ font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.008em; font-weight: 600; }
.eyebrow{ font-size: .78rem; color: var(--text-2); font-weight: 500; letter-spacing: .01em; }
.lede{ font-size: 1.05rem; color: var(--text-2); line-height: 1.65; }
.small{ font-size: .84rem; color: var(--text-2); }
.tiny{ font-size: .74rem; color: var(--text-3); }

/* Holographic gradient text — used sparingly, on the brand moment only */
.holo-text{
  background: var(--accent-gradient);
  background-size: var(--accent-gradient-size) 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holo-shift 14s ease-in-out infinite alternate;
}
@keyframes holo-shift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}

/* ---------------------------------------------------------------------- */
/* Layout                                                                   */
/* ---------------------------------------------------------------------- */
.shell{ max-width: var(--shell-max); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px){ .shell{ padding: 0 18px; } }


/* ---------------------------------------------------------------------- */
/* Shared desktop application sidebar                                     */
/* ---------------------------------------------------------------------- */
.shared-sidebar,
.sidebar.shared-sidebar{
  position: fixed;
  inset: 0 auto 0 0;
  width: 240px;
  box-sizing: border-box;
  z-index: 70;
  background: rgba(10,9,16,.55);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
}

.shared-sidebar .sidebar-brand{
  display:flex; align-items:center; gap:9px;
  padding:6px 6px 18px;
  font-weight:650; font-size:.92rem; letter-spacing:-.01em;
}
.shared-sidebar .new-chat-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:38px; margin-bottom:18px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--button-sidebar-bg);
  color:var(--button-sidebar-text);
  font-size:.84rem; font-weight:550; cursor:pointer;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.shared-sidebar .new-chat-btn:hover{
  border-color:var(--button-sidebar-hover-border);
  background:var(--button-sidebar-hover);
}
.shared-sidebar .new-chat-btn svg{width:14px;height:14px;}
.shared-sidebar .sidebar-nav{
  display:flex; flex-direction:column; gap:2px; margin-bottom:auto;
}
.shared-sidebar .sidebar-link{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--radius-sm);
  font-size:.85rem; color:var(--button-sidebar-text);
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.shared-sidebar .sidebar-link svg{width:16px;height:16px;flex-shrink:0;}
.shared-sidebar .sidebar-link:hover,
.shared-sidebar .sidebar-link.active{
  background:var(--button-sidebar-hover);
  color:var(--button-sidebar-hover-text);
}
.shared-sidebar .sidebar-foot{
  border-top:1px solid var(--line);
  padding-top:12px; margin-top:12px;
}
.shared-sidebar .sidebar-account{
  display:flex; align-items:center; gap:9px;
  padding:8px; border-radius:var(--radius-sm);
  cursor:pointer; transition:background var(--fast) var(--ease);
}
.shared-sidebar .sidebar-account:hover{background:var(--surface-2);}
.shared-sidebar .sidebar-account .account-name{font-size:.82rem;max-width:130px;}
.shared-sidebar .sidebar-logout{
  width:100%; margin-top:6px;
  display:flex; align-items:center; gap:9px;
  padding:8px; border-radius:var(--radius-sm);
  font-size:.82rem; color:var(--text-2);
  background:transparent; border:none; cursor:pointer;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.shared-sidebar .sidebar-logout:hover{background:var(--danger-wash);color:var(--danger);}
.shared-sidebar .sidebar-logout svg{width:15px;height:15px;}

.shared-app-main{
  margin-left:240px;
  min-width:0;
}

/* Desktop has no application topbar. It exists only as the mobile menu shell. */
@media (min-width:761px){
  .appnav{display:none !important;}
}

/* ---------------------------------------------------------------------- */
/* Nav — persistent app chrome, glass                                       */
/* ---------------------------------------------------------------------- */
.appnav{
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--dashboard-bg);
  backdrop-filter: blur(var(--blur-glass)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.appnav-row{ display: flex; align-items: center; gap: 28px; height: 62px; }
.brand{
  display: flex; align-items: center; gap: 10px;
  font-weight: 650; font-size: 1.0rem; letter-spacing: -0.01em;
  color: var(--text-1); flex-shrink: 0;
}
.brand-mark{
  width: 26px; height: 26px;
  background: var(--logo-mark) center / contain no-repeat;
  border: none;
  position: relative;
  flex-shrink: 0;
}
@keyframes holo-breathe{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(196,181,253,0); }
  50%{ box-shadow: 0 0 14px 2px rgba(196,181,253,.35); }
}
.appnav-links{ display: flex; align-items: center; gap: 4px; flex: 1; }
.appnav-link{
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  color: var(--button-topbar-text);
  background: var(--button-topbar-bg);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.appnav-link:hover{ color: var(--button-topbar-hover-text); background: var(--button-topbar-hover); }
.appnav-link.active{ color: var(--button-topbar-hover-text); background: var(--button-topbar-hover); }
.appnav-right{ display: flex; align-items: center; gap: 10px; margin-left: auto; }

.account-chip{
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--button-topbar-border);
  background: var(--button-topbar-bg);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.account-chip:hover{ border-color: var(--button-topbar-hover-border); background: var(--button-topbar-hover); }
.account-avatar{
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-gradient);
  background-size: var(--accent-gradient-size) 100%;
  animation: holo-shift 12s ease-in-out infinite alternate;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; color: #14121f;
  flex-shrink: 0;
}
.account-name{ font-size: .82rem; color: var(--text-1); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-toggle{
  display: none;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--button-topbar-border);
  background: var(--button-topbar-bg);
  color: var(--button-topbar-text);
  align-items: center; justify-content: center;
}
.nav-toggle:hover{ background: var(--button-topbar-hover); color: var(--button-topbar-hover-text); border-color: var(--button-topbar-hover-border); }
.nav-toggle svg{ width: 16px; height: 16px; }

/* ---------------------------------------------------------------------- */
/* Semantic button roles                                                    */
/* ---------------------------------------------------------------------- */

/* Chat send/action */
.chat-button{
  background: var(--button-chat-bg);
  color: var(--button-chat-text);
  border-color: var(--button-chat-border);
}
.chat-button:hover:not(:disabled){
  background: var(--button-chat-hover);
  border-color: var(--button-chat-hover-border);
}

/* Chat model/temperature controls */
.chat-preference-button{
  background: var(--button-chat-preference-bg);
  color: var(--button-chat-preference-text);
  border-color: var(--button-chat-preference-border);
}
.chat-preference-button:hover{
  background: var(--button-chat-preference-hover);
  border-color: var(--button-chat-preference-hover-border);
}

/* Sidebar */
.sidebar-button{
  background: var(--button-sidebar-bg);
  color: var(--button-sidebar-text);
  border-color: var(--button-sidebar-border);
}
.sidebar-button:hover,
.sidebar-button.active{
  background: var(--button-sidebar-hover);
  color: var(--button-sidebar-hover-text);
  border-color: var(--button-sidebar-hover-border);
}

/* Topbar */
.topbar-button{
  background: var(--button-topbar-bg);
  color: var(--button-topbar-text);
  border-color: var(--button-topbar-border);
}
.topbar-button:hover{
  background: var(--button-topbar-hover);
  color: var(--button-topbar-hover-text);
  border-color: var(--button-topbar-hover-border);
}

/* Settings */
.settings-button{
  background: var(--button-settings-bg);
  color: var(--button-settings-text);
  border-color: var(--button-settings-border);
}
.settings-button:hover:not(:disabled){
  background: var(--button-settings-hover);
  color: var(--button-settings-hover-text);
  border-color: var(--button-settings-hover-border);
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: .875rem; font-weight: 560;
  cursor: pointer;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease), opacity var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: scale(.98); }
.btn:disabled{ opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary{ background: var(--button-default-bg); color: var(--button-default-text); }
.btn-primary:hover:not(:disabled){ background: var(--button-default-hover); }

.btn-accent{
  background: var(--button-default-bg);
  background-size: var(--accent-gradient-size) 100%;
  background-position: 0% 50%;
  color: var(--button-default-accent-text);
  animation: holo-shift 9s ease-in-out infinite alternate;
}
.btn-accent:hover:not(:disabled){ box-shadow: 0 6px 24px var(--accent-line); transform: translateY(-1px); }

.btn-ghost{
  background: var(--surface-1);
  border-color: var(--line);
  color: var(--text-1);
}
.btn-ghost:hover:not(:disabled){ background: var(--surface-2); border-color: var(--line-strong); }

.btn-danger-ghost{
  background: transparent;
  border-color: rgba(242,135,154,.28);
  color: var(--danger);
}
.btn-danger-ghost:hover:not(:disabled){ background: var(--danger-wash); border-color: rgba(242,135,154,.45); }

.btn-sm{ height: 34px; padding: 0 13px; font-size: .8rem; border-radius: var(--radius-sm); }
.btn-icon{ width: 40px; padding: 0; flex-shrink: 0; }
.btn-block{ width: 100%; }

/* ---------------------------------------------------------------------- */
/* Forms                                                                    */
/* ---------------------------------------------------------------------- */
.field{ display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label{ font-size: .8rem; color: var(--text-2); font-weight: 500; }
.input, .textarea, .select{
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: .9rem;
  color: var(--text-1);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.input::placeholder, .textarea::placeholder{ color: var(--text-3); }
.input:hover, .textarea:hover{ border-color: var(--line-strong); }
.input:focus, .textarea:focus, .select:focus{
  outline: none;
  border-color: var(--line-accent);
  background: var(--surface-3);
  box-shadow: 0 0 0 3px var(--accent-wash), 0 0 20px var(--accent-line);
}
.textarea{ resize: vertical; min-height: 56px; line-height: 1.5; }

.field-error .input, .field-error .textarea{ border-color: rgba(242,135,154,.5); }
.field-hint{ font-size: .76rem; color: var(--text-3); }
.field-hint.is-error{ color: var(--danger); }
.field-hint.is-ok{ color: var(--success); }

.checkbox-row{ display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-2); }

/* ---------------------------------------------------------------------- */
/* Surfaces / panels — glass                                                */
/* ---------------------------------------------------------------------- */
.panel{
  background: var(--surface-1);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.panel-tight{ padding: 18px; }
.panel-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }

.hr{ border: none; border-top: 1px solid var(--line); margin: 20px 0; }
.hr-tight{ border: none; border-top: 1px solid var(--line); margin: 12px 0; }

/* status dot — gentle breathing pulse, calming */
.status-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-wash);
  flex-shrink: 0;
  animation: dot-breathe 3.2s ease-in-out infinite;
}
@keyframes dot-breathe{ 0%,100%{ opacity: 1; } 50%{ opacity: .55; } }
.status-dot.warn{ background: #e3c17f; box-shadow: 0 0 0 3px rgba(227,193,127,.14); }
.status-dot.off{ background: var(--text-3); box-shadow: none; animation: none; }
.status-row{ display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.status-row:last-child{ border-bottom: none; }
.status-label{ display: flex; align-items: center; gap: 9px; color: var(--text-1); }
.status-value{ color: var(--text-2); font-variant-numeric: tabular-nums; }

/* badges */
.badge{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 560;
  border: 1px solid var(--line);
  color: var(--text-2);
  background: var(--surface-2);
}
.badge-accent{ color: var(--text-1); background: var(--accent-wash); border-color: var(--line-accent); }
.badge-muted{ color: var(--text-3); }

/* toast */
.toast{
  position: fixed; bottom: 22px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(20,18,31,.85);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong);
  color: var(--text-1);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: .85rem;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast.is-error{ border-color: rgba(242,135,154,.4); }
.toast.is-success{ border-color: rgba(123,227,174,.35); }

/* skip link */
.skip-link{
  position: absolute; left: -999px; top: 0;
  background: var(--text-1); color: var(--text-inverse);
  padding: 10px 16px; border-radius: var(--radius-sm); z-index: 999;
}
.skip-link:focus{ left: 16px; top: 16px; }


/* ---------------------------------------------------------------------- */
/* Responsive application chrome + small-device layout                     */
/* ---------------------------------------------------------------------- */
.mobile-nav-account{ display: none; }
.shared-mobile-nav-brand,
.shared-mobile-new-chat,
.shared-mobile-nav-account{ display: none; }
.shared-mobile-nav-links{ display: contents; }
.shared-mobile-nav-icon{ display: none; }

@media (max-width: 760px){
  .appnav-row{
    height: 56px;
    gap: 10px;
    position: relative;
  }

  /* The menu control moves to the far left on small screens. */
  .nav-toggle{
    display: flex;
    order: -1;
    flex: 0 0 auto;
  }

  .appnav-links{
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 12px;
    right: 12px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    z-index: 80;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--dashboard-bg);
    box-shadow: 0 18px 45px rgba(0,0,0,.48);
    backdrop-filter: blur(var(--blur-glass)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(150%);
  }

  .appnav-links.open{ display: flex; animation: fade-up var(--fast) var(--ease) both; }

  .shared-mobile-nav-brand{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 18px;
    font-weight: 650;
    font-size: .92rem;
    letter-spacing: -0.01em;
    color: var(--text-1);
  }
  .shared-mobile-nav-brand .brand-mark{ width: 26px; height: 26px; }

  .shared-mobile-new-chat{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--button-sidebar-border);
    background: var(--button-sidebar-bg);
    color: var(--button-sidebar-text);
    font-size: .86rem;
    font-weight: 550;
  }
  .shared-mobile-new-chat:hover{
    border-color: var(--button-sidebar-hover-border);
    background: var(--button-sidebar-hover);
    color: var(--button-sidebar-hover-text);
  }
  .shared-mobile-new-chat svg{ width: 15px; height: 15px; flex-shrink: 0; }

  .shared-mobile-nav-links{
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: auto;
  }
  .shared-mobile-nav-link{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    color: var(--button-sidebar-text);
    background: var(--button-sidebar-bg);
    font-size: .86rem;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
  }
  .shared-mobile-nav-link:hover,
  .shared-mobile-nav-link.active{
    background: var(--button-sidebar-hover);
    color: var(--button-sidebar-hover-text);
  }
  .shared-mobile-nav-icon{ display: block; width: 20px; height: 20px; flex-shrink: 0; }

  .shared-mobile-nav-account{
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .shared-mobile-nav-account-link,
  .shared-mobile-nav-logout{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
  }
  .shared-mobile-nav-account-link{
    color: var(--button-sidebar-text);
    background: transparent;
  }
  .shared-mobile-nav-account-link:hover{ background: var(--surface-2); }
  .shared-mobile-nav-account-link .account-name{
    max-width: none;
    min-width: 0;
  }
  .shared-mobile-nav-account-link .account-avatar{ width: 28px; height: 28px; }
  .shared-mobile-nav-logout{
    border: none;
    background: transparent;
    color: var(--button-sidebar-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .shared-mobile-nav-logout:hover{
    background: var(--button-sidebar-hover);
    color: var(--button-sidebar-hover-text);
  }
  .shared-mobile-nav-logout svg{ width: 18px; height: 18px; flex-shrink: 0; }

  .appnav-link{
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    font-size: .86rem;
  }

  .mobile-nav-account{
    display: none;
  }

  .appnav-right{ display: none; }

  .app-main{ padding-top: 28px; }
  .page-head{ margin-bottom: 24px; }
  .h1{ font-size: 1.7rem; }
  .h2{ font-size: 1.22rem; }
  .lede{ font-size: .96rem; line-height: 1.55; }

  .panel{ padding: 18px; }
  .panel-header{ align-items: flex-start; }
  .btn{ min-height: 40px; }
  .input{ max-width: 100%; }
}

@media (max-width: 430px){
  .shell{ padding-left: 14px; padding-right: 14px; }
  .appnav-links{ left: 12px; right: 12px; }
  .brand{ font-size: .92rem; }
  .brand-mark{ width: 24px; height: 24px; }
  .app-main{ padding-bottom: 56px; }

  .panel{ border-radius: var(--radius-md); padding: 15px; }
  .panel-header{ gap: 8px; flex-wrap: wrap; }
  .btn{ padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 360px){
  .appnav-row{ gap: 7px; }
  .nav-toggle{ width: 32px; height: 32px; }
  .brand{ font-size: .86rem; gap: 7px; }
  .brand-mark{ width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  body::before, body::after{ animation: none !important; opacity: .35; }
}

@keyframes fade-up{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes fade-in{ from{ opacity: 0; } to{ opacity: 1; } }
.fade-up{ animation: fade-up var(--slow) var(--ease) both; }
.fade-in{ animation: fade-in var(--slow) var(--ease) both; }


/* ---------------------------------------------------------------------- */
/* Final semantic role overrides                                            */
/* ---------------------------------------------------------------------- */
.chat-button{
  background: var(--button-chat-bg) !important;
  color: var(--button-chat-text) !important;
  border-color: var(--button-chat-border) !important;
}
.chat-button:hover:not(:disabled){
  background: var(--button-chat-hover) !important;
  border-color: var(--button-chat-hover-border) !important;
}

.chat-preference-button{
  background: var(--button-chat-preference-bg) !important;
  color: var(--button-chat-preference-text) !important;
  border-color: var(--button-chat-preference-border) !important;
}
.chat-preference-button:hover{
  background: var(--button-chat-preference-hover) !important;
  border-color: var(--button-chat-preference-hover-border) !important;
}

.sidebar-button{
  background: var(--button-sidebar-bg);
  color: var(--button-sidebar-text);
  border-color: var(--button-sidebar-border);
}
.sidebar-button:hover,
.sidebar-button.active{
  background: var(--button-sidebar-hover);
  color: var(--button-sidebar-hover-text);
  border-color: var(--button-sidebar-hover-border);
}

.topbar-button{
  background: var(--button-topbar-bg) !important;
  color: var(--button-topbar-text) !important;
  border-color: var(--button-topbar-border) !important;
}
.topbar-button:hover{
  background: var(--button-topbar-hover) !important;
  color: var(--button-topbar-hover-text) !important;
  border-color: var(--button-topbar-hover-border) !important;
}

.settings-shell .settings-button{
  background: var(--button-settings-bg) !important;
  color: var(--button-settings-text) !important;
  border-color: var(--button-settings-border) !important;
}
.settings-shell .settings-button:hover:not(:disabled){
  background: var(--button-settings-hover) !important;
  color: var(--button-settings-hover-text) !important;
  border-color: var(--button-settings-hover-border) !important;
}

/* Prevent mobile browsers from auto-zooming focused text-entry controls. */
@media (max-width: 860px){
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  textarea,
  select{
    font-size: 16px;
  }
}


@media (max-width:760px){
  .shared-sidebar,
  .sidebar.shared-sidebar{
    display:none;
  }
  .shared-sidebar.open,
  .sidebar.shared-sidebar.open{
    display:flex;
    position:fixed;
    top:62px;
    left:12px;
    right:12px;
    bottom:auto;
    width:auto;
    max-height:calc(100vh - 76px);
    overflow-y:auto;
    z-index:80;
    padding:12px;
    border:1px solid var(--line-strong);
    border-radius:var(--radius-lg);
    box-shadow:0 18px 45px rgba(0,0,0,.48);
  }
  .shared-app-main{
    margin-left:0;
  }
}