/*
 * A chat oldal lejatszoja, kerete es vezerlosava (chat-oldal-regi-kinezet, design D1, D5, D6).
 * A kinezet forrasa a jovahagyott prototipus (plans/chat-regi-kinezet/CHAT-REGI-prototipus.html) es a regi klasszikus
 * 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 #652a01, -1px -1px 0 3px #ffa35c, 1px 1px 0 3px #5a1e00, 1px 1px 8px 4px #7a3300;
        background: #652a01;
    }
}

/* ---- 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(#c24f08, #652a01); border-top: 1px solid #5a1e00; border-bottom: 1px solid #ffa35c;
    border-left: 1px solid #5a1e00; border-right: 1px solid #ffa35c; 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 #ffa35c; border-left: 1px solid #5a1e00; 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 #ffa35c; border-left: 1px solid #5a1e00; }
/* 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 #652a01; }
/* 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: #ffa35c; }
    .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 #5a1e00; box-shadow: inset 0 1px 0 #ffa35c; }
}

/* ---- A foglalt modell cimkeje a lejatszon (privat-show-jelzes, design D3) ----
   Az awards oldal „● IN PRIVATE" cimkejenek mintajara (the-69s-team.css .hely .allapot), nagyobb betuvel. A lejatszo
   TESTVERE a #chat-frame-container-ben, a partner a modell nevet bal felul irja ki - a cimke a nev ala kerul. Abszolut:
   helyet nem foglal, semmi nem mozdul miatta; pointer-events: none - a ra erkezo kattintas a lejatszoe (a partner eszkoze). */
.cs-allapot-cimke { position: absolute; left: 14px; top: 40px; z-index: 2; pointer-events: none;
    font: bold 11px Verdana, sans-serif; color: #fff; background: rgba(0, 0, 0, .6); border-radius: 2px; padding: 3px 7px;
    white-space: nowrap; }
.cs-allapot-cimke::before { content: "\25CF  "; }
.cs-allapot-cimke.priv::before { color: #ff6b14; } /* privat show: piros (a fenntarto, 2026-10-06) */
.cs-allapot-cimke.memb::before { color: #ff9a3c; } /* csak tagoknak: narancs, mint az awards oldalon */
.cs-allapot-cimke.vip::before { color: #ffc83d; } /* VIP SHOW / VIP SOON: arany (vip-show-jelzes, 2026-10-11) */
/* VIP SOON: a modell szabad chatben van, a partner „● LIVE/ÉLŐ" jelzoje (desktopon kb. 42-66 px, mobilon 47-62 px) vegig a nev
   alatt all - a cimke egy sorral lejjebb, ala kerul. A foglalt cimkek helye marad (ott a partner jelzoje a betolteskor eltunik;
   a fenntarto megfigyelese, 2026-10-11). Mert: plans/archiv/vip-show-jelzes/LEJATSZO-CIMKE-meres.md, prototipus: plans/archiv/vip-show-jelzes/LEJATSZO-CIMKE-prototipus.html. */
.cs-allapot-cimke.hamarosan { top: 72px; }
.cs-ablak--mobil .cs-allapot-cimke.hamarosan { top: 68px; }
/* Mobilon a 370 keppontos lejatszo kozepre all (inline-block), ezert a cimke a LEJATSZO bal szeletol szamol, nem a dobozetol;
   keskenyebb kepernyon a lejatszo kitolti a szelesseget (max-width: 100%), ott 14 px. */
.cs-ablak--mobil .cs-allapot-cimke { left: calc(max(0px, (100% - 370px) / 2) + 14px); font-size: 10px; }
#chat-frame-container:fullscreen .cs-allapot-cimke { left: 14px; }
#chat-frame-container:-webkit-full-screen .cs-allapot-cimke { left: 14px; }

/* ---- A kiemelt ajanlo foglalt modellnel (privat-show-jelzes, design D4) ----
   A bio-sav FOLOTT, sarga kerettel; a H2 a regi (#chat-extra h2.cx-ajanlo-cim stilusa is), a „busy" mondat elotte.
   A kartyak racsa ugyanaz, mint lent (#chat-extra .cx-recs): 6 x 114 = 684 fer a 709 - 2 x (8 + 1) = 691-be. */
#chat-extra .cx-ajanlo-fent { box-sizing: border-box; width: 709px; max-width: 100%; margin: 0 auto 18px; padding: 8px 8px 4px;
    border: 1px solid #fc0; background: rgba(0, 0, 0, .15); }
#chat-extra .cx-ajanlo-fent .cx-busy { margin: 2px 0 6px; padding: 0 4px; font: bold 13px Verdana, sans-serif; color: #fc0;
    text-align: left; }
@media (max-width: 767px) {
    /* 1 px a kepernyo szeletol, mint a bio-sav es a willingness-doboz: a 0. kepponton allo vonal telefonon nem latszik. */
    #chat-extra .cx-ajanlo-fent { max-width: calc(100% - 2px); margin-left: 1px; margin-right: 1px; padding: 6px 4px 2px; }
    #chat-extra .cx-ajanlo-fent .cx-busy { font-size: 12px; }
}

/* ---- A (C) sor foglalt modellnel (privat-show-jelzes, design D9; a prototipus stilusa) ----
   A vezerlosav alatt, a keret resze: hova visz a lejatszora kattintas. A lejatszo ALATT, igy semmi nem mozdul folotte. */
.cs-magyar { margin: 0; padding: 5px 10px; font: 10px/1.4 Verdana, sans-serif; color: #fff; text-align: center; background: #5a1e00;
    border-left: 1px solid #5a1e00; border-right: 1px solid #ffa35c; border-bottom: 1px solid #ffa35c; }
@media (max-width: 767px) {
    .cs-magyar { margin: 0 1px; font-size: 11px; border-left-color: #ffa35c; }
}