/* ═══════════════════════════════════════════════
   Vantor — Professional Light Theme
   Version: 2.0.0
   
   TABLE OF CONTENTS
   ─────────────────
   1. Variables & Reset
   2. Layout (App Grid)
   3. Server Sidebar
   4. Channel Sidebar
   5. User Panel
   6. Chat Area & Header
   7. Messages
   8. Media Attachments
   9. Input Area
   10. Members Sidebar
   11. Lightbox & Modals
   12. Empty States & Welcome
   13. Ticker Pills
   14. Channel Settings
   15. DM Panel
   16. Responsive
   17. Emoji Picker
   19. Embeds (YouTube, Instagram)
   20. Animations & Loading
   21. Financial Features
       - Market Bar
       - Stock Cards
       - Analysis Tags
   22. Reactions & Actions
   23. Pins Panel
   24. Polls
   25. Watchlist
   26. Autocomplete
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════
   TRADING TERMINAL — Warm Light Theme
   Bloomberg-inspired, warmer & more usable.
   Signature: amber/gold accent + financial green/red,
   clean white/gray base, monospace data typography.
═══════════════════════════════════════════════ */

:root {
    /* Light base */
    --bg-primary:    #f0f2f5;
    --bg-secondary:  #ffffff;
    --bg-tertiary:   #f5f7fa;
    --bg-channel:    #e8ebef;
    --bg-input:      #ffffff;
    --bg-hover:      #e2e7ed;
    --bg-active:     rgba(180,83,9,0.10);

    /* Amber/gold accent (darker for light bg readability) */
    --accent:        #c07a10;
    --accent-hover:  #d4890a;
    --accent-soft:   rgba(192,122,16,0.12);

    /* Financial signal colors */
    --accent-green:  #15803d;
    --accent-red:    #dc2626;
    --accent-yellow: #b45309;
    --accent-orange: #c2410c;
    --accent-blue:   #1d4ed8;

    /* Legacy alias */
    --accent-hover-blue: #1d4ed8;

    --border:        #d1d5db;
    --border-strong: #9ca3af;
    --text-primary:  #111827;
    --text-secondary:#374151;
    --text-muted:    #9ca3af;

    --scrollbar-bg:  transparent;
    --scrollbar-thumb: #c0c8d4;

    --font-ui:   'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    --font-discord: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.12);
    --shadow-lg: 0 20px 56px rgba(0,0,0,0.16);

    --glow-accent: 0 0 0 1px rgba(192,122,16,0.30), 0 0 14px rgba(192,122,16,0.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Mobil tarayıcılarda adres çubuğu genişliği "100vh" hesabını
   yanılttığı için mesaj yazma kutusu ekranın dışına taşıyordu.
   --app-vh, app.js tarafından window.visualViewport'a göre güncellenir.
   ÖNEMLİ: burada 100dvh'e GÜVENME — iOS Safari/Chrome (ikisi de WebKit)
   dvh birimini klavye açılıp kapanınca güncellemiyor (sadece adres çubuğu
   gizlenince güncelliyor), bu yüzden dvh kullanılırsa mesaj kutusu klavyenin
   altında kalıp "kayıyormuş" gibi görünüyordu. visualViewport tabanlı
   --app-vh klavyeyi de doğru yansıttığı için tek güvenilir kaynak bu. */
:root { --app-vh: 1vh; --app-vv-top: 0px; }

html {
    height: 100%;
    overflow: hidden;
}

body {
    /* position: fixed + JS ile sürekli güncellenen top (--app-vv-top) —
       iOS'ta klavye açılınca Safari, odaklanan inputu görünür tutmak için
       "visual viewport"ı (görünen alanı) sayfanın kendi koordinat sistemine
       göre aşağı kaydırıyor (visualViewport.offsetTop artıyor). body sabit
       height'a sahip ama bu kaymayı hesaba katmazsa, body ekranın görünür
       kısmının ÜSTÜNDE kalıp altında boş alan bırakıyordu (mesaj kutusu
       "yukarıda kalmış, klavyenin üstünde durmuyor" şikâyetinin sebebi).
       app.js her visualViewport resize/scroll'unda hem --app-vh (yükseklik)
       hem --app-vv-top (offsetTop) değerlerini günceller; body bu offsete
       göre aşağı kayarak görünür alanla hizalanır. */
    position: fixed;
    left: 0;
    right: 0;
    top: var(--app-vv-top, 0px);
    width: 100%;
    height: calc(var(--app-vh, 1vh) * 100);
    overflow: hidden;
    font-family: var(--font-ui);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv02','cv03','cv04','tnum';
}

/* Tabular numbers everywhere numbers matter */
.msg-time, .msg-timestamp, .ticker-pill, .invite-code,
.poll-option-pct { font-variant-numeric: tabular-nums; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: #c0c8d4 transparent; }

/* Selection */
::selection { background: rgba(192,122,16,0.25); color: #111827; }

/* ── Layout ── */
#app {
    display: flex;
    height: calc(var(--app-vh, 1vh) * 100 - 48px);
}

/* ── Top Bar ── */
#top-bar {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    justify-content: flex-end;
}
#top-bar-server-name {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .2px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 400px;
}
#top-bar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
#top-inbox-btn {
    position: relative;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-family: inherit;
    transition: all .15s;
}
#top-inbox-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
#top-mention-badge {
    min-width: 16px;
    height: 16px;
    background: var(--accent-red);
    color: #fff;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
#top-bar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    width: 280px;
    flex-shrink: 0;
    transition: border-color .15s;
}
#top-bar-search input {
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    width: 100%;
    padding: 7px 0;
}
#top-bar-search input::placeholder { color: var(--text-muted); }

/* ── Inbox Dropdown (tabbed) ── */
#inbox-dropdown {
    position: fixed;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    max-height: 600px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#inbox-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
#inbox-tabs {
    display: flex;
    flex: 1;
}
.inbox-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
    font-family: inherit;
}
.inbox-tab:hover {
    color: var(--text-secondary);
    background: rgba(255,255,255,0.02);
}
.inbox-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}
.inbox-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 0 14px;
    flex-shrink: 0;
    transition: color .15s;
}
.inbox-close-btn:hover { color: var(--text-primary); }
#inbox-dropdown-body {
    overflow-y: auto;
    flex: 1;
    max-height: 540px;
}
.inbox-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .12s;
}
.inbox-item:hover {
    background: var(--bg-hover, rgba(0,0,0,0.04));
}
.inbox-item-unread {
    background: rgba(248,81,73,0.06);
}
.inbox-item-unread:hover {
    background: rgba(248,81,73,0.10);
}

/* ── Server Sidebar ── */
#server-sidebar {
    width: 68px;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 8px;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    flex-shrink: 0;
}

.server-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--bg-channel);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: border-radius .22s cubic-bezier(.4,0,.2,1), transform .15s, box-shadow .2s, color .15s;
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-secondary);
    position: relative;
    flex-shrink: 0;
    overflow: visible;
    letter-spacing: .3px;
}
/* Sol kenar aktif göstergesi (terminal sekme hissi) */
.server-icon::before {
    content: '';
    position: absolute;
    left: -13px;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 4px; height: 22px;
    background: var(--accent);
    border-radius: 0 4px 4px 0;
    transition: transform .2s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 8px rgba(192,122,16,0.4);
}
.server-icon:hover::before { transform: translateY(-50%) scaleY(0.6); }
.server-icon.active::before { transform: translateY(-50%) scaleY(1); }

