/* ========================================================== */
/* === Pai Premium - ULTRA MODERN GLASS SETTINGS CSS V6 === */
/* ========================================================== */

/* Ana Kapsayıcı */
#tabSettingsCombined {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--bg-main);
  overflow: hidden;
  padding: 0 !important;
}

/* --- Header Alanı (Blur Efektli) --- */
.settings-top-container {
  flex-shrink: 0;
  background: rgba(var(--bg-main-rgb), 0.8);
  /* Yarı saydam */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: env(safe-area-inset-top);
  z-index: 50;
  position: relative;
}

.settings-page-header {
  padding: 10px 20px 5px 20px;
  /* Boşluk azaltıldı */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-page-header h2 {
  font-size: 2rem;
  font-weight: 900;
  margin: 0;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1px;
}

/* --- Modern Navigasyon (Hap Tasarımı) --- */
.settings-nav-scroll-wrapper {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 20px 15px 20px;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.settings-nav-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

.settings-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 50px;
  /* Tam yuvarlak */
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  background-color: var(--bg-content);
  /* Nötr arka plan */
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  user-select: none;
  position: relative;
  overflow: hidden;
}

/* Aktif Sekme Efekti */
.settings-nav-item.active {
  background-color: var(--accent-primary);
  color: #fff;
  /* Her zaman beyaz */
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent-primary) 50%, transparent);
  transform: translateY(-2px);
}

.settings-nav-item.active i {
  color: #fff;
}

/* --- İçerik Alanı (DÜZELTİLDİ: Kenar boşlukları kaldırıldı) --- */
.settings-content-area {
  flex: 1;
  overflow-y: auto;
  /* Kaydırmayı aktif et */
  overflow-x: hidden;
  padding: 0;
  /* KENAR BOŞLUKLARI SIFIRLANDI */
  /* 140px yerine menü yüksekliğine göre ayarlandı */
  padding-bottom: calc(var(--bottom-tab-bar-height) + env(safe-area-inset-bottom) + 20px);
  background-color: var(--bg-main);
  position: relative;
  /* Pozisyonlama hatasını çöz */
  width: 100%;
}

/* Diğer sekmeler (Görünüm, AI vb.) kenara yapışmasın diye onlara özel padding ekliyoruz */
.settings-tab-pane:not(#set-profile) {
  padding: 24px;
}

/* --- Ayar Kartları (Glassmorphism) --- */
.settings-card {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  /* Daha yumuşak köşeler */
  padding: 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

/* Kart Başlıkları */
.settings-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 24px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.9;
}

.settings-card h3 i {
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
  padding: 8px;
  border-radius: 12px;
  font-size: 1rem;
}

/* --- Profil Başlığı (Özel Tasarım) --- */
.settings-profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

/* Arka Plan Işıltısı */
.settings-profile-header::before {
  content: '';
  position: absolute;
  top: -50px;
  width: 200px;
  height: 200px;
  background: var(--accent-primary);
  filter: blur(80px);
  opacity: 0.2;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.settings-profile-img-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
  margin-bottom: 15px;
  z-index: 1;
}

.settings-profile-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--bg-content);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

