/* ════════════════════════════════════════════════════════════════
   FRONT v2 — "Gece Komuta Odası"
   Varsayılan tema. 10-basic.css'teki düz katmanın üstüne yüklenir.
   Kimlik: derin mürekkep-lacivert palet (nötr gri değil), Chakra
   Petch başlıklar + Inter gövde + JetBrains Mono sayılar, yarı
   saydam buzlu HUD panelleri, tek imza öğe: piksel-blok vurgu
   şeridi (giriş kutusunun üst kenarı). Düzen/spacing/JS'e dokunulmaz.
   Fontlar index.html'de Google Fonts'tan yüklenir (latin-ext = Türkçe).
   Diğer seçenekler: 11-liquid-glass.css, 11-pixel-glass.css.
════════════════════════════════════════════════════════════════ */

/* ── 0 · TİPOGRAFİ ──
   01-base.css tüm başlık/gövde/sayı atamalarını --font-display /
   --font-ui / --font-mono üzerinden yapıyor; burada sadece
   değişkenleri değiştirmek bütün arayüzü yeniden giydirir. */
:root{
  --font-display: 'Chakra Petch', 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
}

/* ── 1 · PALET — gece harita odası ──
   10-basic'in nötr grisini eziyor. Accent'e DOKUNMA: kullanıcının
   Ayarlar'dan seçtiği rengi theme.js yönetiyor; tüm vurgu kullanımı
   var(--accent*) üzerinden kalır. */
:root{
  --bg:#0b0e17;      --bg-rgb:11,14,23;
  --surf:#121726;    --surf-rgb:18,23,38;
  --surf2:#181e31;   --surf2-rgb:24,30,49;
  --surf3:#212a45;   --surf3-rgb:33,42,69;
  --bdr:#26304c;     --bdr2:#364266;
  --txt:#e9edf8;     --muted:#8b95b5;
  --red:#f0435c;     --green:#1fc898;     --gold:#f5ac2e;
}
:root[data-theme="light"]{
  --bg:#e8ebf3;      --bg-rgb:232,235,243;
  --surf:#ffffff;    --surf-rgb:255,255,255;
  --surf2:#f2f4fa;   --surf2-rgb:242,244,250;
  --surf3:#e5e9f4;   --surf3-rgb:229,233,244;
  --bdr:#d6dbea;     --bdr2:#b9c1d8;
  --txt:#151a27;     --muted:#5f6884;
  --red:#d92b45;     --green:#0d9e77;     --gold:#c07f14;
}

/* ── 2 · GİRİŞ EKRANI — imza an ──
   Haritanın üstüne hafif blur + piksel ızgara dokusu; kutunun üst
   kenarında piksel-blok vurgu şeridi. */
#login{
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(var(--accent-rgb),.14) 0%, transparent 55%),
    repeating-linear-gradient(0deg,  rgba(var(--shine-rgb),.028) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(var(--shine-rgb),.028) 0 1px, transparent 1px 26px),
    linear-gradient(rgba(var(--bg-rgb),.82) 0%, rgba(var(--bg-rgb),.92) 100%) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}
.lbox{
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(var(--surf2-rgb),.98) 0%, var(--surf) 26%) !important;
  border: 1px solid var(--bdr2) !important;
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    0 0 60px rgba(var(--accent-rgb),.10) !important;
}
/* İmza: piksel-blok şerit — vurgu gradyanı 8px bloklara bölünür */
.lbox::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 70%, transparent 100%);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 12px);
  mask-image: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 12px);
  pointer-events:none;
}
.lbox h1{
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}
:root[data-theme="light"] .lbox{
  box-shadow: 0 24px 60px rgba(35,45,80,.22), 0 0 50px rgba(var(--accent-rgb),.08) !important;
}

/* ── 3 · YÜZEYLER — kartlar, modallar, paneller ── */
#quest-card, #skill-card, .tut-card {
  background: var(--surf) !important;
  border: 1px solid var(--bdr) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.45) !important;
}
#quest-card::before, #skill-card::before { background: var(--bdr2) !important; }