.server-icon:hover {
    border-radius: 16px;
    color: var(--text-primary);
    transform: translateY(-1px);
    border-color: var(--border-strong);
}
.server-icon.active {
    color: #ffffff;
    border-radius: 16px;
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: var(--glow-accent);
}
.server-icon.add-server {
    background: transparent;
    color: var(--accent-green);
    font-size: 20px;
    border: 1px dashed var(--border-strong);
}
.server-icon.add-server::before { display: none; }
.server-icon.add-server:hover {
    background: rgba(38,208,124,0.12);
    color: var(--accent-green);
    border-color: var(--accent-green);
    transform: translateY(-1px);
}
.server-sep {
    width: 28px; height: 2px;
    background: var(--border);
    border-radius: 2px;
    flex-shrink: 0;
}
.server-tooltip {
    position: absolute;
    left: 58px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s, transform .15s;
    z-index: 100;
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-md);
}
.server-tooltip::after {
    content: '';
    position: absolute;
    left: -5px; top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: var(--bg-secondary);
}
.server-icon:hover .server-tooltip { opacity: 1; transform: translateX(0); }

/* ── Channel Sidebar ── */
#channel-sidebar {
    width: 240px;
    min-width: 180px;
    max-width: 480px;
    box-sizing: border-box;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
}
#channel-sidebar-resizer {
    width: 4px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 20;
    margin-left: -4px;
}
#channel-sidebar-resizer::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 1px;
    width: 2px;
    background: transparent;
    transition: background .15s;
}
#channel-sidebar-resizer:hover::after,
#channel-sidebar-resizer.resizing::after {
    background: var(--accent);
}
body.sidebar-resizing {
    cursor: col-resize !important;
    user-select: none;
}
body.sidebar-resizing * { user-select: none !important; }
#channel-sidebar-header {
    height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}
#channel-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px;
}
.channel-section-title {
    padding: 16px 8px 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-secondary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: color .15s;
}
.channel-section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px 8px 4px;
}
.channel-section-title:hover { color: var(--text-secondary); }
.channel-section-title .cat-chevron { transform-origin: center; }
.channel-category-body { display: block; }

.channel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    transition: background .15s, color .15s, box-shadow .15s;
    position: relative;
    min-width: 0;
}
/* :hover sadece gerçek fare/hover destekleyen cihazlarda uygulanır.
   iOS'ta dokunmatik bir <a>'nın :hover kuralı varsa WebKit ilk dokunuşu
   "hover'a gir" olarak yorumluyor, linke gitmek için ikinci dokunuş
   gerekiyordu — kanal listesinde "iki kere tıklamayınca girmiyor"
   şikâyetinin sebebi buydu. (hover:hover) sorgusu bunu touch cihazlarda
   devre dışı bırakıp tek dokunuşla navigasyonu geri getiriyor. */
@media (hover: hover) and (pointer: fine) {
    .channel-item:hover { background: var(--bg-hover); color: var(--text-primary); }
}
.channel-item.active {
    background: var(--bg-active);
    color: var(--accent-hover);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--accent);
}
.channel-item .ch-icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; opacity: .85; color: #000; }
.channel-item.active .ch-icon { opacity: 1; }
.channel-item .ch-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Okunmamış mesaj sayısı yerine sadece kanal ismi kalınlaşır + sağda küçük
   kırmızı bir nokta görünür (bkz. chat.js loadUnreadCounts) — sunucudan tam
   sayı hesaplamak/göstermek yerine tek bir var/yok durumu, daha hafif. */
.channel-item.has-unread::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-red);
    margin-left: auto;
    flex-shrink: 0;
}
.channel-item.has-unread .ch-name {
    font-weight: 700;
    color: var(--text-primary);
}

/* ── User Panel ── */
#user-panel {
    height: 56px;
    background: linear-gradient(180deg, var(--bg-channel), #d4d9e0);
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 9px;
    border-top: 1px solid var(--border);
}
#user-panel .avatar {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--accent);
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 0 1px rgba(192,122,16,0.35);
}
#user-panel .avatar .status-dot {
    position: absolute; bottom: -2px; right: -2px;
    width: 11px; height: 11px;
    background: var(--accent-green);
    border: 2px solid var(--bg-channel);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(38,208,124,0.6);
}
#user-panel .user-info { flex: 1; min-width: 0; }
#user-panel .user-info .name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#user-panel .user-info .tag { font-size: 11px; color: var(--accent-green); font-weight: 600; letter-spacing: .2px; }
#user-panel .actions { display: flex; gap: 2px; }
#user-panel .actions a {
    color: var(--text-secondary);
    padding: 6px;
    border-radius: 7px;
    font-size: 14px;
    text-decoration: none;
    transition: color .15s, background .15s;
}
#user-panel .actions a:hover { color: var(--accent); background: var(--bg-hover); }

/* ── Chat Area ── */
#chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-tertiary);
    min-width: 0;
}
#chat-header {
    height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(245,166,35,0.035), transparent);
    box-shadow: 0 1px 0 rgba(0,0,0,0.35);
    position: relative;
    z-index: 5;
}
#chat-header .ch-name { font-weight: 800; font-size: 15px; letter-spacing: .2px; }
#chat-header .ch-desc { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }

/* ── Messages ── */
#messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0 60px;
    display: flex;
    flex-direction: column;
}
.msg-group {
    display: flex;
    gap: 12px;
    padding: 3px 16px;
    position: relative;
    transition: background .1s;
}
.msg-group:hover { background: rgba(0,0,0,0.025); }
.msg-group.first-in-group { margin-top: 16px; }
.msg-group .avatar-col {
    width: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}
.msg-group .avatar-col .msg-avatar {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    flex-shrink: 0;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.msg-group .avatar-col .msg-timestamp {
    font-size: 10px;
    color: var(--text-muted);
    padding-top: 8px;
    white-space: nowrap;
    display: block;
    font-family: var(--font-mono);
    opacity: 0.45;
    transition: opacity .15s;
}
.msg-group:not(.first-in-group):hover .avatar-col .msg-timestamp { opacity: 0.9; }
.msg-group .msg-content-col { flex: 1; min-width: 0; }
.msg-group .msg-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}
.msg-group .msg-username { font-weight: 700; font-size: 14px; letter-spacing: .1px; }
.msg-group .msg-time {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    opacity: 0.6;
    transition: opacity .15s;
}
.msg-group:hover .msg-time { opacity: 1; }
.msg-group .msg-text {
    color: var(--text-primary);
    line-height: 1.55;
    word-break: break-word;
    font-family: var(--font-discord);
    font-size: 15px;
    white-space: pre-wrap;
}

/* Emojiler mesaj metninde daha büyük görünür — span.emoji, Twemoji'nin
   çizdiği img.emoji'yi sarmalıyor (bkz. chat.js renderMessageContent);
   font-size burada img'nin 1em'lik genişlik/yüksekliğinin ölçeğini belirler. */
.msg-group .msg-text .emoji {
    font-size: 1.24em;
    vertical-align: middle;
    line-height: 1;
    display: inline-block;
}
.msg-group .msg-text img.emoji {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
}

/* Mesaj yalnızca emoji(ler)den oluşuyorsa (kısa, metinsiz) Discord'daki gibi
   kademeli büyüsün — tek emoji en büyük, sayı arttıkça küçülür. */
.msg-group .msg-text.emoji-only .emoji {
    font-size: 1.2em;
}
.msg-group .msg-text.emoji-only-few .emoji {
    font-size: 1.425em;
}
.msg-group .msg-text.emoji-only-1 .emoji {
    font-size: 1.7em;
}

/* Twemoji'nin her yerde (hızlı emoji çubuğu vb.) çizdiği ikonlar için genel
   taban boyut — metin boyutuyla aynı hizada, native emoji'nin yerini alır. */
img.emoji {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    display: inline-block;
}

/* ── Markdown formatting ── */
.msg-text code.inline-code {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 4px;
    font-family: var(--font-mono);
    font-size: 13px;
}

.msg-text pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px;
    margin: 8px 0;
    overflow-x: auto;
}

.msg-text pre code {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.4;
}

