/* ═══════════════════════════════════════════════════
   RACE START LIGHTS SEQUENCE
═══════════════════════════════════════════════════ */
.start-sequence {
  position: fixed;
  inset: 0;
  background: var(--bg-void);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-start);
  transition: opacity 600ms ease, visibility 600ms ease;
}

.start-sequence.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.start-sequence__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.start-sequence__label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 6px;
  color: var(--text-muted);
  text-transform: uppercase;
  animation: fade-pulse 1.5s ease infinite;
}

.start-sequence__lights {
  display: flex;
  gap: 18px;
  align-items: center;
}

.start-light {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1A0000;
  border: 2px solid #2D0000;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  position: relative;
}

/* Inner glow ring */
.start-light::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: transparent;
  transition: background 160ms ease;
}

.start-light.is-on {
  background: #DD0000;
  border-color: #FF3333;
  box-shadow: 0 0 18px #FF0000, 0 0 40px rgba(255, 0, 0, 0.5), 0 0 80px rgba(255, 0, 0, 0.2);
}

.start-light.is-on::after {
  background: rgba(255, 120, 120, 0.25);
}

.start-sequence__sub {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--text-muted);
  text-transform: uppercase;
  opacity: 0.5;
}

@keyframes fade-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.9; }
}

/* ── PURPLE SECTOR BRAND — splash screen footer ── */

/*
 * Absolutely anchored to the bottom of the fixed overlay so it never
 * moves relative to the viewport regardless of screen size.
 * Delayed 500ms so it fades up while the first lights are still firing.
 */
.start-sequence__brand {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  animation: splash-brand-appear 700ms 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes splash-brand-appear {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}

.start-sequence__brand-logo {
  height: 30px;
  width: auto;
  display: block;
  flex-shrink: 0;
  mix-blend-mode: screen; /* black background becomes transparent on dark overlay */
  opacity: 0.9;
}

.start-sequence__brand-sep {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.start-sequence__brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.start-sequence__brand-powered {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
  line-height: 1;
}

.start-sequence__brand-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #C084FC;
  /* Double-layer glow so it reads on the near-black void */
  text-shadow:
    0 0 20px rgba(192, 132, 252, 0.55),
    0 0 50px rgba(192, 132, 252, 0.2);
  line-height: 1;
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
  .start-sequence__brand {
    bottom: 30px;
    gap: 9px;
  }

  .start-sequence__brand-logo {
    height: 24px;
  }

  .start-sequence__brand-sep {
    height: 20px;
  }

  .start-sequence__brand-powered {
    font-size: 8px;
    letter-spacing: 2.5px;
  }

  .start-sequence__brand-name {
    font-size: 12px;
    letter-spacing: 2.5px;
  }
}

/* ═══════════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════════ */
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  height: 100%;
  overflow: hidden;
  /* Prevent pull-to-refresh and overscroll glow in Android WebView */
  overscroll-behavior: none;
  /* Remove blue tap highlight on all elements in Android WebView */
  -webkit-tap-highlight-color: transparent;
}

.app {
  display: flex;
  height: 100vh;                       /* Fallback for browsers without CSS custom property support */
  height: var(--app-height, 100vh);    /* JS writes the real visible height here — correctly handles
                                          Android virtual keyboard and WebView viewport quirks */
  overflow: hidden;
  opacity: 0;
  transition: opacity 500ms ease;
}

.app.is-visible {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════
   SIDEBAR OVERLAY (mobile)
═══════════════════════════════════════════════════ */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: calc(var(--z-sidebar) - 1);
  /* No backdrop-filter — it's expensive on mobile GPUs and causes jank */
  opacity: 0;
  pointer-events: none;          /* CRITICAL: invisible overlay must not block touches */
  transition: opacity 240ms ease;
  will-change: opacity;
}

.sidebar-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;          /* Only capture taps when sidebar is actually open */
}

/* ═══════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: var(--z-sidebar);
  /* Carbon fibre texture */
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.013) 0px,
      rgba(255,255,255,0.013) 1px,
      transparent 1px,
      transparent 9px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.013) 0px,
      rgba(255,255,255,0.013) 1px,
      transparent 1px,
      transparent 9px
    );
}

