/* ============================================================
   Shared sidebar (partials/app_sidebar.html), used by every signed-in page
   including chat. One set of rules; the only per-page difference is the
   token source: workspace pages get the editorial --vc-* tokens from
   editorial-dashboard.css, chat pages (which do not load that layer) map the
   same tokens onto the chat's --cv-* palette below, so both stay in step in
   light and dark mode.
   ============================================================ */

body.cv-chat-page .vc-sidebar {
  --vc-paper: var(--cv-canvas);
  --vc-white: var(--cv-bg);
  --vc-ink: var(--cv-ink);
  --vc-black: var(--cv-ink-strong);
  --vc-muted: var(--cv-muted);
  --vc-line: var(--cv-line);
  --vc-accent: var(--cv-accent);
  --vc-accent-tint: var(--cv-accent-tint);
  --vc-radius: var(--cv-r-md);
  color: var(--cv-ink);
}

/* ── Sidebar: canvas surface, mono labels, soft teal active pill ── */
body.vc-shell .vc-sidebar {
  background: var(--vc-paper); border-right: 1px solid var(--vc-line);
}
body.vc-shell .vc-sidebar-logo-badge {
  background: var(--vc-accent); color: #ffffff; box-shadow: none; border-radius: 8px;
}
html[data-theme="dark"] body.vc-shell .vc-sidebar-logo-badge { color: #070b1c; }
body.vc-shell .vc-sidebar-logo-text { font-family: var(--font-brand); font-weight: 600; letter-spacing: -0.02em; font-size: 1.375rem; white-space: nowrap; }
body.vc-shell .vc-sidebar-logo-lockup { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.vc-shell .vc-sidebar-logo-byline {
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--vc-muted);
}
body.vc-shell .vc-sidebar-link {
  color: var(--vc-muted); border-radius: var(--vc-radius);
}
body.vc-shell .vc-sidebar-link:hover { background: var(--vc-accent-tint); color: var(--vc-ink); }
body.vc-shell .vc-sidebar-link.is-active {
  background: var(--vc-accent-tint); color: var(--vc-ink); font-weight: 500; box-shadow: none;
}
body.vc-shell .vc-sidebar-user,
body.vc-shell .vc-sidebar-menu-item,
body.vc-shell .vc-sidebar-user-name { font-family: var(--font-body); }
body.vc-shell .vc-sidebar-user-name { font-size: 0.9375rem; }


/* ── Chat section (chat pages only): New chat, search, conversation list ── */
/* The conversation list takes the flexible space, with a real minimum: with a 140px basis a
   722px-tall window left the list 18px tall behind the workspace links (staging, 2026-10-09). */
.vc-sidebar-chats { display: flex; flex-direction: column; gap: 10px; flex: 1 1 0; min-height: min(300px, 42vh); padding: 6px 12px 8px; overflow: hidden; }
.vc-sidebar-chats-actions { display: flex; gap: 8px; }
.vc-sidebar-chats .cv-history-new { flex: 1 1 auto; width: auto; }
.vc-sidebar-chats .cv-history-nav { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 3px; }
.vc-sidebar--chats .vc-sidebar-section-label,
.vc-sidebar--chats .vc-sidebar-footer { flex: 0 0 auto; }
/* Short windows: the nav scrolls instead of pushing the account footer off screen. */
.vc-sidebar--chats .vc-sidebar-nav { flex: 0 1 auto; min-height: 88px; overflow-y: auto; }
/* Short windows: tighter workspace links so both lists stay usable. */
@media (max-height: 820px) {
  .vc-sidebar--chats .vc-sidebar-link { padding-top: 6px; padding-bottom: 6px; }
  .vc-sidebar.vc-sidebar--chats .vc-sidebar-section-label { margin-top: 0; padding-top: 10px; }
}
/* Very short windows (phone landscape): smaller list floor, and the sidebar scrolls so the
   account footer is never pushed off-screen. */
@media (max-height: 560px) {
  .vc-sidebar-chats { min-height: 120px; }
  .vc-sidebar.vc-sidebar--chats { overflow-y: auto; }
}
/* Mouse: compact rows, and the row menu overlays the title on hover/focus instead of
   permanently reserving 44px of a 184px row. Touch keeps 44px targets (conversation.css). */
@media (hover: hover) and (pointer: fine) {
  .vc-sidebar-chats .cv-history-list { gap: 2px; }
  .vc-sidebar-chats .cv-history-open { min-height: 34px; padding: 4px 8px; font-size: 0.9375rem; }
  /* Anchored to the 34px title row, not the item: an open menu wraps below and grows the item. */
  .vc-sidebar-chats .cv-history-menu-btn { position: absolute; right: 3px; top: 3px;
    flex: none; width: 28px; height: 28px; min-height: 28px; border-radius: 6px; }
  .vc-sidebar-chats .cv-history-item:is(:hover, :focus-within, .is-current) .cv-history-open { padding-right: 34px; }
  .vc-sidebar-chats .cv-history-item:has(.cv-history-menu-btn[aria-expanded="true"]) .cv-history-open { padding-right: 34px; }
  /* Row menu: one compact line of actions under the title, not a bordered stack of 44px rows
     that pushed the list apart and overflowed the row by its side margins (George, 2026-10-09). */
  .vc-sidebar-chats .cv-history-menu { flex: 0 0 100%; box-sizing: border-box; flex-direction: row; gap: 4px;
    margin: 0; padding: 0 6px 6px; border: 0; border-radius: 0; background: transparent; }
  /* Outlined, so the actions keep their shape on the current row's --cv-soft background. */
  .vc-sidebar-chats .cv-history-menu button { min-height: 26px; padding: 0 10px; font-size: 0.9375rem; border-radius: 6px;
    background: transparent; border: 1px solid var(--cv-line-strong); }
  .vc-sidebar-chats .cv-history-menu button:hover { background: var(--cv-accent-tint); }
  .vc-sidebar-chats .cv-history-menu .cv-history-delete:hover { background: var(--cv-danger-tint); border-color: var(--cv-danger); }
  .vc-sidebar-chats .cv-history-rename { min-height: 30px; font-size: 0.9375rem; }
}
/* Date groups (Today, Yesterday…): spacing here; type and colour in the shared block at the end. */
.vc-sidebar--chats .cv-history-list .cv-history-group { margin: 14px 8px 4px; }
.vc-sidebar--chats .cv-history-list .cv-history-group:first-child { margin-top: 4px; }
/* Workspace pages: the single "Chat" link takes its own height, not the flexible space
   (.vc-sidebar-nav grows to fill the column, which left a gap above "Your work"). */
.vc-sidebar-nav.vc-sidebar-nav--chat { flex: 0 0 auto; overflow: visible; padding-bottom: 6px; }
/* Chat has no rail mode (see base.html); the list is its main navigation. */
.vc-sidebar--chats .vc-sidebar-collapse { display: none; }
.vc-sidebar--chats .vc-sidebar-section-label { border-top: 1px solid var(--vc-line); margin-top: 4px; padding-top: 14px; }

@media (max-width: 768px) {
  /* Wider drawer on phones: the conversation list needs the room. Hiding/sliding comes from app.css. */
  .vc-sidebar--chats { width: min(320px, 88vw); }
}

/* Theme control: an icon showing the theme it switches to (moon in light, sun in dark), like the chat and guest
   pages; base.html keeps its label and tooltip in step. */
.vc-sidebar-theme-toggle { width:36px; height:36px; justify-content:center; padding:0; border-radius:9999px; }
html .vc-sidebar-theme-toggle .vc-theme-icon-sun { display:none; }
html .vc-sidebar-theme-toggle .vc-theme-icon-moon { display:block; }
html[data-theme="dark"] .vc-sidebar-theme-toggle .vc-theme-icon-sun { display:block; }
html[data-theme="dark"] .vc-sidebar-theme-toggle .vc-theme-icon-moon { display:none; }

/* The phone menu button is a 44px touch target (it was 32px). Hidden on desktop by app.css. */
.vc-sidebar-toggle { width:44px; height:44px; border-radius:10px; }

/* "Your work" folds away (George, 2026-10-23): the header is a button; folded, only the page you are on stays
   listed. The icon rail (body.sidebar-collapsed) always shows every icon. */
.vc-sidebar-section-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; border:0; background:transparent;
  text-align:left; cursor:pointer; font:inherit; }
