/* chat.css — alleen chat-specifieke stukken. De pagina zelf is de
   normale layout_v3 (3 kolommen, zelfde header/footer/scripts) met
   als verschil: body.chat-layout → header vast in scrolled-staat. */

/* breedbeeld (↔-knop): wrapper uitklappen — max de header-artwork
   (1500px — breder breekt de afbeelding). max-width → kleinere
   schermen pakken hun eigen breedte; banners/kolommen blijven er
   rechts naast. Bij ≥1690px staan de sky-rails in de buitenmarge:
   die zijn gepositioneerd voor 1320px-wrapper → breder dan ~1310
   overlappen ze. Daarom: breedte = min(1500, viewport − railruimte)
   EN de rails schuiven mee naar buiten zodat ze naast de bredere
   wrapper blijven staan ("banners moeten mee bewegen"). */
body.chatwide .wrapper{max-width:1500px}
@media(min-width:1690px){
  /* min(vw−390) beschermt de rail-ruimte, max(1320) voorkomt dat
     'vergroten' op net-niet-brede schermen juist SMALLER wordt */
  body.chatwide .wrapper{max-width:max(1320px, min(1500px, calc(100vw - 390px)))}
  /* rails: 185px = railbreedte 160 + 25px gap naast de wrapper-rand.
     whalf = halve wrapper-breedte = min(750, 50vw - 195) */
  body.chatwide .ad-rail-l{left:calc(50% - min(750px, calc(50vw - 195px)) - 185px)}
  body.chatwide .ad-rail-r{right:calc(50% - min(750px, calc(50vw - 195px)) - 185px)}
}

/* kolommen inklappen (▯▯-knop): zijkolommen weg, chat gebruikt de
   volle wrapper-breedte — site-breedte zelf blijft normaal. De
   auto-refresh-leader onder de chat blijft wel staan. */
@media(min-width:801px){
  body.chatcols .columns{grid-template-columns:minmax(0,1fr)}
  body.chatcols .col-left,body.chatcols .col-right{display:none}
}

/* chat-box + iframe transparant → de swirl-wrapper-achtergrond
   komt door het chatvlak heen (eigenaar: "dat witte moet
   transparant"). De .box-border/titelbalk blijven zichtbaar. */
