/* ATLAS V6 — Navigation Sidebar
 * Visual override only. Routing classes (.rail-item / .rail-subitem /
 * data-dept) are preserved on the same elements so training.js showView()
 * + app.js .active cycling + atlas-nav.js continue to work unchanged.
 */

/* Override sidebar width */
.sidebar, #atlas-sidebar, [class*="rail-wrap"], #rail.sidebar {
  width: 286px !important;
  min-width: 286px !important;
  max-width: 286px !important;
  background: linear-gradient(180deg, #141b22, #0f151b);
  color: #edf4fb;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

/* Brand area */
.v6-brand {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}

.v6-brand-mark {
  height: 46px;
  width: 46px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font: 800 18px system-ui;
  color: white;
  background: linear-gradient(145deg, #0e8d84, #284f94 54%, #d6a340);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 14px 28px rgba(0,0,0,.24);
}

.v6-brand-text h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #edf4fb;
  letter-spacing: .01em;
}

/* Wordmark logo image (S6 2026-07-04): 525x150 source shown at 30px tall
   (>2x density). Nudged -2px left so the glyph edge optically aligns with
   the org sub-line text below. */
.v6-brand-word {
  display: block;
  height: 30px;
  width: auto;
  margin-left: -2px;
}

/* S8: theme-aware wordmark — black+yellow on light surfaces, white+yellow on
   dark. The Calm (almanac) redesign theme runs a LIGHT rail; Operator + the
   legacy V6 shell run a DARK rail. [hidden] wins via attribute; we flip with
   display rules keyed off html[data-rtheme]. */
html[data-rtheme="almanac"] .v6-brand-word--dark { display: none; }
html[data-rtheme="almanac"] .v6-brand-word--light { display: block !important; }
html[data-rtheme="operator"] .v6-brand-word--light { display: none !important; }

.v6-brand-text span {
  display: block;
  margin-top: 2px;
  color: #9fb0bf;
  font-size: 13px;
}

/* Scroll region — groups fill, context card pinned to bottom */
.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Nav groups */
.v6-nav-group { margin: 0 0 20px; }

.v6-nav-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #9fb0bf;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 6px 8px;
}

/* Nav items — applied on top of .rail-item so routing survives.
 * Selectors scoped under .sidebar-nav to out-specify bundled .rail-item rules
 * and [data-theme] overrides in both light + dark theme. */
.sidebar-nav .v6-nav-item,
.v6-nav-item {
  width: 100%;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: #edf4fb;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  margin: 2px 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
}

.v6-nav-item:hover {
  background: rgba(255,255,255,.06);
  outline: 2px solid rgba(204,156,67,.3);
  outline-offset: 1px;
}

.sidebar-nav .v6-nav-item.active,
[data-theme] .sidebar-nav .v6-nav-item.active,
.v6-nav-item.active {
  background: rgba(255,255,255,.1) !important;
  border-left-color: transparent !important;
  box-shadow: inset 3px 0 0 #c18a25 !important;
}

.sidebar-nav .v6-nav-item .v6-nav-icon,
.v6-nav-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: #b8c8d8;
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
}
.sidebar-nav .v6-nav-item .v6-nav-icon .ri-svg,
.sidebar-nav .v6-nav-item .v6-nav-icon svg,
.v6-nav-icon svg {
  width: 14px !important; height: 14px !important;
  color: #b8c8d8 !important;       /* override bundled var(--accent) on .ri-svg */
  filter: none !important;          /* drop the bundled accent glow */
  flex-shrink: 0;
}
.sidebar-nav .v6-nav-item.active .v6-nav-icon .ri-svg,
.sidebar-nav .v6-nav-item:hover .v6-nav-icon .ri-svg { color: #edf4fb !important; }

.sidebar-nav .v6-nav-item .v6-nav-label,
.v6-nav-label { font-weight: 750; font-size: 14px; line-height: 1.2; color: #edf4fb; }
.sidebar-nav .v6-nav-item .v6-nav-sub,
.v6-nav-sub { display: block; color: #9fb0bf; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-nav .v6-nav-item .v6-nav-state,
.v6-nav-state { font: 700 11px "JetBrains Mono", "Cascadia Mono", monospace; color: #e4bd67; }

/* Context card — sits above the existing .sidebar-foot (user chip + clock).
 * No margin-top:auto: .sidebar-nav flexes to fill, so the card + foot naturally
 * sit at the bottom. */
.v6-side-card {
  flex: 0 0 auto;
  margin: 0 0 12px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.v6-side-card strong { display: block; font-size: 14px; margin-bottom: 5px; color: #edf4fb; }
.v6-side-card span { color: #9fb0bf; font-size: 12px; }

/* ── Mobile collapse (matches existing .sidebar mob-open behavior) ──── */
@media (max-width: 1200px) {
  .sidebar, #rail.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sidebar.mob-open, #rail.sidebar.mob-open {
    transform: translateX(0);
  }
}

/* V6: voice LIVE badge / dock hidden by default — revealed only while voice is
 * active. NOTE: this governs the #tag-voice "LIVE" indicator and any element
 * tagged .voice-dock. It does NOT hide the persistent .vd-dock orb surface,
 * which the V6 north-star keeps pinned at the bottom ("Press SPACE to talk").
 *
 * H8 (2026-06-25 audit): the reveal now matches the active state whether it is
 * set ON the element (#tag-voice[data-state]) OR on an ancestor container
 * ([data-state] #tag-voice) — so whichever convention the voice state machine
 * uses, the badge reveals correctly and never sticks visible at rest. */
#tag-voice, .voice-dock { display: none !important; }

#tag-voice.active,
#tag-voice[data-state="active"],
#tag-voice[data-state="listening"],
#tag-voice[data-state="speaking"],
[data-state="active"] #tag-voice,
[data-state="listening"] #tag-voice,
[data-state="speaking"] #tag-voice {
  display: flex !important;
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  background: linear-gradient(145deg, #121d27, #172832) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.3) !important;
}

.voice-dock.active,
.voice-dock[data-state="active"],
.voice-dock[data-state="listening"],
.voice-dock[data-state="speaking"],
[data-state="active"] .voice-dock,
[data-state="listening"] .voice-dock,
[data-state="speaking"] .voice-dock {
  display: flex !important;
}

/* M1 (2026-06-25 audit): the Anna Outbound Queue launcher (#anna-oq-launch,
 * injected + styled position:fixed by js/anna-outbound-panel.js) sits globally
 * pinned bottom-right for the whole GPR session, cluttering every view and
 * colliding with the voice dock. Hide it by default; it should surface
 * CONTEXTUALLY. The injected style sets `display:flex` non-important, so this
 * !important rule wins regardless of the runtime <style> insertion order.
 *
 * HANDOFF → Track 3/5 (JS): reveal by ADDING the class `anna-oq-show` to the
 * launcher (it out-specifies this rule), e.g. el.classList.add('anna-oq-show')
 * when the relevant view/context is active. Do NOT reveal via el.style.display
 * — that inline value loses to the !important hide below. */
#anna-oq-launch { display: none !important; }
#anna-oq-launch.anna-oq-show { display: flex !important; }


/* S8b (Bryan 2026-07-04): logo-only brand slot — the org name + monogram live
   in the workspace switcher right below, so the top-left carries ONLY the
   BrokerDIY wordmark. */
.v6-brand { grid-template-columns: 1fr !important; }
.v6-brand-mark, .sidebar-brand .sb-logo, #sb-icon { display: none !important; }
.v6-brand-text .sb-org, .sidebar-brand .sb-org, #sb-org { display: none !important; }
.v6-brand-word { height: 34px; margin-left: 0; }