/* Kamera İkonu (Yükleme İçin) */
.profile-upload-btn-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36px;
  height: 36px;
  background: var(--accent-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 3px solid var(--bg-content);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.profile-upload-btn-overlay:active {
  transform: scale(0.9);
}

/* Form Elemanları (Modernize Edilmiş) */
.settings-item {
  margin-bottom: 20px;
}

.settings-item label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-item input[type="text"],
.settings-item textarea,
.settings-item select {
  width: 100%;
  background-color: var(--bg-content);
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.settings-item input[type="text"]:focus,
.settings-item textarea:focus,
.settings-item select:focus {
  background-color: var(--bg-main);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 15%, transparent);
  outline: none;
}

/* --- Veri Yönetimi Butonları --- */
.data-manage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .data-manage-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.data-btn {
  display: flex;
  flex-direction: row;
  /* Yan yana */
  align-items: center;
  padding: 20px;
  background-color: var(--bg-content);
  border: 1px solid var(--border-input);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  gap: 20px;
}

.data-btn i {
  font-size: 1.8rem;
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
  padding: 12px;
  border-radius: 14px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-text-group {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.data-text-group span {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.data-text-group p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Tehlikeli Butonlar */
.data-btn.danger {
  border-color: color-mix(in srgb, var(--accent-red) 30%, transparent);
}

.data-btn.danger i {
  color: var(--accent-red);
  background: color-mix(in srgb, var(--accent-red) 10%, transparent);
}

.data-btn.danger:hover {
  background-color: color-mix(in srgb, var(--accent-red) 5%, transparent);
  transform: scale(1.02);
}

/* --- AYARLAR SEKME YAPISI (FIXED) --- */
.settings-content-area {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  background-color: var(--bg-main);
}

/* Tüm panelleri varsayılan olarak gizle */
.settings-tab-pane {
  display: none !important;
  width: 100%;
  padding: 20px;
  padding-bottom: 100px;
  /* Alt bar için boşluk */
  animation: fadeIn_v10 0.2s ease-out;
}

/* Sadece aktif olanı göster */
.settings-tab-pane.active {
  display: flex !important;
  flex-direction: column;
  gap: 20px;
}

/* Profil sekmesi için özel ayar (Tam ekran olduğu için padding yok) */
#set-profile.settings-tab-pane.active {
  padding: 0 !important;
  padding-bottom: 100px !important;
}

/* Üst Navigasyon Barı Düzeltmesi (Görseldeki kaymayı önler) */
.settings-nav-scroll-wrapper {
  display: flex;
  flex-wrap: nowrap;
  /* Asla alt satıra inme */
  overflow-x: auto;
  /* Yatay kaydır */
  padding: 10px 15px;
  gap: 10px;
  background-color: var(--bg-main);
  border-bottom: 1px solid var(--border-color);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox scrollbar gizle */
  position: sticky;
  /* Yapışkan olsun */
  top: 0;
  z-index: 20;
}

/* Webkit (Chrome/Safari) scrollbar gizle */
.settings-nav-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

.settings-nav-item {
  flex-shrink: 0;
  /* Butonların büzüşmesini engelle */
  white-space: nowrap;
  /* Metnin kaymasını engelle */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  /* Mobilde daha rahat tıklama için */
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  background-color: var(--bg-content);
  border: 1px solid var(--border-input);
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Aktif Buton Stili */
.settings-nav-item.active {
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

/* Aktif butondaki ikon rengi */
.settings-nav-item.active i {
  color: var(--text-on-accent);
}

/* Profil Başlığı Ortalama */
.settings-profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 20px;
}

/* Profil Resmi Kapsayıcısı */
.settings-profile-img-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}

/* === YENİ EKLENEN STİLLER (CSS) === */

/* 13. WhatsApp Style */
body.msg-style-whatsapp .message {
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

body.msg-style-whatsapp .message.user {
  background: #dcf8c6;
  color: black;
  border-top-right-radius: 0;
}

body.dark-theme.msg-style-whatsapp .message.user {
  background: #005c4b;
  color: white;
}

/* Dark Mode */
body.msg-style-whatsapp .message.assistant {
  background: #ffffff;
  color: black;
  border-top-left-radius: 0;
}

body.dark-theme.msg-style-whatsapp .message.assistant {
  background: #202c33;
  color: white;
}

/* 14. Telegram Style */
body.msg-style-telegram .message {
  border-radius: 12px;
  padding: 10px 14px;
}

body.msg-style-telegram .message.user {
  background: #2b5278;
  color: white;
  border-bottom-right-radius: 0;
}

body.msg-style-telegram .message.assistant {
  background: #182533;
  color: white;
  border-bottom-left-radius: 0;
}

/* 15. Neon / Glow Style */
body.msg-style-neon .message {
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-primary), inset 0 0 5px rgba(var(--accent-primary-rgb), 0.2);
  border-radius: 8px;
  color: var(--accent-primary) !important;
}

/* 16. Terminal / Hacker */
body.msg-style-terminal .message {
  background: #000000 !important;
  color: #00ff00 !important;
  font-family: 'Courier New', monospace;
  border: 1px solid #00ff00;
  border-radius: 0;
}

body.msg-style-terminal .message.user::before {
  content: "> ";
}

/* 17. Comic / Çizgi Roman */
body.msg-style-comic .message {
  background: #fff;
  color: #000;
  border: 3px solid #000;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 4px 4px 0 #000;
  font-weight: bold;
}

body.dark-theme.msg-style-comic .message {
  background: #ddd;
}

/* 18. Glassmorphism (Buzlu Cam) */
body.msg-style-glass .message {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  color: var(--text-primary);
}

/* --- MODAL İÇİ ÖNİZLEME BALONLARI İÇİN EKLEMELER --- */
.style-preview-bubble.preview-whatsapp {
  background: #dcf8c6;
  color: black;
  border-radius: 8px;
  border-top-right-radius: 0;
}

.style-preview-bubble.preview-telegram {
  background: #2b5278;
  color: white;
  border-radius: 12px;
  border-bottom-right-radius: 0;
}

.style-preview-bubble.preview-neon {
  background: black;
  border: 1px solid #0ff;
  color: #0ff;
  box-shadow: 0 0 5px #0ff;
}

.style-preview-bubble.preview-terminal {
  background: black;
  color: #0f0;
  font-family: monospace;
  border: 1px solid #0f0;
}

.style-preview-bubble.preview-comic {
  background: white;
  color: black;
  border: 2px solid black;
  border-radius: 95% 5% 90% 5%;
  box-shadow: 2px 2px 0 black;
  font-weight: bold;
}

.style-preview-bubble.preview-glass {
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

/* === DİNAMİK ARKA PLAN (VIDEO/GIF) STİLLERİ === */
#chatDynamicBackgroundLayer {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

/* ��indeki Medya (Resim veya Video) */
#chatDynamicBackgroundLayer img,
#chatDynamicBackgroundLayer video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  /* Ekran� doldur, oranlar� bozma */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  /* Y�klenince JS ile 1 yap�lacak (Flicker �nleme) */
  transition: opacity 0.5s ease-in;
  pointer-events: none;
  transform: translateZ(0);
  /* GPU acceleration */
}

/* Okunabilirlik Katman� (Overlay) - Tam Ekran Garantisi */
#chatBackgroundOverlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: -1;
  backdrop-filter: blur(0px);
  transition: background-color 0.3s ease;
  pointer-events: none;
  transform: translateZ(0);
}

/* AÇIK TEMA (Light Mode) DÜZELTMESİ */
/* Açık temada siyah yazı olduğu için, arka planı beyazlatarak okunurluğu sağla */
body.light-theme #chatBackgroundOverlay {
  background-color: rgba(255, 255, 255, 0.6);
}

/* Eğer karakterin arka planı varsa BLUR ve Renk Ayarı */
body.has-custom-background #chatBackgroundOverlay {
  backdrop-filter: blur(4px);
  /* Okunabilirlik için blur artırıldı */
  -webkit-backdrop-filter: blur(4px);
}