.chat-wrap{background:transparent!important;border-color:#d9b9d0}
.chat-frame{display:block;width:100%;border:0;border-radius:0 0 6px 6px;
  background:transparent;height:calc(100vh - 340px);min-height:380px}

/* sleep-greep onder de iframe (zoals oude chatbox) */
.chat-grip{height:9px;cursor:ns-resize;background:
  linear-gradient(#e8dbe4,#d9c4d4);border:1px solid #ead9e6;
  border-top:0;border-radius:0 0 5px 5px}
.chat-grip:hover{background:linear-gradient(#e0cfe0,#cfb6cc)}

/* webcam-paneel (Galene) — klapt open boven de chat-iframe */
.chat-cam{background:#181020;border-bottom:1px solid #d9b9d0}
.chat-cam-frame{display:block;width:100%;border:0;height:300px;
  background:transparent}
.abtn.tt.on{background:rgba(200,120,180,.45)}

.chat-note{font-size:12px;color:#777;padding:6px 10px}
.chat-jong{padding:30px 20px;text-align:center}
.chat-layout .ad-leader{margin:10px 0}

/* dode ruimte boven de rechterkolom-ad: normale pagina's reserveren
   daar 84px voor de header-bloem — in chat-layout is die altijd
   onzichtbaar → padding weg, klein contextblok (.rt-top, via
   $right_top) vult de plek (eigenaar 2-10: "ruimte boven de
   advertentie, iets dat met chat/hotel te maken heeft") */
body.chat-layout .col-right{padding-top:0}
.rt-links{display:flex;flex-direction:column;gap:3px;padding:6px 10px;
  font-size:12.5px}
.rt-links a{color:#782f6d}
.rt-note{color:#8a7a86;font-size:11.5px}

/* ===== onder-rij (eigenaar 29-9, gecorrigeerd):
   - normaal & breedbeeld: één rechte leader onder de chat
   - menu weggeklapt (chatcols): [square][roterend blok][square]
   - mobiel ≤700px: alleen de mobiele banner, geen blokken
   Op mobiel vallen ook de rechtsboven-knoppen weg (menu is daar
   toch al weg — knoppen voor kolommen/hoogte zinloos) ===== */
.chat-bottom{display:none;gap:14px;justify-content:space-between;
  align-items:stretch;margin:10px 0}
body.chatcols .chat-bottom{display:flex}
.ad-side{flex:0 0 auto;align-self:flex-start} /* vierkanten in de hoeken */
/* middenstrook = meerdere compacte blokken naast elkaar
   (eigenaar 30-9: online/pagina's/blogs/polls/foto's/krabbels).
   Grid + max-height 250px = precies even hoog als de vierkante
   banners; blokken die niet passen worden netjes afgekapt ipv
   de rij hoger te maken ("het moet passen") */
.chat-mid{flex:1;min-width:0;display:grid;gap:10px;max-height:250px;
  overflow:hidden;grid-auto-flow:dense;
  grid-template-columns:repeat(auto-fill,minmax(165px,1fr));
  /* exact 2 rijen van ~120px; blokken daarbuiten krijgen rijhoogte 0
     (grid-auto-rows:0) i.p.v. dat 1fr de 250px over 3+ rijen verdeelt —
     anders werd elke rij ~77px toen er 9 blokken waren (eigenaar 2-10) */
  grid-template-rows:repeat(2,minmax(0,1fr));
  grid-auto-rows:0}
.chatblk{min-width:0;max-height:250px}
.chatblk-fotos{grid-column:span 2}
/* rijhoogte ≈120px → blokken moeten in ~86px body passen (4 .hag-
   regels); poll-opties daarom inline naast elkaar ipv onder elkaar
   (eigenaar 2-10: "laatste regel valt weg" + Stem-knop was afgekapt) */
.chatblk-poll .crot-body{padding:2px 6px;font-size:11px;line-height:1.4}
.chatblk-poll .poll-opt{display:inline-block;margin:1px 8px 1px 0;
  white-space:nowrap}
.chatblk-poll .poll>div{margin-top:2px!important}
.chatblk-poll input[type=submit]{padding:0 8px;font-size:11px}
/* datum-chip in de strook compacter (border+padding maakten de
   agenda-rijen te hoog -> laatste regel viel weg) */
.crot-body .hag-d{min-width:36px;padding:0 3px;font-size:10px}
.crot-body .hag{gap:5px}
.crot-fotos{flex-wrap:nowrap}
.crot-body .hkrab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%;vertical-align:bottom}
.crot-box{box-sizing:border-box;overflow:hidden;
  background:rgba(253,249,252,.92);border:1px solid #ead9e6;
  border-radius:6px}
.crot-body{padding:4px 8px;font-size:12px;line-height:1.5}
.crot-body .hag{padding:1px 0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.crot-ava{width:18px;height:18px;border-radius:4px;object-fit:cover}
.crot-fotos{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap}
.crot-fotos a{flex:0 0 auto}
.crot-fotos img{width:82px;height:82px;object-fit:cover;border-radius:6px}
.crot-leden{display:flex;flex-direction:column;gap:3px}
.crot-lid{display:inline-flex;align-items:center;gap:6px;color:#4a3344}
.crot-lid img{width:26px;height:26px;object-fit:cover;border-radius:6px}
.crot-lid span{max-width:130px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

/* leader: zichtbaar in normaal én breedbeeld; uit bij chatcols */
.chat-widead{display:flex;justify-content:center;margin:10px 0}
body.chatcols .chat-widead{display:none}
.chat-widead img{max-width:100%;height:auto;display:block}
.chat-mobad{display:none;justify-content:center;margin:10px 0}

@media(max-width:700px){
  .chat-frame{height:calc(100vh - 250px);min-height:340px}
  .chat-bottom,.chat-widead{display:none!important}
  .chat-mobad{display:flex!important}
  .chat-ctl{display:none}  /* vensterknoppen zinloos op mobiel */
}

/* PJAX: .pjax-view is een pure transport-wrapper — display:contents
   laat de geïmporteerde .columns/.hgrid-wrap layout-technisch direct
   onder de echte parent hangen, anders breekt het grid (eigenaar
   30-9: "raster voorpagina stuk na terugnavigeren") */
.pjax-view{display:contents}

/* PJAX: zwevende "chat loopt"-chip onderin als de chat-view
   verborgen is terwijl je elders op de site surft */
.chat-pill{position:fixed;right:14px;bottom:14px;z-index:9990;
  background:#782f6d;color:#fff;border:0;border-radius:20px;
  padding:9px 16px;font:13px Verdana,Geneva,sans-serif;cursor:pointer;
  box-shadow:0 3px 10px rgba(120,47,109,.4)}
.chat-pill:hover{background:#5e2555}