.msg-text blockquote {
    border-left: 4px solid var(--accent);
    padding-left: 12px;
    margin: 4px 0;
    color: var(--text-secondary);
}

.msg-text .spoiler {
    background: var(--text-primary);
    color: transparent;
    border-radius: 3px;
    padding: 0 2px;
    cursor: pointer;
    user-select: none;
    transition: all 0.1s;
}

.msg-text .spoiler.revealed,
.msg-text .spoiler:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.msg-text h1, .msg-text h2, .msg-text h3 {
    margin: 8px 0 4px 0;
    font-weight: 600;
}

.msg-text h1 { font-size: 20px; }
.msg-text h2 { font-size: 18px; }
.msg-text h3 { font-size: 16px; }

/* ── Media attachments ── */
.msg-media { margin-top: 8px; }
.msg-media img {
    max-width: min(675px, 100%);
    max-height: 480px;
    border-radius: 8px;
    cursor: zoom-in;
    display: block;
    object-fit: contain;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}
.msg-media video {
    max-width: min(720px, 100%);
    max-height: 520px;
    border-radius: 8px;
    display: block;
    border: 1px solid var(--border);
}
.msg-media .media-grid {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 900px;
}
.msg-media .media-grid img,
.msg-media .media-grid video {
    width: 100%;
    height: 300px;
    object-fit: contain;
    background: var(--bg-tertiary);
}

/* GIF mesajları küçük göster */
.msg-media img[src*="giphy.com"],
.msg-media img[src*="media.giphy"],
.msg-media img[src*=".gif"] {
    max-width: min(300px, 100%);
    max-height: 200px;
    object-fit: contain;
    background: transparent;
    border: none;
}

/* ── Input Area ── */
#input-area {
    padding: 12px 16px 16px;
    flex-shrink: 0;
}
.input-wrapper {
    background: var(--bg-channel);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.input-wrapper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,166,35,0.1); }

#upload-preview {
    padding: 10px 12px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.preview-item {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.preview-item img, .preview-item video {
    width: 80px; height: 80px;
    object-fit: cover;
    display: block;
}
.preview-item .remove-btn {
    position: absolute; top: 2px; right: 2px;
    background: rgba(0,0,0,0.8);
    border: none; border-radius: 50%;
    width: 18px; height: 18px;
    color: white; font-size: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 12px;
}
.input-left-icons {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 120px;
    opacity: 1;
    overflow: hidden;
    transition: max-width .18s ease, opacity .12s ease, margin-right .18s ease;
}
.input-wrapper.typing .input-left-icons {
    max-width: 0;
    opacity: 0;
    margin-right: -8px;
    pointer-events: none;
}
#messageInput {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 15px;
    font-family: var(--font-discord);
    resize: none;
    max-height: 160px;
    min-height: 24px;
    line-height: 1.5;
    padding: 2px 0;
    /* Boşluksuz uzun tek "kelime" (link, token vb.) tarayıcı/cihaza göre
       tutarsız şekilde ya taşıp yatay scroll'a yol açabiliyor ya da
       kesiliyordu — her yerde kelime ortasından sarmayı garanti eder. */
    overflow-wrap: break-word;
    word-break: break-word;
}
#messageInput::placeholder { color: var(--text-muted); }
.input-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    border-radius: 7px;
    font-size: 18px;
    line-height: 1;
    transition: color .15s, background .15s;
    display: flex; align-items: center;
}
.input-btn:hover { color: var(--accent); background: var(--bg-hover); }
.input-btn.send { color: var(--accent); font-size: 16px; }
.input-btn.send:hover { color: #ffffff; background: var(--accent); }
/* Masaüstünde .input-pill görünmez bir sarmalayıcı — kutulama hâlâ dıştaki
   .input-wrapper üzerinde, mobilde bu ikisinin rolü değişiyor (bkz. @media). */
.input-pill { display: flex; align-items: flex-end; flex: 1; min-width: 0; }
.send-msg-btn i { color: var(--accent); }
#fileInput { display: none; }
.drag-active { border-color: var(--accent) !important; background: rgba(245,166,35,0.06); }

/* ── Members Sidebar (Watchlist + News) ── */
#members-sidebar {
    width: 280px;
    background: var(--bg-secondary);
    overflow-y: auto;
    padding: 12px 0;
    flex-shrink: 0;
    border-left: 1px solid var(--border);
}
/* ── Lightbox ── */
#lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    backdrop-filter: blur(4px);
}
#lightbox img {
    max-width: 95vw;
    max-height: 92vh;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    transition: transform 0.1s ease;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
    touch-action: none;
    transform-origin: center center;
}
/* Not: eskiden .zoomed durumunda img'nin kutusu (max-width/object-fit) ve
   transform-origin'i DEĞİŞİYORDU — bu, zoom 1'i geçer geçmez (tek bir
   pinch/tıkla bile) resmin aniden doğal boyutuna sıçramasına neden
   oluyordu ("sakin bir büyütme yok" şikayeti buradan geliyordu). Artık
   kutu ve orijin HER zoom seviyesinde sabit — scale() tek başına, aynı
   referans kutudan sürekli/kademeli büyütüyor. */
#lightbox.zoomed {
    cursor: grab;
}
#lightbox.zoomed.dragging { cursor: grabbing; }
#lightbox .lb-toolbar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    background: rgba(0,0,0,0.6);
    border-radius: 10px;
    padding: 6px 10px;
    z-index: 10001;
}
#lightbox .lb-toolbar button {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    border-radius: 6px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.15s;
}
#lightbox .lb-toolbar button:hover {
    background: rgba(255,255,255,0.25);
}
#lightbox .lb-toolbar .lb-zoom-level {
    color: #fff;
    font-size: 13px;
    display: flex; align-items: center;
    padding: 0 8px;
    min-width: 50px;
    justify-content: center;
}
#lightbox .lb-close {
    position: absolute; top: 16px; right: 20px;
    color: white; font-size: 28px; cursor: pointer;
    background: rgba(0,0,0,0.5);
    border: none; border-radius: 50%;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
}

/* ── Modal ── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
}
.modal-box {
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-tertiary));
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    padding: 28px;
    max-width: 440px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    position: relative;
}
.modal-box::before {
    content: '';
    position: absolute;
    top: 0; left: 24px; right: 24px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    border-radius: 2px;
    opacity: .7;
}
.modal-box h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; letter-spacing: .2px; }
.modal-box p { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.5; }
.modal-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    color: var(--text-primary);
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    margin-bottom: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.modal-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,166,35,0.1); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.btn {
    padding: 10px 20px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
    letter-spacing: .2px;
}
.btn-primary { background: var(--accent); color: #ffffff; box-shadow: 0 4px 14px rgba(192,122,16,0.25); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(192,122,16,0.35); }
.btn-secondary { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-channel); border-color: var(--text-muted); }
.btn-danger { background: var(--accent-red); color: #fff; }
.btn-danger:hover { background: #ff7373; transform: translateY(-1px); }

/* ── Empty states ── */
.empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-secondary);
    padding: 32px;
    text-align: center;
}
.empty-state .icon { font-size: 64px; opacity: 0.5; }
.empty-state h3 { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.empty-state p { font-size: 13px; max-width: 320px; }

/* ── Welcome bar ── */
.welcome-bar {
    padding: 16px 16px 0;
    margin-bottom: 8px;
}
.welcome-bar .wbar {
    background: linear-gradient(135deg, rgba(245,166,35,0.1), rgba(38,208,124,0.06));
    border: 1px solid rgba(245,166,35,0.25);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}
.welcome-bar .wbar strong { color: var(--text-primary); }

/* ── Ticker pill ── */
.ticker-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(38,208,124,0.12);
    border: 1px solid rgba(38,208,124,0.28);
    color: var(--accent-green);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 6px;
    font-family: var(--font-mono);
    letter-spacing: .3px;
}
.ticker-pill.red { background: rgba(255,91,91,0.12); border-color: rgba(255,91,91,0.28); color: var(--accent-red); }