/* Açık temada + Özel Arka Plan varsa daha yoğun beyaz katman */
body.light-theme.has-custom-background #chatBackgroundOverlay {
  background-color: rgba(255, 255, 255, 0.82);
  /* Resmi iyice soluklaştır ki yazı okunsun */
}

/* Eski CSS çakışmasını önle */
#chatSection {
  background-image: none !important;
  /* Eski inline stili iptal et */
  background-color: var(--bg-main);
  /* Varsayılan renk */
}

/* === YENİ C.AI TARZI TERCİH BUTONLARI === */
.interactive-preferences {
  padding: 10px 0;
  background-color: var(--bg-elevated);
  /* Arka plan rengi */
  border: 1px solid var(--border-color);
  border-radius: 16px;
  margin-bottom: 20px;
}

.preference-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}

.preference-row:last-child {
  border-bottom: none;
}

.preference-row label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.grid-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  /* Otomatik sığdır */
  gap: 8px;
}

.pill-button {
  padding: 8px 12px;
  border-radius: 20px;
  /* Tam yuvarlak kenarlar */
  border: 1px solid var(--border-input);
  background-color: var(--bg-content);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.pill-button:hover {
  background-color: var(--bg-hover);
  border-color: var(--text-tertiary);
}

/* Seçili Durum (Active) */
.pill-button.active {
  background-color: var(--accent-primary);
  color: #fff;
  /* Metin her zaman beyaz */
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-weight: 700;
}

/* --- GOOGLE PLAY POLICY STYLES (ZORUNLU) --- */
.ai-policy-disclaimer {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  text-align: center;
  width: 90%;
  max-width: 600px;
  margin: 5px auto 0 auto;
  padding: 2px 10px;
  opacity: 0.7;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ai-policy-disclaimer i {
  font-size: 0.6rem;
  margin-top: 2px;
  transition: transform 0.3s ease;
}

.ai-policy-disclaimer .disclaimer-full-text {
  display: none;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 0.7rem;
  text-align: center;
  animation: fadeIn_v10 0.3s ease;
}

.ai-policy-disclaimer.expanded {
  opacity: 1;
  background: var(--bg-elevated);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  margin-bottom: 5px;
}

.ai-policy-disclaimer.expanded i {
  transform: rotate(180deg);
}

.ai-policy-disclaimer.expanded .disclaimer-full-text {
  display: block;
  text-align: left;
  /* Metni sola yasla */
  padding: 5px;
}

.ai-policy-disclaimer .disclaimer-full-text p {
  margin: 0 0 5px 0;
  color: var(--accent-primary);
  /* Başlık rengi */
  font-weight: 700;
}

.ai-policy-disclaimer .disclaimer-full-text ul {
  margin: 0;
  padding-left: 15px;
  list-style-type: disc;
}

.ai-policy-disclaimer .disclaimer-full-text li {
  margin-bottom: 6px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.ai-policy-disclaimer .disclaimer-full-text strong {
  color: var(--text-primary);
}

/* Rapor Modalı Stilleri */
#reportModalContent {
  max-width: 400px;
}

.report-option-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Boşlukları kaldırdık, border ile ayıracağız */
  background: var(--bg-elevated);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.report-option-label {
  display: flex;
  align-items: center;
  padding: 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}

.report-option-label:last-child {
  border-bottom: none;
}

.report-option-label:hover {
  background: var(--bg-hover);
}

.report-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--text-tertiary);
  border-radius: 50%;
  margin-right: 15px;
  position: relative;
  flex-shrink: 0;
}

