/* TTAI web navbar — the mobile bottom tab bar ported to a top navbar.
   Spec: website-export-navbar/NOTES.md. Tokens are kept in sync with
   public/css/clean/collections/ttaiLearning.css so the bar and the Learning
   page read as one continuous dark surface.

   The nav keeps the `main-nav` class so the existing side-menu / notification
   toggles (nav.js, main-nav.js) keep working unchanged; everything visual is
   overridden here under `.main-nav.ttai-navbar`. */

.main-nav.ttai-navbar {
  --ttai-bg: #0A0A0C;
  --ttai-border: #1e1e22;
  --ttai-pink: #e91e63;
  --ttai-pink-bright: #F80353;
  --ttai-inactive: #5a5a5e;

  /* Icon tint filters (PNGs are dark on transparent — recolour them). */
  --ttai-icon-grey: invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg);
  --ttai-icon-pink: invert(18%) sepia(97%) saturate(5000%) hue-rotate(322deg) brightness(95%);

  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 60px;
  padding: 0 20px;
  background: var(--ttai-bg);
  border-bottom: 1px solid var(--ttai-border);
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Logo */
.main-nav.ttai-navbar > a.ttai-nav-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 12px;
}
.main-nav.ttai-navbar > a.ttai-nav-logo img.logo {
  height: 34px;
  width: auto;
}

/* Tab row */
.main-nav.ttai-navbar .ttai-nav-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  overflow-x: auto;
}

.main-nav.ttai-navbar .ttai-nav-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 60px;
  padding: 0 14px;
  text-decoration: none;
  color: var(--ttai-inactive);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.main-nav.ttai-navbar .ttai-nav-tab .ttai-nav-icon {
  width: 20px;
  height: 20px;
  /* Inline SVGs use stroke="currentColor", so they follow the tab's text
     color: grey by default, ttai pink on hover/active (see rules below). */
  color: var(--ttai-inactive);
  transition: color 0.15s;
}
.main-nav.ttai-navbar .ttai-nav-tab:hover,
.main-nav.ttai-navbar .ttai-nav-tab.active {
  color: var(--ttai-pink);
  border-bottom-color: var(--ttai-pink);
}
.main-nav.ttai-navbar .ttai-nav-tab:hover .ttai-nav-icon,
.main-nav.ttai-navbar .ttai-nav-tab.active .ttai-nav-icon {
  color: var(--ttai-pink);
}

/* Right cluster — notifications + side-menu (kept from the general nav) */
.main-nav.ttai-navbar .right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}
.main-nav.ttai-navbar .right button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
}
.main-nav.ttai-navbar .right button:hover {
  background: rgba(233, 30, 99, 0.08);
}
/* Force the bell / menu icons to TTAI pink, overriding the shared
   `nav.main-nav span.material-icons-round { color: var(--theme-color) }`
   rule (main-nav.css:26) which would otherwise tint them the user's colour. */
