/* Gledajte Zajedno — panel na plejer stranici (chat + učesnici + status banner).
   Skriven po default-u (display:none inline u player.html), watch_room.js ga otkriva
   samo kad je stranica otvorena kroz sobu. */

/* Podrazumevano sakrivena — otkriva se samo u sobi na desktopu (vidi
   @media(min-width:901px) ispod), gde se koristi umesto kopije pored epizoda. Van
   toga (obična stranica, i soba na mobilnom) koristi se ta druga kopija umesto. */
#adSlotPlayerSquareRoom {
    display: none;
}

/* Omotač avatara + dekoracije, deljen svuda u sobi (učesnici, chat, fullscreen, banovani) —
   position:relative bez sopstvene širine/visine, jer je prati ugnježdena <img> (već ima
   width/height iz svog konteksta preko descendant selektora poput .wp-participant img). */
.wp-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.wp-avatar-wrap .avatar-decoration-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 116%;
    height: 150%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    object-fit: contain;
    background: transparent;
}

.wp-panel {
    background: rgba(20, 20, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #e0e0e0;
    /* height:100% mora da uključi padding/border, inače panel "gura" red grida
       viši od stvarne visine plejera i dno četa više ne poklapa dno plejera. */
    box-sizing: border-box;
}

/* Gledajte Zajedno — raspored specifičan za sobu (dodaje se klasa .wp-active na
   .player-wrapper preko watch_room.js). Anime info/poster nije potreban u sobi;
   chat zauzima mesto gde je inače spisak epizoda (desno, pun red), a spisak
   epizoda se spušta na mesto gde je bio anime info (ispod plejera). */
#player-page-wrapper .player-wrapper.wp-active .anime-info-wrapper {
    display: none;
}

/* Chat kolona je šira u sobi nego običan anime-info sidebar, da poruke imaju vazduha.
   Raspored je preuređen u odnosu na osnovni grid: chat zauzima samo gornji red
   (pored plejera, ista visina kao plejer — ne proteže se dole do liste epizoda),
   a lista epizoda ide ispod, preko celog reda (oba stupca).
   Ovo je desktop raspored — na mobilnom (vidi @media ispod, isti prelom kao
   osnovni plejer na 900px) se sve slaže u jednu kolonu, inače se dvokolonski
   grid stešnjava u uzak mobilni viewport i sve se preklapa. */
@media (min-width: 901px) {
    #player-page-wrapper .player-wrapper.wp-active {
        grid-template-columns: 1fr 320px;
        grid-template-areas:
            "player chat"
            "eplist .";
    }

    /* chat-stack (čet + reklama-kopija za sobu) postaje flex kolona SAMO ovde (desktop
       soba) — jedini kontekst gde "chat" red mora da bude viši od stvarne visine
       četa (deli red sa player-main-section, koji je viši jer uključuje kontrole/
       navigaciju ispod videa). Fuzija garantuje da reklama ide odmah ispod ČETA
       (njegove stvarne, JS-sinhronizovane visine), ne ispod celog (višeg) reda. */
    #player-page-wrapper .player-wrapper.wp-active .chat-stack {
        grid-area: chat;
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-self: start;
    }

    /* Na desktopu u sobi koristi se reklama iz chat-stack-a (odmah ispod četa) —
       kopija pored epizoda (sidebar-stack) se ovde sakriva da ne bi bile dve. */
    #player-page-wrapper .player-wrapper.wp-active .sidebar-stack #adSlotPlayerSquare {
        display: none;
    }

    #player-page-wrapper .player-wrapper.wp-active #adSlotPlayerSquareRoom {
        display: flex;
    }
}

@media (max-width: 900px) {
    #player-page-wrapper .player-wrapper.wp-active {
        grid-template-columns: 1fr;
        grid-template-areas:
            "player"
            "chat"
            "eplist"
            "playerad";
    }

    #player-page-wrapper .player-wrapper.wp-active .wp-panel {
        height: auto;
        max-height: 480px;
    }

    #player-page-wrapper .player-wrapper.wp-active .player-ad-slot {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* sidebar-stack (player.js: spaja epizode+reklamu u flex kolonu na širem ekranu
   van sobe) ovde mora da "nestane" iz layout stabla — u sobi epizode ostaju
   nezavisan grid-item na svom mestu (eplist), kako je i bilo pre uvođenja wrapper-a.
   Na mobilnom u sobi se i dalje koristi OVA (sidebar-stack) kopija reklame, nepromenjeno
   — samo desktop soba prebacuje na drugu kopiju (uz čet, vidi @media(min-width:901px)). */
