/* Winston V3 — mobile bottom tab bar. */

.bottom-nav {
  /* Pinned to the viewport bottom so the tab bar is always reachable —
     the .app grid grows past 100vh on tall screens, which used to push the
     in-flow nav row below the fold (you had to scroll to the bottom to see
     it). The grid still reserves a --bottom-nav-h row (layout.css), so the
     reserved track now acts as a spacer and content never hides under the
     fixed bar. Desktop overrides this to display:none below — sidebar owns
     nav there. */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: var(--bottom-nav-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-height: var(--tap-min);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  position: relative;
  /* #094: with 6 slots at 390px each label has ~65px of width. Lock the
     basis so no label can squeeze its neighbour; ellipsize rather than
     truncate-mid-word the way "Winston" → "Wins…" used to. */
  flex-basis: 0;
  min-width: 0;
}
.bottom-tab:hover { text-decoration: none; color: var(--ink-2); }

.bottom-tab.is-active { color: var(--ai); }
.bottom-tab.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--ai);
  border-radius: 0 0 2px 2px;
}

.bottom-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.bottom-icon svg, .bottom-icon .lucide { width: 22px; height: 22px; }
.bottom-label {
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "More" overflow button — same visual weight as the other tabs but
   never highlights as active (it's a sheet trigger, not a route). */
.bottom-tab-more {
  background: transparent;
  border: 0;
  font: inherit;
  cursor: pointer;
  color: var(--ink-muted);
}
.bottom-tab-more[aria-expanded="true"] { color: var(--ai); }

/* Tighten interior padding at narrow viewports so 6 labels still fit. */
@media (max-width: 360px) {
  .bottom-tab { font-size: 10px; }
  .bottom-icon svg, .bottom-icon .lucide { width: 20px; height: 20px; }
}

/* Desktop: hide entirely. Sidebar handles navigation. Specificity-matched
   media query so it wins over the base .bottom-nav { display: flex }. */
@media (min-width: 1024px) {
  .bottom-nav { display: none; }
}

/* The mobile Winston chat opens as a bottom-sheet anchored to the viewport
   bottom (winston-chip.css, ≤768px). The bar is now position:fixed, so
   without this it paints over the sheet's composer + toolbar. Hide it while
   the chat is open. Scoped to --bp-md to match where the sheet exists. */
@media (max-width: 768px) {
  html.winston-chip-open .bottom-nav { display: none; }
}

/* ─── More overflow sheet ────────────────────────────────────────────
   Bottom-anchored drawer with backdrop. Hosts items that don't fit
   the bottom-nav strip (Settings, full-label Winston). Hidden on
   desktop — the sidebar already exposes both items there. */

.more-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.more-sheet[hidden] { display: none; }

.more-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  /* Tap-anywhere-to-close. */
  cursor: pointer;
}

.more-sheet-panel {
  position: relative;
  background: var(--surface);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4) calc(env(safe-area-inset-bottom, 0) + var(--space-4));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  /* Slide-up animation; small enough that motion-reduced users barely notice. */
  animation: more-sheet-slide-up 180ms ease-out;
}

@keyframes more-sheet-slide-up {
  from { transform: translateY(8%); opacity: 0.6; }
  to   { transform: translateY(0);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .more-sheet-panel { animation: none; }
}

.more-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  margin: var(--space-1) auto var(--space-4);
}

.more-sheet-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-2);
  min-height: var(--tap-min);
  color: var(--ink);
  border-radius: var(--radius-md);
}
.more-sheet-item:hover { background: var(--surface-2); text-decoration: none; }
.more-sheet-item.is-active { background: var(--ai-soft); color: var(--ai); }
/* Log out is a <button>, not an <a> — reset its native chrome so it sits
   flush with the anchor rows above. */
button.more-sheet-item {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.more-sheet-item:hover { background: var(--surface-2); }

.more-sheet-icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.more-sheet-icon svg, .more-sheet-icon .lucide { width: 22px; height: 22px; }
.more-sheet-label {
  font-weight: var(--weight-semi);
  font-size: var(--type-md);
  letter-spacing: var(--tracking-snug);
}
.more-sheet-sub {
  font-size: var(--type-sm);
  color: var(--ink-muted);
}

/* Lock body scroll while the sheet is open. */
body.more-sheet-open { overflow: hidden; }

@media (min-width: 1024px) {
  .more-sheet { display: none !important; }
}