.vc-sidebar-section-toggle:hover { color:var(--vc-ink); }
.vc-sidebar-section-toggle:focus-visible { outline:2px solid var(--vc-accent); outline-offset:-2px; border-radius:6px; }
.vc-sidebar-section-chevron { flex:none; transition:transform .15s ease; }
html[data-work-collapsed="1"] .vc-sidebar-section-chevron { transform:rotate(-90deg); }
html[data-work-collapsed="1"] body:not(.sidebar-collapsed) #vc-work-nav .vc-sidebar-link:not(.is-active) { display:none; }
html[data-work-collapsed="1"] body:not(.sidebar-collapsed) #vc-work-nav { min-height:0; }
/* On pages with no work link (Chat, Billing) the folded nav would be an empty padded box. */
html[data-work-collapsed="1"] body:not(.sidebar-collapsed) #vc-work-nav:not(:has(.is-active)) { display:none; }
/* The rail hides the label; visibility (not pointer-events) also takes it out of the tab order and the
   accessibility tree, and keeps its height so the icons do not move. The phone drawer shows it again. */
@media (min-width: 769px) { body.sidebar-collapsed .vc-sidebar-section-toggle { visibility:hidden; } }
body.sidebar-collapsed .vc-sidebar-section-chevron { display:none; }

