/* ── HOM Shell — shared sidebar (DRAFT) ─────────────────────────────────────
   Draft-file discipline, one level down: pages under review reference
   shell-draft.css/js; promotion copies these over shell.css/js. Never edit
   the promoted files directly (they would hit every live page at once).

   Matches the site's navy/gold idiom (variables mirror dashboard.html's
   :root). The shell owns ONLY the sidebar; page content lives in
   .hom-shell-main, which the shell positions but never styles internally. */

:root {
  --hom-navy: #0a1628;
  --hom-gold: #C9A84C;
  --hom-gold-light: #e8c97a;
  --hom-gold-border: rgba(201, 168, 76, 0.2);
  --hom-white: #e8e4d9;
  /* SOLID, not translucent — rgba(232,228,217,0.4) composited over the navy
     sidebar background measured at 3.24:1 contrast (fails WCAG AA's 4.5:1),
     and the thin, low-opacity glyphs it produced were reported as reddish/
     hard to read (classic subpixel-AA fringing on faint light text against
     a dark background). This pale blue-gray reads as "muted" via hue/
     lightness instead of alpha, lands at ~7.7:1, and stays on the site's
     existing blue accent (--hom-blue) rather than introducing a new hue. */
  --hom-muted: #9aa6bc;
  --hom-blue: #4a90d9;
  --hom-sidebar-w: 300px;
  --hom-sidebar-w-collapsed: 56px;
}

/* ── Layout frame ──
   Fixed-height app shell (the Supabase-style reference pattern): html/body
   are pinned to exactly one viewport tall with no page-level scroll (see the
   .hom-shell-active rule below, toggled by shell.js at mount time so pages
   that don't mount the shell are unaffected). The sidebar is therefore
   NEVER in a scrolling context — it simply never moves, full stop, with no
   dependency on position:sticky's edge cases (nested scroll containers,
   ancestor transforms, overscroll/rubber-banding). Only .hom-shell-main
   scrolls, in its own box. */
html.hom-shell-active, body.hom-shell-active {
  height: 100%;
  overflow: hidden;
  margin: 0;
}
.hom-shell-root { display: flex; height: 100%; }
.hom-shell-main { flex: 1; min-width: 0; height: 100%; overflow-y: auto; }

/* ── Sidebar ──
   height:100% of the fixed, overflow:hidden shell (above) is the PRIMARY
   mechanism — there is no page-level scroll for the sidebar to be dragged
   along by, full stop. position:sticky is added as a defensive second layer
   (harmless — in a non-scrolling context it just behaves like static): if
   the .hom-shell-active rule ever fails to apply (e.g. a stale cached copy
   of this file next to a fresh dashboard-draft.html, or a future page that
   mounts the shell without the exact same body/html setup), the sidebar
   still won't scroll away with the page. */
.hom-sidebar {
  width: var(--hom-sidebar-w);
  flex-shrink: 0;
  background: #081120;
  border-right: 0.5px solid var(--hom-gold-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: sticky;
  top: 0;
  overflow: hidden;
  transition: width 0.22s ease;
  z-index: 60;
}
.hom-sidebar.collapsed { width: var(--hom-sidebar-w-collapsed); }
.hom-sidebar.collapsed .hom-sb-label,
.hom-sidebar.collapsed .hom-sb-section,
.hom-sidebar.collapsed .hom-sb-account-meta { display: none; }

.hom-sb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 12px; border-bottom: 0.5px solid var(--hom-gold-border);
  flex-shrink: 0;
}
.hom-sb-logo { height: 30px; width: auto; display: block; }
.hom-sb-collapse-btn {
  background: transparent; border: 0.5px solid var(--hom-gold-border);
  color: var(--hom-gold); border-radius: 6px; width: 28px; height: 28px;
  cursor: pointer; font-size: 0.8rem; line-height: 1; flex-shrink: 0;
}
.hom-sb-collapse-btn:hover { background: rgba(201, 168, 76, 0.1); }

.hom-sb-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px; }
.hom-sb-scroll::-webkit-scrollbar { width: 6px; }
.hom-sb-scroll::-webkit-scrollbar-thumb { background: rgba(201, 168, 76, 0.25); border-radius: 3px; }