/* ── Channel item wrap + settings gear ── */
.channel-item-wrap {
    display: flex;
    align-items: center;
    border-radius: 6px;
    margin-bottom: 1px;
    min-width: 0;
}
.channel-item-wrap .channel-item { border-radius: 6px; }

/* ── DM (Özel Mesaj) ── */
#dm-conv-list a.channel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: background .12s;
}
@media (hover: hover) and (pointer: fine) {
    #dm-conv-list a.channel-item:hover { background: var(--bg-hover); color: var(--text-primary); }
}
#dm-conv-list a.channel-item.active { background: var(--bg-channel); color: var(--text-primary); }

#dm-user-list > div:hover { background: var(--bg-hover) !important; }

#dm-nav-btn { position: relative; }
#dm-nav-btn .dm-badge {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 16px; height: 16px;
    background: #f85149;
    color: #fff;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid var(--bg-primary);
}

/* ── Mobil-özel bileşenler: masaüstünde varsayılan gizli ── */
.header-more-wrap,
.input-plus-wrap,
.dropdown-sheet-menu {
    display: none;
}

/* ── DM Paneli (masaüstü: liste + sohbet yan yana) ── */
#dm-panel { left: 68px; }
#dm-conv-sidebar { display: flex; width: 240px; }
#dm-chat-col { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#dm-back-btn { display: none; }

