/* ──────────────────────────────────────────────────────────────────────────
   NovAI layout fix — full-width chat area + mobile repair.
   Loaded last so it overrides base + glass theme rules.
   Applies to BOTH themes (moon + glass).
   ────────────────────────────────────────────────────────────────────────── */

/* ── GLASS-MODE GAP FIX ──────────────────────────────────────────────────────
   Bug: in glass mode the sidebar was forced to `position:relative` (theme_glass.css:61,
   theme_glass_v2.css:140, theme_glass_v3.css:56). That put the sidebar back into the
   body flex flow while .main-content still carried margin-left:sidebar-width — so the
   offset was applied TWICE, creating a dead column that changed with the toggle state
   (~260px open, ~60px collapsed). Other themes keep the sidebar `fixed`, so they were
   fine. Fix: pin the glass sidebar back to `fixed` (out of flow) — margin-left then
   offsets it correctly and the layout stays flush in every toggle state. ── */
html[data-theme="glass"] .sidebar,
html[data-theme="glass"] #sidebar {
  position: fixed !important;
  top: 0 !important; left: 0 !important; bottom: 0 !important;
  width: var(--sidebar-w);
  z-index: 100;
}
html[data-theme="glass"] .sidebar.collapsed,
html[data-theme="glass"] #sidebar.collapsed { width: var(--sidebar-c); }

/* ── Liquid sidebar toggle: sidebar width + main-content margin move in lockstep
   at the SAME duration/easing, so the panel slides & resizes like liquid with no
   gap flash mid-animation. ── */
html[data-theme="glass"] .sidebar,
html[data-theme="glass"] #sidebar {
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: width;
}
html[data-theme="glass"] .main-content,
html[data-theme="glass"] #mainContent {
  transition: margin-left 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: margin-left;
}
html[data-theme="glass"] .btn-label,
html[data-theme="glass"] .sidebar-section-label,
html[data-theme="glass"] .no-history-msg,
html[data-theme="glass"] .history-item-text,
html[data-theme="glass"] .model-info-text {
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="glass"] .sidebar,  html[data-theme="glass"] #sidebar,
  html[data-theme="glass"] .main-content, html[data-theme="glass"] #mainContent,
  html[data-theme="glass"] .btn-label {
    transition: none !important;
  }
}

/* ── Fix: "Nova is thinking / done thinking" was rendering BEHIND the decorative
   ambient glow. The chat content is trapped under main-content's z-index, while
   #novaAmbientGlow (z-index:1, painted later) drew on top of it. Push the ambient
   glow behind the content and lift the chat + thinking indicator above it. ── */
#novaAmbientGlow { z-index: 0 !important; }
.chat-viewport, .messages-container, #messagesContainer { position: relative; z-index: 2; }
.thinking-row, .thinking-row.nova-enh, .thinking-steps,
.nova-done2-wrap, .nova-done2 {
  position: relative;
  z-index: 4 !important;
}

/* ── Main content sits FLUSH against the sidebar (kills the left dead column) ─
   .main-content is offset by exactly the sidebar width — never more. Scoped to
   both themes + the collapsed sidebar so no theme can reopen the gap. ── */
.main-content, #mainContent,
html[data-theme="moon"] .main-content,  html[data-theme="glass"] .main-content,
html[data-theme="moon"] #mainContent,   html[data-theme="glass"] #mainContent {
  flex: 1 1 auto !important;
  margin-left: var(--sidebar-w) !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  width: auto !important;
  min-width: 0;
  box-sizing: border-box !important;
}
.sidebar.collapsed ~ .main-content,
.sidebar.collapsed ~ #mainContent,
html[data-theme="moon"] .sidebar.collapsed ~ .main-content,
html[data-theme="glass"] .sidebar.collapsed ~ .main-content {
  margin-left: var(--sidebar-c) !important;
}

/* ── Welcome screen fills the full (flush) main column and CENTERS its content.
   The sidebar↔content gap is solved separately (sidebar position:fixed above), so
   centering here is safe and no longer reintroduces a dead column. ── */