#player-page-wrapper .player-wrapper.wp-active .sidebar-stack {
    display: contents;
}

#player-page-wrapper .player-wrapper.wp-active .episodes-wrapper {
    grid-area: eplist;
    width: 100%;
    flex: 1 1 auto;
    max-height: 420px;
}

#player-page-wrapper .player-wrapper.wp-active .episodes-wrapper .episodes .season-wrapper .season-episodes {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
}

#player-page-wrapper .player-wrapper.wp-active .wp-panel {
    grid-area: chat;
    margin-top: 0;
    min-height: 0;
}

#player-page-wrapper .player-wrapper.wp-active .wp-chat-messages {
    flex: 1;
    min-height: 0;
    max-height: none;
}

/* Panel je sam po sebi flex kolona (banner/vizibilnost, učesnici, chat) koja mora
   da zauzme celu visinu reda (jednaku visini plejera) — chat deo se rasteže
   (flex:1) a unos poruke ostaje prikovan na dnu, dok poruke skroluju unutar sebe. */
.wp-participants { flex-shrink: 0; }

.wp-chat {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.wp-chat-form {
    flex-shrink: 0;
}

.wp-banner {
    font-size: 0.9rem;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
    display: none;
}

.wp-banner.wp-banner-warning {
    display: block;
    background: rgba(234, 179, 8, 0.16);
    color: #facc15;
}

.wp-banner.wp-banner-live { display: block; }

.wp-banner-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

.wp-visibility-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #ccc;
    white-space: nowrap;
}

.wp-visibility-badge.wp-visibility-private {
    background: rgba(234, 179, 8, 0.14);
    color: #facc15;
}

.wp-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wp-blocked-users-btn {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.wp-blocked-users-btn:hover {
    background: rgba(239, 68, 68, 0.24);
}

/* Red sa linkom ka sobi + dugme za kopiranje — samostalan red u sobi, između
   navigacije prev/next epizode i liste epizoda ispod (deo player-main-section,
   ne deo episodes-wrapper kartice). */
.wp-room-link-row {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    background: rgba(20, 20, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 16px;
}

.wp-room-link-row input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #333;
    background: #1a1a1a;
    color: #ccc;
    font-size: 0.85rem;
}

.wp-room-link-row button {
    background: linear-gradient(135deg, #991b1e, #e11d48);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
}

.wp-room-link-row button.wp-copied {
    background: linear-gradient(135deg, #1a6e1a, #2a9e2a);
}

.wp-participants-header {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

.wp-participants-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
}

.wp-participant {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 8px;
}

.wp-participant:hover { background: rgba(255, 255, 255, 0.05); }

.wp-participant img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
}

.wp-participant .wp-name {
    flex: 1;
    cursor: pointer;
    font-size: 0.9rem;
}

.wp-participant .wp-host-tag {
    font-size: 0.7rem;
    color: #e11d48;
    font-weight: 700;
    text-transform: uppercase;
}

.wp-participant .wp-mod-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cfcfcf;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.72rem;
    cursor: pointer;
}

.wp-participant .wp-mod-btn:hover { background: rgba(153, 27, 30, 0.3); border-color: #991b1e; }

.wp-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}

.wp-chat-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.88rem;
}

.wp-chat-msg img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    flex-shrink: 0;
}

.wp-chat-msg .wp-chat-body {
    min-width: 0;
}

.wp-chat-msg .wp-chat-user {
    font-weight: 700;
    color: #e11d48;
    cursor: pointer;
    margin-right: 6px;
}

.wp-chat-msg .wp-chat-text {
    word-break: break-word;
}

.wp-chat-empty {
    color: #777;
    font-size: 0.85rem;
    text-align: center;
    padding: 20px 10px;
}

.wp-chat-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.wp-chat-form input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #333;
    background: #1a1a1a;
    color: #fff;
}

