/* ==========================================================================
   sidebar.css — App shell (sidebar + topbar + content) using design tokens
   ========================================================================== */

.app-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-base);
  transition: background var(--tr-slow), color var(--tr-slow);
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-base);
  border-right: none;
  display: flex;
  flex-direction: column;
  position: fixed;
  /* Pin under the top bar to the viewport bottom so the profile row
     cannot fall off-screen (height: 100vh - N was too tall). */
  top: var(--oc-topbar-stack, calc(var(--topbar-height) + var(--sat-fix, env(safe-area-inset-top, 0px))));
  bottom: 0;
  left: 0;
  height: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  z-index: var(--z-fixed);
  transition: width var(--dur-sheet, 320ms) var(--ease-out, ease),
              box-shadow var(--dur-ui, 180ms) var(--ease-out, ease);
  overflow: visible !important;
}

.sidebar.collapsed { width: var(--sidebar-width-collapsed); }
/* First paint: collapsed rail must already be 64px on desktop. Phones use
   the off-canvas drawer, so this lock must not apply there or the opened
   menu stays a blank rail under the page dimmer. */
@media (min-width: 1025px) {
  html[data-sidebar-init="collapsed"] .sidebar:not(.is-peek) {
    width: var(--sidebar-width-collapsed) !important;
    transition: none !important;
  }
  html[data-sidebar-init="collapsed"] .sidebar .nav-item .label,
  html[data-sidebar-init="collapsed"] .sidebar .nav-item .badge,
  html[data-sidebar-init="collapsed"] .sidebar .nav-item .expand-icon {
    opacity: 0;
    max-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
  }
  html[data-sidebar-init="collapsed"] .sidebar .nav-item {
    justify-content: center;
    padding: 2.46px 0;
    gap: 0;
  }
  html[data-sidebar-init="collapsed"] .sidebar .nav-item .icon { margin: 0 auto; }
  html[data-sidebar-init="collapsed"] .sidebar .user-info,
  html[data-sidebar-init="collapsed"] .sidebar .user-menu-toggle,
  html[data-sidebar-init="collapsed"] .sidebar .world-clock,
  html[data-sidebar-init="collapsed"] .sidebar:not(.is-peek) .sb-pref-bar { display: none; }
}
.sidebar-frost { display: none; }

/* Hover-peek: collapsed rail stays; the full menu floats over the page.
   Only (hover:hover) desktops — phones keep the off-canvas drawer. */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .sidebar.collapsed.is-peek {
    width: var(--sidebar-width);
    z-index: 1200;
    /* overflow:hidden here kills backdrop-filter (samples an empty clip)
       and cuts off the user-profile footer. Nav scrolls; footer stays. */
    overflow: visible !important;
    border-radius: var(--r-xl, 12px);
  }
  .sidebar.collapsed.is-peek .nav-section-title {
    opacity: 1;
    max-height: 2.2em;
    margin: 0 6px 1px;
    padding: 2px 8px;
    pointer-events: auto;
  }
  .sidebar.collapsed.is-peek .nav-item {
    justify-content: flex-start;
    padding: 2.46px 8px;
    gap: 6px;
  }
  .sidebar.collapsed.is-peek .nav-item .label,
  .sidebar.collapsed.is-peek .nav-item .badge,
  .sidebar.collapsed.is-peek .nav-item .expand-icon {
    opacity: 1;
    max-width: 180px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: auto;
  }
  .sidebar.collapsed.is-peek .nav-item .badge {
    margin-left: auto;
    padding: 2px var(--sp-2);
  }
  .sidebar.collapsed.is-peek .nav-item .icon { margin: 0; }
  .sidebar.collapsed.is-peek .nav-item.active { padding: 2.46px 8px; }
  .sidebar.collapsed.is-peek .nav-item:hover::after { content: none; }
  .sidebar.collapsed.is-peek .user-info { display: block; }
  .sidebar.collapsed.is-peek .user-menu-toggle { display: flex; }
  .sidebar.collapsed.is-peek .sidebar-search { display: block; }
  .sidebar.collapsed.is-peek .sb-pref-bar { display: flex; }
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Background fills under the status bar / Dynamic Island; controls sit below. */
  padding: var(--sat-fix, env(safe-area-inset-top, 0px)) var(--sp-4) 0 var(--sp-4);
  min-height: calc(var(--topbar-height) + var(--sat-fix, env(safe-area-inset-top, 0px)));
  height: auto;
  box-sizing: border-box;
  border-bottom: none;
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--sp-2);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  text-decoration: none;
}
.sidebar-brand:hover { text-decoration: none; }

.sidebar-logo { max-width: 128px; height: auto; transition: filter .15s; }
/* Dark / blue steel: the PNG is dark ink; flip to a white mark. */
[data-theme="dark"] .sidebar-logo,
html[data-theme="dark"] .sidebar-logo,
[data-theme="steel"] .sidebar-logo,
html[data-theme="steel"] .sidebar-logo { filter: brightness(0) invert(1); }

