/* ========== MEDIA BROWSER STYLES ========== */
/* Separated from base.css for cleaner organization */

/* ========== MEDIA BROWSER TOGGLE BUTTON ========== */
/* 2nd row, above visual mode toggle on bottom-left */
.media-browser-toggle-btn {
    position: fixed;
    bottom: 76px; /* 24px + 40px + 12px gap = second row above visual mode */
    left: 24px;
    z-index: 140;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.media-browser-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: scale(1.05);
}

/* Icon sizing */
.media-browser-toggle-btn i {
    font-size: 1.2rem;
}

/* Custom Music Assistant icon (using SVG mask for color inheritance) */
.media-browser-toggle-btn .icon-ma {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    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;
}

/* Active state when media browser is open - Spotify */
.media-browser-toggle-btn.active {
    color: #1DB954; /* Spotify green */
    background: rgba(29, 185, 84, 0.15);
    border-color: rgba(29, 185, 84, 0.3);
}

/* Active state - Music Assistant */
.media-browser-toggle-btn.active-ma {
    color: #4A90D9; /* MA blue */
    background: rgba(74, 144, 217, 0.15);
    border-color: rgba(74, 144, 217, 0.3);
}

/* Hide in minimal mode */
body[data-minimal="true"] .media-browser-toggle-btn {
    display: none !important;
}

/* Push up when bottom nav is visible */
body:not(.hide-nav) .media-browser-toggle-btn {
    bottom: 108px; /* 56px nav + 52px (to stay above visual mode which is at 56px) */
}

/* ========== MEDIA BROWSER MODAL ========== */
/* Backdrop - click to close */
.media-browser-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.media-browser-modal:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.media-browser-modal.hidden {
    display: flex; /* Keep flex during transition */
}

/* Modal content - the popup itself */
.media-browser-content {
    position: relative;
    background: rgba(18, 18, 18, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 100%;
    height: 100%;
    max-width: 95vw;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.95) translateY(20px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.media-browser-modal:not(.hidden) .media-browser-content {
    transform: scale(1) translateY(0);
}

/* Minimalist control bar - top right corner */
.media-browser-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: flex;
    gap: 12px;
}

/* Add extra spacing after toggle button to separate from refresh/close */
#media-browser-toggle-source {
    margin-right: 2px;
}

/* Add spacing after devices button to separate from toggle */
#media-browser-devices {
    margin-right: 4px;
}

.media-browser-control-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.media-browser-control-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.media-browser-control-btn.close-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
}

/* Toggle source button icon sizing (same as other buttons) */
.media-browser-control-btn .icon-ma {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    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;
}

/* iframe takes remaining space */
.media-browser-frame {
    flex: 1;
    width: 100%;
    border: none;
    background: #121212;
    border-radius: 0 0 16px 16px;
}

/* ========== MOBILE LAYOUT ========== */
/* Position media browser button on right edge for mobile (separate from left stack) */
@media (max-width: 825px) {
    .media-browser-toggle-btn {
        right: auto;
        left: 16px;
        bottom: calc(var(--buttons-base, 80px) + 150px);
    }
}