#sidebar {
  background: var(--surf) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Modal karartmaları: düz yarı saydam, hafif vinyet */
#profile-modal, #faction-modal, #quest-panel, #skill-panel,
#tb-menu-sheet, #tutorial-overlay {
  background: rgba(5,7,14,.62) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
:root[data-theme="light"] #profile-modal,
:root[data-theme="light"] #faction-modal,
:root[data-theme="light"] #quest-panel,
:root[data-theme="light"] #skill-panel,
:root[data-theme="light"] #tb-menu-sheet,
:root[data-theme="light"] #tutorial-overlay {
  background: rgba(25,32,55,.45) !important;
}

.sk-sp-bar {
  background: var(--surf2) !important;
  border: 1px solid var(--bdr) !important;
}

/* Büyük kartlar: katmanlı tek gölge + üstten ince ışık çizgisi */
#faction-card, #profile-card, .mailbox-box, #chat-panel {
  border: 1px solid var(--bdr) !important;
  border-top-color: var(--bdr2) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3) !important;
}
:root[data-theme="light"] #faction-card,
:root[data-theme="light"] #profile-card,
:root[data-theme="light"] .mailbox-box,
:root[data-theme="light"] .lbox,
:root[data-theme="light"] #chat-panel,
:root[data-theme="light"] #quest-card,
:root[data-theme="light"] #skill-card,
:root[data-theme="light"] .tut-card {
  box-shadow: 0 18px 44px rgba(35,45,80,.20) !important;
}

/* Satır kartları: hover'da vurgu kenarlığı */
.fc-diplo-item:hover, .fc-browse-row:hover, .mail-item:hover,
.pcs-card:hover, .pca-row:hover {
  border-color: rgba(var(--accent-rgb),.45) !important;
  background: var(--surf3) !important;
}

/* ── 4 · HUD — harita üstünde yüzen paneller: buzlu cam ── */
#pixel-widget, #ptoolbar, .zb,
#prov-find, #profile-btn, #pb-menu-btn, #tb-desktop-dropdown,
#faction-sub-btn, #tb-hamburger {
  background: rgba(var(--surf-rgb),.86) !important;
  border: 1px solid rgba(var(--shine-rgb),.10) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.30) !important;
}
:root[data-theme="light"] #pixel-widget,
:root[data-theme="light"] #ptoolbar,
:root[data-theme="light"] .zb,
:root[data-theme="light"] #prov-find,
:root[data-theme="light"] #profile-btn,
:root[data-theme="light"] #pb-menu-btn,
:root[data-theme="light"] #tb-desktop-dropdown,
:root[data-theme="light"] #faction-sub-btn,
:root[data-theme="light"] #tb-hamburger {
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 6px 22px rgba(35,45,80,.16) !important;
}
#profile-btn:hover, #pb-menu-btn:hover, .zb:hover,
#faction-sub-btn:hover, #tb-hamburger:hover {
  background: rgba(var(--surf3-rgb),.92) !important;
  border-color: rgba(var(--accent-rgb),.50) !important;
}

/* ── 5 · BUTONLAR ── */
/* Birincil: dikey vurgu gradyanı + hover'da 1px kalkış */
.btn,
.fc-btn:not(.danger):not(.secondary),
.fc-copy-btn, .pc-save-name, #chat-send, .fc-chat-send,
.fc-tab.active, .pc-tab.active, .ch-tab.active,
.pca-lang-btn.active, #tpl-done-btn {
  background: linear-gradient(180deg, var(--accent-mid) 0%, var(--accent) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 10px rgba(var(--accent-rgb),.30) !important;
}
.btn:hover,
.fc-btn:hover:not(.danger):not(.secondary),
.fc-copy-btn:hover, .pc-save-name:hover,
#chat-send:hover:not(:disabled), .fc-chat-send:hover {
  opacity: 1 !important;
  filter: brightness(1.1);
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 5px 16px rgba(var(--accent-rgb),.40) !important;
}
.btn:active, .fc-btn:active, .fc-copy-btn:active, .pc-save-name:active {
  transform: translateY(0) !important;
  filter: brightness(.95);
}
/* Ana eylem butonu (giriş): komuta hissi — büyük harf + aralık */
.btn, .tut-next, .qcard-claim.ready {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

/* İkincil / nötr butonlar */
.tb-btn, .fc-small-btn, .fc-diplo-btn, .ptbtn,
.fc-btn.secondary, #mailbox-btn {
  background: var(--surf2) !important;
  border: 1px solid var(--bdr) !important;
}
.tb-btn:hover, .fc-small-btn:hover, .fc-diplo-btn:hover, .ptbtn:hover,
.fc-btn.secondary:hover, #mailbox-btn:hover {
  background: var(--surf3) !important;
  border-color: rgba(var(--accent-rgb),.50) !important;
  box-shadow: none !important;
  transform: none !important;
}
.ptbtn.active {
  background: rgba(var(--accent-rgb),.16) !important;
  border-color: var(--accent) !important;
  color: var(--accent-text) !important;
}

