/* ── Variables & Reset ──────────────────────────────────────────────────
   Retheme: Cal.com design system (see DESIGN-cal.md). Monochrome ink/canvas
   base, blue reserved for focus/selection accents only - never on primary
   CTAs, which stay black via --text feeding .btn-primary. Radii capped at
   Cal's 16px ceiling. */
:root {
  --bg: #F8F9FA;              /* template surface-soft (#f8f9fa) */
  --surface: #FFFFFF;         /* template canvas */
  --surface-strong: #E5E7EB;  /* template surface-strong */
  --text: #111111;            /* template ink (#111111) */
  --body-text: #374151;       /* template body */
  --border: #E5E7EB;          /* template hairline (#e5e7eb) */
  --border-soft: #F3F4F6;     /* template hairline-soft (#f3f4f6) */
  /* Redesign → Master-template.html is a pure monochrome system: it has no
     blue at all. Active/selected/focus states are ink-on-grey (black text +
     border over #f5f5f5), never a colour accent. Retargeting --accent to ink
     and --accent-soft to the template's #f5f5f5 surface flips every selection
     state (pills, chapter chips, presets, focus rings) to that look in one
     move. Semantic success/error stay their own vars, untouched. */
  --accent: #111111;          /* was #3B82F6 - monochrome selection ink */
  --accent-soft: #F5F5F5;     /* template surface-card, selection fill */
  --dim: #6B7280;             /* template muted (#6b7280) */
  --dim-soft: #898989;        /* template muted-soft (#898989) */
  --primary-active: #242424;  /* template primary-active (#242424) */
  /* Template radii: controls 6px (rounded-md), cards/overlays 12px (rounded-xl). */
  --r-lg: 12px; --r-md: 6px; --r-sm: 6px;
  --display-font: 'Cal Sans', 'Inter', sans-serif;
  --display-track: -0.03em;   /* template display-voice tightens to -0.05em; -0.03em keeps headings crisp but readable */
  font-family: 'Inter', sans-serif;
}
[data-dark] {
  --bg: #101010;              /* template dark-closure (#101010) */
  --surface: #1A1A1A;
  --surface-strong: #272A30;
  --text: #FFFFFF;
  --body-text: #D1D5DB;
  --border: #272A30;
  --border-soft: #1F2125;
  /* Monochrome selection inverts on dark: light ink over a faint white fill. */
  --accent: #E5E7EB;
  --accent-soft: rgba(255, 255, 255, 0.08);
  --dim: #A1A1AA;
  --dim-soft: #8B8B93;
  --primary-active: #E5E7EB;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); min-height: 100vh; display: flex; transition: background 0.3s, color 0.3s; user-select: none; }
.hidden { display: none !important; }

/* ── Layout ── */
.app-container { display: flex; width: 100vw; height: 100vh; overflow: hidden; }
.main-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; position: relative; }
#screen-main, #screen-break, #screen-stats, #screen-dashboard {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; display: none;
}
#screen-main:not([style*="display: none"]) { display: flex; }
#screen-break.vis, #screen-stats.vis { display: flex; }
#screen-stats.vis { display: block; max-width: 800px; margin: 0 auto; width: 100%; }
#screen-dashboard.vis { display: flex; flex-direction: column; padding: 20px 24px; }
/* NOTE: sidebar is now a normal in-flow flex panel (not a floating overlay),
   so main-content is pushed automatically by its width - no manual
   padding-left offset needed here anymore. */

/* ── Sidebar ── */
/* Sidebar: positioning & shell fully defined in sidebar.css (floating island) */
.sidebar-top { display: flex; flex-direction: column; gap: 16px; }
.app-brand { font-family: var(--display-font); font-size: 19px; font-weight: 600; letter-spacing: var(--display-track); text-transform: none; color: var(--text); }