/* Thin red right edge on sidebar */
.sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--red) 20%,
    var(--red) 80%,
    transparent 100%
  );
  opacity: 0.35;
}

.sidebar__header {
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar__logo {
  display: block;
  padding: 4px 0;
}

.sidebar__logo-img {
  height: 34px;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(232, 0, 13, 0.2));
  transition: filter var(--t-base);
}

.sidebar__logo:hover .sidebar__logo-img {
  filter: drop-shadow(0 0 14px rgba(232, 0, 13, 0.5));
}

/* New Session button */
.sidebar__new-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  overflow: hidden;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.sidebar__new-btn-stripe {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.sidebar__new-btn:hover .sidebar__new-btn-stripe {
  box-shadow: var(--red-glow-sm);
}

.sidebar__new-btn:hover .sidebar__new-btn-stripe,
.sidebar__new-btn:focus-visible .sidebar__new-btn-stripe {
  transform: scaleY(1);
}

.sidebar__new-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-accent);
}

.sidebar__new-btn-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Section label */
.sidebar__section-label {
  padding: 16px 16px 6px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ── PINNED / BOOKMARKED SECTION ── */
.sidebar__pinned {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 4px;
}

/* Yellow accent for PINNED label */
.sidebar__section-label--pinned {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #FFC107;
}

.pinned-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: 2px;
  transition: background var(--t-fast);
  margin-left: 8px;
  margin-right: 8px;
  user-select: none;
}

.pinned-item:hover {
  background: var(--session-hover-bg);
}

.pinned-item:active {
  background: var(--session-hover-bg);
  transition-duration: 60ms;
}

.pinned-item__icon {
  color: #FFC107;
  flex-shrink: 0;
  opacity: 0.8;
  display: flex;
  align-items: center;
}

.pinned-item__text {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
  transition: color var(--t-fast);
}

.pinned-item:hover .pinned-item__text {
  color: var(--text-secondary);
}

/* Sessions nav */
.sidebar__sessions {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
  -webkit-overflow-scrolling: touch; /* Smooth momentum scroll in WebView */
  overscroll-behavior: contain;
}

.sidebar__sessions::-webkit-scrollbar {
  width: 3px;
}
.sidebar__sessions::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 2px;
}

/* Individual session item */
.session-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 9px 10px 9px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: 2px;
  overflow: hidden;
  transition: background var(--t-fast);
}

.session-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2.5px;
  height: 60%;
  background: var(--red);
  border-radius: 2px;
  transform-origin: center;
  transition: transform var(--t-base);
}

.session-item:hover::before,
.session-item.is-active::before {
  transform: translateY(-50%) scaleY(1);
  box-shadow: 0 0 6px rgba(232, 0, 13, 0.4);
}

.session-item:hover {
  background: var(--session-hover-bg);
}

.session-item.is-active {
  background: rgba(232, 0, 13, 0.06);
}

.session-item__text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  transition: color var(--t-fast);
}

.session-item:hover .session-item__text,
.session-item.is-active .session-item__text {
  color: var(--text-primary);
}

.session-item__time {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  transition: opacity 150ms ease;
}

/* Hide the time on hover so the delete button takes its place */
.session-item:hover .session-item__time {
  opacity: 0;
}

/* ── THREE-DOT MENU BUTTON ── */
.session-item__menu {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms ease, background 150ms ease, color 150ms ease;
  padding: 0;
  flex-shrink: 0;
}

.session-item:hover .session-item__menu {
  opacity: 1;
}

.session-item__menu:hover {
  background: var(--session-hover-bg);
  color: var(--text-secondary);
}

.sidebar__sessions-empty {
  padding: 16px 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

/* ── LOAD MORE BUTTON ── */
.sessions-load-more {
  display: block;
  width: 100%;
  padding: 8px 14px;
  margin-top: 4px;
  background: none;
  border: none;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 150ms ease;
  text-align: center;
}

.sessions-load-more:hover {
  color: var(--red);
}

/* ── INLINE RENAME INPUT ── */
.session-item__rename-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--red);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 2px 6px;
  outline: none;
  box-shadow: 0 0 0 2px rgba(232, 0, 13, 0.18);
}