.report-radio:checked {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
}

.report-radio:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #000;
  border-radius: 50%;
}

.report-text {
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 500;
}



/* ============================================================ */
/* === SOHBET ÖLÇEKLEME VE HİZALAMA FİXLERİ (KESİN ÇÖZÜM) === */
/* ============================================================ */

/* 1. SOHBET ÖLÇEĞİNİ ZORLA UYGULA */
/* Değişken tanımlı değilse varsayılan 1 olsun */
:root {
  --chat-zoom-level: 1;
}

/* Mesaj Metin Boyutu */
.message-content {
  /* Mevcut font boyutunu çarpan ile güncelle */
  font-size: calc(0.95rem * var(--chat-zoom-level)) !important;
  line-height: 1.6 !important;
}

/* Mesaj Balonu İç Boşlukları (Padding) */
.message {
  padding: calc(10px * var(--chat-zoom-level)) calc(14px * var(--chat-zoom-level)) !important;
}

/* Yazı Yazma Alanı (Input) Boyutu */
#userMessageInput {
  font-size: calc(1rem * var(--chat-zoom-level)) !important;
}

/* Tarih ve İsimlerin Boyutu */
.message-timestamp-area,
.personality-card-name,
.chat-header #chatTitleText {
  /* Bunları aşırı büyütmemek için çarpanı yarıya düşürebiliriz veya aynen bırakabiliriz */
  font-size: calc(0.8rem * var(--chat-zoom-level));
}

/* 2. EKRAN DIŞINA TAŞMA / KAYMA SORUNU ÇÖZÜMÜ (FLUTTER STYLE FIX) */

.chat-input-area-footer {
  width: 100% !important;
  position: fixed !important;
  /* Absolute mobilde klavye ile sapıtır, fixed şart */
  bottom: 0 !important;
  left: 0 !important;
  z-index: 3000 !important;
  pointer-events: none !important;
  /* Klavye açıldığında inputun yukarı itilmesi için padding-bottom'u dinamik tut */
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  background: linear-gradient(to top, var(--bg-main) 70%, transparent) !important;
  display: flex !important;
  justify-content: center !important;
}

.chat-input-wrapper.gemini-style-v3 {
  pointer-events: auto !important;
  /* Ekran dışına taşmayı önlemek için genişliği kısıtla */
  width: calc(100% - 32px) !important;
  max-width: 600px !important;
}