.wp-chat-form button {
    background: linear-gradient(135deg, #991b1e, #e11d48);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 700;
    cursor: pointer;
}

/* Gost/ne-host: kontrole plejera se vizuelno "gase" (samo overlay poruka, ne diramo
   originalne kontrole da izbegnemo lom postojeće logike). */
.wp-guest-lock-note {
    font-size: 0.78rem;
    color: #999;
    margin-top: -6px;
}

/* ==========================================================================
   Fullscreen chat overlay (Discord-inspired) — ubacuje se preko JS-a
   (watch_room.js) direktno u #custom-video-wrapper, jer Fullscreen API
   prikazuje samo taj element i njegove potomke. Van fullscreena je nevidljivo
   (wrapper nema .wp-fs-active klasu). Wrapper ima overflow:hidden (player.css)
   pa panel van ekrana (translateX) ostaje sakriven bez dodatnog CSS-a. */

.wp-fs-overlay {
    /* Fixed (ne absolute) — pozicionira se u odnosu na sam fullscreen element
       (top-layer), potpuno odvojeno od custom-video-wrapper box modela. Ranije
       (absolute) je otvaranje čet panela znalo da "gura" logo/kontrole ulevo
       tokom animacije (layout thrashing dok se accelerated layer preračunava
       zajedno sa wrapper-om) — contain izoluje repaint ovog sloja od ostatka
       plejera, isto važi za .wp-fs-chat-panel ispod. */
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 30;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
    max-width: calc(100vw - 32px);
    contain: layout paint;
}

.custom-video-wrapper.wp-fs-active .wp-fs-overlay {
    display: flex;
}

.wp-fs-toolbar {
    display: flex;
    gap: 6px;
    pointer-events: auto;
    opacity: 0.55;
    transition: opacity 0.35s ease;
}

.wp-fs-toolbar:hover {
    opacity: 1;
}

/* Ikonice nestaju posle nekoliko sekundi neaktivnosti (ne smetaju gledanju) —
   vraća ih pokret miša ili nova poruka u četu (watch_room.js: showToolbar()). */
.wp-fs-toolbar.wp-fs-toolbar-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Uređaji bez hover-a (dodir) ne mogu da "otkriju" suptilne ikonice mišem —
   drži ih vidljivim, ne oslanjaj se na hover kao jedini način da se primete. */
@media (hover: none) {
    .wp-fs-toolbar {
        opacity: 0.85;
    }
}

/* Jedno glavno dugme (krajnje desno, u uglu) + red preostalih ikonica koji
   klizne ULEVO od njega na klik (dropdown u horizontalnom obliku umesto
   vertikalnog, jer je sidro u samom uglu ekrana). Kolapsovano stanje ima
   max-width:0 + overflow:hidden umesto display:none da tranzicija bude glatka. */
.wp-fs-toolbar-expandable {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-width 0.25s ease, opacity 0.2s ease;
}

.wp-fs-toolbar-expandable.wp-fs-expanded {
    max-width: 220px;
    opacity: 1;
    pointer-events: auto;
}

.wp-fs-main-btn.wp-fs-main-active {
    background: rgba(153, 27, 30, 0.55);
}

.wp-fs-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(20, 20, 20, 0.75);
    color: #eee;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    backdrop-filter: blur(2px);
}

.wp-fs-icon-btn:hover {
    background: rgba(153, 27, 30, 0.55);
}

.wp-fs-icon-btn.wp-fs-muted {
    color: #f87171;
}

.wp-fs-chat-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e11d48;
    display: none;
}

.wp-fs-chat-dot.wp-fs-dot-visible {
    display: block;
}

.wp-fs-toasts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    pointer-events: none;
    max-width: min(320px, calc(100vw - 32px));
}

