:root {
    /* A near-black base with a trace of blue in it. Pure #000 looks flat
       against Telegram's own chrome; this reads as black but still gives
       the cards something to sit on. */
    --bg-main: #060811;
    --bg-secondary: #0d1320;
    --surface-2: #111827;
    --text-main: #f7f8fc;
    --text-muted: #697386;
    --accent-color: #7657ff;
    --accent-text: #fff;
    --primary: #7657ff;
    --primary-2: #9b7cff;
    --primary-glow: rgba(118, 87, 255, .32);
    --glass-bg: rgba(255,255,255,.045);
    --glass-border: rgba(255,255,255,.07);
    --glass-hover: rgba(255,255,255,.08);
    --success: #22c55e;
    /* The play button is the one thing that should jump off the screen,
       so it is white rather than another purple shape among purple shapes. */
    --play-bg: #f1f1f2;
    --play-fg: #0a0a0b;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    font-family: "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Tahoma, sans-serif;
}

html, body {
    min-height: 100%;
    background: var(--bg-main);
}

body {
    color: var(--text-main);
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow-x: hidden;
    /* A single deep black. The two purple washes that used to sit on top
       lifted the whole page to roughly #14151a, which is what made it look
       grey next to a properly black player. */
    background: var(--bg-main);
}

.overlay {
    position: fixed;
    inset: 0;
    background:
            radial-gradient(620px 420px at 50% 12%, rgba(118, 87, 255, .12), transparent 70%),
            rgba(7, 9, 13, .96);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    z-index: 1000;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    transition: opacity .25s ease, visibility .25s ease;
}

.overlay-inner {
    width: 100%;
    max-width: 430px;
    min-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.overlay-main {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.overlay-logo {
    width: 92px;
    height: 92px;
    border-radius: 28px;
    background: linear-gradient(140deg, #8b7aff, #6d5dfc);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 20px 55px rgba(118, 87, 255, .45);
}

.overlay-logo svg {
    width: 46px;
    height: 46px;
    fill: #fff;
}

.overlay h2 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 6px;
}

.overlay-sub {
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 26px;
}

.overlay-note {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 330px;
    margin-top: 22px;
}

.overlay-user-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 11px 14px;
    border-radius: 18px;
    text-align: start;
}

.overlay-now-playing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--glass-border);
    padding: 16px 18px;
    border-radius: 20px;
}

.overlay-song-status {
    font-size: 11px;
    font-weight: 800;
    color: #a79bff;
}

.overlay-song-title {
    font-size: 17px;
    font-weight: 750;
    color: var(--text-main);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    unicode-bidi: plaintext;
}

.overlay-song-artist {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    unicode-bidi: plaintext;
}

.btn-join {
    width: 100%;
    /* White, like the player's own play button: on a black page the one
       action that matters should read before anything else does. */
    background: var(--play-bg);
    color: var(--play-fg);
    border: 0;
    padding: 18px 26px;
    border-radius: 20px;
    font: inherit;
    font-size: 17px;
    font-weight: 750;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: transform .15s ease;
}

.btn-join svg {
    fill: var(--play-fg);
    width: 22px;
    height: 22px;
    fill: currentColor;
    transform: scaleX(-1);
}

.btn-join:active { transform: scale(.98); }

.app-container {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 12px;
}

.top-bar,
.player-card,
.queue-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 11px;
    border-radius: 18px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.avatar-container {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.user-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg,#3b4250,#20242c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 750;
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
}

.premium-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #11141a;
    color: #facc15;
    font-size: 9px;
    border: 1px solid rgba(255,255,255,.08);
}

.premium-badge svg {
    width: 10px;
    height: 10px;
    fill: #facc15;
}

.user-info-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.user-name-row { min-width: 0; }

.user-display-name {
    display: block;
    max-width: 150px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-handle {
    display: block;
    max-width: 150px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.room-meta {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
}

.badge.admin {
    color: #86efac;
    background: rgba(34,197,94,.10);
    border-color: rgba(34,197,94,.22);
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px rgba(34,197,94,.6);
}

.listeners-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(118,87,255,.12);
    border: 1px solid rgba(118,87,255,.25);
    color: #a79bff;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.listeners-trigger:active {
    transform: scale(.95);
    background: rgba(118,87,255,.22);
}

.listeners-trigger svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.player-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 18px 45px rgba(0,0,0,.32);
}