/* Tehlike butonları */
.fc-btn.danger, .pca-danger-btn, .war-decl-close {
  background: linear-gradient(180deg, #e8435c 0%, #c72842 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.fc-btn.danger:hover, .pca-danger-btn:hover, .war-decl-close:hover {
  opacity: 1 !important;
  filter: brightness(1.1);
}

/* ── 6 · GİRDİLER — net odak halkası ── */
#chat-input, .fc-chat-input, .pc-input, .lbox input,
.pca-select, .rp-input, #prov-find-input {
  background: rgba(var(--bg-rgb),.55) !important;
  border: 1px solid var(--bdr) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
:root[data-theme="light"] #chat-input,
:root[data-theme="light"] .fc-chat-input,
:root[data-theme="light"] .pc-input,
:root[data-theme="light"] .lbox input,
:root[data-theme="light"] .pca-select,
:root[data-theme="light"] .rp-input,
:root[data-theme="light"] #prov-find-input {
  background: rgba(255,255,255,.75) !important;
}
#chat-input:focus, .fc-chat-input:focus, .pc-input:focus,
.lbox input:focus, .pca-select:focus, .rp-input:focus,
#prov-find-input:focus {
  border-color: rgba(var(--accent-rgb),.70) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18) !important;
}

/* Klavye odağı her etkileşimli öğede görünür olsun */
button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, a:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb),.85) !important;
  outline-offset: 2px !important;
}

/* ── 7 · İLERLEME & ROZET ── */
.pb-xp-bar, .pc-lv-bar, .qcard-bar, .qcard.done .qcard-bar {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%) !important;
}
.qcard-claim.ready { background: var(--green) !important; }
.quest-header-icon, .quest-tab.active { background: var(--green) !important; }
.qcard-icon, .qcard.done .qcard-icon { background: rgba(31,200,152,.14) !important; }

/* ── 8 · KÖŞELER ── */
/* Kartlar / modallar: 14px */
#faction-card, #profile-card, .mailbox-box, .lbox,
#levelup-inner, #streak-inner, #quest-card, #skill-card,
.tut-card, #chat-panel, #am-card, #tpl-saved-box, #gs-panel,
#news-card, #pp-card { border-radius: 14px !important; }

/* Butonlar, satırlar, girişler, küçük yüzeyler: 8px */
.scard, #ptoolbar, #pixel-widget, #profile-btn, .fc-banner,
.pcs-card, .pca-row, .fc-browse-row, .fc-invite-box,
.btn, .fc-btn, .ptbtn, .pca-danger-btn, .tb-btn, .zb,
.fc-small-btn, .fc-copy-btn, .pc-save-name, #chat-send,
.fc-chat-send, .fc-tab, .pc-tab, .ch-tab, .mail-accept-btn,
.mail-reject-btn, #ubadge, #tb-hamburger, #faction-sub-btn,
.fc-diplo-btn, .pca-select, .pca-lang-switch, .pca-lang-btn,
.auth-tab, .qcard, .quest-tab, .qcard-claim, .mail-item,
.fc-diplo-item, .pc-input, #chat-input, .fc-chat-input,
#tip, #prov-find, #mailbox-btn, .tb-sheet-item, .sk-node,
.sk-buy, .tut-next, .tut-skip, .pe-dur-btn,
.pc-streak-card, .pc-level-card,
.am-card-item, .am-tab, .am-btn, .am-comment, .ts-row,
#ao-widget, #ao-place-bar,
.gs-tab, .gs-action, .gs-detail-row, .gs-info-rows,
.gs-leader-plate, .news-entry, .rp-input { border-radius: 8px !important; }