.wp-fs-toast {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: rgba(20, 20, 20, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.82rem;
    color: #e0e0e0;
    box-sizing: border-box;
    width: 100%;
    max-width: min(320px, calc(100vw - 32px));
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.wp-fs-toast.wp-fs-toast-visible {
    opacity: 1;
    transform: translateX(0);
}

.wp-fs-toast img,
.wp-fs-toast-avatar-placeholder {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
}

.wp-fs-toast-body {
    min-width: 0;
}

.wp-fs-toast-user {
    font-weight: 700;
    color: #e11d48;
    display: block;
    font-size: 0.76rem;
}

/* Poruke idu do 500 karaktera (server ograničava) — u toast-u (kompaktna
   obaveštenje, ne stalni prikaz) se seku na 4 reda sa "...", pun tekst ostaje
   čitljiv u side panelu (wp-fs-chat-panel-messages ispod), gde nema limita. */
.wp-fs-toast-text {
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Side chat panel — Discord-in-game-overlay stil, slide-in sa desne ivice
   fullscreen video okvira.
   Napomena: element koji je u Fullscreen API top-layeru ume da ignoriše
   overflow:hidden roditelja u pojedinim browserima, pa se sakrivanje NE
   oslanja samo na translateX van vidljive zone — opacity:0 + visibility:hidden
   + pointer-events:none garantuju da panel stvarno nestane i ne prima klikove
   dok je zatvoren (rešava "ne nestane potpuno sa ekrana"). Tranzicija ide na
   transform+opacity sa blažim easing-om (bez skoka), visibility se menja tek
   nakon što se opacity/transform tranzicija završi da klik ne bi "posekao"
   animaciju na pola. BEZ backdrop-filter-a (blur) — animiran blur nad celom
   visinom plejera je bio glavni uzrok trzanja/isecanja pri otvaranju/zatvaranju
   (browser mora iznova da računa blur pozadine na svakom frejmu tranzicije);
   pozadina je već dovoljno neprovidna (0.94) bez njega. */
.wp-fs-chat-panel {
    /* Fixed umesto absolute — isti razlog kao .wp-fs-overlay iznad (izolovan
       sloj, ne deli layout/repaint sa custom-video-wrapper tokom animacije). */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: min(320px, 85vw);
    z-index: 31;
    display: none;
    flex-direction: column;
    background: rgba(15, 15, 15, 0.96);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    overflow: hidden;
    contain: layout paint;
    will-change: transform, opacity;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.2s ease,
                visibility 0s linear 0.26s;
}

.custom-video-wrapper.wp-fs-active .wp-fs-chat-panel {
    display: flex;
}

.wp-fs-chat-panel.wp-fs-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.2s ease,
                visibility 0s linear 0s;
}

.wp-fs-chat-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    color: #fff;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.wp-fs-chat-panel-close {
    background: none;
    border: none;
    color: #ccc;
    font-size: 1rem;
    cursor: pointer;
}

.wp-fs-chat-panel-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wp-fs-chat-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.85rem;
    color: #e0e0e0;
}

.wp-fs-chat-msg img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.wp-fs-chat-user {
    font-weight: 700;
    color: #e11d48;
    margin-right: 6px;
}

.wp-fs-chat-text {
    word-break: break-word;
}

.wp-fs-chat-panel-form {
    flex-shrink: 0;
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    width: 100%;
}

.wp-fs-chat-panel-form input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #333;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .wp-fs-chat-panel {
        width: 85vw;
    }
}

/* Manji ekrani (telefon u fullscreenu) — sitnije ikonice, panel preko cele
   širine (kao Discord mobile overlay, ne stešnjena bočna traka), toast tekst
   malo manji da stane u uzak viewport. */
@media (max-width: 480px) {
    .wp-fs-overlay {
        top: 10px;
        right: 10px;
        gap: 6px;
    }

    .wp-fs-icon-btn {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .wp-fs-toolbar {
        gap: 4px;
        opacity: 0.7;
    }

    .wp-fs-toast {
        font-size: 0.76rem;
        padding: 6px 10px;
    }

    .wp-fs-chat-panel {
        width: 100%;
        max-width: 100%;
        border-left: none;
    }
}

/* Modal blokiranih korisnika — otvara ga wp-blocked-users-btn (samo host), vidi
   watch_room.js. Sopstvene klase jer se ova stranica ne oslanja na user_profile.css. */
.wp-blocked-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.wp-blocked-modal-content {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 440px;
    max-height: 80vh;
    overflow-y: auto;
    color: #e0e0e0;
}

.wp-blocked-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.wp-blocked-modal-header h3 {
    margin: 0;
    font-size: 1.05rem;
}

.wp-blocked-modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.wp-blocked-modal-close:hover {
    color: #fff;
}

.wp-blocked-modal-hint {
    color: #999;
    font-size: 0.85rem;
    margin: 0 0 14px 0;
}

.wp-blocked-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wp-blocked-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.wp-blocked-name {
    flex: 1;
}

.wp-blocked-unban-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e0e0e0;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
}

.wp-blocked-unban-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.wp-blocked-empty,
.wp-blocked-error {
    color: #999;
    margin: 0;
}

.wp-blocked-error {
    color: #f87171;
}