.main-nav.ttai-navbar .right button .material-icons-round {
  font-size: 24px;
  color: var(--ttai-pink);
  transition: color 0.15s;
}
.main-nav.ttai-navbar .right button:hover .material-icons-round {
  color: var(--ttai-pink-bright);
}
.main-nav.ttai-navbar .right .notif-no {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  background: var(--ttai-pink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
}

/* Groups / teams dropdown, when present, inherits the button styling above. */
.main-nav.ttai-navbar .user-dropdown-ct { position: relative; }

/* ----------------------------------------------------------------------------
   XP + Streak pills (web port of the mobile XPStreakGroup). Sit in the right
   cluster, left of the bell. Each pill mirrors the RN pill: rounded chip,
   subtle dark surface, small lucide icon + value. The streak icon is purple
   (#7c4dff), the XP zap is TTAI pink — matching the colours hard-coded in the
   RN Streak/XPScore components.
---------------------------------------------------------------------------- */
.main-nav.ttai-navbar .ttai-xp-streak {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
}
/* Scoped under .ttai-xp-streak so these win over the round-icon-button rule
   `.main-nav.ttai-navbar .right button` above (which would otherwise force the
   pills to 40px circles). width/border-radius/background are reset explicitly. */
.main-nav.ttai-navbar .ttai-xp-streak .ttai-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 30px;
  padding: 0 12px;
  background: #131316;
  border: 1px solid #2a2a2e;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: border-color 0.15s, background 0.15s;
}
.main-nav.ttai-navbar .ttai-xp-streak .ttai-pill:hover { border-color: #3a3a40; background: #17171b; }
.main-nav.ttai-navbar .ttai-xp-streak .ttai-pill .ttai-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.main-nav.ttai-navbar .ttai-xp-streak .ttai-streak-pill .ttai-pill-icon svg { stroke: #7c4dff; }
.main-nav.ttai-navbar .ttai-xp-streak .ttai-xp-pill .ttai-pill-icon svg { stroke: var(--ttai-pink); }
.main-nav.ttai-navbar .ttai-xp-streak .ttai-pill .ttai-pill-value {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.main-nav.ttai-navbar .ttai-xp-streak .ttai-pill .ttai-pill-label {
  color: #979797;
  font-size: 12px;
  font-weight: 500;
}
/* Subtle pop the first time a pill's count animates in. */
.main-nav.ttai-navbar .ttai-xp-streak .ttai-pill.ttai-pill-pop { animation: ttaiPillPop 0.5s ease; }
@keyframes ttaiPillPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ----------------------------------------------------------------------------
   Mobile (≤768px). The bar reverts to its native shape: a compact top bar
   (logo + the right-cluster actions) plus a FIXED BOTTOM TAB BAR carrying the
   primary tabs — exactly the iOS/Android layout this navbar was ported from
   (website-export-navbar/NOTES.md). Desktop (>768px) is left untouched.

   The tab row (`.ttai-nav-tabs`) is the same element used at the top on
   desktop; here it's repositioned to the bottom, so the existing markup, JS
   toggles and active-state logic keep working unchanged.
---------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* --- Top bar: tighten spacing; the tab row leaves the flow (see below) --- */
  .main-nav.ttai-navbar {
    gap: 6px;
    padding: 0 14px;
  }
  /* Let the logo yield first if the row ever gets crowded, so the action
     buttons on the right are never pushed off-screen / clipped. */
  .main-nav.ttai-navbar > a.ttai-nav-logo {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    margin-right: 0;
  }
  .main-nav.ttai-navbar > a.ttai-nav-logo img.logo { height: 30px; }

  /* Right cluster stays in the top bar; tighten it and hide the "AI XP" label. */
  .main-nav.ttai-navbar .right { gap: 4px; min-width: 0; }
  .main-nav.ttai-navbar .ttai-xp-streak { gap: 6px; margin-right: 2px; }
  .main-nav.ttai-navbar .ttai-xp-pill .ttai-pill-label { display: none; }

  /* --- Tab row → fixed bottom tab bar --- */
  .main-nav.ttai-navbar .ttai-nav-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    box-sizing: border-box;
    align-items: stretch;         /* tabs fill the bar height */
    gap: 0;
    height: calc(var(--ttai-bottomnav-h, 60px) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px); /* iOS home-indicator */
    overflow: visible;            /* tabs share the width evenly — no scrolling */
    background: var(--ttai-bg);
    border-top: 1px solid var(--ttai-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
  }

  .main-nav.ttai-navbar .ttai-nav-tab {
    position: relative;
    flex: 1 1 0;                  /* equal-width tabs */
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    height: auto;                 /* stretch to the bar (see align-items above) */
    min-width: 0;
    padding: 6px 2px;
    border-bottom: none;          /* the desktop underline doesn't apply here */
    font-size: 11px;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
  }
  .main-nav.ttai-navbar .ttai-nav-tab .ttai-nav-icon { width: 24px; height: 24px; }

  /* Labels always show on the bottom bar; truncate rather than wrap if narrow. */
  .main-nav.ttai-navbar .ttai-nav-tab span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
  }

  /* Active state: colour + a short rounded indicator at the top of the tab
     (a non-colour cue too). The desktop bottom-underline is suppressed. */
  .main-nav.ttai-navbar .ttai-nav-tab.active,
  .main-nav.ttai-navbar .ttai-nav-tab:hover { border-bottom-color: transparent; }
  .main-nav.ttai-navbar .ttai-nav-tab.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--ttai-pink);
  }
  /* Tactile press feedback (hover is unreliable on touch). */
  .main-nav.ttai-navbar .ttai-nav-tab:active { background: rgba(233, 30, 99, 0.08); }

  /* Lift page content above the fixed bottom bar — but only when the bar is
     actually rendered (logged-in TTAI pages). :has() scopes this precisely so
     guest / nav-less pages don't get an empty gap at the bottom. */
  body.ttai:has(.main-nav.ttai-navbar .ttai-nav-tabs) {
    padding-bottom: calc(var(--ttai-bottomnav-h, 60px) + env(safe-area-inset-bottom, 0px));
  }
}

