/* music-sidebar.css — .ms-sidebar, .ms-nav, .ms-nav-item,
   the recent-playlists list, the sidebar collapse toggle. */

/* ===================== Sidebar =====================
   Mobile-first: hidden by default. Only shown on desktop via the
   `min-width: 721px` rule below. This inversion prevents an iOS Safari
   initial-load race where the sidebar painted at desktop position
   before the mobile `display: none` rule applied (the page rendered
   with iOS Safari's fallback viewport width before the meta viewport
   shrunk it to device-width, and the desktop layout stuck visible
   until the user reloaded). With hidden-as-default, the sidebar only
   appears once the viewport is confirmed > 720 px. */
.ms-sidebar {
    grid-area: sidebar;
    /* Pure --bg so the sidebar blends with the page background — keeps
       the chrome a single black band rather than a stack of slightly-
       different greys. Matches the player bar + queue panel treatment;
       border-right keeps the visual separation from the main area. */
    background: var(--bg);
    border-right: 1px solid var(--panel-border);
    display: none;
    flex-direction: column;
    overflow: hidden;
    position: relative;              /* anchor for the absolute collapse toggle */
    padding-top: 2.2rem;             /* leave room for the floating toggle in the top-right */
    transition: width var(--dur-med) var(--ease-smooth),
                background-color var(--dur-fast) var(--ease-smooth),
                border-color var(--dur-fast) var(--ease-smooth);
}
@media (min-width: 721px) {
    .ms-sidebar { display: flex; }
}

.ms-nav {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.5rem;
    gap: 0;                 /* tight stack — items read as a single block */
}

/* Collapse toggle: small chevron at the top-right of the sidebar that
   minimizes the sidebar to the icon-only chip layout. Rotates 180° when
   collapsed so it visually flips to chevron-right ("expand"). */
.ms-sidebar-toggle {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-muted);
    border-radius: 6px;
    z-index: 2;
    transition: color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-smooth);
}
.ms-sidebar-toggle:hover { color: var(--fg); background: var(--row-hover); }
.ms-nav-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    color: var(--fg-muted);
    font-size: var(--text-sm);
    transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
    text-align: left;
}
.ms-nav-item:hover { background: var(--row-hover); color: var(--fg); }
/* Active state: cyan accent on text + icon + left border ONLY. No background
   tint — that was making Library look visibly larger than New playlist. */
.ms-nav-item[aria-current="page"] {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.ms-nav-item[aria-current="page"] .icon { color: var(--accent); }

/* Divider between the top-level nav (Library / Playlists) and the
   recent-playlists shortcut list below. */
.ms-divider {
    margin: 0.6rem 0.85rem;
    border: 0;
    border-top: 1px solid var(--panel-border);
}

.ms-playlist-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0.5rem 1rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.ms-playlist-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    color: var(--fg-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
    user-select: none;
}
.ms-playlist-item:hover,
.ms-playlist-item.drag-over {
    background: var(--row-hover);
    color: var(--fg);
}
.ms-playlist-item[aria-current="page"] {
    background: var(--row-hover);
    color: var(--fg);
}
.ms-playlist-item.drag-over {
    background: color-mix(in srgb, var(--accent) 12%, var(--row-hover));
    color: var(--fg);
}
.ms-playlist-item-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ⋮ button on a playlist row — hidden until hover/focus, opens the same
   right-click context menu (Rename / Delete playlist). */
.ms-playlist-more {
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.ms-playlist-item:hover .ms-playlist-more,
.ms-playlist-item:focus-within .ms-playlist-more,
.ms-playlist-more:focus-visible { opacity: 1; }
.ms-icon-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-muted);
    /* Borderless ghost button, matching the site drawer's `.drawer-close`
       and the hamburger toggle. The music-base.css `:where(:not(...))`
       reset explicitly EXCLUDES `.ms-icon-btn`, so without these
       declarations the browser default button border + grey
       background show through — visible as a square outline around
       the queue's X close button. */
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    border-radius: 4px;
    transition: color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.ms-icon-btn:hover { color: var(--accent); background: var(--row-hover); }