/* ============================================================
   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.6rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--vc-muted);
}
body.vc-shell .vc-sidebar-section-label {
  font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.08em; color: var(--vc-muted);
}
body.vc-shell .vc-sidebar-link {
  font-family: var(--font-mono) !important; font-size: 0.8125rem; font-weight: 500;
  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-mono); }
body.vc-shell .vc-sidebar-user-name { font-size: 0.8125rem; }


/* ── 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.875rem; }
  /* 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.8125rem; 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.875rem; }
}
/* Date groups (Today, Yesterday…) sit under the "Your chats" section label, so they must not
   share its mono uppercase style: body font, sentence case, dimmer (George, 2026-10-09). */
.vc-sidebar--chats .cv-history-list .cv-history-group {
  font-family: var(--font-body) !important; text-transform: none; letter-spacing: 0;
  font-size: 0.75rem; font-weight: 600; color: var(--cv-faint); margin: 14px 8px 4px;
}
.vc-sidebar--chats .cv-history-list .cv-history-group:first-child { margin-top: 4px; }
/* Light theme: --cv-faint (#8a8a8a) fails 4.5:1 for small text; #727272 passes (~4.6:1 on the
   canvas) and stays lighter than the section label (--cv-label #666). */
html:not([data-theme="dark"]) .vc-sidebar--chats .cv-history-list .cv-history-group { color: #727272; font-weight: 500; }
/* 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); }
}