@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* Nature.co — Ana Stil Dosyası */
/* Bölümler: Temel → Ekranlar → Bileşenler → Animasyonlar */

/* iOS Standalone PWA — tarayıcı araçlarını gizle */
@media (display-mode: standalone) {
  body { -webkit-user-select: none; }
}
/* iOS Safari standalone safe area */
body {
  padding-top: 0;
  padding-bottom: 0;
}

:root{
  --purple-dark:#22262d;
  --purple:     #2e3440;
  --purple-mid: #404858;
  --aubergine:  #1a1e25;
  --bg:         #1a1e25;
  --bg2:        #22262d;
  --surface:    #2a303c;
  --surface2:   #333c4a;
  --border:     #434c5e;
  --text:       #dde2ea;
  --text-hi:    #ffffff;
  --muted:      #8f9ab0;
  --green:      #2ecc71;
  --blue:       #5b9bd5;
  --red:        #e05555;
  --yellow:     #f0c040;
  --own-bg:     #2a4a7a;
  --incoming-bg:#263045;
  --safe-top:   env(safe-area-inset-top,0px);
  --safe-bot:   env(safe-area-inset-bottom,0px);
  --app-height: 100%;
  /* Tema renk aksanı */
  --accent:     #5b9bd5;
  --accent2:    #2a4a7a;
}

/* ── TEMALAR ── */
[data-theme="dark"] {
  --purple-dark:#22262d; --purple:#2e3440; --purple-mid:#404858;
  --bg:#1a1e25; --bg2:#22262d; --surface:#2a303c; --surface2:#333c4a;
  --border:#434c5e; --text:#dde2ea; --text-hi:#ffffff; --muted:#8f9ab0;
  --accent:#5b9bd5; --accent2:#2a4a7a; --own-bg:#2a4a7a; --incoming-bg:#263045;
}
[data-theme="forest"] {
  --purple-dark:#1e2428; --purple:#252d32; --purple-mid:#2e3840;
  --bg:#1a2025; --bg2:#1e2428; --surface:#252d35; --surface2:#2d3740;
  --border:#384550; --text:#d8e4e0; --text-hi:#f0f8f5; --muted:#7a9a90;
  --accent:#4a9e7a; --accent2:#1f5c46; --own-bg:#1f4a3a; --incoming-bg:#1e2e35;
}
[data-theme="ocean"] {
  --purple-dark:#091520; --purple:#0d2235; --purple-mid:#133452;
  --bg:#091520; --bg2:#0d2235; --surface:#102840; --surface2:#163552;
  --border:#1a3d60; --text:#a8c8e8; --text-hi:#e0f0ff; --muted:#5a8ab0;
  --accent:#29b6f6; --accent2:#01579b; --own-bg:#01579b; --incoming-bg:#0d2a48;
}
[data-theme="sunset"] {
  --purple-dark:#1a0e10; --purple:#2d1620; --purple-mid:#45202e;
  --bg:#1a0e10; --bg2:#2d1620; --surface:#3a1a25; --surface2:#4a2030;
  --border:#5a2a3a; --text:#e8c0c8; --text-hi:#fff0f3; --muted:#a06070;
  --accent:#f06292; --accent2:#880e4f; --own-bg:#880e4f; --incoming-bg:#3d1528;
}
[data-theme="midnight"] {
  --purple-dark:#080810; --purple:#10101e; --purple-mid:#18182e;
  --bg:#080810; --bg2:#10101e; --surface:#151528; --surface2:#1e1e36;
  --border:#282845; --text:#c0c0e0; --text-hi:#f0f0ff; --muted:#6060a0;
  --accent:#9c27b0; --accent2:#4a0072; --own-bg:#4a0072; --incoming-bg:#1a1535;
}
[data-theme="latte"] {
  --purple-dark:#f0ebe3; --purple:#e8e0d4; --purple-mid:#d8cfc2;
  --bg:#f5f0e8; --bg2:#ede5d8; --surface:#e2d8c8; --surface2:#d8ccb8;
  --border:#c8bca8; --text:#3a3028; --text-hi:#1a1410; --muted:#807060;
  --accent:#8b4513; --accent2:#d2691e; --own-bg:#d2691e; --incoming-bg:#c8b898;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-size:15px;}
html,body{height:100%;width:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
/* Android normalizasyon — iOS ile aynı görünüm */
html.is-android, body.is-android {
  font-size: 14px !important;
}
body.is-android .tab-lb { font-size: .6rem !important; }
body.is-android .ws-name, body.is-android .c-header-title { font-size: .92rem !important; }
body.is-android .r-row { padding: 5px 10px !important; }
body.is-android .mb { padding: 3px 32px 3px 32px !important; }
body.is-android .fr-name { font-size: .85rem !important; }
body.is-android .fr-status { font-size: .7rem !important; }
body.is-android .fr-btn { font-size: .72rem !important; padding: 6px 11px !important; }
body.is-android .fr-av { width: 40px !important; height: 40px !important; font-size: .78rem !important; }
body.is-android .screen-title { font-size: 1rem !important; font-weight: 800 !important; }
body.is-android .atab-icon svg { width: 18px !important; height: 18px !important; }
body.is-android .forum-post-title { font-size: .88rem !important; }
body.is-android .ch-title, body.is-android .ch-sub { font-size: .82rem !important; }
body.is-android .msg-text { font-size: .82rem !important; }
body.is-android .r-label { font-size: .78rem !important; }
body.is-android .sec-hdr { font-size: .6rem !important; letter-spacing: .06em !important; }
body.is-android .ws-av { width: 34px !important; height: 34px !important; }

/* ── Yan Dönme Engelleme ── */
#orientationBlock {
  display: none !important;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #141618;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #fff;
}
#orientationBlock .ob-icon {
  font-size: 3rem;
  animation: obRotate 1.5s ease-in-out infinite;
}
#orientationBlock .ob-text {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  text-align: center;
  padding: 0 32px;
}
@keyframes obRotate {
  0%,100% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
}
/* orientation lock disabled — landscape allowed */
@media (orientation: landscape) and (max-width: 1024px) {
  #orientationBlock {
    display: none !important;
  }
}

/* ════════════════════════════════════════════
   🎨 UI STİL SİSTEMİ — Glass / Clean / Vivid
════════════════════════════════════════════ */

/* ── GLASS / AURORA ── */
[data-ui="glass"] {
  --bg:         #0d0b20;
  --bg2:        #13103a;
  --surface:    rgba(255,255,255,.07);
  --surface2:   rgba(255,255,255,.12);
  --border:     rgba(255,255,255,.1);
  --text:       rgba(255,255,255,.85);
  --text-hi:    #ffffff;
  --muted:      rgba(255,255,255,.38);
  --accent:     #6c63ff;
  --accent2:    #a855f7;
  --own-bg:     rgba(108,99,255,.75);
  --purple:     rgba(255,255,255,.05);
  --purple-dark:#0f0c29;
  --purple-mid: rgba(255,255,255,.08);
}
[data-ui="glass"] #roomsScreen,
[data-ui="glass"] #deskRail {
  background: linear-gradient(180deg,#0d0a24 0%,#110e30 100%);
  position: relative;
}
[data-ui="glass"] #roomsScreen::before,
[data-ui="glass"] #deskRail::before {
  content:'';position:absolute;width:250px;height:200px;
  top:-40px;left:-60px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse,rgba(108,99,255,.3) 0%,transparent 70%);
  animation:uiAurora1 9s ease-in-out infinite;
}
[data-ui="glass"] #deskSidebar {
  background: linear-gradient(180deg,#0f0c29 0%,#13103a 100%);
  position: relative; overflow: hidden;
}
[data-ui="glass"] #deskSidebar::before {
  content:'';position:absolute;width:280px;height:200px;
  top:-60px;left:-80px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse,rgba(108,99,255,.22) 0%,transparent 70%);
}
[data-ui="glass"] #deskSidebar::after {
  content:'';position:absolute;width:200px;height:150px;
  bottom:40px;right:-60px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse,rgba(0,200,160,.12) 0%,transparent 70%);
}
[data-ui="glass"] #deskMain { background: linear-gradient(180deg,#0d0b20 0%,#0a091a 100%); }
[data-ui="glass"] .ob {
  background: linear-gradient(135deg,rgba(108,99,255,.75),rgba(90,40,180,.75));
  border: 1px solid rgba(108,99,255,.3);
}
[data-ui="glass"] .inp-box {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
}
[data-ui="glass"] .c-header,
[data-ui="glass"] .ws-header,
[data-ui="glass"] #deskChatHeader {
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(20px);
  border-bottom-color: rgba(255,255,255,.08) !important;
}
[data-ui="glass"] .tab-bar {
  background: transparent;
  backdrop-filter: none;
  border-top-color: rgba(255,255,255,.07);
}
[data-ui="glass"] .login-btn { background: linear-gradient(135deg,#6c63ff,#a855f7); }
[data-ui="glass"] .forum-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
[data-ui="glass"] #deskSidebarHeader { border-bottom-color: rgba(255,255,255,.07); }
@keyframes uiAurora1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(20px,15px) scale(1.1);}}