/* ---------- World clock (kept for power users; quieter Stage 1) ---------- */
.world-clock {
  padding: 6px var(--sp-3);
  border-bottom: none;
  font-family: var(--font-mono);
  font-size: calc(10px * var(--ui-font-scale, 1));
  color: var(--text-dim);
  line-height: 1.45;
  opacity: 0.78;
}
.world-clock .wc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.world-clock .wc-label {
  color: var(--text-dim);
  min-width: 56px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.world-clock .wc-time {
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.sidebar.collapsed .world-clock { display: none; }
@media (min-width: 1025px) {
  .sidebar .world-clock { display: none; }
  html body.has-status-bar .sidebar,
  html body.has-status-bar .sidebar.collapsed,
  html body.has-status-bar .sidebar.collapsed.is-peek {
    bottom: calc(var(--statusbar-height, 32px) + env(safe-area-inset-bottom, 0px) + 10px) !important;
    padding-bottom: 0 !important;
    height: auto !important;
  }
}

.sidebar-toggle {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-xl);
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  transition: background var(--tr-fast), color var(--tr-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sidebar-toggle:hover {
  background: var(--bg-elevated-2);
  color: var(--text-primary);
}
/* SVG panel icon — sized like a chip; inherits stroke from color. */
.sidebar-toggle-icon {
  width: 18px;
  height: 18px;
  display: block;
}
/* When the sidebar is collapsed, flip the panel icon so the rail sits
   on the right, hinting "click to expand". Toggle lives in the top bar. */
body.sidebar-collapsed .sidebar-toggle-icon {
  transform: scaleX(-1);
}

/* Desktop / app shell: in-window history (no browser chrome). */
.top-bar-hist {
  display: none;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.top-bar-hist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm, 6px);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.top-bar-hist-btn:hover:not(:disabled) {
  background: var(--bg-elevated-2);
  color: var(--text-primary);
}
.top-bar-hist-btn:disabled {
  opacity: 0.32;
  cursor: default;
}
.top-bar-hist-btn .oc-ico {
  width: 16px;
  height: 16px;
}
@media (min-width: 1025px) {
  .top-bar-hist { display: inline-flex; }
}

/* ---------- Sidebar nav ---------- */
.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--sp-3) 0;
  padding-bottom: 88px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.nav-section { margin-bottom: 6px; }
.nav-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: calc(100% - 12px);
  margin: 0 6px 1px;
  padding: 2px 8px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  max-height: 2.2em;
  opacity: 1;
  transition: opacity 160ms var(--ease-out, ease), max-height 280ms var(--ease-out, ease),
              color var(--dur-ui, 160ms) var(--ease-out, ease);
}
.nav-section-title:hover { color: var(--text-secondary); }
.nav-section-title:focus { outline: none; }
.nav-section-title:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}
.nav-section-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-fold-chev {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.55;
  transition: transform 160ms var(--ease-out, ease);
}
.nav-section.is-folded > .nav-section-title .nav-fold-chev {
  transform: rotate(-90deg);
}
.nav-section-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 220ms var(--ease-out, ease);
}
.nav-section.is-folded > .nav-section-body {
  grid-template-rows: 0fr;
}
.nav-section-inner {
  overflow: hidden;
  min-height: 0;
}
.sidebar.collapsed:not(.is-peek) .nav-section.is-folded > .nav-section-body {
  grid-template-rows: 1fr;
}
@media (prefers-reduced-motion: reduce) {
  .nav-section-body { transition: none; }
  .nav-fold-chev { transition: none; }
}
/* AI section whisper — soft violet label without dominating the rail. */
.nav-section--ai .nav-section-title {
  color: color-mix(in srgb, var(--accent) 45%, var(--text-dim));
}
.sidebar.collapsed .nav-section-title {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 6px;
  padding: 2.46px 8px;
  min-height: calc((24px * 1.2 - 2px) * 0.95 * 0.9);
  line-height: 1.15;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  --nav-ico: var(--accent);
}
.nav-item:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  text-decoration: none;
}
.nav-item.active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-muted);
}

.nav-item .icon {
  font-size: var(--fs-md);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nav-ico);
  transition: color var(--tr-fast), transform var(--tr-fast);
}
.nav-item > svg.icon { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.3; }
.nav-item:hover .icon,
.nav-item.active .icon { color: var(--nav-ico); }

/* One hue per item. Dark and steel share the light set; light uses ink
   so the stroke stays readable on paper. */
