/* ── Floating Sidebar Island ──────────────────────────────────────────────── */
/* The sidebar is a detached, rounded card that floats over the main content,
   not a panel that pushes it. It slides out of view while a timer is running
   so the active screen gets full width and attention. */

.sidebar {
  position: relative;
  flex-shrink: 0;
  width: 280px;
  min-width: 280px;
  height: 100%;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 20px;
  transition: background 0.3s ease, border-color 0.3s ease,
              width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              min-width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.25s ease,
              opacity 0.25s ease;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Island slides out and shrinks to nothing while a timer is actively
   running - the active screen (timer / break) owns the full canvas. */
.sidebar.is-hidden {
  width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  border-right-color: transparent;
  opacity: 0;
  pointer-events: none;
}

.sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Advisor entry card - its own card, directly above the account card
   (.advisor-profile-wrap below), in the same trigger-card style so the two
   read as a matched pair. The former standalone icon row above it (upload,
   dashboard, export, etc.) moved into the account dropdown itself - see
   #accountMenu in index.html - since it had nowhere sensible left to sit
   once this card took over the "just above the account card" spot. */
.sidebar-advisor-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 10px;
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}
.sidebar-advisor-btn:hover { border-color: var(--dim); }

.sidebar-advisor-avatar-wrap { position: relative; display: flex; flex-shrink: 0; }
.sidebar-advisor-avatar { width: 32px; height: 32px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface); border: 1px solid var(--border); }

/* Unread ping - .has-unread is toggled by js/ai/chat.js / js/ai/panel.js */
.sidebar-advisor-btn.has-unread .sidebar-advisor-avatar-wrap::after {
  content: '';
  position: absolute;
  top: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #EF4444;
  border: 2px solid var(--bg);
}

.sidebar-advisor-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sidebar-advisor-title { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-advisor-sub { font-size: 12px; color: var(--dim); }

.sidebar.collapsed .sidebar-advisor-btn { justify-content: center; padding: 8px; gap: 0; }
.sidebar.collapsed .sidebar-advisor-text { display: none; }

/* ── Brand row (logo + name + collapse toggle) ──
   Template treatment: a distinct header band with a hairline under it
   (Master-template.html's `h-16 ... border-b`), separating the wordmark from
   the session controls below. */
.sidebar-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.app-logo {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  object-fit: contain;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--border);
}
/* Template wordmark: a display-voice logotype, not an uppercase tracked label
   - larger, weight 600, negative tracking (Master-template.html's
   `display-voice text-xl tracking-tight`). */