/* Input Wrapper (Kapsül) */
.chat-input-wrapper.gemini-style-v3 {
  pointer-events: auto;
  /* Sadece buna tıklanabilsin */
  margin-bottom: 5px !important;
  background-color: rgba(30, 30, 30, 0.85) !important;
  /* Daha opak */
  backdrop-filter: blur(30px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Mesaj Kutusunu Ortalamak İçin Kesin Yöntem (V5 - Compact Pill Design) */
.chat-input-wrapper.gemini-style-v3 {
  /* Genişliği ve Hizalamayı Ayarla */
  width: 92% !important;
  max-width: 700px !important;

  /* Kenar bo�luklar�n� d�zenle (Daha a�a��da, daha kompakt) */
  margin: 0 auto 16px auto !important;
  left: 0 !important;
  right: 0 !important;
  position: relative !important;

  /* Kutu modelini sabitle */
  box-sizing: border-box !important;

  /* Yükseklik ayarı (Daha ince olması için min-height düşürüldü) */
  min-height: calc(44px * var(--chat-zoom-level));

  /* Görsel Güzelleştirme (Daha sıkı padding) */
  border-radius: 30px !important;
  padding: 4px 12px !important;
  /* İç boşluk azaltıldı */
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;

  /* İçerik hizalaması */
  display: flex !important;
  align-items: flex-end !important;
  /* Çok satırlı yazıda butonlar altta kalsın */
  padding-bottom: 6px !important;
  /* Alt hizalama için ufak boşluk */
}

/* Footer Kapsayıcısını Düzeltme (Tam Merkezleme) */
.chat-input-area-footer {
  padding-left: 10px !important;
  padding-right: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  box-sizing: border-box !important;

  /* Flex ortalama */
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
}

/* Beyaz temada Disclaimer yazısının okunabilirliği için */
body.light-theme .ai-policy-disclaimer {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  padding: 2px 8px;
  margin-bottom: 5px !important;
}

/* Tablet ve Masaüstünde tekrar ortala */
@media (min-width: 768px) {
  .chat-input-wrapper.gemini-style-v3 {
    max-width: 800px !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
  }
}

/* Yan butonların (Gönder, +) boyutunu da ölçeğe göre ayarla */
#chatInputExpandToggleBtn,
.action-button-wrapper {
  width: calc(38px * var(--chat-zoom-level)) !important;
  height: calc(38px * var(--chat-zoom-level)) !important;
}

.right-controls .send-btn,
.right-controls .continue-btn-input {
  width: 100% !important;
  height: 100% !important;
}

/* Genel Scroll Bar Gizleme (Görsel kirliliği önler) */
body,
html {
  overflow-x: hidden !important;
  /* Yatay kaydırmayı kapat */
}

/* ============================================================ */
/* === YENİ NESİL RENKLİ YÜKLEME EKRANI (GRADIENT LOADER) === */
/* ============================================================ */

/* Renkli, Hareketli Arka Plan Animasyonu */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.visualize-gradient-loader {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Kare olması için */
  max-height: 300px;
  border-radius: 24px;
  /* Pastel ve Canlı Renkler */
  background: linear-gradient(-45deg, #84fab0, #8fd3f4, #fccb90, #d57eeb);
  background-size: 400% 400%;
  animation: gradientFlow 3s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}

/* Ortadaki Yüzde Kutusu */
.loader-percentage-box {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 20px;
  border-radius: 50px;
  color: #fff;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  min-width: 80px;
  text-align: center;
}

/* ============================================================ */
/* === YENİ GÖRSEL OLUŞTURMA MODALI (V3 TASARIM) === */
/* ============================================================ */

/* Modal İçeriği Düzeni */
.image-gen-modal-v2 .modal-scrollable-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

/* 1. Referans Görsel Alanı (Kesikli Çizgi) */
.ref-image-container-v3 {
  border: 2px dashed var(--border-color);
  border-radius: 16px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-main);
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.ref-image-container-v3 img {
  width: 100%;
  height: 100%;
  max-height: 200px;
  object-fit: contain;
}

.ref-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-tertiary);
  font-size: 0.9rem;
}

.ref-image-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  /* Resim yokken gizli */
  align-items: center;
  justify-content: center;
}

.ref-image-container-v3.has-image .ref-image-close-btn {
  display: flex;
}

.ref-image-container-v3.has-image .ref-image-placeholder {
  display: none;
}

/* 2. Prompt Alanı (Kapsül Tasarım) */
.prompt-box-v3 {
  position: relative;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 15px;
}

.prompt-textarea-v3 {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 1rem;
  resize: none;
  min-height: 80px;
  outline: none;
  padding-right: 40px;
  /* Ayar butonu için yer */
}

.prompt-settings-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: var(--bg-content);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 3. Seçim Butonları (En Boy & Stil) */
.option-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ratio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.ratio-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 5px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.ratio-btn i {
  font-size: 1.2rem;
}

.ratio-btn.active {
  background-color: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}

/* Stil Butonları (Kare İkonlar) */
.style-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.style-btn-square {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 1.5rem;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s;
}

