/* css/video.css */
#video-player-container {
    position: absolute; bottom: 20px; right: 20px; width: 300px;
    background: #1e1e1e; border: 1px solid #444; border-radius: 6px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6); z-index: 1000;
    display: none; flex-direction: column; overflow: hidden;
}

#video-header {
    padding: 8px 10px; background: #2d2d30; border-bottom: 1px solid #333;
    display: flex; justify-content: space-between; align-items: center; cursor: move;
}

#video-title {
    font-size: 12px; font-weight: bold; color: #ddd;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}

.vid-btn {
    background: transparent; border: none; color: #aaa;
    cursor: pointer; font-weight: bold; padding: 0 5px;
}
.vid-btn:hover { color: white; }
.btn-close:hover { color: var(--btn-red); }

#yt-player-wrapper {
    position: relative; padding-bottom: 56.25%; height: 0; background: black;
}
#yt-player-wrapper iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

#video-controls {
    padding: 10px; background: #252526; display: flex; flex-direction: column; gap: 8px;
}

.control-row { display: flex; justify-content: center; align-items: center; gap: 10px; }

.vid-ctrl {
    background: #333; border: 1px solid #555; color: #ddd;
    border-radius: 3px; padding: 4px 8px; font-size: 11px; cursor: pointer;
}
.vid-ctrl:hover { background: #444; }
.vid-ctrl.big { padding: 6px 15px; background: var(--accent); border-color: var(--accent); color: white; font-weight: bold; }