/* ── Expanding icon-rail sidebar ─────────────────────────────────── */
/* Collapsed 56px, expands to 240px on hover or when pinned.        */

:root, [data-theme="light"] {
  --sb-bg:        #e8e8ed;
  --sb-border:    rgba(0, 0, 0, 0.08);
  --sb-hover:     rgba(0, 0, 0, 0.05);
  --sb-active:    #007aff;
  --sb-tooltip:   #1c1c1e;
  --sb-text:      #3c3c43;
  --sb-text-muted:#8e8e93;
  --sb-text-strong:#1c1c1e;
  --sb-blue:      #007aff;
  --sb-guide:     rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] {
  --sb-bg:        #111111;
  --sb-border:    rgba(255, 255, 255, 0.08);
  --sb-hover:     rgba(255, 255, 255, 0.07);
  --sb-active:    #0a84ff;
  --sb-tooltip:   #2c2c2e;
  --sb-text:      rgba(255, 255, 255, 0.55);
  --sb-text-muted:rgba(255, 255, 255, 0.30);
  --sb-text-strong:rgba(255, 255, 255, 0.92);
  --sb-blue:      #0a84ff;
  --sb-guide:     rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --sb-bg:        #111111;
    --sb-border:    rgba(255, 255, 255, 0.08);
    --sb-hover:     rgba(255, 255, 255, 0.07);
    --sb-active:    #0a84ff;
    --sb-tooltip:   #2c2c2e;
    --sb-text:      rgba(255, 255, 255, 0.55);
    --sb-text-muted:rgba(255, 255, 255, 0.30);
    --sb-text-strong:rgba(255, 255, 255, 0.92);
    --sb-blue:      #0a84ff;
    --sb-guide:     rgba(255, 255, 255, 0.08);
  }
}

/* Hide entirely when embedded in hub iframe */
html.in-hub .sidebar { display: none !important; }

/* Standalone body padding to clear the rail.
   Skipped inside the hub (in-hub on iframe doc, hub-host on hub doc). */
html:not(.in-hub):not(.hub-host) body {
  padding-left: 56px;
  transition: padding-left 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
html:not(.in-hub):not(.hub-host) body.sidebar-pinned { padding-left: 240px; }

/* Hide the legacy per-page top-nav whenever the expanding-rail sidebar is
   in charge of chrome — standalone (no in-hub, no hub-host) AND inside the
   hub iframe (in-hub). The sidebar duplicates every link in the top-nav. */
html:not(.hub-host) .top-nav,
html.in-hub header,
html.in-hub #tab-nav { display: none !important; }

/* ── Sidebar shell ───────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  left: 0; top: 0;
  width: 56px;
  height: 100vh;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  z-index: 200;
  overflow: hidden;
  transition: width 220ms cubic-bezier(0.32, 0.72, 0, 1);
  flex-shrink: 0;
}
.sidebar.expanded, .sidebar.pinned { width: 240px; }

/* ── Header (brand + pin) ────────────────────────────────────────── */
.sb-header {
  display: flex; align-items: center;
  padding: 0 10px 10px 10px;
  height: 44px;
  flex-shrink: 0;
}
.sb-brand {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent, #8b5cf6), var(--sb-blue));
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
  text-decoration: none;
}
.sb-brand svg {
  width: 18px; height: 18px;
  stroke: var(--text-always-white); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.sb-brand-text {
  margin-left: 10px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--sb-text-strong);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 180ms ease 60ms;
  letter-spacing: -0.005em;
}
.sb-brand-accent { color: var(--sb-blue); }
.sidebar.expanded .sb-brand-text,
.sidebar.pinned .sb-brand-text { opacity: 1; }

.sb-pin {
  margin-left: auto;
  width: 28px; height: 28px;
  border: none; background: transparent;
  color: var(--sb-text-muted);
  cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 180ms ease 100ms, background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}
.sidebar.expanded .sb-pin,
.sidebar.pinned .sb-pin { opacity: 1; }
.sb-pin:hover { background: var(--sb-hover); color: var(--sb-text-strong); }
.sb-pin.pinned-on { color: var(--sb-blue); }
.sb-pin svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Nav scroll area ─────────────────────────────────────────────── */
.sb-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-guide) transparent;
}
.sb-nav::-webkit-scrollbar { width: 6px; }
.sb-nav::-webkit-scrollbar-thumb { background: var(--sb-guide); border-radius: 3px; }