/* ── Glass emoji picker opak ── */
[data-ui="glass"] #emojiPicker,
[data-ui="glass"] #deskEmojiPicker,
[data-ui="glass"] .picker-body,
[data-ui="glass"] .picker-tabs,
[data-ui="glass"] .gif-search-wrap { background: #0f0c29 !important; }

/* ── CLEAN SLATE ── */
[data-ui="clean"] {
  --bg:         #0e1016;
  --bg2:        #111418;
  --surface:    #181b22;
  --surface2:   #1e2230;
  --border:     #1e2230;
  --text:       #c8d0e0;
  --text-hi:    #e8eaf0;
  --muted:      #4a5268;
  --accent:     #5b9bd5;
  --accent2:    #1d3568;
  --own-bg:     #1d2d4a;
  --purple:     #111418;
  --purple-dark:#0d0f14;
  --purple-mid: #161922;
}
[data-ui="clean"] #deskRail { background: #0d0f14; border-right-color: #181b22; }
[data-ui="clean"] #deskSidebar { background: #111418; border-right-color: #181b22; }
[data-ui="clean"] #deskMain { background: #0e1016; }
[data-ui="clean"] #roomsScreen { background: #0d0f14; }
[data-ui="clean"] .ws-header { background: #111418 !important; border-bottom: 1px solid #181b22 !important; }
[data-ui="clean"] .c-header { background: #111418 !important; border-bottom-color: #181b22 !important; }
[data-ui="clean"] .tab-bar { background: transparent; border-top-color: #181b22; }
[data-ui="clean"] .ob { background: #1d2d4a; border-radius: 14px 3px 14px 14px; }
[data-ui="clean"] .inp-box { background: #181b22; border-color: #1e2230; }
[data-ui="clean"] .r-row { border-radius: 6px; margin: 1px 6px; }
[data-ui="clean"] .r-row.act { background: #161c2a; }
[data-ui="clean"] .forum-card { background: #111418; border-color: #1e2230; }
[data-ui="clean"] .login-btn { background: #1d3568; }
[data-ui="clean"] #deskSidebarHeader { border-bottom-color: #181b22; }

/* ── VIVID / SUNSET ── */
[data-ui="vivid"] {
  --bg:         #0a0c12;
  --bg2:        #0c0e14;
  --surface:    #161922;
  --surface2:   #1f2430;
  --border:     rgba(255,255,255,.07);
  --text:       #c0c8d8;
  --text-hi:    #ffffff;
  --muted:      rgba(255,255,255,.35);
  --accent:     #f97316;
  --accent2:    #ec4899;
  --own-bg:     linear-gradient(135deg,#f97316,#ec4899);
  --purple:     #0c0e14;
  --purple-dark:#080a10;
  --purple-mid: rgba(255,255,255,.05);
}
[data-ui="vivid"] #deskRail { background: #080a10; border-right-color: rgba(255,255,255,.05); }
[data-ui="vivid"] #deskSidebar { background: #0c0e14; border-right-color: rgba(255,255,255,.05); }
[data-ui="vivid"] #deskMain { background: #0a0c12; }
[data-ui="vivid"] #roomsScreen { background: #080a10; }
[data-ui="vivid"] .ws-header { background: #0c0e14 !important; border-bottom: 1px solid rgba(255,255,255,.05) !important; }
[data-ui="vivid"] .c-header { background: rgba(255,255,255,.02) !important; border-bottom-color: rgba(255,255,255,.05) !important; }
[data-ui="vivid"] .tab-bar { border-top-color: rgba(255,255,255,.05); }
[data-ui="vivid"] .ob {
  background: linear-gradient(135deg,#f97316,#ec4899) !important;
  box-shadow: 0 4px 16px rgba(249,115,22,.25);
  border-radius: 18px 18px 4px 18px;
}
[data-ui="vivid"] .inp-box { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
[data-ui="vivid"] .r-row.act { background: rgba(249,115,22,.1); border-left: 2px solid #f97316; }
[data-ui="vivid"] .forum-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
[data-ui="vivid"] .login-btn { background: linear-gradient(135deg,#f97316,#ec4899); }
[data-ui="vivid"] .rail-btn.act, [data-ui="vivid"] .rail-btn:hover { background: rgba(249,115,22,.2); }
[data-ui="vivid"] .dsk-row.act { background: rgba(249,115,22,.1); border-left: 2px solid #f97316; }
[data-ui="vivid"] #deskSidebarHeader { border-bottom-color: rgba(255,255,255,.05); }

/* Active rail indicator line */
[data-ui="glass"] .rail-btn.act::after,
[data-ui="clean"] .rail-btn.act::after,
[data-ui="vivid"] .rail-btn.act::after {
  content:'';position:absolute;left:-2px;
  width:4px;height:24px;border-radius:0 4px 4px 0;
}
[data-ui="glass"] .rail-btn.act::after { background: linear-gradient(180deg,#6c63ff,#a855f7); }
[data-ui="clean"] .rail-btn.act::after { background: #5b9bd5; }
[data-ui="vivid"] .rail-btn.act::after { background: linear-gradient(180deg,#f97316,#ec4899); }
[data-ui="nature"] .rail-btn.act::after { background: linear-gradient(180deg,#10b981,#34d399); }

/* ── NATURE / DOĞA ── */
[data-ui="nature"] {
  --bg:         #0f172a;
  --bg2:        #1e293b;
  --surface:    rgba(255,255,255,.055);
  --surface2:   rgba(255,255,255,.10);
  --border:     rgba(255,255,255,.1);
  --text:       rgba(248,250,252,.85);
  --text-hi:    #f8fafc;
  --muted:      rgba(248,250,252,.4);
  --accent:     #10b981;
  --accent2:    #064e3b;
  --own-bg:     rgba(16,185,129,.65);
  --purple:     rgba(255,255,255,.05);
  --purple-dark:#0b1120;
  --purple-mid: rgba(255,255,255,.07);
  --green:      #34d399;
}
/* Body gradient */
[data-ui="nature"] body {
  background: radial-gradient(circle at top right, #1e293b, #0f172a) !important;
}
/* Paneller */
[data-ui="nature"] #deskRail {
  background: linear-gradient(180deg,#0b1120 0%,#0f172a 100%);
  border-right-color: rgba(255,255,255,.07);
  position: relative;
}
[data-ui="nature"] #deskRail::before {
  content:''; position:absolute; width:220px; height:180px;
  top:-30px; left:-50px; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse, rgba(16,185,129,.2) 0%, transparent 70%);
  animation: uiAurora1 9s ease-in-out infinite;
}
[data-ui="nature"] #deskSidebar {
  background: linear-gradient(180deg,#0f172a 0%,#1e293b 100%);
  border-right-color: rgba(255,255,255,.07);
  position: relative; overflow: hidden;
}
[data-ui="nature"] #deskSidebar::before {
  content:''; position:absolute; width:260px; height:180px;
  top:-50px; left:-70px; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse, rgba(16,185,129,.15) 0%, transparent 70%);
}
[data-ui="nature"] #deskSidebar::after {
  content:''; position:absolute; width:180px; height:140px;
  bottom:40px; right:-50px; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse, rgba(52,211,153,.08) 0%, transparent 70%);
}
[data-ui="nature"] #deskMain {
  background: radial-gradient(ellipse at 70% 0%, rgba(16,185,129,.06) 0%, transparent 50%),
              linear-gradient(180deg,#0f172a 0%,#0b1120 100%);
}
[data-ui="nature"] #roomsScreen {
  background: linear-gradient(180deg,#0b1120 0%,#0f172a 100%);
}
[data-ui="nature"] #roomsScreen::before {
  content:''; position:absolute; width:250px; height:200px;
  top:-40px; left:-60px; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse, rgba(16,185,129,.18) 0%, transparent 70%);
  animation: uiAurora1 9s ease-in-out infinite;
}
/* Header / Tab bar */
[data-ui="nature"] .c-header,
[data-ui="nature"] .ws-header,
[data-ui="nature"] #deskChatHeader {
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255,255,255,.07) !important;
}
[data-ui="nature"] .tab-bar {
  background: transparent;
  backdrop-filter: none;
  border-top-color: rgba(255,255,255,.07);
}
/* Mesaj balonları */
[data-ui="nature"] .ob {
  background: linear-gradient(135deg, rgba(16,185,129,.7), rgba(5,78,59,.8));
  border: 1px solid rgba(16,185,129,.25);
  box-shadow: 0 2px 12px rgba(16,185,129,.15);
}
[data-ui="nature"] .inp-box {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
}
/* Forum cards */
[data-ui="nature"] .forum-card {
  background: rgba(255,255,255,.048);
  border-color: rgba(255,255,255,.09);
}
[data-ui="nature"] .forum-card:hover {
  border-color: rgba(16,185,129,.3) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.35), 0 0 20px rgba(16,185,129,.05) !important;
}
/* Giriş butonu */
[data-ui="nature"] .login-btn {
  background: linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 6px 20px rgba(16,185,129,.3);
}
/* Active row */
[data-ui="nature"] .r-row.act { background: rgba(16,185,129,.1); border-left: 2px solid #10b981; }
[data-ui="nature"] .rail-btn.act, [data-ui="nature"] .rail-btn:hover { background: rgba(16,185,129,.15); }
[data-ui="nature"] .dsk-row.act { background: rgba(16,185,129,.1); border-left: 2px solid #10b981; }
[data-ui="nature"] #deskSidebarHeader { border-bottom-color: rgba(255,255,255,.07); }
/* Input alanları */
[data-ui="nature"] input[type="text"],
[data-ui="nature"] input[type="password"],
[data-ui="nature"] input[type="email"] {
  background: rgba(0,0,0,.25) !important;
  border-color: rgba(255,255,255,.1) !important;
}
/* Emoji picker */
[data-ui="nature"] #emojiPicker,
[data-ui="nature"] #deskEmojiPicker,
[data-ui="nature"] .picker-body,
[data-ui="nature"] .picker-tabs,
[data-ui="nature"] .gif-search-wrap { background: #0b1120 !important; }

/* ════════════════════════════════════════════
   🔷 SVG İKON SETİ
════════════════════════════════════════════ */
.ui-icon { width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;flex-shrink:0; }
.ui-icon-sm { width:16px;height:16px; }
.ui-icon-lg { width:24px;height:24px; }
.ui-icon-box {
  width:40px;height:40px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
}
.ic-purple{background:rgba(108,99,255,.14);color:#9b8eff;}
.ic-blue  {background:rgba(59,114,192,.14);color:#5b9bd5;}
.ic-teal  {background:rgba(0,188,156,.14); color:#00bca0;}
.ic-orange{background:rgba(249,115,22,.14);color:#fb923c;}
.ic-red   {background:rgba(224,85,85,.14); color:#f07070;}
.ic-green {background:rgba(34,197,94,.14); color:#4ade80;}
.ic-pink  {background:rgba(236,72,153,.14);color:#f472b6;}
.ic-yellow{background:rgba(234,179,8,.14); color:#fbbf24;}

/* ════════════════════════════════════════════
   🧩 UI BİLEŞEN KÜTÜPHANESİ
════════════════════════════════════════════ */

/* Butonlar */
.ui-btn { padding:8px 16px;border-radius:9px;font-size:.8rem;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:all .15s;display:inline-flex;align-items:center;gap:5px; }
.ui-btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 3px 12px rgba(0,0,0,.2); }
.ui-btn-secondary { background:var(--surface2);color:var(--text);border:1px solid var(--border); }
.ui-btn-ghost { background:transparent;color:var(--muted);border:1px solid var(--border); }
.ui-btn-danger { background:rgba(224,85,85,.12);color:#f07070;border:1px solid rgba(224,85,85,.2); }
.ui-btn-success { background:rgba(34,197,94,.1);color:#4ade80;border:1px solid rgba(34,197,94,.2); }
.ui-btn-sm { padding:5px 11px;font-size:.72rem;border-radius:7px; }
.ui-btn:hover { opacity:.88; }
.ui-btn:active { opacity:.75;transform:scale(.97); }

/* Badge'ler */
.ui-badge { padding:2px 9px;border-radius:100px;font-size:.62rem;font-weight:700;letter-spacing:.02em;display:inline-flex;align-items:center;gap:4px; }
.ui-badge-blue   { background:rgba(59,114,192,.15);color:#5b9bd5;border:1px solid rgba(59,114,192,.25); }
.ui-badge-green  { background:rgba(34,197,94,.12); color:#4ade80;border:1px solid rgba(34,197,94,.22); }
.ui-badge-red    { background:rgba(224,85,85,.12); color:#f07070;border:1px solid rgba(224,85,85,.22); }
.ui-badge-purple { background:rgba(108,99,255,.12);color:#9b8eff;border:1px solid rgba(108,99,255,.22); }
.ui-badge-orange { background:rgba(249,115,22,.12);color:#fb923c;border:1px solid rgba(249,115,22,.22); }
.ui-badge-yellow { background:rgba(234,179,8,.12); color:#fbbf24;border:1px solid rgba(234,179,8,.22); }

/* Ayırıcı */
.ui-divider { height:1px;background:var(--border);margin:10px 0; }

/* Toast bileşeni */
.ui-toast { background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:11px 14px;display:flex;align-items:flex-start;gap:10px;font-size:.8rem;box-shadow:0 8px 24px rgba(0,0,0,.4); }
.ui-toast-icon { font-size:1.05rem;flex-shrink:0;margin-top:1px; }
.ui-toast-body { flex:1; }
.ui-toast-title { font-weight:700;color:var(--text-hi);margin-bottom:1px; }
.ui-toast-sub { color:var(--muted);font-size:.72rem; }

/* Emoji tepki çubuğu */
.ui-react-bar { display:flex;gap:4px;align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:5px 10px; }
.ui-react-btn { font-size:.95rem;cursor:pointer;padding:2px 5px;border-radius:7px;transition:background .15s; }
.ui-react-btn:hover,.ui-react-btn.on { background:rgba(108,99,255,.14); }
.ui-react-pill { display:inline-flex;align-items:center;gap:3px;background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.22);border-radius:100px;padding:2px 9px;font-size:.68rem;color:#9b8eff; }

/* Kart */
.ui-card { background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px; }

/* UI stili seçici card */
.ui-style-card {
  cursor:pointer;border-radius:12px;padding:12px 10px;text-align:center;
  background:var(--surface);border:2px solid transparent;
  transition:all .2s;position:relative;overflow:hidden;
}
.ui-style-card:hover { border-color:rgba(255,255,255,.15); transform:translateY(-2px); }
.ui-style-card.selected { border-color:var(--accent); background:var(--surface2); }
.ui-style-card .ui-style-preview {
  width:100%;height:54px;border-radius:8px;overflow:hidden;margin-bottom:8px;
  display:flex;position:relative;
}
.ui-style-card .ui-style-label { font-size:.72rem;font-weight:700;color:var(--text-hi); }
.ui-style-card .ui-style-desc { font-size:.6rem;color:var(--muted);margin-top:2px; }

.screen{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;height:100dvh;display:none;flex-direction:column;background:var(--bg);overflow:hidden;}
.screen.active{display:flex !important;}

/* ── Tab bar (fixed 82px) altında kalan scroll alanları ── */
#forumFeed,
.rooms-scroll,
#chatMsgs,
.dm-list-scroll,
.fr-scroll,
#watchList,
#gamesList,
.profile-scroll,
.admin-body {
  padding-bottom: 90px;
}



/* ══════ LOGIN SCREEN ══════ */
#loginScreen{background:linear-gradient(145deg,var(--purple-dark) 0%,var(--bg2) 40%,var(--purple) 70%,var(--purple-dark) 100%);align-items:flex-start;justify-content:center;padding:24px;padding-top:calc(env(safe-area-inset-top,0px) + 24px);padding-bottom:32px;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:10;position:relative;min-height:100%;}
#loginScreen::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(91,155,213,.18) 0%,transparent 70%),radial-gradient(ellipse 50% 40% at 80% 100%,rgba(91,155,213,.1) 0%,transparent 60%);z-index:0;}
#loginScreen>.login-box{position:relative;z-index:1;}
@media (max-height: 750px) {
  #loginScreen { align-items:flex-start !important; padding-top:16px !important; }
  .login-box { padding:20px 18px !important; }
  .login-logo { margin-bottom:8px !important; }
  .login-title { font-size:1.3rem !important; margin-bottom:12px !important; }
}
[data-ui="glass"] #loginScreen{background:linear-gradient(145deg,#0d0b20 0%,#13103a 40%,#0f0c29 70%,#0d0b20 100%);}
[data-ui="glass"] #loginScreen::before{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(108,99,255,.28) 0%,transparent 70%),radial-gradient(ellipse 50% 40% at 80% 100%,rgba(168,85,247,.15) 0%,transparent 60%);}
[data-ui="clean"] #loginScreen{background:linear-gradient(145deg,#0d0f14 0%,#111418 40%,#0e1016 70%,#0d0f14 100%);}
[data-ui="clean"] #loginScreen::before{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(91,155,213,.15) 0%,transparent 70%);}
[data-ui="vivid"] #loginScreen{background:linear-gradient(145deg,#080a10 0%,#0c0e14 40%,#0a0c12 70%,#080a10 100%);}
[data-ui="vivid"] #loginScreen::before{background:radial-gradient(ellipse 70% 50% at 30% 20%,rgba(249,115,22,.2) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 80% 80%,rgba(236,72,153,.18) 0%,transparent 60%);}
[data-theme="forest"] #loginScreen{background:linear-gradient(145deg,#0d1a0f 0%,#1a2e1c 40%,#0d1a0f 100%);}
[data-theme="ocean"] #loginScreen{background:linear-gradient(145deg,#091520 0%,#0d2235 40%,#091520 100%);}
[data-theme="sunset"] #loginScreen{background:linear-gradient(145deg,#1a0e10 0%,#2d1620 40%,#1a0e10 100%);}
[data-theme="midnight"] #loginScreen{background:linear-gradient(145deg,#080810 0%,#10101e 40%,#080810 100%);}
[data-theme="latte"] #loginScreen{background:linear-gradient(145deg,#e8e0d4 0%,#f5f0e8 40%,#ede5d8 100%);}
.login-box{width:100%;max-width:380px;background:var(--bg2);border-radius:16px;padding:32px 24px;border:1px solid var(--border);margin:auto;}
.login-logo{text-align:center;font-size:3rem;margin-bottom:8px;}
.login-title{text-align:center;font-size:1.4rem;font-weight:900;color:var(--text-hi);margin-bottom:4px;}
.login-sub{text-align:center;font-size:.82rem;color:var(--muted);margin-bottom:24px;}
.login-field{margin-bottom:14px;}
.login-label{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
.login-inp{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:11px 13px;color:var(--text-hi);font-size:.92rem;font-family:inherit;outline:none;transition:border-color .15s;-webkit-appearance:none;}
.login-inp.masked{-webkit-text-security:disc;text-security:disc;}
.login-inp:focus{border-color:#5b9bd5;}
.login-inp::placeholder{color:var(--muted);}
.login-btn{width:100%;padding:13px;background:#2a4a7a;border:none;border-radius:8px;color:#fff;font-size:.95rem;font-weight:900;cursor:pointer;transition:opacity .15s;margin-top:4px;}
.login-btn:active{opacity:.8;}
.login-err{background:rgba(224,30,90,.15);border:1px solid rgba(224,30,90,.3);border-radius:8px;padding:10px 13px;font-size:.82rem;color:#ff6b9d;margin-bottom:14px;display:none;}
.login-err.show{display:block;}
.login-pass-wrap{display:none;margin-bottom:14px;}
.login-pass-wrap.show{display:block;}
.turkish-decoration{text-align:center;font-size:1.4rem;letter-spacing:6px;margin-bottom:10px;opacity:.7;}


#msgsScreen{background:var(--bg2);}
#friendsScreen{background:var(--bg2);}
#profileScreen{background:var(--bg2);}
#msgsScreen .ws-header,#friendsScreen .ws-header,#profileScreen .ws-header{background:var(--purple);}

/* ══════ ROOMS SCREEN ══════ */
#roomsScreen{background:var(--purple-dark);padding-top:0;padding-bottom:0;}

.ws-header{display:flex;align-items:center;gap:10px;padding:8px 18px 7px;padding-top:calc(8px + env(safe-area-inset-top,0px));background:var(--purple);flex-shrink:0;}
.ws-logo{width:30px;height:30px;background:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.ws-name{flex:1;min-width:0;font-size:1.05rem;font-weight:900;color:#fff;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-av{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:900;color:#fff;flex-shrink:0;cursor:pointer;border:2px solid rgba(255,255,255,0);position:relative;overflow:visible;box-sizing:content-box;}
.ws-av .sdot{position:absolute;bottom:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:var(--green);border:2.5px solid var(--purple);}
.admin-badge{background:var(--yellow);color:#000;font-size:.55rem;font-weight:900;border-radius:3px;padding:1px 4px;margin-left:4px;vertical-align:middle;}

.search-row{margin:8px 12px 4px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.14);border-radius:7px;display:flex;align-items:center;gap:8px;padding:7px 12px;flex-shrink:0;}
.search-row span{font-size:.87rem;color:rgba(255,255,255,.55);font-weight:700;}

.rooms-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 0 6px;}
.rooms-scroll::-webkit-scrollbar{display:none;}

.sec-hdr{display:flex;align-items:center;gap:6px;padding:7px 14px 3px;font-size:.72rem;font-weight:900;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;user-select:none;}
.sec-hdr .chev{font-size:.6rem;transition:transform .2s;}
.sec-add{margin-left:auto;font-size:1.15rem;color:rgba(255,255,255,.4);line-height:1;}



/* ── Kanal Önizleme Popup Konumlama ── */
(function(){
  document.addEventListener('mouseover', function(e){
    // Mobil/touch cihazlarda popup gösterme
    if(window.innerWidth < 768) return;
    const minDim = Math.min(screen.width||0, screen.height||0);
    if(minDim > 0 && minDim < 600) return; // telefon

    const row = e.target.closest('.dsk-row, .r-row');
    if(!row) return;
    const popup = row.querySelector('.room-preview-popup');
    if(!popup) return;

    // Rail (68px) + Sidebar (260px) + gap (10px) = 338px from left
    const rail = document.getElementById('deskRail');
    const sidebar = document.getElementById('deskSidebar');
    let leftEdge = 338; // fallback
    if(rail && sidebar){
      const rRect = rail.getBoundingClientRect();
      const sRect = sidebar.getBoundingClientRect();
      leftEdge = sRect.right + 10;
    }

    // Clamp right so popup doesn't go off screen
    const popupW = 240;
    if(leftEdge + popupW > window.innerWidth - 8){
      leftEdge = window.innerWidth - popupW - 8;
    }

    // Vertical: align with row, clamp to viewport
    const rect = row.getBoundingClientRect();
    let top = rect.top;
    if(top + 120 > window.innerHeight - 8) top = window.innerHeight - 128;
    if(top < 8) top = 8;

    popup.style.left = leftEdge + 'px';
    popup.style.top = top + 'px';
    popup.style.transform = 'none';
  });
})();

/* ── Pull-to-Refresh ── */
#ptr-indicator { display: none !important; }
#ptr-indicator-DISABLED {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--blue); opacity: 0;
  transition: opacity .2s, top .2s;
  z-index: 50; pointer-events: none;
}
#ptr-indicator.ptr-visible { opacity: 1; top: 8px; }
#ptr-indicator.ptr-spinning { animation: ptrSpin .8s linear infinite; }
@keyframes ptrSpin { to { transform: translateX(-50%) rotate(360deg); } }
#roomsList { position: relative; transition: transform .2s; }

.r-row{display:flex;align-items:center;gap:10px;padding:6px 14px;cursor:pointer;transition:background .1s;-webkit-user-select:none;user-select:none;}
.r-row:active{background:rgba(255,255,255,.09);}
.r-row.act{background:rgba(255,255,255,.15);}
.r-row.unread .r-label{color:#fff;font-weight:900;}

.r-icon{width:22px;text-align:center;font-size:.95rem;color:rgba(255,255,255,.5);flex-shrink:0;font-weight:900;}
.r-av{width:22px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.58rem;font-weight:900;color:#fff;flex-shrink:0;position:relative;}
.r-dot{position:absolute;bottom:-2px;right:-2px;width:9px;height:9px;border-radius:50%;border:2px solid var(--purple-dark);}
.r-dot.on{background:var(--green);} .r-dot.off{background:var(--muted);}
.r-label{flex:1;font-size:.9rem;font-weight:700;color:rgba(255,255,255,.72);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.r-row.act .r-label{color:#fff;}
.ubadge{background:var(--red);color:#fff;font-size:.62rem;font-weight:900;border-radius:100px;padding:1px 6px;min-width:18px;text-align:center;flex-shrink:0;}

.tab-bar{display:flex;background:var(--purple-dark);border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;padding-bottom:max(var(--safe-bot),8px);backdrop-filter:blur(20px);position:fixed;bottom:0;left:0;right:0;z-index:1000;}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px 5px;cursor:pointer;opacity:.45;transition:opacity .2s,transform .15s;user-select:none;position:relative;}
.tab.act{opacity:1;}
.tab.act .tab-ic-wrap{background:rgba(91,155,213,.18);border-radius:10px;}
.tab:active{transform:scale(.92);}
.tab-ic-wrap{width:36px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:10px;transition:background .2s;margin-bottom:1px;}
.tab-ic{font-size:1.25rem;line-height:1;}
.tab-lb{font-size:.58rem;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.01em;}
.tab.act .tab-lb{color:var(--accent);}
.tab.act::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:2.5px;background:var(--accent);border-radius:0 0 3px 3px;}

/* ══════ CHAT SCREEN ══════ */
#chatScreen{background:var(--bg);padding-top:0;position:relative;}

.c-header{display:flex;align-items:center;gap:10px;padding:9px 12px;padding-top:calc(9px + env(safe-area-inset-top,0px));background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;min-height:52px;}
.back-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--blue);cursor:pointer;border-radius:6px;transition:background .1s;flex-shrink:0;}
.back-btn:active{background:var(--surface);}
.c-hdr-ic{width:30px;height:30px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:900;color:#fff;flex-shrink:0;}
.c-hdr-body{flex:1;min-width:0;}
.c-hdr-name{font-size:.95rem;font-weight:900;color:var(--text-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Kanal Önizleme Popup ── */
.r-row { position: relative; }

/* ── Online Flip Sayaç ── */
.flip-counter {
  display: inline-flex; overflow: hidden; height: 1.2em;
  position: relative; vertical-align: middle;
}
.flip-counter-inner {
  display: flex; flex-direction: column;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.flip-counter-digit { height: 1.2em; line-height: 1.2em; font-weight: 700; }

.room-preview-popup {
  display: none; position: absolute; z-index: 99999;
  top: 50%; left: 100%;
  transform: translateY(-50%);
  margin-left: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px; min-width: 200px; max-width: 240px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5); pointer-events: none;
  animation: popupFadeIn .15s ease;
}
@keyframes popupFadeIn { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
/* popup sadece gerçek mouse olan masaüstünde göster */
@media (hover: hover) and (pointer: fine) {
  .r-row:hover .room-preview-popup,
  .dsk-row:hover .room-preview-popup { display: block; }
}
/* touch/mobil — kesinlikle gizle */
@media (pointer: coarse), (hover: none) {
  .room-preview-popup { display: none !important; visibility: hidden !important; }
}
.rpp-name { font-size:.78rem; font-weight:700; color:var(--text); margin-bottom:4px; }
.rpp-msg  { font-size:.72rem; color:var(--muted); line-height:1.4; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rpp-meta { display:flex; align-items:center; gap:6px; font-size:.65rem; color:var(--muted); }
.rpp-dot  { width:6px; height:6px; border-radius:50%; background:var(--green); }

.c-hdr-sub{font-size:.7rem;color:var(--muted);}
.c-hdr-sub.on{color:var(--green);}
.hdr-btns{display:flex;gap:2px;flex-shrink:0;}
.hdr-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;border-radius:6px;color:var(--muted);transition:background .1s;}
.hdr-btn:active{background:var(--surface);}

#chatMsgs{flex:1;overflow-y:auto;overflow-x:visible;-webkit-overflow-scrolling:touch;padding:6px 0 4px;display:flex;flex-direction:column;}
#chatMsgs::-webkit-scrollbar{display:none;}

.date-div{display:flex;align-items:center;gap:10px;padding:12px 14px 4px;}
.date-div::before,.date-div::after{content:'';flex:1;height:1px;background:var(--border);}
.date-txt{font-size:.7rem;font-weight:700;color:var(--muted);white-space:nowrap;}

.mb{display:flex;align-items:flex-start;gap:10px;padding:4px 40px 4px 40px;transition:background .1s;position:relative;overflow:visible;}


.mb.first{padding-top:10px;}
.mb.own{flex-direction:row-reverse;}

/* 3-dot mesaj menüsü */
.mb-actions{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:200;}
.mb.own .mb-actions{right:auto;left:-36px;}
.mb:not(.own) .mb-actions{left:auto;right:-36px;}
.mb:hover .mb-actions{display:flex;}
.mb-more-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.05rem;color:var(--muted);transition:background .15s,color .15s;border-radius:8px;background:var(--surface2);border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.4);}
.mb-more-btn:hover{background:var(--surface);color:var(--text-hi);}
.mb-av-menu-btn{display:none;width:28px;height:28px;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;color:var(--muted);transition:background .15s,color .15s;border-radius:8px;flex-shrink:0;align-self:center;background:var(--surface2);border:1px solid var(--border);padding:0;box-shadow:0 2px 8px rgba(0,0,0,.4);line-height:1;}
.mb-av-menu-btn:hover{background:var(--border);}
.mb:hover .mb-av-menu-btn{display:flex;}

/* mb-actions eski sistemi gizle */
.mb-actions{display:none !important;}
.mb-react-quick{display:flex;gap:0px;padding:0 2px;}
.mb-react-quick span{font-size:1.15rem;cursor:pointer;padding:3px 7px;border-radius:7px;line-height:1;transition:background .12s, transform .15s;display:inline-block;}
.mb-react-quick span:hover{background:var(--border);transform:scale(1.35);}
.mb-react-quick span:active{transform:scale(.85);}
.mb-react-quick span.emoji-bounce{animation:emojiBounce .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes emojiBounce{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(-8deg)}70%{transform:scale(.9)}100%{transform:scale(1)}}
.mb-action-sep{width:1px;background:var(--border);height:18px;margin:0 2px;}
/* Context menu */
#msgCtxMenu{display:none;position:fixed;z-index:99999;}
#msgCtxMenu.show{display:block;}
.ctx-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;border-radius:6px;font-size:.88rem;color:var(--text);transition:background .1s;white-space:nowrap;}
.ctx-item:hover{background:var(--border);}
.ctx-item.danger{color:var(--red);}
/* Emoji tepkiler */
.msg-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;}
.react-pill{display:flex;align-items:center;gap:3px;background:var(--surface2);border:1px solid var(--border);border-radius:100px;padding:2px 8px;font-size:.82rem;cursor:pointer;transition:all .15s;user-select:none;}
.react-pill:hover{background:rgba(91,155,213,.15);border-color:rgba(91,155,213,.4);}
.react-pill.mine{background:rgba(91,155,213,.2);border-color:rgba(91,155,213,.5);}
.react-count{font-size:.75rem;font-weight:700;color:var(--text-hi);}
/* Sabitlenmiş mesaj çubuğu */
#pinBar{display:none;align-items:center;gap:8px;background:var(--surface);border-bottom:2px solid var(--blue);padding:7px 14px;cursor:pointer;flex-shrink:0;transition:background .15s;}
#pinBar.show{display:flex;}
#pinBar:hover{background:var(--surface2);}
.pin-icon{font-size:1rem;color:var(--blue);flex-shrink:0;}
.pin-text{flex:1;font-size:.78rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pin-label{font-size:.68rem;font-weight:900;color:var(--blue);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;}
.pin-close{font-size:1rem;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:4px;}
.pin-close:hover{background:var(--border);}
/* Düzenleme modu */
.msg-edit-wrap{display:flex;gap:6px;margin-top:4px;align-items:flex-end;}
.msg-edit-inp{flex:1;background:var(--surface);border:1px solid var(--blue);border-radius:8px;padding:6px 10px;color:var(--text-hi);font-family:inherit;font-size:.9rem;resize:none;outline:none;max-height:120px;}
.msg-edit-btns{display:flex;gap:4px;flex-shrink:0;}
.msg-edit-ok{padding:6px 12px;background:var(--blue);border:none;border-radius:6px;color:#fff;font-size:.8rem;font-weight:700;cursor:pointer;}
.msg-edit-cancel{padding:6px 10px;background:var(--surface2);border:none;border-radius:6px;color:var(--muted);font-size:.8rem;cursor:pointer;}

.av{width:36px;height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:900;color:#fff;flex-shrink:0;margin-top:1px;}
.av.ghost{visibility:hidden;}

.mb-body{flex:1;min-width:0;position:relative;}
.mb.own .mb-body{display:flex;flex-direction:column;align-items:flex-end;}
.mb-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:2px;}
.mb.own .mb-meta{flex-direction:row-reverse;}
.mb-meta-mini{display:flex;justify-content:flex-end;margin-bottom:1px;margin-top:-2px;}
.mb-name{font-size:.88rem;font-weight:900;color:var(--text-hi);}
.mb.own .mb-name{color:var(--blue);}
.mb-ts{font-size:.68rem;color:var(--muted);}

/* Balon şekilleri — yumuşak, bükülme yok */
.mb-text{font-size:.9rem;color:var(--text-hi);line-height:1.5;word-break:break-word;overflow-wrap:anywhere;white-space:pre-wrap;display:block;max-width:78%;min-width:48px;border-radius:4px 14px 14px 14px;padding:8px 13px;}
.mb-text a{color:var(--accent);text-decoration:none;}
.ob{font-size:.9rem;color:#fff;line-height:1.5;word-break:break-word;overflow-wrap:anywhere;white-space:pre-wrap;display:block;max-width:78%;min-width:48px;border-radius:14px 4px 14px 14px;padding:8px 13px;}
.ob a{color:#7ec8e3;}

.msg-sys{text-align:center;font-size:.73rem;color:var(--muted);padding:4px 14px;}
.msg-img{max-width:min(260px,70vw);border-radius:8px;cursor:pointer;display:block;margin-top:4px;border:1px solid var(--border);}
.msg-file-card{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 12px;max-width:260px;margin-top:4px;text-decoration:none;cursor:pointer;}
.msg-file-icon{font-size:1.5rem;flex-shrink:0;}
.msg-file-info{flex:1;min-width:0;}
.msg-file-name{font-size:.8rem;font-weight:700;color:var(--text-hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msg-file-size{font-size:.68rem;color:var(--muted);}

.empty-chat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 24px;text-align:center;}
.empty-ic{font-size:3rem;margin-bottom:4px;}
.empty-title{font-size:1.05rem;font-weight:900;color:var(--text-hi);}
.empty-sub{font-size:.82rem;color:var(--muted);line-height:1.5;}

.inp-wrap{flex-shrink:0;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));background:var(--bg2);border-top:1px solid var(--border);}
.inp-box{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
#msgInp{width:100%;background:transparent;border:none;outline:none;color:var(--text-hi);font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:.92rem;line-height:1.46;padding:10px 12px 6px;resize:none;max-height:120px;-webkit-appearance:none;}
#msgInp::placeholder{color:var(--muted);}
.inp-btm{display:flex;align-items:center;padding:4px 8px 7px;gap:2px;border-top:1px solid var(--border);}
.ii{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;cursor:pointer;border-radius:6px;color:var(--muted);transition:background .1s;}
.ii:active{background:var(--surface2);}
.send-btn{width:32px;height:32px;background:var(--green);border:none;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;color:#fff;margin-left:auto;flex-shrink:0;transition:opacity .15s,transform .1s;}
.send-btn:active{opacity:.8;transform:scale(.9);}
.send-btn:disabled{opacity:.3;}

#emojiPicker{display:none;background:var(--bg2);border-top:1px solid var(--border);padding:0;max-height:320px;overflow:hidden;flex-direction:column;}
#emojiPicker.open{display:flex;}
.eg{display:grid;grid-template-columns:repeat(10,1fr);gap:1px;}
.eb{font-size:1.35rem;padding:3px;border-radius:6px;text-align:center;cursor:pointer;}
.eb:active{background:var(--surface2);}
.ec{font-size:.6rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;padding:6px 0 2px;grid-column:1/-1;font-weight:900;}

/* ══════ BOTTOM SHEETS ══════ */
.bs-back{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;align-items:flex-end;justify-content:center;}
.bs-back.open{display:flex;}
.bs{width:100%;max-width:500px;background:var(--bg2);border-radius:16px 16px 0 0;padding:16px;padding-bottom:calc(16px + var(--safe-bot));max-height:82vh;display:flex;flex-direction:column;animation:sup .22s ease;}
@keyframes sup{from{transform:translateY(100%);}to{transform:translateY(0);}}
.bs-handle{width:32px;height:3px;background:var(--border);border-radius:2px;margin:0 auto 16px;}
.bs-title{font-size:.95rem;font-weight:900;color:var(--text-hi);margin-bottom:12px;}
.bs-search{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px 13px;color:var(--text-hi);font-size:.9rem;font-family:inherit;outline:none;width:100%;margin-bottom:10px;-webkit-appearance:none;}
.bs-search::placeholder{color:var(--muted);}
.bs-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}

.dm-row{display:flex;align-items:center;gap:12px;padding:9px 4px;cursor:pointer;border-radius:8px;transition:background .1s;}
.dm-close-btn{display:none;width:22px;height:22px;border-radius:5px;align-items:center;justify-content:center;font-size:.75rem;color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);flex-shrink:0;transition:background .15s,color .15s;margin-left:auto;}
.dm-close-btn:hover{background:var(--red);color:#fff;}
.dm-row:hover .dm-close-btn{display:flex;}
.dsk-dm-close{display:none;width:20px;height:20px;border-radius:4px;align-items:center;justify-content:center;font-size:.7rem;color:rgba(255,255,255,.45);background:transparent;flex-shrink:0;transition:background .15s,color .15s;margin-left:auto;}
.dsk-dm-close:hover{background:var(--red) !important;color:#fff !important;}
.dsk-dm-row:hover .dsk-dm-close{display:flex;}
.dm-row:active{background:var(--surface);}
.dm-av{width:38px;height:38px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:900;color:#fff;flex-shrink:0;position:relative;}
.dm-av .r-dot{position:absolute;bottom:-2px;right:-2px;width:9px;height:9px;border-radius:50%;border:2px solid var(--bg2);}
.dm-name{font-size:.9rem;font-weight:700;color:var(--text-hi);}
.dm-status{font-size:.73rem;color:var(--muted);}

.prof-av{width:64px;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:900;color:#fff;margin:0 auto 12px;}
.prof-name{font-size:1.05rem;font-weight:900;color:var(--text-hi);text-align:center;margin-bottom:2px;}
.prof-sub{font-size:.8rem;color:var(--muted);text-align:center;margin-bottom:18px;}
.prof-div{height:1px;background:var(--border);margin:0 0 10px;}
.prof-act{display:flex;align-items:center;gap:12px;padding:11px 4px;cursor:pointer;border-radius:8px;transition:background .1s;}
.prof-act:active{background:var(--surface);}
.prof-act-ic{font-size:1.1rem;width:24px;text-align:center;}
.prof-act-lb{font-size:.9rem;font-weight:700;color:var(--text-hi);}
.prof-act.danger .prof-act-lb{color:var(--red);}
.prof-act.admin-action .prof-act-lb{color:var(--yellow);}

#imgOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:999;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:20px;}
#imgOverlay.open{display:flex;}
#imgOverlayImg{max-width:100%;max-height:80vh;border-radius:8px;object-fit:contain;}
.img-close{position:absolute;top:calc(var(--safe-top)+12px);right:16px;font-size:1.2rem;cursor:pointer;color:#fff;background:rgba(255,255,255,.15);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;}

#toast{position:fixed;bottom:calc(90px + var(--safe-bot));left:50%;transform:translateX(-50%);background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:9px 16px;font-size:.82rem;color:var(--text-hi);font-weight:700;z-index:999;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.5);}
#toast.show{opacity:1;}

.ld{display:none !important;}
.ld span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:ldot 1.2s infinite;}
.ld span:nth-child(2){animation-delay:.15s;} .ld span:nth-child(3){animation-delay:.3s;}
@keyframes ldot{0%,80%,100%{transform:scale(.7);opacity:.4;}40%{transform:scale(1);opacity:1;}}

/* ══════ ADMIN PANEL ══════ */
#adminPanel{background:var(--bg);padding-top:0;z-index:100;}

/* Header */
.admin-header{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:linear-gradient(135deg,#2d1b4e 0%,#3f0e40 60%,#1a1230 100%);border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;box-shadow:0 2px 16px rgba(0,0,0,.4);}
.admin-title{flex:1;font-size:1.05rem;font-weight:900;color:#fff;letter-spacing:.01em;}
.admin-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:rgba(255,255,255,.6);cursor:pointer;border-radius:8px;background:rgba(255,255,255,.08);transition:all .15s;}
.admin-close:hover{background:rgba(255,255,255,.18);color:#fff;}

/* Tabs */
.admin-tabs{display:flex;background:var(--surface);border-bottom:2px solid var(--border);flex-shrink:0;overflow-x:auto;gap:2px;padding:0 6px;scrollbar-width:none;}
.admin-tabs::-webkit-scrollbar{display:none;}
.atab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 10px 8px;text-align:center;font-size:.65rem;font-weight:800;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;transition:all .18s;letter-spacing:.03em;white-space:nowrap;flex-shrink:0;}
.atab .atab-icon{font-size:1.1rem;transition:transform .18s;}
.atab:hover{color:var(--text);background:rgba(255,255,255,.04);border-radius:8px 8px 0 0;}
.atab.act{color:#c4a7ff;border-bottom-color:#9b72ff;}
.atab.act .atab-icon{transform:scale(1.15);}

/* Body */
.admin-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;}
#deskAdminTabs::-webkit-scrollbar{height:0;display:none;}
#deskAdminTabs div:hover{background:var(--surface2) !important;color:var(--text) !important;}
.admin-body::-webkit-scrollbar{display:none;}

/* Sections */
.admin-section{margin-bottom:20px;}
.admin-sec-title{font-size:.7rem;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.admin-sec-title::before{content:'';display:inline-block;width:3px;height:12px;background:var(--accent);border-radius:2px;}

/* Cards */
.admin-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:10px;box-shadow:0 1px 6px rgba(0,0,0,.2);}

/* Rows */
.admin-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.04);}
.admin-row:last-child{border-bottom:none;}
.admin-row:hover{background:rgba(255,255,255,.02);}
.admin-row-av{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:900;color:#fff;flex-shrink:0;}
.admin-row-info{flex:1;min-width:0;}
.admin-row-name{font-size:.88rem;font-weight:700;color:var(--text-hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.admin-row-sub{font-size:.7rem;color:var(--muted);margin-top:1px;}
.admin-row-btns{display:flex;gap:5px;flex-shrink:0;flex-wrap:wrap;}

/* Buttons */
.a-btn{padding:5px 11px;border:none;border-radius:7px;font-size:.72rem;font-weight:800;cursor:pointer;transition:all .15s;letter-spacing:.01em;}
.a-btn:hover{filter:brightness(1.15);}
.a-btn:active{transform:scale(.95);}
.a-btn.red{background:rgba(224,30,90,.18);color:#ff5a8a;border:1px solid rgba(224,30,90,.25);}
.a-btn.green{background:rgba(46,182,125,.15);color:#2eb67d;border:1px solid rgba(46,182,125,.2);}
.a-btn.yellow{background:rgba(236,178,46,.15);color:#f0c040;border:1px solid rgba(236,178,46,.2);}
.a-btn.blue{background:rgba(91,155,213,.15);color:#5b9bd5;border:1px solid rgba(91,155,213,.2);}
.a-btn.purple{background:rgba(155,114,255,.15);color:#c4a7ff;border:1px solid rgba(155,114,255,.2);}

/* Inputs */
.admin-inp{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:10px 13px;color:var(--text-hi);font-size:.88rem;font-family:inherit;outline:none;margin-bottom:10px;-webkit-appearance:none;transition:border-color .15s;}
.admin-inp:focus{border-color:#9b72ff;box-shadow:0 0 0 3px rgba(155,114,255,.12);}
.admin-inp::placeholder{color:var(--muted);}
.admin-inp-row{display:flex;gap:8px;margin-bottom:10px;}
.admin-inp-row .admin-inp{margin-bottom:0;}

/* Submit */
.admin-submit{width:100%;padding:12px;background:linear-gradient(135deg,#9b72ff,#6c3fce);border:none;border-radius:9px;color:#fff;font-size:.9rem;font-weight:900;cursor:pointer;transition:all .18s;box-shadow:0 2px 12px rgba(155,114,255,.25);}
.admin-submit:hover{filter:brightness(1.1);box-shadow:0 4px 18px rgba(155,114,255,.35);}
.admin-submit:active{transform:scale(.98);}

/* Radio */
.admin-radio-group{display:flex;gap:8px;margin-bottom:12px;}
.admin-radio{flex:1;padding:9px;background:var(--surface);border:2px solid var(--border);border-radius:9px;text-align:center;cursor:pointer;font-size:.82rem;font-weight:700;color:var(--muted);transition:all .15s;}
.admin-radio.sel{border-color:#9b72ff;color:#c4a7ff;background:rgba(155,114,255,.1);}

/* Tags */
.banned-tag{background:rgba(224,30,90,.2);color:#ff5a8a;font-size:.63rem;font-weight:900;border-radius:5px;padding:2px 7px;margin-left:6px;border:1px solid rgba(224,30,90,.2);}
.admin-tag{background:rgba(236,178,46,.2);color:var(--yellow);font-size:.63rem;font-weight:900;border-radius:5px;padding:2px 7px;margin-left:6px;border:1px solid rgba(236,178,46,.2);}
.online-tag{background:rgba(46,182,125,.15);color:#2eb67d;font-size:.63rem;font-weight:900;border-radius:5px;padding:2px 7px;margin-left:6px;border:1px solid rgba(46,182,125,.2);}

/* Msg panel */
.admin-msg-room{font-size:.68rem;color:#9b72ff;margin-bottom:2px;font-weight:700;}
.admin-msg-text{font-size:.84rem;color:var(--text);line-height:1.4;word-break:break-word;}
.admin-msg-meta{display:flex;align-items:center;gap:8px;margin-top:4px;}
.admin-msg-user{font-size:.72rem;font-weight:800;color:var(--blue);}
.admin-msg-ts{font-size:.67rem;color:var(--muted);}

/* Stat cards */
.admin-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;}
.admin-stat-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;}
.admin-stat-card::before{content:'';position:absolute;top:-10px;right:-10px;width:50px;height:50px;border-radius:50%;opacity:.07;}
.admin-stat-val{font-size:1.7rem;font-weight:900;line-height:1;}
.admin-stat-label{font-size:.68rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}

/* Announce */
.announce-select{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:10px 13px;color:var(--text-hi);font-size:.88rem;font-family:inherit;outline:none;margin-bottom:10px;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8b8c' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}
.announce-textarea{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:10px 13px;color:var(--text-hi);font-size:.88rem;font-family:inherit;outline:none;resize:none;min-height:100px;margin-bottom:10px;-webkit-appearance:none;transition:border-color .15s;}
.announce-textarea:focus,.announce-select:focus,.admin-inp:focus{border-color:#9b72ff;}
.announce-textarea::placeholder{color:var(--muted);}

/* Toggle switch */
.admin-toggle{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;}
.admin-toggle input{opacity:0;width:0;height:0;}
.admin-toggle-slider{position:absolute;inset:0;background:var(--surface2);border-radius:100px;cursor:pointer;transition:.25s;border:1px solid var(--border);}
.admin-toggle-slider:before{position:absolute;content:'';height:18px;width:18px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.admin-toggle input:checked + .admin-toggle-slider{background:linear-gradient(135deg,#9b72ff,#6c3fce);border-color:#9b72ff;}
.admin-toggle input:checked + .admin-toggle-slider:before{transform:translateX(20px);}

/* ══════ FRIENDS ══════ */
.fr-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-radius:8px;transition:background .1s;}
.fr-row:active{background:var(--surface);}
.fr-av{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:900;color:#fff;flex-shrink:0;position:relative;}
.fr-av .r-dot{position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg2);}
.fr-info{flex:1;min-width:0;}
.fr-name{font-size:.9rem;font-weight:700;color:var(--text-hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fr-status{font-size:.72rem;color:var(--muted);}
.fr-btns{display:flex;gap:6px;flex-shrink:0;}
.fr-btn{padding:6px 12px;border:none;border-radius:7px;font-size:.75rem;font-weight:900;cursor:pointer;transition:opacity .15s;}
.fr-btn:active{opacity:.7;}
.fr-btn.msg{background:var(--blue);color:#fff;}
.fr-btn.remove{background:rgba(224,30,90,.15);color:var(--red);}
.fr-btn.accept{background:var(--green);color:#fff;}
.fr-btn.reject{background:rgba(224,30,90,.15);color:var(--red);}
.fr-btn.add{background:rgba(29,155,209,.15);color:var(--blue);}
.fr-btn.pending{background:var(--surface2);color:var(--muted);cursor:default;}
.fr-section-title{font-size:.7rem;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:12px 4px 6px;}
.notif-dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--red);border:2px solid var(--purple-dark);display:none;}
.notif-dot.show{display:block;}
.tab-wrap{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;}
.fr-empty{text-align:center;padding:32px 16px;color:var(--muted);font-size:.85rem;line-height:1.6;}
.ltab{flex:1;padding:8px 6px;text-align:center;font-size:.78rem;font-weight:700;color:var(--muted);cursor:pointer;border-radius:6px;transition:all .15s;}
.ltab.act{background:var(--surface2);color:var(--text-hi);}
.ltab:active{opacity:.7;}

.fr-empty-ic{font-size:2.5rem;margin-bottom:8px;}

/* ══ CALL ══ */
.wave-bar{width:4px;border-radius:4px;background:#5b9bd5;animation:wave 1.2s ease-in-out infinite;}
.wave-bar:nth-child(1){animation-delay:0s;height:10px;}
.wave-bar:nth-child(2){animation-delay:.2s;height:20px;}
.wave-bar:nth-child(3){animation-delay:.4s;height:28px;}
.wave-bar:nth-child(4){animation-delay:.2s;height:20px;}
.wave-bar:nth-child(5){animation-delay:0s;height:10px;}
@keyframes wave{0%,100%{transform:scaleY(1);}50%{transform:scaleY(1.8);}}


/* ══ MEDIA EMBED ══ */
.media-embed{margin-top:8px;border-radius:10px;overflow:hidden;max-width:min(320px,80vw);}
.media-embed iframe{width:100%;aspect-ratio:16/9;border:none;display:block;}
.media-embed-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;max-width:min(320px,80vw);margin-top:8px;text-decoration:none;display:block;}
.media-embed-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.media-embed-info{padding:8px 10px;}
.media-embed-title{font-size:.82rem;font-weight:700;color:var(--text-hi);line-height:1.4;}
.media-embed-src{font-size:.68rem;color:var(--muted);margin-top:2px;}


/* ══════ FORUM ══════ */
.fcat{background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:5px 12px;font-size:.72rem;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0;}
.fcat.act{background:#5b9bd5;border-color:#5b9bd5;color:#fff;}
.fcat:active{opacity:.7;}

.forum-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:10px;transition:background .1s;}
.forum-card:active{background:var(--surface);}
.forum-card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.forum-card-av{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:900;color:#fff;flex-shrink:0;}
.forum-card-meta{flex:1;min-width:0;}
.forum-card-user{font-size:.88rem;font-weight:900;color:var(--text-hi);}
.forum-card-time{font-size:.68rem;color:var(--muted);}
.forum-card-cat{font-size:.65rem;font-weight:700;background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:2px 8px;color:var(--muted);}
.forum-card-text{font-size:.9rem;color:var(--text);line-height:1.6;word-break:break-word;margin-bottom:12px;}
.forum-card-text blockquote{border-left:3px solid var(--accent);padding-left:10px;margin:6px 0;color:var(--muted);font-style:italic;}
.forum-card-text code{background:var(--surface2);border-radius:4px;padding:1px 5px;font-family:monospace;font-size:.85em;}
.forum-card-text ul,.forum-card-text ol{padding-left:20px;margin:4px 0;}
.forum-card-text a{color:var(--accent);text-decoration:underline;}
.bb-spoiler{background:var(--surface2);color:transparent;border-radius:4px;padding:1px 5px;cursor:pointer;user-select:none;transition:color .2s;}
.bb-spoiler.revealed{color:var(--text-hi);}
.bb-spoiler:not(.revealed)::after{content:'👁 Spoiler - görmek için tıkla';color:var(--muted);font-size:.8rem;}
.forum-card-actions{display:flex;gap:14px;align-items:center;border-top:1px solid var(--border);padding-top:10px;}
.forum-action-btn{display:flex;align-items:center;gap:5px;font-size:.78rem;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .1s;user-select:none;}
.forum-action-btn:active{background:var(--surface2);}
.forum-action-btn.liked{color:#e05555;}
.forum-action-btn.disliked{color:#5b9bd5;}
.forum-comment-actions{display:flex;align-items:center;gap:4px;margin-top:5px;}
.com-act-btn{display:flex;align-items:center;gap:3px;font-size:.72rem;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:5px;transition:background .1s;user-select:none;}
.com-act-btn:active{background:var(--surface2);}
.com-act-btn.liked{color:#e05555;}
.com-act-btn.disliked{color:#5b9bd5;}
.forum-del-btn{margin-left:auto;font-size:.78rem;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .1s;}
.forum-del-btn:active{background:var(--surface2);}
.forum-comments{margin-top:10px;border-top:1px solid var(--border);padding-top:10px;}
.forum-comment{display:flex;gap:8px;margin-bottom:8px;}
.forum-comment-av{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:900;color:#fff;flex-shrink:0;}
.forum-comment-body{flex:1;background:var(--surface);border-radius:8px;padding:7px 10px;}
.forum-comment-user{font-size:.75rem;font-weight:900;color:var(--text-hi);margin-bottom:2px;}
.forum-comment-text{font-size:.82rem;color:var(--text);line-height:1.5;}
.forum-comment-inp-row{display:flex;gap:8px;align-items:center;margin-top:8px;}
.forum-comment-inp{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 11px;color:var(--text-hi);font-size:.82rem;font-family:inherit;outline:none;-webkit-appearance:none;}
.forum-comment-inp::placeholder{color:var(--muted);}
.forum-send-btn{width:30px;height:30px;background:#5b9bd5;border:none;border-radius:7px;color:#fff;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}


/* ══════════════════════════════════════════
   DESKTOP LAYOUT  (min-width: 768px)
══════════════════════════════════════════ */
@media (min-width: 768px) {
  /* Hide mobile tab-bars */
  .tab-bar { display: none !important; }

  /* Login stays centered */
  #loginScreen { padding: 0; }

  /* ── Desktop Shell ── */
  #desktopShell {
    position: fixed; inset: 0;
    flex-direction: row;
    background: var(--bg);
  }

  /* ── Icon Rail (far left, like Discord) ── */
  #deskRail {
    width: 68px;
    background: #1a1d21;
    display: flex; flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 6px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,.06);
    overflow-y: auto;
    overflow-x: hidden;
  }
  #deskRail::-webkit-scrollbar { display: none; }

  .rail-logo {
    width: 44px; height: 44px;
    background: var(--purple);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    margin-bottom: 6px;
    transition: border-radius .2s;
    flex-shrink: 0;
  }
  .rail-logo:hover { border-radius: 50%; }


  .rail-sep {
    width: 32px; height: 2px;
    background: rgba(255,255,255,.1);
    border-radius: 1px;
    margin: 2px 0;
    flex-shrink: 0;
  }

  .rail-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--surface);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-radius .2s, background .15s;
    position: relative;
    flex-shrink: 0;
    gap: 1px;
  }
  .rail-btn:hover { border-radius: 14px; background: var(--blue); }
  .rail-btn.act { border-radius: 14px; background: var(--blue); }
  .rail-btn-ic { font-size: 1.2rem; line-height: 1; }
  .rail-btn-lb { font-size: .45rem; font-weight: 900; color: rgba(255,255,255,.5); letter-spacing: .03em; text-transform: uppercase; display: none; }
  .rail-btn.act .rail-btn-lb { color: #fff; }
  .rail-btn .notif-pill {
    position: absolute; bottom: 0; right: 0;
    background: var(--red); color: #fff;
    font-size: .5rem; font-weight: 900;
    border-radius: 100px; padding: 1px 4px;
    border: 2px solid #1a1d21;
  }

  /* User avatar at bottom of rail */
  #deskRailUser {
    margin-top: auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 900; color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    border: 2px solid rgba(255,255,255,0);
    transition: border-radius .2s;
  }
  #deskRailUser:hover { border-radius: 14px; }
  #deskRailUser .sdot {
    position: absolute; bottom: -2px; right: -2px;
    width: 12px; height: 12px;
    border-radius: 50%; background: var(--green);
    border: 2.5px solid #1a1d21;
  }

  /* ── Sidebar ── */
  #deskSidebar {
    width: 260px;
    background: #222529;
    display: flex; flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
  }

  #deskSidebarHeader {
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
  }
  #deskSidebarTitle {
    font-size: 1rem; font-weight: 900; color: var(--text-hi);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #deskSidebarSub {
    font-size: .72rem; color: var(--muted); margin-top: 2px;
  }

  #deskSearch {
    margin: 8px 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 7px;
    display: flex; align-items: center; gap: 7px;
    padding: 7px 10px;
    flex-shrink: 0;
    cursor: text;
  }
  #deskSearch span { font-size: .82rem; color: var(--muted); }
  #deskSearchInp {
    background: none; border: none; outline: none;
    color: var(--text-hi); font-size: .82rem;
    font-family: inherit; flex: 1; min-width: 0;
  }
  #deskSearchInp::placeholder { color: var(--muted); }

  #deskSideList {
    flex: 1; overflow-y: auto;
    padding: 4px 0 12px;
  }
  #deskSideList::-webkit-scrollbar { width: 4px; }
  #deskSideList::-webkit-scrollbar-track { background: transparent; }
  #deskSideList::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

  .dsk-sec-hdr {
    display: flex; align-items: center;
    padding: 14px 10px 4px 12px;
    font-size: .7rem; font-weight: 900;
    color: var(--muted);
    text-transform: uppercase; letter-spacing: .07em;
    cursor: pointer;
    user-select: none;
  }
  .dsk-sec-hdr .chev { font-size: .6rem; margin-right: 4px; transition: transform .15s; }
  .dsk-sec-hdr .sec-add-btn {
    margin-left: auto;
    width: 18px; height: 18px;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; color: rgba(255,255,255,.4);
    transition: background .15s, color .15s;
  }
  .dsk-sec-hdr .sec-add-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

  .dsk-row {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 10px 3px 12px;
    cursor: pointer;
    border-radius: 6px;
    margin: 0 6px;
    transition: background .1s;
    min-height: 32px;
    position: relative;
    overflow: visible;
  }
  .dsk-row:hover { background: rgba(255,255,255,.07); }
  .dsk-row.act { background: rgba(255,255,255,.14); }
  .dsk-row.act .dsk-row-name { color: #fff; font-weight: 700; }

  .dsk-row-ic {
    width: 18px; text-align: center;
    font-size: .85rem; color: rgba(255,255,255,.45);
    flex-shrink: 0;
  }
  .dsk-row-av {
    width: 24px; height: 24px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: .6rem; font-weight: 900; color: #fff;
    flex-shrink: 0; position: relative;
  }
  .dsk-row-av .r-dot {
    width: 8px; height: 8px;
    border: 2px solid #222529;
  }
  .dsk-row-name {
    flex: 1; font-size: .87rem;
    color: rgba(255,255,255,.6);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dsk-row.act .dsk-row-name,
  .dsk-row:hover .dsk-row-name { color: rgba(255,255,255,.9); }
  .dsk-row-badge {
    background: var(--red); color: #fff;
    font-size: .58rem; font-weight: 900;
    border-radius: 100px; padding: 1px 5px;
    min-width: 16px; text-align: center;
  }
  .dsk-spy-tag {
    background: rgba(245,166,35,.2); color: #f5a623;
    font-size: .55rem; font-weight: 900;
    border-radius: 4px; padding: 1px 4px;
  }

  /* ── Main Chat Area ── */
  #deskMain {
    flex: 1; display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg);
  }

  /* Desktop chat header */
  #deskChatHeader {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0; min-height: 54px;
  }
  #deskChatHdrIcon {
    width: 32px; height: 32px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 900; color: #fff;
    flex-shrink: 0;
  }
  #deskChatHdrName {
    font-size: 1rem; font-weight: 900; color: var(--text-hi);
  }
  #deskChatHdrSub {
    font-size: .75rem; color: var(--muted);
    margin-left: 10px;
  }
  .dsk-hdr-actions {
    margin-left: auto; display: flex; gap: 6px; align-items: center;
  }
  .dsk-hdr-btn {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1rem;
    color: var(--muted);
    transition: background .12s, color .12s;
  }
  .dsk-hdr-btn:hover { background: var(--surface2); color: var(--text-hi); }

  /* Desktop empty state */
  #deskEmptyState {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--muted);
    gap: 12px;
  }
  #deskEmptyState .big-ic { font-size: 4rem; }
  #deskEmptyState .big-title { font-size: 1.2rem; font-weight: 900; color: var(--text-hi); }
  #deskEmptyState .big-sub { font-size: .85rem; max-width: 300px; text-align: center; }

  /* Desktop messages area */
  #deskMsgs {
    flex: 1; overflow-y: auto;
    padding: 12px 20px 4px;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  #deskMsgs::-webkit-scrollbar { width: 6px; }
  #deskMsgs::-webkit-scrollbar-track { background: transparent; }
  #deskMsgs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }

  /* Desktop spy banner */
  #deskSpyBanner {
    display: none;
    background: rgba(245,166,35,.1);
    border-bottom: 1px solid rgba(245,166,35,.2);
    padding: 8px 20px;
    align-items: center; gap: 10px;
    flex-shrink: 0;
  }

  /* Desktop input */
  #deskInputArea {
    padding: 10px 20px 16px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  #deskInputBox {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex; align-items: flex-end; gap: 8px;
    padding: 8px 12px;
    transition: border-color .15s;
  }
  #deskInputBox:focus-within { border-color: rgba(91,155,213,.5); }
  #deskInp {
    flex: 1; background: none; border: none; outline: none;
    color: var(--text-hi); font-size: .92rem;
    font-family: inherit; resize: none;
    max-height: 180px; line-height: 1.5;
    padding: 2px 0;
  }
  #deskInp::placeholder { color: var(--muted); }
  .dsk-inp-btn {
    width: 32px; height: 32px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .95rem;
    color: var(--muted); flex-shrink: 0;
    transition: background .12s, color .12s;
    border: none; background: none;
  }
  .dsk-inp-btn:hover { background: var(--surface); color: var(--text-hi); }
  #deskSendBtn {
    background: var(--blue); color: #fff;
    border: none; border-radius: 7px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    font-size: .85rem;
    transition: opacity .15s;
  }
  #deskSendBtn:hover { opacity: .85; }
  #deskSendBtn:disabled { opacity: .3; }
  #deskSendBtn.squish { animation: sendSquish .28s ease both; }

  /* Desktop Right panel (members list) */
  #deskMemberPanel {
    width: 220px;
    background: #222529;
    border-left: 1px solid rgba(255,255,255,.06);
    display: flex; flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
  }
  #deskMemberPanel.hidden { display: none; }
  .desk-mp-title {
    padding: 14px 14px 8px;
    font-size: .72rem; font-weight: 900;
    color: var(--muted); text-transform: uppercase; letter-spacing: .07em;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .desk-mp-list { flex: 1; overflow-y: auto; padding: 8px 6px; }
  .desk-mp-list::-webkit-scrollbar { width: 4px; }
  .desk-mp-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
  .desk-member-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; border-radius: 6px;
    cursor: default;
    transition: background .1s;
  }
  .desk-member-row:hover { background: rgba(255,255,255,.06); }
  .desk-m-av {
    width: 28px; height: 28px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; font-weight: 900; color: #fff;
    flex-shrink: 0; position: relative;
  }
  .desk-m-av .r-dot { width: 9px; height: 9px; border: 2px solid #222529; }
  .desk-m-name {
    font-size: .82rem; color: rgba(255,255,255,.6);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1;
  }

  /* ── Mobile screens hidden in desktop ── */
  #roomsScreen, 

  /* ── Forum / Friends / Profile as panels in deskMain ── */
  #deskContentPanel {
    flex: 1; display: flex; flex-direction: column; overflow: hidden;
  }
}

@media (max-width: 767px) {
  #desktopShell { display: none !important; }
}


/* ── Drag & Drop ── */
.dsk-row.drag-over { background: rgba(91,155,213,.2); border: 1px dashed rgba(91,155,213,.5); border-radius: 6px; }
.dsk-row.dragging { opacity: 0.4; }
.dsk-drag-handle {
  opacity: 0;
  color: var(--muted);
  font-size: .7rem;
  cursor: grab;
  padding: 0 2px;
  flex-shrink: 0;
  transition: opacity .15s;
  user-select: none;
}
.dsk-row:hover .dsk-drag-handle { opacity: 1; }
.dsk-drag-handle:active { cursor: grabbing; }


/* ══ Desktop Forum ══ */
.dsk-forum-wrap {
  display: flex; height: 100%; overflow: hidden;
}
.dsk-forum-feed {
  flex: 1; overflow-y: auto; padding: 0;
  background: var(--bg);
}
.dsk-forum-feed::-webkit-scrollbar { width: 6px; }
.dsk-forum-feed::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

/* Forum top bar */
.dsk-forum-topbar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex; align-items: center; gap: 0;
  flex-shrink: 0; overflow-x: auto;
}
.dsk-forum-topbar::-webkit-scrollbar { display: none; }
.dsk-ftab {
  padding: 14px 14px;
  font-size: .8rem; font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  flex-shrink: 0;
}
.dsk-ftab:hover { color: var(--text-hi); }
.dsk-ftab.act { color: var(--blue); border-bottom-color: var(--blue); }

/* Entry / post card - Ekşi style */
.dsk-entry {
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 20px 24px 16px;
  transition: background .1s;
  position: relative;
}
.dsk-entry:hover { background: rgba(255,255,255,.015); }
.dsk-entry-header {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;
}
.dsk-entry-av {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 900; color: #fff;
  flex-shrink: 0;
}
.dsk-entry-meta { flex: 1; min-width: 0; }
.dsk-entry-author {
  font-size: .88rem; font-weight: 900; color: var(--text-hi);
  display: flex; align-items: center; gap: 8px;
}
.dsk-entry-author .origin-flag { font-size: .75rem; color: var(--muted); font-weight: 400; }
.dsk-entry-time { font-size: .72rem; color: var(--muted); margin-top: 1px; }
.dsk-entry-cat-badge {
  display: inline-flex; align-items: center;
  background: rgba(91,155,213,.15); color: #5b9bd5;
  font-size: .65rem; font-weight: 700;
  border-radius: 100px; padding: 2px 9px;
  flex-shrink: 0;
}
.dsk-entry-body {
  font-size: .92rem; color: var(--text);
  line-height: 1.75; margin: 6px 0 12px 50px;
  word-break: break-word; white-space: pre-wrap;
}
.dsk-entry-body a { color: var(--blue); text-decoration: none; }
.dsk-entry-body a:hover { text-decoration: underline; }
.dsk-entry-footer {
  display: flex; align-items: center; gap: 6px;
  margin-left: 50px;
}
.dsk-vote-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.1);
  background: none; cursor: pointer;
  font-size: .78rem; font-weight: 700; color: var(--muted);
  transition: all .15s;
}
.dsk-vote-btn:hover { border-color: rgba(255,255,255,.25); color: var(--text-hi); }
.dsk-vote-btn.active-up { background: rgba(46,204,113,.15); border-color: rgba(46,204,113,.35); color: #2ecc71; }
.dsk-vote-btn.active-down { background: rgba(224,85,85,.15); border-color: rgba(224,85,85,.35); color: #e05555; }
.dsk-vote-btn.active-heart { background: rgba(231,76,120,.15); border-color: rgba(231,76,120,.35); color: #e74c78; }
.dsk-entry-reply-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 100px;
  background: none; border: 1px solid transparent;
  cursor: pointer; font-size: .78rem; font-weight: 700;
  color: var(--muted); transition: all .15s;
}
.dsk-entry-reply-btn:hover { border-color: rgba(255,255,255,.15); color: var(--text-hi); }
.dsk-entry-del-btn {
  margin-left: auto;
  padding: 5px 10px; border-radius: 100px;
  background: none; border: 1px solid transparent;
  cursor: pointer; font-size: .72rem; color: var(--muted);
  transition: all .15s;
}
.dsk-entry-del-btn:hover { border-color: rgba(224,85,85,.3); color: #e05555; }

/* Comments */
.dsk-comments { margin-left: 50px; }
.dsk-comment {
  display: flex; gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.04);
}
.dsk-comment-av {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 900; color: #fff;
  flex-shrink: 0;
}
.dsk-comment-body { flex: 1; min-width: 0; }
.dsk-comment-author { font-size: .78rem; font-weight: 900; color: var(--text-hi); }
.dsk-comment-time { font-size: .65rem; color: var(--muted); margin-left: 6px; }
.dsk-comment-text { font-size: .85rem; color: var(--text); margin-top: 2px; line-height: 1.6; }

/* Comment input */
.dsk-reply-area {
  margin-left: 50px; margin-top: 8px;
  display: none;
}
.dsk-reply-area.open { display: flex; gap: 8px; }
.dsk-reply-inp {
  flex: 1; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; color: var(--text-hi);
  font-size: .85rem; font-family: inherit;
  outline: none; resize: none;
  transition: border-color .15s;
}
.dsk-reply-inp:focus { border-color: #5b9bd5; }
.dsk-reply-send {
  background: var(--blue); border: none; border-radius: 8px;
  color: #fff; font-size: .82rem; font-weight: 700;
  padding: 0 16px; cursor: pointer; flex-shrink: 0;
  transition: opacity .15s;
}
.dsk-reply-send:hover { opacity: .85; }

/* New post compose area */
.dsk-compose {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
}
.dsk-compose-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .15s;
}
.dsk-compose-box:focus-within { border-color: rgba(91,155,213,.5); }
.dsk-compose-inp {
  width: 100%; background: none; border: none; outline: none;
  color: var(--text-hi); font-size: .92rem;
  font-family: inherit; resize: none;
  line-height: 1.6; min-height: 60px;
}
.dsk-compose-inp::placeholder { color: var(--muted); }
.dsk-compose-footer {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.dsk-cat-sel {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-hi);
  font-size: .8rem; padding: 7px 10px;
  outline: none; cursor: pointer; font-family: inherit;
}
.dsk-forum-post-btn {
  margin-left: auto;
  background: var(--blue); border: none; border-radius: 8px;
  color: #fff; font-size: .85rem; font-weight: 700;
  padding: 8px 20px; cursor: pointer;
  transition: opacity .15s;
}
.dsk-forum-post-btn:hover { opacity: .85; }
.dsk-forum-post-btn:disabled { opacity: .4; cursor: default; }

/* Sidebar widgets */
/* ══ WATCH / TV SCREEN CSS ══ */
.watch-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg); }
.watch-header { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 14px 20px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.watch-header-title { font-size: 1.1rem; font-weight: 900; color: var(--text-hi); }
.watch-header-sub { font-size: .75rem; color: var(--muted); margin-top: 1px; }
.watch-live-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(224,85,85,.15); border: 1px solid rgba(224,85,85,.3); color: #e05555; font-size: .65rem; font-weight: 900; border-radius: 100px; padding: 3px 9px; letter-spacing: .04em; }
.watch-live-badge::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: #e05555; animation: watchPulse 1.2s ease-in-out infinite; }
@keyframes watchPulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.watch-content { display: flex; flex: 1; overflow: hidden; }
.watch-sidebar { width: 280px; flex-shrink: 0; background: var(--bg2); border-right: 1px solid var(--border); overflow-y: auto; }
.watch-sidebar::-webkit-scrollbar { width: 4px; }
.watch-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.watch-cat-header { padding: 10px 14px 4px; font-size: .65rem; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.watch-ch-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; transition: background .1s; border-radius: 0; }
.watch-ch-item:hover { background: var(--surface); }
.watch-ch-item.act { background: var(--surface2); border-left: 3px solid var(--accent); }
.watch-ch-logo { width: 38px; height: 38px; border-radius: 8px; object-fit: contain; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; overflow: hidden; }
.watch-ch-logo img { width: 100%; height: 100%; object-fit: contain; }
.watch-ch-info { flex: 1; min-width: 0; }
.watch-ch-name { font-size: .88rem; font-weight: 700; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.watch-ch-cat { font-size: .68rem; color: var(--muted); }
.watch-player-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.watch-player-box { flex: 1; background: #000; display: flex; align-items: center; justify-content: center; position: relative; }
.watch-player-box iframe { width: 100%; height: 100%; border: none; }
.watch-player-placeholder { text-align: center; color: rgba(255,255,255,.3); }
.watch-player-placeholder .pp-icon { font-size: 4rem; margin-bottom: 12px; }
.watch-player-placeholder .pp-text { font-size: .95rem; font-weight: 700; }
.watch-player-placeholder .pp-sub { font-size: .78rem; margin-top: 4px; opacity: .6; }
.watch-now-info { background: var(--bg2); border-top: 1px solid var(--border); padding: 10px 16px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.watch-now-ch { font-size: .95rem; font-weight: 900; color: var(--text-hi); }
.watch-now-sub { font-size: .75rem; color: var(--muted); margin-top: 1px; }
/* Mobile watch screen */
.watch-mob-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 14px; }
.watch-mob-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: background .1s; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,232,122,.15); user-select: none; -webkit-user-select: none; }
.watch-mob-card:active { background: var(--surface2); }
.watch-mob-card .wmc-logo { width: 52px; height: 52px; border-radius: 12px; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; overflow: hidden; }
.watch-mob-card .wmc-logo img { width: 100%; height: 100%; object-fit: contain; }
.watch-mob-card .wmc-name { font-size: .78rem; font-weight: 700; color: var(--text-hi); text-align: center; }
.watch-mob-card .wmc-cat { font-size: .62rem; color: var(--muted); }
.watch-mob-player { position: fixed; inset: 0; background: #000; z-index: 9999; display: flex; flex-direction: column; }
.watch-mob-player-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top,0px)); background: rgba(0,0,0,.7); position: absolute; top: 0; left: 0; right: 0; z-index: 1; }
.watch-mob-player iframe { width: 100%; height: 100%; border: none; }
.watch-mob-close { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; color: #fff; flex-shrink: 0; }

/* ── Screen Share & Call UI ── */
#callScreen { user-select:none; }
.call-part-av {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 900; color: #fff;
  outline-offset: 2px; transition: outline .2s;
  cursor: default; user-select: none;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
#localVideo { transition: opacity .2s; }
#localVideo:hover { opacity:.85; }
#callShareScreenBtn.active { background:rgba(46,204,113,.25) !important; border-color:rgba(46,204,113,.5) !important; }
#callCamBtn.off, #callSpeakerBtn.off { background:rgba(224,85,85,.3) !important; border-color:rgba(224,85,85,.55) !important; }
.wave-bar { width:4px; border-radius:2px; animation: wave 1.2s ease-in-out infinite; }
@keyframes wave {
  0%,100%{height:5px;opacity:.3}
  50%{height:26px;opacity:.9}
}
.wave-bar:nth-child(1){animation-delay:0s}
.wave-bar:nth-child(2){animation-delay:.18s}
.wave-bar:nth-child(3){animation-delay:.36s}
.wave-bar:nth-child(4){animation-delay:.54s}
.wave-bar:nth-child(5){animation-delay:.72s}
.wave-bar:nth-child(5){animation-delay:.6s}

/* ── Chat Context Menu ── */
#chatContextMenu .cm-item{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;font-size:.88rem;color:var(--text);transition:background .1s;}
#chatContextMenu .cm-item:hover{background:rgba(255,255,255,.07);}
#chatContextMenu .cm-item.danger{color:var(--red);}
#chatContextMenu .cm-sep{height:1px;background:var(--border);margin:4px 0;}


.picker-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0;height:38px;}
.picker-tab{flex:1;padding:9px 0;text-align:center;font-size:.82rem;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.picker-tab.active{color:var(--text-hi);border-bottom-color:var(--accent);}
.picker-body{padding:10px 10px;overflow-y:scroll;height:274px;-webkit-overflow-scrolling:touch;background:var(--bg2);box-sizing:border-box;}
.gif-search-wrap{padding:8px 10px 4px;background:var(--bg2);flex-shrink:0;}
.gif-search-inp{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text-hi);font-size:.85rem;padding:7px 12px;outline:none;box-sizing:border-box;}
.gif-search-inp::placeholder{color:var(--muted);}
.gif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.gif-item{border-radius:6px;overflow:hidden;cursor:pointer;aspect-ratio:1;background:var(--surface2);}
.gif-item img{width:100%;height:100%;object-fit:cover;display:block;}
.gif-item:hover{opacity:.85;}
.gif-loading{text-align:center;padding:20px;color:var(--muted);font-size:.85rem;}


/* Custom Emoji */
.custom-emoji-grid{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0;}
.custom-emoji-item{width:36px;height:36px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .15s;position:relative;}
.custom-emoji-item:hover{background:var(--border);}
.custom-emoji-item img{width:32px;height:32px;object-fit:contain;}
.custom-emoji-item .ce-delete{display:none;position:absolute;top:-3px;right:-3px;width:14px;height:14px;background:#e74c3c;color:#fff;border-radius:50%;font-size:9px;align-items:center;justify-content:center;cursor:pointer;line-height:1;}
.custom-emoji-item:hover .ce-delete{display:flex;}
.add-emoji-btn{display:flex;align-items:center;gap:6px;padding:7px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text-hi);font-size:.82rem;cursor:pointer;transition:background .15s;width:100%;box-sizing:border-box;margin-top:6px;font-weight:600;}
.add-emoji-btn:hover{background:var(--border);}
.ce-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999999;align-items:center;justify-content:center;}
.ce-modal-overlay.open{display:flex;}
.ce-modal{background:var(--surface2);border:1px solid var(--border);border-radius:16px;padding:24px;width:320px;max-width:90vw;box-shadow:0 16px 48px rgba(0,0,0,.6);}
.ce-modal h3{margin:0 0 16px;font-size:1rem;color:var(--text-hi);}
.ce-modal input[type=text]{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text-hi);padding:9px 12px;font-size:.88rem;outline:none;box-sizing:border-box;margin-bottom:12px;}
.ce-modal input[type=text]::placeholder{color:var(--muted);}
.ce-preview{width:64px;height:64px;background:var(--surface);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;overflow:hidden;}
.ce-preview img{width:56px;height:56px;object-fit:contain;}
.ce-upload-area{border:2px dashed var(--border);border-radius:10px;padding:16px;text-align:center;cursor:pointer;color:var(--muted);font-size:.82rem;margin-bottom:12px;transition:border-color .15s;}
.ce-upload-area:hover{border-color:var(--accent);color:var(--text-hi);}
.ce-modal-btns{display:flex;gap:8px;}
.ce-modal-btns button{flex:1;padding:9px;border-radius:8px;border:none;cursor:pointer;font-size:.88rem;font-weight:700;}
.ce-cancel{background:var(--surface);color:var(--muted);}
.ce-save{background:var(--accent);color:#fff;}

.msg-emoji-img{width:48px!important;height:48px!important;border-radius:6px!important;}

/* ══ MINI GAMES CSS ══ */
.games-lobby{padding:0;}
.games-title{font-size:1.1rem;font-weight:900;color:var(--text-hi);margin-bottom:4px;}
.games-sub{font-size:.8rem;color:var(--muted);margin-bottom:20px;}
.game-card{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:14px;}
.game-card:hover{border-color:var(--accent);background:var(--surface);}
.game-card-ic{font-size:2rem;flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--surface);border-radius:12px;}
.game-card-info{flex:1;}
.game-card-name{font-size:.95rem;font-weight:800;color:var(--text-hi);margin-bottom:2px;}
.game-card-desc{font-size:.75rem;color:var(--muted);}
.game-card-badge{font-size:.7rem;font-weight:700;background:var(--accent);color:#fff;border-radius:20px;padding:2px 8px;margin-left:auto;flex-shrink:0;}
.msg-status{display:inline-flex;align-items:center;margin-left:4px;font-size:.6rem;vertical-align:middle;line-height:1;}
.msg-status svg{width:16px;height:9px;fill:none;stroke:rgba(255,255,255,.35);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.msg-status.delivered svg{stroke:rgba(255,255,255,.55);}
.msg-status.read svg{stroke:#4fc3f7;}
.game-invites-section{margin-bottom:20px;}
.game-invite-card{background:rgba(91,155,213,.12);border:1px solid rgba(91,155,213,.3);border-radius:12px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px;}
.game-invite-from{font-size:.88rem;font-weight:700;color:var(--text-hi);flex:1;}
.game-invite-type{font-size:.75rem;color:var(--muted);}
.game-invite-btns{display:flex;gap:6px;}
.game-invite-accept{background:var(--accent);border:none;border-radius:8px;color:#fff;font-size:.78rem;font-weight:700;padding:6px 12px;cursor:pointer;}
.game-invite-decline{background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:.78rem;font-weight:700;padding:6px 10px;cursor:pointer;}
.game-active-section{margin-bottom:20px;}
.game-active-card{background:rgba(46,204,113,.08);border:1px solid rgba(46,204,113,.25);border-radius:12px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px;cursor:pointer;}
.game-active-card:hover{border-color:rgba(46,204,113,.5);}

/* Tic-Tac-Toe Board */

/* RPS Game */

/* Game modal header */
.game-modal-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.game-modal-back{background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text-hi);font-size:.8rem;padding:5px 10px;cursor:pointer;flex-shrink:0;}
.game-modal-title{font-size:1rem;font-weight:900;color:var(--text-hi);}
.game-modal-vs{font-size:.8rem;color:var(--muted);margin-left:auto;}
.game-invite-user-list{max-height:200px;overflow-y:auto;}
.game-user-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background .15s;}
.game-user-row:hover{background:var(--surface2);}
.game-user-av{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:900;color:#fff;flex-shrink:0;}
.game-user-name{font-size:.88rem;font-weight:700;color:var(--text-hi);}
.game-user-status{font-size:.72rem;color:#2ecc71;margin-left:auto;}

/* ══ Sesli Mesaj ══ */
.voice-msg-wrap { display:flex; align-items:center; gap:8px; min-width:160px; max-width:260px; }
.voice-play-btn { width:34px; height:34px; border-radius:50%; background:var(--accent); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity .15s; }
.voice-play-btn:active { opacity:.75; }
.voice-waveform { flex:1; height:28px; display:flex; align-items:center; gap:2px; overflow:hidden; }
.voice-waveform span { display:inline-block; width:3px; border-radius:2px; background:rgba(255,255,255,.45); transition:height .1s; }
.voice-progress { font-size:.7rem; color:rgba(255,255,255,.6); flex-shrink:0; min-width:32px; text-align:right; }

/* ══ Yazıyor göstergesi ══ */
.typing-dots { display:inline-flex; gap:3px; align-items:center; }
.typing-dots span { width:5px; height:5px; border-radius:50%; background:var(--accent); animation:tdot 1.2s ease-in-out infinite; }
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* ══ Sohbet arama çubuğu ══ */
#chatSearchBar { display:none; position:absolute; top:0; left:0; right:0; z-index:40; background:var(--bg2); padding:8px 12px; gap:8px; align-items:center; box-shadow:0 2px 12px rgba(0,0,0,.3); }
#chatSearchBar.open { display:flex; }
#chatSearchInp { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px 12px; color:var(--text-hi); font-size:.9rem; outline:none; }
#chatSearchInp::placeholder { color:var(--muted); }
#chatSearchCount { font-size:.75rem; color:var(--muted); white-space:nowrap; min-width:40px; text-align:center; }
.search-highlight { background:rgba(255,200,0,.35); border-radius:2px; }
.search-highlight.current { background:rgba(255,200,0,.7); }

/* ══ Ses kayıt butonu ══ */
.voice-record-btn { width:36px; height:36px; border-radius:50%; background:transparent; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .15s; color:var(--muted); }
.voice-record-btn:hover { background:var(--surface2); color:var(--text-hi); }
.voice-record-btn.recording { background:rgba(224,85,85,.2); color:#e05555; animation:recpulse 1s ease-in-out infinite; }

/* ── Forum Rich Text Editör ── */
.fmt-btn{background:transparent;border:none;color:var(--text);padding:3px 7px;border-radius:5px;cursor:pointer;font-size:.85rem;line-height:1.4;transition:background .12s,color .12s;min-width:26px;text-align:center;}
.fmt-btn:hover{background:var(--border);color:var(--text-hi);}
.fmt-btn.active{background:var(--accent2);color:var(--text-hi);}
#forumPostInp:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none;}
#forumPostInp blockquote{border-left:3px solid var(--accent);padding-left:10px;margin:4px 0;color:var(--muted);font-style:italic;}
#forumPostInp code{background:var(--surface2);border-radius:4px;padding:1px 5px;font-family:monospace;font-size:.85em;}
#forumPostInp ul,#forumPostInp ol{padding-left:20px;margin:4px 0;}
#forumPostInp a{color:var(--accent);text-decoration:underline;}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(224,85,85,.4)}50%{box-shadow:0 0 0 6px rgba(224,85,85,0)}}
.rec-timer { font-size:.72rem; color:#e05555; font-weight:700; min-width:36px; display:none; }
.rec-timer.show { display:block; }

/* ══ Mesaj status (okundu) fix ══ */
.msg-status svg { width:14px; height:9px; fill:none; stroke:rgba(255,255,255,.4); stroke-width:2; }
.msg-status.delivered svg { stroke:rgba(255,255,255,.7); }
.msg-status.read svg { stroke:#5b9bd5; }

/* ══ Son görülme ══ */
.last-seen-badge { font-size:.68rem; color:var(--muted); margin-top:1px; }

/* ══════════════════════════════════════════
   YENİ ÖZELLİKLER CSS
══════════════════════════════════════════ */

/* ── Tema Smooth Transition ── */
*, *::before, *::after {
  transition-property: background-color, border-color, color;
  transition-duration: 0s;
}
[data-theme-transitioning] *, [data-theme-transitioning] *::before, [data-theme-transitioning] *::after {
  transition-duration: 350ms !important;
  transition-timing-function: ease !important;
}

/* ── Hover Zaman Damgası Tooltip ── */
.mb { position: relative; }
.msg-hover-tooltip {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%) scale(.85);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: .65rem;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s, transform .18s;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  z-index: 500;
}
.mb:hover .msg-hover-tooltip { opacity: 1; transform: translateX(-50%) scale(1); }
.msg-hover-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--border);
}

/* ── Mesaj Gönderim Pop Animasyonu ── */
@keyframes msgPopIn {
  from { opacity: 0; transform: scale(.8) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.mb.pop-in { animation: msgPopIn .3s cubic-bezier(.34,1.56,.64,1) both; }
.mb.sending-state { opacity: .45; }
.mb.sending-state .mb-text, .mb.sending-state .ob { opacity: .5; }

/* ── Tepki Bounce Animasyonu ── */
@keyframes reactBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  70%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.react-pill.bouncing { animation: reactBounce .35s cubic-bezier(.34,1.56,.64,1); }

/* ── Gönder Butonu Squish ── */
@keyframes sendSquish {
  0%   { transform: scale(1); }
  40%  { transform: scale(.8); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.send-btn.squish { animation: sendSquish .28s ease both; }

/* ── Tab Badge Pop ── */
@keyframes badgePop {
  0%   { transform: scale(.5); }
  60%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.ubadge.badge-pop, .dsk-row-badge.badge-pop { animation: badgePop .35s cubic-bezier(.34,1.56,.64,1); }

/* ── Scroll-to-Bottom Butonu ── */
#scrollToBottomBtn {
  position: absolute;
  bottom: 70px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  box-shadow: 0 4px 18px rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(.7) translateY(10px);
  transition: opacity .25s, transform .25s;
  z-index: 100;
  font-size: .9rem;
  color: var(--text-hi);
  user-select: none;
}
#scrollToBottomBtn.visible { opacity: 1; transform: scale(1) translateY(0); }
#scrollToBottomBtn .stb-badge {
  position: absolute;
  top: -5px; left: 50%; transform: translateX(-50%);
  background: #e05555;
  color: #fff; font-size: .52rem; font-weight: 900;
  border-radius: 100px; padding: 1px 5px;
  white-space: nowrap;
  border: 1.5px solid var(--bg);
  line-height: 1.4;
  display: none;
}
#scrollToBottomBtn.has-unread .stb-badge { display: block; }

/* ── Online Durum Noktası Smooth Geçiş ── */
.r-dot, .sdot, .dm-av .r-dot,
.dsk-row-av .r-dot, .desk-m-av .r-dot, .fr-av .r-dot {
  transition: background .5s ease, box-shadow .5s ease;
}
.r-dot.on { box-shadow: none; }

/* ── Sürükle-Bırak Overlay ── */
#dropOverlay {
  position: absolute;
  inset: 0;
  background: rgba(74,143,64,.1);
  border: 2px dashed rgba(74,143,64,.5);
  border-radius: 12px;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 200;
  backdrop-filter: blur(2px);
}
#dropOverlay.active {
  display: flex;
  opacity: 1;
  pointer-events: all;
}
#dropOverlay.active { opacity: 1; pointer-events: all; }
#dropOverlay .drop-icon { font-size: 2.5rem; }
#dropOverlay .drop-text { font-size: .9rem; font-weight: 700; color: var(--accent2); }
#dropOverlay .drop-sub { font-size: .72rem; color: var(--muted); }

/* ── Swipe-to-Reply Göstergesi ── */
.mb { overflow: visible; }
.mb .swipe-reply-hint {
  position: absolute;
  left: -38px; top: 50%; transform: translateY(-50%) scale(.6);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(91,155,213,.2);
  border: 1px solid rgba(91,155,213,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.mb.swiping-right .swipe-reply-hint { opacity: 1; transform: translateY(-50%) scale(1); }
.mb.swiping-right .mb-body, .mb.swiping-right .av { transform: translateX(36px); transition: transform .2s cubic-bezier(.34,1.56,.64,1); }

/* ── Kanal Önizleme Popup (Desktop) ── */
.rail-ch-preview {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%; transform: translateY(-50%) scale(.9);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  width: 220px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 9999;
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
}
.r-row:hover .rail-ch-preview { opacity: 1; transform: translateY(-50%) scale(1); }
.rcp-name { font-size: .8rem; font-weight: 700; color: var(--text-hi); margin-bottom: 3px; }
.rcp-last { font-size: .7rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcp-meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.rcp-online { font-size: .65rem; color: var(--green); display: flex; align-items: center; gap: 3px; }
.rcp-time { font-size: .62rem; color: var(--muted); margin-left: auto; }

/* ── Desktop Scroll-to-Bottom Butonu ── */
#deskScrollToBottomBtn {
  position: absolute;
  bottom: 80px; right: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  box-shadow: 0 4px 18px rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(.7) translateY(10px);
  transition: opacity .25s, transform .25s;
  z-index: 100;
  font-size: .9rem;
  color: var(--text-hi);
  user-select: none;
}
#deskScrollToBottomBtn.visible { opacity: 1; transform: scale(1) translateY(0); }
#deskScrollToBottomBtn .stb-badge {
  position: absolute;
  top: -5px; left: 50%; transform: translateX(-50%);
  background: #e05555;
  color: #fff; font-size: .52rem; font-weight: 900;
  border-radius: 100px; padding: 1px 5px;
  white-space: nowrap;
  border: 1.5px solid var(--bg);
  line-height: 1.4;
  display: none;
}
#deskScrollToBottomBtn.has-unread .stb-badge { display: block; }

/* ── Desktop Drag & Drop Overlay ── */
#deskDropOverlay {
  position: absolute;
  inset: 0;
  background: rgba(74,143,64,.1);
  border: 2px dashed rgba(74,143,64,.5);
  border-radius: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 200;
  backdrop-filter: blur(2px);
}
#deskDropOverlay.active { opacity: 1; pointer-events: all; }
#deskDropOverlay .drop-icon { font-size: 2.5rem; }
#deskDropOverlay .drop-text { font-size: .9rem; font-weight: 700; color: var(--accent2); }
#deskDropOverlay .drop-sub { font-size: .72rem; color: var(--muted); }

/* ── Sohbet Arka Plan ── */
#chatMsgs[data-bg="dots"],
#deskMsgs[data-bg="dots"] {
  background-image: radial-gradient(rgba(74,143,64,.12) 1px, transparent 1px);
  background-size: 22px 22px;
}
/* grid pattern removed */
#chatMsgs[data-bg="cross"],
#deskMsgs[data-bg="cross"] {
  background-image: radial-gradient(circle, rgba(91,155,213,.08) 2px, transparent 2px);
  background-size: 30px 30px;
}

/* ═══════════════════════════════
   PROFİL SAYFASI İYİLEŞTİRMELER
═══════════════════════════════ */

/* ── Kendi Profil Sayfası ── */
.prof-banner {
  height: 90px;
  background: linear-gradient(135deg, var(--accent2) 0%, var(--bg2) 100%);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.prof-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 20px;
  margin-top: -45px;
}
.prof-av-wrap {
  position: relative;
  margin-bottom: 10px;
}
.prof-av-ring {
  width: 90px; height: 90px;
  border-radius: 22px;
  border: none;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 900; color: #fff;
  box-shadow: none;
  cursor: pointer;
  position: relative;
}
.prof-av-ring::after {
  content: none;
  display: none;
}
.prof-av-ring:hover::after { display: none; }
.prof-status-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--bg2);
  display: none; /* JS ile gösterilir */
}
.prof-display-name {
  font-size: 1.25rem; font-weight: 900;
  color: var(--text-hi); margin-bottom: 2px;
  letter-spacing: -.02em;
}
.prof-handle {
  font-size: .78rem; color: var(--muted);
  margin-bottom: 8px;
}
.prof-stat-row {
  display: flex; gap: 0;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  margin: 12px 0;
  width: 100%;
}
.prof-stat {
  flex: 1; padding: 10px 8px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.prof-stat:last-child { border-right: none; }
.prof-stat-num {
  font-size: 1.1rem; font-weight: 900;
  color: var(--text-hi); display: block;
  min-height: 1.3em;
}
/* "—" gösterilince hafif animasyon */
@keyframes statPulse {
  0%,100% { opacity:.4; } 50% { opacity:.9; }
}
.prof-stat-num:not(:empty) { animation: none; }
.prof-stat-lbl {
  font-size: .62rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  display: block; margin-top: 2px;
}
.prof-bio-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  margin-bottom: 12px;
}
.prof-bio-card .pbc-label {
  font-size: .65rem; font-weight: 900;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 6px;
}
.prof-bio-card textarea {
  width: 100%; background: transparent;
  border: none; outline: none;
  color: var(--text-hi); font-size: .88rem;
  resize: none; font-family: inherit;
  line-height: 1.55;
}
.prof-section-title {
  font-size: .65rem; font-weight: 900;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: .08em; margin: 16px 0 8px;
  display: flex; align-items: center; gap: 6px;
}
.prof-section-title::before {
  content: ''; display: inline-block;
  width: 3px; height: 11px;
  background: var(--accent); border-radius: 2px;
}

/* ── Üye Profil Modal (up-card) ── */
#userProfileModal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
#userProfileModal.show { display: flex; }
.up-card {
  width: 100%; max-width: 480px;
  background: var(--bg2);
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  animation: upCardIn .3s cubic-bezier(.34,1.2,.64,1) both;
  max-height: 90vh;
  display: flex; flex-direction: column;
}
@media(min-width:640px){
  #userProfileModal { align-items: center; padding: 24px; }
  .up-card { border-radius: 20px; max-height: 80vh; }
}
@keyframes upCardIn {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.up-banner {
  height: 80px;
  background: linear-gradient(135deg, var(--accent2) 0%, var(--bg) 100%);
  flex-shrink: 0;
  position: relative;
}
.up-close {
  position: absolute; top: 12px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(255,255,255,.8);
  font-size: .8rem;
  transition: background .15s;
}
.up-close:hover { background: rgba(0,0,0,.55); color: #fff; }
.up-body-scroll {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 18px 20px;
  margin-top: -40px;
}
.up-body-scroll::-webkit-scrollbar { display: none; }
.up-av {
  width: 80px; height: 80px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 900; color: #fff;
  border: 3px solid var(--bg2);
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  margin-bottom: 10px;
  position: relative;
}
.up-online-dot {
  position: absolute; bottom: 2px; right: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2.5px solid var(--bg2);
  transition: background .5s;
}
.up-name {
  font-size: 1.15rem; font-weight: 900;
  color: var(--text-hi); margin-bottom: 2px;
}
.up-status {
  font-size: .75rem; margin-bottom: 10px;
  display: flex; align-items: center; gap: 5px;
}
.up-badge-row {
  display: inline-flex;
  background: rgba(74,143,64,.12);
  border: 1px solid rgba(74,143,64,.25);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: .72rem;
  color: var(--accent2);
  margin-bottom: 10px;
}
.up-bio-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: .83rem;
  color: var(--text);
  line-height: 1.55;
  text-align: left;
  margin: 8px 0;
}
.up-stat-row {
  display: flex; gap: 0;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  margin: 10px 0;
}
.up-stat { flex: 1; padding: 9px 6px; text-align: center; border-right: 1px solid var(--border); }
.up-stat:last-child { border-right: none; }
.up-stat-n { font-size: 1rem; font-weight: 900; color: var(--text-hi); display: block; }
.up-stat-l { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: block; }
.up-social-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0;
}
.up-social-chip {
  display: flex; align-items: center; gap: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px;
  font-size: .75rem; color: var(--text);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.up-social-chip:hover { border-color: var(--accent); background: var(--surface2); color: var(--text-hi); }
.up-action-row {
  display: flex; gap: 8px;
  margin-top: 14px;
}
.up-btn {
  flex: 1; padding: 10px;
  border: none; border-radius: 10px;
  font-size: .82rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.up-btn.primary { background: var(--accent); color: #fff; }
.up-btn.primary:hover { filter: brightness(1.1); }
.up-btn.danger { background: rgba(224,85,85,.12); color: var(--red); border: 1px solid rgba(224,85,85,.25); }
.up-btn.danger:hover { background: rgba(224,85,85,.22); }
.up-btn.muted { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
.up-btn.muted:hover { border-color: var(--text); color: var(--text-hi); }

/* ── Ses Sil ── (delete sound flash) */
@keyframes msgDeleteFlash {
  0%   { background: rgba(224,85,85,.2); }
  100% { background: transparent; }
}
.mb.deleting { animation: msgDeleteFlash .4s ease both; pointer-events: none; }

/* ─────────────────────────────── */

/* ════════════════════════════════════════════════════════
   🌿 NATURE.CO GLASSMORPHISM TEMA v3.0
   Tüm UI'ya uygulanır — CSS değişkenleri override
════════════════════════════════════════════════════════ */

:root {
  /* Renk paleti — teal/emerald */
  --nc-teal:      #0d9488;
  --nc-emerald:   #10b981;
  --nc-emerald2:  #059669;
  --nc-glow:      rgba(16,185,129,0.35);
  --nc-navy:      #070d1a;
  --nc-navy2:     #0b1220;
  --nc-navy3:     #0f1930;

  /* Sistemi override et */
  --bg:           #070d1a;
  --bg2:          #0b1220;
  --surface:      rgba(255,255,255,0.055);
  --surface2:     rgba(255,255,255,0.09);
  --border:       rgba(255,255,255,0.10);
  --purple-dark:  #070d1a;
  --purple:       #0b1220;
  --purple-mid:   rgba(255,255,255,0.08);
  --aubergine:    #070d1a;
  --text:         rgba(224,242,238,0.85);
  --text-hi:      #e8fdf8;
  --muted:        rgba(148,200,188,0.5);
  --green:        #10b981;
  --blue:         #34d399;
  --red:          #f87171;
  --yellow:       #fbbf24;
  --accent:       #10b981;
  --accent2:      #065f46;
  --own-bg:       rgba(16,185,129,0.18);
  --incoming-bg:  rgba(255,255,255,0.07);
}

/* ─── FONT ─── */
html, body, button, input, textarea, select {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.login-title, .c-hdr-name, .ws-hdr-name, .mb-name,
.atab, .tab-lb, .admin-panel-title, .dsk-sec-hdr,
h1, h2, h3 {
  font-family: 'Syne', sans-serif !important;
}

/* ─── AURORA BACKGROUND ─── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 15% 0%, rgba(13,148,136,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 85% 20%, rgba(16,185,129,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(5,150,105,0.08) 0%, transparent 50%);
  animation: nc-aurora 14s ease-in-out infinite alternate;
}
@keyframes nc-aurora {
  0%   { opacity: 1;  transform: scale(1)   rotate(0deg); }
  50%  { opacity: .8; transform: scale(1.04) rotate(.5deg); }
  100% { opacity: 1;  transform: scale(.97)  rotate(-.3deg); }
}

/* Grid texture */
/* grid overlay removed */

.screen { z-index: 1; }

/* ─── LOGIN SCREEN ─── */
#loginScreen {
  background: linear-gradient(145deg, #060c18 0%, #0a1225 40%, #071020 100%) !important;
}
#loginScreen::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(13,148,136,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 85% 90%, rgba(16,185,129,0.12) 0%, transparent 55%) !important;
}
.login-box {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 24px !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 1px 0 rgba(255,255,255,0.12) inset !important;
  animation: nc-float 7s ease-in-out infinite;
}
@keyframes nc-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.login-title {
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #34d399, #10b981 50%, #6ee7b7) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.login-inp {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  border-radius: 12px !important;
  color: var(--text-hi) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.login-inp:focus {
  border-color: rgba(16,185,129,0.5) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.08) !important;
}
.login-btn {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  border-radius: 100px !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  box-shadow: 0 0 28px rgba(16,185,129,0.4), 0 4px 16px rgba(0,0,0,0.3) !important;
  transition: box-shadow .2s, transform .15s !important;
}
.login-btn:hover {
  box-shadow: 0 0 40px rgba(16,185,129,0.6), 0 4px 20px rgba(0,0,0,0.35) !important;
  transform: translateY(-1px) !important;
}
.login-btn:active { transform: scale(.98) !important; }

/* ─── WS-HEADER ─── */
.ws-header, #chatScreen .c-header, .c-header {
  background: rgba(7,13,26,0.75) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.ws-header::before { display: none !important; }

/* ─── TAB BAR ─── */
.tab-bar {
  background: rgba(7,13,26,0.85) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}
.tab { opacity: .42 !important; transition: opacity .2s, transform .15s !important; }
.tab.act { opacity: 1 !important; }
.tab.act .tab-ic-wrap {
  background: rgba(16,185,129,0.15) !important;
  border-radius: 12px !important;
}
.tab.act::before { background: var(--nc-emerald) !important; }
.tab.act .tab-lb { color: #34d399 !important; }

/* ─── MESSAGE BUBBLES ─── */
.mb-text {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 5px 16px 16px 16px !important;
  color: var(--text-hi) !important;
  backdrop-filter: blur(8px) !important;
}
.ob {
  background: rgba(16,185,129,0.15) !important;
  border: 1px solid rgba(16,185,129,0.22) !important;
  border-radius: 16px 5px 16px 16px !important;
  color: #d1fae5 !important;
  box-shadow: 0 0 20px rgba(16,185,129,0.07) !important;
}
.mb-name { letter-spacing: .02em !important; }
.mb.own .mb-name { color: #34d399 !important; }

/* ─── INPUT BOX ─── */
.inp-box {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.inp-box:focus-within {
  border-color: rgba(16,185,129,0.35) !important;
  box-shadow: 0 0 20px rgba(16,185,129,0.06) !important;
}
#msgInp { color: var(--text-hi) !important; }
#msgInp::placeholder { color: var(--muted) !important; }

/* Send button */
#sendBtn, .send-btn-main {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 16px rgba(16,185,129,0.35) !important;
  transition: box-shadow .2s, transform .15s !important;
}
#sendBtn:hover { box-shadow: 0 0 24px rgba(16,185,129,0.55) !important; }

/* ─── ROOMS LIST ─── */
.room-row, .r-row, .dsk-row {
  border-radius: 10px !important;
  transition: background .15s !important;
}
.room-row:hover, .r-row:hover, .dsk-row:hover {
  background: rgba(255,255,255,0.05) !important;
}
.room-row.active, .r-row.active, .dsk-row.active {
  background: rgba(16,185,129,0.1) !important;
  border-left: 2px solid var(--nc-emerald) !important;
}

/* ─── MOBİL ANA SAYFA MODERN LOOK ─── */

/* Arka plan gradient + subtle noise */
#roomsScreen {
  background: linear-gradient(160deg, #0d1829 0%, #0a0f1e 50%, #0d1520 100%) !important;
}
#roomsScreen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(16,185,129,.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 30% at 10% 80%, rgba(59,130,246,.05) 0%, transparent 70%);
}
#roomsScreen > * { position: relative; z-index: 1; }

/* Header modernize */
#roomsScreen .ws-header {
  background: rgba(10,15,30,0.82) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 14px 18px 12px !important;
  padding-top: calc(14px + env(safe-area-inset-top,0px)) !important;
  overflow: visible !important;
}
#roomsScreen .ws-name {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
}

/* Search bar modernize */
#roomsScreen .search-row {
  margin: 10px 14px 6px !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  border-radius: 14px !important;
  padding: 9px 14px !important;
  backdrop-filter: blur(12px) !important;
  transition: border-color .2s, background .2s !important;
}
#roomsScreen .search-row:hover,
#roomsScreen .search-row:active {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(16,185,129,0.25) !important;
}
#roomsScreen .search-row span {
  font-size: .88rem !important;
  color: rgba(255,255,255,0.38) !important;
  font-weight: 500 !important;
}

/* Rooms scroll padding */
#roomsScreen .rooms-scroll {
  padding: 6px 10px 10px !important;
}

/* Section headers */
#roomsScreen .sec-hdr {
  padding: 14px 6px 5px !important;
  font-size: .65rem !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,0.35) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#roomsScreen .sec-hdr::before {
  content: '';
  display: inline-block;
  width: 3px; height: 10px;
  background: var(--accent, #10b981);
  border-radius: 2px;
  opacity: .7;
  flex-shrink: 0;
}
#roomsScreen .sec-hdr .sec-add {
  margin-left: auto !important;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 1rem !important;
  color: rgba(255,255,255,0.5) !important;
  line-height: 1 !important;
  transition: background .15s !important;
}
#roomsScreen .sec-hdr .sec-add:hover { background: rgba(255,255,255,.14) !important; }

/* Room/DM rows */
#roomsScreen .r-row {
  padding: 9px 10px !important;
  margin: 1px 0 !important;
  border-radius: 13px !important;
  transition: background .15s, transform .1s !important;
}
#roomsScreen .r-row:active {
  background: rgba(255,255,255,0.08) !important;
  transform: scale(.99) !important;
}
#roomsScreen .r-row.act {
  background: rgba(var(--accent-rgb, 74,158,122),0.1) !important;
  border-left: 2px solid var(--accent) !important;
}
#roomsScreen .r-row.unread {
  background: rgba(255,255,255,0.05) !important;
}
#roomsScreen .r-row.unread .r-label {
  color: #fff !important;
  font-weight: 900 !important;
}

/* Avatar in rows */
#roomsScreen .r-av {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  font-size: .8rem !important;
  box-shadow: none !important;
}
#roomsScreen .r-dot {
  border-color: var(--bg, #0a0f1e) !important;
}

/* Row label */
#roomsScreen .r-label {
  font-size: .92rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.78) !important;
}
#roomsScreen .r-row.act .r-label { color: #fff !important; }

/* Row sublabel (last message preview) */
#roomsScreen .r-sub {
  font-size: .72rem !important;
  color: rgba(255,255,255,0.35) !important;
  margin-top: 1px !important;
}
#roomsScreen .r-row.unread .r-sub {
  color: rgba(255,255,255,0.55) !important;
}

/* Unread badge */
#roomsScreen .ubadge {
  background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
  box-shadow: 0 2px 8px rgba(74,158,122,.3) !important;
  font-size: .65rem !important;
  padding: 2px 7px !important;
  border-radius: 100px !important;
}

/* NatureBot row special */
#roomsScreen .r-row[data-room-id="naturebot"],
#roomsScreen .r-row .r-label[style*="accent"] {
  background: rgba(16,185,129,.06) !important;
}

/* Section divider feel */
#roomsScreen .rooms-scroll > div:not(.r-row):not(.sec-hdr) { 
  margin-bottom: 4px;
}

/* "ile yeni mesaj başlat" row */
#roomsScreen .r-row .r-icon {
  font-size: .85rem !important;
  color: rgba(255,255,255,0.35) !important;
}
#roomsScreen .r-row.dm-new-row .r-label,
#roomsScreen .r-row[onclick*="openDMModal"] .r-label {
  color: rgba(255,255,255,0.38) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

/* ─── SURFACES / CARDS ─── */
.bs-modal, .admin-panel-wrap, .modal-wrap,
.profile-card, .dsk-panel, .up-card {
  background: rgba(8,14,27,0.82) !important;
  backdrop-filter: blur(28px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 20px !important;
}
.ui-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(10px) !important;
}
.surface, [class*="surface"] {
  background: rgba(255,255,255,0.05) !important;
}

/* ─── ADMIN PANEL ─── */
.admin-tabs {
  background: rgba(7,13,26,0.7) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.atab {
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
.atab.act {
  color: #34d399 !important;
  border-bottom-color: #10b981 !important;
}
.admin-inp, .admin-textarea, .bs-search {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  border-radius: 12px !important;
  color: var(--text-hi) !important;
}
.admin-inp:focus, .admin-textarea:focus, .bs-search:focus {
  border-color: rgba(16,185,129,0.4) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.07) !important;
}

/* ─── BUTTONS GLOBAL ─── */
.ui-btn-primary {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  border-radius: 100px !important;
  box-shadow: 0 0 16px rgba(16,185,129,0.3) !important;
}
.ui-btn-secondary {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 100px !important;
}
.ui-btn-danger {
  background: rgba(248,113,113,0.1) !important;
  border: 1px solid rgba(248,113,113,0.2) !important;
}

/* ─── ONLINE DOT ─── */
.r-dot, .on-dot, [class*="online-dot"] {
  background: var(--nc-emerald) !important;
  box-shadow: 0 0 8px rgba(16,185,129,0.7) !important;
}

/* ─── PROFILE ─── */
.prof-banner { 
  background: linear-gradient(135deg, #064e3b, #065f46, #0f4c35) !important;
}
/* Neon glow only on the ring itself, not the wrapper */
.prof-av-ring {
  box-shadow: none !important;
}

/* ─── DESKTOP RAIL ─── */
#deskRail {
  background: rgba(5,10,20,0.9) !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(20px) !important;
}
.rail-btn.act {
  background: rgba(16,185,129,0.15) !important;
  color: #34d399 !important;
}
#deskSidebar {
  background: rgba(7,13,26,0.78) !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(20px) !important;
}
#deskMain {
  background: rgba(255,255,255,0.02) !important;
}
#deskSidebarHeader {
  background: rgba(7,13,26,0.75) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(20px) !important;
}

/* ─── FORUM ─── */
.forum-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 16px !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.forum-card:hover {
  border-color: rgba(16,185,129,0.3) !important;
  box-shadow: 0 4px 24px rgba(16,185,129,0.08) !important;
}

/* ─── SCROLLBARS ─── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(16,185,129,0.25);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(16,185,129,0.45);
}

/* ─── TOAST ─── */
#toast, ._ntk {
  background: rgba(8,15,28,0.92) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(16,185,129,0.25) !important;
  color: #d1fae5 !important;
  border-radius: 100px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 24px rgba(16,185,129,0.1) !important;
}

/* ─── BOTTOM SHEETS ─── */
.bs-panel {
  background: rgba(8,15,28,0.92) !important;
  backdrop-filter: blur(28px) !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 24px 24px 0 0 !important;
}
.bs-handle {
  background: rgba(255,255,255,0.15) !important;
}

/* ─── META THEME COLOR ─── */
meta[name="theme-color"] { content: #070d1a !important; }

/* ─── REACTION BAR ─── */
.ui-react-bar {
  background: rgba(8,15,28,0.9) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: 100px !important;
}

/* ─── GAME CARDS ─── */
.game-card-wrap, [class*="game-item"], [class*="g-card"] {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 16px !important;
  transition: border-color .2s, transform .2s, box-shadow .2s !important;
}
[class*="game-item"]:hover, [class*="g-card"]:hover {
  border-color: rgba(16,185,129,0.4) !important;
  box-shadow: 0 0 24px rgba(16,185,129,0.15) !important;
  transform: translateY(-3px) !important;
}

/* ─── DATE DIVIDER ─── */
.date-div::before, .date-div::after {
  background: rgba(255,255,255,0.08) !important;
}
.date-txt { color: rgba(148,200,188,0.45) !important; letter-spacing: .06em !important; }

/* ─── SELECTION / HIGHLIGHT ─── */
::selection { background: rgba(16,185,129,0.25); color: #e8fdf8; }

/* ─── CONTEXT MENU ─── */
.ctx-menu, .msg-ctx-menu {
  background: rgba(8,15,28,0.95) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
}

/* ─── UNREAD BADGE ─── */
.stb-badge, [class*="unread-badge"], [class*="notif-badge"] {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  box-shadow: 0 0 10px rgba(16,185,129,0.5) !important;
  color: #fff !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
}

/* ─── SEARCH INPUTS ─── */
.bs-search, [class*="search-inp"], .chat-search-inp {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 100px !important;
  color: var(--text-hi) !important;
}

/* ─── LINKS / ACCENT ─── */
a, .link { color: #34d399 !important; }
a:hover, .link:hover { color: #6ee7b7 !important; }

/* ─── SECTION HEADERS ─── */
.dsk-sec-hdr, .admin-sec-title, .bs-title, .prof-sec-title {
  font-size: .62rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}


/* ══ AVATAR IŞIK EFEKTİ TAMAMEN KALDIRILDI ══ */
.ws-av,
.ws-av:hover,
#myAvatar,
#myAvatar:hover,
#deskRailUser,
#deskRailUser:hover,
.prof-av-ring,
.prof-av-ring:hover,
.prof-av-ring::after,
.prof-av-ring:hover::after,
.prof-av-wrap,
.r-av,
.mb-av,
.dm-av {
  box-shadow: none !important;
  filter: none !important;
  border-color: transparent !important;
  outline: none !important;
}
/* Tüm online dot ve avatar glow efektleri kaldırıldı */
.sdot, .r-dot.on, .rpp-dot {
  box-shadow: none !important;
}
/* Kamera overlay pseudo-element tamamen kaldırıldı */
.prof-av-ring::after,
.prof-av-ring:hover::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
/* ══ AVATAR & ONLINE DOT — TÜM IŞIK EFEKTLERİ KALDIRILDI ══ */
.ws-av,
.ws-av:hover,
#myAvatar,
#myAvatar:hover,
#deskRailUser,
#deskRailUser:hover,
.prof-av-ring,
.prof-av-ring:hover,
.prof-av-wrap,
.r-av,
.mb-av,
.dm-av,
.fr-av,
.dsk-row-av,
.desk-m-av,
[class$="-av"],
[class*="-av-"],
[id$="Avatar"],
[id*="Avatar"] {
  box-shadow: none !important;
  filter: none !important;
  border-color: transparent !important;
  outline: none !important;
}
/* Online dot — sadece renk, glow yok */
.sdot, .r-dot, .r-dot.on, .rpp-dot, .prof-status-dot {
  box-shadow: none !important;
  animation: none !important;
}

/* ─────────────────────────────── */

/* NATURE.CO UI v2 - Mockup Match */
:root {
  --v2-green: #00e87a;
  --v2-teal: #00c9a0;
  /* Override main accent to mockup green */
  --accent: #00e87a !important;
  --green: #00e87a !important;
  --nc-emerald: #00e87a !important;
  --nc-emerald2: #00c463 !important;
}

/* TAB BAR — fix label wrapping on Android */
.tab-lb {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .57rem !important;
  max-width: 52px !important;
}
.tab.act::before { top:auto !important; bottom:0 !important; width:22px !important; height:3px !important; border-radius:3px 3px 0 0 !important; background:var(--v2-green) !important; }
.tab.act .tab-ic-wrap { background:rgba(0,232,122,0.12) !important; border-radius:12px !important; }
.tab.act .tab-lb { color:var(--v2-green) !important; }

/* WATCH SCREEN CARDS */
.watch-mob-grid { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:12px !important; padding:14px !important; }
.watch-mob-card { background:rgba(14,22,28,0.9) !important; border:1px solid rgba(255,255,255,0.08) !important; border-radius:18px !important; padding:18px 12px !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:9px !important; cursor:pointer !important; position:relative !important; overflow:hidden !important; transition:border-color 0.2s, transform 0.15s !important; }
.watch-mob-card:active { transform:scale(0.97) !important; }
.watch-mob-card::before { content:'' !important; position:absolute !important; inset:0 !important; background:linear-gradient(135deg,rgba(0,232,122,0.04),transparent 60%) !important; }
.watch-mob-card .wmc-logo { width:54px !important; height:54px !important; border-radius:14px !important; background:rgba(255,255,255,0.07) !important; border:1px solid rgba(255,255,255,0.1) !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:1.65rem !important; }
.watch-mob-card .wmc-name { font-family:'Syne',sans-serif !important; font-size:.88rem !important; font-weight:800 !important; color:rgba(255,255,255,0.92) !important; text-align:center !important; }
.watch-mob-card .wmc-cat { font-size:.64rem !important; color:rgba(255,255,255,0.35) !important; background:rgba(255,255,255,0.07) !important; padding:2px 8px !important; border-radius:6px !important; font-weight:600 !important; }

/* MESSAGES DM ROW */
.dm-row { display:flex !important; align-items:center !important; gap:12px !important; padding:10px 10px !important; border-radius:14px !important; margin:2px 0 !important; transition:background 0.15s !important; }
.dm-row:active { background:rgba(255,255,255,0.06) !important; }
.dm-av { width:42px !important; height:42px !important; border-radius:50% !important; font-size:.82rem !important; font-weight:900 !important; border:1.5px solid rgba(255,255,255,0.1) !important; }
.dm-name { font-family:'Syne',sans-serif !important; font-size:.95rem !important; font-weight:800 !important; letter-spacing:-0.01em !important; }
.dm-status { font-size:.75rem !important; color:rgba(148,200,188,0.5) !important; margin-top:1px !important; }
#dmSearch { background:rgba(255,255,255,0.07) !important; border:1px solid rgba(255,255,255,0.1) !important; border-radius:14px !important; padding:10px 14px !important; font-size:.88rem !important; }

/* FRIENDS — fix name truncation */
.fr-row { background:rgba(14,22,28,0.8) !important; border:1px solid rgba(255,255,255,0.07) !important; border-radius:16px !important; padding:11px 14px !important; margin:5px 0 !important; transition:border-color 0.2s,background 0.15s !important; }
.fr-row:active { background:rgba(255,255,255,0.05) !important; border-color:rgba(0,232,122,0.15) !important; }
.fr-av { width:42px !important; height:42px !important; border-radius:50% !important; font-size:.82rem !important; font-weight:900 !important; flex-shrink:0 !important; }
.fr-info { flex:1 !important; min-width:0 !important; overflow:hidden !important; }
.fr-name { font-family:'Syne',sans-serif !important; font-size:.92rem !important; font-weight:800 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; max-width:140px !important; }
.fr-btns { flex-shrink:0 !important; gap:6px !important; }
.fr-btn.accept { background:rgba(0,232,122,0.12) !important; border:1px solid rgba(0,232,122,0.25) !important; color:var(--v2-green) !important; border-radius:10px !important; font-weight:700 !important; font-size:.78rem !important; padding:7px 14px !important; }
.fr-btn.msg { background:rgba(0,232,122,0.12) !important; border:1px solid rgba(0,232,122,0.2) !important; color:var(--v2-green) !important; border-radius:10px !important; font-size:.78rem !important; font-weight:700 !important; padding:7px 14px !important; }
.fr-btn.remove, .fr-btn.reject { background:rgba(248,113,113,0.1) !important; border:1px solid rgba(248,113,113,0.2) !important; color:#f87171 !important; border-radius:10px !important; font-size:.78rem !important; padding:7px 14px !important; }
.fr-btn:not(.accept):not(.reject):not(.msg):not(.remove) { background:rgba(255,255,255,0.07) !important; border:1px solid rgba(255,255,255,0.1) !important; color:rgba(255,255,255,0.8) !important; border-radius:10px !important; font-size:.78rem !important; padding:7px 14px !important; }

/* FORUM CARDS */
.forum-card { position:relative !important; border-radius:18px !important; overflow:hidden !important; border:1px solid rgba(255,255,255,0.08) !important; transition:border-color .2s,transform .2s !important; margin-bottom:10px !important; }
.forum-card::before { content:'' !important; position:absolute !important; left:0;top:0;bottom:0 !important; width:3px !important; background:linear-gradient(to bottom,var(--v2-green),var(--v2-teal)) !important; border-radius:3px 0 0 3px !important; display:block !important; z-index:1 !important; }
.forum-card:hover { border-color:rgba(0,232,122,0.22) !important; transform:translateY(-1px) !important; }
.forum-filter-btn,.forum-tab { border-radius:100px !important; font-size:.78rem !important; font-weight:600 !important; padding:6px 13px !important; border:1px solid rgba(255,255,255,0.08) !important; background:rgba(255,255,255,0.06) !important; transition:all .15s !important; cursor:pointer !important; }
.forum-filter-btn.act,.forum-tab.act,.forum-filter-btn:hover,.forum-tab:hover { background:rgba(0,232,122,0.13) !important; color:var(--v2-green) !important; border-color:rgba(0,232,122,0.28) !important; }
.forum-foot-btn { background:rgba(255,255,255,0.05) !important; border:1px solid rgba(255,255,255,0.08) !important; border-radius:100px !important; padding:4px 11px !important; font-size:.74rem !important; transition:background .15s,border-color .15s !important; cursor:pointer !important; }
.forum-foot-btn:hover { background:rgba(0,232,122,0.1) !important; border-color:rgba(0,232,122,0.2) !important; color:var(--v2-green) !important; }

/* ANA SAYFA rooms — match mockup */
#roomsScreen .r-row { padding:10px 12px !important; border-radius:14px !important; margin:2px 0 !important; }
#roomsScreen .r-av { width:38px !important; height:38px !important; border-radius:50% !important; font-size:.78rem !important; }
#roomsScreen .r-label { font-family:'Syne',sans-serif !important; font-size:.92rem !important; font-weight:700 !important; }

/* UNREAD BADGE */
.ubadge { background:linear-gradient(135deg,var(--v2-green),var(--v2-teal)) !important; color:#000 !important; border-radius:100px !important; font-size:.62rem !important; font-weight:800 !important; min-width:18px !important; height:18px !important; padding:0 5px !important; }

/* ONLINE DOT */
.r-dot.on, .sdot { background:var(--v2-green) !important; box-shadow:none !important; animation:none !important; }

/* HEADERS */
.ws-name { font-family:'Syne',sans-serif !important; font-weight:800 !important; letter-spacing:-0.02em !important; font-size:1.15rem !important; }
.sec-hdr { font-size:.65rem !important; font-weight:900 !important; letter-spacing:.1em !important; color:rgba(255,255,255,0.35) !important; }

/* MODAL */
.bs-panel { border-radius:28px 28px 0 0 !important; }

/* SCROLLBAR hidden */
::-webkit-scrollbar { width:0; height:0; }

/* GLOBAL ACCENT overrides */
.login-btn { background:linear-gradient(135deg,#00c463,#00e87a) !important; color:#000 !important; }
#sendBtn, .send-btn-main { background:linear-gradient(135deg,#00c463,#00e87a) !important; }
.tab.act { color:var(--v2-green) !important; }
/* + Ekle button */
.hdr-btn-add, [onclick*="openFriendAdd"], [onclick*="switchFrTab"] {
  background:linear-gradient(135deg,#00c463,#00e87a) !important;
  color:#000 !important;
  border-radius:10px !important;
  font-weight:700 !important;
}

/* ─────────────────────────────── */

#loginScreen .nc-aurora-1 {
  position:absolute;width:500px;height:250px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(13,148,136,.18) 0%,transparent 70%);
  top:-80px;left:-100px;pointer-events:none;
  filter:blur(60px);animation:ncAurora1 12s ease-in-out infinite;
}
#loginScreen .nc-aurora-2 {
  position:absolute;width:400px;height:200px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(16,185,129,.12) 0%,transparent 70%);
  bottom:-60px;right:-80px;pointer-events:none;
  filter:blur(60px);animation:ncAurora1 14s ease-in-out infinite reverse;
}
@keyframes ncAurora1{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.08) rotate(5deg)}}

/* ─────────────────────────────── */

@keyframes ncPulse{0%,100%{opacity:1}50%{opacity:.35}}@keyframes ncFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ─────────────────────────────── */

#profileScreen > div:nth-child(2)::-webkit-scrollbar{display:none}

/* ─────────────────────────────── */

@keyframes searchSlideIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

/* ─────────────────────────────── */

@keyframes notifSlideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
      .gs-filter-btn{background:var(--surface);border:1px solid var(--border);color:var(--muted);font-family:inherit;font-size:.75rem;font-weight:700;padding:5px 12px;border-radius:100px;cursor:pointer;transition:all .15s;}
      .gs-filter-btn:hover,.gs-filter-btn.gs-filter-act{background:var(--accent);border-color:var(--accent);color:#fff;}
      .gs-result-item{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:10px;cursor:pointer;transition:background .12s;}
      .gs-result-item:hover{background:var(--surface);}
      .gs-result-av{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff;flex-shrink:0;}
      .gs-result-info{flex:1;min-width:0;}
      .gs-result-name{font-size:.85rem;font-weight:700;color:var(--text-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
      .gs-result-sub{font-size:.7rem;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
      .gs-chip{font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:100px;flex-shrink:0;}
      .gs-section-title{font-size:.65rem;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:8px 10px 4px;}
      .nc-item{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border);}
      .nc-item:hover{background:var(--surface);}
      .nc-item.unread{background:rgba(91,155,213,.06);}
      .nc-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}
      .nc-text{flex:1;min-width:0;}
      .nc-title{font-size:.78rem;font-weight:700;color:var(--text-hi);margin-bottom:2px;}
      .nc-sub{font-size:.7rem;color:var(--muted);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
      .nc-time{font-size:.62rem;color:var(--muted);white-space:nowrap;flex-shrink:0;}
      .nc-unread-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;flex-shrink:0;margin-top:5px;}

/* ─────────────────────────────── */

/* ═══════════════════════════════════════════
   🚀 MODERNİZASYON PACK — GLOBAL STİLLER
═══════════════════════════════════════════ */

/* ── 1. Sistem Teması Toggle ── */
.sys-theme-toggle {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px;
  cursor: pointer; user-select: none;
  font-size: .82rem; color: var(--text);
  transition: background .15s;
}
.sys-theme-toggle:hover { background: var(--surface2); }
.sys-theme-badge {
  font-size: .65rem; font-weight: 900; padding: 2px 7px;
  border-radius: 100px; background: rgba(91,155,213,.15);
  color: #5b9bd5; border: 1px solid rgba(91,155,213,.25);
}

/* ── 6. Mesaj Zamanlayıcı ── */
#scheduleMsgPanel {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
  z-index: 7200;
  align-items: center; justify-content: center;
  padding: 20px;
}
#scheduleMsgPanel.open { display: flex; }
.schedule-card {
  width: 100%; max-width: 420px;
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  animation: popIn .25s ease both;
}
.schedule-title {
  font-size: 1rem; font-weight: 900; color: var(--text-hi);
  margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}
.schedule-inp {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 13px; color: var(--text-hi);
  font-size: .88rem; font-family: inherit;
  outline: none; margin-bottom: 10px;
  transition: border-color .15s; -webkit-appearance: none;
}
.schedule-inp:focus { border-color: rgba(240,192,64,.4); }
.schedule-inp::placeholder { color: var(--muted); }
.schedule-btns { display: flex; gap: 8px; margin-top: 4px; }
.schedule-confirm {
  flex: 1; padding: 11px;
  background: linear-gradient(135deg, #f0c040, #e0a030);
  border: none; border-radius: 10px; color: #000;
  font-size: .88rem; font-weight: 900;
  cursor: pointer; font-family: inherit;
  transition: filter .15s;
}
.schedule-confirm:hover { filter: brightness(1.08); }
.schedule-cancel-btn {
  padding: 11px 18px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--muted);
  font-size: .88rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.schedule-cancel-btn:hover { color: var(--text-hi); }

/* Scheduled badge on message */
.scheduled-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(240,192,64,.12); border: 1px solid rgba(240,192,64,.25);
  border-radius: 100px; padding: 2px 8px;
  font-size: .62rem; font-weight: 700; color: #f0c040;
  margin-top: 4px;
}

/* Scheduled messages list */
.scheduled-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 8px; font-size: .82rem;
}
.scheduled-list-item .sl-text {
  flex: 1; color: var(--text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.scheduled-list-item .sl-time {
  font-size: .68rem; color: var(--muted); flex-shrink: 0;
}
.scheduled-list-item .sl-cancel {
  cursor: pointer; color: var(--muted); padding: 2px 6px;
  border-radius: 5px; transition: color .15s;
}
.scheduled-list-item .sl-cancel:hover { color: #e05555; }


<script>
'use strict';

/* ═══════════════════════════════════════════════════
   1. 🌙 SİSTEM TEMASI ALGILAMA
═══════════════════════════════════════════════════ */
let _sysThemeEnabled = localStorage.getItem('nc_sysTheme') === '1';

function applySysTheme(dark) {
  if (!_sysThemeEnabled) return;
  const body = document.body;
  const targetTheme = dark ? 'dark' : 'latte';
  if (body.getAttribute('data-theme') !== targetTheme) {
    body.setAttribute('data-theme', targetTheme);
    const banner = document.getElementById('sysThemeBanner');
    if (banner) {
      banner.textContent = dark ? '🌙 Koyu tema uygulandı' : '☀️ Açık tema uygulandı';
      banner.classList.add('show');
      setTimeout(() => banner.classList.remove('show'), 2500);
    }
  }
}

function initSysTheme() {
  if (!window.matchMedia) return;
  const mq = window.matchMedia('(prefers-color-scheme: dark)');
  applySysTheme(mq.matches);
  mq.addEventListener('change', e => applySysTheme(e.matches));
}

function toggleSysTheme() {
  _sysThemeEnabled = !_sysThemeEnabled;
  localStorage.setItem('nc_sysTheme', _sysThemeEnabled ? '1' : '0');
  if (_sysThemeEnabled) {
    initSysTheme();
    showToast('🌙 Sistem teması algılama: AÇIK');
  } else {
    showToast('🎨 Manuel tema kontrolü: AÇIK');
  }
  // Update toggle UI if visible
  const btn = document.getElementById('sysThemeToggleBtn');
  if (btn) btn.querySelector('.sys-theme-badge').textContent = _sysThemeEnabled ? 'AÇIK' : 'KAPALI';
}

if (_sysThemeEnabled) {
  // Apply after a short delay so existing theme logic has run first
  setTimeout(initSysTheme, 1000);
}

// Inject system theme toggle into profile/settings area
function injectSysThemeToggle() {
  // Find theme section in profile
  const appearanceSections = document.querySelectorAll('.ui-style-card, [data-theme-section]');
  // We'll add a persistent button in settings when they open
  const settingsBtn = document.getElementById('sysThemeToggleBtn');
  if (!settingsBtn) {
    // Hook into profile screen loading
    const profTheme = document.querySelector('#profileScreen .prof-section-title');
    if (profTheme) {
      const toggleRow = document.createElement('div');
      toggleRow.style.cssText = 'padding: 4px 0 12px;';
      toggleRow.innerHTML = `
        <div class="sys-theme-toggle" id="sysThemeToggleBtn" onclick="toggleSysTheme()">
          <span>🌙</span>
          <span style="flex:1;">Sistem temasını otomatik uygula</span>
          <div class="sys-theme-badge">${_sysThemeEnabled ? 'AÇIK' : 'KAPALI'}</div>
        </div>
      `;
      profTheme.after(toggleRow);
    }
  }
}

setTimeout(injectSysThemeToggle, 3000);
window._toggleSysTheme = toggleSysTheme;


/* ═══════════════════════════════════════════════════
   6. ⏰ MESAJ ZAMANLAYICI
═══════════════════════════════════════════════════ */
let _scheduledMsgs = JSON.parse(localStorage.getItem('nc_scheduled') || '[]');
let _scheduleTimers = [];

function openSchedulePanel() {
  const panel = document.getElementById('scheduleMsgPanel');
  if (!panel) return;

  // Set min datetime to 1 min from now
  const timeInp = document.getElementById('scheduleMsgTime');
  if (timeInp) {
    const now = new Date(Date.now() + 60000);
    timeInp.min = now.toISOString().slice(0, 16);
    timeInp.value = now.toISOString().slice(0, 16);
  }

  // Pre-fill with current input
  const msgText = document.getElementById('scheduleMsgText');
  const currentInp = document.getElementById('deskInp') || document.getElementById('msgInp');
  if (msgText && currentInp) msgText.value = currentInp.value;

  renderScheduledList();
  panel.classList.add('open');
}

function closeSchedulePanel() {
  const panel = document.getElementById('scheduleMsgPanel');
  if (panel) panel.classList.remove('open');
}

function confirmScheduleMsg() {
  const text = (document.getElementById('scheduleMsgText')?.value || '').trim();
  const timeVal = document.getElementById('scheduleMsgTime')?.value;
  if (!text) { showToast('Mesaj yazın'); return; }
  if (!timeVal) { showToast('Zaman seçin'); return; }

  const scheduledFor = new Date(timeVal).getTime();
  if (scheduledFor <= Date.now()) { showToast('⚠️ Geçmiş bir zaman seçildi'); return; }

  const room = typeof _deskRoom !== 'undefined' ? (_deskRoom || (typeof _cRoom !== 'undefined' ? _cRoom : null)) : null;
  if (!room) { showToast('Önce bir odaya gir'); return; }
  if (typeof _cu === 'undefined') { showToast('Giriş yapın'); return; }

  const item = {
    id: Date.now().toString(),
    text, scheduledFor, room, user: _cu,
    createdAt: Date.now(),
  };

  _scheduledMsgs.push(item);
  localStorage.setItem('nc_scheduled', JSON.stringify(_scheduledMsgs));
  scheduleTimer(item);
  renderScheduledList();

  const d = new Date(scheduledFor);
  const fmt = d.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' }) + ' ' +
    d.toLocaleDateString('tr-TR', { day: 'numeric', month: 'short' });
  showToast('⏰ Mesaj ' + fmt + ' için ayarlandı');

  document.getElementById('scheduleMsgText').value = '';
}

function scheduleTimer(item) {
  const delay = item.scheduledFor - Date.now();
  if (delay <= 0) { sendScheduledMsg(item); return; }
  const timer = setTimeout(() => sendScheduledMsg(item), delay);
  _scheduleTimers.push(timer);
}

function sendScheduledMsg(item) {
  if (typeof dbRef !== 'function' || !item.room) return;
  const msg = {
    user: item.user,
    text: item.text,
    ts: Date.now(),
    scheduled: true,
  };
  dbRef('msgs/' + item.room).push(msg).then(() => {
    showToast('⏰ Zamanlı mesaj gönderildi!');
  });
  // Remove from list
  _scheduledMsgs = _scheduledMsgs.filter(m => m.id !== item.id);
  localStorage.setItem('nc_scheduled', JSON.stringify(_scheduledMsgs));
  renderScheduledList();
}

function cancelScheduledMsg(id) {
  _scheduledMsgs = _scheduledMsgs.filter(m => m.id !== id);
  localStorage.setItem('nc_scheduled', JSON.stringify(_scheduledMsgs));
  renderScheduledList();
  showToast('🗑 Zamanlı mesaj iptal edildi');
}

function renderScheduledList() {
  const listEl = document.getElementById('scheduledMsgList');
  if (!listEl) return;
  const valid = _scheduledMsgs.filter(m => m.scheduledFor > Date.now());
  if (!valid.length) {
    listEl.innerHTML = '';
    return;
  }
  listEl.innerHTML = `
    <div style="font-size:.72rem;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Zamanlanan Mesajlar</div>
    ${valid.map(m => {
      const d = new Date(m.scheduledFor);
      const fmt = d.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' }) + ' · ' +
        d.toLocaleDateString('tr-TR', { day: 'numeric', month: 'short' });
      return `<div class="scheduled-list-item">
        <span class="sl-text">${typeof esc === 'function' ? esc(m.text) : m.text}</span>
        <span class="sl-time">⏰ ${fmt}</span>
        <span class="sl-cancel" onclick="cancelScheduledMsg('${m.id}')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg></span>
      </div>`;
    }).join('')}
  `;
}

// Restore timers on page load
_scheduledMsgs = _scheduledMsgs.filter(m => m.scheduledFor > Date.now());
localStorage.setItem('nc_scheduled', JSON.stringify(_scheduledMsgs));
_scheduledMsgs.forEach(item => scheduleTimer(item));

window.openSchedulePanel = openSchedulePanel;
window.closeSchedulePanel = closeSchedulePanel;
window.confirmScheduleMsg = confirmScheduleMsg;
window.cancelScheduledMsg = cancelScheduledMsg;


</script>


<script id="nc-svg-icons">
/* ════════════════════════════════════════════════════════
   🌿 NATURE.CO SVG İKON SİSTEMİ v3.0
   Tüm emoji karakterlerini keskin SVG ikonlarla değiştirir
════════════════════════════════════════════════════════ */
(function(){
'use strict';

/* ── Renk paleti ── */
const C = {
  em: '#10b981', // emerald
  em2:'#34d399',
  tl: '#0d9488', // teal
  mu: 'rgba(148,200,188,0.65)', // muted
  hi: '#e8fdf8', // high
  rd: '#f87171', // red
  yw: '#fbbf24', // yellow
  bl: '#60a5fa', // blue
  pu: '#a78bfa', // purple
  or: '#fb923c', // orange
  pk: '#f472b6', // pink
  wh: 'rgba(255,255,255,0.85)',
  cy: '#67e8f9', // cyan
};

/* ── SVG builder ── */
const svg = (w, h, content, extra='') =>
  `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 24 24" fill="none" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-flex;vertical-align:middle;flex-shrink:0;${extra}">${content}</svg>`;

const filled = (d, color) => `<path d="${d}" fill="${color}" stroke="none"/>`;
const path   = (d, color, sw='1.75') => `<path d="${d}" stroke="${color}" stroke-width="${sw}" fill="none"/>`;
const circle = (cx,cy,r, color, fill='none') => `<circle cx="${cx}" cy="${cy}" r="${r}" stroke="${color}" fill="${fill}"/>`;
const line   = (x1,y1,x2,y2,color) => `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${color}"/>`;
const rect   = (x,y,w,h,rx, color, fill='none') => `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${rx}" stroke="${color}" fill="${fill}"/>`;
const poly   = (pts, color, fill='none') => `<polygon points="${pts}" stroke="${color}" fill="${fill}"/>`;
const g      = (content) => `<g>${content}</g>`;

/* ── İkon Kütüphanesi ── */
const ICONS = {
  // ─── Navigasyon ───
  '💬': svg(20,20, path('M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z', C.em)),
  '🏠': svg(20,20, path('M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z', C.em)+path('M9 22V12h6v10',C.em)),
  '🌿': svg(20,20, filled('M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14.5v-9l7 4.5-7 4.5z', C.em)),
  '👤': svg(20,20, circle(12,8,4,C.em)+path('M6 20v-2a6 6 0 0 1 12 0v2',C.em)),
  '👥': svg(20,20, circle(9,7,4,C.em)+path('M3 21v-2a4 4 0 0 1 4-4h4',C.em)+circle(17,9,3,C.em2,'none')+path('M21 21v-2a3 3 0 0 0-3-3h-2',C.em2)),
  '🔔': svg(20,20, path('M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9',C.em)+path('M13.73 21a2 2 0 0 1-3.46 0',C.em)),
  '🎮': svg(20,20, rect(2,6,20,12,4,C.em)+path('M6 12h4m-2-2v4',C.em)+circle(16,10,1,C.em,C.em)+circle(18,13,1,C.em,C.em)),
  '🏆': svg(20,20, path('M8 21h8m-4-4v4',C.yw)+path('M7 4H4a1 1 0 0 0-1 1v3a4 4 0 0 0 4 4',C.yw)+path('M17 4h3a1 1 0 0 1 1 1v3a4 4 0 0 1-4 4',C.yw)+path('M7 4h10v7a5 5 0 0 1-10 0V4z',C.yw)),
  '📢': svg(20,20, path('M11 5L6 9H2v6h4l5 4V5z',C.em)+path('M19.07 4.93a10 10 0 0 1 0 14.14',C.mu)+path('M15.54 8.46a5 5 0 0 1 0 7.07',C.em)),
  '📋': svg(20,20, rect(9,2,6,4,1,C.em)+path('M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2',C.em)+path('M9 12h6m-6 4h4',C.em)),
  '⚙️': svg(20,20, circle(12,12,3,C.mu)+path('M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41',C.mu)),
  '🔍': svg(18,18, circle(11,11,8,C.mu)+path('M21 21l-4.35-4.35',C.mu)),
  '✕': svg(16,16, path('M18 6L6 18M6 6l12 12',C.mu,'2')),
  '✓': svg(16,16, path('M20 6L9 17l-5-5',C.em,'2.5')),
  '✓✓': svg(20,16, path('M18 6L7 17l-3-3m6 2l9-11',C.em,'2')),

  // ─── Chat & Mesaj ───
  '📎': svg(18,18, path('M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48',C.mu)),
  '😊': svg(20,20, circle(12,12,10,C.yw)+path('M8 14s1.5 2 4 2 4-2 4-2',C.yw)+line(9,9,9,9.01,C.yw)+line(15,9,15,9.01,C.yw)),
  '🎙️': svg(18,18, rect(9,3,6,10,3,C.em)+path('M5 11a7 7 0 0 0 14 0',C.em)+path('M12 18v3m-3 0h6',C.em)),
  '🖼️': svg(18,18, rect(3,3,18,18,2,C.mu)+circle(8.5,8.5,1.5,C.yw,C.yw)+path('M21 15l-5-5L5 21',C.mu)),
  '📷': svg(18,18, path('M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z',C.mu)+circle(12,13,4,C.em)),
  '🔇': svg(18,18, path('M11 5L6 9H2v6h4l5 4V5z',C.rd)+path('M23 9l-6 6M17 9l6 6',C.rd)),
  '📞': svg(18,18, path('M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.72 12 19.79 19.79 0 0 1 1.23 3.53 2 2 0 0 1 3.22 1h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.09 8.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z',C.em)),
  '✏️': svg(16,16, path('M12 20h9',C.mu)+path('M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z',C.yw)),
  '🗑️': svg(16,16, path('M3 6h18m-2 0l-1 14H6L5 6',C.rd)+path('M8 6V4h8v2',C.rd)+line(10,11,10,17,C.rd)+line(14,11,14,17,C.rd)),
  '📌': svg(16,16, path('M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z',C.rd)+circle(12,10,3,C.hi)),
  '⬆️': svg(14,14, path('M12 19V5m-7 7 7-7 7 7',C.em,'2.5')),
  '↩️': svg(16,16, path('M9 14L4 9l5-5',C.mu)+path('M20 20v-7a4 4 0 0 0-4-4H4',C.mu)),
  '➤': svg(16,16, path('M5 3l14 9-14 9V3z',C.hi,'none')+filled('M5 3l14 9-14 9V3z',C.hi)),
  '▶': svg(12,12, filled('M6 3l12 9-12 9V3z',C.em)),
  '⏸': svg(14,14, rect(6,4,4,16,1,C.em,C.em)+rect(14,4,4,16,1,C.em,C.em)),
  '⏭': svg(14,14, path('M5 4l9 8-9 8V4zm9 0l9 8-9 8V4z',C.em,C.em)+filled('M5 4l9 8-9 8V4zm9 0l9 8-9 8V4z',C.em)),

  // ─── Durum / Bildirim ───
  '🔴': svg(12,12, circle(6,6,5,C.rd,C.rd)),
  '🟢': svg(12,12, circle(6,6,5,C.em,C.em)),
  '🟡': svg(12,12, circle(6,6,5,C.yw,C.yw)),
  '🔵': svg(12,12, circle(6,6,5,C.bl,C.bl)),
  '⚡': svg(16,16, filled('M13 2L4.5 13.5H11L9 22l9.5-12H13L13 2z',C.yw)),
  '🔒': svg(16,16, rect(3,11,18,11,2,C.mu)+path('M7 11V7a5 5 0 0 1 10 0v4',C.mu)),
  '🔓': svg(16,16, rect(3,11,18,11,2,C.em)+path('M7 11V7a5 5 0 0 1 9.9-1',C.em)),
  '👑': svg(20,18, path('M12 2l2.4 7.4L22 7l-3 9H5L2 7l7.6 2.4L12 2z',C.yw,C.yw)+filled('M12 2l2.4 7.4L22 7l-3 9H5L2 7l7.6 2.4L12 2z',C.yw),`opacity:.9`),
  '🌟': svg(18,18, path('M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',C.yw,C.yw)+filled('M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',C.yw)),
  '⭐': svg(16,16, path('M12 2l2.4 7.4L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',C.yw)+filled('M12 2l2.4 7.4L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',C.yw)),
  '❤️': svg(18,18, path('M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z',C.rd)+filled('M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z',C.rd)),
  '💚': svg(16,16, path('M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z',C.em)+filled('M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z',C.em)),
  '👍': svg(16,16, path('M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z',C.bl)+path('M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3',C.bl)),
  '👎': svg(16,16, path('M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3H10z',C.rd)+path('M17 2h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17',C.rd)),
  '😮': svg(16,16, circle(12,12,10,C.yw)+path('M8 14s1.5-2 4-2 4 2 4 2',C.yw)+circle(9,9,1,C.yw,C.yw)+circle(15,9,1,C.yw,C.yw)),
  '😂': svg(16,16, circle(12,12,10,C.yw)+path('M8 15s1.5 2 4 2 4-2 4-2',C.yw)+path('M8 9c.5-1 1.5-1 2 0m4 0c.5-1 1.5-1 2 0',C.yw)),
  '🔥': svg(16,16, path('M12 2c0 6-5 8-5 14a5 5 0 0 0 10 0c0-5-5-8-5-14zm0 0c0 4 3 6 3 9a3 3 0 0 1-6 0c0-3 3-5 3-9z',C.or)+filled('M12 5c0 3 2 5 2 8a2 2 0 0 1-4 0c0-3 2-5 2-8z',C.yw)),

  // ─── Admin / Panel ───
  '🛡️': svg(18,18, path('M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',C.bl)),
  '📊': svg(18,18, line(18,20,18,10,C.em)+line(12,20,12,4,C.em)+line(6,20,6,14,C.em)),
  '📈': svg(18,18, path('M22 12l-4-4-4 4-4-4L4 14',C.em)+path('M4 20v-6',C.mu)+path('M20 20v-8',C.mu)),
  '🗓️': svg(16,16, rect(3,4,18,18,2,C.mu)+path('M16 2v4M8 2v4M3 10h18',C.mu)+path('M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01',C.em,'2.5')),
  '📝': svg(16,16, path('M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z',C.mu)+path('M14 2v6h6m-4 5H8m8 4H8m2-8H8',C.em)),
  '⚠️': svg(18,18, path('M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z',C.yw)+line(12,9,12,13,C.yw,'2.5')+line(12,17,12.01,17,C.yw,'2.5')),
  '🌐': svg(16,16, circle(12,12,10,C.bl)+path('M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z',C.bl)+path('M2 12h20',C.bl)),
  '🤖': svg(20,20, rect(3,11,18,11,2,C.em)+rect(7,4,10,7,2,C.em)+circle(9,15,1.5,C.em2,C.em2)+circle(15,15,1.5,C.em2,C.em2)+path('M9.5 8H7m3.5 0h3m3.5 0H14',C.em)),
  '💡': svg(16,16, path('M9 21h6m-3-3v-4',C.yw)+path('M12 2a7 7 0 0 1 5 11.9 7 7 0 0 1-10 0A7 7 0 0 1 12 2z',C.yw)),
  '📧': svg(16,16, rect(2,4,20,16,2,C.mu)+path('M22 7l-10 7L2 7',C.em)),
  '🔗': svg(16,16, path('M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71',C.bl)+path('M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',C.bl)),
  '➕': svg(14,14, path('M12 5v14M5 12h14',C.em,'2.5')),
  '✖': svg(14,14, path('M18 6L6 18M6 6l12 12',C.rd,'2.5')),
  '🔄': svg(16,16, path('M1 4v6h6',C.bl)+path('M23 20v-6h-6',C.bl)+path('M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15',C.bl)),

  // ─── Doğa / Tema ───
  '🌱': svg(16,16, path('M12 22V12m0 0a6 6 0 0 1 6-6c0 3.31-2.69 6-6 6zm0 0a6 6 0 0 0-6-6c0 3.31 2.69 6 6 6z',C.em)),
  '🌙': svg(16,16, path('M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z',C.yw,C.yw)+filled('M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z',C.yw,'opacity:.8')),
  '☀️': svg(16,16, circle(12,12,5,C.yw)+path('M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42',C.yw)),
  '❄️': svg(16,16, path('M2 12h20M12 2v20m-4.24-4.24 8.48-11.52m0 11.52-8.48-11.52',C.cy,'2')),
  '🎵': svg(16,16, path('M9 18V5l12-2v13',C.em)+circle(6,18,3,C.em)+circle(18,16,3,C.em)),
  '🎨': svg(16,16, path('M12 2a10 10 0 0 0 0 20c.6 0 1-.4 1-1v-1c0-.5.4-1 1-1 5.5 0 8-4 8-9A9 9 0 0 0 12 2z',C.pk)+circle(8.5,9.5,1.5,C.hi,C.hi)+circle(14,8,1.5,C.yw,C.yw)+circle(15.5,13.5,1.5,C.bl,C.bl)),
  '🕐': svg(16,16, circle(12,12,10,C.mu)+path('M12 6v6l4 2',C.em)),
  '📡': svg(18,18, path('M5.03 9.5a8.5 8.5 0 0 0 0 5m5.97-9.5a3.5 3.5 0 0 0 0 14',C.bl)+path('M1.42 2.82a19 19 0 0 0 0 18.36M22.58 2.82a19 19 0 0 0 0 18.36',C.mu)+circle(12,12,3,C.em,C.em)),

  // ─── Profil ───
  '🧬': svg(18,18, path('M12 2c-1.5 3-3 4.5-3 7s1.5 4 3 7m0-14c1.5 3 3 4.5 3 7s-1.5 4-3 7',C.pu)+line(9,7,15,7,C.mu)+line(9,17,15,17,C.mu)+line(8,12,16,12,C.em)),
  '🌿': svg(18,18, path('M6 3v12',C.em)+path('M18 9a6 6 0 0 1-6 6H6',C.em)+circle(6,9,3,C.em2)+path('M6 15v6',C.em)),
  '🏅': svg(16,16, circle(12,8,6,C.yw)+path('M8.56 2.75c4.37 6.03 6.02 9.42 8.03 17.72m2.54-15.38c-3.72 4.35-8.94 5.66-16.88 5.85m19.5 1.9c-3.5-.93-6.63-.82-8.94 0-2.58.92-5.01 2.86-7.44 6.32',C.yw)),
  '🎭': svg(16,16, path('M2 12c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 10-10 10S2 17.5 2 12z',C.or)+path('M7 9c.5-1 1.5-1 2 0m6 0c.5-1 1.5-1 2 0M7 15s1 2 5 2 5-2 5-2',C.or)),

  // ─── Oyunlar ───
  '🏈': svg(16,16, path('M12 2c-5.5 0-9 3.5-9 9s3.5 9 9 9 9-3.5 9-9-3.5-9-9-9z',C.or)+path('M7 7l10 10M17 7L7 17m0-5h10M12 7v10',C.wh)),
  '🎯': svg(16,16, circle(12,12,10,C.rd)+circle(12,12,6,C.wh,C.wh)+circle(12,12,2,C.rd,C.rd)),
  '🎲': svg(16,16, rect(2,2,20,20,4,C.mu)+circle(8,8,1.5,C.wh,C.wh)+circle(16,8,1.5,C.wh,C.wh)+circle(8,16,1.5,C.wh,C.wh)+circle(16,16,1.5,C.wh,C.wh)+circle(12,12,1.5,C.wh,C.wh)),
  '🏋': svg(16,16, path('M6 18l-2-2V8l2-2m12 12 2-2V8l-2-2m-5 2v12',C.em)+path('M9 6h6m-3 0v12',C.em,'2.5')),
  '💣': svg(16,16, circle(11,13,7,C.hi,C.hi)+path('M11 4c2-2 5-1 6 2m-8-2 2-2 1 1',C.mu)),

  // ─── Forum / İçerik ───
  '📰': svg(16,16, path('M4 22h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 0-2 2V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2z',C.mu)+path('M10 12h6m-6 4h6m-6-8h6',C.em)),
  '🔖': svg(14,14, path('M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z',C.em)),
  '💬': svg(18,18, path('M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',C.em)),
  '💭': svg(18,18, path('M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',C.mu)+circle(9,10,1,C.em,C.em)+circle(12,10,1,C.em,C.em)+circle(15,10,1,C.em,C.em)),

  // ─── Misc ───
  '📤': svg(16,16, path('M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4',C.em)+path('M17 8l-5-5-5 5m5-5v12',C.em)),
  '📥': svg(16,16, path('M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4',C.em)+path('M7 10l5 5 5-5m-5 5V3',C.em)),
  '🚀': svg(18,18, path('M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z',C.em)+path('M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z',C.em)+path('M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5',C.em2)),
  '💾': svg(16,16, path('M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z',C.bl)+path('M17 21v-8H7v8M7 3v5h8',C.bl)),
  '🔑': svg(16,16, circle(7.5,15.5,5.5,C.yw)+path('M10.85 12.85 19 5m-4 1 2 2',C.yw)),
  '📲': svg(16,16, rect(7,2,10,20,2,C.em)+path('M12 18h.01',C.em,'2.5')+path('M17 2l3 3-3 3m-6-3h6',C.mu)),
  '🌍': svg(16,16, circle(12,12,10,C.bl)+path('M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z',C.bl)+path('M2 12h20',C.bl)),
  '🏃': svg(16,16, circle(13,4,2,C.em)+path('M7 22l4-8m-4-2l2-3m3-3l4 3m-4 5l-3 5',C.em,'2')+path('M15 9l2 2-4 3',C.em,'2')),
  '🧠': svg(16,16, path('M12 5a5 5 0 0 0-5 5c0 1.36.55 2.6 1.44 3.5H7a2 2 0 0 0-2 2v1h10v-1a2 2 0 0 0-2-2h-1.44A4.98 4.98 0 0 0 17 10a5 5 0 0 0-5-5z',C.pk)),
  '🏛': svg(16,16, rect(2,20,20,2,0,C.mu)+rect(4,8,2,12,0,C.mu)+rect(9,8,2,12,0,C.mu)+rect(14,8,2,12,0,C.mu)+rect(19,8,2,12,0,C.mu)+path('M2 8l10-6 10 6',C.em)),
  '🎓': svg(16,16, path('M22 10v6M2 10l10-5 10 5-10 5z',C.em)+path('M6 12v5c3 3 9 3 12 0v-5',C.em)),
  '💰': svg(16,16, circle(12,12,10,C.yw)+path('M14.31 8l-4.62 8M8 8h8m-1.38 5H9',C.hi)),
};

/* ── UI'da kullanılan icon shortcodes ── */
const SHORTCODES = {
  ':home:': ICONS['🏠'],
  ':chat:': ICONS['💬'],
  ':games:': ICONS['🎮'],
  ':profile:': ICONS['👤'],
  ':bell:': ICONS['🔔'],
  ':settings:': ICONS['⚙️'],
  ':search:': ICONS['🔍'],
  ':send:': ICONS['➤'],
  ':close:': ICONS['✕'],
  ':check:': ICONS['✓'],
  ':plus:': ICONS['➕'],
  ':trash:': ICONS['🗑️'],
  ':edit:': ICONS['✏️'],
  ':lock:': ICONS['🔒'],
  ':crown:': ICONS['👑'],
  ':star:': ICONS['⭐'],
  ':heart:': ICONS['❤️'],
  ':fire:': ICONS['🔥'],
  ':shield:': ICONS['🛡️'],
  ':chart:': ICONS['📊'],
  ':link:': ICONS['🔗'],
  ':mic:': ICONS['🎙️'],
  ':attach:': ICONS['📎'],
  ':emoji:': ICONS['😊'],
  ':globe:': ICONS['🌐'],
};

/* ── Replace text nodes with SVGs ── */
const SKIP_TAGS = new Set(['SCRIPT','STYLE','TEXTAREA','INPUT','CODE','PRE','TITLE']);
const EMOJI_RE = /[\u{1F000}-\u{1FFFF}\u{2600}-\u{27FF}\u{2B00}-\u{2BFF}\u{1F300}-\u{1F9FF}]/gu;

function replaceEmojisInNode(node) {
  if (node.nodeType === 3) { // TEXT_NODE
    const text = node.textContent;
    if (!EMOJI_RE.test(text)) return;
    EMOJI_RE.lastIndex = 0;
    const frag = document.createDocumentFragment();
    let last = 0, match;
    EMOJI_RE.lastIndex = 0;
    while ((match = EMOJI_RE.exec(text)) !== null) {
      const em = match[0];
      const svgStr = ICONS[em];
      if (!svgStr) continue;
      if (match.index > last) frag.appendChild(document.createTextNode(text.slice(last, match.index)));
      const span = document.createElement('span');
      span.className = 'nc-icon';
      span.innerHTML = svgStr;
      span.style.cssText = 'display:inline-flex;align-items:center;vertical-align:middle;';
      frag.appendChild(span);
      last = match.index + em.length;
    }
    if (last === 0) return;
    if (last < text.length) frag.appendChild(document.createTextNode(text.slice(last)));
    node.parentNode.replaceChild(frag, node);
  } else if (node.nodeType === 1) {
    if (SKIP_TAGS.has(node.tagName)) return;
    // Don't recurse into already-processed spans
    if (node.classList && node.classList.contains('nc-icon')) return;
    Array.from(node.childNodes).forEach(replaceEmojisInNode);
  }
}

/* ── Tab bar icons (SVG replacement for tab-ic) ── */
const TAB_SVG_MAP = {
  'home':    ICONS['🏠'],
  'rooms':   ICONS['📢'],
  'chat':    ICONS['💬'],
  'forum':   ICONS['📋'],
  'profile': ICONS['👤'],
  'friends': ICONS['👥'],
  'games':   ICONS['🎮'],
  'notif':   ICONS['🔔'],
  'tv':      svg(20,20, rect(2,3,20,15,2,C.em)+path('M8 21h8m-4-3v3',C.em)),
};

function injectTabIcons() {
  document.querySelectorAll('.tab').forEach(tab => {
    const ic = tab.querySelector('.tab-ic');
    if (!ic) return;
    const t = ic.textContent.trim();
    // If it's an emoji we have an SVG for, replace it
    const svgStr = ICONS[t];
    if (svgStr) {
      ic.innerHTML = '';
      ic.insertAdjacentHTML('beforeend', svgStr);
      ic.style.cssText = 'display:flex;align-items:center;justify-content:center;font-size:0;';
    }
  });
}

/* ── Rail icons (desktop) ── */
function injectRailIcons() {
  document.querySelectorAll('.rail-btn').forEach(btn => {
    const ic = btn.querySelector('.rail-ic, [class*="rail-icon"]');
    if (!ic) return;
    const t = ic.textContent.trim();
    const svgStr = ICONS[t];
    if (svgStr) { ic.innerHTML = svgStr; ic.style.fontSize = '0'; }
  });
}

/* ── Attr-based icon injection ── */
function injectAttrIcons() {
  // data-icon="emoji" attributes
  document.querySelectorAll('[data-icon]').forEach(el => {
    const key = el.getAttribute('data-icon');
    const svgStr = ICONS[key] || SHORTCODES[key];
    if (svgStr) el.innerHTML = svgStr;
  });
}

/* ── Run on DOM ready ── */
function runIconSystem() {
  injectTabIcons();
  injectRailIcons();
  injectAttrIcons();
  // Selectively replace emojis in UI elements (not message content to preserve emoji reactions)
  const uiZones = [
    '.ws-header', '.tab-bar', '.admin-tabs', '.admin-panel-wrap',
    '.c-header', '.bs-title', '.prof-sec-title', '.dsk-sec-hdr',
    '#deskRail', '#deskSidebarHeader', '.atab', '.hdr-btn',
    '.login-title', '.login-box .login-sub',
  ];
  uiZones.forEach(sel => {
    document.querySelectorAll(sel).forEach(el => {
      replaceEmojisInNode(el);
    });
  });
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    setTimeout(runIconSystem, 200);
    // Re-run after dynamic content loads
    setTimeout(runIconSystem, 1500);
  });
} else {
  setTimeout(runIconSystem, 200);
  setTimeout(runIconSystem, 1500);
}

// MutationObserver for dynamic UI elements
const mobserver = new MutationObserver(mutations => {
  let needsUpdate = false;
  for (const m of mutations) {
    if (m.addedNodes.length > 0) { needsUpdate = true; break; }
  }
  if (needsUpdate) setTimeout(runIconSystem, 100);
});
document.addEventListener('DOMContentLoaded', () => {
  mobserver.observe(document.body, { childList: true, subtree: true });
});

/* ── Global erişim ── */
window.NC_ICONS = ICONS;
window.nc_replaceIcons = runIconSystem;

})();

<style>
/* ═══════════════════════════════════════════════════
   🎨 UI UPGRADE PACK
   1. Profil Glass Drawer
   2. NatureBot Voice Widget Enhancement
   3. iOS Widget Panel
   4. Forum Card Glassmorphism
═══════════════════════════════════════════════════ */

/* ── 1. PROFİL GLASS DRAWER ── */
#profileDrawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 300px; max-width: 92vw;
  background: rgba(20,22,28,0.75);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-left: 1px solid rgba(255,255,255,0.1);
  box-shadow: -16px 0 48px rgba(0,0,0,0.5);
  z-index: 8500;
  display: flex; flex-direction: column;
  padding: 0 0 24px;
  transform: translateX(105%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  overflow-x: hidden;
}
#profileDrawer.open { transform: translateX(0); }
#profileDrawerOverlay {
  position: fixed; inset: 0; z-index: 8499;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
#profileDrawerOverlay.open { opacity: 1; pointer-events: auto; }

/* Drawer header */
.pdr-header {
  padding: 20px 20px 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.pdr-close {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer; font-size: .85rem;
  transition: background .15s;
}
.pdr-close:hover { background: rgba(255,255,255,0.14); }

/* Avatar glow removed - no neon effects on avatars */
.prof-av-ring.neon-glow { box-shadow: none; }
[data-theme="dark"] .prof-av-ring.neon-glow { --glow-rgb: 91,155,213; }
[data-theme="forest"] .prof-av-ring.neon-glow { --glow-rgb: 76,175,80; }
[data-theme="ocean"] .prof-av-ring.neon-glow { --glow-rgb: 41,182,246; }
[data-theme="sunset"] .prof-av-ring.neon-glow { --glow-rgb: 240,98,146; }
[data-theme="midnight"] .prof-av-ring.neon-glow { --glow-rgb: 156,39,176; }

/* Drawer nav - reuses .prof-act logic, new container */
.pdr-nav { padding: 0 12px; }
.pdr-nav .prof-act { border-radius: 12px; }
.pdr-nav .prof-act:hover { background: rgba(255,255,255,0.07); }
.pdr-divider { height: 1px; background: var(--border); margin: 8px 20px; }

/* ── 2. NATUREBOT VOICE WIDGET ENHANCEMENT ── */
/* Mevcut #botVoiceWave zaten var — bar sayısını artır, boyutu büyüt */
#botVoiceWave {
  gap: 3px !important;
  padding: 8px 16px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(14,43,12,0.92), rgba(20,60,18,0.92)) !important;
  border: 1px solid rgba(74,143,64,0.5) !important;
  box-shadow: 0 0 24px rgba(74,143,64,0.2), 0 8px 32px rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
/* Genişletilmiş waveform barları (NatureBotPet JS ile eklenir) */
.bvw-bar {
  transition: height .1s ease !important;
}
/* Bot bubble glassmorphism yükseltme */
#natureBotBubble {
  background: linear-gradient(135deg, rgba(14,43,12,0.88), rgba(22,52,20,0.88)) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(74,143,64,0.45) !important;
  box-shadow: 0 0 32px rgba(74,143,64,0.15), 0 16px 48px rgba(0,0,0,0.6) !important;
  border-radius: 18px 18px 18px 4px !important;
}
/* Listening state - bot konuştuğunda waveform göster */
#botVoiceWave.visible {
  display: flex !important;
  animation: botWaveAppear .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes botWaveAppear {
  from { transform: scale(.8) translateY(8px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── 3. iOS WIDGET PANELİ ── */
#widgetsPanelToggle {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: .8rem; color: var(--text);
  transition: all .18s;
  user-select: none;
}
#widgetsPanelToggle:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(var(--glow-rgb,91,155,213),0.4);
}
#widgetsPanel {
  position: fixed;
  top: 56px; right: 16px;
  width: 280px;
  z-index: 7800;
  display: none; flex-direction: column; gap: 10px;
  padding: 4px 0;
  animation: widgetSlideIn .22s cubic-bezier(.34,1.56,.64,1);
}
#widgetsPanel.open { display: flex; }
@keyframes widgetSlideIn {
  from { opacity: 0; transform: translateY(-10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Widget kartları - varolan surface/border değişkenlerini kullanır */
.ios-widget {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.ios-widget-label {
  font-size: .6rem; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
/* Saat widget */
.w-clock-time {
  font-size: 2rem; font-weight: 900;
  color: var(--text-hi); letter-spacing: -.03em; line-height: 1;
  margin-bottom: 2px;
}
.w-clock-date { font-size: .72rem; color: var(--muted); }
/* Online sayaç widget - varolan .green rengi kullanır */
.w-online-count {
  font-size: 1.8rem; font-weight: 900;
  color: var(--green);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.w-online-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.w-online-bar {
  height: 4px; background: rgba(255,255,255,0.08);
  border-radius: 4px; overflow: hidden; margin-bottom: 6px;
}
.w-online-fill {
  height: 100%; background: var(--green);
  border-radius: 4px;
  transition: width 1s ease;
}
.w-online-sub { font-size: .7rem; color: var(--muted); }
/* Hava widget */
.w-weather-main { display: flex; align-items: center; gap: 14px; }
.w-weather-temp { font-size: 1.8rem; font-weight: 900; color: var(--text-hi); line-height: 1; }
.w-weather-desc { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.w-weather-icon { font-size: 2.4rem; }
.w-weather-details { display: flex; gap: 12px; margin-top: 10px; }
.w-weather-detail { font-size: .7rem; color: var(--muted); }

/* ── 4. FORUM CARD GLASSMORPHİSM ── */
/* Mevcut .forum-card'a glassmorphism ekle — sıfırdan yazmıyoruz */
.forum-card {
  background: rgba(255,255,255,0.045) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 16px !important;
  transition: all .22s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.forum-card:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(var(--glow-rgb,91,155,213),0.3) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 30px rgba(var(--glow-rgb,91,155,213),0.06) !important;
  transform: translateY(-2px);
}
/* Forum kart içi resim desteği */
.forum-card-img {
  width: calc(100% + 28px); /* padding compensate */
  margin: -14px -14px 12px;
  height: 160px; object-fit: cover;
  border-radius: 14px 14px 0 0;
  display: block;
}
.forum-card-img-emoji {
  width: calc(100% + 28px);
  margin: -14px -14px 12px;
  height: 120px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem;
  border-radius: 14px 14px 0 0;
}
/* Forum kart etiket (kategori pill) güncelleme */
.forum-card-cat {
  background: rgba(var(--glow-rgb,91,155,213),0.12) !important;
  border-color: rgba(var(--glow-rgb,91,155,213),0.25) !important;
  color: var(--accent) !important;
}

/* ─────────────────────────────── */

/* ══════════════════════════════════════════════
   🌿 KARBON AYAK İZİ MODALİ
══════════════════════════════════════════════ */
#carbonModalOverlay {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
#carbonModalOverlay.open { display: flex; }
#carbonModal {
  width: 100%; max-width: 380px;
  background: var(--bg2);
  border: 1px solid rgba(46,204,113,.2);
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 0 40px rgba(46,204,113,.1), 0 24px 60px rgba(0,0,0,.5);
  animation: cmSlide .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cmSlide {
  from { opacity:0; transform:scale(.92) translateY(12px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.cm-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.cm-title { font-size:1rem; font-weight:900; color:var(--text-hi); display:flex; align-items:center; gap:8px; }
.cm-close { width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.07);border:none;color:var(--muted);cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center; }
.cm-close:hover { background:rgba(255,255,255,.14); }
.cm-score-wrap {
  text-align:center; margin-bottom:20px;
  padding: 18px 0 14px;
  background: rgba(46,204,113,.06);
  border: 1px solid rgba(46,204,113,.15);
  border-radius: 16px;
}
.cm-score-num { font-size:2.2rem; font-weight:900; color:#2ecc71; line-height:1; margin-bottom:4px; }
.cm-score-lbl { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.cm-score-grade {
  display:inline-block; margin-top:10px;
  padding:3px 14px; border-radius:100px; font-size:.72rem; font-weight:900;
}
.cm-items { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.cm-item {
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:10px 14px;
}
.cm-item-icon { font-size:1.2rem; width:32px; text-align:center; flex-shrink:0; }
.cm-item-label { flex:1; font-size:.82rem; color:var(--text); }
.cm-item-val { font-size:.82rem; font-weight:900; color:#2ecc71; }
.cm-tip {
  font-size:.75rem; color:var(--muted); line-height:1.6;
  background:rgba(46,204,113,.05); border:1px solid rgba(46,204,113,.12);
  border-radius:12px; padding:10px 14px;
}

/* ══════════════════════════════════════════════
   🎵 DOĞA SESLERİ PANELİ
══════════════════════════════════════════════ */
#ambiancePanelOverlay {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
#ambiancePanelOverlay.open { display: flex; }
#ambiancePanel {
  width: 100%; max-width: 360px;
  background: var(--bg2);
  border: 1px solid rgba(91,155,213,.2);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  animation: cmSlide .25s cubic-bezier(.34,1.56,.64,1);
}
.ap-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.ap-title { font-size:1rem; font-weight:900; color:var(--text-hi); display:flex; align-items:center; gap:8px; }
.ap-tracks { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.ap-track {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border);
  cursor:pointer; transition:all .18s; user-select:none;
}
.ap-track:hover { background:var(--surface2); border-color:rgba(91,155,213,.3); }
.ap-track.playing { background:rgba(91,155,213,.1); border-color:rgba(91,155,213,.4); }
.ap-track-icon { font-size:1.3rem; width:32px; text-align:center; flex-shrink:0; }
.ap-track-name { flex:1; font-size:.85rem; font-weight:700; color:var(--text-hi); }
.ap-track-state { font-size:.7rem; color:var(--muted); }
.ap-track.playing .ap-track-state { color:var(--accent); }
.ap-vol-wrap { margin-bottom:16px; }
.ap-vol-label { font-size:.68rem; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.ap-vol-row { display:flex; align-items:center; gap:10px; }
.ap-vol-slider {
  flex:1; -webkit-appearance:none; height:4px;
  background: linear-gradient(90deg, var(--accent) var(--pct,70%), rgba(255,255,255,.1) var(--pct,70%));
  border-radius:4px; outline:none; cursor:pointer;
}
.ap-vol-slider::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); cursor:pointer; }
.ap-vol-num { font-size:.72rem; font-weight:900; color:var(--text-hi); width:28px; text-align:right; }
.ap-stop-btn {
  width:100%; padding:10px; border:none; border-radius:12px;
  background:rgba(224,85,85,.15); border:1px solid rgba(224,85,85,.25);
  color:#f07070; font-size:.82rem; font-weight:700; cursor:pointer;
  transition:all .18s;
}
.ap-stop-btn:hover { background:rgba(224,85,85,.25); }

/* ══════════════════════════════════════════════════════════
   📱 MOBİL KOMPAKT — iOS Safari & PWA uyumlu
   ══════════════════════════════════════════════════════════ */

/* Pull-to-refresh engeli — body/html'yi kırmadan */
html {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: auto;
}
body {
  overscroll-behavior-y: none;
}

/* iOS Safari'de ekran tam dolsun — fixed top:0 bottom:0 yeterli */
.screen {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
}

@media (max-width: 767px) {

  /* ── Temel font küçültme ── */
  html { font-size: 13px !important; }

  /* ── App yükseklik — iOS Safari address bar hesabı ── */
  body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }

  /* ── Alt Tab Bar ── */
  .tab-bar {
    padding-top: 4px !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 6px) !important;
    flex-shrink: 0 !important;
  }
  .tab {
    padding: 5px 2px 4px !important;
    gap: 1px !important;
    flex: 1 !important;
  }
  .tab-ic-wrap {
    width: 30px !important;
    height: 24px !important;
    border-radius: 8px !important;
    margin-bottom: 0 !important;
  }
  .tab-ic { font-size: 1.05rem !important; }
  .tab-ic svg { width: 17px !important; height: 17px !important; }
  .tab-lb { font-size: .52rem !important; }
  .tab.act::before { width: 18px !important; height: 2px !important; }

  /* ── Header & Başlıklar ── */
  .ws-header {
    min-height: 48px !important;
    padding: 8px 14px !important;
    padding-top: calc(4px + env(safe-area-inset-top, 0px)) !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .ws-name, #wsHeaderName {
    font-size: .9rem !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    max-width: 100px !important;
  }
  /* Karbon widget sağda kalacak şekilde header düzenle */
  .ws-header > div[style*="margin-left:auto"],
  .ws-header > div[style*="margin-left: auto"] {
    flex-shrink: 0 !important;
    gap: 6px !important;
  }
  /* Header sağdaki buton ve avatar boyutları */
  .ws-header .hdr-av, .ws-header [style*="width:32px"] {
    width: 26px !important;
    height: 26px !important;
  }
  .ws-header [style*="width:36px"], .ws-header [style*="width: 36px"] {
    width: 28px !important;
    height: 28px !important;
  }
  .c-header {
    min-height: 46px !important;
    padding: 7px 12px !important;
    padding-top: calc(7px + env(safe-area-inset-top, 0px)) !important;
    flex-shrink: 0 !important;
  }
  .ws-header svg, .hdr-btn svg, .c-header svg {
    width: 17px !important; height: 17px !important;
  }

  /* ── Karbon widget küçült ── */
  #carbonWidget {
    font-size: .62rem !important;
    padding: 2px 7px !important;
    flex-shrink: 0 !important;
    gap: 3px !important;
  }
  #carbonWidget svg { width: 11px !important; height: 11px !important; }
  #carbonCount { font-size: .62rem !important; }

  /* ── Arama kutusu ── */
  .rooms-search, #msgsSearch {
    padding: 6px 12px !important;
    flex-shrink: 0 !important;
  }
  .rooms-search input, #msgsSearchInput, [placeholder="Kişi ara..."] {
    font-size: .82rem !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
  }

  /* ── Section header (KANALLAR, GRUPLAR) ── */
  .sec-hdr {
    font-size: .58rem !important;
    padding: 8px 14px 2px !important;
    letter-spacing: .08em !important;
  }

  /* ── Oda listesi öğeleri ── */
  .r-item {
    padding: 6px 14px !important;
    min-height: 34px !important;
  }
  .r-label { font-size: .82rem !important; }

  /* ── DM / Friends liste öğeleri ── */
  .dm-row, .fr-row {
    padding: 8px 14px !important;
    gap: 10px !important;
  }
  .dm-av, .fr-av {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    font-size: .74rem !important;
    flex-shrink: 0 !important;
  }
  .dm-name, .fr-name {
    font-size: .85rem !important;
    font-weight: 700 !important;
  }
  .dm-status, .fr-status { font-size: .68rem !important; }
  .fr-btn {
    padding: 6px 12px !important;
    font-size: .72rem !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  /* ── Scroll alanları tam dolsun ── */
  .rooms-scroll, .dm-list-scroll, .fr-scroll {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* ── Mesaj input ── */
  #msgInp, .msg-input {
    font-size: .84rem !important;
  }
  .inp-wrap {
    flex-shrink: 0 !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px) !important;
  }

  /* ── WS Header simge boyutları ── */
  .ws-header .hdr-av {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
  }
  .ws-header > div[style*="width:32px"],
  .ws-header > div > div[style*="width:32px"] {
    width: 26px !important;
    height: 26px !important;
  }

  /* ── Chat ekranı tam doldur ── */
  
  #chatMsgs {
    flex: 1 !important;
    min-height: 0 !important;
  }
  .inp-wrap {
    flex-shrink: 0 !important;
  }
}
/* ══════════════════════════════════════════════════════════ */

/* ── PWA Standalone mod — tab bar tam alta sabitlenir ── */
@media (display-mode: standalone) {
  .tab-bar {
    bottom: 0 !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px) !important;
  }
  .screen {
    height: 100dvh !important;
  }
}

/* ══ WhatsApp-style mesaj baloncukları ══ */
.mb {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 2px 10px;
  max-width: 100%;
}
.mb.own { flex-direction: row-reverse; }
.mb.first { margin-top: 6px; }
.mb.own.first { margin-top: 6px; }

/* Avatar - sadece gelen mesajlar, ilk grupta */
.mb .av {
  width: 26px; height: 26px; border-radius: 50%;
  flex-shrink: 0; font-size: .6rem; font-weight: 700;
  color: #fff; display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px; align-self: flex-end;
}
.mb .av.ghost { visibility: hidden; }
.mb.own .av { display: none; }

/* Menu button */
.mb-av-menu-btn {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 2px 4px; opacity: 0;
  align-self: center; flex-shrink: 0;
}
.mb:hover .mb-av-menu-btn { opacity: 1; }

/* Body — sadece içerik kadar geniş */
.mb-body {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  min-width: 0;
  align-items: flex-start;
}
.mb.own .mb-body { align-items: flex-end; }

/* Sender name */
.mb-name {
  font-size: .7rem; font-weight: 700;
  color: var(--green);
  margin-bottom: 2px; padding-left: 4px;
}

/* Bubble wrap — içerik kadar geniş */
.mb-bubble-wrap {
  position: relative;
  background: var(--surface2);
  border-radius: 16px 16px 16px 4px;
  padding: 7px 12px 22px 10px;
  word-break: break-word;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--text-hi);
  display: inline-block;
  min-width: 60px;
  max-width: 100%;
  box-shadow: 0 1px 1px rgba(0,0,0,.15);
}
.mb.own .mb-bubble-wrap {
  background: #1a7a4a;
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}

/* Time + status inside bubble */
.mb-time-inside {
  position: absolute;
  bottom: 5px; right: 8px;
}
.mb-ts-row {
  font-size: .65rem;
  color: rgba(255,255,255,.65);
  white-space: nowrap;
  display: flex; align-items: center; gap: 2px;
}
.mb:not(.own) .mb-ts-row { color: var(--muted); }

/* Status ticks */
.msg-status { display: inline-flex; align-items: center; }
.msg-status svg { width: 14px; height: 8px; fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.msg-status.delivered svg { stroke: rgba(255,255,255,.7); }
.msg-status.read svg { stroke: #53d3f5; }

/* Image in bubble - no extra padding */
.mb-bubble-wrap .msg-img { margin: -7px -10px -22px -10px; border-radius: 16px; max-width: calc(100% + 22px); }

/* Hide old conflicting meta */
.mb-meta, .mb-meta-mini { display: none !important; }

/* ══ Mesaj kutusu — WhatsApp style ══ */
.inp-wrap {
  padding: 8px 10px !important;
  padding-bottom: max(env(safe-area-inset-bottom, 10px), 10px) !important;
  background: var(--bg) !important;
  border-top: 1px solid var(--border);
}
.inp-box {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  overflow: hidden;
}
#msgInput {
  padding: 10px 14px !important;
  font-size: .92rem !important;
  min-height: 20px;
  max-height: 120px;
}
.inp-btm {
  padding: 4px 10px 6px !important;
  border-top: none !important;
  gap: 4px;
}
.inp-btm-btn {
  width: 30px; height: 30px;
  color: var(--muted);
  opacity: .8;
}
.send-btn {
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}

/* ══ Chat ekranı düzeltmeleri ══ */

/* 1. Balon çerçevesini kaldır */
.mb-bubble-wrap {
  border: none !important;
  outline: none !important;
}

/* 2. İmleç sorunu — inp-box overflow görünür, imleç içeride */
.inp-box {
  overflow: visible !important;
  position: relative;
}
#msgInput {
  position: relative;
  z-index: 1;
  caret-color: var(--green) !important;
}

/* 3. chatMsgs — zıplama önle */
#chatScreen {
  overflow: hidden !important;
}
#chatMsgs {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ══ msgInp textarea düzeltmesi ══ */
#msgInp {
  width: 100%;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  resize: none;
  padding: 10px 12px 6px !important;
  font-size: .92rem !important;
  color: var(--text-hi);
  font-family: inherit;
  line-height: 1.4;
  display: block;
  caret-color: var(--green);
  min-height: 38px;
  max-height: 120px;
  overflow-y: auto;
}
.inp-box {
  border-radius: 22px !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

/* ══ NUCLEAR FIXES ══ */

/* Balon çerçevesi - tamamen kaldır */
.mb-bubble-wrap,
.mb.own .mb-bubble-wrap {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* inp-box - sadece subtle border, focus'ta değişmesin */
.inp-box,
.inp-box:focus-within,
.inp-box:focus,
#chatInputRow .inp-box {
  border: 1.5px solid rgba(255,255,255,0.08) !important;
  border-radius: 22px !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Textarea - tamamen içeride kal */
#msgInp,
textarea#msgInp {
  display: block !important;
  width: 100% !important;
  min-height: 40px !important;
  max-height: 120px !important;
  padding: 10px 14px 8px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  resize: none !important;
  caret-color: #10b981 !important;
  color: var(--text-hi) !important;
  font-size: .9rem !important;
  font-family: inherit !important;
  line-height: 1.45 !important;
  overflow: hidden !important;
}

/* inp-wrap - border kaldır */
.inp-wrap,
#chatInputRow {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  background: var(--bg) !important;
  padding: 8px 10px !important;
  padding-bottom: max(env(safe-area-inset-bottom, 8px), 8px) !important;
}

/* ══ BALON ÇERÇEVE FIX ══ */
/* mb-body reset — styling mb-text/ob üzerinde, body şeffaf */
.mb-body {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ══ FINAL FIX — mb-body layout ══ */
/* (Asıl genişlik/hizalama BUBBLE_FIX bloğunda altta) */

/* İnp-btm butonları göster */
.inp-btm {
  display: flex !important;
  align-items: center !important;
  padding: 2px 8px 6px !important;
  gap: 4px !important;
  border-top: none !important;
}
.ii, .inp-btm-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  color: var(--muted) !important;
  opacity: 0.75 !important;
  cursor: pointer !important;
  border: none !important;
  background: none !important;
}

/* ══ mb-text arka planı kaldır - mb-bubble-wrap kullanıyoruz ══ */
/* ── mb-text eski sıfırlama — kaldırıldı, yeni bubble fix altta ── */
.mb.own .mb-text {
  color: #fff !important;
}

/* ══ ob ve mb-text iç wrapper - arka plan kaldır ══ */
/* ── ob/mb-text eski sıfırlama — kaldırıldı, yeni bubble fix altta ── */



.tab, .tab-wrap {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 4px 2px 5px !important;
  cursor: pointer !important;
  opacity: 0.45 !important;
  transition: opacity 0.2s !important;
  min-width: 0 !important;
}
.tab.act, .tab-wrap.act, .tab-wrap .tab.act {
  opacity: 1 !important;
  color: var(--green) !important;
}
.tab-ic svg {
  width: 22px !important;
  height: 22px !important;
}
.tab-lb {
  font-size: 10px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* ══ Tab bar - masaüstünde gizle ══ */
@media (min-width: 768px) {
  .tab-bar { display: none !important; }
}

/* ══ Tab bar - chat'te kesin gizle ══ */
#chatScreen ~ .tab-bar,
body.in-chat .tab-bar {
  display: none !important;
}
/* chatScreen aktifken padding-bottom sıfırla */
#chatScreen.active ~ .tab-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}



/* Tab bar yüksekliği kadar içerik padding */
.screen:not(#chatScreen) {
  padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ══ Tab bar — tek kural ══ */
.tab-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  padding-top: 6px !important;
  padding-bottom: 0px !important;
  background: transparent !important;
  border-top: none !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
}
@media (min-width: 768px) {
  .tab-bar { display: none !important; }
}

/* ══ Tab ic-wrap - arka plan kaldır ══ */
.tab-ic-wrap {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.tab.act .tab-ic-wrap,
.tab-wrap.act .tab-ic-wrap {
  background: none !important;
}

/* ══ Tab ic-wrap - arka plan nuclear ══ */
html body .tab-bar .tab .tab-ic-wrap,
html body .tab-bar .tab-wrap .tab .tab-ic-wrap,
html body .tab-bar .tab.act .tab-ic-wrap,
html body .tab-bar .tab-wrap .tab.act .tab-ic-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ══ Tab bar - şeffaf arka plan ══ */
.tab-bar {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ══ Tab bar arka plan - şeffaf ══ */
[data-ui] .tab-bar,
.tab-bar {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* ══ ws-header ikonlar orantılı ══ */
.ws-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  flex-shrink: 0 !important;
}
.ws-av {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}
#mobileRobotSlot {
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
}

/* ══ Tüm ekranlar - status bar padding (roomsScreen ile aynı: 73px) ══ */
#forumScreen .ws-header,
#msgsScreen .ws-header,
#friendsScreen .ws-header,
#gamesScreen .ws-header,
#watchScreen .ws-header,
#profileScreen .ws-header {
  padding-top: 73px !important;
}

/* ══ Ana sayfa header ikonlar - hizalama ══ */
#mobileRobotSlot {
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#mobileRobotSlot > * {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
}

/* ══ mobileRobotSlot - overflow düzelt ══ */
#mobileRobotSlot {
  width: 28px !important;
  height: 28px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
#mobileRobotSlot > * {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

/* ══ NatureBot slot - taşmayı önle ══ */
#mobileRobotSlot {
  width: 28px !important;
  height: 28px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
#mobileRobotSlot #natureBotPet {
  width: 28px !important;
  height: 28px !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}
#mobileRobotSlot #natureBotPet svg {
  width: 28px !important;
  height: 28px !important;
}

/* ══ ChatScreen layout fix ══ */
#chatScreen.active {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}
#chatScreen .c-header {
  flex-shrink: 0 !important;
}
#msgArea {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
}
#chatInputRow,
.inp-wrap {
  flex-shrink: 0 !important;
  position: relative !important;
  bottom: auto !important;
  width: 100% !important;
  z-index: 10 !important;
}

/* ══ chatHdrSub - sabit yükseklik, zıplama önle ══ */
.c-hdr-sub {
  min-height: 16px !important;
  line-height: 1.2 !important;
  display: block !important;
}

/* ══ Call Screen Mobile Responsive ══ */
@media (max-width: 767px) {
  .call-btn {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
  }
  .call-btn-label { font-size: .55rem !important; }
  .call-end-btn { width: 60px !important; height: 60px !important; }
  #callAudioArea { padding: 16px !important; }
  #callAvatar { width: 84px !important; height: 84px !important; border-radius: 24px !important; font-size: 1.9rem !important; }
  #callName { font-size: 1.3rem !important; }
  #callScreen > div:last-child { padding: 16px 16px calc(16px + env(safe-area-inset-bottom,0px)) !important; }
  #callWaves { margin-bottom: 12px !important; }
}

/* ══════════════════════════════════════
   📱 MOBİL KAPSAMLI DÜZELTMELER
   ══════════════════════════════════════ */

/* iOS momentum scroll - her scrollable alan */
.screen, #chatMsgs, #roomList, #forumFeed, #msgsScreen, #friendsScreen,
.admin-body, .prof-body, .games-scroll, .watch-list {
  -webkit-overflow-scrolling: touch;
}

/* iOS input zoom önleme - login/register inputlar için */
@media (max-width: 767px) {
  #loginUser, #loginPass, #regUser, #regEmail, #regPass, #regPass2,
  #msgInp, #deskInp, #_sswUser, #_sswPass {
    font-size: 16px !important;
  }
}

/* Tab bar - iOS home indicator ile çakışmasın */
.tab-bar {
  padding-bottom: max(env(safe-area-inset-bottom, 8px), 8px) !important;
}

/* Scroll sırasında tab bar görünmesi - chatScreen dışında */
@media (max-width: 767px) {
  .screen:not(#chatScreen):not(#loginScreen):not(#serverSelectScreen) {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Mobil - tap highlight kaldır */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Mobil - buton/link active state */
.tab:active, .hdr-btn:active, .room-item:active, .call-btn:active {
  opacity: 0.7;
}

/* iOS'ta position:fixed olan elementler keyboard açılınca kaymasın */
.tab-bar, #callScreen, #incomingCallScreen, #callMinimizedBar {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Mesaj input alanı - iOS keyboard push fix */
#chatScreen {
  height: 100dvh !important;
  height: -webkit-fill-available !important;
}

/* incomingCallScreen - mobilde daha küçük */
@media (max-width: 480px) {
  #incomingCallScreen {
    width: calc(100% - 16px) !important;
    padding: 12px 14px !important;
  }
}

/* callMinimizedBar - tab bar üstünde */
#callMinimizedBar {
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Uzun içerik overflow - word break */
.mb-text, .ob {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Forum - mobil */
@media (max-width: 767px) {
  .forum-post {
    margin: 0 8px 10px !important;
  }
}

/* Toast - tab bar üstünde */
#toast {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 99999 !important;
}

/* ══════════════════════════════════════════════════
   💬 MESAJ BALONU GENIŞLIK DÜZELTMESI
   Sorun: display:inline-block + white-space:pre-wrap
   → kısa satırlar balon genişliğini 1 harfe düşürüyordu
   ══════════════════════════════════════════════════ */

/* Gelen mesaj balonu */
.mb-text {
  display: block !important;
  max-width: min(75%, 440px) !important;
  min-width: 48px !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  align-self: flex-start !important;

  background: var(--incoming-bg, rgba(255,255,255,.07)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 4px 14px 14px 14px !important;
  padding: 8px 13px !important;
  color: var(--text-hi) !important;
  font-size: .9rem !important;
  line-height: 1.5 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.15) !important;
}

/* Kendi mesaj balonu */
.ob {
  display: block !important;
  max-width: min(75%, 440px) !important;
  min-width: 48px !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  align-self: flex-end !important;

  background: var(--own-bg, rgba(91,155,213,.25)) !important;
  border: 1px solid rgba(91,155,213,.28) !important;
  border-radius: 14px 4px 14px 14px !important;
  padding: 8px 13px !important;
  color: #fff !important;
  font-size: .9rem !important;
  line-height: 1.5 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.15) !important;
}

/* mb-body — flex column, sola/sağa hizalama */
.mb-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  max-width: 78% !important;
  min-width: 0 !important;
}
.mb.own .mb-body {
  align-items: flex-end !important;
}

/* Masaüstü — biraz daha geniş max-width */
@media (min-width: 768px) {
  .mb-text, .ob {
    max-width: min(72%, 580px) !important;
  }
  .mb-body {
    max-width: 74% !important;
  }
}

/* Mobil — padding azalt, daha fazla alan bırak */
@media (max-width: 767px) {
  .mb {
    padding: 4px 12px 4px 12px !important;
  }
  .mb.first {
    padding-top: 10px !important;
  }
  .mb-text, .ob {
    max-width: min(82%, 340px) !important;
    font-size: .88rem !important;
    padding: 7px 11px !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  .mb-body {
    max-width: 82% !important;
  }
}

/* Tab bar — giriş ve sunucu seçim ekranlarında gizle */
#serverSelectScreen.active ~ .tab-bar,
#loginScreen.active ~ .tab-bar {
  display: none !important;
}

/* ── Auth ekranlarında tab-bar gizle (JS body class) ── */
body.auth-screen .tab-bar { display: none !important; }

/* ── Mesaj Arama Bar ── */
#_msgSearchBar { box-shadow: 0 2px 8px rgba(0,0,0,.25); }
mark.msg-hl { background:#f0c040 !important; color:#000 !important; border-radius:2px; padding:0 2px; }
mark.msg-hl-active { background:#ff9900 !important; color:#000 !important; outline:2px solid #ff9900; border-radius:2px; }

/* ── Desktop Header Butonları ── */
.dsk-hdr-btn { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; cursor:pointer; color:var(--muted); transition:background .15s,color .15s; flex-shrink:0; }
.dsk-hdr-btn:hover { background:var(--surface2); color:var(--text-hi); }

/* ── Bildirim Merkezi SVG İkonları ── */
.nc-icon { display:flex; align-items:center; justify-content:center; }
.nc-icon svg { color: inherit; opacity: .9; }

/* ══ Masaüstünde mobil profil ekranı gizle ══ */
@media (min-width: 768px) {
  #profileScreen {
    display: none !important;
  }
}

/* ══ Login kutusu scroll + max yükseklik ══ */
#loginScreen {
  align-items: flex-start !important;
  padding-top: max(env(safe-area-inset-top, 0px), 20px) !important;
  padding-bottom: 24px !important;
}
.login-box {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.login-box::-webkit-scrollbar { display: none; }

/* Masaüstünde login kutusu ortalanmış ama scrollable */
@media (min-width: 768px) {
  #loginScreen {
    align-items: flex-start !important;
    justify-content: center !important;
  }
  .login-box {
    max-height: calc(100vh - 48px);
    margin: auto;
  }
}

/* ══ serverSelectScreen — masaüstünde tam ekran değil, ortalanmış ══ */
@media (min-width: 768px) {
  #serverSelectScreen {
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ══ Auth ekranlarında desktopShell gizle ══ */
body.auth-screen #desktopShell {
  display: none !important;
}

/* ══ MASAÜSTÜNDE MOBİL EKRANLARI TAMAMEN ENGELLE ══
   .screen.active { display:flex !important } kuralını ID ile geçersiz kıl
   (ID selektörü class selektöründen önce gelir, !important eşit durumda kazanır) */
@media (min-width: 768px) {
  #roomsScreen,
  #profileScreen,
  #forumScreen,
  #msgsScreen,
  #friendsScreen,
  #gamesScreen,
  #watchScreen,
  #chatScreen,
  #adminPanel {
    display: none !important;
  }
  /* Auth ekranları masaüstünde tam ekran görünsün */
  #loginScreen.active,
  #serverSelectScreen.active {
    display: flex !important;
  }
}

/* ══ MOBİLDE MASAÜSTÜ BİLEŞENLERİ TAMAMEN GİZLE ══ */
@media (max-width: 767px) {
  #deskRail,
  #deskSidebar,
  #desktopShell,
  #deskMain,
  #deskSidebarHeader,
  #deskTopbar {
    display: none !important;
  }
}