/* 23.10.2026 — FinPort Sohbet (public/js/sohbet.js). WhatsApp grup düzeni; renkler temanın değişkenlerinden. */
:root { --sh-ben: #d9fdd3; --sh-onlar: #ffffff; --sh-zemin: #efeae2; --sh-mavi: #34b7f1; }
[data-theme="dark"] { --sh-ben: #144d37; --sh-onlar: #1f2c34; --sh-zemin: #0b141a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sh-ben: #144d37; --sh-onlar: #1f2c34; --sh-zemin: #0b141a; } }

.sh-panel { position:fixed; top:0; right:0; bottom:0; z-index:70; width:min(460px, 100vw); display:flex; flex-direction:column;
  background:var(--sh-zemin); border-left:1px solid var(--border); box-shadow:-12px 0 40px rgba(0,0,0,.18); color:var(--text-primary); }
.sh-bas { display:flex; align-items:center; gap:8px; padding:10px 10px 10px 14px; background:var(--surface-1); border-bottom:1px solid var(--border);
  padding-top:max(10px, env(safe-area-inset-top)); }
.sh-grup-ik { width:38px; height:38px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; }
.sh-bas-yazi { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.sh-alt { font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-alt.yaziyor { color:var(--good); font-style:italic; }
.sh-ikon { background:none; border:none; font-size:19px; padding:6px 8px; border-radius:50%; cursor:pointer; color:var(--text-secondary); line-height:1; flex:none; }
.sh-ikon:hover { background:var(--surface-3); }
.sh-ikon[hidden] { display:none; }
.sh-gonder { background:var(--good); color:#fff; width:40px; height:40px; font-size:17px; }
.sh-gonder:hover { background:var(--good); filter:brightness(1.08); }

.sh-arama { background:var(--surface-1); border-bottom:1px solid var(--border); padding:8px; max-height:45vh; overflow-y:auto; }
.sh-arama[hidden] { display:none; }
.sh-ara-giris { width:100%; box-sizing:border-box; padding:8px 12px; font-size:16px; border:1px solid var(--border); border-radius:18px; background:var(--surface-2); color:var(--text-primary); }
.sh-ara-oge { display:block; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--border); padding:8px 6px; cursor:pointer; color:var(--text-primary); font-size:13.5px; }
.sh-ara-oge:hover { background:var(--surface-3); }

.sh-sabit { display:flex; align-items:center; gap:8px; padding:7px 14px; background:var(--surface-1); border-bottom:1px solid var(--border); font-size:13px; }
.sh-sabit[hidden] { display:none; }
.sh-sabit-ic { flex:1; min-width:0; text-align:left; background:none; border:none; cursor:pointer; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }

.sh-liste { flex:1; overflow-y:auto; padding:8px 10px 12px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.sh-gun, .sh-okunmamis { text-align:center; margin:10px 0 6px; }
.sh-gun span { display:inline-block; background:var(--surface-1); color:var(--text-secondary); font-size:12px; padding:4px 10px; border-radius:8px; box-shadow:0 1px 1px rgba(0,0,0,.08); }
.sh-okunmamis span { display:inline-block; background:color-mix(in srgb, var(--accent) 16%, var(--surface-1)); color:var(--text-primary); font-size:12px; padding:4px 14px; border-radius:8px; }
.sh-bilgi { text-align:center; font-size:11.5px; color:var(--text-secondary); background:color-mix(in srgb, var(--warn) 18%, var(--surface-1)); margin:6px auto 10px; padding:6px 10px; border-radius:8px; max-width:320px; }
.sh-bos { text-align:center; color:var(--text-secondary); padding:60px 20px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.sh-eski { display:block; margin:6px auto 10px; background:var(--surface-1); border:1px solid var(--border); border-radius:14px; padding:5px 12px; font-size:12.5px; cursor:pointer; color:var(--accent); }

.sh-satir { display:flex; align-items:flex-end; gap:6px; margin-top:2px; }
.sh-satir.bas { margin-top:8px; }
.sh-satir.ben { justify-content:flex-end; }
.sh-avatar { width:28px; height:28px; border-radius:50%; color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.sh-balon { position:relative; max-width:min(78%, 340px); background:var(--sh-onlar); border-radius:10px; padding:6px 9px 18px; box-shadow:0 1px 1px rgba(0,0,0,.1);
  font-size:14.5px; line-height:1.38; word-wrap:break-word; overflow-wrap:anywhere; transition:background .3s; -webkit-user-select:text; user-select:text; }
.sh-satir.bas .sh-balon:not(.ben) { border-top-left-radius:2px; }
.sh-satir.bas .sh-balon.ben { border-top-right-radius:2px; }
.sh-balon.ben { background:var(--sh-ben); }
.sh-balon.bana:not(.ben) { box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.sh-balon.silik .sh-metin { font-style:italic; color:var(--text-secondary); }
.sh-balon.vurgu { background:color-mix(in srgb, var(--warn) 45%, var(--sh-onlar)); }
.sh-ad { font-size:12.5px; font-weight:600; margin-bottom:2px; }
.sh-metin { white-space:pre-wrap; }
.sh-metin a { color:var(--accent); }
.sh-etiket { color:var(--accent); font-weight:600; }
.sh-etiket.ben { background:color-mix(in srgb, var(--accent) 16%, transparent); border-radius:4px; padding:0 2px; }
.sh-meta { position:absolute; right:8px; bottom:3px; font-size:10.5px; color:var(--text-secondary); white-space:nowrap; display:flex; gap:3px; align-items:center; }
.sh-tik { letter-spacing:-3px; margin-left:2px; }
.sh-tik.mavi { color:var(--sh-mavi); }
.sh-balon .sh-metin::after { content:''; display:inline-block; width:62px; }   /* saat/tik için yer */
.sh-alinti { display:block; width:100%; text-align:left; border:none; border-left:4px solid var(--accent); background:color-mix(in srgb, var(--text-primary) 7%, transparent);
  border-radius:6px; padding:4px 8px; margin:2px 0 5px; font-size:12.5px; color:var(--text-primary); cursor:pointer; }
.sh-alinti div { color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; }
.sh-resim { display:block; max-width:100%; max-height:300px; border-radius:7px; margin:2px 0 4px; cursor:zoom-in; background:var(--surface-3); }
.sh-ses { display:flex; align-items:center; gap:6px; margin:2px 0 4px; }
.sh-ses audio { height:36px; max-width:230px; }
.sh-dosya { display:flex; align-items:center; gap:10px; padding:8px; margin:2px 0 4px; background:color-mix(in srgb, var(--text-primary) 6%, transparent); border-radius:8px;
  color:var(--text-primary); text-decoration:none; font-size:13px; }
.sh-dosya-ik { font-size:26px; }
.sh-kucuk { font-size:11.5px; color:var(--text-secondary); }
.sh-tepkiler { position:absolute; bottom:-13px; left:8px; display:flex; gap:3px; }
.sh-balon.ben .sh-tepkiler { left:auto; right:8px; }
.sh-balon:has(.sh-tepkiler) { margin-bottom:14px; }
.sh-tepki { background:var(--surface-1); border:1px solid var(--border); border-radius:12px; padding:1px 6px; font-size:12.5px; cursor:pointer; color:var(--text-primary); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.sh-tepki.benim { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface-1)); }
.sh-menu-ac { position:absolute; top:2px; right:4px; background:var(--sh-onlar); border:none; border-radius:50%; width:22px; height:22px; font-size:13px; line-height:1;
  color:var(--text-secondary); cursor:pointer; opacity:0; transition:opacity .15s; }
.sh-balon.ben .sh-menu-ac { background:var(--sh-ben); }
.sh-balon:hover .sh-menu-ac { opacity:1; }
@media (hover: none) { .sh-menu-ac { display:none; } }

.sh-menu { position:absolute; z-index:5; min-width:210px; background:var(--surface-1); border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 32px rgba(0,0,0,.22);
  padding:6px 0; display:flex; flex-direction:column; }
.sh-menu > button { background:none; border:none; text-align:left; padding:9px 14px; font-size:14px; cursor:pointer; color:var(--text-primary); }
.sh-menu > button:hover { background:var(--surface-3); }
.sh-menu-tepki { display:flex; gap:2px; padding:4px 8px 6px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.sh-menu-tepki button { background:none; border:none; font-size:22px; padding:3px; cursor:pointer; border-radius:8px; transition:transform .1s; }
.sh-menu-tepki button:hover { transform:scale(1.25); background:var(--surface-3); }
.sh-sil { color:var(--bad) !important; }
.sh-onay { padding:14px; gap:12px; font-size:14px; }
.sh-onay-dug { display:flex; justify-content:flex-end; gap:8px; }
.sh-onay-dug button { background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:6px 14px; cursor:pointer; color:var(--text-primary); }
.sh-bilgi-kutu { width:min(340px, calc(100% - 24px)); max-height:70%; overflow-y:auto; padding:10px 14px; gap:4px; }
.sh-bilgi-bas { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.sh-bilgi-bas button { background:none; border:none; font-size:16px; cursor:pointer; color:var(--text-secondary); }
.sh-bilgi-k { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13.5px; }
.sh-bilgi-k .sh-kucuk { margin-left:auto; }

.sh-oneri { background:var(--surface-1); border-top:1px solid var(--border); max-height:220px; overflow-y:auto; }
.sh-oneri[hidden] { display:none; }
.sh-oneri button { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; padding:8px 14px; cursor:pointer; text-align:left; font-size:14px; color:var(--text-primary); }
.sh-oneri button:hover { background:var(--surface-3); }
.sh-serit { background:var(--surface-2); border-top:1px solid var(--border); padding:6px 10px; display:flex; flex-direction:column; gap:6px; }
.sh-serit[hidden] { display:none; }
.sh-serit-ic { display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--surface-1); border-left:4px solid var(--accent); border-radius:6px; padding:6px 10px; font-size:13px; }
.sh-serit-ic button { background:none; border:none; font-size:16px; cursor:pointer; color:var(--text-secondary); }
.sh-hata { background:color-mix(in srgb, var(--bad) 14%, var(--surface-1)); color:var(--text-primary); padding:6px 12px; font-size:13px; }
.sh-hata[hidden] { display:none; }
.sh-yaz, .sh-kayit { display:flex; align-items:flex-end; gap:6px; padding:8px; background:var(--surface-1); border-top:1px solid var(--border);
  padding-bottom:max(8px, env(safe-area-inset-bottom)); }
.sh-giris { flex:1; resize:none; border:1px solid var(--border); border-radius:20px; padding:9px 14px; font:inherit; font-size:16px; line-height:1.35; max-height:140px;
  background:var(--surface-2); color:var(--text-primary); outline:none; }
.sh-giris:focus { border-color:var(--accent); }
.sh-kayit { align-items:center; }
.sh-kayit-nokta { width:10px; height:10px; border-radius:50%; background:var(--bad); animation:sh-nabiz 1s infinite; margin-left:8px; }
.sh-kayit-sure { font-variant-numeric:tabular-nums; font-weight:600; }
.sh-kayit .sh-kucuk { flex:1; }
@keyframes sh-nabiz { 50% { opacity:.25; } }
.tb-rozet.sh-rozet-etiket { background:var(--accent); }
@media (max-width: 600px) { .sh-panel { width:100vw; border-left:none; } body.sh-acik { overflow:hidden; } }

/* 23.10 — Grup bilgisi (başlığa dokununca) */
.sh-bas-dugme { display:flex; align-items:center; gap:10px; flex:1; min-width:0; background:none; border:none; padding:0; cursor:pointer; text-align:left; color:inherit; font:inherit; }
.sh-grup { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; background:var(--surface-2); }
.sh-grup-govde { flex:1; overflow-y:auto; padding-bottom:max(16px, env(safe-area-inset-bottom)); overscroll-behavior:contain; }
.sh-grup-ust { display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 16px 18px; background:var(--surface-1); margin-bottom:8px; }
.sh-grup-ust h3 { margin:6px 0 0; font-size:20px; }
.sh-grup-ik-buyuk { width:84px; height:84px; font-size:42px; }
.sh-grup-bolum { background:var(--surface-1); padding:12px 16px; margin-bottom:8px; display:flex; flex-direction:column; gap:6px; }
.sh-grup-bolum-bas { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--text-secondary); }
.sh-grup-satir { display:flex; align-items:center; gap:12px; width:100%; background:none; border:none; padding:8px 0; cursor:pointer; text-align:left; color:var(--text-primary); font:inherit; }
.sh-grup-satir:hover { background:var(--surface-3); }
.sh-grup-satir-yazi { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; font-size:14.5px; overflow-wrap:anywhere; }
.sh-grup-satir-yazi a { color:var(--accent); word-break:break-all; font-size:13.5px; }
.sh-avatar-buyuk { width:40px; height:40px; font-size:14px; position:relative; }
.sh-cevrimici-nokta { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%; background:var(--good); border:2px solid var(--surface-1); }
.sh-yesil { color:var(--good) !important; }
.sh-yonetici { font-size:11px; color:var(--good); border:1px solid var(--good); border-radius:6px; padding:2px 6px; white-space:nowrap; }
.sh-sekmeler { display:flex; gap:4px; border-bottom:1px solid var(--border); }
.sh-sekmeler button { flex:1; background:none; border:none; border-bottom:2px solid transparent; padding:8px 4px; font-size:13px; cursor:pointer; color:var(--text-secondary); }
.sh-sekmeler button.on { color:var(--good); border-bottom-color:var(--good); font-weight:600; }
.sh-medya-izgara { display:grid; grid-template-columns:repeat(3, 1fr); gap:3px; margin-top:6px; }
.sh-medya-izgara img, .sh-medya-video { width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; cursor:pointer; background:var(--surface-3); border:none; font-size:28px; }
.sh-kaydet { background:var(--good) !important; color:#fff !important; border-color:var(--good) !important; }
.sh-panel .sh-menu { z-index:6; }