/* ── Responsive ── */
@media (max-width: 900px) {
    #members-sidebar { display: none; }

    /* Üyeler panelini masaüstünde chat'in yanında genişleyen bir
       şerit yerine, dar ekranlarda sağdan kayan bir çekmeceye çevir
       — aksi halde 240px'lik panel chat alanını sıkıştırıp taşırıyordu. */
    #members-panel {
        width: 0;
        position: fixed;
        top: 48px; right: 0; bottom: 0;
        z-index: 500;
    }
    /* NOT: masaüstü temel kuralı (#members-panel.open { width: 240px; },
       dosyada bu media query'den SONRA tanımlı) burada sadece max-width ile
       ezilmeye çalışılmıştı. width hiç ezilmediği için — aynı seçici
       (#members-panel.open) + aynı özgüllük durumunda kaynak sırasında SONRA
       gelen kural kazanır — panel mobilde .open olsa bile fiilen sabit
       240px'te kalıyordu (dar ekranlarda ekranın çoğunu kaplayıp taşabiliyor
       ya da hesaplanana göre daha dar/geniş görünüyordu, tutarsızdı). width'i
       de aynı hesapla, !important ile açıkça ayarlıyoruz ki masaüstü
       kuralından SONRA gelmesine rağmen gerçekten bu değeri alsın. */
    #members-panel.open {
        width: calc(100vw - 68px - 24px) !important;
        max-width: calc(100vw - 68px - 24px);
        box-shadow: -4px 0 24px rgba(0,0,0,0.35);
    }
    #members-panel-backdrop.show { display: block; }
}
@media (max-width: 440px) {
    #members-panel.open {
        width: calc(100vw - 56px - 16px) !important;
        max-width: calc(100vw - 56px - 16px);
    }
}
@media (max-width: 680px) {
    #channel-sidebar { display: none; }

    /* Sunucunun "ana sayfası": sunucu rayı + kanal listesi BİRLİKTE
       görünür. Bir kanala dokununca ikisi de kapanır, sadece o kanal tam
       ekran görünür (bkz. app.js — sunucuya explicit bir ?channel=
       olmadan girildiğinde bu "liste" görünümü otomatik açılır). */
    #server-sidebar { display: none; }
    #server-sidebar.mobile-open {
        display: flex;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 751;
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    #channel-sidebar.mobile-open {
        display: flex;
        position: fixed;
        top: 0; right: 0; bottom: 0;
        left: 68px; /* #server-sidebar genişliği kadar boşluk bırak */
        z-index: 750;
        box-shadow: none;
        /* Masaüstünde sürükleyerek ayarlanan genişlik localStorage'dan her
           sayfa yüklemesinde satır-içi style="width:...px" olarak geri
           yükleniyor (app.js setupChannelSidebarResize) — bu, mobilde de
           kalıp "right:0" u geçersiz kılarak listenin sağa kadar
           uzamasını engelliyordu. !important ile satır-içi stili eziyoruz. */
        width: auto !important;
        max-width: none !important;
    }
    #channel-sidebar-header {
        justify-content: space-between;
        height: calc(48px + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
    }
    #mobile-sidebar-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px; height: 40px;
        background: none; border: none;
        color: var(--text-primary);
        font-size: 18px;
        cursor: pointer;
    }

    /* Kanal listesi mobilde açıkken arkasına karartma — dışarı
       tıklayınca kapanır (JS: closeMobileSidebar) */
    #mobile-sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 499;
    }
    #mobile-sidebar-backdrop.show { display: block; }

    /* Mobil menü butonu göster + dokunma hedefini büyüt (asgari 44x44) */
    #mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0 !important;
    }

    /* Header: desc metni gizle, sıkışmasın */
    #chat-header { padding: 0 10px; gap: 6px; height: 48px; }
    #chat-header .ch-desc { display: none; }
    #chat-header .ch-name { font-size: 14px; }

    /* Akan ekonomi/haber bandı mobilde kaldırıldı — mesaj alanından yer
       çalıyordu, sadece masaüstünde kalsın istendi. !important şart:
       dosyada daha aşağıda (masaüstü/temel bölümde) koşulsuz bir
       "#news-ticker { display:flex }" kuralı daha var; aynı özgüllükte
       (id seçici) olduğu ve dosyada SONRA geldiği için o kazanıp bu
       kuralı mobilde de eziyordu. */
    #news-ticker { display: none !important; }

    /* Mesaj alanı padding azalt */
    .msg-group { padding: 3px 10px; }
    .msg-group .avatar-col { width: 32px; }
    .msg-group .avatar-col .msg-avatar { width: 32px; height: 32px; font-size: 11px; }

    /* Input alanı — iOS'ta 16px altı font input'a odaklanınca sayfayı
       otomatik yakınlaştırır, bu yüzden mobilde 16px'e çıkarıldı. Alt
       sekme çubuğu kaldırıldığından beri #input-area artık ekranın tam
       en altına kadar uzanıyor — iPhone'da home-indicator güvenli alanı
       payı olmazsa gönder butonu jest çubuğuna çok yakın/değecek kadar
       yaklaşıyordu. */
    #input-area { padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
    #messageInput { font-size: 16px; }
    .input-btn { min-width: 44px; min-height: 44px; }

    /* Alt hint metni gizle */
    #input-area > div:last-child { display: none; }

    /* Kanal başlık alanı */
    .channel-section-title { padding: 8px 10px 4px; }

    /* Üye sayısı gizle */
    #chat-header > div > span:last-child { display: none; }

    /* Masaüstüne özel sürükle-genişlet tutamacı mobilde anlamsız
       (kanal listesi burada sabit konumlu bir çekmece) */
    #channel-sidebar-resizer { display: none; }

    /* Geniş tablolar/kartlar mobilde yatay taşmasın */
    body { overflow-x: hidden; }

    /* Üst çubuk: sunucu adı ekranın ortasında mutlak konumlanıyor,
       arama kutusu ise sabit 280px genişlikte — dar ekranda ikisi
       çakışıyor ve arama kutusu ekran dışına taşıyordu. Sunucu adını
       gizle (kanal adı zaten #chat-header'da görünüyor), gelen kutusu
       etiketini gizle, arama kutusunu daraltılabilir yap. */
    #top-bar { padding: 0 10px; gap: 8px; }
    #top-bar-server-name { display: none; }
    #top-bar-right { flex: 1; min-width: 0; }
    #top-inbox-btn { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; flex-shrink: 0; }
    #top-inbox-btn .inbox-btn-label { display: none; }
    #top-bar-search { width: auto; flex: 1; min-width: 0; }

    /* Gruplu (devam) mesajlardaki saat etiketi eski mesajlarda tam
       tarih+saat metnine dönüşüyor (ör. "01.07.2026 22:46") ve bu,
       32px'lik dar avatar sütununa sığmayıp mesaj metninin üzerine
       taşıyordu. Sığmayan kısmı kes. */
    .msg-group .avatar-col .msg-timestamp {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 9px;
    }

    /* ── Mesaj basılı tutma (long-press) — mobil ──
       Native metin seçme/kopyala-yapıştır balonunu engelle: aksi halde
       ~500ms'de tarayıcının kendi seçim arayüzü devreye girip bizim
       2sn'lik menümüzle çakışıyordu. (Aksiyon çubuğunun konumu için
       bkz. .msg-actions kuralının hemen altındaki ayrı @media bloğu —
       dosya sırasında .msg-actions'ın taban kuralından SONRA olmalı.) */
    .msg-group {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* ── "⋯" / "+" açılır menüleri (paylaşılan görünüm) ── */
    .header-secondary-action { display: none; }
    .header-more-wrap { display: block; position: relative; }
    .dropdown-sheet-menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        background: var(--bg-secondary);
        border: 1px solid var(--border-strong, var(--border));
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        min-width: 210px;
        padding: 6px;
        z-index: 600;
        flex-direction: column;
        gap: 2px;
    }
    .dropdown-sheet-menu button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        background: none;
        border: none;
        text-align: left;
        padding: 12px 12px;
        border-radius: 7px;
        font-size: 13px;
        font-family: inherit;
        color: var(--text-primary);
        cursor: pointer;
    }
    .dropdown-sheet-menu button:active,
    .dropdown-sheet-menu button:hover { background: var(--bg-hover); }
    .dropdown-sheet-menu i { width: 16px; text-align: center; color: var(--text-secondary); }

    /* "+" menüsü input alanının üstünden açılır */
    .input-plus-wrap { display: block; position: relative; }
    #inputLeftIcons { display: none; }
    .input-plus-menu.dropdown-sheet-menu { bottom: calc(100% + 8px); top: auto; right: auto; left: 0; }

    /* ── Mobil mesaj kutusu: "+" ve gönder butonu kutunun DIŞINA, sadece
       yazı+emoji alanı (.input-pill) kutulu bir "pill" içinde — masaüstünde
       hepsi tek bir çerçeveli kutu (.input-wrapper) içindeydi, mobilde
       istenen görünüm bu değildi. Kutulama .input-wrapper'dan .input-pill'e
       taşınıyor, .input-row artık şeffaf bir sıra. */
    .input-wrapper {
        background: none;
        border: none;
        border-radius: 0;
        overflow: visible;
    }
    .input-wrapper:focus-within { border-color: transparent; box-shadow: none; }
    .input-row { align-items: center; gap: 6px; padding: 4px 0; }
    .input-pill {
        background: var(--bg-channel);
        border: 1px solid var(--border-strong);
        border-radius: 22px;
        padding: 7px 6px 7px 14px;
        align-items: flex-end;
        transition: border-color .15s;
    }
    .input-pill:focus-within { border-color: var(--accent); }
    .input-plus-wrap > .input-btn {
        min-width: 40px; min-height: 40px;
        color: var(--text-secondary);
        font-size: 19px;
    }
    /* Emoji butonu artık dar bir "pill" içinde — masaüstündeki 44px'lik
       genel dokunma hedefi burada kutuyu gereksiz büyütüyordu. */
    .input-pill .input-btn {
        min-width: 36px; min-height: 36px;
        font-size: 17px;
    }
    .send-msg-btn {
        flex-shrink: 0;
        min-width: 40px; min-height: 40px;
        width: 40px; height: 40px;
        border-radius: 50%;
        background: var(--accent);
        justify-content: center;
        font-size: 15px;
    }
    .send-msg-btn i { color: #fff; }
    .send-msg-btn:hover { background: var(--accent-hover); }

    /* Gelen kutusu açılır penceresi: sabit 420px yerine ekrana sığdır */
    #inbox-dropdown { left: 12px; right: 12px; width: auto; transform: none; }

    /* Mobil alt sekme çubuğu (Sunucular/Bildirimler/Hesabım) kaldırıldı —
       aynı işlevler zaten başka yerlerde vardı: Sunucular → üst çubuktaki
       hamburger (#mobile-menu-btn, kanal çekmecesini açar, içinde sunucu
       değiştirme de var), Bildirimler → üst çubuktaki #top-inbox-btn,
       Hesabım (ayarlar/çıkış) → kanal listesinin altındaki #user-panel
       (bkz. aşağıdaki mobil #user-panel kuralı). Artık #app'in altında
       ayrılmış bir çubuk olmadığı için klavye açıkken/kapalıyken aynı
       hesap geçerli, ayrı bir "keyboard-open" istisnasına gerek kalmadı. */
    #app { height: calc(var(--app-vh, 1vh) * 100 - 48px); }

    /* Kanal çekmecesinin altındaki kullanıcı paneli (avatar+isim+ayarlar/
       çıkış) masaüstü yoğunluğunda tasarlanmıştı — mobilde dokunma
       hedeflerini büyüt ve iPhone home-indicator güvenli alanını ekle. */
    #user-panel {
        height: auto;
        min-height: 56px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    }
    #user-panel .actions a {
        min-width: 40px; min-height: 40px;
        display: flex; align-items: center; justify-content: center;
        font-size: 16px;
    }

    /* ── DM Paneli (mobil: liste <-> sohbet, tek ekran) ──
       Masaüstünde liste ve sohbet yan yana; dar ekranda ikisi aynı anda
       sığmadığı için biri her zaman sohbeti "yiyordu". Mobilde varsayılan
       tam ekran liste, bir kişiye dokununca liste kapanıp sohbet tam
       ekran açılıyor; sohbet başlığındaki geri okuyla listeye dönülüyor.
       left:0 şart: masaüstündeki 68px'lik sol boşluk sunucu rayının hep
       görünür olmasına dayanıyordu — ray artık mobilde varsayılan gizli
       (sadece "sunucu ana sayfası" açıkken görünüyor), o boşluk artık
       boş kalır, DM paneli de tam ekran olmalı. */
    #dm-panel { left: 0; }
    #dm-conv-sidebar { width: 100%; border-right: none; }
    #dm-chat-col { display: none; }
    #dm-panel.showing-chat #dm-conv-sidebar { display: none; }
    #dm-panel.showing-chat #dm-chat-col { display: flex; }
    #dm-back-btn {
        display: flex !important;
        align-items: center; justify-content: center;
        width: 36px; height: 36px; margin: -6px 0 -6px -6px;
        background: none; border: none; color: var(--text-secondary);
        font-size: 16px; cursor: pointer; flex-shrink: 0;
    }
}
@media (max-width: 440px) {
    #server-sidebar { width: 56px; }
    .server-icon { width: 38px; height: 38px; }

    #chat-header .ch-name { font-size: 13px; }

    /* Dar ekranda ray 56px'e küçülüyor, liste çekmecesinin sol boşluğu da
       (680px sorgusundaki 68px yerine) buna uymalı. */
    #channel-sidebar.mobile-open { left: 56px; }
}