.ambient-glow {
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 220px;
    background: var(--primary);
    filter: blur(85px);
    opacity: .18;
    border-radius: 50%;
    pointer-events: none;
    transition: opacity .5s ease;
}

.artwork-wrapper {
    position: relative;
    width: min(72vw, 260px);
    height: min(72vw, 260px);
    max-width: 260px;
    max-height: 260px;
    margin: 2px 0 18px;
    border-radius: 22px;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 18px 45px rgba(0,0,0,.48);
}

.artwork-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
    transition: transform .45s cubic-bezier(.4,0,.2,1);
}

.artwork-wrapper.playing .artwork-img { transform: scale(1.025); }

.platform-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(8,10,14,.68);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
}

.track-info {
    width: 100%;
    text-align: center;
    margin-bottom: 18px;
    z-index: 1;
}

.track-title {
    width: 100%;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.45px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.track-artist {
    width: 100%;
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
}

.requester-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.07);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
}

.requester-badge svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.progress-wrapper {
    width: 100%;
    margin-bottom: 18px;
    z-index: 1;
}

.slider-container {
    width: 100%;
    height: 5px;
    display: flex;
    align-items: center;
}

.slider {
    width: 100%;
    height: 5px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    outline: none;
}

.slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px var(--primary);
}

.time-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 10px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.idle-container {
    width: 100%;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 12px 20px;
    z-index: 1;
}

.idle-icon-box {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    background: rgba(118,87,255,.10);
    border: 1px solid rgba(118,87,255,.18);
}

.idle-svg-icon {
    width: 34px;
    height: 34px;
    fill: #9b91ff;
}

.idle-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.3px;
    margin-bottom: 7px;
}

.idle-subtitle {
    max-width: 280px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}

.cmd-chip {
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #aaa3ff;
    font-family: monospace;
    font-size: 11px;
}

.idle-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(34,197,94,.08);
    border: 1px solid rgba(34,197,94,.17);
    color: #86efac;
    font-size: 10px;
    font-weight: 700;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
    animation: blink 1.8s infinite ease-in-out;
}

@keyframes blink {
    0%,100% { opacity: 1; }
    50% { opacity: .4; }
}

.controls {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 1;
}

.volume-container {
    position: relative;
    display: flex;
    align-items: center;
}

.volume-container:hover .volume-slider-box,
.volume-container:focus-within .volume-slider-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.volume-slider-box {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
    background: rgba(20, 24, 33, 0.92);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    padding: 8px 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 10;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    margin-left: 8px;
}

.volume-slider {
    width: 80px;
    height: 4px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px var(--primary);
}

.btn-ctrl {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.055);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, background .15s ease;
    cursor: pointer;
}

.btn-ctrl:active:not(:disabled) {
    transform: scale(.91);
    background: rgba(255,255,255,.10);
}

.btn-ctrl:disabled { opacity: .28; cursor: not-allowed; }

.btn-ctrl svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.btn-play {
    width: 62px;
    height: 62px;
    border: 0;
    background: var(--play-bg);
    color: var(--play-fg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}

.btn-play svg {
    fill: var(--play-fg);
}

.btn-play svg { width: 25px; height: 25px; }

.queue-card {
    border-radius: 20px;
    padding: 14px;
}

.queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 2px;
}

.queue-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.queue-count {
    font-size: 10px;
    font-weight: 700;
    color: #a9a1ff;
}

.queue-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 190px;
    overflow-y: auto;
}

.queue-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 13px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.045);
}

.queue-thumb {
    width: 42px;
    height: 42px;
    border-radius: 99px;
    object-fit: cover;
    flex-shrink: 0;
}

.queue-details {
    flex: 1;
    min-width: 0;
}

.queue-track-title {
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-track-sub {
    margin-top: 3px;
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drawer for Listeners */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1500;
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.modal-drawer {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    max-width: 430px;
    max-height: 75vh;
    background: #11141c;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border: 1px solid var(--glass-border);
    z-index: 1600;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-title {
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-title svg {
    width: 20px;
    height: 20px;
    fill: var(--primary);
}

.modal-close-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.modal-close-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.listeners-scroll-list {
    padding: 12px 16px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.listener-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.listener-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.listener-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, #3b4250, #20242c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}

.listener-names {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.listener-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listener-handle {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 9px 16px;
    border-radius: 12px;
    background: rgba(20,22,28,.95);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    display: none;
    z-index: 2000;
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
    backdrop-filter: blur(12px);
}

@media (max-width: 360px) {
    body { padding: 8px; }
    .app-container { gap: 8px; }
    .player-card { padding: 16px 14px; }
    .artwork-wrapper {
        width: min(68vw, 220px);
        height: min(68vw, 220px);
    }
    .controls { gap: 22px; }
}

/* ===== Kurdish (Sorani) / RTL ===== */
/* Letter spacing breaks the joining of Arabic-script letters. */
*, *::before, *::after {
    letter-spacing: normal !important;
}

.overlay-song-status,
.platform-badge {
    text-transform: none;
}

/* Media controls and time bars stay left-to-right, like every music player. */
.progress-wrapper,
.slider-container,
.time-labels,
.controls,
.volume-container {
    direction: ltr;
}

/* Song titles can be English or Kurdish: let each one pick its own direction. */
.track-title,
.track-artist,
.overlay-song-title,
.overlay-song-artist,
.queue-track-title,
.queue-track-sub,
.listener-name,
.listener-handle,
.user-display-name,
.user-handle,
.requester-badge span {
    unicode-bidi: plaintext;
}



/* ===== Search (گەڕان) ===== */
.search-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: 18px;
    padding: 9px;
    margin-bottom: 12px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 4px 10px 4px 4px;
    padding-inline-start: 12px;
    transition: border-color .18s ease;
}

.search-box:focus-within {
    border-color: var(--primary);
}

.search-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: var(--text-muted);
}

#search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    font: inherit;
    font-size: 14px;
    padding: 8px 0;
}

#search-input::placeholder {
    color: var(--text-muted);
}

#search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Searching starts on its own, so the field only needs a way to empty it. */
.btn-clear {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.btn-clear[hidden] {
    display: none;
}

.btn-clear svg {
    width: 15px;
    height: 15px;
    fill: var(--text-muted);
}

.btn-clear:active {
    background: rgba(255, 255, 255, .18);
}

/* While a search is in flight the magnifier turns into a spinner. */
#search-input.is-busy ~ .btn-clear {
    opacity: .5;
}

.search-box:has(#search-input.is-busy) .search-icon {
    border-radius: 50%;
    border: 2px solid var(--primary);
    border-top-color: transparent;
    fill: transparent;
    width: 17px;
    height: 17px;
    animation: search-spin .7s linear infinite;
}

.search-drawer {
    max-height: 80vh;
}

.search-results-list {
    overflow-y: auto;
    padding: 12px 14px 22px;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 10px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

/* An empty state that explains itself gets a second, quieter line. */
.search-message:has(.search-hint) {
    flex-direction: column;
    gap: 6px;
}

.search-hint {
    font-size: 12px;
    opacity: .75;
}

.search-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--primary-2);
    animation: search-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes search-spin {
    to { transform: rotate(360deg); }
}

.search-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
}

.search-thumb {
    width: 56px;
    height: 56px;
    border-radius: 11px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
}

.search-details {
    flex: 1;
    min-width: 0;
}

.search-title {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    unicode-bidi: plaintext;
}

.search-sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    unicode-bidi: plaintext;
}

.search-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-result {
    border-radius: 10px;
    padding: 7px 11px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.btn-result-play {
    border: none;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
}

.btn-result-queue {
    color: #c4b5fd;
    background: rgba(118, 87, 255, 0.12);
    border: 1px solid rgba(155, 124, 255, 0.55);
}

.btn-result:disabled {
    opacity: 0.5;
    cursor: default;
}

.search-too-long {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    padding: 6px 8px;
    border: 1px dashed var(--glass-border);
    border-radius: 9px;
}

.cmd-chip {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* ===== Circular artwork with progress ring ===== */
.art-ring {
    position: relative;
    width: min(76vw, 300px);
    aspect-ratio: 1;
    margin: 6px auto 22px;
    display: grid;
    place-items: center;
}

.art-ring .ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.art-ring .ring circle {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
}

.art-ring .ring-bg {
    stroke: rgba(255, 255, 255, .10);
}

.art-ring .ring-fg {
    stroke: url(#ringGrad);
    stroke: #8b7aff;
    stroke-dasharray: 703.7;
    stroke-dashoffset: 703.7;
    transition: stroke-dashoffset .35s linear;
    filter: drop-shadow(0 0 10px rgba(155, 124, 255, .65));
}

.art-ring .artwork-img {
    width: 88%;
    height: 88%;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

/* ===== Control row ===== */
.controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
    width: 100%;
}

.controls .btn-ctrl {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .09);
    background:
            linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    color: #dfe3ef;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow:
            0 6px 16px rgba(0, 0, 0, .35),
            inset 0 1px 0 rgba(255, 255, 255, .10);
    transition: transform .16s cubic-bezier(.34, 1.4, .64, 1),
    background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

.controls .btn-ctrl svg {
    width: 23px;
    height: 23px;
    fill: currentColor;
    transition: transform .16s ease;
}

@media (hover: hover) {
    .controls .btn-ctrl:hover:not(:disabled) {
        background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
        border-color: rgba(255, 255, 255, .2);
        color: #fff;
        transform: translateY(-2px);
    }
}

.controls .btn-ctrl:active:not(:disabled) {
    transform: scale(.9);
}

.controls .btn-ctrl:disabled {
    opacity: .3;
    box-shadow: none;
    cursor: not-allowed;
}

/* Toggled on (loop / autoplay) */
.controls .btn-ctrl.on,
.bottom-bar .btn-ctrl.on {
    background: linear-gradient(160deg, rgba(155, 124, 255, .38), rgba(118, 87, 255, .2));
    border-color: rgba(160, 145, 255, .75);
    color: #fff;
    box-shadow:
            0 6px 20px rgba(118, 87, 255, .45),
            inset 0 1px 0 rgba(255, 255, 255, .22);
}

.controls .btn-ctrl.on::after,
.bottom-bar .btn-ctrl.on::after {
    content: "";
    position: absolute;
    bottom: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(255, 255, 255, .9);
}

.controls .btn-play {
    width: 76px;
    height: 76px;
    border: 0;
    background: var(--play-bg);
    color: var(--play-fg);
    box-shadow:
            0 12px 32px rgba(0, 0, 0, .6),
            inset 0 -2px 0 rgba(0, 0, 0, .08);
}

.controls .btn-play svg {
    fill: var(--play-fg);
}

.controls .btn-play svg {
    width: 32px;
    height: 32px;
}

@media (hover: hover) {
    .controls .btn-play:hover:not(:disabled) {
        background: #ffffff;
        transform: translateY(-2px) scale(1.03);
    }
}

.controls .btn-play:disabled {
    background: rgba(255, 255, 255, .12);
    box-shadow: none;
}

.controls .btn-play:disabled svg {
    fill: rgba(255, 255, 255, .45);
}

/* ===== Bottom bar: volume + autoplay + stop ===== */
.bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.bottom-bar .volume-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.btn-vol {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #c3c9db;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

.btn-vol svg {
    width: 23px;
    height: 23px;
    fill: currentColor;
}

@media (hover: hover) {
    .btn-vol:hover {
        color: #fff;
        background: rgba(255, 255, 255, .07);
    }
}

.bottom-bar .btn-ctrl.btn-small {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.bottom-bar .btn-ctrl.btn-small svg {
    width: 20px;
    height: 20px;
}

.btn-stop {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 15px;
    border: 1px solid rgba(255, 99, 99, .4);
    background: linear-gradient(160deg, rgba(255, 86, 86, .2), rgba(255, 86, 86, .08));
    color: #ff8080;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: transform .16s ease, background .22s ease, color .22s ease, opacity .2s ease;
}

.btn-stop svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

@media (hover: hover) {
    .btn-stop:hover:not(:disabled) {
        background: linear-gradient(160deg, rgba(255, 86, 86, .34), rgba(255, 86, 86, .14));
        color: #ff9a9a;
        transform: translateY(-2px);
    }
}

.btn-stop:active:not(:disabled) { transform: scale(.9); }

.btn-stop:disabled {
    opacity: .28;
    box-shadow: none;
    cursor: not-allowed;
}

/* platform badge under the artist, centred */
.track-info .platform-badge {
    position: static;
    display: inline-block;
    margin-top: 10px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(155, 124, 255, .18);
    border: 1px solid rgba(155, 124, 255, .5);
    color: #c9c0ff;
    font-size: 12px;
    font-weight: 800;
}

/* ===== Sliders: thinner track, glowing knob ===== */
.slider,
.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    outline: none;
}

.slider::-webkit-slider-thumb,
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    cursor: pointer;
    box-shadow: 0 0 0 4px rgba(155, 124, 255, .28), 0 2px 6px rgba(0, 0, 0, .45);
    transition: transform .15s ease, box-shadow .2s ease;
}

.slider::-webkit-slider-thumb:active,
.volume-slider::-webkit-slider-thumb:active {
    transform: scale(1.2);
    box-shadow: 0 0 0 7px rgba(155, 124, 255, .3), 0 2px 8px rgba(0, 0, 0, .5);
}

.slider::-moz-range-thumb,
.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    cursor: pointer;
    box-shadow: 0 0 0 4px rgba(155, 124, 255, .28);
}

.slider:disabled::-webkit-slider-thumb {
    background: #8f95a8;
    box-shadow: none;
    cursor: not-allowed;
}

.slider:disabled { opacity: .55; }

.time-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* In the bottom bar the volume slider is always visible, not a hover popup. */
.bottom-bar .volume-slider-box {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    padding: 0;
    flex: 1;
    max-width: 160px;
    display: block;
}

.bottom-bar .volume-slider {
    width: 100%;
    height: 5px;
}

/* ===== Queue row actions ===== */
.queue-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-clear-queue {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 99, 99, .32);
    background: rgba(255, 86, 86, .1);
    color: #ff8f8f;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
}

.btn-clear-queue svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.btn-clear-queue:active { transform: scale(.9); }

.queue-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-inline-start: auto;
}