.welcome-screen, #welcomeScreen,
html[data-theme="glass"] .welcome-screen, html[data-theme="glass"] #welcomeScreen {
  width: 100% !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px clamp(24px, 5vw, 72px) !important;
}
.welcome-logo-wrap {
  align-self: center !important;
  align-items: center !important;
  text-align: center !important;
}
.suggestion-grid {
  max-width: 780px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Full-width chat: remove the centered 800px column gaps ─────────────── */
.messages-container, #messagesContainer {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding-left: clamp(16px, 5vw, 72px) !important;
  padding-right: clamp(16px, 5vw, 72px) !important;
}
.model-selector-bar,
.mode-selector,
#modeSelectorBar,
#modelSelectorBar,
.input-container,
.input-disclaimer {
  max-width: 100% !important;
  width: 100% !important;
}
/* Input area should span the main column, not sit in a narrow centered box */
.input-area-wrap {
  padding-left: clamp(16px, 5vw, 72px);
  padding-right: clamp(16px, 5vw, 72px);
}

/* Chat viewport fills all available height — no dead space under the chats */
.main-content { min-width: 0; }
.chat-viewport { flex: 1 1 auto; min-height: 0; }

/* Prevent stray horizontal scroll / phantom side space.
   NOTE: use 100% not 100vw — 100vw INCLUDES the scrollbar width, which causes a
   ~15px overflow (white strip on the right) once a vertical scrollbar appears. */
