/* /Components/Audio/AudioPlayerBar.razor.rz.scp.css */
.ia-footer[b-bva7r2dwid] {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
    background: var(--ia-surface-1);
    border-top: 1px solid var(--ia-gold-dim);
    padding: 10px 1rem 0 1rem;
}

.ia-audio[b-bva7r2dwid] {
    width: 100%;
    height: 44px;
    display: block;
    accent-color: var(--ia-gold);
}

.ia-safe-area[b-bva7r2dwid] {
    height: env(safe-area-inset-bottom, 0px);
    min-height: 8px;
}

.ia-resume[b-bva7r2dwid] {
    width: 100%;
    padding: 11px 16px;
    background: var(--ia-gold);
    color: var(--ia-surface-1);
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    transition: background 0.15s, transform 0.12s;
}
.ia-resume:hover[b-bva7r2dwid]  { background: var(--ia-gold-hover); }
.ia-resume:active[b-bva7r2dwid] { transform: scale(0.98); }
/* /Components/Audio/Sidebar.razor.rz.scp.css */
/* ── Mobile backdrop ─────────────────────────────────────────────────────── */
.ia-backdrop[b-mopkdgglwq] {
    display: none;
    position: fixed;
    top: var(--ia-header-h); left: 0; right: 0; bottom: 0;
    background: var(--ia-overlay);
    z-index: 200;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.ia-backdrop--visible[b-mopkdgglwq] { display: block; }

/* ── Sidebar — mobile-first ──────────────────────────────────────────────── */
.ia-sidebar[b-mopkdgglwq] {
    position: fixed;
    top: var(--ia-header-h);
    left: 0;
    bottom: 0;
    width: 82vw;
    max-width: 300px;
    background: var(--ia-surface-2);
    overflow-y: auto;
    z-index: 300;
    box-shadow: var(--ia-shadow-sidebar);
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    padding-bottom: 50px;   /* replaces the old empty .ia-sidebar-spacer div */
}
.ia-sidebar--open[b-mopkdgglwq] { transform: translateX(0); }

/* ── Sidebar — desktop override ──────────────────────────────────────────── */
@media (min-width: 768px) {
    .ia-backdrop[b-mopkdgglwq] { display: none !important; }

    .ia-sidebar[b-mopkdgglwq] {
        position: static;
        width: 270px;
        min-width: 270px;
        flex-shrink: 0;
        transform: none;
        transition: transform 0s;
        box-shadow: none;
        border-right: 1px solid var(--ia-border);
    }
}

/* ── Search ──────────────────────────────────────────────────────────────── */
.ia-search[b-mopkdgglwq] {
    margin: 10px 12px 4px;
    padding: 8px 12px;
    background: var(--ia-input-bg);
    border: 1px solid var(--ia-input-border);
    border-radius: 8px;
    color: var(--ia-text);
    font-size: 0.85rem;
    width: calc(100% - 24px);
    /* outline: none for mouse users; :focus-visible below restores it for keyboard navigation */
    outline: none;
    transition: border-color 0.15s;
}
.ia-search[b-mopkdgglwq]::placeholder  { color: var(--ia-text-muted); }
.ia-search:focus[b-mopkdgglwq]         { border-color: var(--ia-gold-border-focus); }
.ia-search:focus-visible[b-mopkdgglwq] { outline: 2px solid var(--ia-gold); outline-offset: 1px; }

/* ── Group buttons — full browser reset so they look like plain list items ── */
.ia-grp[b-mopkdgglwq] {
    /* Reset browser button defaults */
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0;
    /* Layout */
    display: block;
    width: 100%;
    text-align: left;
    padding: 13px 20px;
    margin: 0;
    /* Typography */
    font-family: var(--ia-font);
    font-size: 0.88rem;
    letter-spacing: 0.3px;
    color: var(--ia-text-sidebar);
    /* Behaviour */
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ia-grp:hover[b-mopkdgglwq] {
    background: var(--ia-surface-hover);
    border-left-color: var(--ia-gold);
    color: var(--ia-text);
}
.ia-grp:focus-visible[b-mopkdgglwq] {
    outline: 2px solid var(--ia-gold);
    outline-offset: -2px;
}
.ia-grp.active[b-mopkdgglwq] {
    background: var(--ia-gold-glow);
    border-left-color: var(--ia-gold);
    color: var(--ia-gold);
    font-weight: 600;
}

/* ── Messages / error ────────────────────────────────────────────────────── */
.ia-sidebar-msg[b-mopkdgglwq] { padding: 16px 20px; font-size: 0.83rem; color: var(--ia-text-muted); }
/* padding-bottom on .ia-sidebar ensures the last group item is not flush with the bottom edge */

.ia-sidebar-error[b-mopkdgglwq] {
    padding: 16px 20px;
    font-size: 0.83rem;
    color: var(--ia-text-error);
    line-height: 1.5;
}
.ia-sidebar-retry[b-mopkdgglwq] {
    margin-top: 8px;
    display: inline-block;
    padding: 5px 12px;
    background: var(--ia-btn-bg);
    color: var(--ia-text);
    border: 1px solid var(--ia-btn-hover);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
}
.ia-sidebar-retry:hover[b-mopkdgglwq] { background: var(--ia-btn-hover); }
/* /Components/Audio/TrackList.razor.rz.scp.css */
/* ── Content area ────────────────────────────────────────────────────────── */
.ia-content[b-otfcaha6jv] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem 1.25rem calc(var(--ia-footer-h) + 16px);
    background: var(--ia-bg);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ia-empty[b-otfcaha6jv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ia-text-dim);
    text-align: center;
}
.ia-empty__icon[b-otfcaha6jv]  { font-size: 4rem; margin-bottom: 1rem; opacity: 0.5; }
.ia-empty__title[b-otfcaha6jv] { font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--ia-text); }
.ia-empty__sub[b-otfcaha6jv]   { font-size: 0.85rem; color: var(--ia-text-muted); }

