.video-flyover-container {
    position: absolute;
    width: 300px;
    background: #111;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 99999;
}

.video-flyover-container.active {
    display: flex;
}

/* Hover bridge for standard position (bottom) */
.video-flyover-container::before {
    content: "";
    position: absolute;
    top: -20px; left: 0; right: 0; height: 20px;
}

/* Hover bridge for flipped position (top) */
.video-flyover-container.flipped::before {
    top: auto;
    bottom: -20px;
}

.video-thumbnail { width: 100%; aspect-ratio: 16/9; background: #000; line-height: 0; }
video { width: 100%; height: 100%; object-fit: cover; }
.controls-area { padding: 12px; background: #222; }

.mute-btn-horizontal {
    width: 100%; background: #444; color: white; border: none; padding: 10px;
    border-radius: 8px; cursor: pointer; display: flex; align-items: center; 
    justify-content: center; gap: 10px; font-size: 14px; font-weight: 600;
}

.is-playing { background: #007bff !important; }
.icon-on, .icon-off { display: none; }
.is-playing .icon-on { display: block; }
.mute-btn-horizontal:not(.is-playing) .icon-off { display: block; }