/* Sidebar */
  #sidebar {
    position: relative;
    width: 280px;
    flex-shrink: 0;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: width 0.15s ease;
  }
  #sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 8px 12px 16px;
  }
  #sidebar h1 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
  }
  #sidebar h1 img {
    height: 30px;
    width: auto;
    display: block;
    flex-shrink: 0;
  }
  #sidebar-mark {
    display: none;
    height: 22px;
    width: 22px;
  }
  #sidebar-collapse-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    flex-shrink: 0;
  }
  #sidebar-collapse-btn:hover { background: var(--panel-2); color: var(--text); }

  /* Active/just-finished jobs — a small always-on list, independent of
     whichever project is currently open, so a running workspace never gets lost.
     Hidden entirely (no reserved space) when nothing's running or just
     finished — see .visible toggle in renderSidebarJobs(). */
  #sidebar-jobs { display: none; padding: 2px 8px 8px; }
  #sidebar-jobs.visible { display: block; }
  .sidebar-jobs-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 4px 4px 5px;
  }
  .sidebar-jobs-label .icon-svg { width: 11px; height: 11px; }
  .sidebar-job-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 7px;
    border-radius: 7px;
    cursor: pointer;
    background: var(--panel-2);
    border: 1px solid var(--border);
    margin-bottom: 4px;
  }
  .sidebar-job-row:hover { border-color: var(--accent); }
  .sidebar-job-row .info { flex: 1; min-width: 0; }
  .sidebar-job-row .workspace-title {
    font-size: 12px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sidebar-job-row .project-name {
    font-size: 10.5px; color: var(--text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sidebar-job-row .job-pulse-dot {
    flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); animation: pulse 1.2s infinite;
  }
  .sidebar-job-row.done .icon-svg { flex-shrink: 0; width: 14px; height: 14px; color: var(--green); }
  /* Red border + pulsing icon, same "stuck waiting on you" language as
     .workspace-waiting and #projects-nav .nav-badge — this row means the agent
     filed a permission request and stopped, not that it's still running. */
  .sidebar-job-row.waiting { border-color: rgba(255,107,107,0.4); }
  .sidebar-job-row.waiting .waiting-icon {
    flex-shrink: 0; width: 14px; height: 14px; color: var(--red);
    animation: sudo-needs-attention 1.6s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .sidebar-job-row.waiting .waiting-icon { animation: none; }
  }

  #project-search-wrap { padding: 0 8px 8px; display: flex; gap: 6px; }
  #project-search {
    flex: 1;
    min-width: 0;
    background: var(--panel-2);
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 12.5px;
  }
  #project-sort-select {
    flex-shrink: 0;
    max-width: 128px;
    box-sizing: border-box;
    color: var(--text-dim);
  }
  #project-sort-select:focus, #project-sort-select:hover { color: var(--text); }

  /* Recent workspaces — a compact per-project shortcut list nested under the
     currently active project's row, so getting back to a workspace doesn't
     require opening the full Workspaces list. */
  .recent-workspaces { margin: 0 8px 4px 33px; padding-left: 8px; border-left: 1px solid var(--border); }
  .recent-workspaces-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 4px 4px 3px;
  }
  .recent-workspaces-label .icon-svg { width: 11px; height: 11px; }
  .recent-workspace-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
  }
  .recent-workspace-item:hover { background: var(--panel-2); }
  .recent-workspace-item.active { background: var(--panel-2); color: var(--accent); }
  .recent-workspace-item .title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .recent-workspace-item .meta { flex-shrink: 0; font-size: 10px; color: var(--text-dim); }

  #project-list { flex: 1; overflow-y: auto; padding: 4px 8px; }
  .project-list-divider {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 10px 6px 4px;
  }
  .project-list-empty {
    padding: 16px 8px;
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
  }
  .project-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 2px;
    transition: background 0.12s;
  }
  .project-item:hover { background: var(--panel-2); }
  .project-item.active { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }
  .project-item .avatar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--verdigris);
  }
  .project-item .info { flex: 1; min-width: 0; }
  .project-item .name {
    font-size: 13.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .project-item .name .icon-svg { margin-left: 5px; vertical-align: -2px; }
  .project-item .path {
    font-size: 11px; color: var(--text-dim); font-family: var(--mono);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .project-item .actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
  .project-item .pin, .project-item .del {
    opacity: 0; color: var(--text-dim); font-size: 13px;
    padding: 3px; border-radius: 4px; line-height: 1;
  }
  .project-item:hover .pin, .project-item:hover .del { opacity: 1; }
  .project-item .pin:hover { color: var(--amber); }
  .project-item .pin.pinned { opacity: 1; color: var(--amber); }
  .project-item .del:hover { color: var(--red); }
  .project-item .pin:hover .icon-svg, .project-item .pin.pinned .icon-svg {
    color: var(--amber); filter: drop-shadow(0 0 6px rgba(245,184,79,0.5));
  }

  #add-project-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px;
    background: var(--accent);
    border: none;
    color: #070605;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 9px;
    font-size: 12.5px;
    cursor: pointer;
  }
  #add-project-btn:hover { filter: brightness(1.08); }
  #add-project-btn .icon-svg { color: currentColor; filter: none; }


  /* Sidebar footer (account controls) */
  #sidebar-footer {
    border-top: 1px solid var(--border);
    padding: 10px 12px;
    display: none;
    flex-wrap: wrap;
    gap: 6px;
  }
  #sidebar-footer.visible { display: flex; }
  #sidebar-profile {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px 8px;
    cursor: pointer;
  }
  #sidebar-profile .avatar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--verdigris);
    overflow: hidden;
  }
  #sidebar-profile .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #sidebar-profile-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  #sidebar-profile-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #sidebar-profile-role {
    font-size: 10.5px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #sidebar-footer button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 6px;
    padding: 7px 8px;
    font-size: 11.5px;
    cursor: pointer;
  }
  #sidebar-footer button:hover { color: var(--text); border-color: var(--text-dim); }
  #app-version {
    flex-basis: 100%;
    text-align: center;
    font-size: 10.5px;
    color: var(--text-dim);
    margin-top: 2px;
    cursor: pointer;
  }
  #app-version:hover { color: var(--text); text-decoration: underline; }


  /* Dashboard nav entry in sidebar */
  #dashboard-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 4px 8px 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
  }
  #dashboard-nav:hover { background: var(--panel-2); }
  #dashboard-nav.active { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }

  #gallery-nav, #projects-nav, #workbench-nav, #memory-nav, #knowledge-nav, #custodian-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 4px 8px 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
  }
  #gallery-nav:hover, #projects-nav:hover, #workbench-nav:hover, #memory-nav:hover, #knowledge-nav:hover, #custodian-nav:hover { background: var(--panel-2); }
  #gallery-nav.active, #projects-nav.active, #workbench-nav.active, #memory-nav.active, #knowledge-nav.active, #custodian-nav.active { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }

  /* Nav bar usage meter — a live at-a-glance gauge for both agents' plan
     limits (same data as Settings → Usage, whichever of session/weekly for
     Claude or the busiest rate-limit window for Codex is closer to the cap),
     so a workspace that's about to hit a wall is visible without opening
     Settings. Clicking it jumps straight to that Usage tab. */
  #sidebar-usage-meter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 4px 8px 0;
    border-radius: 8px;
    cursor: pointer;
  }
  #sidebar-usage-meter:hover { background: var(--panel-2); }
  #sidebar-usage-meter .icon { flex-shrink: 0; }
  #sidebar-usage-meter .usage-meter-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .usage-meter-row { display: flex; align-items: center; gap: 6px; }
  .usage-meter-tag { width: 40px; flex-shrink: 0; font-size: 10px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .usage-meter-track {
    flex: 1; height: 5px; border-radius: 3px; overflow: hidden;
    background: var(--panel-2);
    border: 1px solid rgba(62,90,76,0.16);
  }
  .usage-meter-fill {
    display: block; height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #E4DDCE, #9B958A);
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
  }
  .usage-meter-fill.amber { background: linear-gradient(90deg, var(--amber), #ffd27a); }
  .usage-meter-fill.red { background: linear-gradient(90deg, var(--accent), var(--accent-2)); animation: plan-limit-pulse 2.2s ease-in-out infinite; }
  .usage-meter-fill.na { background: var(--border); animation: none; }
  .usage-meter-pct { width: 28px; flex-shrink: 0; text-align: right; font-size: 10px; color: var(--text-dim); font-family: var(--mono); }
  @keyframes plan-limit-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }

  /* Bell nav item is a dropdown toggle, not a routed page — "open" (the
     panel is showing) plays the role ".active" plays for the other nav
     items below, which do route to a full page. See notifications.js.
     The margin that positions this item among its sidebar siblings lives on
     the wrap (a flex item of #sidebar), not the nav div itself — #sidebar is
     a flex column, so margins on a non-flex-item child wouldn't collapse
     into place the way they do for the plain-div nav items above. */
  #notifications-wrap { position: relative; margin: 4px 8px 0; }
  #notifications-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
  }
  #notifications-nav:hover { background: var(--panel-2); }
  #notifications-wrap.open #notifications-nav { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }
  #notifications-wrap.open #notifications-nav .icon-svg { color: var(--accent); filter: drop-shadow(0 0 6px rgba(62,90,76,0.6)); }

  /* Standing "you have unread" cue — a brief bell wiggle plus a red streak
     sweeping behind the nav item, both on a long loop so it reads as an
     occasional pulse rather than a constant animation. Off entirely once
     unread count hits zero (see updateNotificationsBadge), and disabled
     under reduced-motion below. */
  @keyframes bell-jingle {
    0%, 85%, 100% { transform: rotate(0deg); }
    87% { transform: rotate(-11deg); }
    89% { transform: rotate(9deg); }
    91% { transform: rotate(-6deg); }
    93% { transform: rotate(4deg); }
    95% { transform: rotate(-2deg); }
    97% { transform: rotate(0deg); }
  }
  @keyframes notif-streak {
    0%, 55% { transform: translateX(-130%); opacity: 0; }
    58% { opacity: 1; }
    72% { transform: translateX(130%); opacity: 1; }
    100% { transform: translateX(130%); opacity: 0; }
  }
  #notifications-wrap.has-unread #notifications-nav .icon .icon-svg {
    transform-origin: 50% 15%;
    animation: bell-jingle 8s ease-in-out infinite;
  }
  #notifications-wrap.has-unread #notifications-nav {
    position: relative;
    overflow: hidden;
  }
  #notifications-wrap.has-unread #notifications-nav::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 42%, rgba(62,90,76,0.4) 50%, transparent 58%);
    animation: notif-streak 8s ease-in-out infinite;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    #notifications-wrap.has-unread #notifications-nav .icon .icon-svg,
    #notifications-wrap.has-unread #notifications-nav::after {
      animation: none;
    }
  }

  #notifications-nav .nav-badge {
    display: none;
    margin-left: auto;
    background: var(--accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
  }

  /* Amber, not the notifications red — this just means "an idea's agent is
     working", not something that needs attention like an unread notification. */
  #workbench-nav .nav-badge {
    display: none;
    margin-left: auto;
    background: var(--amber);
    color: #1a1200;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
  }

  /* Amber too — an open suggestion is Custodian asking for a look, not an
     urgent/red alert like an unread notification. */
  #custodian-nav .nav-badge {
    display: none;
    margin-left: auto;
    background: var(--amber);
    color: #1a1200;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
  }

  /* Red + pulsing, unlike the amber badges above — a restart owed means code
     changes already applied to disk aren't live yet, so this reads as
     "needs attention" rather than just "here's a count". The number is how
     many distinct changes are stacked up waiting on that one restart (see
     reason_count in GET /api/system/restart-pending) — stays lit even after
     a human dismisses the prompt, since the change is still un-applied. */
  #reboot-badge {
    display: none;
    margin-left: auto;
    background: var(--red);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    animation: sudo-needs-attention 1.6s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    #reboot-badge {
      animation: none;
    }
  }

  /* Red + pulsing like #reboot-badge — an agent is blocked mid-turn on a
     permission decision, the same "stuck waiting on you" urgency. Count is
     project-scoped workspaces waiting (see #workbench-badge's own count for the
     idea-scoped half of the same signal). */
  #projects-nav .nav-badge {
    display: none;
    margin-left: auto;
    background: var(--red);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    animation: sudo-needs-attention 1.6s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    #projects-nav .nav-badge {
      animation: none;
    }
  }

  #notifications-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 8px;
    z-index: 40;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    overflow: hidden;
  }
  #notifications-wrap.open #notifications-panel { display: block; }
  #notifications-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 700;
  }
  .notifications-panel-actions { display: flex; gap: 6px; }
  .notifications-panel-actions button {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
  }
  .notifications-panel-actions button:hover { color: var(--text); border-color: var(--text-dim); }
  #notifications-clear-all-btn:hover { color: var(--red); border-color: var(--red); }
  #notifications-panel-list { max-height: 360px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
  #notifications-panel-footer {
    border-top: 1px solid var(--border);
  }
  #notifications-view-all-btn {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
  }
  #notifications-view-all-btn:hover { color: var(--accent); background: var(--panel); }

  #settings-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 4px 8px 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
  }
  #settings-nav:hover { background: var(--panel-2); }
  #settings-nav.active { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }

  #system-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 4px 8px 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    background: rgba(62,90,76,0.08);
    border: 1px solid rgba(62,90,76,0.25);
  }
  #system-nav:hover { background: rgba(62,90,76,0.14); }
  #system-nav.active { background: rgba(62,90,76,0.18); box-shadow: inset 2px 0 0 var(--accent); }
  #dashboard-nav.active .icon-svg, #projects-nav.active .icon-svg, #gallery-nav.active .icon-svg,
  #settings-nav.active .icon-svg, #system-nav.active .icon-svg, #memory-nav.active .icon-svg,
  #knowledge-nav.active .icon-svg, #workbench-nav.active .icon-svg, #custodian-nav.active .icon-svg {
    color: var(--accent); filter: drop-shadow(0 0 6px rgba(62,90,76,0.6));
  }

  /* Top nav row icons ride the row's own font-size (13.5px via 1em) by
     default — a hair small next to the label text. Bump them independent
     of the text so they read clearly without changing row density. */
  #dashboard-nav .icon-svg, #projects-nav .icon-svg, #gallery-nav .icon-svg,
  #settings-nav .icon-svg, #system-nav .icon-svg, #memory-nav .icon-svg,
  #knowledge-nav .icon-svg, #workbench-nav .icon-svg, #custodian-nav .icon-svg,
  #notifications-nav .icon .icon-svg {
    width: 19px;
    height: 19px;
  }

  /* "+N more" row at the bottom of a capped sidebar project list — see
     SIDEBAR_PROJECT_CAP in projects.js. Opens the full Projects page. */
  .project-list-more {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 8px;
    margin-top: 2px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 11.5px;
    color: var(--text-dim);
  }
  .project-list-more:hover { background: var(--panel-2); color: var(--text); }
  .project-list-more .icon-svg { width: 13px; height: 13px; }

  /* Collapsed desktop sidebar — an icon-only rail. Scoped to the desktop
     breakpoint so it never fights the off-canvas mobile sidebar, which is
     shown/hidden by translateX rather than width (see responsive.css). */
  @media (min-width: 861px) {
    #sidebar.collapsed { width: 60px; }
    #sidebar.collapsed #sidebar-header { flex-direction: column-reverse; gap: 8px; padding: 12px 0; }
    #sidebar.collapsed h1 { display: none; }
    #sidebar.collapsed #sidebar-mark { display: block; }
    #sidebar.collapsed #dashboard-nav,
    #sidebar.collapsed #system-nav,
    #sidebar.collapsed #projects-nav,
    #sidebar.collapsed #workbench-nav,
    #sidebar.collapsed #gallery-nav,
    #sidebar.collapsed #memory-nav,
    #sidebar.collapsed #knowledge-nav,
    #sidebar.collapsed #custodian-nav,
    #sidebar.collapsed #settings-nav,
    #sidebar.collapsed #add-project-btn {
      justify-content: center;
      padding: 10px 0;
      margin: 4px 6px 0;
    }
    #sidebar.collapsed #notifications-wrap { margin: 4px 6px 0; }
    #sidebar.collapsed #notifications-nav { justify-content: center; padding: 10px 0; }
    #sidebar.collapsed #sidebar-usage-meter {
      justify-content: center;
      padding: 8px 0;
      margin: 4px 6px 0;
    }
    #sidebar.collapsed #sidebar-usage-meter .icon { display: none; }
    #sidebar.collapsed .usage-meter-tag,
    #sidebar.collapsed .usage-meter-pct {
      display: none;
    }
    #sidebar.collapsed .usage-meter-bars { width: 32px; }
    #sidebar.collapsed .label,
    #sidebar.collapsed #sidebar-jobs,
    #sidebar.collapsed #project-search-wrap,
    #sidebar.collapsed .project-list-divider,
    #sidebar.collapsed .project-item .info,
    #sidebar.collapsed .project-item .actions,
    #sidebar.collapsed .recent-workspaces,
    #sidebar.collapsed .project-list-more,
    #sidebar.collapsed #app-version {
      display: none;
    }
    #sidebar.collapsed #notifications-nav .nav-badge,
    #sidebar.collapsed #workbench-nav .nav-badge,
    #sidebar.collapsed #custodian-nav .nav-badge,
    #sidebar.collapsed #system-nav .nav-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      margin-left: 0;
    }
    #sidebar.collapsed #notifications-nav,
    #sidebar.collapsed #workbench-nav,
    #sidebar.collapsed #custodian-nav,
    #sidebar.collapsed #system-nav { position: relative; }
    #sidebar.collapsed .project-item { justify-content: center; padding: 7px 0; }
    #sidebar.collapsed #sidebar-footer { justify-content: center; }
    #sidebar.collapsed #sidebar-profile { justify-content: center; padding: 4px 0 8px; }
  }

  /* Short viewports (landscape phones, small/tiled desktop windows) — the
     fixed rows above #project-list (header, ~10 nav items, usage meter,
     search) can alone exceed the available height before #project-list's
     own flex:1 region gets any space, stranding #sidebar-footer (the
     logout button) and the project list below the fold with no scroll
     affordance to reach them. Let the whole sidebar scroll as one region
     instead of relying solely on #project-list's nested scroll. */
  @media (max-height: 760px) {
    #sidebar { overflow-y: auto; }
    #project-list { flex: none; overflow-y: visible; }
  }