.sidebar .nav-item[data-page="home"] { --nav-ico: #4a98ef; }
.sidebar .nav-item[data-page="markets"] { --nav-ico: #3dbe55; }
.sidebar .nav-item[data-page="watchlist"] { --nav-ico: #f0b429; }
.sidebar .nav-item[data-page="calendar"] { --nav-ico: #2eb8a8; }
.sidebar .nav-item[data-page="portfolios"] { --nav-ico: #e0b06a; }
.sidebar .nav-item[data-page="universe"],
.sidebar .nav-item[data-page="data"] { --nav-ico: #a78bfa; }
.sidebar .nav-item[data-page="directory"] { --nav-ico: #4eb6ef; }
.sidebar .nav-item[data-page="models"] { --nav-ico: #f07848; }
.sidebar .nav-item[data-page="network"] { --nav-ico: #4a98ef; }
.sidebar .nav-item[data-page="bottlenecks"] { --nav-ico: #ee7098; }
.sidebar .nav-item[data-page="geography"] { --nav-ico: #2eb8a8; }
.sidebar .nav-item[data-page="screener"] { --nav-ico: #f0b429; }
.sidebar .nav-item[data-page="analysts"] { --nav-ico: #a78bfa; }
.sidebar .nav-item[data-page="book"] { --nav-ico: #f0b429; }
.sidebar .nav-item[data-page="studio"] { --nav-ico: #2eb8a8; }
.sidebar .nav-item[data-page="research"] { --nav-ico: #e0b06a; }
.sidebar .nav-item[data-page="pipeline"] { --nav-ico: #4a98ef; }
.sidebar .nav-item[data-page="files"] { --nav-ico: #4eb6ef; }
.sidebar .nav-item[data-page="diligence"] { --nav-ico: #ee7098; }
.sidebar .nav-item[data-page="sessions"] { --nav-ico: #3dbe55; }
.sidebar .nav-item[data-page="messages"] { --nav-ico: #4a98ef; }
.sidebar .nav-item[data-page="letter"] { --nav-ico: #f0b429; }
.sidebar .nav-item[data-page="wall"] { --nav-ico: #2eb8a8; }
.sidebar .nav-item[data-page="cases"] { --nav-ico: #4a98ef; }
.sidebar .nav-item[data-page="tower"] { --nav-ico: #f07848; }
.sidebar .nav-item[data-page="meeting"] { --nav-ico: #a78bfa; }
.sidebar .nav-item[data-page="scout"] { --nav-ico: #3dbe55; }
.sidebar .nav-item[data-page="mission-control"] { --nav-ico: #a78bfa; }
.sidebar .nav-item[data-page="ic"] { --nav-ico: #f0b429; }
.sidebar .nav-item[data-page="console"] { --nav-ico: #4eb6ef; }
.sidebar .nav-item[data-page="cost"] { --nav-ico: #3dbe55; }
html[data-theme="light"] .sidebar .nav-item[data-page="home"],
html[data-theme="light"] .sidebar .nav-item[data-page="network"],
html[data-theme="light"] .sidebar .nav-item[data-page="pipeline"],
html[data-theme="light"] .sidebar .nav-item[data-page="messages"],
html[data-theme="light"] .sidebar .nav-item[data-page="cases"] { --nav-ico: #0b5cad; }
html[data-theme="light"] .sidebar .nav-item[data-page="markets"],
html[data-theme="light"] .sidebar .nav-item[data-page="sessions"],
html[data-theme="light"] .sidebar .nav-item[data-page="scout"],
html[data-theme="light"] .sidebar .nav-item[data-page="cost"] { --nav-ico: #0d6b2c; }
html[data-theme="light"] .sidebar .nav-item[data-page="watchlist"],
html[data-theme="light"] .sidebar .nav-item[data-page="screener"],
html[data-theme="light"] .sidebar .nav-item[data-page="book"],
html[data-theme="light"] .sidebar .nav-item[data-page="letter"],
html[data-theme="light"] .sidebar .nav-item[data-page="ic"] { --nav-ico: #8a5a00; }
html[data-theme="light"] .sidebar .nav-item[data-page="calendar"],
html[data-theme="light"] .sidebar .nav-item[data-page="geography"],
html[data-theme="light"] .sidebar .nav-item[data-page="studio"],
html[data-theme="light"] .sidebar .nav-item[data-page="wall"] { --nav-ico: #0a6b64; }
html[data-theme="light"] .sidebar .nav-item[data-page="universe"],
html[data-theme="light"] .sidebar .nav-item[data-page="data"],
html[data-theme="light"] .sidebar .nav-item[data-page="analysts"],
html[data-theme="light"] .sidebar .nav-item[data-page="meeting"],
html[data-theme="light"] .sidebar .nav-item[data-page="mission-control"] { --nav-ico: #5b2d91; }
html[data-theme="light"] .sidebar .nav-item[data-page="portfolios"],
html[data-theme="light"] .sidebar .nav-item[data-page="research"] { --nav-ico: #7a5410; }
html[data-theme="light"] .sidebar .nav-item[data-page="directory"],
html[data-theme="light"] .sidebar .nav-item[data-page="files"],
html[data-theme="light"] .sidebar .nav-item[data-page="console"] { --nav-ico: #04648a; }
html[data-theme="light"] .sidebar .nav-item[data-page="models"],
html[data-theme="light"] .sidebar .nav-item[data-page="tower"] { --nav-ico: #a34100; }
html[data-theme="light"] .sidebar .nav-item[data-page="bottlenecks"],
html[data-theme="light"] .sidebar .nav-item[data-page="diligence"] { --nav-ico: #9a2048; }
.nav-item .label {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  max-width: 180px;
  opacity: 1;
  transition: opacity 180ms var(--ease-out, ease), max-width 280ms var(--ease-out, ease);
}
.nav-item .badge {
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  margin-left: auto;
}
.nav-item .expand-icon {
  font-size: calc(10px * var(--ui-font-scale, 1));
  color: var(--text-dim);
  transition: transform var(--tr-fast);
}
.nav-item.expanded .expand-icon { transform: rotate(90deg); }

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 2.46px 0;
  gap: 0;
}
.sidebar.collapsed .nav-item .label,
.sidebar.collapsed .nav-item .badge,
.sidebar.collapsed .nav-item .expand-icon {
  opacity: 0;
  max-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}
.sidebar.collapsed .nav-item .icon { margin: 0 auto; }
.sidebar.collapsed .nav-item.active {
  border-color: var(--border-muted);
  padding: 2.46px 0;
}

/* Collapsed rail labels: portaled to body so overflow on .sidebar-nav
   cannot clip them. Flat plate, inverted against the page, with a
   short shadow on the edge. */
.nav-rail-tip {
  position: fixed;
  z-index: 4000;
  padding: 5px 10px;
  border: 1px solid #e6e0d8;
  border-radius: var(--r-md, 8px);
  background: #f6f3ef;
  color: #161412;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  max-width: min(240px, calc(100vw - 80px));
  overflow: visible;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  transition:
    opacity 180ms var(--ease-out, ease),
    transform 180ms var(--ease-out, ease),
    top 180ms var(--ease-out, ease);
}
.nav-rail-tip.is-on {
  visibility: visible;
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
html[data-theme="light"] .nav-rail-tip {
  background: #161412;
  color: #f6f3ef;
  border-color: #161412;
  box-shadow: 0 1px 3px rgba(26, 24, 22, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  .nav-rail-tip {
    transition: opacity 80ms linear;
    transform: translateY(-50%);
  }
  .nav-rail-tip.is-on { transform: translateY(-50%); }
}

.nav-submenu {
  display: none;
  background: var(--bg-base);
}
.nav-item.has-submenu.expanded + .nav-submenu { display: block; }
.nav-submenu .nav-item { padding-left: var(--sp-10); font-size: var(--fs-base); }

/* ---------- Sidebar footer (user profile) ---------- */
.sidebar-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-3);
  border-top: none;
  flex-shrink: 0;
  margin-top: 0;
  overflow: visible;
  z-index: 3;
  min-height: 56px;
  box-sizing: border-box;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-md);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.user-profile:hover {
  background: var(--bg-elevated-2, color-mix(in srgb, var(--text-primary) 5%, transparent));
}
.user-profile:focus-visible {
  outline: 2px solid var(--accent, #58a6ff);
  outline-offset: 2px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  flex-shrink: 0;
  overflow: hidden;
}
.user-avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-pill {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated-2, color-mix(in srgb, var(--text-primary) 6%, transparent));
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  text-transform: none;
  letter-spacing: 0.2px;
  vertical-align: baseline;
}
.user-info { flex: 1; min-width: 0; overflow: hidden; }
.user-name {
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-role {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-transform: capitalize;
}
.sidebar.collapsed .user-info { display: none; }

.user-menu-toggle {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  min-width: 28px;
  min-height: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tr-fast);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
}
.user-menu-toggle__icon,
.user-menu-toggle [data-ico] {
  pointer-events: none;
  width: 16px;
  height: 16px;
}
.user-menu-toggle:hover { background: var(--bg-elevated-2); color: var(--text-primary); }
.sidebar.collapsed .user-menu-toggle { display: none; }

.user-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: var(--sp-3);
  right: var(--sp-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: var(--sp-1) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--dur-ui) var(--ease-out), visibility var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-tooltip);
  /* Desktop: long admin lists must scroll, not clip above the viewport. */
  max-height: min(70vh, 520px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.user-menu[hidden] { display: none !important; }
.user-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  display: flex;
}

/* Phone sheet chrome is CSS-hidden on desktop. */
.user-menu-sheet-chrome { display: none; }
.user-menu-body {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1 1 auto;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--fs-base);
  transition: background var(--tr-fast);
  flex-shrink: 0;
}
.user-menu-item:hover {
  background: var(--bg-elevated-2);
  color: var(--text-primary);
  text-decoration: none;
}
.user-menu-item.logout { color: var(--danger); }
.user-menu-item.logout:hover { background: var(--danger-bg); }

.user-menu-item .menu-icon { font-size: var(--fs-lg); width: 20px; text-align: center; }
.user-menu-item .menu-label { flex: 1 1 auto; min-width: 0; }
.user-menu-item .menu-kbd {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-tertiary, #6e7681);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: 0.85;
  white-space: nowrap;
}

/* Hairline divider between menu groups (above legal links + above logout). */
.user-menu-divider {
  height: 1px;
  margin: 6px 8px;
  background: var(--border-muted);
  flex-shrink: 0;
}

/* Mobile sheet backdrop — inactive on desktop until JS opens the sheet. */
.user-menu-backdrop {
  display: none;
}
.user-menu-backdrop[hidden] { display: none !important; }

/* ---------- Main content area ---------- */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  --oc-topbar-stack: calc(var(--topbar-height) + var(--sat-fix, env(safe-area-inset-top, 0px)));
  min-height: 100vh;
  min-height: 100dvh;
  /* Without min-width:0 the flex item's intrinsic min size is min-content,
     so when an oversized .content-right inside .content-wrapper widens past
     its slot, .main-content grows to fit it — which in turn widens the
     sibling .top-bar (a flex row with justify-content:space-between),
     pushing its right-side controls off-screen. Pinning min-width to 0 makes
     .main-content respect its flex allocation; .content-wrapper's existing
     overflow:hidden then clips any overlong chat panel cleanly. */
  min-width: 0;
  transition: margin-left var(--tr-slow);
}
body.sidebar-collapsed .main-content { margin-left: var(--sidebar-width-collapsed); }
@media (min-width: 1025px) {
  .main-content {
    margin-left: calc(var(--sidebar-width) + var(--sidebar-gutter, 10px));
  }
  body.sidebar-collapsed .main-content {
    margin-left: calc(var(--sidebar-width-collapsed) + var(--sidebar-gutter, 10px));
  }
  html[data-sidebar-init="collapsed"] .main-content {
    margin-left: calc(var(--sidebar-width-collapsed) + var(--sidebar-gutter, 10px));
  }
}

/* ---------- Top bar (Pathway C Stage 1 — app header, not utility strip) ---------- */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3);
  /* Edge-to-edge under status bar / Dynamic Island (viewport-fit=cover).
     Menu controls sit below the inset; bar background paints into the
     unsafe area — standard iOS app chrome. Desktop env() is 0. */
  padding: var(--sat-fix, env(safe-area-inset-top, 0px)) var(--sp-5) 0;
  min-height: calc(var(--topbar-height) + var(--sat-fix, env(safe-area-inset-top, 0px)));
  height: auto;
  max-height: none;
  box-sizing: border-box;
  /* Single row via nowrap + fixed height. overflow must stay visible so
     lang-pop / other top-bar dropdowns can paint below the bar; hidden
     was clipping menus behind main content. */
  overflow: visible;
  flex-wrap: nowrap;
  background: transparent;
  border-bottom: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* Above the peeked sidebar (1200) so expand/logo never slide under frost.
     Still below modals (--z-modal 1500) and command palette (5500). */
  z-index: 1300;
}
.top-bar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  min-width: 0;
}
/* Wordmark is one image. The symbol is its left edge, so open and close
   are a width clip on the same duration as the rail. Peek keeps .collapsed,
   so the logo stays the symbol while the menu flies in. */
.top-bar-brand .sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 24px;
  width: 123px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  transition: width var(--dur-sheet, 320ms) var(--ease-out, ease);
}
body.sidebar-collapsed .top-bar-brand .sidebar-brand,
html[data-sidebar-init="collapsed"] .top-bar-brand .sidebar-brand {
  width: 24px;
}
.top-bar-brand .sidebar-logo,
.top-bar-brand .sidebar-logo-full {
  display: block;
  flex: 0 0 auto;
  height: 24px;
  width: auto;
  max-width: none;
  max-height: 24px;
}
@media (max-width: 820px) {
  html:not([data-route="tablet"]):not([data-route="desktop"]) .top-bar-brand .sidebar-brand {
    width: auto !important;
    height: auto;
    min-height: 44px;
    overflow: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  .top-bar-brand .sidebar-brand { transition: none; }
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top-bar {
    background: color-mix(in srgb, var(--bg-elevated) 92%, var(--bg-base));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}
/* Light: solid elevated surface (blur can muddy light grays) */
[data-theme="light"] .top-bar {
  background: var(--bg-elevated);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.top-bar-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 0 0 auto;
  gap: 1px;
}
.top-bar-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-bar-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-normal);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-bar-end {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 0;
}
.top-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  position: relative;
  z-index: 1;
  margin-left: 0;
}

/* Ask Oceanus — global AI entry; icon mark primary, label optional */
.ask-oceanus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-default));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition:
    border-color var(--tr-fast),
    background var(--tr-fast);
  flex-shrink: 0;
  white-space: nowrap;
}
.ask-oceanus-btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated-2);
  box-shadow: none;
}
.ask-oceanus-btn:active { transform: scale(0.98); }
.ask-oceanus-btn:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--text-primary) 45%, transparent);
  outline-offset: 2px;
  box-shadow: none;
}
.ask-oceanus-btn__mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: none;
  flex-shrink: 0;
  margin: 0;
}
/* Label hidden — icon-only like mobile tray; aria-label remains */
.ask-oceanus-btn__label { display: none; }

/* Soften sidebar chrome slightly (Stage 1) */
.sidebar {
  background: color-mix(in srgb, var(--bg-elevated) 96%, var(--bg-base));
  border: none;
}
.sidebar-header {
  border-bottom: none;
}
.sidebar-footer {
  border-top: none;
}

/* ---------- Top-bar utility icons (mobile-path minimalism, all viewports) ----------
   Same language as touch chrome: 32px ghost circles, icon-only, tight gap. */
.top-bar-actions {
  gap: 6px;
}

/* Font size — single cycling A (desktop + mobile). A−/%/A+ kept in DOM for a11y
   tooling but hidden; cycleFontScale handles the compact control. */
.font-scale-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  background: transparent;
  overflow: hidden;
  flex-shrink: 0;
}
.font-scale-btn,
.font-scale-pct {
  display: none !important;
}
.font-scale-compact {
  display: inline-flex !important;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  transition: background var(--tr-base), color var(--tr-base);
}
.font-scale-compact .font-scale-a {
  font-size: 14px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.font-scale-compact:hover,
.font-scale-compact:active {
  background: var(--bg-elevated-2);
  color: var(--accent);
}
.font-scale-compact:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: var(--r-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  padding: 0;
  transition: background var(--tr-base), border-color var(--tr-base), color var(--tr-base);
}
.theme-toggle-btn:hover {
  background: var(--bg-elevated-2);
  border-color: var(--accent);
  color: var(--accent);
}

/* Feedback — same circular ghost chip */
.feedback-btn-minimal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--tr-base), border-color var(--tr-base), color var(--tr-base);
}
.feedback-btn-minimal:hover {
  background: var(--bg-elevated-2);
  border-color: var(--accent);
  color: var(--accent);
}

.theme-indicator {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-elevated-2);
  border-radius: var(--r-sm);
}

.ava-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--success);
}
.ava-status-dot.offline { background: var(--text-dim); }

/* ---------- Content wrapper (left + right split) ---------- */
.content-wrapper.chat-sliding {
  overflow: visible;
}
.content-wrapper {
  flex: 1;
  display: flex;
  /* Full pane so page scroll can pass under the frosted top bar. */
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  /* See .main-content note: without min-width:0 a flex item defaults to
     min-content, which can let .content-right overflow this wrapper and
     push siblings around. */
  min-width: 0;
  min-height: 0;  /* prevent flex min-content from overriding height */
}

.content-left {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5);
  /* Keep last content clear of the home indicator without leaving a dead
     band outside the page (Capacitor contentInset is "never"). */
  padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom, 0px));
  transition: margin-right var(--tr-slow);
  min-width: 0;
  min-height: 0;   /* flex overflow fix: let overflow-y actually trigger */
}
.content-left::before {
  content: "";
  display: block;
  height: var(--oc-topbar-stack, var(--topbar-height));
  pointer-events: none;
  flex-shrink: 0;
}
.content-left.with-chat { margin-right: 0; }

.content-right {
  width: var(--chat-width-user, var(--chat-width));
  flex-shrink: 0;
  /* Hard cap so the user-resized chat panel can never exceed the wrapper's
     own width. This is what actually prevents the rightward shift of the
     topbar items when the resizer is dragged to extreme widths. */
  max-width: 100%;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  transition: width var(--tr-slow), border-color var(--tr-slow);
  overflow: hidden;
  position: relative; /* anchor for absolutely-positioned resizer */
  min-width: 0;
}
.content-right.collapsed { width: 0; border-left: none; }
.content-right.mode-dock {
  padding-top: var(--oc-topbar-stack, var(--topbar-height));
  box-sizing: border-box;
}

/* Extra-wide screens (>=1920px): bump the default chat width a bit more
   so it doesn't look stranded on 27" 4K monitors. Honors user override. */
@media (min-width: 1920px) {
  .content-right { width: var(--chat-width-user, clamp(440px, 32vw, 820px)); }
}

/* While dragging the resizer, suppress the width transition so the drag
   feels 1:1 with the cursor. */
body.chat-resizing .content-right { transition: none !important; }
body.chat-resizing { cursor: ew-resize !important; user-select: none; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--tr-slow), width var(--tr-slow);
  }
  .sidebar.collapsed {
    width: var(--sidebar-width);
    transform: translateX(0);
  }
  .main-content { margin-left: 0; }
  body.sidebar-collapsed .main-content { margin-left: 0; }
  .content-wrapper { flex-direction: column; }
  .content-right {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-default);
    padding-top: 0;
  }
}

/* -----------------------------------------------------------------------
   Display strip above the company jump: font, language, color, feedback.
   ----------------------------------------------------------------------- */
.sb-pref-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 2px;
  margin: -4px 8px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 0;
}
.sb-pref-bar > * {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}
.sb-pref-bar .lang-pop-btn,
.sb-pref-bar .theme-toggle-btn,
.sb-pref-bar .feedback-btn-minimal,
.sb-pref-bar .font-scale-compact {
  width: auto;
  max-width: none;
  height: 28px;
  min-width: 28px;
  min-height: 0;
  padding: 0 6px;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background var(--dur-ui, 160ms) var(--ease-out, ease),
              color var(--dur-ui, 160ms) var(--ease-out, ease);
}
.sb-pref-bar .sb-pref-lab {
  display: grid;
  grid-template-columns: 0fr;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  margin-left: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium, 500);
  line-height: 1;
  letter-spacing: 0.01em;
  transition: grid-template-columns 320ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              opacity 280ms linear 40ms,
              margin-left 320ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.sb-pref-bar .sb-pref-lab > span {
  display: block;
  overflow: hidden;
  min-width: 0;
  max-width: 8.5em;
  white-space: nowrap;
}
.sb-pref-bar .font-scale-compact:hover,
.sb-pref-bar .font-scale-compact:focus-visible,
.sb-pref-bar .lang-pop:hover .lang-pop-btn,
.sb-pref-bar .lang-pop-btn:focus-visible,
.sb-pref-bar .lang-pop-btn[aria-expanded="true"],
.sb-pref-bar .theme-pop:hover .theme-toggle-btn,
.sb-pref-bar .theme-toggle-btn:focus-visible,
.sb-pref-bar .theme-toggle-btn[aria-expanded="true"],
.sb-pref-bar .feedback-btn-minimal:hover,
.sb-pref-bar .feedback-btn-minimal:focus-visible {
  width: auto;
  max-width: none;
  justify-content: flex-start;
  padding: 0 10px 0 6px;
}
.sb-pref-bar .font-scale-compact:hover .sb-pref-lab,
.sb-pref-bar .font-scale-compact:focus-visible .sb-pref-lab,
.sb-pref-bar .lang-pop:hover .sb-pref-lab,
.sb-pref-bar .lang-pop-btn:focus-visible .sb-pref-lab,
.sb-pref-bar .lang-pop-btn[aria-expanded="true"] .sb-pref-lab,
.sb-pref-bar .theme-pop:hover .sb-pref-lab,
.sb-pref-bar .theme-toggle-btn:focus-visible .sb-pref-lab,
.sb-pref-bar .theme-toggle-btn[aria-expanded="true"] .sb-pref-lab,
.sb-pref-bar .feedback-btn-minimal:hover .sb-pref-lab,
.sb-pref-bar .feedback-btn-minimal:focus-visible .sb-pref-lab {
  grid-template-columns: 1fr;
  opacity: 1;
  margin-left: 6px;
}
.sb-pref-bar .feedback-btn-minimal .sb-pref-lab {
  font-size: var(--fs-xs) !important;
}
/* The A lives in a wrapper that also has a hover wash. That second
   layer stacks on the button, so the glyph changes color twice. */
.sb-pref-bar .font-scale-ctrl,
.sb-pref-bar .font-scale-ctrl:hover {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  background: transparent !important;
  color: inherit;
  box-shadow: none !important;
}
.sb-pref-bar .font-scale-compact:hover,
.sb-pref-bar .font-scale-compact:active {
  background: var(--btn-wash) !important;
  color: var(--text-primary);
}
.sb-pref-bar .font-scale-compact .font-scale-a { font-size: 13px; flex: 0 0 auto; }
.sb-pref-bar .lang-pop-flag { font-size: 14px; flex: 0 0 auto; line-height: 1; }
.sb-pref-bar .theme-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.sb-pref-bar .feedback-btn-minimal .oc-ico { flex: 0 0 auto; }
/* data-theme stays the resolved light/dark palette. This marker shows
   the monitor while the stored choice is the system scheme. */
html[data-theme-mode="auto"] .theme-ico { display: none; }
html[data-theme-mode="auto"] .theme-ico--auto { display: block; }
.sb-pref-bar .feedback-btn-minimal .oc-ico { width: 16px; height: 16px; }
/* Portaled out of the strip, so this cannot depend on .sb-pref-bar.
   .lang-pop-item is a 3-column grid; the manage link is one text node
   and would otherwise wrap inside the 22px first column. */
a.theme-pop-manage { display: block; }
@media (min-width: 1025px) {
  .sidebar.collapsed:not(.is-peek) .sb-pref-bar { display: none; }
}
@media (max-width: 820px) {
  .sb-pref-bar { margin-top: 0; }
  .sb-pref-bar .lang-pop-btn,
  .sb-pref-bar .theme-toggle-btn,
  .sb-pref-bar .feedback-btn-minimal,
  .sb-pref-bar .font-scale-compact {
    width: 36px;
    max-width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sb-pref-bar .lang-pop-btn,
  .sb-pref-bar .theme-toggle-btn,
  .sb-pref-bar .feedback-btn-minimal,
  .sb-pref-bar .font-scale-compact,
  .sb-pref-bar .sb-pref-lab { transition: none; }
}

/* -----------------------------------------------------------------------
   Global ticker quick-search (top of sidebar)
   ----------------------------------------------------------------------- */
.sidebar-search {
  padding: 8px 12px 6px;
  border-bottom: none;
  position: relative;
}
.sidebar-search input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-input, var(--bg-base));
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  padding: 7px 11px;
  border-radius: var(--r-md);
  font-size: calc(12.5px * var(--ui-font-scale, 1));
  font-family: inherit;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color var(--dur-ui) var(--ease-out);
}
.sidebar-search input::placeholder {
  color: var(--text-muted);
  font-style: normal;
}
.sidebar-search input:hover {
  border-color: var(--border-strong);
  box-shadow: none;
}
.sidebar-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: none;
}

/* Sidebar-search prefix icon + keyboard shortcut hint. Both are positioned
   inside the .sidebar-search container which is `position: relative`. */
.sidebar-search::before {
  content: "";
  position: absolute;
  top: 50%; left: 22px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}
.sidebar-search input {
  padding-left: 30px;
}
.sidebar.collapsed .sidebar-search { display: none; }
/* Off-canvas drawer is the full menu. A stuck collapsed class must not
   hide the company jump that the display strip sits on. */
@media (max-width: 1024px) {
  .sidebar.collapsed .sidebar-search { display: block; }
}

/* ---------- Top-bar company jump (when sidebar collapsed) ---------- */
.topbar-search {
  display: none; /* only when left nav is collapsed */
  position: relative;
  -webkit-flex: 1 1 280px;
  flex: 1 1 280px;
  min-width: 160px;
  max-width: 420px;
  margin: 0 var(--sp-2, 8px);
  z-index: 5001;
}
/* Show when left nav is icon-rail collapsed.
   Prefer body.sidebar-collapsed (synced in JS) so it still works if DOM
   order changes; html[data-sidebar-init] covers first paint before body
   class is applied; sibling selector remains a no-JS fallback. */
html[data-sidebar-init="collapsed"] .topbar-search,
body.sidebar-collapsed .topbar-search,
body.sidebar-collapsed .main-content .topbar-search {
  display: none !important;
}

/* Desktop: icon chip that slides open on hover / focus / typed query. */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  html[data-sidebar-init="collapsed"] .topbar-search,
  body.sidebar-collapsed .topbar-search,
  body.sidebar-collapsed .main-content .topbar-search {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    margin: 0;
    overflow: visible;
    transition:
      width var(--dur-ui, 180ms) var(--ease-out, ease),
      max-width var(--dur-ui, 180ms) var(--ease-out, ease),
      min-width var(--dur-ui, 180ms) var(--ease-out, ease),
      flex-basis var(--dur-ui, 180ms) var(--ease-out, ease);
  }
  html[data-sidebar-init="collapsed"] .topbar-search:hover,
  html[data-sidebar-init="collapsed"] .topbar-search:focus-within,
  html[data-sidebar-init="collapsed"] .topbar-search.is-open,
  body.sidebar-collapsed .topbar-search:hover,
  body.sidebar-collapsed .topbar-search:focus-within,
  body.sidebar-collapsed .topbar-search.is-open,
  body.sidebar-collapsed .main-content .topbar-search:hover,
  body.sidebar-collapsed .main-content .topbar-search:focus-within,
  body.sidebar-collapsed .main-content .topbar-search.is-open {
    flex: 0 0 280px;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    overflow: visible;
  }
  html[data-sidebar-init="collapsed"] .topbar-search input,
  body.sidebar-collapsed .topbar-search input,
  body.sidebar-collapsed .main-content .topbar-search input {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0;
    border-radius: 12px;
    color: transparent;
    caret-color: var(--text-primary);
  }
  /* Keyed on the field's own state, not body.sidebar-collapsed: a ::placeholder
     rule under a body class made every sidebar toggle restyle the whole page. */
  .topbar-search:not(:hover):not(:focus-within):not(.is-open) input::placeholder {
    color: transparent;
    opacity: 0;
  }
  html[data-sidebar-init="collapsed"] .topbar-search:hover input,
  html[data-sidebar-init="collapsed"] .topbar-search:focus-within input,
  html[data-sidebar-init="collapsed"] .topbar-search.is-open input,
  body.sidebar-collapsed .topbar-search:hover input,
  body.sidebar-collapsed .topbar-search:focus-within input,
  body.sidebar-collapsed .topbar-search.is-open input,
  body.sidebar-collapsed .main-content .topbar-search:hover input,
  body.sidebar-collapsed .main-content .topbar-search:focus-within input,
  body.sidebar-collapsed .main-content .topbar-search.is-open input {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0 12px 0 36px;
    border-radius: 12px;
    color: var(--text-primary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-search {
    transition: none !important;
  }
}
.topbar-search input,
#tb-ticker-search {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 0 12px 0 36px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #58a6ff) 40%, var(--border-default));
  background: color-mix(in srgb, var(--accent, #58a6ff) 8%, var(--bg-base, #0d1117));
  color: var(--text-primary);
  font: inherit;
  font-size: calc(13px * var(--ui-font-scale, 1));
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color 140ms ease, background 140ms ease;
}
.topbar-search input::placeholder,
#tb-ticker-search::placeholder {
  color: var(--text-secondary);
  font-weight: 500;
  font-style: normal;
  opacity: 0.9;
}
.topbar-search input:hover,
#tb-ticker-search:hover {
  border-color: color-mix(in srgb, var(--accent, #58a6ff) 55%, var(--border-default));
}
.topbar-search input:focus,
#tb-ticker-search:focus {
  border-color: var(--accent, #58a6ff);
  box-shadow: none;
  background: color-mix(in srgb, var(--accent, #58a6ff) 12%, var(--bg-elevated, #161b22));
}
.topbar-search::before { content: none !important; display: none !important; }
.topbar-search__ico {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  pointer-events: none;
  z-index: 2;
}
.topbar-search:hover .topbar-search__ico,
.topbar-search:focus-within .topbar-search__ico,
.topbar-search.is-open .topbar-search__ico {
  left: 12px;
  transform: translateY(-50%);
}
#tb-ticker-search::-webkit-search-decoration,
#tb-ticker-search::-webkit-search-cancel-button,
#tb-ticker-search::-webkit-search-results-button,
#tb-ticker-search::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
/* In-host (non-portal) placement only — portal uses fixed coords from JS */
.tb-search-results:not(.sb-search-results--portal) {
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 4px) !important;
  min-width: min(420px, 92vw);
  width: max(100%, 320px);
  max-width: min(480px, 94vw);
}
/* The title and its subtitle (e.g. the dashboard greeting) use the room the
   top bar has; they only truncate when the bar truly runs out of space. */
.top-bar-brand {
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  min-width: 0;
}
.top-bar-title-wrap {
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
}
@media (max-width: 900px) {
  /* Mobile uses drawer; keep topbar search available when collapsed class stuck */
  .topbar-search {
    max-width: none;
    -webkit-flex: 1 1 140px;
    flex: 1 1 140px;
    margin: 0 6px;
  }
  .tb-search-results:not(.sb-search-results--portal) {
    min-width: 0;
    width: min(92vw, 420px);
    right: auto !important;
  }
}
@media (max-width: 640px) {
  .topbar-search,
  html[data-sidebar-init="collapsed"] .topbar-search,
  body.sidebar-collapsed .topbar-search,
  body.sidebar-collapsed .main-content .topbar-search {
    display: none !important;
  }
}


.sb-search-results {
  --sb-ai: var(--accent, #58a6ff);
  --sb-ai-soft: color-mix(in srgb, var(--accent, #58a6ff) 55%, #a78bfa);
  position: absolute;
  top: calc(100% - 2px);
  left: 10px;
  right: 10px;
  /* Above main content / sticky strips so hover never hits page chrome */
  z-index: 5000;
  background: var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--sb-ai) 22%, var(--border-default));
  border-radius: 12px;
  max-height: min(420px, 62vh);
  /* glass.css sets overflow:hidden — must force scroll */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sb-ai) 10%, transparent),
    0 12px 32px -10px rgba(0, 0, 0, 0.4),
    0 0 28px -12px color-mix(in srgb, var(--sb-ai) 28%, transparent);
  padding: 4px;
  -webkit-overflow-scrolling: touch;
  /* Capture all pointer events inside the panel */
  pointer-events: auto;
  font-feature-settings: "ss01" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
}
/*
 * Portaled to <body> (coords set inline by JS with !important).
 * Stack while open — RESULTS must be the topmost layer:
 *   shield                 10040  — blocks hover/click under the list
 *   top-bar / sidebar      10050  — keep the active field usable
 *   results portal         10060  — company choices (always on top)
 */
.sb-search-results.sb-search-results--portal,
.tb-search-results.sb-search-results.sb-search-results--portal,
body > .sb-search-results.sb-search-results--portal {
  position: fixed !important;
  /* Neutralize in-host .tb-search-results left/right/top !important */
  left: 0; /* overwritten by JS setProperty(...,'important') */
  right: auto !important;
  top: 0;
  bottom: auto !important;
  width: auto;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 10060 !important;
  pointer-events: auto !important;
  isolation: auto;
  -webkit-transform: none !important;
  transform: none !important;
  /* Opaque plate — no page text bleeding through glass */
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--sb-ai, #58a6ff) 7%, var(--bg-elevated, #161b22)) 0%,
      var(--bg-elevated, #161b22) 42%,
      var(--bg-elevated, #161b22) 100%
    ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-height: min(420px, 62vh);
  border: 1px solid color-mix(in srgb, var(--sb-ai, #58a6ff) 26%, var(--border-default, #30363d)) !important;
  border-radius: 12px !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sb-ai, #58a6ff) 12%, transparent),
    0 14px 36px -10px rgba(0, 0, 0, 0.48),
    0 0 32px -10px color-mix(in srgb, var(--sb-ai, #58a6ff) 32%, transparent) !important;
}
.sb-search-shield {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: transparent;
  pointer-events: auto;
  cursor: default;
}
body.sb-search-open .top-bar {
  z-index: 10050 !important;
  pointer-events: auto;
}
body.sb-search-open .sidebar {
  z-index: 10050 !important;
  /* Only the search field should receive events; rest of rail is inert */
  pointer-events: none;
}
body.sb-search-open .sidebar .sidebar-search,
body.sb-search-open .sidebar .sidebar-search * {
  pointer-events: auto !important;
}
/* Input only — do NOT give * pointer-events (would include hidden home box) */
body.sb-search-open .topbar-search,
body.sb-search-open .topbar-search input,
body.sb-search-open .sidebar-search,
body.sb-search-open .sidebar-search input {
  pointer-events: auto !important;
}
/* Also disable hover on main page chrome while open */
body.sb-search-open .main-content > :not(.top-bar),
body.sb-search-open .main-content .content-wrapper {
  pointer-events: none !important;
}

/* ---------- Company row — minimal + AI-accent menu item ---------- */
.sb-res,
button.sb-res {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  margin: 0;
  color: var(--text-primary) !important;
  background: transparent;
  /* Kill global a:hover underline + default button chrome */
  text-decoration: none !important;
  border-radius: 8px;
  border: 0 !important;
  font: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  transition: background 140ms ease;
  min-height: 42px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  outline: none;
  position: relative;
}
/* Soft AI accent bar on active/hover */
.sb-res::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease;
  pointer-events: none;
}
.sb-res *,
button.sb-res:hover *,
button.sb-res:focus * {
  text-decoration: none !important;
  pointer-events: none; /* whole row is the hit target */
}
.sb-res + .sb-res { margin-top: 1px; }
.sb-res:hover,
.sb-res.active,
button.sb-res:hover,
button.sb-res.active {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--sb-ai, #58a6ff) 12%, transparent) 0%,
      color-mix(in srgb, var(--sb-ai, #58a6ff) 6%, transparent) 55%,
      transparent 100%
    ) !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  box-shadow: none;
}
.sb-res:hover::before,
.sb-res.active::before {
  opacity: 1;
  background: linear-gradient(
    180deg,
    var(--sb-ai-soft, #7aa8e8) 0%,
    color-mix(in srgb, var(--sb-ai, #58a6ff) 70%, #a78bfa) 100%
  );
  box-shadow: 0 0 8px color-mix(in srgb, var(--sb-ai, #58a6ff) 55%, transparent);
}
.sb-res:focus-visible {
  outline: 1.5px solid color-mix(in srgb, var(--sb-ai, #58a6ff) 50%, transparent);
  outline-offset: 0;
}

/* Logo tile — compact */
.sb-res-logo {
  position: relative;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--sb-ai, #58a6ff) 14%, var(--border-default, #30363d));
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.sb-res-logo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.sb-res-logo__fallback {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: calc(10px * var(--ui-font-scale, 1));
  font-weight: 650;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--sb-ai, #58a6ff) 75%, var(--text-secondary));
  background: color-mix(in srgb, var(--sb-ai, #58a6ff) 12%, transparent);
}
.sb-res-logo__fallback[hidden] { display: none !important; }

.sb-res-body {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 2px;
}
.sb-res-name {
  color: var(--text-primary);
  /* Minimalist: smaller, lighter weight, tight tracking */
  font-size: calc(12.5px * var(--ui-font-scale, 1));
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-res:hover .sb-res-name,
.sb-res.active .sb-res-name {
  color: color-mix(in srgb, var(--text-primary) 92%, var(--sb-ai, #58a6ff));
}
.sb-res-meta {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.sb-res-sym {
  font-weight: 600;
  font-size: calc(10.5px * var(--ui-font-scale, 1));
  font-family: var(--font-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace);
  letter-spacing: 0.04em;
  color: var(--sb-ai, #58a6ff);
  background: color-mix(in srgb, var(--sb-ai, #58a6ff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sb-ai, #58a6ff) 18%, transparent);
  border-radius: 4px;
  padding: 0 5px;
  line-height: 1.45;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}
.sb-res:hover .sb-res-sym,
.sb-res.active .sb-res-sym {
  color: color-mix(in srgb, var(--sb-ai, #58a6ff) 70%, #c4b5fd);
  border-color: color-mix(in srgb, var(--sb-ai, #58a6ff) 32%, transparent);
  background: color-mix(in srgb, var(--sb-ai, #58a6ff) 16%, transparent);
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--sb-ai, #58a6ff) 40%, transparent);
}
.sb-res-ex {
  color: var(--text-muted, var(--text-secondary));
  font-size: calc(10px * var(--ui-font-scale, 1));
  font-weight: 450;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-res-go {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  color: var(--text-muted, var(--text-secondary));
  font-size: 12px;
  font-weight: 500;
  opacity: 0.28;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  transition: opacity 140ms ease, transform 140ms ease, color 140ms ease;
}
.sb-res:hover .sb-res-go,
.sb-res.active .sb-res-go {
  opacity: 0.85;
  color: var(--sb-ai-soft, #7aa8e8);
  -webkit-transform: translateX(2px);
  transform: translateX(2px);
  text-shadow: 0 0 10px color-mix(in srgb, var(--sb-ai, #58a6ff) 45%, transparent);
}

.sb-search-empty {
  padding: 14px 12px;
  color: var(--text-muted);
  font-size: calc(12px * var(--ui-font-scale, 1));
  text-align: center;
}
.sb-search-empty__title {
  font-weight: 500;
  font-size: calc(12px * var(--ui-font-scale, 1));
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.sb-search-empty__link,
button.sb-search-empty__link,
.sb-search-empty__link:hover,
.sb-search-empty__link:focus {
  display: inline-block;
  color: var(--sb-ai, #58a6ff) !important;
  text-decoration: none !important;
  font-weight: 550;
  font-size: calc(11.5px * var(--ui-font-scale, 1));
  font-family: inherit;
  letter-spacing: -0.01em;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.sb-search-empty__link:hover {
  background: color-mix(in srgb, var(--sb-ai, #58a6ff) 12%, transparent);
  box-shadow: 0 0 12px -4px color-mix(in srgb, var(--sb-ai, #58a6ff) 40%, transparent);
}
.sb-search-empty__link b {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Light theme — keep plate clean, AI accents quieter */
[data-theme="light"] .sb-search-results.sb-search-results--portal,
[data-theme="light"] body > .sb-search-results.sb-search-results--portal {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--sb-ai, #58a6ff) 6%, #fff) 0%,
      var(--bg-elevated, #fff) 48%,
      var(--bg-elevated, #fff) 100%
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sb-ai, #58a6ff) 14%, transparent),
    0 12px 28px -8px rgba(15, 23, 42, 0.14),
    0 0 24px -10px color-mix(in srgb, var(--sb-ai, #58a6ff) 22%, transparent) !important;
}
[data-theme="light"] .sb-res:hover,
[data-theme="light"] .sb-res.active {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--sb-ai, #58a6ff) 10%, transparent) 0%,
      color-mix(in srgb, var(--sb-ai, #58a6ff) 4%, transparent) 60%,
      transparent 100%
    ) !important;
}