/* ── SESSION DROPDOWN (body-appended, escapes overflow:hidden) ── */
.session-dropdown {
  position: fixed;
  min-width: 144px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  z-index: calc(var(--z-sidebar) + 50);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.session-dropdown.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.session-dropdown__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  text-align: left;
  white-space: nowrap;
}

.session-dropdown__item:hover {
  background: var(--session-hover-bg);
  color: var(--text-primary);
}

.session-dropdown__item--danger:hover {
  background: rgba(232, 0, 13, 0.12);
  color: var(--red);
}

/* ── SETTINGS PANEL ── */
.sidebar__settings {
  border-top: 1px solid var(--border-subtle);
  padding: 4px 0 8px;
}

.settings-row {
  padding: 6px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.settings-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.settings-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.settings-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 7px 28px 7px 10px;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.settings-select:hover {
  border-color: var(--border-accent);
  color: var(--text-primary);
}

.settings-select:focus {
  outline: none;
  border-color: var(--red);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px rgba(232, 0, 13, 0.2);
}

.settings-select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.settings-select-arrow {
  position: absolute;
  right: 9px;
  width: 10px;
  height: 6px;
  color: var(--text-muted);
  pointer-events: none;
  transition: color var(--t-fast);
}

.settings-select-wrap:hover .settings-select-arrow,
.settings-select:focus + .settings-select-arrow {
  color: var(--red);
}

/* ── SIDEBAR FOOTER PURPLE SECTOR BRAND ── */
.sidebar__footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar__footer-brand-logo {
  height: 26px;
  width: auto;
  display: block;
  flex-shrink: 0;
  mix-blend-mode: screen;
  opacity: 0.88;
}

.sidebar__footer-brand-sep {
  width: 1px;
  height: 22px;
  background: var(--border-mid);
  flex-shrink: 0;
  opacity: 0.55;
}

.sidebar__footer-brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar__footer-brand-powered {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.65;
}

.sidebar__footer-brand-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #C084FC;
  text-shadow: 0 0 18px rgba(192, 132, 252, 0.45);
  line-height: 1;
}

/* Light mode: screen blend doesn't work on light bg — hide logo, show text only */
[data-theme="light"] .sidebar__footer-brand-logo,
[data-theme="light"] .sidebar__footer-brand-sep {
  display: none;
}

[data-theme="light"] .sidebar__footer-brand-name {
  color: #7C3AED;
  text-shadow: none;
}

/* Sidebar footer */
.sidebar__footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}


.sidebar__footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar__footer-version {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--text-muted);
  opacity: 0.5;
}

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  padding: 0;
  flex-shrink: 0;
}

.theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-mid);
  background: var(--session-hover-bg);
}

/* ═══════════════════════════════════════════════════
   MAIN CHAT AREA
═══════════════════════════════════════════════════ */
.chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary);
  position: relative;
}

/* Top bar */
.chat-topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  position: relative;
  z-index: var(--z-topbar);
  flex-shrink: 0;
}

/* Speed-line accent bar beneath topbar */
.chat-topbar__accent {
  height: 2px;
  background: var(--bg-secondary);
  overflow: hidden;
  flex-shrink: 0;
}

.chat-topbar__accent-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--red) 30%,
    #FF4444 50%,
    var(--red) 70%,
    transparent 100%
  );
  transform: translateX(-100%);
  opacity: 0;
}

/* Only animate while AI is thinking */
.chat-main.is-thinking .chat-topbar__accent {
  height: 3px; /* grow the track when active */
}

.chat-main.is-thinking .chat-topbar__accent-fill {
  background: linear-gradient(
    90deg,
    transparent   0%,
    rgba(232,0,13,0.35) 20%,
    var(--red)    42%,
    #FF6666       50%,
    var(--red)    58%,
    rgba(232,0,13,0.35) 80%,
    transparent  100%
  );
  opacity: 1;
  animation: speed-sweep 0.85s linear infinite;
}

