/* ===== Ambient Mode CSS ===== */

/* Glow canvas behind video */
.ambient-glow-canvas {
    position: absolute;
    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;
    z-index: -1;
    filter: blur(80px) saturate(1.5);
    opacity: 0;
    transition: opacity 1.5s ease;
    pointer-events: none;
    border-radius: 20px;
}
.ambient-glow-canvas.active {
    opacity: 0.35;
}

/* Make player container position relative for the glow */
.player-video {
    position: relative;
    overflow: visible;
}

/* Ambient mode toggle button */
.ambient-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 18px;
    color: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    margin-left: 8px;
    vertical-align: middle;
}
.ambient-toggle-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.4);
}
.ambient-toggle-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
.ambient-toggle-btn.active {
    background: rgba(255, 193, 7, 0.15);
    border-color: #ffc107;
    color: #ffc107;
}

/* Only show on desktop */
@media (max-width: 992px) {
    .ambient-glow-canvas {
        display: none !important;
    }
    .ambient-toggle-btn {
        display: none !important;
    }
}