.style-btn-square.active {
  background-color: var(--bg-content);
  /* Hafif koyu */
  border: 2px solid var(--accent-primary);
  color: var(--accent-primary);
  box-shadow: 0 0 15px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

/* Alt Footer Butonları (Yüzen) */
.modal-footer-floating {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  gap: 15px;
}

.footer-btn {
  flex: 1;
  padding: 16px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.footer-btn.cancel {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.footer-btn.create {
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
  /* Varsayılan Gradient */
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Temaya göre buton rengini ezmek için */
body.dark-theme .footer-btn.create {
  background: var(--accent-primary);
}

/* ============================================================ */
/* === FİX: AI VISUALIZER (BİREBİR TASARIM) === */
/* ============================================================ */

/* Kapsayıcıyı Ortala */
.visualized-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 12px;
}

/* 1. Ana Animasyon Kutusu */
.visualize-gradient-loader {
  position: relative;
  width: 260px !important;
  /* Görseldeki gibi büyük kare */
  height: 260px !important;
  border-radius: 28px;
  /* Yumuşak köşeler */
  overflow: hidden;
  /* Dışarı taşan renkleri gizle */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
  /* Derinlik gölgesi */

  /* Arka plan rengi (Animasyon yüklenmezse görünsün diye) */
  background-color: #2b2b2b;
  z-index: 1;
}

/* 2. Dönen Renkli Arka Plan (AI Hover Efekti) */
.visualize-gradient-loader::before {
  content: '';
  position: absolute;
  width: 150%;
  height: 150%;
  /* Pastel ve Canlı Renk Geçişleri (Fotoğraftaki tonlar) */
  background: conic-gradient(from 0deg,
      #ff9a9e,
      #fad0c4,
      #a18cd1,
      #fbc2eb,
      #8fd3f4,
      #84fab0,
      #ff9a9e);
  /* Pürüzsüz Dönme Animasyonu */
  animation: aiSpin 4s linear infinite;
  z-index: -1;
  /* İçeriğin arkasında */
}

/* Dönme Animasyonu Keyframe */
@keyframes aiSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 3. Ortadaki Yüzde Kutusu (Hap Şeklinde) */
.loader-percentage-box {
  position: relative;
  z-index: 2;
  /* Glassmorphism (Buzlu Cam) */
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);

  color: #ffffff;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 1px;

  padding: 12px 32px;
  border-radius: 50px;
  /* Tam yuvarlak hap şekli */
  min-width: 110px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Opsiyonel: Üzerine hafif bir "noise" veya "blur" katmanı ekleyerek daha yumuşak geçiş sağla */
.visualize-gradient-loader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  /* Renklerin birbirine daha çok karışması için */
  z-index: 0;
}


/* ============================================================ */
/* === YENİ ZİHİNSEL GEÇMİŞ (MEMORY LOG) TASARIMI === */
/* ============================================================ */

.memory-log-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
}

.memory-log-item {
  background-color: var(--bg-content);
  border-left: 3px solid var(--accent-primary);
  padding: 15px;
  border-radius: 0 12px 12px 0;
  position: relative;
  animation: slideInFromRight_v10 0.3s ease-out;
  border: 1px solid var(--border-color);
  border-left-width: 3px;
}

.memory-log-item.type-bio {
  border-left-color: #ff9f43;
}

/* Biyografi - Turuncu */
.memory-log-item.type-world {
  border-left-color: #54a0ff;
}

/* Dünya - Mavi */
.memory-log-item.type-summary {
  border-left-color: #1dd1a1;
}

/* Özet - Yeşil */
.memory-log-item.type-core {
  border-left-color: #ff6b6b;
}

/* Çekirdek - Kırmızı */

.memory-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.memory-log-tag {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: 6px;
  background-color: var(--bg-elevated);
  color: var(--text-secondary);
}

.memory-log-key {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.memory-log-content {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-family: var(--font-monospace);
  /* Terminal hissi için */
}

.memory-log-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.memory-log-delete:hover {
  opacity: 1;
  color: var(--accent-red);
}

.memory-empty-state {
  text-align: center;
  padding: 40px;
  color: var(--text-tertiary);
  font-style: italic;
}


/* ============================================================ */
/* === FİX: YÜKLEME EKRANI VE TAM EKRAN MODAL === */
/* ============================================================ */

/* 1. Renkli Yükleme Kutusunu Büyüt */
.visualized-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.visualize-gradient-loader {
  width: 280px !important;
  /* Genişliği sabitle ve büyüt */
  height: 280px !important;
  /* Yüksekliği sabitle ve büyüt */
  border-radius: 32px;
  /* Canlı Renk Geçişi */
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientFlow 3s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Yüzde Yazısı */
.loader-percentage-box {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 15px 25px;
  border-radius: 20px;
  color: #ffffff;
  font-weight: 900;
  font-size: 2.5rem;
  /* Yazıyı büyüt */
  letter-spacing: 2px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  min-width: 120px;
  text-align: center;
}

/* 2. "Çiz" (Görsel Oluşturma) Ekranını TAM EKRAN Yap */
#imageGenerationModalContainer .modal-dialog-content {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  background-color: var(--bg-main) !important;
  display: flex;
  flex-direction: column;
}

/* İçerik alanını esnek yap */
#imageGenerationModalContainer .modal-scrollable-content {
  flex-grow: 1;
  padding: 20px;
  padding-bottom: 100px;
  /* Footer için boşluk */
}

/* Footer (Butonlar) Aşağı Sabitle */
.modal-footer-floating {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 100;
  background: transparent;
}

/* ================================================= */
/* === VIP TEMA EFEKTLERİ & STİLLERİ (V4) === */
/* ================================================= */

/* --- 1. KİLİT AÇMA ANİMASYON OVERLAY'İ --- */
#unlockOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

#unlockOverlay.active {
  opacity: 1;
  pointer-events: auto;
}

.unlock-icon {
  font-size: 8rem;
  margin-bottom: 20px;
  animation: unlockPulse 1s infinite alternate;
}

.unlock-text {
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
}

@keyframes unlockPulse {
  from {
    transform: scale(1);
    filter: drop-shadow(0 0 10px currentColor);
  }

  to {
    transform: scale(1.1);
    filter: drop-shadow(0 0 30px currentColor);
  }
}

/* --- 2. MOONLIGHT TEMA DETAYLARI --- */
body.moonlight-theme {
  --bg-main: #020617;
  --bg-content: #0f172a;
  --bg-elevated: #1e293b;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --accent-primary: #38bdf8;
  /* Gökyüzü Mavisi */
  --bg-message-user: #0c4a6e;
  --bg-message-assistant: rgba(15, 23, 42, 0.8);
  background: radial-gradient(circle at top, #0f172a 0%, #020617 100%);
}

/* Moonlight Yıldız Efekti */
body.moonlight-theme::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 40px 70px, #ffffff, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 50px 160px, #ffffff, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 90px 40px, #ffffff, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 130px 80px, #ffffff, rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: twinkle 5s infinite linear;
  opacity: 0.6;
  z-index: -1;
}

@keyframes twinkle {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-200px);
  }
}