/* Phones — squeeze the top-bar right cluster a little (smaller logo + tighter
   pills) so the logo, XP/streak pills, theme toggle, bell and menu all fit.
   Tap buttons stay 40px for accessibility; the logo yields first if needed. */
@media (max-width: 480px) {
  .main-nav.ttai-navbar > a.ttai-nav-logo img.logo { height: 27px; }
  .main-nav.ttai-navbar .right { gap: 2px; }
  .main-nav.ttai-navbar .ttai-xp-streak { gap: 5px; }
  .main-nav.ttai-navbar .ttai-xp-streak .ttai-pill { padding: 0 9px; }
}

/* ----------------------------------------------------------------------------
   Light/dark theme toggle (sits in the right cluster, left of the bell).
   A pill track with a moon (left) + sun (right) and a sliding thumb; the thumb
   rests over the active side and lights that icon. Scoped with an extra class
   so it out-specifies the generic round `.right button` rules above (which
   would otherwise force it to a 40px pink circle). Wired by ttaiTheme.js.
---------------------------------------------------------------------------- */
.main-nav.ttai-navbar .right .ttai-theme-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--ttai-border);
  background: #131316;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.main-nav.ttai-navbar .right .ttai-theme-toggle:hover {
  border-color: #3a3a40;
  background: #17171b;
}
.main-nav.ttai-navbar .right .ttai-theme-toggle .ttai-theme-toggle-icon {
  position: absolute;
  top: 0;
  width: 28px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  color: var(--ttai-inactive);
}
.main-nav.ttai-navbar .right .ttai-theme-toggle .ttai-theme-moon { left: 1px; }
.main-nav.ttai-navbar .right .ttai-theme-toggle .ttai-theme-sun { right: 1px; }
.main-nav.ttai-navbar .right .ttai-theme-toggle .ttai-theme-toggle-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}
.main-nav.ttai-navbar .right .ttai-theme-toggle .ttai-theme-toggle-thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--ttai-pink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  z-index: 1;
}
/* Animate only after first paint (ttaiTheme.js adds .ttai-anim-ready) so the
   remembered state shows instantly on load instead of sliding in. */