/* Bildirim şeritleri */
#pixel-event-banner, #announce-banner, #quest-complete-notif,
#levelup-notif, #streak-notif, #war-banner-card, #ally-banner-card,
#war-decl-inner { border-radius: 10px !important; }

/* Alt sayfa (bottom sheet) üst köşeleri */
#tb-menu-card { border-radius: 16px 16px 0 0 !important; }
@media (max-width: 768px) {
  #profile-card, #quest-card, #skill-card,
  #war-banner-card, #ally-banner-card { border-radius: 16px 16px 0 0 !important; }
}

/* ── 9 · YUVARLAK ÖĞELER ── */
.pc-avatar-ring, .pb-avatar, .fc-member-av, .fc-cav, .cm-av,
.lvl-rank-av, .pc-frame { border-radius: 50% !important; }
.pca-theme-swatch, .pca-theme-custom-wrap { border-radius: 50% !important; }
#quest-badge, #skill-badge, #mailbox-badge, #ts-quest-badge,
.pb-lv-badge, .pb-streak-badge, .ch-badge { border-radius: 999px !important; }
#chat-btn { border-radius: 50% !important; }
.psw, #palette-toggle, #pen-toggle { border-radius: 5px !important; }
.pca-toggle-slider { border-radius: 999px !important; }
.pca-toggle-slider::before { border-radius: 50% !important; }
.pb-xp-bar-wrap, .qcard-bar-wrap, #cd-bar-wrap, .pcs-bar-wrap,
.pb-xp-bar, .qcard-bar, #cd-bar, .pcs-bar,
.pcs-bar-track, .pcs-bar-fill, .pc-lv-bar-wrap, .pc-lv-bar { border-radius: 999px !important; }

/* ── 10 · SOHBET BUTONU (FAB) ── */
#chat-btn {
  background: linear-gradient(180deg, var(--accent-mid) 0%, var(--accent) 100%) !important;
  box-shadow: 0 6px 20px rgba(var(--accent-rgb),.40) !important;
}

/* ── 11 · KAYDIRMA ÇUBUKLARI ── */
#fc-body::-webkit-scrollbar, .pc-body::-webkit-scrollbar,
#am-body::-webkit-scrollbar, #chat-messages::-webkit-scrollbar,
#news-list::-webkit-scrollbar {
  width: 8px;
}
#fc-body::-webkit-scrollbar-thumb, .pc-body::-webkit-scrollbar-thumb,
#am-body::-webkit-scrollbar-thumb, #chat-messages::-webkit-scrollbar-thumb,
#news-list::-webkit-scrollbar-thumb {
  background: var(--bdr2);
  border-radius: 999px;
}

/* ── 12 · HAREKET ── */
/* Modal girişi: hafif yükselme + belirme (10-basic sade belirmeye
   indirmişti; Front'ta yumuşak yükselme geri geliyor) */
