/*
 * A chat oldal lejatszoja, kerete es vezerlosava (chat-oldal-regi-kinezet, design D1, D5, D6).
 * A kinezet forrasa a jovahagyott prototipus (plans/CHAT-REGI-prototipus.html) es a regi LiveJasmin
 * chat oldal (2010). A style.css-hez nem nyulunk (CLAUDE.md) - ez kulon fajl, csak a chat oldal tolti be.
 *
 * A lejatszo merete: a `html[data-chatmeret]` attributumbol, amit a chat.jade inline szkriptje allit
 * be MEG A MEGJELENES ELOTT (D2). JavaScript nelkul - es a keresorobotnak - a Medium (960 x 540) marad.
 * A promo tool betoltoje a konteinert atnevezi (object_container -> object_container_0), ezert a
 * stilus OSZTALYRA kotodik (.cs-lejatszo), nem az id-re.
 *
 * Nem aspect-ratio, hanem kiszamolt magassag: a regebbi Safarik az aspect-ratio-t nem ismerik, es ott
 * a lejatszo 0 magas lenne - a bevetel egyetlen felulete tunne el.
 */

/* ---- A meret: --cs-w a lejatszo (kep) szelessege ---- */
.cs-ablak { --cs-w: 960px; --cs-szel: min(var(--cs-w), 100vw - 48px); }
html[data-chatmeret="s"] .cs-ablak { --cs-w: 701px; } /* a kerettel (2 x 4 px) pont 709 - a dobozok szelessege */
html[data-chatmeret="m"] .cs-ablak { --cs-w: 960px; }
html[data-chatmeret="l"] .cs-ablak { --cs-w: 1280px; }
html[data-chatmeret="xl"] .cs-ablak { --cs-w: 1600px; }

/* Alatta szellosebb terkoz a bio-savig (a regi oldal szerint ~24 px; a fenntarto kerese): 28 = 24 + a 4 px-es keret. */
.cs-ablak { width: var(--cs-szel); margin: 0 auto 28px; position: relative; }
.cs-ablak .cs-lejatszo { display: block !important; width: var(--cs-szel); height: calc(var(--cs-szel) * 0.5625); }

/* Mobil konteiner: a valtozas elotti meret (370 x 540, a kepernyo szelessegeig) - a szerver-oldali eszkoz-
   elagazas csak ezt donti el. A doboz es a fole eso resz pontosan ugyanaz, mint eddig: a CTA a doboz aljan van. */
.cs-ablak--mobil { width: auto; margin-bottom: 24px; }
.cs-ablak--mobil .cs-lejatszo { display: inline-block !important; width: 370px; max-width: 100%; height: 540px; }

#chat-frame-container { position: relative; overflow: hidden; }

/* ---- A keret (csak desktop) ----
   ARNYEKKAL rajzolva, nem border/padding-gel: a keret NEM foglal helyet, igy semmi nem mozdul el miatta -
   a lejatszo teteje sem. Mobil konteineren (a :has()-t ismero bongeszokben) es keskeny ablakban nincs keret. */
@media (min-width: 768px) {
    .cs-ablak:not(.cs-ablak--mobil) {
        box-shadow: 0 0 0 3px #650101, -1px -1px 0 3px #fe3e3d, 1px 1px 0 3px #400000, 1px 1px 8px 4px #600000;
        background: #650101;
    }
}

/* ---- Az AdBlock-jelzes a keret fole (2026-10-06, a fenntarto kerese) ----
   A lapos jelzes (partial/adblock-figyelmeztetes) negativ margoval a morzsamenu alatti hezagba csuszik, es az alja eddig
   pont a lejatszo tetejere esett - a keret (4 px arnyek) beleert, a ketto egybefolyt. Desktopon 7 px-szel feljebb all, es
   ALATTA ugyanennyi hely: a lejatszo es minden, ami utana jon, PONTOSAN a helyen marad. Mobilon nincs keret, ott nem
   valtozik semmi (a lejatszo folotti resz ott szent - a CTA miatt). */
@media (min-width: 768px) {
    #enablePls.figyelmezteto--lapos .redboxcontainer { margin-top: -15px; margin-bottom: 7px; }
}

/* ---- Egesz kepernyo (D6): a lejatszo kitolti a kepernyot; a kilepo gomb csak itt latszik ---- */
#chat-frame-container:fullscreen { width: 100%; height: 100%; background: #000; }
#chat-frame-container:-webkit-full-screen { width: 100%; height: 100%; background: #000; }
#chat-frame-container:fullscreen .cs-lejatszo { width: 100% !important; height: 100% !important; max-width: none; }
#chat-frame-container:-webkit-full-screen .cs-lejatszo { width: 100% !important; height: 100% !important; max-width: none; }
/* A kilepo gomb: egyetlen kis sarokfelulet a lejatszo folott (44 x 44), atlatszo takarorteg NINCS - a video
   tobbi resze a partnere, a ra erkezo kattintas a promo toole marad (a spec: „A videora kattintas nem vesz el"). */