.app-brand {
  font-family: var(--display-font);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: var(--display-track);
  text-transform: none;
  color: var(--text);
  padding: 2px 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-collapse-btn {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  font-size: 15px;
  transition: all 0.2s ease;
}
.sidebar-collapse-btn:hover { background: var(--bg); color: var(--accent); }

/* ── Collapsed state - shrinks to a narrow pill ── */
.sidebar.collapsed {
  width: 72px;
  min-width: 72px;
  padding: 24px 14px;
  align-items: center;
}
.sidebar.collapsed .sidebar-brand-row { flex-direction: column; gap: 12px; margin-bottom: 2px; }
.sidebar.collapsed .app-brand,
.sidebar.collapsed .session-selector {
  display: none;
}
.sidebar.collapsed .sidebar-top { align-items: center; }
.sidebar.collapsed .neu-btn.icon-only {
  width: 40px;
  height: 40px;
}
.sidebar.collapsed .sidebar-collapse-btn { transform: rotate(180deg); }

/* ── Account drop-up (reuses .advisor-profile-* from ai-chat.css) ──────────
   That class already carries margin-top:auto to self-anchor to the bottom
   of a flex column - here it directly follows .sidebar-advisor-btn, which
   claims that auto-margin push itself, so a second auto margin here would
   split the remaining space and open an unwanted gap between the two cards.
   Override to a fixed gap instead. */
.sidebar .advisor-profile-wrap { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ── Navigation capsule (sits between the Advisor card and the account card) ──
   Base look is in base.css (shared with Advisor's own sidebar); these are the
   in-sidebar spacing + collapsed-rail overrides, mirroring the account card. */
.sidebar .nav-capsule { margin-top: 4px; }
.sidebar.collapsed .nav-capsule-trigger { justify-content: center; padding: 8px; }
.sidebar.collapsed .nav-capsule-text,
.sidebar.collapsed .nav-capsule-chevron { display: none; }
.sidebar.collapsed .nav-capsule-menu {
  position: fixed;
  bottom: 24px;
  left: 84px;
  right: auto;
  top: auto;
  width: 260px;
}
.sidebar.collapsed .advisor-profile-trigger { justify-content: center; padding: 8px; }
.sidebar.collapsed .advisor-profile-trigger-text,
.sidebar.collapsed .advisor-profile-chevron { display: none; }
/* Collapsed sidebar is only 72px wide - let the menu overflow past it at a
   readable width instead of squeezing to match, same idea as the chapter
   panel following the sidebar's collapsed offset. Needs position:fixed here
   specifically (not just a wider absolute box, like the uncollapsed case
   above): .sidebar has overflow-x:hidden for its own scrolling, which would
   otherwise clip anything positioned absolute past its 72px edge. Fixed
   positioning's containing block is the viewport, so it isn't affected by
   that ancestor's overflow at all. */
.sidebar.collapsed .advisor-profile-menu {
  position: fixed;
  bottom: 24px;
  left: 84px;
  right: auto;
  top: auto;
  width: 260px;
}

/* ── Quick page links - bottom-of-sidebar shortcuts (Home/Dashboard/Logbook),
   filled by js/nav.js. Sits just below the Navigate capsule, above the account
   card. On the collapsed rail they stack as icon-only buttons. ── */
.sidebar-quick { display: flex; gap: 6px; margin-top: 6px; }
.sidebar-quick:empty { display: none; }
.sidebar-quick-link {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 4px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg);
  color: var(--dim); text-decoration: none;
  font-size: 10.5px; font-weight: 600; text-align: center;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.sidebar-quick-link i { font-size: 18px; }
.sidebar-quick-link span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-quick-link:hover { color: var(--text); border-color: var(--dim); }
.sidebar-quick-link.active { color: var(--accent); border-color: var(--accent); background: var(--surface); }
.sidebar.collapsed .sidebar-quick { flex-direction: column; }
.sidebar.collapsed .sidebar-quick-link { padding: 8px; }
.sidebar.collapsed .sidebar-quick-link span { display: none; }

/* Same quick links inside the Navigate popover - shown ONLY when it's the
   mobile popover (the desktop drop-up keeps just its full labelled list, and
   the sidebar's own bottom row already covers desktop). */
.nav-capsule-menu .nav-quick-row { display: none; }
.nav-capsule-menu.mobile-popover .nav-quick-row {
  display: flex; gap: 6px; padding: 4px 4px 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── Session Selector Compartment ── */
.session-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.session-selector select {
  width: 100%;
  padding: 10px 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px;
  transition: border-color 0.2s, background-color 0.2s;
}

.session-selector select:focus {
  border-color: var(--accent);
  background: var(--surface);
}

/* ── Chapter Panel & Dynamic Cards ── */
.chapter-shortcuts {
      display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 14px 0 0 0;
    border-radius: var(--r-md);
}

.chapter-shortcuts-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dim);
}

.sess-del-btn {
  padding: 4px 6px !important;
  flex-shrink: 0;
  border: none !important;
  background: transparent !important;
  font-size: 13px;
  color: var(--dim) !important;
  cursor: pointer;
  transition: color 0.2s ease;
  width: auto !important;
  height: auto !important;
}

.sess-del-btn:hover:not(:disabled) {
  color: #EF4444 !important;
}

.chapter-chip-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chapter-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.15s ease;
  text-align: left;
}

.chapter-chip:hover {
  border-color: var(--dim);
  transform: translateX(1px);
}

.chapter-chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.chapter-chip-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Starred indicator - a plain Unicode glyph (★), not an icon-font class.
   The "filled star" tabler glyph isn't actually bundled in the webfont CDN,
   which made it render as nothing; the text glyph sidesteps that entirely.
   This is now a static badge - starring/unstarring lives in the ⋮ menu. */
.chip-star-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  flex-shrink: 0;
  color: #F59E0B;
  font-size: 13px;
}
.star-glyph {
  font-family: Arial, sans-serif;
  line-height: 1;
  transform: translateY(-0.5px);
}

/* ── ⋮ options menu (star / edit / delete) ── */
/* Rows are unpositioned by default, so a later sibling row would normally
   paint over an earlier row's absolutely-positioned open menu once that
   sibling is hovered (its own hover styles create a new paint layer above
   the menu). Each row gets its own stacking context, raised only while its
   menu is open, so the dropdown always wins the hover tug-of-war. */