/* ── Emoji Picker ── */
.emoji-picker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.emoji-picker-container {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    z-index: 500;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px var(--border);
    animation: emojiPopIn 0.15s ease;
}
@keyframes emojiPopIn {
    from { opacity: 0; transform: scale(0.92) translateY(6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Emoji Mart Picker özelleştirmesi — eski emoji-picker-element ile aynı
   açık renkli (tema fark etmeksizin) görünümü korur. Değişken isimleri
   emoji-mart@5.6.0'ın gerçek dağıtım paketinden doğrulandı. */
em-emoji-picker {
    --rgb-background: 255, 255, 255;
    --rgb-input:      255, 255, 255;
    --rgb-color:      17, 24, 39;
    --rgb-accent:     192, 122, 16;
    --color-border:      #d1d5db;
    --color-border-over: #c07a10;
    --font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-size: 15px;
    --border-radius: 12px;
    width: 352px;
    height: 420px;
}

/* ── Mention Toast (sağ-alt bildirim) ── */
#mention-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100000;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    width: 320px;
    max-width: calc(100vw - 40px);
    pointer-events: none;
}
.mention-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    cursor: pointer;
    animation: mentionToastIn .2s ease;
}
.mention-toast.mention-toast-out { animation: mentionToastOut .2s ease forwards; }
@keyframes mentionToastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mentionToastOut { to { opacity: 0; transform: translateX(24px); } }
.mention-toast-icon { font-size: 18px; flex-shrink: 0; line-height: 1.2; }
.mention-toast-body { flex: 1; min-width: 0; }
.mention-toast-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.mention-toast-channel { font-weight: 500; color: var(--text-muted); font-size: 12px; margin-left: 4px; }
.mention-toast-preview {
    font-size: 12px; color: var(--text-secondary); margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mention-toast-close {
    background: none; border: none; color: var(--text-muted); font-size: 16px;
    cursor: pointer; flex-shrink: 0; padding: 0 2px; line-height: 1;
}
.mention-toast-close:hover { color: var(--text-primary); }
@media (max-width: 680px) {
    #mention-toast-container {
        left: 12px; right: 12px; width: auto;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Embed: YouTube ── */
.msg-embeds { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }

.embed-yt {
    max-width: 480px;
    background: var(--bg-secondary);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.embed-yt-thumb {
    position: relative;
    cursor: pointer;
    background: #000;
    line-height: 0;
}
.embed-yt-thumb img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 270px;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
.embed-yt-thumb:hover img { opacity: 0.8; }
.embed-yt-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.embed-yt-play {
    width: 68px; height: 68px;
    background: rgba(0,0,0,0.75);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.15s;
}
.embed-yt-thumb:hover .embed-yt-play {
    background: #ff0000;
    transform: scale(1.08);
}
.embed-yt-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-channel);
}

/* ── Link Preview (OpenGraph) ── */
.link-preview {
    max-width: 420px;
    margin-top: 4px;
}
.lp-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.lp-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.lp-image {
    line-height: 0;
    overflow: hidden;
    max-height: 200px;
}
.lp-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.lp-body {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lp-site {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lp-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lp-description {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Embed: Instagram ── */
.embed-ig {
    max-width: 360px;
}
.embed-ig .instagram-media {
    border-radius: 10px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-secondary) !important;
}

/* ── Embed: X (Twitter) ── */
.embed-x {
    max-width: 360px;
}

/* ── Scrolling animations ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.msg-group.new-msg { animation: fadeIn 0.2s ease; }

/* ── Date Dividers ── */
.date-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 16px 8px;
    margin-top: 8px;
}
.date-divider-line {
    flex: 1;
    height: 1px;
    background: var(--border);
    opacity: 0.4;
}
.date-divider-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-mono);
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

/* ── Unread Divider ("Yeni Mesajlar") ──
   Bir kanal okunmamış mesajla açıldığında, en alta değil son okunan mesajın
   hemen sonrasına kaydırılıyor (bkz. chat-core.js loadMessagesAroundUnread) —
   bu bölücü, okunmuş/okunmamış sınırını görsel olarak işaretler. */
.unread-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin: 4px 0;
}
.unread-divider-line {
    flex: 1;
    height: 1px;
    background: var(--accent-red);
    opacity: 0.5;
}
.unread-divider-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-red);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Loading ── */
.typing-indicator { display: flex; gap: 4px; padding: 4px 0; }
.typing-dot {
    width: 6px; height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: bounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Invite code highlight ── */
.invite-code {
    font-family: monospace;
    background: var(--bg-channel);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--accent-orange);
    user-select: all;
    cursor: text;
}

/* ══════════════════════════════════════════
   FINANCIAL FEATURES
══════════════════════════════════════════ */

/* ── News Ticker ── */
#news-ticker {
    height: 36px;
    background: linear-gradient(135deg, #e8ebef 0%, #dde1e7 100%);
    border-bottom: 1px solid var(--border-strong);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    box-shadow: inset 0 -1px 0 rgba(245,166,35,0.08);
}
.news-ticker-label {
    padding: 0 16px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent);
    background: rgba(245,166,35,0.08);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}
.news-ticker-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}
#news-ticker-items {
    display: inline-flex;
    gap: 0;
    animation: ticker-scroll 80s linear infinite;
    white-space: nowrap;
    will-change: transform;
}
#news-ticker-items:hover {
    animation-play-state: paused;
    cursor: pointer;
}
.ticker-item {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 0 32px 0 0;
    cursor: pointer;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
}
.ticker-item:hover { color: var(--text-primary); }
.ticker-item::before {
    content: '▸';
    color: var(--border);
    font-size: 10px;
    margin-right: 12px;
    flex-shrink: 0;
}
.ticker-source {
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--accent);
    margin-right: 7px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Stock TradingView Button (inline) ── */
.stock-tv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    background: var(--bg-hover, rgba(0,0,0,0.04));
    border: 1px solid var(--border);
    transition: background .15s, border-color .15s;
    vertical-align: middle;
    margin-left: 2px;
}
.stock-tv-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}

