/* VOLTA navigation: Onest, graphite and lime. Tokens stay inside the rail. */
.sidebar {
  --nav-bg: #111111;
  --nav-ink: #b8b8b8;
  --nav-muted: #929292;
  --nav-hover: #202020;
  --nav-selected: #252a18;
  --nav-line: #323232;
  --nav-lime: #ccff00;
  background: var(--nav-bg);
  color: var(--nav-ink);
  font-family: 'Onest', sans-serif;
  padding-top: 24px;
  box-shadow: inset -1px 0 #252525;
}
.sidebar nav { scrollbar-color: #444 transparent; }
.sidebar .nav-group { margin-bottom: 24px; }
.sidebar .nav-item {
  min-height: 44px;
  padding: 10px 12px;
  gap: 12px;
  color: var(--nav-ink);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  border-radius: 10px;
}
.sidebar .nav-item svg { width: 20px; height: 20px; color: #909090; flex-shrink: 0; }
.sidebar .nav-item:hover { color: #f5f5f5; background: var(--nav-hover); }
.sidebar .nav-item:hover svg { color: #d6d6d6; }
.sidebar .nav-item.active, .sidebar .nav-item.current {
  color: var(--nav-lime);
  background: var(--nav-selected);
  font-weight: 500;
  box-shadow: none;
}
.sidebar .nav-item.active svg, .sidebar .nav-item.current svg { color: var(--nav-lime); }
.sidebar .nav-label { color: var(--nav-muted); padding: 0 12px 8px; font-size: 12px; }
.sidebar .nav-label button { color: var(--nav-muted); border-radius: 4px; }
.sidebar .subnav { font-size: 14px; min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
.sidebar .channel-navigation { margin-left: 21px; padding-left: 8px; border-color: var(--nav-line); }
.sidebar .channel-link { font-size: 14px; gap: 8px; padding: 7px 9px; min-height: 36px; }
.sidebar .channel-hash { font-size: 19px; font-weight: 400; color: #858585; }
.sidebar .channel-link.current .channel-hash { color: var(--nav-lime); }
.sidebar .channel-create { color: var(--nav-muted); font-size: 13px; }
.sidebar .channel-create:hover, .sidebar .nav-label button:hover { color: var(--nav-lime); }
.sidebar .nav-chevron svg { width: 14px; height: 14px; }
.sidebar .project-dot { flex-shrink: 0; }
.sidebar .mobile-close { color: #b8b8b8; }
.sidebar .mobile-close:hover { color: #fff; background: #292929; }
.sidebar :is(button, summary):focus-visible { outline: 2px solid var(--nav-lime); outline-offset: -2px; }

.sidebar-heading { display: flex; align-items: center; gap: 10px; min-height: 42px; margin-bottom: 22px; flex-shrink: 0; }
.sidebar-brand { display: block; min-width: 0; flex: 1; padding: 0 2px; border-radius: 5px; }
.sidebar-brand img { display: block; width: 100%; max-width: 158px; height: auto; }
.sidebar-collapse { display: grid; place-items: center; width: 32px; height: 36px; flex-shrink: 0; border-radius: 8px; color: #aaa; background: #222; }
.sidebar-collapse:hover { color: var(--nav-lime); background: #303030; }
.sidebar-collapse svg { width: 17px; height: 17px; transform: rotate(180deg); }
.sidebar .nav-text { min-width: 0; }
.collapsed-channels { position: fixed; left: 82px; z-index: 35; width: 270px; max-width: calc(100vw - 94px); max-height: calc(100dvh - 24px); overflow-y: auto; background: #202020; border: 1px solid #444; border-radius: 12px; padding: 8px; box-shadow: 0 12px 32px #0005; }
.collapsed-channels-heading { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 8px; color: #eee; }
.collapsed-channels-heading strong { font-weight: 500; font-size: 15px; }
.collapsed-channels-heading .icon-btn { color: #aaa; }
.collapsed-channels-heading .icon-btn:hover { background: #333; color: #fff; }
.collapsed-channel-list .channel-link { min-height: 40px; align-items: center; }

@media (min-width: 701px) {
  .app-shell.sidebar-collapsed > .sidebar { width: 72px; padding-left: 10px; padding-right: 10px; }
  .app-shell.sidebar-collapsed > .main { margin-left: 72px; width: calc(100% - 72px); }
  .sidebar-collapsed .sidebar-heading { justify-content: center; }
  .sidebar-collapsed .sidebar-brand { display: none; }
  .sidebar-collapsed .sidebar-collapse { width: 44px; height: 42px; }
  .sidebar-collapsed .sidebar-collapse svg { transform: none; }
  .sidebar-collapsed .workspace-mode summary { justify-content: center; padding: 10px; min-height: 48px; }
  .sidebar-collapsed .workspace-mode-copy, .sidebar-collapsed .workspace-mode-caret { display: none; }
  .sidebar-collapsed .workspace-mode-menu { top: 0; left: calc(100% + 16px); width: 252px; max-width: calc(100vw - 94px); }
  .sidebar-collapsed .sidebar nav .nav-item { position: relative; justify-content: center; padding: 10px; gap: 0; }
  .sidebar-collapsed .sidebar nav .nav-text, .sidebar-collapsed .sidebar nav .nav-chevron, .sidebar-collapsed .sidebar nav .channel-navigation { display: none; }
  .sidebar-collapsed .sidebar nav .nav-count { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 3px; }
  .sidebar-collapsed .sidebar nav [data-nav-label]:is(:hover,:focus-visible)::after {
    content: attr(data-nav-label); position: fixed; left: 82px; top: var(--nav-tooltip-top); transform: translateY(-50%); z-index: 34;
    padding: 8px 12px; border-radius: 7px; background: #242424; color: #eee; border: 1px solid #444; box-shadow: 0 5px 14px #0003;
    font-size: 13px; font-weight: 400; line-height: 20px; white-space: nowrap; pointer-events: none;
  }
  .sidebar-collapsed .sidebar:has(.collapsed-channels) .channels-toggle::after { display: none; }
  body:has(.app-shell.sidebar-collapsed) #toast { left: calc(50% + 36px); }
}

.workspace-mode { position: relative; z-index: 3; margin-bottom: 18px; flex-shrink: 0; color: #e8e8e8; }
.workspace-mode summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  min-height: 48px;
  border: 1px solid #383838;
  border-radius: 10px;
  background: #1b1b1b;
  cursor: pointer;
}
.workspace-mode summary::-webkit-details-marker { display: none; }
.workspace-mode summary:hover, .workspace-mode[open] summary { border-color: #626262; }
.workspace-mode-icon { display: flex; color: var(--nav-lime); }
.workspace-mode-icon svg { width: 22px; height: 22px; }
.workspace-mode-copy { flex: 1; min-width: 0; }
.workspace-mode-copy strong { display: block; font-size: 17px; line-height: 24px; font-weight: 500; }
.workspace-mode-caret { width: 17px; height: 20px; flex-shrink: 0; color: #ccc; }
.workspace-mode-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  padding: 5px;
  border: 1px solid #505050;
  border-radius: 12px;
  background: #242424;
  box-shadow: 0 12px 30px #0008;
  max-height: calc(100dvh - 204px);
  overflow-y: auto;
}
.workspace-mode-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 2px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #e8e8e8;
  text-align: left;
}
.workspace-mode-option > span:first-child { flex: 1; min-width: 0; }
.workspace-mode-option strong { display: block; font-size: 15px; font-weight: 500; line-height: 22px; }
.workspace-mode-option.selected { border-color: var(--nav-lime); background: #333; }
.workspace-mode-option.selected:hover { background: #3b3b3b; }
.workspace-mode-option > svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--nav-lime); }
.workspace-mode-option:disabled { cursor: default; opacity: 1; color: #aaa; }
@media (max-width: 700px) {
  .sidebar { padding-top: 18px; }
  .sidebar-heading { margin-bottom: 18px; }
  .sidebar-collapse { display: none; }
  .sidebar .mobile-close { position: static; flex-shrink: 0; }
  .workspace-mode-menu { max-height: calc(100dvh - 190px); }
}