/* Moonlight Sohbet Balonu (Özel) */
body.moonlight-theme .message {
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.1);
  backdrop-filter: blur(10px);
}

body.moonlight-theme .message.user {
  background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
  color: #e0f2fe;
  border-radius: 18px 18px 2px 18px;
}

/* --- 3. RYUKO (LOVE) TEMA DETAYLARI --- */
body.ryuko-theme {
  --bg-main: #280818;
  --bg-content: #450e26;
  --bg-elevated: #5e1536;
  --text-primary: #ffe4e6;
  --text-secondary: #fecdd3;
  --accent-primary: #fb7185;
  /* Gül */
  --bg-message-user: #be185d;
  --bg-message-assistant: rgba(69, 14, 38, 0.8);
}

/* Ryuko Kalp Efekti */
body.ryuko-theme::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z' fill='%23fb7185' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
  animation: heartbeatBg 3s infinite alternate;
  opacity: 0.5;
  z-index: -1;
}

@keyframes heartbeatBg {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.05);
  }
}

/* Ryuko Sohbet Balonu (Özel) */
body.ryuko-theme .message {
  border-radius: 20px;
  border: 1px solid rgba(251, 113, 133, 0.3);
}

body.ryuko-theme .message.user {
  background: linear-gradient(135deg, #be185d 0%, #db2777 100%);
  color: white;
  border-bottom-right-radius: 0;
}

/* --- 4. VIP TEMALAR BÖLÜMÜ (AYARLARDA) --- */
#vipThemesSection {
  display: none;
  /* Varsayılan gizli */
  margin-top: 20px;
  border-top: 1px dashed var(--border-color);
  padding-top: 20px;
  animation: slideDown_v10 0.5s ease;
}

.vip-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vip-theme-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.vip-theme-card.active {
  border-color: var(--accent-primary);
  box-shadow: 0 0 15px var(--accent-primary);
}

.vip-theme-card:hover {
  transform: translateY(-3px);
}

.vip-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
  display: block;
}

.vip-name {
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Kartlara Özel Renkler */
.vip-card-moonlight .vip-icon {
  color: #38bdf8;
  text-shadow: 0 0 10px #38bdf8;
}

.vip-card-ryuko .vip-icon {
  color: #fb7185;
  text-shadow: 0 0 10px #fb7185;
}

.vip-card-cutecore .vip-icon {
  color: #d8b4fe;
  text-shadow: 0 0 10px #d8b4fe;
}

/* ================================================================== */
/* === YENİ SOHBET AYARLARI (ULTRA-MODERN GLASS V4) === */
/* ================================================================== */

/* Modal Gövdesi */
#chatSpecificSettingsModal .modal-dialog-content {
  background: #000000;
  /* Simsiyah zemin (OLED dostu) */
  border-radius: 0;
  /* Tam ekran olması için köşeleri düzleştir */
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  height: 100%;
  /* Ekranın tamamını kapla */
  position: fixed;
  /* Absolute yerine Fixed kullanarak ekrana sabitle */
  top: 0;
  left: 0;
  bottom: 0;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  /* En üstte kalmasını garanti et */
}