/* ── Message Reactions ── */
.msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-channel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    user-select: none;
    /* iOS'ta basılı tutunca çıkan "Kopyala/Paylaş" callout menüsünü
       engeller — kim tepki verdiğini gösteren özel tooltip'imiz onun
       yerine geçiyor (bkz. financial-reactions.js). */
    -webkit-touch-callout: none;
}
.reaction-chip:hover { background: var(--bg-hover); border-color: var(--accent); }
.reaction-chip.mine  { background: rgba(31,111,235,0.12); border-color: rgba(31,111,235,0.4); }
.reaction-chip .r-count { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.reaction-chip.mine .r-count { color: #000; font-weight: 700; }

/* ── Reaction User Tooltip ── */
.reaction-tooltip {
    position: fixed;
    z-index: 10000;
    background: var(--bg-secondary, #1e1f22);
    border: 1px solid var(--border, #3f4147);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    padding: 10px 14px;
    min-width: 180px;
    max-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s, transform 0.12s;
}
.reaction-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.reaction-tooltip-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted, #949ba4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border, #3f4147);
    display: flex;
    align-items: center;
    gap: 4px;
}
.reaction-tooltip-names {
    font-size: 13px;
    color: var(--text-primary, #f2f3f5);
    line-height: 1.5;
    padding-top: 4px;
}
.reaction-tooltip-names .rt-more {
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
}
.reaction-tooltip-names .rt-more:hover {
    color: var(--accent-hover);
}

/* Reaction Users Modal */
.reaction-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.reaction-user-row:hover {
    background: var(--bg-hover, rgba(0,0,0,0.04));
}
.reaction-user-row:last-child {
    border-bottom: none;
}
.reaction-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}
.reaction-user-name {
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reaction-picker {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 10px;
    gap: 4px;
    flex-wrap: wrap;
    z-index: 250;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    width: max-content;
    max-width: 220px;
}
.reaction-picker.open { display: flex; }
.react-btn-quick {
    font-size: 18px;
    cursor: pointer;
    padding: 3px;
    border-radius: 5px;
    transition: background 0.1s, transform 0.1s;
    line-height: 1;
}
.react-btn-quick:hover { background: var(--bg-hover); transform: scale(1.2); }
.react-btn-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.1s, color 0.1s;
}
.react-btn-more:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── Message hover actions ── */
.msg-actions {
    display: none;
    position: absolute;
    top: 0;
    right: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px 6px;
    gap: 2px;
    align-items: center;
    z-index: 60;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
/* Sadece gerçek fare imleci olan cihazlarda hover ile aç — dokunmatik
   ekranlarda :hover, her dokunuşta tetiklenip menüyü sürekli açık
   bırakıyordu. Mobilde açılış artık basılı tutma (long-press) ile. */
@media (hover: hover) and (pointer: fine) {
    .msg-group:hover .msg-actions { display: flex; }
}
.msg-group.show-actions .msg-actions { display: flex; }
/* Mobilde çubuğu mesajın üstüne taşı — mesajın üzerinde (top:0) kalırsa
   parmağın az önce bulunduğu yere denk gelip yanlışlıkla bir aksiyona
   basılmasına yol açıyordu. */
@media (max-width: 680px) {
    .msg-actions {
        top: auto;
        bottom: calc(100% + 6px);
    }
}
.msg-group.long-pressing { background: var(--bg-hover); transition: background .15s .1s; }
.msg-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 13px;
    transition: all 0.1s;
    position: relative;
}
.msg-action-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.msg-action-btn.pin-active { color: var(--accent-yellow); }

/* ── Pinned message indicator ── */
.msg-group.is-pinned {
    border-left: 3px solid var(--accent-yellow);
    padding-left: 13px;
}
.pin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--accent-yellow);
    margin-bottom: 2px;
    opacity: 0.8;
}

/* ── Pins Panel ── */
#pins-panel {
    display: none;
    position: fixed;
    top: 48px;
    right: 16px;
    width: 320px;
    max-height: calc(100vh - 64px);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    z-index: 300;
    overflow-y: auto;
    flex-direction: column;
}
#pins-panel.open { display: flex; }
#pins-panel-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.pin-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.pin-item:last-child { border-bottom: none; }
.pin-item-author { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.pin-item-content { color: var(--text-primary); line-height: 1.4; }

/* ── Thread Panel ── */
#thread-panel {
    display: none;
    position: fixed;
    top: 48px;
    right: 16px;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    z-index: 350;
    flex-direction: column;
    overflow: hidden;
    animation: threadSlideIn 0.2s ease;
}
@keyframes threadSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
#thread-panel.open { display: flex; }
#thread-panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
#thread-panel-parent {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
    max-height: 80px;
    overflow-y: auto;
}
#thread-panel-parent .tp-parent-author {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 11px;
    margin-bottom: 2px;
}
#thread-panel-messages {
    flex: 1;
    overflow-y: auto;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 150px;
}
.thread-msg {
    padding: 4px 0;
}
.thread-msg-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 1px;
}
.thread-msg-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.thread-msg-avatar-placeholder {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}
.thread-msg-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.thread-msg-time {
    font-size: 10px;
    color: var(--text-muted);
}
.thread-msg-content {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
    padding-left: 30px;
    white-space: pre-wrap;
}
.thread-msg-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 30px 0;
}
#thread-panel-input {
    flex-shrink: 0;
}

/* ── Thread indicator on messages ── */
.thread-indicator {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--bg-channel);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.thread-indicator:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--text-primary);
}
.thread-indicator .ti-icon {
    font-size: 12px;
    color: var(--accent);
}

/* ── Member List Panel (in-chat overlay) ── */
#member-list-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 50;
    display: none;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}
#member-list-panel.open {
    display: flex;
    transform: translateX(0);
}
#member-list-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 48px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    background: linear-gradient(180deg, rgba(245,166,35,0.035), transparent);
    box-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.ml-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 20px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background .15s;
}
.ml-close-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
#member-list-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
}

/* Bekleyen katılım istekleri (özel sunucu, davet kodsuz "giriş talebi") */
#member-list-pending-requests:empty { display: none; }
.ml-pending-header {
    padding: 10px 16px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ml-pending-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 16px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.ml-pending-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.ml-pending-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.ml-pending-info { flex: 1; min-width: 0; }
.ml-pending-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-pending-username { font-size: 11px; color: var(--text-muted); }
.ml-pending-actions { display: flex; gap: 4px; flex-shrink: 0; }
.ml-pending-approve, .ml-pending-reject {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: opacity .15s;
}
.ml-pending-approve { background: var(--accent-green); color: #fff; }
.ml-pending-reject { background: var(--accent-red); color: #fff; }
.ml-pending-approve:disabled, .ml-pending-reject:disabled { opacity: .5; cursor: default; }

/* Member list toolbar */
.ml-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.ml-search {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color .15s;
}
.ml-search:focus { border-color: var(--accent); }
.ml-search::placeholder { color: var(--text-muted); }

/* Member list table */
.ml-table-wrap {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-secondary);
}
.ml-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ml-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.ml-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color .15s;
}
.ml-table th:hover { color: var(--text-primary); }
.ml-table th.ml-sort-active { color: var(--accent); }
.ml-table th.ml-sort-active::after {
    content: ' ▾';
    font-size: 10px;
}
.ml-table th.ml-sort-asc::after { content: ' ▴'; }
.ml-table th.ml-num { text-align: right; }
.ml-table th.ml-center { text-align: center; }

.ml-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.ml-table tbody tr:last-child { border-bottom: none; }
.ml-table tbody tr:hover { background: var(--bg-hover); }

.ml-table td {
    padding: 10px 12px;
    vertical-align: middle;
}

.ml-member-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ml-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}
.ml-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ml-member-info {
    min-width: 0;
}
.ml-member-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ml-member-username {
    font-size: 11px;
    color: var(--text-muted);
}
.ml-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ml-status-online { background: #22c55e; }
.ml-status-offline { background: #6b7280; }

.ml-role-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.ml-join-method {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.ml-jm-davet { background: rgba(59,130,246,0.12); color: #3b82f6; }
.ml-jm-ucret { background: rgba(245,166,35,0.12); color: #f5a623; }
.ml-jm-yonetici { background: rgba(124,58,237,0.12); color: #7c3aed; }
.ml-jm-direkt { background: rgba(107,114,128,0.12); color: #6b7280; }

.ml-num-cell { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.ml-center-cell { text-align: center; }

.ml-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}
.ml-count {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
    padding: 0 4px;
}

/* ── Member List Pagination Footer ── */
.ml-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0 0;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}
.ml-footer-info {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.ml-footer-pagination {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
}
.ml-nav-btn, .ml-page-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all .12s;
    min-width: 28px;
    text-align: center;
}
.ml-nav-btn:hover:not(:disabled), .ml-page-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent);
}
.ml-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ml-page-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
}
.ml-page-ellipsis {
    color: var(--text-muted);
    font-size: 12px;
    padding: 0 4px;
}
.ml-footer-perpage {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.ml-perpage-select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    padding: 3px 6px;
    cursor: pointer;
    outline: none;
    font-family: inherit;
}
.ml-perpage-select:focus { border-color: var(--accent); }

/* Member list detail button */
.ml-detail-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    transition: all .15s;
}
.ml-detail-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(31,111,235,0.08);
}

/* Member Detail Panel (right side) */
#member-detail-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 90%;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    z-index: 55;
    display: none;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}
#member-detail-panel.open {
    display: flex;
    transform: translateX(0);
}
#member-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 48px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    background: linear-gradient(180deg, rgba(245,166,35,0.035), transparent);
}
#member-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px;
}