/* Theme switch as a menu row (it moved from under the account button). */
.vc-sidebar-user-menu .vc-sidebar-menu-theme.vc-sidebar-theme-toggle { width:100%; height:auto; display:flex; align-items:center;
  justify-content:flex-start; gap:8px; border-radius:0; padding:7px 14px; }
/* Every row in the account menu in one font: app.css forces buttons to the heading font with !important, so
   Take a tour, the theme switch and Sign out used to differ from the links beside them. */
body.vc-shell .vc-sidebar-user-menu button.vc-sidebar-menu-item { font-family:var(--font-body) !important; }
body.vc-shell .vc-sidebar-user-menu .vc-sidebar-menu-theme { white-space:nowrap; }
/* The rail's account menu is a full-width panel: the theme row keeps its words like every other row. */
body.sidebar-collapsed .vc-sidebar-user-menu .vc-sidebar-theme-toggle span { display:inline; }
.vc-sidebar-menu-version { padding:2px 0; }
/* app.css lays the version out as a centred flex row (for the guest footer); here it is a plain menu row. */
.vc-sidebar-menu-version .vc-software-version { margin:0; display:block; }
/* One marker (our chevron), aligned with the other rows. */
.vc-sidebar-menu-version summary { display:flex; align-items:center; gap:6px; padding:7px 14px; list-style:none; cursor:pointer;
  color:var(--vc-muted); font-family:var(--font-body); font-size:0.8125rem; }
.vc-sidebar-menu-version summary::-webkit-details-marker { display:none; }
.vc-sidebar-menu-version summary::marker { content:""; }
.vc-sidebar-menu-version summary:hover { color:var(--vc-ink); }
.vc-sidebar-menu-version [open] summary svg { transform:rotate(180deg); }
.vc-sidebar-menu-version .vc-software-info { padding:0 14px 6px; color:var(--vc-muted); font-size:0.8125rem; line-height:1.5; }
@media (prefers-reduced-motion: reduce) { .vc-sidebar-section-chevron { transition:none; } }

/* The cookie banner spans the full width: lift the account button above it while it shows, the same way the chat
   composer reads --vc-cookie-h (base.html). Since the theme and version rows moved into the menu, the account
   button is the last thing in the sidebar and sat under the banner (e2e, 2026-10-23). */
.vc-sidebar-footer { padding-bottom:calc(14px + var(--vc-cookie-h, 0px)); }
.sidebar-collapsed .vc-sidebar-footer { padding-bottom:calc(14px + var(--vc-cookie-h, 0px)); }

/* One type system for the whole sidebar (George, 2026-10-23: "Your chats" and "Your work" looked like different
   fonts and sizes). Section headings: one small sentence-case label. Date groups: a quieter version of it. Every
   item, chat or work link: the text font at 15px. No spaced capitals (Ahmed: avoid subtitles). The !important
   matches app.css, which forces buttons to the heading font and the earlier mono rules above. */
body.vc-shell .vc-sidebar .cv-history-title,
body.vc-shell .vc-sidebar .vc-sidebar-section-label,
body.vc-shell .vc-sidebar .vc-sidebar-section-toggle {
  font-family: var(--font-body) !important; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--vc-muted); }
body.vc-shell .vc-sidebar .cv-history-list .cv-history-group {
  font-family: var(--font-body) !important; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--cv-label); }
body.vc-shell .vc-sidebar .vc-sidebar-link,
body.vc-shell .vc-sidebar .cv-history-open {
  font-family: var(--font-body) !important; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; }
body.vc-shell .vc-sidebar .vc-sidebar-link.is-active { font-weight: 500; }
body.vc-shell .vc-sidebar .cv-history-new { font-family: var(--font-body) !important; font-size: 0.9375rem; font-weight: 500; }
body.vc-shell .vc-sidebar .vc-sidebar-user-name { font-family: var(--font-body) !important; font-size: 0.9375rem; letter-spacing: 0; }
body.vc-shell .vc-sidebar .vc-sidebar-section-toggle:hover { color: var(--vc-ink); }
/* The top bar only holds the phone menu button, so desktop has no bar (George, 2026-10-23: "Results" twice). */
@media (min-width: 769px) { body.vc-shell .vc-topbar { display: none; } }