@keyframes speed-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Status dot heartbeat — was referenced but never defined */
@keyframes dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;    }
  50%       { transform: scale(1.6); opacity: 0.65; }
}

/* Sidebar session items cascade entrance (mobile only) */
@keyframes session-item-enter {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.topbar__menu-btn {
  display: none;
  flex-direction: column;
  gap: 4.5px;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}

.topbar__menu-btn:hover { background: var(--bg-surface); }

.topbar__menu-bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text-secondary);
  border-radius: 1px;
  transition: transform var(--t-base), opacity var(--t-base);
}

.topbar__logo {
  display: none;
}

.topbar__logo-img {
  height: 26px;
  width: auto;
}

/* Groups share button + status dot, pushed right by margin-left: auto */
.topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Share conversation button */
.topbar__share-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  padding: 0;
  flex-shrink: 0;
}

.topbar__share-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-mid);
  background: var(--bg-surface);
}

.topbar__share-btn.is-shared {
  color: #64B5F6;
  border-color: rgba(100, 181, 246, 0.35);
  background: rgba(100, 181, 246, 0.07);
}

[data-theme="light"] .topbar__share-btn.is-shared {
  color: #1976D2;
  border-color: rgba(25, 118, 210, 0.3);
  background: rgba(25, 118, 210, 0.05);
}

.topbar__status {
  display: flex;
  align-items: center;
  gap: 7px;
  /* margin-left: auto removed — .topbar__right handles alignment */
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot--ready    { background: var(--sector-green); box-shadow: 0 0 6px var(--sector-green); animation: dot-pulse 3s ease infinite; }
.status-dot--thinking { background: var(--sector-yellow); box-shadow: 0 0 6px var(--sector-yellow); animation: dot-pulse 0.8s ease infinite; }
.status-dot--error    { background: var(--red); box-shadow: var(--red-glow-sm); }

.status-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ── PURPLE SECTOR BRAND (topbar center) ── */
.topbar__brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none; /* never blocks topbar clicks/taps */
  user-select: none;
}

.topbar__brand-logo {
  height: 26px;
  width: auto;
  opacity: 0.9;
  display: block;
  /* Dissolves the black background so only the mark shows on dark topbar */
  mix-blend-mode: screen;
}

/* Thin vertical rule between logo and text */
.topbar__brand-sep {
  width: 1px;
  height: 22px;
  background: var(--border-mid);
  opacity: 0.5;
  flex-shrink: 0;
}

.topbar__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topbar__brand-powered {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.7;
}

.topbar__brand-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  line-height: 1;
  /* Purple Sector purple — matches the fastest-sector timing colour in F1 */
  color: #C084FC;
  text-shadow: 0 0 18px rgba(192, 132, 252, 0.35);
}

/* Mobile — compact version: drop "POWERED BY" label + separator, shrink sizes */
@media (max-width: 768px) {
  .topbar__brand {
    gap: 7px;
  }

  .topbar__brand-powered,
  .topbar__brand-sep {
    display: none; /* too small to read; keep just logo + name */
  }

  .topbar__brand-logo {
    height: 20px;
  }

  .topbar__brand-name {
    font-size: 11px;
    letter-spacing: 2px;
  }
}

/* Messages area */
.messages-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
  -webkit-overflow-scrolling: touch; /* Smooth momentum scroll in Android WebView */
  overscroll-behavior: contain;      /* Prevent triggering pull-to-refresh when at top */
}

.messages-area::-webkit-scrollbar       { width: 4px; }
.messages-area::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 2px;
}

/* ── WELCOME STATE ── */
.welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 20px;
  /* No wrapper animation — stagger each child instead */
}