/* FELUL KOZEPEN, nem jobb felul: ott a partner lejatszojanak hangero-gombja all, a ✕ eltakarta (a fenntarto, stage, 2026-10-05).
   Bal felul a modell neve es a LIVE jelzes, alul a chat-mezo es a CTA - felul kozepen nincs semmi a lejatszobol. */
/* Attetszo kerek gomb, mint a lejatszo sajat nemitogombja es a YouTube X-e (a fenntarto kerese, 2026-10-05: a fekete
   alap sarga kerettel tul eros volt). A feher X arnyekot kap, hogy vilagos videon is latsszon. */
.cs-kilep { display: none; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2; width: 44px; height: 44px;
    padding: 0; background: rgba(0, 0, 0, .35); color: #fff; border: 0; border-radius: 50%;
    font: 20px/44px Verdana, sans-serif; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); cursor: pointer; }
.cs-kilep:hover { background: rgba(0, 0, 0, .55); }
#chat-frame-container:fullscreen .cs-kilep { display: block; }
#chat-frame-container:-webkit-full-screen .cs-kilep { display: block; }
.cs-kilep:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- A vezerlosav a lejatszo alatt (a regi „Size | Settings | Audio … Performer's Personal Page") ---- */
.cs-sav { display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; text-align: left;
    background: linear-gradient(#940000, #650101); border-top: 1px solid #400000; border-bottom: 1px solid #fe3e3d;
    border-left: 1px solid #400000; border-right: 1px solid #fe3e3d; font: 10px Verdana, sans-serif; }
.cs-sav-csop { display: flex; align-items: stretch; flex-wrap: wrap; }
.cs-sav [hidden] { display: none !important; }
.cs-gomb { display: inline-flex; align-items: center; gap: 5px; min-height: 21px; padding: 0 10px; margin: 0; color: #fff;
    background: none; border: 0; border-right: 1px solid #fe3e3d; border-left: 1px solid #400000; font: inherit;
    cursor: pointer; white-space: nowrap; text-decoration: none; }
a.cs-gomb, a.cs-gomb:visited { color: #fff; }
.cs-gomb:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
.cs-gomb[aria-pressed="true"] { color: #fc0; }
.cs-gomb:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.cs-meret { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; color: #fff;
    border-right: 1px solid #fe3e3d; border-left: 1px solid #400000; }
/* A prototipus ikonja (a fenntarto: „tok jol nezett ki, egyertelmu"): feher keret, sotet gyuru, feher kozep - mint egy
   atmeretezheto ablak. border-box: a style.css tartalom-dobozzal szamol, ott a keret kivulre kerulne. */
.cs-ikon { display: inline-block; box-sizing: border-box; width: 9px; height: 9px; border: 1px solid #fff; background: #fff;
    box-shadow: inset 0 0 0 1px #650101; }
/* A Full Screen ikonja: negy sarok (a YouTube-rol ismert „kinyitas" jel) - a felirat onmagaban mobilon nem latszott gombnak
   (a fenntarto, 2026-10-05). Inline SVG, a szin a felirat szine. */
.cs-full-ikon { width: 11px; height: 11px; flex: none; }
.cs-select { height: 16px; border: 1px solid #fc0; color: #fc0; background: #333; font: 10px Verdana, sans-serif; }

/* ---- Mobil: a sav a lejatszo ALATT, ujjal eltalalhato gombokkal; meretvalaszto nincs ---- */
@media (max-width: 767px) {
    .cs-sav .cs-meret { display: none !important; }
    /* A keret mindket oldalon latsszon (a fenntarto, 2026-10-05): a bal szel vilagos, mint a dobozok kulso kereten, es 1 px
       hezag a kepernyo szeletol - a 0. kepponton allo vonal telefonon nem latszott. */
    .cs-sav { margin: 0 1px; border-left-color: #fe3e3d; }
    .cs-sav-csop { width: 100%; }
    .cs-sav-csop .cs-gomb { flex: 1; justify-content: center; min-height: 34px; font-size: 11px; }
    /* Mobilon a Full Screen egymaga egy sor; a felirat a tobbi gombbal azonos (nem felkover - a fenntarto, 2026-10-05),
       a gombot az ikon jelzi, a szoveghez illo meretben. */
    #cs-full { gap: 6px; }
    #cs-full .cs-full-ikon { width: 12px; height: 12px; }
    /* A sorok kozott ugyanaz a ketszinu vonal, mint a gombok kozott (a fenntarto: mobilon nem voltak szeparalva). */
    .cs-sav-csop + .cs-sav-csop { border-top: 1px solid #400000; box-shadow: inset 0 1px 0 #fe3e3d; }
}