:root {
    --bs-border-radius: 1rem;
}

body { background: #f7f7f5; }

.poke-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid #888; image-rendering: pixelated;
}
.poke-name { font-family: monospace; font-size: .8rem; text-transform: uppercase; }

.vignette { height: 320px; object-fit: cover; background: #222; }
.vignette-thumb { max-height: 240px; max-width: 100%; border-radius: .5rem; }
.screening-card .synopsis {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
}

.bg-black { background: #000; }
.projection-placeholder { color: #888; }

#player-wrap { position: relative; }

#player, #preview { width: 100%; height: 100%; object-fit: contain; background: #000; }

#status-badge.launched { background: #198754; }
#status-badge.ready    { background: #0d6efd; }
#status-badge.busy     { background: #6c757d; }
#status-badge.error    { background: #dc3545; }

.feed-row { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }

/* custom player controls (no seek bar — playback is projectionnist-driven) */
.player-controls {
    display: flex; align-items: center; gap: .5rem;
    padding: .35rem .6rem;
    background: #1a1a1a; color: #eee;
    border-radius: 0 0 .35rem .35rem;
}
.pc-btn {
    background: none; border: none; color: #eee;
    font-size: 1.1rem; line-height: 1; padding: .25rem .4rem;
    cursor: pointer; border-radius: .25rem;
}
.pc-btn:hover { background: rgba(255,255,255,.15); }
.pc-btn:disabled { opacity: .4; cursor: default; }
.pc-btn.active { color: #ffc107; }

.pc-volume-group { display: flex; align-items: center; gap: .25rem; }
.pc-volume { width: 80px; height: 4px; }
.pc-volume::-webkit-slider-thumb { cursor: pointer; }
.pc-volume::-moz-range-thumb { cursor: pointer; border: none; }

.pc-time { font-size: .8rem; font-family: monospace; color: #ccc; white-space: nowrap; }
.pc-spacer { flex: 1; }

/* fullscreen: controls stick below the video */
:fullscreen #player { border-radius: 0; }
#player-wrap:fullscreen {
    display: flex; flex-direction: column; justify-content: flex-end;
    width: 100vw; height: 100vh; background: #000;
}
#player-wrap:fullscreen .ratio { flex: 1; height: auto; }
#player-wrap:fullscreen .player-controls { border-radius: 0; }
.player-controls:fullscreen { width: 100%; border-radius: 0; }

/* chat overlay — floating text bubbles on top-right of the video */
.chat-overlay {
    position: absolute; top: .6rem; right: .6rem; z-index: 5;
    display: flex; flex-direction: column; gap: .25rem;
    max-width: 42%; max-height: 70%;
    overflow: hidden; pointer-events: none;
}
.chat-overlay.d-none { display: none; }
.chat-line {
    background: rgba(0,0,0,.55); color: #fff;
    padding: .2rem .5rem; border-radius: .35rem;
    font-size: .82rem; line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
    animation: chat-fade 8s ease forwards;
}
.chat-line .chat-name { font-weight: 700; }
.chat-line .chat-info { color: #9ad; font-weight: 700; font-style: italic; }
.chat-line .chat-sys { color: #ffd24a; font-style: italic; }
@keyframes chat-fade {
    0% { opacity: 0; transform: translateY(-.3rem); }
    6% { opacity: 1; transform: none; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}

/* connection indicators in the control bar */
.pc-indicators { display: flex; gap: .15rem; }
.pc-indicator {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .7rem; color: #888;
    padding: .1rem .3rem; border-radius: .25rem;
    background: rgba(255,255,255,.05);
}
.pc-indicator .pc-ind-label { font-family: monospace; }
.pc-indicator.ok { color: #4ade80; }
.pc-indicator.ok .bi { animation: spin-ok 1s linear; }
.pc-indicator.ko { color: #f87171; }
@keyframes spin-ok { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* chat input in the control bar */
.pc-chat-input-group { display: flex; align-items: center; margin-left: .25rem; }
.pc-chat-input {
    width: 180px; height: 26px;
    background: #2a2a2a; color: #eee;
    border: 1px solid #444; border-radius: .3rem;
    padding: 0 .4rem; font-size: .8rem;
}
.pc-chat-input::placeholder { color: #888; }
.pc-chat-input:focus { outline: none; border-color: #6c757d; }

/* toggles go active (gold) like the subtitles toggle */
#player-wrap:fullscreen .pc-chat-input { width: 260px; }