@media (min-width: 600px) {
  #chatSpecificSettingsModal .modal-dialog-content {
    max-width: 450px;
    border-radius: 32px;
    position: relative;
    height: 85vh;
    margin: auto;
  }
}

/* --- 1. HEADER (Blurlu ve Büyük) --- */
.cs-glass-header {
  position: relative;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 20px;
  background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
  border-bottom: 1px solid #222;
  flex-shrink: 0;
}

/* Arka plan efekti */
.cs-glass-header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--accent-primary);
  opacity: 0.15;
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
}

.cs-header-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #000;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  z-index: 1;
  margin-bottom: 10px;
}

.cs-header-info {
  z-index: 1;
  text-align: center;
}

.cs-header-info h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}

.cs-header-info p {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.cs-close-btn-floating {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}

.cs-close-btn-floating:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* --- İÇERİK ALANI --- */
.cs-content-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* --- 2. QUICK ACTIONS (Yatay Kaydırmalı) --- */
.cs-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.cs-quick-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 15px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.cs-quick-btn:active {
  transform: scale(0.95);
}

.cs-quick-btn i {
  font-size: 1.4rem;
  color: var(--accent-primary);
}

.cs-quick-btn span {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* --- 3. MODERN SETTINGS GROUP (Glassmorphism & Cyber-Clean) --- */
.cs-modern-group {
  background: var(--bg-content);
  /* Hafif cam efekti için backdrop-filter (desteklenen tarayıcılarda) */
  background: color-mix(in srgb, var(--bg-content) 80%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 20px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  margin-bottom: 25px;
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  /* İç ışıltı */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover efekti (Masaüstü için) */
@media (hover: hover) {
  .cs-modern-group:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
  }
}

.cs-group-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-tertiary);
  margin-left: 20px;
  margin-bottom: 10px;
  margin-top: 15px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.7;
}

.cs-modern-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.2s, padding 0.2s;
  background: transparent;
}

.cs-modern-item:last-child {
  border-bottom: none;
}

.cs-modern-item:active {
  background: var(--bg-hover);
  transform: scale(0.98);
  /* Use scale instead of padding shift to prevent layout distortion */
}

.cs-item-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  /* Daha yumuşak kare */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-right: 18px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* İkon gölgesi */
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cs-modern-item:hover .cs-item-icon-box {
  transform: scale(1.1) rotate(5deg);
}

.cs-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cs-item-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.cs-item-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 400;
  opacity: 0.8;
}

/* Beyaz Tema Uyumu */
body.light-theme .cs-modern-group {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

body.light-theme .cs-modern-item:active {
  background: #f1f5f9;
}

/* --- 4. IOS SWITCH --- */
.cs-ios-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 30px;
}

.cs-ios-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cs-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-input);
  transition: .3s;
  border-radius: 34px;
}

.cs-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

input:checked+.cs-slider {
  background-color: var(--accent-green);
}

input:checked+.cs-slider:before {
  transform: translateX(20px);
}

/* --- 5. SCROLLABLE PILLS --- */
.cs-pills-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: none;
}

.cs-pill {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s;
}

.cs-pill.active {
  background: var(--accent-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.3);
}

/* --- YENİ MİNİMAL ETKİLEŞİM ÇUBUĞU (TINY ACTION BAR) === */

/* Seslendirme (TTS) butonunu her yerden gizle */
.tiny-icon-btn.tts-btn {
  display: none !important;
}

/* --- 6. ACCOUNT PROFILE EDIT STYLES --- */
.ms-profile-edit-wrapper {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 15px auto;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ms-profile-edit-wrapper:active {
  transform: scale(0.95);
}

.ms-profile-img-large {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--bg-content);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  background: var(--bg-main);
}

.ms-edit-overlay {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 40px;
  height: 40px;
  background: var(--accent-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 4px solid var(--bg-content);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  font-size: 1.1rem;
}

.ms-announcement-item {
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-content);
  border: 1px solid var(--border-color);
  margin-bottom: 10px;
  animation: slideIn_v10 0.3s ease-out;
}

.ms-announcement-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent-primary);
  margin-bottom: 4px;
}

.ms-announcement-text {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

@keyframes slideIn_v10 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================ */