.chapter-chip, .chapter-panel-row { position: relative; z-index: 1; }
.chapter-chip:has(.chip-menu.open), .chapter-panel-row:has(.chip-menu.open) { z-index: 50; }

.chip-menu-wrap { position: relative; flex-shrink: 0; }
.chip-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--dim);
  font-size: 14px;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.chapter-chip:hover .chip-menu-btn,
.chapter-panel-row:hover .chip-menu-btn { opacity: 0.85; }
.chip-menu-btn:hover { background: var(--bg); color: var(--text); opacity: 1; }
.chip-menu-wrap:has(.chip-menu.open) .chip-menu-btn { background: var(--bg); color: var(--text); opacity: 1; }

.chip-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 138px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.12), 0 2px 6px rgba(17, 17, 17, 0.06);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 1px;
  z-index: 200;
}
[data-dark] .chip-menu { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); }
.chip-menu.open { display: flex; animation: menuIn 0.15s cubic-bezier(0.16, 1, 0.3, 1); }

.chip-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.chip-menu-item i { font-size: 14px; color: var(--dim); flex-shrink: 0; }
.chip-menu-item:hover { background: var(--bg); }
.chip-menu-item.danger { color: #EF4444; }
.chip-menu-item.danger i { color: #EF4444; }
.chip-menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.chip-menu-item:disabled:hover { background: transparent; }

.chapter-chip-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--dim);
  flex-shrink: 0;
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
}

.chapter-chip.active .chapter-chip-count {
  background: var(--surface);
  color: var(--accent);
}

.chapter-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  color: var(--dim);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.chapter-more-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* ── Subject row (select + delete subject) ── */
.subject-select-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.subject-select-row select { flex: 1; }
#subjectAddBtn, #subjectDelBtn { flex-shrink: 0; }

/* ── Floating Chapter Panel ──────────────────────────────────────────────── */
/* Visual twin of the sidebar island, anchored just to its right. Holds the
   full chapter list for the selected subject, chapter creation, and
   per-chapter deletion - kept out of the main sidebar to keep that compact. */
.chapter-panel {
  position: fixed;
  top: 20px;
  left: 296px;
  bottom: 20px;
  width: 280px;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.08), 0 2px 8px rgba(17, 17, 17, 0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 18px;
  z-index: 110;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-12px) scale(0.97);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Follow the sidebar in when it collapses, instead of staying pinned to the
   expanded-width offset and leaving a dead gap (desktop only - on mobile
   the panel gets its own full-width positioning in responsive.css). */
@media (min-width: 769px) {
  .sidebar.collapsed ~ .chapter-panel { left: 88px; }
}
[data-dark] .chapter-panel {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.chapter-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.chapter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.chapter-panel-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chapter-panel-title span { color: var(--text); }

.chapter-panel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  overflow-y: auto;
}

.chapter-panel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 9px 9px 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chapter-panel-row:hover { border-color: var(--dim); }
.chapter-panel-row.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.chapter-panel-empty { text-align: center; font-size: 12px; color: var(--dim); padding: 24px 0; }

/* ── Sidebar Buttons ── */
.sidebar .neu-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  transition: all 0.2s ease;
}

.sidebar .neu-btn i {
  font-size: 16px;
  color: var(--dim);
}

.sidebar .neu-btn:hover {
  background: var(--bg);
  border-color: var(--dim);
}

.sidebar .neu-btn:hover i {
  color: var(--text);
}

/* Bottom dock - icon-only utility row, distinct from session actions above.
   These are utility actions (dashboard, export, theme, undo) and intentionally
   read lighter/smaller than the primary session controls. */
.sidebar .neu-btn.icon-only {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0;
  justify-content: center;
  border-radius: var(--r-sm);
}
.sidebar .neu-btn.icon-only i { font-size: 15px; }

#undoBtn:hover:not(:disabled) {
  border-color: #F59E0B !important;
  color: #F59E0B !important;
  background: transparent;
}
#undoBtn:hover:not(:disabled) i { color: #F59E0B !important; }
#undoBtn:disabled { cursor: not-allowed; }

/* ── Sync and Auth Modals ── */
.sync-status { display: flex; align-items: center; gap: 8px; font-size: 11px; opacity: 0.7; }
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.sync-dot.synced { background: #10B981; }
.sync-dot.syncing { background: var(--accent); animation: pulse 1.5s infinite; }
.sync-dot.error { background: #EF4444; }

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}
.google-btn:hover { border-color: var(--dim); background: var(--bg); }

@keyframes menuIn { from { opacity: 0; transform: scale(0.95) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }