/* ==========================================================================
   JELLIES — shared listening sessions
   ========================================================================== */

/* The bar sits between the tab bar and the mini player, so both have to know
   how tall it is. Zero when there's no jelly around, which keeps every other
   layout exactly as it was. */
:root {
    --jelly-bar-h: 0px;
}
body.jelly-bar-open {
    --jelly-bar-h: 56px;
}

.jelly-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--tabbar-h) + var(--safe-bottom));
    width: calc(100% - 16px);
    max-width: 560px;
    z-index: 1850;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #232323, #1b1b1b);
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
    animation: jellyBarIn 0.28s ease-out;
}
.jelly-bar[hidden] {
    display: none;
}
@keyframes jellyBarIn {
    from { transform: translate(-50%, 16px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

.jelly-bar-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.jelly-bar-icon {
    color: var(--accent);
    flex-shrink: 0;
}
.jelly-bar-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.jelly-bar-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Doubles as the switch between "their speakers" and "here too", so it has to
   read as something you can press. */
.jelly-bar-sub {
    font-size: 0.74rem;
    color: #9d9d9d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jelly-bar-sub[onclick],
.jelly-bar-sub:hover {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.25);
}

.jelly-bar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.jelly-bar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
}
.jelly-bar-icon-btn.hidden {
    display: none;
}
.jelly-bar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}
.jelly-bar-btn {
    padding: 9px 16px;
    min-height: 38px;
    border: none;
    border-radius: 19px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.jelly-bar-btn:active {
    transform: scale(0.97);
}

/* ---------- The host's switch, in the expanded player ---------- */
.jelly-host-row {
    margin-top: 14px;
    text-align: left;
}
/* Only offered on the full player — there's no room on the mini bar, and it
   isn't something you flip by accident on the way past. */
#player-container:not(.expanded-mode) .jelly-host-row {
    display: none;
}
.jelly-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.jelly-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.jelly-switch-track {
    position: relative;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
    background: #3a3a3a;
    border-radius: 13px;
    transition: background 0.2s ease;
}
.jelly-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.2s ease;
}
.jelly-switch input:checked + .jelly-switch-track {
    background: var(--accent);
}
.jelly-switch input:checked + .jelly-switch-track .jelly-switch-thumb {
    transform: translateX(18px);
}
.jelly-switch input:focus-visible + .jelly-switch-track {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35);
}
.jelly-switch-label {
    font-size: 0.9rem;
    font-weight: 600;
}
.jelly-host-status {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: #9d9d9d;
    min-height: 1em;
}

/* ---------- "How do you want to hear it?" ---------- */
.jelly-join-note {
    margin: 0 0 14px;
    font-size: 0.85rem;
    color: #b3b3b3;
}
.jelly-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}
.jelly-choice .icon {
    margin-top: 2px;
    color: var(--accent);
    flex-shrink: 0;
}
.jelly-choice-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.jelly-choice-text small {
    font-size: 0.75rem;
    font-weight: 400;
    color: #9d9d9d;
    line-height: 1.4;
    white-space: normal;
}

/* ---------- Sound panel, while the host owns the sound ---------- */
.sound-locked-note {
    margin: 12px 0 0;
    font-size: 0.78rem;
    color: var(--accent);
}
.sound-locked-note.hidden {
    display: none;
}
.sound-bass-slider:disabled,
.sound-treble-slider:disabled,
.sound-speed-slider:disabled,
.effect-toggle-btn:disabled,
.sound-reset-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* The scrubber runs along the bottom edge of the bar, out of the way of
   the buttons but still wide enough to aim at with a thumb. */
.jelly-bar-seek {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 2px;
    width: auto;
    height: 14px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.jelly-bar-seek[hidden] {
    display: none;
}
.jelly-bar-seek::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
}
.jelly-bar-seek::-moz-range-track {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
}
.jelly-bar-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px;
    height: 11px;
    margin-top: -4px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
}
.jelly-bar-seek::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
}
/* The bar grows a little when it carries a scrubber, so the mini player
   above it has to move up by the same amount. */
body.jelly-bar-open.jelly-bar-scrubbable {
    --jelly-bar-h: 64px;
}
.jelly-bar.has-seek {
    padding-bottom: 14px;
}

/* Hidden outright while you are a guest: the server refuses a second
   jelly from someone already in one, so the switch would only mislead. */
.jelly-host-row.hidden {
    display: none;
}

/* On a phone the bar carries four controls and two lines of text. Giving the
   buttons back a few pixels each is what keeps the song title and the
   listening mode readable instead of both ending in an ellipsis. */
@media (max-width: 430px) {
    .jelly-bar {
        gap: 6px;
        padding: 8px;
    }
    .jelly-bar-actions {
        gap: 3px;
    }
    .jelly-bar-icon-btn {
        width: 34px;
        height: 34px;
    }
    .jelly-bar-btn {
        padding: 8px 12px;
        min-height: 34px;
        font-size: 0.76rem;
    }
    /* The headphones glyph is the least load-bearing thing in the row. */
    .jelly-bar-icon {
        display: none;
    }
}

/* While you are a guest, the jelly bar is the transport. The player's own
   buttons would be a second set of the same controls, and its shuffle,
   repeat and smart-next drive a queue nobody in the jelly is listening to. */
body.jelly-guest .primary-controls-row,
body.jelly-guest .progress-row,
body.jelly-guest #shuffle-toggle-btn,
body.jelly-guest #repeat-toggle-btn,
body.jelly-guest #smart-next-toggle-btn {
    display: none;
}
/* The mini bar's own row needs out-shouting: the rule that shows it is
   `#player-container.mini-mode .mini-controls { display: flex !important }`,
   which wins on both !important and specificity against a plainer selector. */
body.jelly-guest #player-container.mini-mode #mini-controls {
    display: none !important;
}
/* "Potify's next picks" is this device's own guesswork, which has nothing
   to do with what the jelly is going to play. */
body.jelly-guest .queue-section:last-child {
    display: none;
}