/* ── Nav item ────────────────────────────────────────────────────── */
.sb-item {
  display: flex; align-items: center;
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--sb-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
  user-select: none;
  margin: 1px 0;
  font-family: inherit;
  font-size: inherit;
  border: none;
  width: 100%;
  background: transparent;
  text-align: left;
}
.sb-item:hover { background: var(--sb-hover); color: var(--sb-text-strong); }
.sb-item.active {
  background: var(--sb-active);
  color: var(--text-always-white);
  box-shadow: 0 1px 2px rgba(0, 122, 255, 0.18);
}
.sb-item-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sb-item-icon svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sb-item-label {
  margin-left: 12px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 180ms ease 80ms;
  flex: 1;
}
.sidebar.expanded .sb-item-label,
.sidebar.pinned .sb-item-label { opacity: 1; }

/* Section header (CRM / Outreach / Bots) chevron */
.sb-chev {
  margin-left: auto;
  width: 14px; height: 14px;
  opacity: 0;
  transition: opacity 180ms ease 100ms, transform 200ms ease;
  flex-shrink: 0;
}
.sidebar.expanded .sb-chev,
.sidebar.pinned .sb-chev { opacity: 0.5; }
.sb-item:hover .sb-chev { opacity: 0.85; }
.sb-section-header.open .sb-chev { transform: rotate(90deg); }
.sb-chev svg {
  width: 100%; height: 100%;
  stroke: currentColor; fill: none;
  stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Sub-items ───────────────────────────────────────────────────── */
.sb-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms cubic-bezier(0.32, 0.72, 0, 1);
  position: relative;
}
.sb-section-header.open + .sb-sub { max-height: 320px; }
/* When collapsed, hide sub-items entirely so they don't bleed visually */
.sidebar:not(.expanded):not(.pinned) .sb-sub { max-height: 0 !important; }
.sb-sub::before {
  content: '';
  position: absolute;
  left: 24px; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--sb-guide);
}

.sb-subitem {
  display: flex; align-items: center;
  height: 30px;
  padding: 0 8px 0 36px;
  border-radius: 7px;
  color: var(--sb-text-muted);
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
  margin: 1px 0;
}
.sb-subitem:hover { background: var(--sb-hover); color: var(--sb-text-strong); }
.sb-subitem.active {
  background: rgba(0, 122, 255, 0.10);
  color: var(--sb-blue);
  font-weight: 500;
}
[data-theme="dark"] .sb-subitem.active {
  background: rgba(10, 132, 255, 0.18);
  color: var(--blue);
}
.sb-subitem.active::before {
  content: '';
  position: absolute;
  left: 23px; top: 7px; bottom: 7px;
  width: 3px;
  background: var(--sb-blue);
  border-radius: 2px;
  z-index: 1;
}

/* ── Tooltip when collapsed ──────────────────────────────────────── */
.sb-tooltip {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--sb-tooltip);
  color: var(--text-always-white);
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 1000;
  font-weight: 500;
}
.sidebar:not(.expanded):not(.pinned) .sb-item:hover .sb-tooltip { opacity: 1; }
.sidebar.expanded .sb-tooltip,
.sidebar.pinned .sb-tooltip { display: none; }

/* ── Footer ──────────────────────────────────────────────────────── */
.sb-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--sb-border);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sb-theme {
  display: flex;
  gap: 2px;
  padding: 0 8px;
  height: 32px;
  align-items: center;
}
.sb-theme-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--sb-text-muted);
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.sb-theme-btn:hover { background: var(--sb-hover); color: var(--sb-text-strong); }
.sb-theme-btn.active { background: var(--sb-hover); color: var(--sb-blue); }

.sb-avatar-row {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  background: transparent;
  border: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
}
.sb-avatar-row:hover { background: var(--sb-hover); }
.sb-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #8b5cf6), var(--sb-blue));
  color: var(--text-always-white);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sb-avatar-meta {
  margin-left: 10px;
  overflow: hidden;
  flex: 1;
  opacity: 0;
  transition: opacity 180ms ease 80ms;
}
.sidebar.expanded .sb-avatar-meta,
.sidebar.pinned .sb-avatar-meta { opacity: 1; }
.sb-avatar-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--sb-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-avatar-role {
  font-size: 11.5px;
  color: var(--sb-text-muted);
  white-space: nowrap;
}
.sb-avatar-logout {
  margin-left: 4px;
  width: 16px; height: 16px;
  color: var(--sb-text-muted);
  opacity: 0;
  transition: opacity 180ms ease 80ms;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sidebar.expanded .sb-avatar-logout,
.sidebar.pinned .sb-avatar-logout { opacity: 1; }
.sb-avatar-row:hover .sb-avatar-logout { color: var(--sb-text-strong); }
.sb-avatar-logout svg {
  width: 100%; height: 100%;
  stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}