/* == RENK PALETI (app.js bu degiskenleri secilen palete gore ayarlar) ========= */
:root {
    --p-accent:       126 34 206;
    --p-accent-light: 147 51 234;
    --p-on-dark:      192 132 252;
    --p-soft:         243 232 255;
    --p-sidebar:      249 250 251;
}

/* -- 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:        rgb(var(--p-sidebar));
    --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:      #d1d1d6;
    --scrollbar-thumb-hover:#98989d;
}

/* -- Dark mode overrides ---------------------------------------- */
.dark {
    --color-bg:             #000000;
    --color-sidebar:        #1c1c1e;
    --color-surface:        #2c2c2e;
    --color-surface-hover:  #262629;
    --color-border:         #262629;
    --color-text:           #f5f5f7;
    --color-text-muted:     #98989d;
    --color-text-faint:     #636366;
    --color-input-bg:       #1c1c1e;
    --color-bubble-other:   #1c1c1e;
    --color-bubble-other-b: #262629;
    --color-system-msg-bg:  #1c1c1e;
    --color-system-msg-b:   #2c2c2e;
    --scrollbar-track:      #1c1c1e;
    --scrollbar-thumb:      #48484a;
    --scrollbar-thumb-hover:#636366;
}

/* -- 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: #d1d1d6; }
.dark #channelList li:hover, .dark #dmList li:hover { background-color: var(--color-surface-hover); color: #f5f5f7; }
.dark #channelList li.bg-brand-purple\/10, .dark #dmList li.bg-brand-purple\/10 { color: rgb(var(--p-on-dark)) !important; }

/* -- Dark: user list -------------------------------------------- */
.dark #userList > div { color: #98989d; }
.dark #userList > div:hover { background-color: var(--color-surface-hover); color: #f5f5f7; }
.dark #userList span.text-gray-700 { color: #d1d1d6; }
.dark #userListTitle { color: #98989d; }

/* -- Dark: chat header ------------------------------------------ */
.dark #currentChatTitle { color: var(--color-text); }
.dark #callStatusText   { color: #98989d; }
.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: #e5e5ea !important; }
.dark #chatMessages .text-gray-900  { color: #f5f5f7 !important; }
.dark #chatMessages .text-gray-700  { color: #d1d1d6 !important; }
.dark #chatMessages .text-gray-400  { color: #636366 !important; }
.dark #chatMessages .text-sm.font-bold { color: #e5e5ea !important; }

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

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

/* Discord hover row — koyu temada da görünür */
.dark #chatMessages .hover\:bg-gray-50:hover { background-color: #1c1c1e !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: #e5e5ea !important; }
.dark #chatMessages.style-mirc span.text-gray-500,
.dark #chatMessages.style-compact .text-gray-400 { color: #636366 !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: #48484a !important; }

/* -- Dark: input area ------------------------------------------- */
.dark #chatInput {
    color: #f5f5f7 !important;
    background-color: transparent !important;
    caret-color: rgb(var(--p-on-dark));
}
.dark #chatInput::placeholder { color: #48484a !important; }
.dark #chatInput:focus { color: #f5f5f7 !important; background-color: transparent !important; }

/* Input wrapper arka plan */
.dark .focus-within\:ring-brand-purple\/30:focus-within { --tw-ring-color: rgb(var(--p-on-dark) / 0.3); }

/* -- Dark: system pill (event message) --------------------------- */
.dark .system-pill {
    background-color: #1c1c1e !important;
    border-color: #262629 !important;
    color: #636366 !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: #1c1c1e; }
.dark #serverTabLabel { color: #98989d; }

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

/* -- 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: rgb(var(--p-accent)) !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: #262629; }

/* Nick susleme animasyonlari (@keyframes) artik nick-animations.css icinde: hem sohbet hem yonetici paneli kullanir. */

/* Radyo "su an calan" metni konteynerine sigmiyorsa kayan yazi olur (JS bunu
   olcup .marquee class'ini ekliyor/kaldiriyor); sigan kisa metinler sabit kalir. */
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}
.marquee-track.marquee-active {
  animation: marqueeScroll linear infinite;
}


