/* -- Scrollbar -------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb  { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* -- Base ------------------------------------------------------- */
body { margin: 0; overflow: hidden; }
.chat-link { color: #f97316; text-decoration: underline; word-break: break-all; }
.chat-link:hover { color: #fdba74; }

/* -- Chat container: override Tailwind space-y ------------------- */
#chatMessages { row-gap: 0; gap: 0; }
#chatMessages.style-mirc    { padding-top: 4px; padding-bottom: 4px; font-family: "Courier New", Courier, monospace; }
#chatMessages.style-compact { padding-top: 4px; padding-bottom: 4px; }

/* == THEME VARIABLES (light default) ============================ */
:root {
    --color-bg:             #ffffff;
    --color-sidebar:        #f9fafb;
    --color-surface:        #f3f4f6;
    --color-surface-hover:  #e5e7eb;
    --color-border:         #e5e7eb;
    --color-text:           #111827;
    --color-text-muted:     #6b7280;
    --color-text-faint:     #9ca3af;
    --color-input-bg:       #f8fafc;
    --color-bubble-other:   #f3f4f6;
    --color-bubble-other-b: #e5e7eb;
    --color-system-msg-bg:  #f8fafc;
    --color-system-msg-b:   #f3f4f6;
    --scrollbar-track:      #f8fafc;
    --scrollbar-thumb:      #cbd5e1;
    --scrollbar-thumb-hover:#94a3b8;
}

/* -- Dark mode overrides ---------------------------------------- */
.dark {
    --color-bg:             #0f172a;
    --color-sidebar:        #1e293b;
    --color-surface:        #273447;
    --color-surface-hover:  #334155;
    --color-border:         #334155;
    --color-text:           #f1f5f9;
    --color-text-muted:     #94a3b8;
    --color-text-faint:     #64748b;
    --color-input-bg:       #1e293b;
    --color-bubble-other:   #1e293b;
    --color-bubble-other-b: #334155;
    --color-system-msg-bg:  #162032;
    --color-system-msg-b:   #263650;
    --scrollbar-track:      #1e293b;
    --scrollbar-thumb:      #475569;
    --scrollbar-thumb-hover:#64748b;
}

/* -- Structural backgrounds ------------------------------------- */
body                        { background-color: var(--color-bg); color: var(--color-text); }
#leftSidebar, #rightSidebar { background-color: var(--color-sidebar); border-color: var(--color-border); }

/* -- Dark: channel/DM list items -------------------------------- */
.dark #channelList li, .dark #dmList li { color: #cbd5e1; }
.dark #channelList li:hover, .dark #dmList li:hover { background-color: var(--color-surface-hover); color: #f1f5f9; }
.dark #channelList li.bg-brand-purple\/10, .dark #dmList li.bg-brand-purple\/10 { color: #c084fc !important; }

/* -- Dark: user list -------------------------------------------- */
.dark #userList > div { color: #94a3b8; }
.dark #userList > div:hover { background-color: var(--color-surface-hover); color: #f1f5f9; }
.dark #userList span.text-gray-700 { color: #cbd5e1; }
.dark #userListTitle { color: #94a3b8; }

/* -- Dark: chat header ------------------------------------------ */
.dark #currentChatTitle { color: var(--color-text); }
.dark #callStatusText   { color: #94a3b8; }
.dark #serverInfo       { color: var(--color-text); }
.dark #myNickDisplay    { color: var(--color-text); }

/* -- Dark: messages — ana mesaj metinleri her zaman görünür ------- */
.dark #chatMessages { background-color: var(--color-bg); }

/* Discord stili */
.dark #chatMessages .text-gray-800  { color: #e2e8f0 !important; }
.dark #chatMessages .text-gray-900  { color: #f1f5f9 !important; }
.dark #chatMessages .text-gray-700  { color: #cbd5e1 !important; }
.dark #chatMessages .text-gray-400  { color: #64748b !important; }
.dark #chatMessages .text-sm.font-bold { color: #e2e8f0 !important; }

/* WhatsApp stili — bubble-other */
.dark .bubble-other,
.dark #chatMessages .bg-gray-100 {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
.dark #chatMessages .bg-gray-100.text-gray-800 { color: #e2e8f0 !important; }

/* Sistem / event mesaj baloncukları — koyu arka plan */
.dark #chatMessages .bg-gray-50,
.dark #chatMessages .border-gray-100 {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
.dark #chatMessages .text-gray-500 { color: #94a3b8 !important; }

/* Discord hover row — koyu temada da görünür */
.dark #chatMessages .hover\:bg-gray-50:hover { background-color: #1e293b !important; }

/* Kompakt & mIRC hover row */
.dark .msg-row-hover:hover { background-color: var(--color-surface) !important; }
.dark .mirc-row:hover { background-color: var(--color-surface) !important; }
.dark .mirc-row .mirc-text  { color: var(--color-text) !important; }
.dark .mirc-row .mirc-time  { color: var(--color-text-faint) !important; }

/* mIRC & compact stilleri — inline sınıflar */
.dark #chatMessages.style-mirc span.text-gray-800,
.dark #chatMessages.style-compact .text-gray-800 { color: #e2e8f0 !important; }
.dark #chatMessages.style-mirc span.text-gray-500,
.dark #chatMessages.style-compact .text-gray-400 { color: #64748b !important; }
.dark #chatMessages.style-mirc .hover\:bg-gray-50:hover,
.dark #chatMessages.style-compact .hover\:bg-gray-50:hover { background-color: var(--color-surface) !important; }

/* Timestamp — silik ama okunabilir */
.dark #chatMessages .text-\[10px\].text-gray-400 { color: #475569 !important; }

/* -- Dark: input area ------------------------------------------- */
.dark #chatInput {
    color: #f1f5f9 !important;
    background-color: transparent !important;
    caret-color: #c084fc;
}
.dark #chatInput::placeholder { color: #475569 !important; }
.dark #chatInput:focus { color: #f1f5f9 !important; background-color: transparent !important; }

/* Input wrapper arka plan */
.dark .focus-within\:ring-brand-purple\/30:focus-within { --tw-ring-color: rgba(192,132,252,0.3); }

/* -- Dark: system pill (event message) --------------------------- */
.dark .system-pill {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #64748b !important;
}

/* -- Dark: nick context menu ------------------------------------ */
.dark #nickContextMenu { background-color: var(--color-sidebar); border-color: var(--color-border); }
.dark #nickContextMenu button { color: var(--color-text-muted); }
.dark #nickContextMenu button:hover { background-color: var(--color-surface); }

/* -- Dark: server buffer button ---------------------------------- */
.dark #serverBufferBtn:hover { background-color: #1e293b; }
.dark #serverTabLabel { color: #94a3b8; }

/* -- Dark: sidebar section labels -------------------------------- */
.dark .px-6.py-1\.5.text-\[10px\] { color: #475569; }

/* -- Dark: modals ----------------------------------------------- */
.dark #loginModal > div > div { background-color: var(--color-sidebar); border-color: var(--color-border); }
.dark #settingsModal > div { background-color: var(--color-sidebar); border-color: var(--color-border); }
.dark #settingsModal input[type=text], .dark #settingsModal select { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.dark #settingsModal .bg-gray-50 { background-color: var(--color-surface); border-color: var(--color-border); }
.dark #settingsModal .text-gray-800 { color: var(--color-text); }
.dark #settingsModal .text-gray-900 { color: var(--color-text); }
.dark #settingsModal .text-gray-500 { color: var(--color-text-muted); }
.dark #loginModal input[type=text], .dark #loginModal select { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.dark #loginModal .text-gray-500 { color: var(--color-text-muted); }
.dark #loginModal .text-gray-900 { color: var(--color-text); }

/* ================================================================
   AÇIK TEMA (LIGHT) KONTRAST DÜZELTMELERİ
   ================================================================ */

/* Sidebar kanal/dm öğeleri — yeterince koyu metin */
#channelList li, #dmList li { color: #374151; }
#channelList li:hover, #dmList li:hover { background-color: #f3f4f6; }
#channelList li.bg-brand-purple\/10, #dmList li.bg-brand-purple\/10 { color: #7e22ce !important; }

/* Sunucu buffer butonu */
#serverBufferBtn .text-gray-500 { color: #6b7280; }
#serverTabLabel { color: #4b5563; }

/* Kullanıcı listesi */
#userList > div { color: #374151; }
#userListTitle { color: #374151; font-weight: 700; }

/* Sohbet alanı — sistem (event) mesajları */
#chatMessages .flex.justify-center .rounded-full {
    background-color: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #6b7280 !important;
}

/* mIRC stili — koyu metin */
#chatMessages.style-mirc .text-gray-800 { color: #111827 !important; }
#chatMessages.style-mirc .text-gray-500 { color: #6b7280 !important; }

/* Kompakt stil */
#chatMessages.style-compact .text-gray-800 { color: #111827 !important; }
#chatMessages.style-compact .text-gray-400 { color: #9ca3af !important; }

/* Discord stil */
#chatMessages .text-gray-800 { color: #1f2937; }
#chatMessages .text-gray-400 { color: #9ca3af; }
#chatMessages .text-gray-900 { color: #111827; }

/* Input alanı */
#chatInput { color: #111827; background-color: transparent !important; }
#chatInput:focus { background-color: transparent !important; }
#chatInput::placeholder { color: #9ca3af; }

/* Sunucu başlığı bar */
#serverInfo { color: #1f2937; font-weight: 700; }

/* Sidebar ayırıcı çizgi */
.dark .mx-3.my-2.border-t { border-color: #334155; }