/* Detail panel — header section */
.md-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}
.md-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}
.md-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.md-info {
    min-width: 0;
}
.md-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.md-username {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Detail panel — stat cards */
.md-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.md-stat-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 8px;
    text-align: center;
    transition: border-color .15s;
}
.md-stat-card:hover {
    border-color: var(--accent);
}
.md-stat-icon {
    font-size: 18px;
    color: var(--accent);
    margin-bottom: 6px;
}
.md-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.md-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Detail panel — info rows */
.md-info-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.md-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    font-size: 13px;
}
.md-info-key {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.md-info-key i {
    font-size: 12px;
    width: 14px;
    text-align: center;
}
.md-info-val {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

/* ── Members Panel ── */
#members-panel {
    width: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--bg-secondary);
    border-left: 1px solid transparent;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: width 0.25s cubic-bezier(.4,0,.2,1), border-left-color 0.25s;
}
#members-panel.open {
    width: 240px;
    border-left-color: var(--border);
}
#members-panel-header {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
#members-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.members-section-label {
    padding: 12px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.member-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border-radius: 6px;
    margin: 1px 6px;
    cursor: pointer;
    transition: background .12s;
}
.member-item:hover { background: var(--bg-hover); }
.member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    position: relative;
}
.member-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.member-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-secondary);
}
.member-status-dot.online  { background: #22c55e; }
.member-status-dot.offline { background: #6b7280; }
.member-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.member-item.offline-member .member-name { color: var(--text-muted); }
#members-panel-btn.active { color: var(--accent); }

#members-panel-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 499;
}

/* ── Reply-to-me highlight ── */
.msg-group.reply-to-me {
    background: rgba(250, 204, 21, 0.05);
    border-left: 2px solid rgba(250, 204, 21, 0.5);
    margin-left: -2px;
}
.msg-group.reply-to-me:hover {
    background: rgba(250, 204, 21, 0.08);
}

/* ── Reply quote block (inside message) ── */
.reply-quote {
    display: flex;
    flex-direction: column;
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent);
    border-radius: 0 4px 4px 0;
    padding: 4px 10px;
    margin-bottom: 4px;
    max-width: 480px;
    cursor: pointer;
}
.reply-quote:hover { background: var(--bg-hover); }
.reply-quote-deleted { cursor: default; font-style: italic; }
.reply-quote-deleted:hover { background: var(--bg-tertiary); }
.reply-quote-author {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 1px;
}
.reply-quote-text {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Poll ── */
.poll-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    max-width: 380px;
    margin-top: 6px;
}
.poll-question {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.poll-option {
    position: relative;
    margin-bottom: 8px;
    border-radius: 7px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: border-color 0.15s;
}
.poll-option:hover { border-color: var(--accent); }
.poll-option.voted { border-color: var(--accent); }
.poll-option-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(31,111,235,0.12);
    transition: width 0.4s ease;
    border-radius: 6px;
}
.poll-option.winner .poll-option-bar { background: rgba(63,185,80,0.12); }
.poll-option-label {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    font-size: 13px;
    z-index: 1;
}
.poll-option-pct {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}
.poll-option.voted .poll-option-pct { color: var(--accent-hover); }
.poll-footer {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Poll creation modal extra styles ── */
#poll-options-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.poll-opt-input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    width: 100%;
    transition: border-color 0.15s;
}
.poll-opt-input:focus { border-color: var(--accent); }

/* ══════════════════════════════════════════════
   TRADINGVIEW EMBED CARDS (Pine Script + Ideas)
══════════════════════════════════════════════ */
.tv-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 4px 0;
    max-width: 400px;
    transition: border-color .15s, box-shadow .15s;
    text-decoration: none;
}
.tv-card:hover { border-color: var(--accent); box-shadow: var(--glow-accent); }
.tv-script-card { border-left: 3px solid #2962FF; }
.tv-idea-card   { border-left: 3px solid #26a69a; }
.tv-card-icon { flex-shrink: 0; }
.tv-card-body { min-width: 0; }
.tv-card-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.tv-script-card .tv-card-label { color: #2962FF; }
.tv-idea-card   .tv-card-label { color: #26a69a; }
.tv-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.tv-card-link {
    font-size: 11px;
    color: var(--accent-hover);
    text-decoration: none;
}
.tv-card-link:hover { text-decoration: underline; }

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ── Dark Theme ── */
body.dark-theme {
    --bg-primary:    #1a1b1e;
    --bg-secondary:  #2c2e33;
    --bg-tertiary:   #25272b;
    --bg-channel:    #1e2024;
    --bg-input:      #2c2e33;
    --bg-hover:      #35373d;
    --bg-active:     rgba(192,122,16,0.15);
    --border:        #3d4147;
    --border-strong: #52575f;
    --text-primary:  #e6e8ec;
    --text-secondary:#b0b8c4;
    --text-muted:    #6b7280;
    --scrollbar-thumb: #3d4147;
}
body.dark-theme .tv-script-card,
body.dark-theme .tv-idea-card  { box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
/* ── Bot Slash Autocomplete ── */
#slash-autocomplete {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    z-index: 500;
    min-width: 280px;
    max-width: 420px;
    overflow: hidden;
}
#slash-autocomplete .slash-header {
    padding: 6px 12px 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.slash-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    cursor: pointer;
    transition: background .1s;
}
.slash-item:hover, .slash-item.active { background: var(--bg-hover); }
.slash-item-cmd  { font-size: 13px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); min-width: 90px; }
.slash-item-desc { font-size: 12px; color: var(--text-secondary); }

/* ── Bot Response Card ── */
.bot-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 4px;
    max-width: 480px;
}
.bot-icon { font-size: 20px; line-height: 1; }
.bot-body { flex: 1; }
.bot-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.bot-content { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.bot-content a { color: var(--accent); text-decoration: none; }
.bot-content a:hover { text-decoration: underline; }

/* ── Translate Button & Result ── */
.msg-translate-result {
    margin-top: 5px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent-blue);
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.5;
}
.msg-translate-result .tr-label { font-size: 10px; font-style: normal; color: var(--text-muted); margin-bottom: 2px; }

/* ── Kanal İstatistikleri Panel ── */
#stats-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 340px;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-strong);
    display: flex;
    flex-direction: column;
    z-index: 400;
    box-shadow: -4px 0 24px rgba(0,0,0,0.13);
    animation: slideInRight .2s ease;
    overflow-y: auto;
}
.stats-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1;
}
.stats-panel-header span { font-weight: 700; font-size: 14px; }
.stats-panel-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-secondary); line-height: 1; padding: 0 4px; }
.stats-panel-close:hover { color: var(--text-primary); }
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px;
}
.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
}
.stat-card .stat-value { font-size: 26px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat-card .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.stats-section { padding: 0 16px 16px; }
.stats-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; }
.stats-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.stats-user-row:last-child { border-bottom: none; }
.stats-user-rank { font-size: 11px; color: var(--text-muted); width: 16px; text-align: center; }
.stats-user-name { flex: 1; font-weight: 600; color: var(--text-primary); }
.stats-user-count { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.stats-ticker-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(192,122,16,0.25);
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
    margin: 3px;
}

/* ══════════════════════════════════════════════════════════════
   MODERATION UI - Context Menu & Actions
   ══════════════════════════════════════════════════════════════ */

/* Context Menu (Right-click) */
.ctx-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    border-radius: 4px;
    transition: background 0.1s ease, color 0.1s ease;
    user-select: none;
}

.ctx-menu-item:hover {
    background: var(--bg-hover);
}

.ctx-menu-item.ctx-danger {
    color: var(--accent-red);
}

.ctx-menu-item.ctx-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-red);
}

.ctx-menu-item i {
    font-size: 14px;
    opacity: 0.8;
}

/* Modal Headers & Footers */
.modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
}

.modal-body {
    padding: 20px 24px;
}

.modal-content {
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-tertiary));
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    padding: 28px;
    max-width: 440px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 20px;
    padding: 0;
    line-height: 1;
}
.modal-close:hover {
    color: var(--text-primary);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-tertiary);
    border-radius: 0 0 18px 18px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}