.main-nav.ttai-navbar .right .ttai-theme-toggle.ttai-anim-ready .ttai-theme-toggle-thumb {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
}
.main-nav.ttai-navbar .right .ttai-theme-toggle.ttai-anim-ready .ttai-theme-toggle-icon {
  transition: color 0.2s ease;
}
/* dark (default) → thumb left over the moon; light → thumb right over the sun */
.main-nav.ttai-navbar .right .ttai-theme-toggle.is-light .ttai-theme-toggle-thumb {
  transform: translateX(27px);
}
.main-nav.ttai-navbar .right .ttai-theme-toggle:not(.is-light) .ttai-theme-moon { color: #fff; }
.main-nav.ttai-navbar .right .ttai-theme-toggle.is-light .ttai-theme-sun { color: #fff; }
.main-nav.ttai-navbar .right .ttai-theme-toggle:focus-visible {
  outline: 2px solid var(--ttai-pink);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   Light theme for the top nav. Applied (via data-theme="light") only on the
   feeds page for now — ttaiTheme.js sets it alongside the feed wrapper, and the
   inline script in design.tpl sets it pre-paint so the bar doesn't flash dark.
   Pink accents are kept; only the dark surface tokens flip. The flyout side-menu
   and notifications panels stay dark for now (themed with other pages later).
---------------------------------------------------------------------------- */
.main-nav.ttai-navbar[data-theme='light'] {
  --ttai-bg: #ffffff;
  --ttai-border: #e5e5ea;
  --ttai-inactive: #6c6c70;
}
/* The brand letter-logo is white-on-transparent; darken it on the light bar. */
.main-nav.ttai-navbar[data-theme='light'] > a.ttai-nav-logo img.logo {
  filter: brightness(0);
}
/* XP / Streak pills */
.main-nav.ttai-navbar[data-theme='light'] .ttai-xp-streak .ttai-pill {
  background: #f2f2f7;
  border-color: #e0e0e5;
}
.main-nav.ttai-navbar[data-theme='light'] .ttai-xp-streak .ttai-pill:hover {
  background: #ececf2;
  border-color: #d1d1d6;
}
.main-nav.ttai-navbar[data-theme='light'] .ttai-xp-streak .ttai-pill .ttai-pill-value { color: #1c1c1e; }
/* Theme toggle track on the light bar (thumb stays pink, lit icon stays white). */
.main-nav.ttai-navbar[data-theme='light'] .right .ttai-theme-toggle { background: #e9e9ef; }
.main-nav.ttai-navbar[data-theme='light'] .right .ttai-theme-toggle:hover { background: #e1e1e9; }

/* ----------------------------------------------------------------------------
   Streak modal (web port of the mobile StreakModal). Appended to <body> by
   ttaiXpStreak.js, so it's scoped globally rather than off .ttai-navbar.
   Accent colours come from --ttai-user-color (the logged-in user's colour),
   set inline on the overlay; falls back to TTAI pink.
---------------------------------------------------------------------------- */
.ttai-streak-modal-overlay {
  --ttai-user-color: #e91e63;
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.2s ease;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.ttai-streak-modal-overlay.ttai-open { opacity: 1; }
/* The modal is appended to <body>, outside .ttai-credentials-page, so it doesn't
   inherit that page's `box-sizing: border-box` reset and can pick up leaked global
   rules (e.g. .ttai-modal-card { width: 100% } in ttaiLearning.css). Force border-box
   across the whole subtree so a 100%-width card can never overflow the modal. */
.ttai-streak-modal-overlay, .ttai-streak-modal-overlay * { box-sizing: border-box; }
.ttai-streak-modal {
  position: relative;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  box-sizing: border-box;
  /* top padding clears the 32px close button (top:14 + 32 = 46) so the hero
     card never sits under it. */
  padding: 50px 28px 28px;
  background: #000;
  border: 2px solid color-mix(in srgb, var(--ttai-user-color) 27%, transparent);
  border-radius: 17px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.2s ease;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
/* WebKit/Blink — slim, unobtrusive scrollbar that doesn't crowd the rounded
   corner. Padded inwards via a transparent border + background-clip. */
.ttai-streak-modal::-webkit-scrollbar { width: 10px; }
.ttai-streak-modal::-webkit-scrollbar-track { background: transparent; }
.ttai-streak-modal::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.ttai-streak-modal::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
  border: 3px solid transparent;
  background-clip: padding-box;
}
.ttai-streak-modal-overlay.ttai-open .ttai-streak-modal { transform: translateY(0) scale(1); }
.ttai-streak-modal .ttai-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 50%;
  color: #808085;
  cursor: pointer;
  transition: background 0.15s;
}
.ttai-streak-modal .ttai-modal-close:hover { background: rgba(255, 255, 255, 0.12); }
.ttai-streak-modal .ttai-modal-content { display: flex; flex-direction: column; gap: 12px; }

.ttai-streak-modal .ttai-modal-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  background: #0a0a0c;
  border: 1px solid color-mix(in srgb, var(--ttai-user-color) 25%, transparent);
  border-radius: 14px;
}
.ttai-streak-modal .ttai-modal-hero-badge {
  padding: 10px;
  margin-bottom: 12px;
  background: var(--ttai-user-color);
  border-radius: 14px;
  font-size: 20px;
  line-height: 1;
}
.ttai-streak-modal .ttai-modal-hero-count {
  font-size: 56px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.ttai-streak-modal .ttai-modal-hero-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #808085;
  text-transform: uppercase;
}

.ttai-streak-modal .ttai-modal-card {
  background: #0a0a0c;
  border: 1px solid #1a1a1e;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ttai-streak-modal .ttai-modal-card.ttai-compact { padding: 14px 16px; }
.ttai-streak-modal .ttai-modal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ttai-streak-modal .ttai-modal-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #808085;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ttai-streak-modal .ttai-modal-card-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--ttai-user-color);
  letter-spacing: 0.6px;
}
.ttai-streak-modal .ttai-modal-card-body { font-size: 13px; color: #9e9ea3; line-height: 1.4; }
.ttai-streak-modal .ttai-modal-card-muted { font-size: 12px; color: #5a5a5e; line-height: 1.5; }

.ttai-streak-modal .ttai-modal-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid;
}
.ttai-streak-modal .ttai-modal-status.ttai-safe {
  background: color-mix(in srgb, var(--ttai-user-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--ttai-user-color) 31%, transparent);
  color: #fff;
}
.ttai-streak-modal .ttai-modal-status.ttai-warning {
  background: rgba(255, 180, 70, 0.15);
  border-color: rgba(255, 180, 70, 0.4);
  color: #ffc057;
}

.ttai-streak-modal .ttai-modal-progress-track {
  height: 6px;
  border-radius: 999px;
  background: #1a1a1e;
  overflow: hidden;
}
.ttai-streak-modal .ttai-modal-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ttai-user-color);
}

.ttai-streak-modal .ttai-modal-calendar {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.ttai-streak-modal .ttai-modal-calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.ttai-streak-modal .ttai-modal-calendar-label {
  font-size: 10px;
  color: #5a5a5e;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.ttai-streak-modal .ttai-modal-calendar-pill {
  width: 100%;
  padding: 8px 0;
  border-radius: 10px;
  text-align: center;
  border: 1px solid;
  font-size: 16px;
  color: #fff;
}
.ttai-streak-modal .ttai-modal-calendar-pill.ttai-active {
  background: color-mix(in srgb, var(--ttai-user-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--ttai-user-color) 27%, transparent);
}
.ttai-streak-modal .ttai-modal-calendar-pill.ttai-inactive {
  background: #0a0a0c;
  border-color: #1a1a1e;
}

/* ----------------------------------------------------------------------------
   Side-menu + notifications panels on TTAI.
   These live in the second nav (main-nav-rwrdrc), so they're scoped off the
   `ttai` body class rather than `.ttai-navbar`. They're already dark; this
   realigns palette + typography to the TTAI tokens and offsets them below the
   60px bar. The font/colour family ('Inter', dark surface, pink accent) matches
   public/css/clean/collections/ttaiLearning.css.
---------------------------------------------------------------------------- */

body.ttai {
  /* Notifications panel positions off this; keep it in sync with the bar height. */
  --nav-height: 60px;
  /* Height of the mobile fixed bottom tab bar (used by the bar + the body
     padding that lifts content above it). Inherits down to .ttai-nav-tabs. */
  --ttai-bottomnav-h: 60px;
}

body.ttai nav .side-menu,
body.ttai nav .notifications-ct {
  background-color: #0A0A0C;
  border-left: 1px solid #1e1e22;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Side menu */
body.ttai nav .side-menu { top: 60px; }
body.ttai nav .side-menu a:link,
body.ttai nav .side-menu a:visited { color: #fff; }
body.ttai .side-menu-items a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  transition: color 0.15s;
}
body.ttai .side-menu-items a:hover { color: #e91e63; }
body.ttai .side-menu-items a.settings-nav-item span { color: #808085; }
body.ttai .side-menu-items a.settings-nav-item:hover span {
  filter: none;
  color: #e91e63;
}
body.ttai .side-menu-items .separator { border-top-color: #1e1e22; }

/* ----------------------------------------------------------------------------
   TTAI side menu items — restyled to mirror the profile settings drawer
   (.tsp-* in css/clean/profile/ttai-settings-panel.css): grouped surface
   sections, 34px icon tiles, label + chevron rows, danger + logout treatments.
   Selectors are scoped under `.side-menu` so they out-specify the generic
   `.side-menu-items a` rules above.
---------------------------------------------------------------------------- */
body.ttai nav .side-menu { width: 320px; padding: 38px 18px 28px; }
body.ttai nav .side-menu .close-side-menu { right: 320px; }
body.ttai .side-menu .side-menu-items { align-items: stretch; }
body.ttai .side-menu .ttai-sm-section,
body.ttai .side-menu .ttai-sm-item,
body.ttai .side-menu .ttai-sm-logout { box-sizing: border-box; }

body.ttai .side-menu .ttai-sm-section {
  background: #111113;
  border: 1px solid #2a2a2e;
  border-radius: 17px;
  overflow: hidden;
  margin: 4px 0 16px;
}

body.ttai .side-menu .ttai-sm-item {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.15s;
}
body.ttai .side-menu .ttai-sm-item:last-child { border-bottom: none; }
body.ttai .side-menu .ttai-sm-item:hover { background: rgba(255, 255, 255, 0.03); color: #fff; }

body.ttai .side-menu .ttai-sm-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex: 0 0 auto;
  color: #9e9ea3;
}
body.ttai .side-menu .ttai-sm-icon svg { width: 18px; height: 18px; }

body.ttai .side-menu .ttai-sm-label {
  flex: 1 1 auto;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
}

body.ttai .side-menu .ttai-sm-chevron { color: #3a3a3e; flex: 0 0 auto; display: flex; }
body.ttai .side-menu .ttai-sm-chevron svg { width: 16px; height: 16px; display: block; }

body.ttai .side-menu .ttai-sm-item.is-danger .ttai-sm-icon { background: rgba(255, 68, 68, 0.1); color: #ff4444; }
body.ttai .side-menu .ttai-sm-item.is-danger .ttai-sm-label { color: #ff4444; }
body.ttai .side-menu .ttai-sm-item.is-danger:hover { background: rgba(255, 68, 68, 0.06); }

body.ttai .side-menu .ttai-sm-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 13px;
  border-radius: 12px;
  border: 1px solid #2a2a2e;
  background: #111113;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color 0.15s;
}
body.ttai .side-menu .ttai-sm-logout:hover { border-color: #e91e63; color: #fff; }
body.ttai .side-menu .ttai-sm-logout svg { width: 18px; height: 18px; color: #6e6e6e; flex: 0 0 auto; }

/* Notifications */
/* Sticky header background must match the dark TTAI panel surface. */
body.ttai .notifications-ct .notifications-header {
  background: #0A0A0C;
  border-bottom-color: #1e1e22;
}
body.ttai .notifications-ct .notification {
  border: 1px solid #1e1e22;
  border-radius: 16px;
  background: #111113;
  padding: 12px 14px;
  margin: 12px 0;
}
body.ttai .notifications-ct .notification-person { color: #e91e63 !important; }
body.ttai .notification-text-ct {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body.ttai .notification-text-ct .notification-received,
body.ttai .notification .mark-read { color: #808085; }
body.ttai .notifications-seen { border-top-color: #1e1e22; }

body.ttai .notifications-empty,
body.ttai .notifications-empty-title,
body.ttai .notifications-empty-sub {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body.ttai .notifications-empty-icon { color: #2a2a30; }
body.ttai .notifications-empty-sub { color: #808085; }

/* Phone: tighten the TTAI notification cards to match the compact full-width
   panel (nav.css makes it full-width at this breakpoint). The TTAI card padding/
   margins out-specify the general compaction in nav.css, so they're set here. */
@media (max-width: 600px) {
  body.ttai .notifications-ct .notification {
    border-radius: 13px;
    padding: 10px 12px;
    margin: 8px 0;
  }
}

/* ----------------------------------------------------------------------------
   Page background — light theme. nav.css sets `body { background:#0b0a0c }`
   globally (TTAI is dark by default). Centered page content (e.g. the Learning
   tab's max-width column) lets that dark body show through as gutters, so flip
   the body itself on themed pages. Scoped to the data-ttf-theme flag so dark
   mode and non-TTAI pages are untouched.
---------------------------------------------------------------------------- */
body.ttai[data-ttf-theme='light'] { background-color: #f2f2f7; }

/* ----------------------------------------------------------------------------
   Notifications panel — light theme. The panel lives in the second nav (not in
   .ttai-navbar), so it keys off a body-level flag (data-ttf-theme) that
   ttaiTheme.js + the inline script in design.tpl set on /feeds only. Surfaces
   match the feed (panel = --feed-bg, cards = --card-surface). The generic
   `nav .notifications-ct { color:#fff }` and the `a:link{color:#fff!important}`
   rule in nav.css force light text, so these need the matching specificity.
---------------------------------------------------------------------------- */
body.ttai[data-ttf-theme='light'] nav .notifications-ct {
  background-color: #f2f2f7;
  border-left: 1px solid #e5e5ea;
  color: #1c1c1e;
}
body.ttai[data-ttf-theme='light'] .notifications-ct a:link,
body.ttai[data-ttf-theme='light'] .notifications-ct a:visited {
  color: #1c1c1e !important;
}
body.ttai[data-ttf-theme='light'] .notifications-ct .notification {
  background: #ffffff;
  border-color: #e5e5ea;
}
/* Sticky header — match the light panel surface + dark text/icon. */
body.ttai[data-ttf-theme='light'] .notifications-ct .notifications-header {
  background: #f2f2f7;
  border-bottom-color: #e5e5ea;
}
body.ttai[data-ttf-theme='light'] .notifications-ct .notifications-title { color: #1c1c1e; }
body.ttai[data-ttf-theme='light'] .notifications-ct .notifications-close {
  background: rgba(0, 0, 0, 0.05);
  color: #1c1c1e;
}
body.ttai[data-ttf-theme='light'] .notifications-ct .notifications-close:hover { background: rgba(0, 0, 0, 0.1); }
/* Dismiss "x" hover on the light card surface. */
body.ttai[data-ttf-theme='light'] .notifications-ct .notification .mark-read:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1c1c1e;
}
/* Person stays pink; timestamp + dismiss "x" stay grey (readable on light). */
body.ttai[data-ttf-theme='light'] .notifications-seen { border-top-color: #d1d1d6; }
body.ttai[data-ttf-theme='light'] .notifications-empty { color: #1c1c1e; }
body.ttai[data-ttf-theme='light'] .notifications-empty-icon { color: #c7c7cc; }

/* ----------------------------------------------------------------------------
   Side menu — light theme. Same body-level flag as the notifications panel
   (feeds only). Surfaces match the feed (panel = --feed-bg, the grouped section
   + logout = --card-surface). The link colour is forced white by the
   high-specificity `body.ttai nav .side-menu a:link` rule in this file, so the
   dark-text override below matches that specificity. Danger (red) is kept.
---------------------------------------------------------------------------- */
body.ttai[data-ttf-theme='light'] nav .side-menu {
  background-color: #f2f2f7;
  border-left-color: #e5e5ea;
}
body.ttai[data-ttf-theme='light'] nav .side-menu a:link,
body.ttai[data-ttf-theme='light'] nav .side-menu a:visited {
  color: #1c1c1e;
}
body.ttai[data-ttf-theme='light'] .side-menu-items .separator { border-top-color: #e5e5ea; }

body.ttai[data-ttf-theme='light'] .side-menu .ttai-sm-section {
  background: #ffffff;
  border-color: #e5e5ea;
}
body.ttai[data-ttf-theme='light'] .side-menu .ttai-sm-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
  color: #1c1c1e;
}
body.ttai[data-ttf-theme='light'] .side-menu .ttai-sm-item:hover { background: rgba(0, 0, 0, 0.03); }
body.ttai[data-ttf-theme='light'] .side-menu .ttai-sm-icon {
  background: rgba(0, 0, 0, 0.04);
  color: #6c6c70;
}
body.ttai[data-ttf-theme='light'] .side-menu .ttai-sm-chevron { color: #c7c7cc; }
/* Keep the destructive item's red hover affordance (red icon/label already
   win on specificity; this stops the neutral hover above from overriding it). */
body.ttai[data-ttf-theme='light'] .side-menu .ttai-sm-item.is-danger:hover { background: rgba(255, 68, 68, 0.06); }

body.ttai[data-ttf-theme='light'] .side-menu .ttai-sm-logout {
  background: #ffffff;
  border-color: #e5e5ea;
  color: #1c1c1e;
}
/* The dark logout:hover sets color:#fff (invisible on a light surface) — keep
   text dark on hover; the pink hover border from that rule still applies. */
body.ttai[data-ttf-theme='light'] .side-menu .ttai-sm-logout:hover { color: #1c1c1e; }
body.ttai[data-ttf-theme='light'] .side-menu .ttai-sm-logout svg { color: #8e8e93; }

/* ----------------------------------------------------------------------------
   Streak modal — light theme. The modal is built in ttaiXpStreak.js and
   appended to document.body, so it keys off the same body-level data-ttf-theme
   flag ttaiTheme.js sets on themed pages. Surfaces mirror the feed light
   palette (panel = #f2f2f7, cards = #fff, borders = #e5e5ea); the user-colour
   accents (hero badge, card values, progress fill, active calendar pills)
   carry over unchanged. The backdrop stays dark in both themes — it sits over
   the page, same as the feed's .ttf-modal-overlay.
---------------------------------------------------------------------------- */
body.ttai[data-ttf-theme='light'] .ttai-streak-modal {
  background: #f2f2f7;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
body.ttai[data-ttf-theme='light'] .ttai-streak-modal::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border: 3px solid transparent;
  background-clip: padding-box;
}
body.ttai[data-ttf-theme='light'] .ttai-streak-modal::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
  border: 3px solid transparent;
  background-clip: padding-box;
}
body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-close {
  background: rgba(0, 0, 0, 0.05);
  color: #6c6c70;
}
body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-close:hover { background: rgba(0, 0, 0, 0.1); }

/* Hero + cards sit on the lighter panel as white surfaces. */
body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-hero { background: #ffffff; }
body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-hero-count { color: #1c1c1e; }
body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-hero-label { color: #6c6c70; }

body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-card {
  background: #ffffff;
  border-color: #e5e5ea;
}
body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-card-title { color: #6c6c70; }
body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-card-body { color: #6c6c70; }
body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-card-muted { color: #8e8e93; }

/* "On Track" pill — keep the brand tint, darken the label so it reads on white.
   "Action Needed" amber — deepen text + border for contrast on a light card. */
body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-status.ttai-safe {
  color: var(--ttai-user-color);
}
body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-status.ttai-warning {
  background: rgba(255, 170, 60, 0.18);
  border-color: rgba(214, 120, 20, 0.45);
  color: #b45309;
}

body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-progress-track { background: #e5e5ea; }

body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-calendar-label { color: #6c6c70; }
body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-calendar-pill { color: #1c1c1e; }
/* Inactive day matches the card surface, set off by a light border (mirrors the
   dark theme, where the inactive pill matches the card and only the border reads). */
body.ttai[data-ttf-theme='light'] .ttai-streak-modal .ttai-modal-calendar-pill.ttai-inactive {
  background: #ffffff;
  border-color: #e5e5ea;
}