.queue-act {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, .05);
    color: #dfe3ef;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, color .2s ease;
}

.queue-act svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.queue-act.play {
    border-color: rgba(155, 124, 255, .5);
    background: rgba(118, 87, 255, .16);
    color: #c4b5fd;
}

.queue-act.del {
    border-color: rgba(255, 99, 99, .32);
    background: rgba(255, 86, 86, .1);
    color: #ff8f8f;
}

.queue-act:active { transform: scale(.88); }

/* ===== Volume control: back to a comfortable size ===== */
.btn-vol {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .09);
    background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    color: #dfe3ef;
    box-shadow:
            0 6px 16px rgba(0, 0, 0, .35),
            inset 0 1px 0 rgba(255, 255, 255, .10);
    transition: transform .16s ease, background .22s ease, color .22s ease;
}

.btn-vol svg {
    width: 26px;
    height: 26px;
}

.btn-vol:active { transform: scale(.9); }

@media (hover: hover) {
    .btn-vol:hover {
        background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
        color: #fff;
        transform: translateY(-2px);
    }
}

.bottom-bar .volume-container { gap: 12px; }

.bottom-bar .volume-slider-box { max-width: none; }

.bottom-bar .volume-slider { height: 7px; }

.bottom-bar .volume-slider::-webkit-slider-thumb {
    width: 19px;
    height: 19px;
}

.bottom-bar .volume-slider::-moz-range-thumb {
    width: 19px;
    height: 19px;
}

/* ==========================================================
   Tabbed shell: top bar, pages, bottom tab bar
   ========================================================== */
.app-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 12px;
    overflow-x: hidden;
}

.top-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    background: linear-gradient(180deg, rgba(8, 9, 14, .96) 70%, rgba(8, 9, 14, 0));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.brand-logo {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(140deg, #8b7aff, #6d5dfc);
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px rgba(118, 87, 255, .45);
}

.brand-logo svg {
    width: 19px;
    height: 19px;
    fill: #fff;
}

.brand-name {
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listeners-pill {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, .05);
    color: var(--text-main);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35d07f;
    box-shadow: 0 0 8px rgba(53, 208, 127, .9);
}

.top-avatar .user-avatar {
    width: 38px;
    height: 38px;
    font-size: 15px;
}

/* ---------- pages ---------- */
.tab-pages {
    flex: 1;
    padding-bottom: 12px;
}

.tab-page { display: none; }

.tab-page.is-active {
    display: block;
    animation: page-in .22s ease;
}

@keyframes page-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.page-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: 24px;
    padding: 16px 14px;
    min-height: 62vh;
    display: flex;
    flex-direction: column;
}

