:root{
  --bg: #ffffff;
  --bg-elev: #f6f2ea;
  --bg-elev-2: #ece5d8;
  --line: rgba(28,20,8,0.10);
  --line-strong: rgba(28,20,8,0.20);
  --ink: #1c1408;
  --ink-dim: #5f5344;
  --ink-faint: #7a7062;
  --gold: #e3a83b;
  /* --gold, parlak haliyle SADECE buton/rozet ARKA PLANI (uzerinde koyu
     metin var) veya kucuk dekoratif vurgular icin kullanilir - beyaz
     sayfa uzerinde DUZ METIN olarak kullanilirsa kontrasti yetersiz
     kalir (~2:1). Duz metin/link olarak kullanildigi her yerde bunun
     yerine daha koyu --gold-text kullanilir (WCAG AA icin ~5.5:1). */
  --gold-text: #8a5c1a;
  --gold-dim: rgba(227,168,59,0.14);
  --danger: #c0392b;
  /* .tile.speaking icin ayri bir renk - --danger/--gold gibi baska
     amaclarla (metin kontrasti, buton bg) paylasilmiyor, sadece
     konusan kisi cercevesi icin. */
  --speaking: #34c759;
  --radius: 14px;
  /* Video uzerindeki (kamera goruntusu) etiketler icin HEP acik renk -
     bu ikisi genel tema (acik/koyu) neyse ondan BAGIMSIZDIR, cunku
     arka planlari her zaman video uzerine bindirilmis koyu/yari-saydam
     kutulardir (bkz. .live-badge, .tile .tname vb.). */
  --overlay-ink: #f5f1e8;
  --overlay-ink-dim: #cbc3b5;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: radial-gradient(1200px 800px at 15% -10%, #fff4de 0%, var(--bg) 55%);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
}
.mono{font-family:'JetBrains Mono', monospace; letter-spacing:0.01em;}
.serif{font-family:'Fraunces', serif;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  flex-wrap:wrap; gap:12px;
}
.brand{display:flex; align-items:baseline; gap:8px;}
.brand .mark{
  width:22px; height:22px; border-radius:6px;
  background: linear-gradient(135deg, var(--gold), #c98a2a);
  display:inline-block;
}
.brand-name{font-family:'Fraunces', serif; font-weight:700; font-size:20px; letter-spacing:-0.01em;}
.brand-sub{color:var(--ink-faint); font-size:12px;}
.btn{
  border:1px solid var(--line-strong); background:var(--bg-elev);
  color:var(--ink); padding:10px 16px; border-radius:10px;
  font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px;
  transition: border-color .15s, background .15s, transform .1s;
}
.btn:hover{border-color: var(--gold); background: var(--bg-elev-2);}
.btn:active{transform: scale(0.98);}
.btn:disabled{opacity:0.5; cursor:not-allowed;}
.btn-primary{background: var(--gold); border-color: var(--gold); color:#1c1408;}
.btn-primary:hover{background:#edb753; border-color:#edb753;}
.btn-ghost{background:transparent; border-color:transparent;}
.btn-ghost:hover{background: var(--bg-elev); border-color: var(--line);}
.btn-danger{background:transparent; border-color:var(--line-strong); color:var(--danger);}
.btn-danger:hover{background:rgba(192,57,43,0.12); border-color:var(--danger);}
.btn-icon{width:40px; height:40px; padding:0; justify-content:center; border-radius:50%;}
.btn-icon.active{background:var(--gold); border-color:var(--gold); color:#1c1408;}
select.btn{appearance:auto; -webkit-appearance:auto;}

/* ---------- Lobby ---------- */
.lobby{max-width:920px; margin:0 auto; padding: 36px 24px 80px;}
.lobby-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap;}
.lobby-head h1{font-family:'Fraunces', serif; font-weight:600; font-size:28px; margin:0 0 6px;}
.lobby-head p{color:var(--ink-dim); margin:0; font-size:14px;}
.lobby-head p.lobby-warning{color:var(--danger); margin:6px 0 0; font-size:13px; font-weight:600;}
.lobby-warning strong{text-transform:uppercase; letter-spacing:0.04em;}
.section-label{
  display:flex; align-items:center; gap:10px;
  color: var(--ink-faint); font-size:12px; text-transform:uppercase; letter-spacing:0.08em;
  margin: 30px 0 12px;
}
.section-label::after{content:''; flex:1; height:1px; background:var(--line);}
.empty-hint{color:var(--ink-faint); font-size:14px; padding:24px 4px;}
.locked-notice{padding:60px 4px; text-align:center;}
.locked-notice h2{font-family:'Fraunces', serif; font-size:24px; margin:0 0 10px;}
.locked-notice .hint{color:var(--ink-faint); font-size:14px; margin:0;}

.entry{display:flex; gap:18px; padding:18px 4px; border-bottom:1px solid var(--line); background: rgba(28,20,8,0.06); transition: background .15s;}
.entry:hover{background: rgba(28,20,8,0.09);}
.entry-no{color: var(--ink-faint); font-size:13px; padding-top:3px; min-width:52px;}
.entry-body{flex:1; min-width:0;}
.entry-title{font-family:'Fraunces', serif; font-size:18px; font-weight:600; margin:0 0 6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--danger); display:inline-block; position:relative;}
.badge{font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:0.04em;}
.badge-live{background:rgba(192,57,43,0.14); color:var(--danger);}
.badge-mine{background:var(--gold-dim); color:var(--gold-text);}
.entry-desc{color:var(--ink-dim); font-size:14px; margin:0 0 8px; line-height:1.5;}
.entry-meta{color:var(--ink-faint); font-size:13px; display:flex; gap:14px; align-items:center;}
.entry-meta .author{color:var(--gold-text);}
.entry-actions{display:flex; align-items:center; gap:10px; padding-top:4px;}
.viewer-count{color:var(--ink-faint); font-size:13px; white-space:nowrap;}

/* ---------- Modal ---------- */
.overlay{position:fixed; inset:0; background:rgba(10,8,14,0.6); backdrop-filter: blur(3px); display:none; align-items:center; justify-content:center; z-index:50; padding:20px;}
.overlay.open{display:flex;}
.modal{background: var(--bg-elev); border:1px solid var(--line-strong); border-radius: var(--radius); width:100%; max-width:440px; padding:26px; box-shadow: 0 20px 60px rgba(0,0,0,0.18);}
.modal h2{font-family:'Fraunces', serif; font-size:22px; margin:0 0 4px;}
.modal .hint{color:var(--ink-faint); font-size:13px; margin:0 0 20px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; color:var(--ink-dim); margin-bottom:6px; font-weight:600;}
.field input[type=text], .field textarea{width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:10px; padding:11px 12px; color:var(--ink); font-family:inherit; font-size:14px;}
.field textarea{resize:vertical; min-height:60px;}
.field input:focus, .field textarea:focus{outline:2px solid var(--gold-text); outline-offset:1px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px;}
.error-text{color:var(--danger); font-size:13px; margin:8px 0 0;}

/* ---------- Room view ---------- */
/* overflow-x:hidden yatay tasmayi (asil Firefox sorunu, kaynaginda -
   grid track/min-width duzeltmeleriyle - zaten cozuldu, bu sadece ek
   guvenlik agi) engeller. Dikeyde ise BILINCLI olarak overflow:hidden
   DEGIL overflow-y:auto kullaniliyor - beklenmedik bir durumda (ör.
   mobilde klavye acilmasi, cok uzun bir baslik) icerik SESSIZCE
   kirpilip erisilemez olmak yerine scroll edilerek erisilebilir kalsin. */
.room-wrap{height:100vh; display:flex; flex-direction:column; overflow-x:hidden; overflow-y:auto;}
.room-topbar{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--line); gap:16px; flex-wrap:wrap;}
.room-title-wrap{display:flex; align-items:center; gap:12px; min-width:0;}
.room-title{font-family:'Fraunces', serif; font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.room-id{color:var(--ink-faint); font-size:12px;}
.room-main{flex:1; display:flex; min-height:0;}
.stage{flex:1; display:flex; flex-direction:column; padding:18px; gap:14px; min-width:0;}

/* Tek grid kapsayicisi - Teams/Google Meet tarzi, HERKES esit boyutta
   kutu. "Ana yayinci" ozel/buyuk DEGIL. Grid'e SADECE yayinci + onayli
   sahne katilimcilari girer (maks 6 kisi - MAX_STAGE_PARTICIPANTS+1);
   sadece izleyenler grid'de yer almaz, sohbet/katilimci listesinden
   takip edilir (bkz. room.js updateViewerCount). Boyut/dizilim (satir/
   sutun sayisi) room.js -> updateGridLayout() ile katilimci sayisina
   gore ayarlanir: N=1 -> 1x1, N=2 -> 2 sutun 1 satir, N=3-4 -> 2x2,
   N=5-6 -> 3 sutun 2 satir, N=7-9 -> 3x3, N=10+ -> otomatik
   ceil(sqrt(N)). Grid satir/sutunlari 1fr oldugu icin TASMA/SCROLL
   olmaz, kutular container'a gore otomatik kuculur/buyur - object-fit:
   cover ile video icerigi kirpilarak kutuyu bozulmadan doldurur. */
.stage-row{flex:1; display:flex; flex-direction:column; gap:10px; min-height:0;}
.live-overlay{position:absolute; z-index:5; top:10px; left:10px; right:10px; display:flex; align-items:center; gap:8px; pointer-events:none; flex-wrap:wrap;}
.live-badge{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--overlay-ink); background:rgba(0,0,0,0.45); padding:6px 12px; border-radius:20px; min-width:0; flex:0 1 auto; overflow:hidden;}
.bcast-name-room{font-weight:600; color:var(--overlay-ink); margin-left:2px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.conn-status{background:rgba(0,0,0,0.4); color:var(--overlay-ink); padding:6px 12px; border-radius:20px; font-size:12px; margin-left:auto; flex:0 0 auto;}

/* Yayinci sol yarida sabit buyuk kutu, sahne katilimcilari sag yarida
   kendi aralarinda ayri bir grid'e giriyor (bkz. computeGridDims - ayni
   N->satir/sutun tablosu, ama sadece sahne katilimcisi sayisina gore). */
.video-area{flex:1; display:flex; gap:12px; min-height:0; position:relative;}
.video-area.no-stage .video-grid{display:none;}
.video-area.no-stage .bcast-tile{flex:1 1 100%;}
.bcast-tile{flex:1 1 50%; transition:flex-basis .3s ease;}
.video-grid{flex:1 1 50%; display:grid; gap:12px; min-height:0; position:relative; transition:grid-template-columns .3s ease, grid-template-rows .3s ease, flex-basis .3s ease;}
.tile{width:100%; height:100%; border-radius:var(--radius); background:var(--bg-elev); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; transition:background .15s ease;}
.tile video{width:100%; height:100%; object-fit:cover;}
/* Sadece yayincinin/katilimcinin KENDI onizlemesi icin - dogal ayna
   hissi versin diye (Zoom/FaceTime'daki self-view mantigi). Karsi
   tarafa giden/gelen gercek goruntuye HIC dokunmaz, sadece bu tarayicida
   goruntulenen video elementine class ile eklenir (bkz. room.js attachTrack). */
.local-mirror{transform:scaleX(-1);}
/* border-width DEGISTIRILMEZ (hep 1px kalir) - box-sizing:border-box
   yuzunden kalinlasan bir border, kutunun ic (video) alanini kucultup
   object-fit:cover'in goruntuyu her konusma baslayip bitince yeniden
   olceklendirmesine (goruntunun "oynamasi/zipmasi") yol aciyordu. Kalin
   cerceve hissi border yerine box-shadow ile veriliyor - o, layout'u
   ETKILEMEDEN (kutu boyutu sabit kalir) disaridan cizilir. */
.tile.speaking{border-color:var(--speaking); box-shadow:0 0 0 1px var(--speaking), 0 0 6px rgba(52,199,89,0.45); transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;}
.tile .avatar-glow{width:72px; height:72px; border-radius:50%; background:linear-gradient(160deg, var(--gold), #8a5a1c); display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-size:26px; font-weight:700; color:#1c1408;}
.tile .bottom-labels{position:absolute; bottom:8px; left:8px; right:8px; z-index:2; display:flex; flex-direction:column; gap:4px;}
.tile .tname{display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--overlay-ink); font-family:'Manrope'; background:rgba(0,0,0,0.45); padding:4px 8px; border-radius:6px; min-width:0;}
.tile .tname-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.tile .tname-icon{flex:0 0 auto; display:flex; color:var(--overlay-ink-dim);}
.tile .room-title-strip{font-size:11px; font-weight:600; color:var(--overlay-ink-dim); font-family:'Manrope'; background:rgba(0,0,0,0.45); padding:3px 8px; border-radius:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tile .gone-notice{position:absolute; top:8px; left:8px; right:8px; background:rgba(192,57,43,0.85); color:var(--overlay-ink); font-size:11px; font-weight:700; padding:4px 8px; border-radius:6px; z-index:3; text-align:center;}

.fullscreen-btn{position:absolute; top:8px; right:8px; z-index:4; width:30px; height:30px; border-radius:8px; background:rgba(0,0,0,0.45); border:none; color:var(--overlay-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s ease;}

.handover-incoming-banner{
  position:absolute; z-index:8; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--bg-elev); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:20px 24px; display:flex; flex-direction:column; align-items:center; gap:14px;
  box-shadow:0 20px 60px rgba(0,0,0,0.35); max-width:320px; text-align:center;
}
.handover-incoming-banner span{font-size:14px; color:var(--ink); font-weight:600;}
.fullscreen-btn:hover{background:rgba(0,0,0,0.7);}

/* Sohbet giris satirindaki kalp/emoji butonlari - direkt sohbet mesaji
   olarak gonderir (bkz. sendChatMessage), video uzerinde degil. .btn-icon
   (40px) yerine daha kucuk, ozel bir boyut kullanilir - aksi halde giris
   metin kutusu iki ek buton yuzunden gereksiz daralirdi. flex:0 0 auto ile
   satirin gerdigi (stretch) yukseklige uymasi da engellenir (aksi halde
   oval/yumurta gorunumune yol aciyordu). */
.chat-react-btn{flex:0 0 auto; width:32px; height:32px; border-radius:50%; border:1px solid var(--line-strong); background:var(--bg-elev); color:var(--ink); font-size:15px; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s ease;}
.chat-react-btn:hover{background:var(--bg-elev-2); border-color:var(--gold);}
.reaction-picker-wrap{position:relative; flex:0 0 auto; display:flex; align-items:center;}
.reaction-picker{position:absolute; bottom:40px; left:0; width:260px; max-height:280px; overflow-y:auto; background:var(--bg-elev-2); border:1px solid var(--line-strong); border-radius:12px; padding:8px; box-shadow:0 8px 24px rgba(0,0,0,0.15); z-index:5;}
.emoji-cat-label{font-size:11px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; padding:6px 4px 4px;}
.emoji-cat-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:2px;}
.reaction-picker button{width:34px; height:34px; border-radius:8px; border:none; background:transparent; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.reaction-picker button:hover{background:rgba(28,20,8,0.08);}


.controls{display:flex; align-items:center; justify-content:center; gap:10px; padding:6px 0 2px; flex-wrap:wrap;}
.controls .divider{width:1px; height:26px; background:var(--line-strong); margin:0 6px;}

.chat-panel{width:320px; flex:0 0 320px; border-left:1px solid var(--line); display:flex; flex-direction:column; background:var(--bg-elev); min-height:0;}
.chat-head{padding:16px 18px; border-bottom:1px solid var(--line); font-size:14px; display:flex; align-items:center; justify-content:space-between;}
/* --ink-faint bu boyutta WCAG kontrastini gecemiyordu (~3.2:1, gereken
   4.5:1) - --ink-dim'e cevrildi (~6.8:1). "Baslik" hissi sonuklukten
   degil buyuk harf + harf araligindan geliyor. */
.chat-head-label{color:var(--ink-dim); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:12.5px;}
.chat-head .count{color:var(--ink-faint); font-weight:500; font-size:12px;}
.chat-messages{flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:14px;}
.msg .who{font-size:12.5px; font-weight:700; margin-bottom:2px;}
.msg .who-time{color:var(--ink-faint); font-weight:500; font-size:11px; margin-left:6px;}
.msg .body{font-size:14px; line-height:1.45; color:var(--ink); word-break:break-word;}
.msg .body img.chat-image{max-width:160px; height:auto; border-radius:8px; display:block; border:1px solid var(--line);}
.chat-link{color:var(--gold-text); text-decoration:underline;}
.chat-link:hover{color:var(--ink);}
.msg.system{color:var(--ink-faint); font-size:12.5px; font-style:italic;}
.chat-input-row{display:flex; align-items:center; gap:6px; padding:14px; border-top:1px solid var(--line); min-width:0;}
.chat-input-row input{flex:1; min-width:0; background:var(--bg); border:1px solid var(--line-strong); border-radius:10px; padding:10px 12px; color:var(--ink); font-family:inherit; font-size:14px;}
.chat-input-row input:focus{outline:2px solid var(--gold-text); outline-offset:1px;}
.send-btn{flex:0 0 auto; width:40px; height:40px; border-radius:10px; border:1px solid var(--gold); background:var(--gold); color:#1c1408; display:flex; align-items:center; justify-content:center;}

.participant-list-box{border-bottom:1px solid var(--line); background:var(--bg);}
.participant-list-head{padding:16px 18px; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition:background .12s ease;}
.participant-list-head:hover{background:rgba(28,20,8,0.04);}
.participant-list-head .count{color:var(--ink-faint); font-weight:500; font-size:12px;}
.participant-list-head svg{color:var(--ink-faint); transition:transform .15s ease; flex-shrink:0;}
.participant-list-head.open svg{transform:rotate(180deg);}
.participant-list{display:flex; flex-direction:column; gap:8px; padding:0 18px 16px; max-height:180px; overflow-y:auto;}
.participant-group-head{color:var(--ink-faint); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;}
.participant-row{display:flex; align-items:center; font-size:13px; padding-left:2px; gap:8px;}
.participant-row .pname{color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pname-link{color:inherit; text-decoration:none;}
.pname-link:hover{text-decoration:underline; color:var(--gold-text);}
.participant-row.you .pname{color:var(--gold-text); font-weight:600;}
.kick-btn{flex:0 0 auto; width:20px; height:20px; border-radius:6px; border:none; background:transparent; color:var(--ink-faint); font-size:12px; line-height:1; cursor:pointer; transition:background .12s ease, color .12s ease;}
.kick-btn:hover{background:rgba(192,57,43,0.16); color:var(--danger);}
.kick-btn:disabled{opacity:0.4; cursor:default;}
.mic-toggle-btn{flex:0 0 auto; width:20px; height:20px; border-radius:6px; border:none; background:transparent; font-size:11px; line-height:1; cursor:pointer; transition:background .12s ease;}
.mic-toggle-btn:hover{background:rgba(28,20,8,0.07);}
.mic-toggle-btn:disabled{opacity:0.4; cursor:default;}
.offstage-btn{flex:0 0 auto; width:22px; height:22px; border-radius:6px; border:none; background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s ease;}
.offstage-btn:hover{background:rgba(28,20,8,0.07);}
.offstage-btn:disabled{opacity:0.4; cursor:default;}
.mic-muted-badge{flex:0 0 auto; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:11px; opacity:0.6; cursor:help;}

.stage-requests{border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:10px; padding:14px 18px;}
.stage-requests-list{display:flex; flex-direction:column; gap:8px;}
.stage-request-row{display:flex; align-items:center; justify-content:space-between; font-size:13px;}
.stage-request-row .name{color:var(--gold-text); font-weight:600;}
.stage-request-row .actions{display:flex; gap:6px;}
.stage-request-row .actions .btn{padding:4px 10px; font-size:12px;}

.chat-toggle-mobile{display:none;}
.chat-close-mobile{display:none;}

/* Video/sidebar duzeni icin AYRI, daha genis bir esik (1100px) - sohbet
   panelinin mobil (fixed overlay) davranisindan bagimsiz. Sebep: masaustu
   penceresi daraltilinca (tam telefon genisligine gelmeden) "yari genislik
   + grid" duzeni cok sikisiyordu, responsive degildi. 1100px'in altinda
   katilimcilar sagda grid degil, altta yatay kayan bir serit olur - ayni
   telefondaki gibi. display:grid'i EZMEK icin display:flex acikca
   yazilmali (aksi halde masaustu kuralindan miras kalirdi). */
@media (max-width: 820px){
  /* Dar ekranda sol/sag (yayinci/sahne) bolunmesi yerini yayinci-ustte,
     sahne-grid'i-altta dikey dizilime birakir - genislik cok daralinca
     yan yana kutular asiri sikisip kullanilamaz hale geliyordu. */
  .video-area{flex-direction:column;}
  /* Dar ekranda canli yayin rozeti + baglanti durumu yan yana sigmiyordu -
     alt alta, kucuk font/padding ile gosteriliyor. */
  .live-overlay{flex-direction:column; align-items:flex-start; gap:6px; right:auto; max-width:calc(100% - 20px);}
  .live-badge{font-size:11px; padding:5px 9px;}
  .conn-status{font-size:11px; padding:5px 9px;}

  .chat-panel{position:fixed; right:0; top:0; bottom:0; z-index:40; transform: translateX(100%); transition: transform .2s ease; box-shadow: -12px 0 30px rgba(0,0,0,0.35);}
  .chat-panel.mobile-open{transform:translateX(0);}
  .chat-toggle-mobile{display:flex;}
  .chat-close-mobile{display:flex;}
  .entry{gap:12px;}
  .entry-no{min-width:38px; font-size:12px;}

  /* Ekran paylasimi mobilde tutarsiz/desteksiz (iOS Safari hic
     desteklemiyor, Android'de kisitli) - masaustunde kalsin, mobilde
     butonu tamamen gizleyelim. */
  #screenBtn, #bScreenBtn{display:none;}
}

svg{display:block;}