@keyframes welcome-appear {
  from { opacity: 0; transform: translateY(32px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Staggered children — each snaps in with spring overshoot */
.welcome__mark {
  margin-bottom: 8px;
  animation: welcome-appear 480ms cubic-bezier(0.34, 1.7, 0.64, 1)  0ms  both;
}

.welcome__wordmark {
  animation: welcome-appear 480ms cubic-bezier(0.34, 1.7, 0.64, 1) 80ms  both;
}

.welcome__tagline {
  animation: welcome-appear 420ms cubic-bezier(0.34, 1.5, 0.64, 1) 160ms both;
}

.welcome__sub {
  animation: welcome-appear 380ms cubic-bezier(0.34, 1.4, 0.64, 1) 230ms both;
}

.welcome__apex-mark {
  width: 80px;
  height: 80px;
  animation: mark-rotate 20s linear infinite;
}

/* Apex dot pulse — SVG circle at centre */
.welcome__apex-mark circle {
  transform-box:    fill-box;
  transform-origin: center;
  animation: apex-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes mark-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes apex-dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  45%       { transform: scale(2.6); opacity: 1;   }
  55%       { transform: scale(2.2); opacity: 0.9; }
}

.welcome__wordmark {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 4px;
  line-height: 1;
  text-transform: uppercase;
}

.welcome__f1 {
  color: var(--red);
  text-shadow: var(--red-glow-sm);
}

.welcome__apex {
  color: var(--sector-purple);
  margin-left: 6px;
}

.welcome__tagline {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 4px;
}

.welcome__sub {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — MOBILE
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
    /* DRS-style: explosive start, precision deceleration */
    transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform; /* hint GPU for smooth composited slide */
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  /* Overlay is rendered but pointer-events: none keeps it transparent to touches
     until .is-visible is added (when sidebar opens). See base rule above. */
  .sidebar-overlay { display: block; }

  /* Topbar must sit above the overlay so the hamburger is always tappable */
  .chat-topbar {
    z-index: var(--z-sidebar);
  }

  .topbar__menu-btn { display: flex; }
  .topbar__logo     { display: block; }
  .topbar__brand    { display: none; }  /* hidden on mobile — sidebar has the brand */

  /* Push sidebar content below the topbar — fixes overlap */
  .sidebar {
    padding-top: var(--topbar-h);
  }

  /* Session items cascade in when sidebar slides open */
  .sidebar.is-open .session-item {
    animation: session-item-enter 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .sidebar.is-open .session-item:nth-child(1)  { animation-delay: 50ms;  }
  .sidebar.is-open .session-item:nth-child(2)  { animation-delay: 80ms;  }
  .sidebar.is-open .session-item:nth-child(3)  { animation-delay: 110ms; }
  .sidebar.is-open .session-item:nth-child(4)  { animation-delay: 140ms; }
  .sidebar.is-open .session-item:nth-child(5)  { animation-delay: 170ms; }
  .sidebar.is-open .session-item:nth-child(6)  { animation-delay: 200ms; }
  .sidebar.is-open .session-item:nth-child(7)  { animation-delay: 230ms; }
  .sidebar.is-open .session-item:nth-child(8)  { animation-delay: 260ms; }

  .messages-area { padding: 20px 16px 12px; }

  /* Session three-dot menu: hover doesn't exist on touch — always show it */
  .session-item__menu {
    opacity: 1;
  }
  .session-item:hover .session-item__time {
    opacity: 1; /* don't hide the time either on touch */
  }

  /* Active states for touch feedback (no hover on mobile) */
  .session-item:active {
    background: var(--session-hover-bg);
    transition-duration: 60ms;
  }

  .topbar__menu-btn:active {
    background: var(--bg-surface);
    transition-duration: 60ms;
  }
}

@media (min-width: 769px) {
  .chat-topbar {
    /* Hide mobile-only items on desktop */
  }
  .topbar__logo { display: none; }
}

/* ═══════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
═══════════════════════════════════════════════════ */

/* Sidebar: swap white-on-dark carbon fibre to dark-on-light */
[data-theme="light"] .sidebar {
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,0.022) 0px,
      rgba(0,0,0,0.022) 1px,
      transparent 1px,
      transparent 9px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,0.022) 0px,
      rgba(0,0,0,0.022) 1px,
      transparent 1px,
      transparent 9px
    );
}

/* Sidebar shadow is softer in light mode */
[data-theme="light"] .sidebar {
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.07);
}

/* Session dropdown shadow is lighter in light mode */
[data-theme="light"] .session-dropdown {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

/* Scroll-to-bottom button shadow */
[data-theme="light"] .scroll-btn {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}