.page-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.page-head h3 {
    font-size: 15px;
    font-weight: 800;
}

.page-head-right {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 9px;
}

.btn-refresh {
    margin-inline-start: auto;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, .05);
    color: #dfe3ef;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.btn-refresh svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.result-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------- idle ---------- */
.idle-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 30px 10px;
}

.idle-ring {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 40%, rgba(118, 87, 255, .22), rgba(255, 255, 255, .03));
    border: 1px solid var(--glass-border);
    margin-bottom: 8px;
}

.idle-ring svg {
    width: 52px;
    height: 52px;
    fill: #a99bff;
}

.idle-title {
    font-size: 20px;
    font-weight: 800;
}

.idle-sub {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 300px;
}

.idle-badge {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(53, 208, 127, .12);
    border: 1px solid rgba(53, 208, 127, .35);
    color: #7ee2ab;
    font-size: 12.5px;
    font-weight: 700;
}

/* ---------- meta row under the title ---------- */
.meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ---------- profile ---------- */
.profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--glass-border);
}

.profile-avatar .user-avatar {
    width: 52px;
    height: 52px;
    font-size: 20px;
}

.profile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.profile-head .role-badge { margin-inline-start: auto; }

/* ---------- bottom tab bar ---------- */
.tab-bar {
    position: sticky;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 8px 6px;
    margin: 6px 0 0;
    border-radius: 22px 22px 0 0;
    width: 100%;
    background: rgba(13, 14, 22, .92);
    border: 1px solid var(--glass-border);
    border-bottom: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

.tab-btn {
    position: relative;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 2px;
    border-radius: 15px;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

.tab-btn svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.tab-btn.is-active {
    color: #fff;
    background: linear-gradient(160deg, rgba(155, 124, 255, .3), rgba(118, 87, 255, .12));
}

.tab-badge {
    position: absolute;
    top: 3px;
    inset-inline-end: 14px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #6d5dfc;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(118, 87, 255, .6);
}

/* The search card in its own tab needs no outer card. */
.tab-page[data-page="search"] .search-box { margin-bottom: 14px; }

/* The player view is switched to flex by the script, so it needs its axis. */
#active-player-view {
    width: 100%;
    flex-direction: column;
    align-items: center;
}

/* Nothing may be wider than the screen. */
.page-card,
.top-bar,
.tab-bar,
.result-list,
.queue-list,
.search-box {
    max-width: 100%;
}

.search-item,
.queue-item,
.listener-item {
    max-width: 100%;
    overflow: hidden;
}

/* Rows read left-to-right like the rest of the layout, while Kurdish words
   keep their own right-to-left order inside the line. */
.queue-track-title,
.queue-track-sub,
.search-title,
.search-sub,
.listener-name,
.listener-handle,
.user-display-name,
.user-handle {
    text-align: left;
    unicode-bidi: isolate;
}

.queue-item,
.search-item,
.listener-item,
.profile-head {
    text-align: left;
}

.listener-info,
.profile-text,
.queue-track-info,
.search-details {
    align-items: flex-start;
}

/* Listener rows: avatar, then name, then the role badge. */
.listener-item {
    direction: ltr;
    flex-direction: row;
    gap: 11px;
    justify-content: flex-start;
}

.listener-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.listener-item .role-badge {
    margin-left: auto;
    flex-shrink: 0;
}

.listener-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listener-handle {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-head { direction: ltr; }

.listeners-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* ===================================================================
   Player: exactly one screen, no scrolling
   Inside Telegram the usable height is far smaller than the phone's,
   and it differs per device, so fixed pixel sizes could never cover
   every case. Instead the player becomes a flex column pinned to the
   viewport and the artwork absorbs whatever space is left after the
   title, the progress bar and both control rows have taken theirs.
   Only the player behaves this way; the other tabs scroll normally.
   =================================================================== */

body.player-fit {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

body.player-fit .tab-pages {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 8px;
}

body.player-fit .tab-page[data-page="player"].is-active {
    display: flex;
    flex: 1;
    min-height: 0;
}

body.player-fit .tab-page[data-page="player"] .page-card {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

body.player-fit #active-player-view {
    flex: 1;
    min-height: 0;
}

/* The one element allowed to give up room. aspect-ratio keeps it round
   while the height shrinks. */
body.player-fit .art-ring {
    flex: 1 1 auto;
    width: auto;
    height: auto;
    min-height: 0;
    max-width: min(62vw, 260px);
    aspect-ratio: 1;
    margin: 0 auto 10px;
}

/* Everything else keeps its size and simply stays put. */
body.player-fit .track-info,
body.player-fit .progress-wrapper,
body.player-fit .controls,
body.player-fit .bottom-bar {
    flex: 0 0 auto;
}

body.player-fit .track-info {
    margin-bottom: 8px;
}

body.player-fit .progress-wrapper {
    margin-bottom: 8px;
}

body.player-fit .bottom-bar {
    margin-top: 12px;
    padding-top: 10px;
}

.track-title {
    font-size: clamp(16px, 4.6vw, 20px);
}

.controls {
    gap: clamp(12px, 4vw, 20px);
}

/* On a short screen the buttons come down a size as well, so the
   artwork is not squeezed to nothing. */
@media (max-height: 720px) {
    body.player-fit .btn-ctrl {
        width: 44px;
        height: 44px;
    }

    body.player-fit .btn-play {
        width: 56px;
        height: 56px;
    }

    body.player-fit .btn-play svg {
        width: 22px;
        height: 22px;
    }

    body.player-fit .bottom-bar {
        margin-top: 8px;
        padding-top: 8px;
    }

    body.player-fit .tab-page[data-page="player"] .page-card {
        padding: 12px 12px 10px;
    }
}

@media (max-height: 620px) {
    body.player-fit .btn-ctrl {
        width: 38px;
        height: 38px;
    }

    body.player-fit .btn-play {
        width: 50px;
        height: 50px;
    }

    body.player-fit .track-title {
        font-size: 15px;
    }
}

/* The idle screen's one call to action: a tap straight into search, so a
   new user is not left reading about /play with nothing to press. */
.btn-idle-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Sits where the "room is ready" badge used to: close under the text,
       so the eye goes from the message straight to the thing to press. */
    margin-top: 16px;
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--play-bg);
    color: var(--play-fg);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
    transition: transform .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn-idle-search:active {
    transform: scale(.97);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}

.btn-idle-search svg {
    width: 16px;
    height: 16px;
    fill: var(--play-fg);
}

/* ===================================================================
   Player tab: let it breathe
   The card frame around the player made the screen feel boxed in, and
   its lighter fill drew a visible rectangle on the black. On the player
   the content now sits straight on the background; the other tabs are
   lists and keep their card, which is what separates them from the page.
   =================================================================== */

.tab-page[data-page="player"] .page-card {
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 6px 10px;
}

/* The idle artwork becomes a soft halo instead of a flat disc: a glow
   that fades into the background, with the note resting in a darker
   circle at its centre. */
.idle-ring {
    width: 200px;
    height: 200px;
    margin-bottom: 22px;
    border: 0;
    background: radial-gradient(circle,
        rgba(118, 87, 255, .16),
        rgba(118, 87, 255, .03) 62%,
        transparent 70%);
    box-shadow: 0 0 80px rgba(118, 87, 255, .08);
}

/* The inner circle is drawn with a pseudo-element so the markup is
   untouched; the note sits above it. */
.idle-ring::before {
    content: "";
    grid-area: 1 / 1;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(145deg, #182139, #0d1320);
}

.idle-ring svg {
    grid-area: 1 / 1;
    width: 44px;
    height: 44px;
    fill: var(--primary-2);
    z-index: 1;
}

.idle-title {
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -.035em;
}

.idle-sub {
    max-width: 330px;
    margin-top: 9px;
    line-height: 1.6;
}

.idle-badge {
    margin-top: 18px;
}