/* ── Mobile Header ── */
/* Transparent at rest by design - it's just a hamburger floating over the
   page, not a bar with its own visual weight. Also fully hidden (not just
   see-through) while a focus session is running, same as the sidebar (see
   .is-hidden below and hideSidebarForFocus()/showSidebarAfterFocus() in
   js/ui.js) so the timer screen gets full, undistracted attention. */
.mobile-header { display: none; position: fixed; top: 0; left: 0; right: 0; height: 56px; background: transparent; border-bottom: 1px solid transparent; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 64px 0 16px; z-index: 200; transition: transform 0.25s ease, opacity 0.25s ease; }
.mobile-header.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }

/* ── Mobile floating shortcut capsule (account + advisor) ──
   Desktop-hidden by default; shown and positioned in responsive.css. Full
   behavior (drag-to-reposition, corner snapping) lives in
   initMobileShortcutCapsule() in js/ui.js. */
.mobile-shortcut-capsule {
  display: none;
  position: fixed;
  z-index: 205;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.14);
  cursor: grab;
  touch-action: none;
  transition: transform 0.25s ease, opacity 0.25s ease, top 0.2s ease, left 0.2s ease, right 0.2s ease, bottom 0.2s ease;
}
.mobile-shortcut-capsule.dragging { cursor: grabbing; transition: none; }
/* .hidden (fully hides while the drawer is open) is the shared utility class
   from ai-chat.css; .is-hidden (fades out during a focus session, alongside
   the sidebar/header) is local to this component. */
.mobile-shortcut-capsule.is-hidden { opacity: 0; transform: scale(0.85); pointer-events: none; }

.mobile-shortcut-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mobile-shortcut-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--bg); border: 1px solid var(--border); }
.mobile-shortcut-divider { width: 22px; height: 1px; background: var(--border); flex-shrink: 0; }
/* Icon (non-avatar) capsule button - e.g. the Navigate shortcut. */
.mobile-shortcut-icon-btn { color: var(--text); font-size: 20px; }
.mobile-shortcut-icon-btn:hover { color: var(--accent, var(--text)); }

/* Snap positions - top ones sit just under the fixed header (hamburger /
   notif bell), bottom ones sit clear of any home-indicator safe area. */
.mobile-shortcut-capsule.pos-tl { top: 64px; left: 12px; right: auto; bottom: auto; }
.mobile-shortcut-capsule.pos-tr { top: 64px; right: 12px; left: auto; bottom: auto; }
.mobile-shortcut-capsule.pos-bl { bottom: 20px; left: 12px; right: auto; top: auto; }
.mobile-shortcut-capsule.pos-br { bottom: 20px; right: 12px; left: auto; top: auto; }
.mobile-brand { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.hamburger { background: transparent; border: none; cursor: pointer; color: var(--text); padding: 8px; border-radius: var(--r-sm); font-size: 20px; display: flex; align-items: center; }
.hamburger:hover { background: var(--bg); }

/* ── Cross-page navigation capsule (shared "Navigate" drop-up; js/nav.js) ──
   Lives in the sidebar on every page (its own bespoke sidebar on Advisor).
   Styled self-contained here in base.css because it appears on Advisor too,
   which loads neither sidebar.css nor ai-chat.css. */
.nav-capsule { position: relative; }
.nav-capsule-trigger {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-md);
  padding: 10px; cursor: pointer; text-align: left; color: var(--text);
  font-family: inherit; transition: all 0.2s;
}
.nav-capsule-trigger:hover { background: var(--bg); border-color: var(--border); }
.nav-capsule.open .nav-capsule-trigger { background: var(--bg); border-color: var(--border); }
.nav-capsule-ic {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border); color: var(--dim);
}
.nav-capsule-ic i { font-size: 19px; }
.nav-capsule.open .nav-capsule-ic { color: var(--text); border-color: var(--dim); }
.nav-capsule-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nav-capsule-label { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-capsule-sub { font-size: 12px; color: var(--dim); }
.nav-capsule-chevron { font-size: 16px; color: var(--dim); flex-shrink: 0; transition: transform 0.2s; }
.nav-capsule.open .nav-capsule-chevron { transform: rotate(180deg); }

.nav-capsule-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 6px; box-shadow: 0 4px 20px rgba(17,17,17,0.08);
  display: flex; flex-direction: column; gap: 2px; z-index: 40;
  max-height: min(440px, calc(100vh - 100px));
  max-height: min(440px, calc(100dvh - 100px));
  overflow-y: auto;
}
.nav-capsule-menu.hidden { display: none; }
[data-dark] .nav-capsule-menu { box-shadow: 0 10px 32px rgba(0,0,0,0.45); }