/* ---------- Hizli erisim cubugu: radyo, # kanallar, O.M. ---------- */
.radio-pill {
  display: inline-flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.7rem;
  border-radius: 999px; border: 0; color: #fff; font-size: 0.75rem; font-weight: 700; cursor: pointer;
  transition: background-color .15s, transform .1s, box-shadow .15s;
}
.radio-pill:active { transform: scale(0.96); }
.radio-pill.radio-on { background: #16a34a; box-shadow: 0 4px 14px -4px rgba(22, 163, 74, 0.7); }
.radio-pill.radio-on:hover { background: #15803d; }
.radio-pill.radio-off { background: #dc2626; box-shadow: 0 4px 14px -4px rgba(220, 38, 38, 0.6); }
.radio-pill.radio-off:hover { background: #b91c1c; }
.radio-led { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #fff; flex-shrink: 0; }
.radio-pill.radio-on .radio-led { animation: radioPulse 1.8s ease-out infinite; }
@keyframes radioPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.85); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}

.nav-pill {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 2rem; padding: 0 0.7rem;
  border-radius: 999px; border: 0; background: #f3f4f6; color: #374151; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.nav-pill:hover, .nav-pill[aria-expanded="true"] { background: rgb(var(--p-soft)); color: rgb(var(--p-accent)); }
.dark .nav-pill { background: #1c1c1e; color: #e5e5ea; }
.dark .nav-pill:hover, .dark .nav-pill[aria-expanded="true"] { background: rgb(var(--p-accent) / 0.28); color: rgb(var(--p-on-dark)); }
.nav-count {
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #e5e7eb; color: #6b7280; font-size: 0.6875rem; font-weight: 700; line-height: 1;
}
.dark .nav-count { background: #262629; color: #98989d; }
.nav-count.has-unread { background: #f97316; color: #fff; }
/* Yanitla / alinti */
.msg-has-reply { position: relative; }
.msg-reply-btn { position: absolute; top: 2px; right: 8px; opacity: 0; width: 26px; height: 26px; border-radius: 8px; border: 0; background: rgba(126, 34, 206, 0.12); color: #7e22ce; font-weight: 700; line-height: 1; cursor: pointer; transition: opacity .12s; z-index: 2; }
.msg-has-reply:hover .msg-reply-btn, .msg-reply-btn:focus-visible { opacity: 1; }
@media (hover: none) { .msg-reply-btn { opacity: .55; } }
.dark .msg-reply-btn { background: rgba(216, 180, 254, 0.16); color: #d8b4fe; }
.reply-quote { display: block; margin: 0 0 3px; padding: 2px 8px; border-left: 3px solid #7e22ce; border-radius: 6px; background: rgba(126, 34, 206, 0.08); font-size: .85em; opacity: .92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .reply-quote { border-left-color: #d8b4fe; background: rgba(216, 180, 254, 0.1); }
.nav-count.has-mention { background: #dc2626; color: #fff; }
/* Bahsedilme: mesaj satiri vurgusu (tum sohbet stillerinde) */
.msg-mention { background: rgba(249, 115, 22, 0.12); box-shadow: inset 3px 0 0 #f97316; border-radius: 10px; }
.dark .msg-mention { background: rgba(249, 115, 22, 0.16); }

.nav-panel {
  position: absolute; left: 0; top: calc(100% + 0.5rem); width: 18rem; max-width: calc(100vw - 1.5rem); max-height: min(20rem, calc(100dvh - 8rem));
  overflow-y: auto; padding: 0.5rem; border-radius: 1rem; background: #fff; border: 1px solid #e5e7eb;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25); z-index: 30;
}
.dark .nav-panel { background: #1c1c1e; border-color: #262629; }
.nav-row {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.6rem; border-radius: 0.75rem;
  text-align: left; font-size: 0.875rem; color: #374151; cursor: pointer; background: transparent; border: 0;
}
.nav-row:hover { background: #f3f4f6; }
.nav-row.is-active { background: rgb(var(--p-accent) / 0.1); color: rgb(var(--p-accent)); font-weight: 700; }
.dark .nav-row { color: #d1d1d6; }
.dark .nav-row:hover { background: #262629; }
.dark .nav-row.is-active { background: rgb(var(--p-on-dark) / 0.15); color: rgb(var(--p-on-dark)); }
.nav-row .nav-row-main { flex: 1; min-width: 0; }
.nav-row .nav-row-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-row .nav-row-sub { display: block; font-size: 0.6875rem; color: #9ca3af; font-weight: 400; }
.nav-row-close { opacity: 0; padding: 0.15rem; border-radius: 0.4rem; color: #9ca3af; flex-shrink: 0; }
.nav-row:hover .nav-row-close, .nav-row:focus-within .nav-row-close { opacity: 1; }
.nav-row-close:hover { background: #fee2e2; color: #ef4444; }
@media (pointer: coarse) { .nav-row-close { opacity: 1; } }
.nav-empty { padding: 0.75rem 0.6rem; font-size: 0.8125rem; color: #9ca3af; }

/* Radyo satiri: ekolayzer cubuklari (radyo kapaliyken durur) */
.radio-eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; flex-shrink: 0; }
.radio-eq i { display: block; width: 3px; height: 100%; background: rgb(var(--p-accent)); border-radius: 2px; transform-origin: bottom; animation: radioEq 1s ease-in-out infinite; }
.dark .radio-eq i { background: rgb(var(--p-on-dark)); }
.radio-eq i:nth-child(2) { animation-delay: -0.4s; }
.radio-eq i:nth-child(3) { animation-delay: -0.75s; }
.radio-eq i:nth-child(4) { animation-delay: -0.2s; }
@keyframes radioEq { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .radio-eq i, .radio-pill.radio-on .radio-led { animation: none; }
}

/* Tam ekran pencereler (id'li .fixed.inset-0): kart ekrandan uzunsa (kisa/yatay telefon) kaydirilabilsin.
   Esnek kapta dikey otomatik kenar bosluklari: yer varken ortalar, tasarsa uste hizalar (ust kesilmez). */
.fixed.inset-0[id] { overflow-y: auto; overscroll-behavior: contain; }
.fixed.inset-0[id] > :first-child { margin-top: auto; margin-bottom: auto; }

/* Emoji ve GIF secicileri girdi kutusunun ustunde acilir: kisa (yatay telefon) ve dar ekranlarda
   yukseklik/genislik ekrana gore sinirlanir ki ust ve yanlardan kesilmesin. */
#emojiPickerContainer { max-width: calc(100vw - 1.5rem); }
#emojiPickerContainer emoji-picker { width: min(22rem, calc(100vw - 1.75rem)); height: min(24rem, calc(100dvh - 10rem)); }
#klipyPickerContainer { max-width: calc(100vw - 1.5rem); max-height: calc(100dvh - 10rem); }

/* ---------- Avatar galerisi (ayarlar) ---------- */
.avatar-chip { font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; background: #f3f4f6; color: #6b7280; border: 0; cursor: pointer; }
.avatar-chip:hover { background: rgb(var(--p-soft)); color: rgb(var(--p-accent)); }
.avatar-chip.is-active { background: rgb(var(--p-accent)); color: #fff; }
.dark .avatar-chip { background: #1c1c1e; color: #98989d; }
.dark .avatar-chip:hover { background: rgb(var(--p-accent) / 0.28); color: rgb(var(--p-on-dark)); }
.dark .avatar-chip.is-active { background: rgb(var(--p-accent-light)); color: #fff; }
.avatar-pager { width: 2rem; height: 2rem; border-radius: 999px; border: 0; background: rgb(var(--p-soft)); color: rgb(var(--p-accent)); font-weight: 800; cursor: pointer; }
.avatar-pager:disabled { opacity: 0.35; cursor: default; }
.dark .avatar-pager { background: rgb(var(--p-accent) / 0.28); color: rgb(var(--p-on-dark)); }
.avatar-opt { position: relative; aspect-ratio: 1 / 1; border-radius: 999px; overflow: hidden; border: 2px solid transparent; background: #f3f4f6; padding: 0; cursor: pointer; transition: transform .12s, border-color .12s; }
.avatar-opt:hover { transform: scale(1.06); border-color: rgb(var(--p-on-dark)); }
.avatar-opt.is-selected { border-color: rgb(var(--p-accent)); box-shadow: 0 0 0 2px rgb(var(--p-accent) / 0.25); }
.avatar-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dark .avatar-opt { background: #1c1c1e; }


/* -- Gorunum paneli: acik/koyu anahtari + palet satirlari ---------- */
.theme-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; margin: 0 4px; background: #f3f4f6; border-radius: 12px; }
.dark .theme-seg { background: #000000; }
.theme-seg-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border-radius: 9px; border: 0; background: transparent; font-size: 13px; font-weight: 700; color: #6b7280; cursor: pointer; }
.dark .theme-seg-btn { color: #98989d; }
.theme-seg-btn.is-active { background: #fff; color: rgb(var(--p-accent)); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.dark .theme-seg-btn.is-active { background: #262629; color: rgb(var(--p-on-dark)); }
.palette-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; color: #374151; font-size: 13px; font-weight: 600; }
.dark .palette-row { color: #d1d1d6; }
.palette-row:hover { background: #f3f4f6; }
.dark .palette-row:hover { background: #262629; }
.palette-row.is-active { background: rgb(var(--p-accent) / 0.1); color: rgb(var(--p-accent)); font-weight: 800; }
.dark .palette-row.is-active { background: rgb(var(--p-on-dark) / 0.15); color: rgb(var(--p-on-dark)); }
.palette-swatches { display: flex; flex-shrink: 0; }
.palette-swatches i { display: block; width: 18px; height: 18px; border-radius: 999px; border: 2px solid #fff; margin-left: -6px; }
.palette-swatches i:first-child { margin-left: 0; }
.dark .palette-swatches i { border-color: #1c1c1e; }
.palette-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-check { width: 16px; height: 16px; flex-shrink: 0; opacity: 0; }
.palette-row.is-active .palette-check { opacity: 1; }
#navThemePanel { width: min(18rem, calc(100vw - 16px)); max-height: min(calc(100dvh - 10.5rem), 37rem); overflow-y: auto; }

/* -- Profil ------------------------------------------------------- */
.profile-row { display: flex; gap: 10px; align-items: flex-start; }
.profile-row-label { width: 7.5rem; flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #9ca3af; padding-top: 2px; }
.profile-row-value { min-width: 0; flex: 1; font-size: 14px; color: #1f2937; word-break: break-word; white-space: pre-wrap; }
.dark .profile-row-value { color: #e5e5ea; }
.profile-row-value a { color: rgb(var(--p-accent)); text-decoration: underline; word-break: break-all; }
.dark .profile-row-value a { color: rgb(var(--p-on-dark)); }
.profile-quote { border-left: 3px solid rgb(var(--p-accent)); padding: 6px 12px; font-style: italic; color: #4b5563; background: rgb(var(--p-accent) / 0.06); border-radius: 0 10px 10px 0; }
.dark .profile-quote { color: #d1d1d6; }
.profile-field label.pf-label { display: block; font-size: 12px; font-weight: 700; color: #4b5563; margin-bottom: 4px; }
.dark .profile-field label.pf-label { color: #d1d1d6; }
.profile-field .pf-input { width: 100%; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; font-size: 14px; color: #111827; }
.dark .profile-field .pf-input { background: #000000; border-color: #262629; color: #f5f5f7; }
.profile-field .pf-input:focus { outline: 2px solid rgb(var(--p-accent) / 0.4); outline-offset: 0; }
.profile-field .pf-input.has-error { border-color: #ef4444; }
.profile-field .pf-show { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: #6b7280; cursor: pointer; }
.dark .profile-field .pf-show { color: #98989d; }
.mini-avatar { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgb(var(--p-accent) / 0.1); color: rgb(var(--p-accent)); font-weight: 700; flex-shrink: 0; }
.dark .mini-avatar { color: rgb(var(--p-on-dark)); }


/* -- Sol menu alt eylemleri (Istek / Nick / Oper) ------------------- */
.drawer-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; border-radius: 12px; border: 1px solid #e5e7eb; background: #fff; color: #4b5563; font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.drawer-action:hover { background: rgb(var(--p-soft)); color: rgb(var(--p-accent)); border-color: rgb(var(--p-accent) / 0.35); }
.dark .drawer-action { background: #000000; border-color: #262629; color: #d1d1d6; }
.dark .drawer-action:hover { background: rgb(var(--p-accent) / 0.25); color: rgb(var(--p-on-dark)); }

/* -- Koyu tema: acik temadan kalan ince cizgiler siyah zeminde parlamasin ---- */
.dark .border-brand-border, .dark .border-gray-100, .dark .border-gray-200 { border-color: #262629; }
.dark #userList .border-b, .dark #userList > div.border-b { border-color: #262629; }
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #262629; }
.dark .bg-gray-900\/80, .dark .bg-gray-900\/50 { background-color: rgba(0, 0, 0, 0.72); }

/* Koyu tema ayiricilari: tum cizgiler yuzeyden yalnizca belli belirsiz ayrilir */
.dark [class*="border-slate-"], .dark .border, .dark .system-pill { border-color: #262629; }
.dark .border-white { border-color: #1c1c1e; }
.dark .border-t, .dark .border-b, .dark .border-l, .dark .border-r { border-color: #262629; }
.dark .system-pill { background-color: #1c1c1e; color: #98989d; }
.dark #chatMessages .flex.justify-center .rounded-full {
    background-color: #1c1c1e !important;
    border-color: #262629 !important;
    color: #98989d !important;
}

.settings-group-hidden { display: none !important; }
.accordion-item { flex-shrink: 0; }


/* == Yerlesim kipleri =====================================================
   Genis kip  : ekran >= 1024px VE yukseklik > 520px  -> iki yan menu sabit (sol/sag)
   Cekmece kip: aksi halde (telefon dikey/yatay, kucuk tablet) -> menuler ekran disindan kayarak acilir */
#leftSidebar, #rightSidebar { will-change: transform; }
@media (min-width: 1024px) and (min-height: 521px) {
    #leftSidebar, #rightSidebar { position: relative !important; transform: none !important; }
    #openLeftSidebarBtn, #closeLeftSidebarBtn, #openRightSidebarBtn, #closeRightSidebarBtn { display: none !important; }
    #mobileOverlay { display: none !important; }
}
/* Telefon yatay iken dikey alan az: ust cubuk/bosluklar kucultulur */
@media (max-height: 520px) {
    #quickNav { height: 2.5rem; }
    #leftSidebar > div:first-child, #rightSidebar > div:first-child { height: 3rem; }
}

/* == Klavye ile birlikte kucuk gorunum: sayfa yuksekligi gorunur alana (visualViewport) baglanir ============
   Mobil tarayicilarda sanal klavye acilinca 100dvh kuculmeyebilir; yazi alani ile klavye arasinda bosluk kalirdi. */
html, body { overscroll-behavior: none; }
body[class] { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100dvh) !important; }

/* == Yazma araci cubugu (dar ekran) ==================================== */
.chat-toolbar, .tool-toggle { display: none; }
.tool-key { display: none; }
.narrow-input .tool-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 2px; border: 0; border-radius: 12px; background: transparent; color: rgb(var(--p-accent)); cursor: pointer; transition: transform .18s; touch-action: manipulation; }
/* Acikken (kapatmak icin) asagi, kapaliyken (acmak icin) yukari ok */
.narrow-input .tool-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.narrow-input.toolbar-open .chat-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 0 8px; margin: 0; overflow-x: auto; scrollbar-width: none; }
.narrow-input .chat-toolbar::-webkit-scrollbar { display: none; }
.chat-toolbar > * { flex: 0 0 auto; }
.chat-toolbar .tool-key, .chat-toolbar button { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 44px; padding: 0 14px; margin: 0 !important; border-radius: 14px; border: 1px solid rgb(var(--p-accent) / 0.28); background: rgb(var(--p-accent) / 0.1); color: rgb(var(--p-accent)); font-size: 15px; font-weight: 800; letter-spacing: .03em; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.chat-toolbar button:active { background: rgb(var(--p-accent)); color: #fff; }
.chat-toolbar #historyKeys { display: inline-flex; padding: 0; gap: 0; overflow: hidden; border-radius: 14px; border: 1px solid rgb(var(--p-accent) / 0.28); background: transparent; }
.chat-toolbar #historyKeys button { border: 0; border-radius: 0; min-width: 48px; height: 42px; }
.chat-toolbar #historyKeys button + button { border-left: 1px solid rgb(var(--p-accent) / 0.28); }
.chat-toolbar #emojiBtn { font-size: 22px; padding: 0 12px; }
.chat-toolbar #klipyBtn svg { width: 24px; height: 24px; }
.dark .chat-toolbar .tool-key, .dark .chat-toolbar button { color: rgb(var(--p-on-dark)); background: rgb(var(--p-accent) / 0.22); border-color: rgb(var(--p-on-dark) / 0.25); }

/* Kalabalik kanallarda ekran disindaki kullanici satirlari icin yerlesim/boyama atlanir (tarayici sanallastirmasi) */
#userList > div { content-visibility: auto; contain-intrinsic-size: auto 52px; }

/* Bildirim (toast) kutusu arkasindaki dugmelere dokunmayi engellemesin */
#toastContainer, #toastContainer > * { pointer-events: none; }

/* Dil katalogu gelene kadar (Turkce olmayan secimde) sayfa gizli: Turkce metin bir an gorunmesin */
html.i18n-pending body { visibility: hidden; }

/* Yuzen pencereler (gorsel onizleme, YouTube): surukle / boyutlandir / one getir */
.float-win { position: fixed; z-index: 57; display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.28); overflow: hidden; min-width: 240px; }
.float-win.hidden { display: none; }
.fw-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: #f3f4f6; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; font-size: 12px; font-weight: 700; color: #374151; }
.fw-head:active { cursor: grabbing; }
.fw-body { flex: 1; min-height: 0; background: #000; position: relative; display: flex; align-items: center; justify-content: center; }
.fw-resize { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.7) 50%); border-bottom-right-radius: 14px; }
.dark .float-win { background: #1c1c1e; border-color: #262629; }
.dark .fw-head { background: #111113; color: #e5e7eb; }
.yt-card { position: relative; display: block; width: 240px; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid #e5e7eb; background: #000; padding: 0; cursor: pointer; }
.yt-card img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.yt-card .yt-play { position: absolute; inset: 0; margin: auto; width: 48px; height: 34px; border-radius: 10px; background: #e11d48; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.yt-card .yt-label { position: absolute; left: 8px; bottom: 6px; font-size: 10px; font-weight: 800; letter-spacing: .05em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }

/* Gecici fotograf: silme dugmesi ve "silindi" yer tutucusu */
.photo-msg { position: relative; display: inline-block; vertical-align: top; }
.photo-del { position: absolute; top: 14px; right: 6px; width: 26px; height: 26px; border-radius: 9999px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.photo-msg:hover .photo-del, .photo-del:focus { opacity: 1; }
@media (hover: none) { .photo-del { opacity: .85; } }
.photo-gone { margin-top: 8px; padding: 18px 14px; width: 250px; max-width: 100%; border: 1px dashed #d1d5db; border-radius: 10px; background: #f9fafb; color: #6b7280; font-size: 12px; font-weight: 600; text-align: center; }
.dark .photo-gone { background: #111113; border-color: #3a3a3c; color: #9ca3af; }

/* Gorsel icerik standardi (yonetici ayarindan CSS degiskenleri: --m-img-w/h, --m-yt-w, --m-photo-w/h) */
.chat-img { max-width: var(--m-img-w, 250px); max-height: var(--m-img-h, 250px); margin-top: 8px; border-radius: 8px; cursor: pointer; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.chat-photo { max-width: var(--m-photo-w, 250px); max-height: var(--m-photo-h, 250px); margin-top: 8px; border-radius: 8px; cursor: pointer; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.yt-card { width: var(--m-yt-w, 240px); }
.photo-gone, .media-ph { width: var(--m-img-w, 250px); }
/* Siteler: tek satirda web ikonu + bosluk + baglanti, dugme gibi */
.site-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle; padding: 2px 10px; border-radius: 9999px; border: 1px solid rgba(var(--p-accent, 126 34 206) / .35); background: rgba(var(--p-accent, 126 34 206) / .08); color: rgb(var(--p-accent, 126 34 206)); font-size: .85em; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; }
.site-btn:hover { background: rgba(var(--p-accent, 126 34 206) / .16); }
.site-btn .site-ico { flex: none; }
.site-btn .site-txt { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Kayitsiz gonderen: yer tutucu, maskeli baglanti, silinmis baglanti, editor araclari */
.media-ph { display: inline-block; margin-top: 8px; padding: 14px 12px; max-width: 100%; border: 1px dashed #d1d5db; border-radius: 10px; background: #f9fafb; color: #6b7280; font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; }
.media-ph:hover { background: #f3f4f6; color: #374151; }
.link-masked { display: inline-block; padding: 1px 8px; border-radius: 6px; background: #f3f4f6; color: #6b7280; font-family: ui-monospace, monospace; font-size: .85em; cursor: not-allowed; user-select: none; }
.link-gone { display: inline-block; margin-top: 4px; padding: 8px 12px; border: 1px dashed #d1d5db; border-radius: 10px; background: #f9fafb; color: #6b7280; font-size: 12px; font-weight: 600; }
.lm-tools { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.lm-btn { width: 22px; height: 22px; border-radius: 9999px; border: 1px solid #d1d5db; background: #fff; font-size: 11px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lm-btn:hover { background: #f3f4f6; }
.dark .media-ph, .dark .link-gone { background: #111113; border-color: #3a3a3c; color: #9ca3af; }
.dark .media-ph:hover { background: #1c1c1e; color: #e5e7eb; }
.dark .link-masked { background: #1c1c1e; color: #9ca3af; }
.dark .lm-btn { background: #1c1c1e; border-color: #3a3a3c; color: #e5e7eb; }

/* Editor gorunumu: kayitsiz icerigin gercek adresi (tiklanamaz metin) ve guvenli yeni sekme baglantisi */
.lm-real { display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%; margin-left: 4px; font-size: 11px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 0 6px; }
.lm-real-txt { overflow-wrap: anywhere; user-select: text; }
.lm-open { font-weight: 800; color: #92400e; text-decoration: none; }
.dark .lm-real { background: #2a2108; border-color: #5b4a12; color: #fcd34d; }
.dark .lm-open { color: #fcd34d; }

.link-masked.lm-unmasked { cursor: default; user-select: text; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-family: inherit; }
.dark .link-masked.lm-unmasked { background: #2a2108; border-color: #5b4a12; color: #fcd34d; }

/* ── Profil formu: gruplar, satir basina alan + sagda "herkese goster" tiki ── */
.pf-group { border: 1px solid #e5e7eb; border-radius: 14px; padding: 10px 12px 12px; background: #fff; }
.dark .pf-group { border-color: #262629; background: #0b0b0c; }
.pf-group + .pf-group { margin-top: 12px; }
.pf-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pf-group-head h3 { font-size: 13px; font-weight: 800; color: #111827; }
.dark .pf-group-head h3 { color: #f5f5f7; }
.pf-all { font-size: 11px; font-weight: 700; color: rgb(var(--p-accent)); background: none; border: 0; cursor: pointer; padding: 2px 4px; }
.pf-all:hover { text-decoration: underline; }
.profile-field { margin-top: 8px; }
.profile-field label.pf-label { margin-bottom: 3px; }
.pf-line { display: flex; align-items: center; gap: 8px; }
.pf-line .pf-input { flex: 1 1 auto; min-width: 0; width: auto; }
.pf-line textarea.pf-input { resize: vertical; }
.pf-show { flex: 0 0 auto; display: flex; margin: 0; cursor: pointer; }
.pf-show-top { align-self: flex-start; margin-top: 2px; }
.pf-show input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 34px; height: 34px; margin: 0; border-radius: 9999px; border: 1.5px solid #d1d5db; background: #f9fafb; display: grid; place-content: center; cursor: pointer; transition: background .15s, border-color .15s; }
.pf-show input[type=checkbox]::before { content: '✓'; font-size: 17px; font-weight: 900; line-height: 1; color: #d1d5db; transition: color .15s; }
.pf-show input[type=checkbox]:hover { border-color: rgb(var(--p-accent)); }
.pf-show input[type=checkbox]:checked { background: rgb(var(--p-accent)); border-color: rgb(var(--p-accent)); }
.pf-show input[type=checkbox]:checked::before { color: #fff; }
.pf-show input[type=checkbox]:focus-visible { outline: 2px solid rgb(var(--p-accent) / .5); outline-offset: 2px; }
.dark .pf-show input[type=checkbox] { background: #000; border-color: #3a3a3c; }
.dark .pf-show input[type=checkbox]::before { color: #3a3a3c; }
.dark .pf-show input[type=checkbox]:checked { background: rgb(var(--p-accent)); border-color: rgb(var(--p-accent)); }
.dark .pf-show input[type=checkbox]:checked::before { color: #fff; }
.pf-hint-tick { display: inline-grid; place-content: center; width: 18px; height: 18px; border-radius: 9999px; background: rgb(var(--p-accent)); color: #fff; font-size: 11px; }
/* Profili Kaydet altta kalmasin: form uzasa da kaydetme cubugu gorunur (yapiskan) */
.pf-actions { position: sticky; bottom: -1px; z-index: 5; margin: 0 -16px -1px; padding: 8px 16px 10px; background: linear-gradient(to top, #fff 75%, rgba(255,255,255,0)); }
.dark .pf-actions { background: linear-gradient(to top, #1c1c1e 75%, rgba(28,28,30,0)); }
/* ── Profil goruntusu: ust kart, rozetler, bolumler, baglanti dugmeleri ── */
.pv-hero { display: flex; align-items: center; gap: 14px; margin: -20px -20px 12px; padding: 20px; background: linear-gradient(135deg, rgb(var(--p-accent) / .20), rgb(var(--p-accent) / .04)); }
.pv-nick { font-size: 22px; font-weight: 800; color: #111827; line-height: 1.2; }
.dark .pv-nick { color: #f5f5f7; }
.pv-name { font-size: 14px; font-weight: 600; color: #4b5563; }
.dark .pv-name { color: #c7c7cc; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pv-chips:empty { display: none; }
.pv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 9999px; background: rgb(var(--p-accent) / .10); color: rgb(var(--p-accent)); font-size: 12px; font-weight: 700; }
.dark .pv-chip { background: rgb(var(--p-accent) / .22); color: rgb(var(--p-on-dark)); }
.pv-sec { border: 1px solid #e5e7eb; border-radius: 14px; padding: 10px 12px; }
.dark .pv-sec { border-color: #262629; }
.pv-sec-title { font-size: 12px; font-weight: 800; letter-spacing: .03em; color: #6b7280; margin-bottom: 6px; }
.pv-row { display: flex; gap: 10px; padding: 5px 0; }
.pv-row + .pv-row { border-top: 1px dashed #e5e7eb; }
.dark .pv-row + .pv-row { border-color: #262629; }
.pv-row-label { width: 8.5rem; flex-shrink: 0; font-size: 12px; font-weight: 700; color: #6b7280; }
.pv-row-value { min-width: 0; flex: 1; font-size: 14px; color: #1f2937; word-break: break-word; white-space: pre-wrap; }
.dark .pv-row-value { color: #e5e5ea; }
.pv-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 12px; border-radius: 9999px; border: 1px solid rgb(var(--p-accent) / .35); background: rgb(var(--p-accent) / .07); color: rgb(var(--p-accent)); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.pv-link:hover { background: rgb(var(--p-accent) / .16); }
.dark .pv-link { color: rgb(var(--p-on-dark)); }
.pv-link-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 420px) { .pv-row { flex-direction: column; gap: 2px; } .pv-row-label { width: auto; } }

.pf-ic { display: inline-block; margin-right: 6px; }

/* ── Arama ekranlari: gelen / giden / gorusme penceresi ─────────────────────────────── */
.call-backdrop { background: radial-gradient(1200px 600px at 50% 30%, rgb(var(--p-accent) / .35), rgba(15,15,25,.82)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.call-card { width: 100%; max-width: 22rem; padding: 2rem 1.5rem 1.6rem; border-radius: 28px; background: rgba(255,255,255,.92); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.dark .call-card { background: rgba(28,28,30,.92); }
.call-avatar-wrap { position: relative; width: 104px; height: 104px; margin: 0 auto 1.1rem; display: grid; place-items: center; }
.call-avatar { position: relative; z-index: 1; width: 88px; height: 88px; border-radius: 9999px; display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, rgb(var(--p-accent)), rgb(var(--p-accent) / .7)); overflow: hidden; box-shadow: 0 10px 30px rgb(var(--p-accent) / .5); }
.call-avatar-green { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 10px 30px rgba(34,197,94,.5); }
.call-avatar-sm { width: 64px; height: 64px; font-size: 1.6rem; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.call-ring { position: absolute; inset: 6px; border-radius: 9999px; border: 2px solid rgb(var(--p-accent) / .55); animation: callRing 2s ease-out infinite; }
.call-ring-green { border-color: rgba(34,197,94,.6); }
.call-ring-2 { animation-delay: 1s; }
@keyframes callRing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
.call-name { font-size: 1.5rem; font-weight: 800; color: #111827; line-height: 1.2; word-break: break-word; }
.dark .call-name { color: #f5f5f7; }
.call-sub { margin: .25rem 0 1.5rem; font-weight: 600; color: rgb(var(--p-accent)); display: flex; justify-content: center; align-items: baseline; gap: 2px; }
.call-dots i { display: inline-block; width: 4px; height: 4px; margin-left: 3px; border-radius: 9999px; background: currentColor; animation: callDot 1.2s infinite ease-in-out; }
.call-dots i:nth-child(2) { animation-delay: .2s; } .call-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes callDot { 0%, 80%, 100% { opacity: .2; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.call-actions { display: flex; justify-content: center; gap: 2.5rem; }
.call-action { display: flex; flex-direction: column; align-items: center; gap: .4rem; font-size: 12px; font-weight: 700; color: #6b7280; }
.dark .call-action { color: #9ca3af; }
.call-btn { width: 64px; height: 64px; border-radius: 9999px; display: grid; place-items: center; color: #fff; transition: transform .15s, filter .15s; box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.call-btn:hover { transform: scale(1.08); filter: brightness(1.08); } .call-btn:active { transform: scale(.96); }
.call-btn:focus-visible, .call-ctl:focus-visible, .call-mini-btn:focus-visible, .call-link:focus-visible { outline: 3px solid rgb(var(--p-accent) / .6); outline-offset: 2px; }
.call-btn-red { background: #ef4444; } .call-btn-green { background: #22c55e; animation: callPulse 1.6s ease-in-out infinite; }
@keyframes callPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.55), 0 10px 24px rgba(0,0,0,.3); } 50% { box-shadow: 0 0 0 14px rgba(34,197,94,0), 0 10px 24px rgba(0,0,0,.3); } }
.call-link { margin-top: 1.1rem; font-size: 13px; font-weight: 700; color: rgb(var(--p-accent)); background: none; border: 0; cursor: pointer; text-decoration: underline; }
/* gorusme penceresi */
.call-win { display: none; width: 20rem; max-width: 92vw; border-radius: 22px; overflow: hidden; background: #0b0b0f; color: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.08); }
.call-win.flex { display: flex; }
.call-win.call-large { width: 30rem; }
.call-win-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); cursor: move; user-select: none; -webkit-user-select: none; touch-action: none; font-size: 12px; }
.call-win-name { font-weight: 800; font-size: 13px; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-win-status { font-size: 11px; color: #a1a1aa; white-space: nowrap; }
.call-win-timer { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; }
.call-status-dot { width: 8px; height: 8px; border-radius: 9999px; background: #f59e0b; flex: none; }
.call-status-dot.is-up { background: #22c55e; animation: callDotLive 2s ease-in-out infinite; } .call-status-dot.is-weak { background: #f59e0b; } .call-status-dot.is-down { background: #ef4444; }
@keyframes callDotLive { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.call-mini-btn { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #d4d4d8; background: rgba(255,255,255,.08); cursor: pointer; }
.call-mini-btn:hover { background: rgba(255,255,255,.18); }
.call-stage { position: relative; height: min(11.5rem, 32vh); background: radial-gradient(circle at 50% 40%, #1f1f2a, #0b0b0f); }
.call-win.call-large .call-stage { height: min(17rem, 42vh); }
.call-audio-only { position: absolute; inset: 0; display: grid; place-items: center; }
.call-pip { position: absolute; right: 10px; bottom: 10px; width: 5.2rem; height: 7rem; object-fit: cover; border-radius: 14px; border: 2px solid rgba(255,255,255,.85); background: #111; box-shadow: 0 8px 20px rgba(0,0,0,.5); transform: scaleX(-1); }
.call-win.call-large .call-pip { width: 7rem; height: 9.5rem; }
.call-remote-off { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11,11,15,.8); font-size: 12px; font-weight: 700; color: #d4d4d8; text-align: center; padding: 1rem; }
.call-remote-mic { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 9999px; background: rgba(239,68,68,.9); font-size: 11px; font-weight: 700; }
.call-controls { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 12px; background: #131318; }
.call-ctl { width: 46px; height: 46px; border-radius: 9999px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); cursor: pointer; transition: background .15s, transform .15s; }
.call-ctl:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.call-ctl[aria-pressed="true"] { background: #fff; color: #dc2626; }
.call-ctl-end { background: #ef4444; width: 58px; border-radius: 9999px; } .call-ctl-end:hover { background: #dc2626; }
.call-ctl.hidden { display: none; }
@media (max-width: 480px) { .call-win { width: 17.5rem; } .call-win.call-large { width: 92vw; } }
@media (prefers-reduced-motion: reduce) { .call-ring, .call-dots i, .call-btn-green, .call-status-dot.is-up { animation: none !important; } }

.call-win.hidden { display: none !important; }
.drawer-action-row { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 9px 10px; text-align: left; }
/* S.S.S. (yardim) penceresi: kimin kullanabilecegi rozeti */
.faq-badge { flex-shrink: 0; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.faq-badge-all { background: #dcfce7; color: #166534; }
.faq-badge-reg { background: #ede9fe; color: #5b21b6; }
.faq-badge-ops { background: #dbeafe; color: #1e40af; }
.faq-badge-admin { background: #fef3c7; color: #92400e; }
.faq-badge-off { background: #f3f4f6; color: #6b7280; }
.dark .faq-badge-all { background: #14532d; color: #bbf7d0; }
.dark .faq-badge-reg { background: #3b2a6b; color: #ddd6fe; }
.dark .faq-badge-ops { background: #1e3a8a; color: #bfdbfe; }
.dark .faq-badge-admin { background: #78350f; color: #fde68a; }
.dark .faq-badge-off { background: #27272a; color: #a1a1aa; }
@media (max-width: 480px) { .faq-head { flex-wrap: wrap; } .faq-badge { order: 3; } }
/* Yonetici ayariyla gizlenen nick menusu ogeleri (yalniz gizler; erisimi olmayana asla gostermez) */
.nm-admin-hidden { display: none !important; }
/* Nick listesindeki IRCop simgeleri (KILL / GLINE) */
.nick-oper-btn { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; border: 1px solid transparent; background: transparent; font-size: 14px; line-height: 1; cursor: pointer; opacity: .75; transition: background .15s, opacity .15s; }
.nick-oper-btn:hover { opacity: 1; background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); }
/* Nick menusu: katlanabilir bolum basliklari (Kanal araclari / IRCop / Ozel); durum tarayicida hatirlanir */
.ctx-sec-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 2px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; cursor: pointer; background: transparent; border: 0; text-align: left; }
.ctx-sec-head:hover { color: rgb(var(--p-accent)); }
.ctx-chev { display: inline-block; transition: transform .15s; font-size: 11px; }
.ctx-sec-head[aria-expanded="false"] .ctx-chev { transform: rotate(-90deg); }
.ctx-sec-body.ctx-collapsed { display: none; }
.dark .ctx-sec-head { color: #8e8e93; }
/* IRCop simgeleri: kompakt */
.nick-oper-btn { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }
.nick-oper-tools { display: inline-flex; align-items: center; gap: 0; flex-shrink: 0; margin-left: 2px; }