/* ── List header ─────────────────────────────────────────────────────────── */
.ia-list-header[b-otfcaha6jv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ia-gold);
}
.ia-list-title[b-otfcaha6jv] {
    font-weight: 700;
    color: var(--ia-gold);
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.3px;
    flex: 1;
}
.ia-list-count[b-otfcaha6jv] {
    font-size: 0.75rem;
    color: var(--ia-text-dim);
    background: var(--ia-card-hover);
    padding: 3px 10px;
    border-radius: 20px;
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */
.ia-spinner[b-otfcaha6jv] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--ia-player-track);
    border-top-color: var(--ia-gold);
    border-radius: 50%;
    animation: ia-spin-b-otfcaha6jv 0.7s linear infinite;
    margin: 3rem auto;
}
@keyframes ia-spin-b-otfcaha6jv { to { transform: rotate(360deg); } }

.ia-no-items[b-otfcaha6jv]   { text-align: center; color: var(--ia-text-dim); padding: 3rem 0; font-size: 0.9rem; }
.ia-load-error[b-otfcaha6jv] { text-align: center; color: var(--ia-text-error); padding: 3rem 1rem; font-size: 0.9rem; line-height: 1.6; }

/* ── Track card ──────────────────────────────────────────────────────────── */
.ia-card[b-otfcaha6jv] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ia-card);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: var(--ia-shadow-sm);
    border-left: 3px solid transparent;
    transition: box-shadow 0.18s, transform 0.15s, border-color 0.2s, background 0.2s;
    cursor: default;
}
.ia-card--playing[b-otfcaha6jv]           { border-left-color: var(--ia-gold); background: var(--ia-card-active); }

/* Hover lift only on true pointer devices — on touch screens :hover persists
   after a tap until the next tap elsewhere, leaving cards permanently raised. */
@media (hover: hover) {
    .ia-card:hover[b-otfcaha6jv]          { box-shadow: var(--ia-shadow-md); transform: translateY(-1px); background: var(--ia-card-hover); }
    .ia-card--playing:hover[b-otfcaha6jv] { background: var(--ia-card-active); }
}

.ia-card__info[b-otfcaha6jv]     { flex: 1; min-width: 0; }
.ia-card__title[b-otfcaha6jv]    { font-weight: 600; font-size: 0.93rem; color: var(--ia-text);    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-card__filename[b-otfcaha6jv] { font-size: 0.75rem; color: var(--ia-text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Play count ──────────────────────────────────────────────────────────── */
.ia-count[b-otfcaha6jv]        { font-size: 0.72rem; margin-top: 3px; color: var(--ia-text-subtle); transition: color 0.3s; }
.ia-count--flash[b-otfcaha6jv] { color: var(--ia-gold); font-weight: 600; }

/* ── Play button ─────────────────────────────────────────────────────────── */
.ia-pbtn[b-otfcaha6jv] {
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 50%; border: none;
    cursor: pointer; color: var(--ia-text); background: var(--ia-btn-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0; padding: 0;
    transition: background 0.18s, transform 0.12s;
}
.ia-pbtn:hover[b-otfcaha6jv]      { background: var(--ia-btn-hover); transform: scale(1.08); }
.ia-pbtn--active[b-otfcaha6jv]    { background: var(--ia-gold); color: var(--ia-surface-1); }
.ia-pbtn:active[b-otfcaha6jv]     { transform: scale(0.94); }
.ia-pbtn:focus-visible[b-otfcaha6jv] { outline: 2px solid var(--ia-gold); outline-offset: 2px; }

/* ── Download button ─────────────────────────────────────────────────────── */
.ia-dbtn[b-otfcaha6jv] {
    width: 40px; height: 40px; min-width: 40px;
    border-radius: 50%;
    background: var(--ia-player-bg); color: var(--ia-text-dim);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; flex-shrink: 0;
    text-decoration: none;
    transition: background 0.18s, transform 0.12s;
    border: 1.5px solid var(--ia-btn-bg);
}
.ia-dbtn:hover[b-otfcaha6jv]      { background: var(--ia-btn-green); color: var(--ia-text); transform: scale(1.08); }
.ia-dbtn:active[b-otfcaha6jv]     { transform: scale(0.94); }
.ia-dbtn:focus-visible[b-otfcaha6jv] { outline: 2px solid var(--ia-gold); outline-offset: 2px; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ia-card[b-otfcaha6jv] { padding: 11px 12px; gap: 10px; border-radius: 10px; }
    .ia-pbtn[b-otfcaha6jv] { width: 40px; height: 40px; min-width: 40px; }
    .ia-dbtn[b-otfcaha6jv] { width: 36px; height: 36px; min-width: 36px; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-d33uklhmbc],
.components-reconnect-repeated-attempt-visible[b-d33uklhmbc],
.components-reconnect-failed-visible[b-d33uklhmbc],
.components-pause-visible[b-d33uklhmbc],
.components-resume-failed-visible[b-d33uklhmbc],
.components-rejoining-animation[b-d33uklhmbc] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-d33uklhmbc],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-d33uklhmbc],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-d33uklhmbc],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-d33uklhmbc],
#components-reconnect-modal.components-reconnect-retrying[b-d33uklhmbc],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-d33uklhmbc],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-d33uklhmbc],
#components-reconnect-modal.components-reconnect-failed[b-d33uklhmbc],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-d33uklhmbc] {
    display: block;
}