.nav-menu-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px;
  border-radius: var(--r-sm); text-decoration: none; color: var(--text);
  transition: background 0.15s;
}
.nav-menu-item:hover { background: var(--bg); }
.nav-menu-item.active { background: var(--bg); }
.nav-menu-item-ic { font-size: 18px; color: var(--dim); flex-shrink: 0; width: 20px; text-align: center; }
.nav-menu-item.active .nav-menu-item-ic { color: var(--accent, var(--text)); }
.nav-menu-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.nav-menu-item-label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.nav-menu-item.active .nav-menu-item-label { color: var(--accent, var(--text)); }
.nav-menu-item-sub { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-menu-item-tick { font-size: 15px; color: var(--accent, var(--text)); flex-shrink: 0; }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99; }
.sidebar-overlay.show { display: block; }

/* ── Buttons ── */
.neu-btn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; color: var(--text); transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-family: inherit; font-size: 13px; font-weight: 600; }
.neu-btn:hover { border-color: var(--dim); color: var(--text); background: var(--bg); }
.neu-btn:active { transform: scale(0.98); }
.act-btn { flex: 1; height: 40px; padding: 0 20px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; border: 1px solid transparent; }
.btn-primary { background: var(--text); color: var(--bg); }
[data-dark] .btn-primary { color: #111111; }
.btn-primary:hover { background: var(--primary-active); transform: none; }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--bg); border-color: var(--dim); }

/* ── Inputs ── */
.neu-input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; font-size: 14px; color: var(--text); outline: none; font-family: inherit; transition: border-color 0.2s; }
.neu-input:focus { border-color: var(--text); background: var(--surface); }
select.neu-input { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236B7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 32px; }
textarea.neu-input { resize: vertical; min-height: 80px; }

/* ── Badges (timer info in sidebar) ── */
.badge { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: var(--bg); border-radius: var(--r-md); border: 1px solid var(--border); font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); }
.badge-label { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Labels ── */
.flabel { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--dim); margin-bottom: 10px; display: block; }

/* ── Modals ──
   .overlay scrolls (not just centers) and .modal caps its own height with
   an internal scrollbar - on a short/mobile viewport, or once a modal's
   content grows (e.g. several saved API keys + a long custom-instructions
   textarea in the Advisor Configuration modal), a fixed-height centered
   overlay with no overflow handling pushes the title above the top edge
   and the action buttons below the bottom edge with literally no way to
   reach either. Both rules below exist so that never happens, on any
   modal in the app. */
.overlay { position: fixed; inset: 0; background: rgba(17,17,17,0.4); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 300; overflow-y: auto; padding: 24px 16px; }
.overlay.hide { display: none; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 20px 40px rgba(17,17,17,0.12); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; margin: auto; }
.modal h2 { font-family: var(--display-font); font-size: 22px; font-weight: 600; letter-spacing: var(--display-track); margin-bottom: 24px; }
.modal-field { margin-bottom: 18px; }
.sess-pick-item { padding: 12px; border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 8px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: space-between; }
.sess-pick-item.selected { border-color: var(--accent); background: var(--accent-soft); }

