/* ========== CONTROLS MENU (Hamburger) ========== */
.controls-menu {
    position: fixed;
    bottom: 100px;
    left: 45%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    background: rgba(26, 27, 38, 0.95);
    backdrop-filter: blur(15px);
    padding: 8px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1100;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: auto;  /* Override parent's pointer-events:none */
}

.controls-menu.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
}

.menu-btn i {
    font-size: 1.2rem;
}

.menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.menu-btn.active {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.menu-btn.active i {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* New control button icon sizing (match existing like/queue icons) */
#btn-menu i,
#btn-volume i {
    font-size: 1.2rem;
}

/* Mobile: Menu and Volume buttons now visible with condensed sizing (see base.css) */

/* ========== VOLUME POPUP ========== */
.volume-popup {
    position: fixed;
    bottom: 100px;
    right: 25%;
    min-width: 220px;
    background: rgba(26, 27, 38, 0.95);
    backdrop-filter: blur(15px);
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1100;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: auto;  /* Override parent's pointer-events:none */
}

.volume-popup.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.volume-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.volume-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    min-width: 90px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Music Assistant SVG icon for volume label */
.volume-label .icon-ma {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 160 312 200'%3E%3Cpath d='m224.9 336.6 60.7-161.2h17.8l-60.7 161.2zm150.7 0-60.7-161.2h17.8l60.7 161.2zm-257.1 0V175.4h17v161.2zm38.6 0V175.4h17v161.2zm38.5 0V175.4h17v161.2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 160 312 200'%3E%3Cpath d='m224.9 336.6 60.7-161.2h17.8l-60.7 161.2zm150.7 0-60.7-161.2h17.8l60.7 161.2zm-257.1 0V175.4h17v161.2zm38.6 0V175.4h17v161.2zm38.5 0V175.4h17v161.2z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.volume-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.volume-value {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    min-width: 35px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ========== DEVICE PICKER MODAL ========== */
.device-picker-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3500;  /* Higher than media browser modal (2000) */
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: auto;  /* Override parent's pointer-events:none */

}

.device-picker-modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.device-picker-content {
    background: rgba(26, 27, 38, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
    width: clamp(280px, 90vw, 400px);
    max-height: 80vh;
    overflow: hidden;
}

.device-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.device-picker-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: white;
}

.device-picker-actions {
    display: flex;
    gap: 8px;
}

.device-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.device-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.device-action-btn.spinning i {
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.device-list {
    padding: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.device-loading,
.device-empty,
.device-error {
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.device-error {
    color: rgba(239, 68, 68, 0.8);
}

.device-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 4px 0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}

.device-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.device-item.active {
    background: rgba(255, 255, 255, 0.1);
    cursor: default;
}

.device-item.loading {
    opacity: 0.5;
    pointer-events: none;
}

.device-icon {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.7);
    width: 32px;
    text-align: center;
}

.device-item.active .device-icon {
    color: #1db954;
}

.device-info {
    flex: 1;
    min-width: 0;
}

.device-name {
    font-size: 0.95rem;
    color: white;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-type {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.device-item.active .device-type {
    color: #1db954;
}

/* ========== MOBILE: Condensed Playback Controls ========== */
/* Compact controls to fit 7 buttons (like, menu, prev, play, next, volume, queue) */
@media (max-width: 600px) {
    /* Center controls menu popup */
    .controls-menu {
        left: 50%;
        transform: translateX(-50%);
    }

    /* Center volume popup */
    .volume-popup {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100vw - 40px);  /* Full width minus margins */
        max-width: 320px;            /* Cap for larger phones */
        min-width: auto;             /* Override desktop min-width */
    }

    /* Compact playback controls pill */
    .playback-controls {
        padding: 0.4rem 0.6rem;  /* Reduced from 0.5rem 1.5rem */
        gap: 2px;                  /* Reduced from 10px */
    }

    .controls-center {
        gap: 0.5rem;              /* Reduced from 1.5rem */
    }

    .controls-left,
    .controls-right {
        gap: 0.25rem;              /* Reduced from 0.5rem */
    }

    /* Smaller buttons for compact layout */
    .control-btn {
        width: 36px;               /* Reduced from 38px */
        height: 36px;
        font-size: 1rem;         /* Reduced from 0.95rem */
    }

    .play-pause-btn {
        width: 48px;               /* Reduced from 48px */
        height: 48px;
        font-size: 2rem;         /* Reduced from 1.6rem */
    }

    /* Smaller icons for compact mobile controls */
    #btn-like i,
    #btn-queue i,
    #btn-menu i,
    #btn-volume i {
        font-size: 1rem;        /* Reduced from 1.1rem */
    }

    #btn-previous i,
    #btn-next i {
        font-size: 1.1rem;           /* Reduced from 1.2rem */
    }
}