/* ── Section headers ── */
.hom-sb-section { margin-bottom: 20px; }
.hom-sb-section-title {
  font-family: 'Cinzel', serif; font-size: 0.5625rem; letter-spacing: 2.5px;
  color: var(--hom-blue); text-transform: uppercase; display: block;
  margin-bottom: 10px;
}

/* ── Account ── */
.hom-sb-account { display: flex; align-items: center; gap: 10px; }
.hom-sb-avatar, .hom-sb-avatar-ph {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  border: 0.5px solid var(--hom-gold-border); background: rgba(255, 255, 255, 0.03);
  object-fit: cover; display: flex; align-items: center; justify-content: center;
}
.hom-sb-avatar-ph svg { width: 20px; height: 20px; }
.hom-sb-account-meta { min-width: 0; }
.hom-sb-account-name {
  font-size: 0.8125rem; color: var(--hom-white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hom-sb-account-email {
  font-size: 0.6875rem; color: var(--hom-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hom-sb-balance {
  font-family: 'Cinzel', serif; font-size: 1.05rem; color: var(--hom-gold);
  margin-top: 8px;
}
.hom-sb-balance-label { font-size: 0.625rem; color: var(--hom-muted); letter-spacing: 1px; text-transform: uppercase; }

/* ── Nav links ──
   Buy Mirrors is a <button> (calls back into the page instead of
   navigating), styled identically to the <a> items — same selector list,
   plus button-specific resets (border/background/font don't inherit onto
   <button> by default the way they do for <a>). */
.hom-sb-nav a, .hom-sb-nav button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: 'Cinzel', serif; font-size: 0.6875rem; letter-spacing: 1.5px;
  text-transform: uppercase; text-decoration: none; color: var(--hom-gold-light);
  padding: 8px 6px; border-radius: 6px;
  background: transparent; border: none; cursor: pointer; text-align: left;
}
.hom-sb-nav a:hover, .hom-sb-nav button:hover { background: rgba(201, 168, 76, 0.08); }
.hom-sb-nav a.active { background: rgba(201, 168, 76, 0.12); color: #f4dfa0; }
.hom-sb-nav .hom-sb-nav-icon { width: 16px; text-align: center; flex-shrink: 0; }

/* ── Report tree ── */
.hom-sb-cluster { margin-bottom: 4px; }
.hom-sb-cluster-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: none; cursor: pointer;
  padding: 7px 6px; border-radius: 6px; text-align: left;
  color: var(--hom-gold); font-family: 'Cinzel', serif;
  font-size: 0.625rem; letter-spacing: 1.2px; text-transform: uppercase;
}
.hom-sb-cluster-head:hover { background: rgba(201, 168, 76, 0.08); }
.hom-sb-cluster-chevron { transition: transform 0.15s; font-size: 0.6rem; flex-shrink: 0; }
.hom-sb-cluster.open .hom-sb-cluster-chevron { transform: rotate(90deg); }
.hom-sb-cluster-count { margin-left: auto; color: var(--hom-muted); font-family: 'Inter', sans-serif; letter-spacing: 0; }
.hom-sb-cluster-body { display: none; padding-left: 10px; }
.hom-sb-cluster.open .hom-sb-cluster-body { display: block; }

.hom-sb-report {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  background: transparent; border: none; cursor: pointer; text-align: left;
  padding: 6px 6px; border-radius: 6px; color: var(--hom-white);
  font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 300;
}
.hom-sb-report:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }
.hom-sb-report-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hom-sb-report-atoms { flex-shrink: 0; font-size: 0.625rem; color: var(--hom-muted); }
.hom-sb-tree-note { font-size: 0.6875rem; color: var(--hom-muted); line-height: 1.5; padding: 4px 6px; }

/* ── Contextual slot ── */
.hom-sb-contextual { border-top: 0.5px solid var(--hom-gold-border); padding-top: 14px; }
.hom-sb-contextual:empty { display: none; }

/* ── Chat: Speak with the Galaxy ── */
.hom-chat { display: flex; flex-direction: column; }
.hom-chat-messages {
  max-height: 38vh; overflow-y: auto; display: flex; flex-direction: column;
  gap: 10px; padding: 4px 2px; margin-bottom: 10px;
}
.hom-chat-messages::-webkit-scrollbar { width: 6px; }
.hom-chat-messages::-webkit-scrollbar-thumb { background: rgba(201, 168, 76, 0.25); border-radius: 3px; }
.hom-chat-msg { font-size: 0.75rem; line-height: 1.55; border-radius: 10px; padding: 8px 10px; }
.hom-chat-msg.user { background: rgba(74, 144, 217, 0.12); color: #dcecff; align-self: flex-end; max-width: 92%; }
.hom-chat-msg.assistant { background: rgba(201, 168, 76, 0.08); color: var(--hom-white); align-self: flex-start; max-width: 96%; }
.hom-chat-msg.assistant.abstained { border-left: 2px solid var(--hom-blue); }
.hom-chat-msg.assistant.deep-escalate {
  background: rgba(201, 168, 76, 0.05); border: 0.5px solid var(--hom-gold-border);
  border-radius: 10px; max-width: 96%;
}
.hom-chat-escalate-cta {
  display: inline-block; margin-top: 10px; font-size: 0.6875rem; font-weight: 600;
  color: var(--hom-gold-light); text-decoration: none;
  border: 0.5px solid var(--hom-gold-border); border-radius: 6px; padding: 6px 10px;
}
.hom-chat-escalate-cta:hover { background: rgba(201, 168, 76, 0.12); }
.hom-chat-msg.error { background: rgba(224, 112, 112, 0.1); color: #e07070; align-self: stretch; }
.hom-chat-tier {
  display: inline-block; font-size: 0.5625rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--hom-muted); margin-bottom: 4px;
}
.hom-chat-citations { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.hom-chat-cite {
  font-size: 0.625rem; color: var(--hom-gold-light); text-decoration: none;
  border: 0.5px solid var(--hom-gold-border); border-radius: 5px; padding: 3px 7px;
}
.hom-chat-cite:hover { background: rgba(201, 168, 76, 0.1); }
.hom-chat-tension {
  margin-top: 8px; font-size: 0.6875rem; color: #dcecff; line-height: 1.5;
  border-left: 2px solid var(--hom-blue); padding-left: 8px;
}
.hom-chat-input-row { display: flex; gap: 8px; }
.hom-chat-input {
  flex: 1; min-width: 0; padding: 9px 11px; border-radius: 8px;
  border: 0.5px solid rgba(201, 168, 76, 0.3);
  background: rgba(255, 255, 255, 0.03); color: var(--hom-white);
  font-family: 'Inter', sans-serif; font-size: 0.75rem; outline: none; resize: none;
}
.hom-chat-input:focus { border-color: rgba(201, 168, 76, 0.6); }
.hom-chat-send {
  flex-shrink: 0; background: transparent; border: 0.5px solid rgba(201, 168, 76, 0.4);
  color: var(--hom-gold); border-radius: 8px; padding: 0 13px; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 0.625rem; letter-spacing: 1px; text-transform: uppercase;
}
.hom-chat-send:hover:not(:disabled) { background: rgba(201, 168, 76, 0.1); }
.hom-chat-send:disabled { opacity: 0.4; cursor: default; }
.hom-chat-disclosure { font-size: 0.625rem; color: var(--hom-muted); line-height: 1.5; margin-top: 8px; }

/* ── Mobile: slide-out drawer ── */
.hom-sb-mobile-toggle { display: none; }
@media (max-width: 820px) {
  .hom-sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; height: 100dvh;
    transform: translateX(-100%); transition: transform 0.25s ease;
    width: min(84vw, 320px);
  }
  .hom-sidebar.collapsed { width: min(84vw, 320px); } /* collapse is a desktop concept */
  .hom-sidebar.collapsed .hom-sb-label,
  .hom-sidebar.collapsed .hom-sb-section,
  .hom-sidebar.collapsed .hom-sb-account-meta { display: revert; }
  .hom-sidebar.mobile-open { transform: translateX(0); box-shadow: 12px 0 40px rgba(0,0,0,0.55); }
  .hom-sb-collapse-btn { display: none; }
  .hom-sb-mobile-toggle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 14px; top: 14px; z-index: 55;
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(8, 17, 32, 0.85); backdrop-filter: blur(6px);
    border: 0.5px solid var(--hom-gold-border); color: var(--hom-gold);
    cursor: pointer; font-size: 1rem;
  }
  .hom-sb-overlay {
    display: none; position: fixed; inset: 0; z-index: 58;
    background: rgba(4, 8, 16, 0.55);
  }
  .hom-sb-overlay.visible { display: block; }
}