:root {
      --sidebar-collapsed: 60px !important;
      --sidebar-expanded: 230px !important;
    }

    /* ---------- Consistent nav rhythm ---------- */
    .responsive-sidebar .tab-btn {
      gap: 12px;
      margin: 0 0 1px;
      font-weight: 600;
      color: var(--text2);
      transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
    }

    .responsive-sidebar .tab-btn:hover {
      background: var(--surface2);
      color: var(--text);
    }

    .responsive-sidebar .tab-btn.active {
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      color: var(--accent);
      font-weight: 700;
    }

    .responsive-sidebar .tab-btn .nav-icon {
      flex: 0 0 auto;
      width: 20px;
      text-align: center;
      font-size: 1.05em;
    }

    /* ---------- Fix: a genuine specificity bug in an older patch was
       hiding the text labels (display:none !important, 4 class-level
       selectors) whenever the sidebar was "pinned open" but the mouse
       wasn't actively hovering it — leaving only icons visible. This
       matches that same specificity so it reliably wins, and wins the
       tie by being declared last. ---------- */
    body.sidebar-pinned .responsive-sidebar.responsive-sidebar .nav-label,
    body.sidebar-open .responsive-sidebar.responsive-sidebar .nav-label,
    .responsive-sidebar.force-open.force-open .nav-label {
      display: inline !important;
      opacity: 1 !important;
      max-width: 220px !important;
    }

    /* ---------- Give the nav list room to breathe before the footer ---------- */
    .responsive-sidebar .sidebar-spacer {
      min-height: 18px;
    }

    /* ---------- Footer card: clearly separated from the last nav button ---------- */
    .mm-sidebar-footer {
      margin-top: 12px !important;
      border-top: 1px solid var(--border);
      padding-top: 16px !important;
      background: transparent !important;
      box-shadow: none;
    }

    .mm-sidebar-footer #mmPlanPill {
      display: flex;
      justify-content: center;
    }

    .responsive-sidebar:not(:hover):not(.force-open) .mm-sidebar-footer,
    body:not(.sidebar-pinned) .responsive-sidebar:not(:hover) .mm-sidebar-footer {
      padding-left: 0;
      padding-right: 0;
    }

    /* Thin, unobtrusive scrollbar so an overflowing sidebar never looks broken */
    .responsive-sidebar {
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }

    .responsive-sidebar::-webkit-scrollbar {
      width: 6px;
    }

    .responsive-sidebar::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 999px;
    }