/* ── Export Modal ── */
.export-modal { width: min(480px, calc(100vw - 32px)); }
.export-controls {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.export-controls .scope-toggle { height: 40px; align-items: center; }

.export-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
  margin: 0 -4px;
}
.export-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
  padding: 10px 4px 2px;
}
.export-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.export-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  margin: 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.15s ease, background-color 0.18s ease;
}
.export-row:hover:not(.disabled) { border-color: var(--accent); background: var(--surface); }
.export-row.export-row-subject { background: var(--accent-soft); border-color: var(--border); }
.export-row.export-row-subject:hover:not(.disabled) { border-color: var(--accent); }
.export-row.disabled { opacity: 0.45; cursor: not-allowed; }

.export-row-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 14px;
}
.export-row-subject .export-row-icon { color: var(--accent); }

.export-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.export-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.export-row-sub {
  font-size: 11px;
  color: var(--dim);
  font-family: 'JetBrains Mono', monospace;
}

.export-dl-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.export-row:hover:not(.disabled) .export-dl-btn { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.export-dl-btn:disabled { cursor: not-allowed; }

/* ── Upload Chapters modal ── */
.modal-wide { width: min(520px, calc(100vw - 32px)); }
.upload-drop-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.upload-filename { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.upload-filename.ok { color: #10B981; }
.upload-filename.bad { color: #EF4444; }
.upload-prompt-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.upload-copy-btn { width: auto; padding: 6px 10px; font-size: 11px; flex-shrink: 0; }
.upload-prompt-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

/* ── Misc ── */
.neu-r { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
#emptyLog { text-align:center; opacity:0.5; font-size:13px; padding:60px 0; }

*::-webkit-scrollbar {
  width: 10px;                         /* Width of vertical scrollbar */
  height: 10px;                        /* Height of horizontal scrollbar */
}

/* The background track of the scrollbar */
*::-webkit-scrollbar-track {
  background: transparent;                 /* Track background color */
  border-radius: 5px;                  /* Rounded corners for the track */
}

/* The draggable scrolling handle */
*::-webkit-scrollbar-thumb {
  background: #888888;                 /* Thumb color */
  border-radius: 5px;                  /* Rounded corners for the thumb */
  border: 2px solid #f1f1f1;           /* Creates a padding effect around thumb */
}

/* Hover state for the draggable handle */
*::-webkit-scrollbar-thumb:hover {
  background: #555555;                 /* Darker color on hover */
}

/* ── Notification bell widget (top right - the account widget now lives in
   the sidebar's drop-up trigger instead of sharing this corner) ── */
.notif-widget {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 250;
}
.notif-trigger {
  position: relative;
  font-size: 16px;
  color: var(--text);
}
.notif-trigger-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid var(--surface);
}
.notif-menu {
      position: absolute;
    top: 44px;
    right: 0;
    width: min(360px, calc(100vw - 32px));
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    padding: 22px 20px;
}
.notif-menu.hidden { display: none; }
.notif-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}
.notif-menu-header-actions { display: flex; align-items: center; gap: 8px; }
.notif-menu-header-actions .neu-btn.icon-only { width: 28px; height: 28px; padding: 0; }
.notif-menu-text-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.notif-menu-text-btn:hover { text-decoration: underline; }
.notif-menu-body { flex: 1; min-height: 0; overflow-y: auto; }
.notif-section { padding: 8px 0; }
.notif-section + .notif-section { border-top: 1px solid var(--border); }
.notif-section-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
  padding: 4px 4px 8px;
}
.notif-upcoming-list, .notif-activity-list { display: flex; flex-direction: column; }
.notif-empty { padding: 10px 14px 14px; font-size: 12px; color: var(--dim); }
.notif-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 14px;
  cursor: default;
  transition: background-color 0.15s ease;
}
.notif-activity-row { cursor: pointer; }
.notif-activity-row:hover { background: var(--bg); }
.notif-activity-row.unread { background: var(--accent-soft); }
.notif-row-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--accent);
}
.notif-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-row-title { font-size: 12.5px; font-weight: 500; color: var(--text); }
.notif-row-body { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-row-time { font-size: 10.5px; color: var(--dim); font-family: 'JetBrains Mono', monospace; }
.notif-row-cancel {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.notif-row-cancel:hover { background: var(--bg); color: var(--text); }