@keyframes pcard-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.btn, .fc-btn, .tb-btn, .ptbtn, .zb, .fc-small-btn,
.pc-save-name, .qcard-claim, .quest-tab, .fc-tab, .pc-tab, .ch-tab {
  transition: background .15s ease, border-color .15s ease,
              opacity .15s ease, transform .15s ease,
              box-shadow .15s ease, filter .15s ease !important;
}
/* Hareket azaltma tercihine saygı */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   FRONT v3 — "Komuta Konsolu" cilası
   Cesaret tek yerde: GİRİŞ ekranı yaşayan bir komuta paneli gibi.
   İmza — üst kenardaki piksel-blok şeridinde soldan sağa tarayan bir
   "sinyal" darbesi; kutuda ince konsol çerçevesi + hafif tarama dokusu;
   kahraman başlık piksel-gölgeli. Oyun içi her şey sessiz/disiplinli
   kalır (yalnızca seçim rengi + kaydırma çubuğu accent'i). Sadece
   renk/gölge/dekor/animasyon — düzen/spacing/JS'e dokunulmaz.
════════════════════════════════════════════════════════════════ */

/* İmza: piksel-blok şeritte tarayan sinyal darbesi.
   Taban accent gradyanının üstüne, maskeyle piksel bloklara bölünen
   parlak bir bant soldan sağa süzülür — konsolda akan veri hissi. */
@keyframes front-signal {
  0%       { background-position: -150% 0, 0 0; }
  58%,100% { background-position:  250% 0, 0 0; }
}
.lbox::before {
  background:
    linear-gradient(90deg, transparent 0%, rgba(var(--shine-rgb),.85) 12%, transparent 26%) 0 0 / 250% 100% no-repeat,
    linear-gradient(90deg, var(--accent) 0%, var(--accent2) 70%, transparent 100%) 0 0 / 100% 100% no-repeat !important;
  animation: front-signal 5s cubic-bezier(.4,0,.2,1) infinite !important;
}
/* Konsol çerçevesi + çok hafif tarama (CRT) dokusu — kutuya derinlik */
.lbox::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; z-index: 0;
  box-shadow:
    inset 0 1px 0 rgba(var(--shine-rgb),.10),
    inset 0 0 0 1px rgba(var(--accent-rgb),.08),
    inset 0 -40px 60px -50px rgba(var(--accent-rgb),.30);
  background: repeating-linear-gradient(0deg, rgba(var(--shine-rgb),.018) 0 2px, transparent 2px 4px);
}
/* Giriş içeriği çerçevenin üstünde kalsın */
.lbox > * { position: relative; z-index: 1; }
/* Kahraman başlık: piksel-ofset gölge + yumuşak accent parıltısı */
.lbox h1 {
  font-size: 2.05rem !important;
  letter-spacing: -.005em !important;
  text-shadow:
    2px 2px 0 rgba(var(--accent-rgb),.18),
    0 0 24px rgba(var(--accent-rgb),.26) !important;
}

/* Sessiz oyun-içi cila: seçim rengi accent'e uyar */
::selection { background: rgba(var(--accent-rgb),.30); }

/* Kaydırma çubuğu: hover'da accent tonu */
#fc-body::-webkit-scrollbar-thumb:hover, .pc-body::-webkit-scrollbar-thumb:hover,
#am-body::-webkit-scrollbar-thumb:hover, #chat-messages::-webkit-scrollbar-thumb:hover,
#news-list::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb),.55);
}

/* Hareket azaltma: sinyal darbesini durdur (yüksek özgüllük geçersiz kılar) */
@media (prefers-reduced-motion: reduce) {
  .lbox::before { animation: none !important; background-position: 0 0, 0 0 !important; }
}

/* ── Yetenek ağacı: takımyıldız kartı + accent kaynak çubuğu ── */
#skill-card {
  background:
    radial-gradient(130% 55% at 50% 0%, rgba(var(--accent-rgb),.12) 0%, transparent 58%),
    linear-gradient(165deg, var(--surf2) 0%, var(--surf) 46%) !important;
  border: 1px solid var(--bdr2) !important;
  box-shadow: 0 -10px 50px rgba(0,0,0,.6), 0 0 60px rgba(var(--accent-rgb),.12) !important;
}
.sk-sp-bar {
  background: linear-gradient(160deg, rgba(var(--accent-rgb),.16) 0%, rgba(var(--accent-rgb),.05) 100%) !important;
  border: 1px solid rgba(var(--accent-rgb),.38) !important;
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb),.10), 0 0 22px rgba(var(--accent-rgb),.12) !important;
}