html, body { overflow-x: hidden !important; max-width: 100% !important; }
#mainContent, .main-content, .chat-viewport,
.messages-container, #messagesContainer {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE REWORK (≤768px) — complete, balanced layout.
   IMPORTANT: the desktop flush rules above use high-specificity selectors
   (html[data-theme="…"] #mainContent) with !important. These mobile rules MUST
   match that specificity (and come later in the file) to win — otherwise the
   sidebar stays open beside the content (the "two menus" bug). So every override
   here is written with the same html[data-theme] #id form.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Sidebar = off-canvas drawer (hidden by default, both themes) ── */
  html[data-theme="moon"]  .sidebar, html[data-theme="glass"] .sidebar,
  html[data-theme="moon"]  #sidebar, html[data-theme="glass"] #sidebar,
  .sidebar, #sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: min(84vw, 320px) !important;
    transform: translateX(-102%) !important;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1001 !important;
    box-shadow: none !important;
  }
  html[data-theme="moon"]  .sidebar.collapsed, html[data-theme="glass"] .sidebar.collapsed,
  html[data-theme="moon"]  #sidebar.collapsed, html[data-theme="glass"] #sidebar.collapsed {
    width: min(84vw, 320px) !important;          /* ignore desktop "collapsed" on mobile */
  }
  html[data-theme="moon"]  .sidebar.mobile-open, html[data-theme="glass"] .sidebar.mobile-open,
  html[data-theme="moon"]  #sidebar.mobile-open, html[data-theme="glass"] #sidebar.mobile-open,
  .sidebar.mobile-open, #sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 8px 0 60px rgba(0,0,0,0.55) !important;
  }

  /* Dimming backdrop behind the drawer */
  #mobileOverlay {
    position: fixed !important; inset: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease !important;
    z-index: 1000 !important;
  }
  #mobileOverlay.visible { opacity: 1 !important; pointer-events: auto !important; }

  /* ── Main content = full width + safe-area aware ──
     viewport-fit=cover lets the page slide UNDER the phone's status bar / notch,
     so we (a) use the DYNAMIC viewport height (100dvh) — fixes mobile browsers
     where 100vh is taller than the visible area and cuts content off, and
     (b) pad the whole column down by the top inset so the topbar (menu/settings/
     user) always sits BELOW the notch instead of being clipped at the top. */
  html[data-theme="moon"]  .main-content, html[data-theme="glass"] .main-content,
  html[data-theme="moon"]  #mainContent, html[data-theme="glass"] #mainContent,
  .main-content, #mainContent {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 100vh !important;            /* fallback */
    height: 100dvh !important;           /* dynamic viewport — excludes browser UI */
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
  html, body { height: 100dvh; }

  /* ── Single top bar (hamburger + logo + account/settings) ──
     NOT sticky: a sticky top:0 bar anchors to the viewport top and IGNORES the
     safe-area padding on the column, so it stayed under the notch. As the first
     (non-scrolling) item it just sits in flow, which respects the padding. */
  .topbar {
    display: flex !important;
    position: relative !important; top: auto !important; z-index: 60 !important;
    box-sizing: border-box !important;
    height: var(--topbar-h, 56px) !important;
    padding: 8px 12px !important;        /* tighter so all icons fit narrow screens */
    background: var(--bg-base) !important;
    flex: 0 0 auto !important;
  }
  .topbar-action-btn { display: flex !important; }
  /* keep the three icon clusters from overflowing on very narrow phones */
  .topbar .icon-btn { width: 38px; height: 38px; flex: 0 0 auto; }
  .topbar-logo .topbar-brand { font-size: 16px; }
  .topbar-actions { gap: 2px !important; }

  /* ── Chat + welcome ── */
  .messages-container, #messagesContainer {
    padding-left: 14px !important; padding-right: 14px !important;
  }
  .welcome-screen, #welcomeScreen,
  html[data-theme="glass"] .welcome-screen, html[data-theme="glass"] #welcomeScreen {
    padding: 28px 16px 24px !important;
    justify-content: flex-start !important;
  }
  .welcome-logo-mark { width: 72px !important; height: 72px !important; }
  .welcome-logo-mark svg { width: 64px; height: 64px; }
  .welcome-title { font-size: 38px !important; }
  .welcome-subtitle { font-size: 14px !important; }

  /* Suggestion cards: single column, full width */
  .suggestion-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important; width: 100% !important;
  }
  .suggestion-card { padding: 14px 16px !important; }

  /* ── Input bar: fit attach + textarea + mic + live + send on one row ── */
  /* Lift the bar higher so the "Nova can make mistakes…" line below it is fully
     visible above the phone's home indicator. */
  .input-area-wrap {
    padding: 8px max(10px, env(safe-area-inset-left, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-right, 0px)) !important;
    gap: 6px;
  }
  .input-disclaimer, .input-note, .nova-input-note {
    margin-bottom: calc(2px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Composer: the text field takes its OWN full-width row, and all the icon buttons
     sit in a tidy row BELOW it — so nothing ever covers or squashes the input. */
  .input-container {
    padding: 8px 10px !important; gap: 6px !important; flex-wrap: wrap !important; align-items: center !important;
  }
  .chat-input { flex: 1 1 100% !important; min-width: 0 !important; font-size: 15px; order: -1; }
  .attach-btn, .nf-cam-btn, .nova-mic-btn, .nova-live-btn, .send-btn {
    width: 38px !important; height: 38px !important; flex: 0 0 auto !important;
  }
  .attach-btn { display: inline-flex !important; }   /* show the files button on mobile too */
  .send-btn { margin-left: auto !important; }        /* send sits at the far right of the icon row */
  /* chip rows scroll horizontally instead of wrapping/overflowing */
  .mode-selector, #modeSelectorBar, .model-selector-bar, #modelSelectorBar {
    overflow-x: auto !important; flex-wrap: nowrap !important;
    scrollbar-width: none; gap: 6px;
  }
  .mode-selector::-webkit-scrollbar, .model-selector-bar::-webkit-scrollbar,
  #modeSelectorBar::-webkit-scrollbar, #modelSelectorBar::-webkit-scrollbar { display: none; }

  /* ── Settings: FULL-SCREEN on mobile for BOTH themes ──
     Moon already went full-screen; the glass theme (theme_glass_v6/v8) capped the
     drawer with a border-radius + width, making it look "half screen". Force the
     settings panel/drawer to fill the viewport for every theme. */
  .settings-panel, .settings-overlay, .settings-drawer,
  html[data-theme="glass"] .settings-drawer,
  html[data-theme="glass"] .settings-panel .settings-overlay {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    inset: 0 !important;
    overflow-y: auto !important;
  }

  /* ── Account / terms modals: consistent near-full bottom sheet, both themes ── */
  .account-dialog, .terms-dialog, .terms-box {
    width: 100% !important; max-width: 100% !important;
    max-height: 92vh !important; overflow-y: auto !important;
  }
}

/* Very small phones */
@media (max-width: 420px) {
  .welcome-title { font-size: 32px !important; }
  .welcome-logo-mark { width: 64px !important; height: 64px !important; }
  .messages-container, #messagesContainer { padding-left: 12px !important; padding-right: 12px !important; }
  .suggestion-card { padding: 12px 14px !important; }
}

/* Glass theme: remove the dark gradient "shadow" band above the input bar. */
html[data-theme="glass"] .input-area-wrap { background: transparent !important; }