#components-reconnect-modal[b-d33uklhmbc] {
    /* Dark theme — matches app design tokens */
    background-color: #1c1c1c;
    color: #e8e8e8;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid rgba(226, 176, 74, 0.20);
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-d33uklhmbc 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-d33uklhmbc 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-d33uklhmbc 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-d33uklhmbc]::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    animation: components-reconnect-modal-fadeInOpacity-b-d33uklhmbc 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-d33uklhmbc {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-d33uklhmbc {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-d33uklhmbc {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-d33uklhmbc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-d33uklhmbc] {
    margin: 0;
    text-align: center;
    color: #9aa5b4;
    font-size: 0.9rem;
    line-height: 1.5;
}

#components-reconnect-modal button[b-d33uklhmbc] {
    border: 1px solid rgba(226, 176, 74, 0.35);
    background-color: #2a2a2a;
    color: #e8e8e8;
    padding: 6px 24px;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
}

    #components-reconnect-modal button:hover[b-d33uklhmbc] {
        background-color: #333;
    }

    #components-reconnect-modal button:active[b-d33uklhmbc] {
        background-color: #222;
    }

.components-rejoining-animation[b-d33uklhmbc] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-d33uklhmbc] {
        position: absolute;
        border: 3px solid #e2b04a;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-d33uklhmbc 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-d33uklhmbc] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-d33uklhmbc {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ── Fixed header ────────────────────────────────────────────────────────── */
.ia-header[b-x6mvuic3vd] {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--ia-header-h);
    background: var(--ia-surface-1);
    color: var(--ia-gold);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0 1.2rem;
    border-bottom: 1px solid var(--ia-gold-dim);
}

.ia-header__title[b-x6mvuic3vd] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex: 1;
}

.ia-header__now-playing[b-x6mvuic3vd] {
    font-size: 0.72rem;
    color: var(--ia-text-faint);
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Body wrapper ────────────────────────────────────────────────────────── */
.ia-body[b-x6mvuic3vd] {
    position: fixed;
    top: var(--ia-header-h);
    bottom: 0; left: 0; right: 0;
    display: flex;
    overflow: hidden;
}

/* ── Hamburger ───────────────────────────────────────────────────────────── */
.ia-hbgr[b-x6mvuic3vd] {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px; height: 36px; min-width: 36px;
    background: transparent;
    border: 1px solid var(--ia-gold-border-soft);
    border-radius: 7px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
}
.ia-hbgr:hover[b-x6mvuic3vd] { background: var(--ia-gold-glow); }
.ia-hbgr:focus-visible[b-x6mvuic3vd] { outline: 2px solid var(--ia-gold); outline-offset: 2px; }

.ia-hbgr span[b-x6mvuic3vd] {
    display: block;
    width: 18px; height: 2px;
    background: var(--ia-gold);
    border-radius: 2px;
    transition: transform 0.22s, opacity 0.18s;
}
.ia-hbgr.open span:nth-child(1)[b-x6mvuic3vd] { transform: translateY(7px)  rotate(45deg); }
.ia-hbgr.open span:nth-child(2)[b-x6mvuic3vd] { opacity: 0; transform: scaleX(0); }
.ia-hbgr.open span:nth-child(3)[b-x6mvuic3vd] { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767px) { .ia-hbgr[b-x6mvuic3vd] { display: flex; } }
@media (min-width: 768px) { .ia-hbgr[b-x6mvuic3vd] { display: none !important; } }