/* ════════════════════════════════════════════════════════════════
   SOHBET — "Komuta Kanalı" premium panel
   Buzlu cam gövde, gradyan başlık + canlı nokta, accent-gradyanlı
   kuyruklu balonlar, pill sekme/girdi, ışıyan rozetler, açılış
   animasyonu. Sadece görünüm — boyut/düzen/JS'e dokunulmaz.
════════════════════════════════════════════════════════════════ */
#chat-btn {
  background: linear-gradient(180deg, var(--accent-mid) 0%, var(--accent) 100%) !important;
  box-shadow: 0 6px 20px rgba(var(--accent-rgb),.45), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
#chat-btn:hover { transform: scale(1.08) translateY(-1px) !important; }

#chat-panel {
  background: linear-gradient(180deg, rgba(var(--surf2-rgb),.92) 0%, rgba(var(--surf-rgb),.95) 32%) !important;
  border: 1px solid var(--bdr2) !important;
  border-top-color: rgba(var(--shine-rgb),.14) !important;
  border-radius: 16px !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    0 0 40px rgba(var(--accent-rgb),.10),
    inset 0 1px 0 rgba(var(--shine-rgb),.08) !important;
}
#chat-panel.open { animation: chat-in .24s cubic-bezier(.22,1,.36,1); }
@keyframes chat-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

#chat-header {
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.15) 0%, rgba(var(--surf2-rgb),.55) 62%) !important;
  border-bottom: 1px solid rgba(var(--shine-rgb),.08) !important;
}
#chat-header span { font-family: var(--font-display) !important; letter-spacing: .01em !important; }
#chat-header .ch-dot {
  box-shadow: 0 0 8px var(--accent), 0 0 0 3px rgba(var(--accent-rgb),.18) !important;
}

/* Kanal sekmeleri: pill */
.ch-tab { border-radius: 999px !important; }
.ch-tab.active {
  background: linear-gradient(135deg, var(--accent-mid) 0%, var(--accent) 100%) !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: 0 2px 10px rgba(var(--accent-rgb),.35), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.ch-tab.faction-active {
  background: linear-gradient(135deg, #f5b942 0%, #d98e14 100%) !important;
  border-color: transparent !important; color: #3a2600 !important;
  box-shadow: 0 2px 10px rgba(245,166,35,.35) !important;
}

/* Mesaj alanı + kaydırma */
#chat-messages::-webkit-scrollbar-thumb { background: var(--bdr2) !important; }
#chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),.55) !important; }

/* Avatar + balonlar (kuyruklu) */
.cm-av {
  border: 2px solid rgba(var(--shine-rgb),.14) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.4) !important;
}
.cm.other .cm-text {
  background: linear-gradient(160deg, var(--surf3) 0%, var(--surf2) 100%) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 14px 14px 14px 4px !important;
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb),.06), 0 2px 8px rgba(0,0,0,.26) !important;
}
.cm.user .cm-text {
  background: linear-gradient(160deg, var(--accent-mid) 0%, var(--accent) 100%) !important;
  color: #fff !important;
  border-radius: 14px 14px 4px 14px !important;
  box-shadow: 0 3px 12px rgba(var(--accent-rgb),.35), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Alt bar + girdi + gönder */
#chat-footer {
  background: linear-gradient(0deg, rgba(var(--surf2-rgb),.9) 0%, rgba(var(--surf-rgb),.6) 100%) !important;
  border-top: 1px solid rgba(var(--shine-rgb),.07) !important;
}
#chat-input {
  background: rgba(var(--bg-rgb),.55) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 999px !important;
}
#chat-input:focus {
  border-color: rgba(var(--accent-rgb),.65) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16) !important;
}
#chat-send {
  background: linear-gradient(180deg, var(--accent-mid) 0%, var(--accent) 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 10px rgba(var(--accent-rgb),.35), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
#chat-send:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }

/* Okunmamış rozetleri: ışıltı */
.ch-badge { box-shadow: 0 0 0 2px var(--surf), 0 0 8px rgba(var(--accent-rgb),.6) !important; }
#chat-faction-badge { box-shadow: 0 0 0 2px var(--surf), 0 0 8px rgba(245,166,35,.6) !important; }