/* ============================================= */
/* === TEMA EDİTÖRÜ - MESAJ STİLLERİ === */
/* ============================================= */
/* ============================================= */
/* === GELÄ°ÅžMÄ°Åž MESAJ BALONU STÄ°LLERÄ° V2 === */
/* ============================================= */

/* --- Animasyonlu Geçişler --- */
.message {
  transition: border-radius 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, background-color 0.3s ease;
}

/* 1. Varsayılan (Standart Modern) */
body.msg-style-default .message {
  border-radius: 18px;
}

body.msg-style-default .message.user {
  border-bottom-right-radius: 2px;
}

body.msg-style-default .message.assistant {
  border-bottom-left-radius: 2px;
}

/* 2. Tam Yuvarlak (Rounded) */
body.msg-style-rounded .message {
  border-radius: 24px;
}

/* 3. Köşeli (Sharp) */
body.msg-style-sharp .message {
  border-radius: 2px;
}

/* 4. iOS Style (iMessage) */
body.msg-style-ios .message {
  border-radius: 18px;
  padding: 10px 16px;
}

body.msg-style-ios .message.user {
  background: #007AFF;
  color: white;
  border-bottom-right-radius: 4px;
}

body.msg-style-ios .message.assistant {
  background: #E9E9EB;
  color: black;
  border-bottom-left-radius: 4px;
}

/* Karanlık modda iOS asistan rengi */
body.dark-theme.msg-style-ios .message.assistant {
  background: #262628;
  color: white;
}

/* 5. Discord Style */
body.msg-style-discord .message {
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 8px 12px;
}

body.msg-style-discord .message.user {
  background-color: transparent;
  border-left: 4px solid var(--accent-primary);
  padding-left: 12px;
}

body.msg-style-discord .message.assistant {
  background-color: transparent;
  border-left: 4px solid var(--text-secondary);
  padding-left: 12px;
}

/* 6. Cutecore (Sevimli) */
body.msg-style-cutecore .message {
  border-radius: 20px;
  border: 2px dashed var(--accent-secondary);
  background-color: var(--bg-content);
}

body.msg-style-cutecore .message.user {
  border-color: var(--accent-primary);
}

/* 7. Cyberpunk */
/* 7. Cyberpunk (Düzeltilmiş - Metin Okunabilirliği) */
body.msg-style-cyberpunk .message {
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  border-left: 3px solid var(--accent-primary);
  background: rgba(0, 0, 0, 0.9) !important;
  /* Daha koyu zemin */
  backdrop-filter: blur(5px);
  color: var(--accent-primary) !important;
  /* Metni neon rengi yap */
  text-shadow: 0 0 5px rgba(0, 255, 234, 0.4);
  /* Hafif parlama */
}

body.msg-style-cyberpunk .message.user {
  border-left: none;
  border-right: 3px solid var(--accent-secondary);
  color: var(--accent-secondary) !important;
  /* Kullanıcı için farklı neon */
  text-shadow: 0 0 5px rgba(255, 0, 85, 0.4);
}

/* Önizleme kutusu için de düzeltme */
.style-preview-bubble.preview-cyberpunk {
  background: #000;
  color: #00ffea;
  border: 1px solid #00ffea;
  text-shadow: 0 0 2px #00ffea;
}

/* 8. Minimal */
body.msg-style-minimal .message {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 5px 0;
  border-radius: 0;
}

body.msg-style-minimal .message.user {
  text-align: right;
  border-right: 2px solid var(--accent-primary) !important;
  padding-right: 10px;
}

body.msg-style-minimal .message.assistant {
  text-align: left;
  border-left: 2px solid var(--text-secondary) !important;
  padding-left: 10px;
}

/* 9. Heart (Kalp) */
body.msg-style-heart .message {
  border-radius: 20px;
}

body.msg-style-heart .message.user {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 0;
}

body.msg-style-heart .message.assistant {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 0;
}

/* 10. Retro (Pixel) */
body.msg-style-retro .message {
  border-radius: 0;
  box-shadow: 4px 4px 0px var(--text-primary);
  border: 2px solid var(--text-primary);
  font-family: 'Courier New', monospace;
}

/* 11. Book (Kitap - Roman) STÄ°LÄ° (V2 - ULTRA GELÄ°ÅžMÄ°Åž) */
body.msg-style-book .message {
  background: transparent !important;
  /* Balon rengi yok */
  border: none !important;
  /* Kenarlık ve çizgiler TAMAMEN kaldırıldı */
  box-shadow: none !important;
  /* Gölge yok */
  border-radius: 0 !important;

  /* Tipografi */
  font-family: 'Georgia', 'Times New Roman', serif !important;
  font-size: 1.15rem !important;
  /* Biraz daha büyük ve okunaklı */
  line-height: 1.8 !important;
  /* Satır araları ferah */
  letter-spacing: 0.3px;
  color: var(--text-primary) !important;

  /* YerleÅŸim */
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 15px !important;
  margin-bottom: 15px !important;

  /* Okunabilirlik: Bulanýklýk (Blur) kaldýrýldý, sadece net kontrast gölgesi */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

body.light-theme.msg-style-book .message {
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

/* Asistan Mesajý: Roman anlatýmý gibi */
body.msg-style-book .message.assistant {
  text-align: left;
  margin-right: auto;
  padding-right: 5% !important;
  /* SaÄŸdan hafif boÅŸluk */
}

/* Kullanýcý Mesajý: Ýç ses / Diyalog gibi */
body.msg-style-book .message.user {
  text-align: right;
  font-style: italic;
  /* Kullanýcýyý ayýrt etmek için italik */
  color: var(--text-primary) !important;
  /* Temaya göre otomatik beyaz/siyah */
  padding-left: 15% !important;
  /* Soldan boþluk */
  opacity: 0.95;
  /* Çizgi oluþturan tüm elementleri gizle */
  border: none !important;
}

/* Kullanıcı mesajındaki o çizgiyi (pseudo-element) yok et */
body.msg-style-book .message.user::before,
body.msg-style-book .message.user::after {
  content: none !important;
  display: none !important;
}

/* --- KİTAP MODUNA ÖZEL ARAYÜZ (HEADER & FOOTER) --- */

/* Üst Başlık ve Alt Giriş Alanı: Şeffaf ve Blurlu */
body.msg-style-book .chat-header,
body.msg-style-book .chat-input-area-footer {
  background-color: rgba(0, 0, 0, 0.2) !important;
  /* Çok hafif karartma */
  backdrop-filter: blur(12px) !important;
  /* Buzlu cam efekti */
  -webkit-backdrop-filter: blur(12px) !important;
  border: none !important;
  /* Çizgileri kaldır */
  box-shadow: none !important;
  transition: all 0.3s ease;
}

/* Mesaj Yazma Kutusu (Input) */
body.msg-style-book .chat-input-wrapper {
  background-color: rgba(20, 20, 20, 0.4) !important;
  /* Daha ÅŸeffaf kutu */
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Ýsim ve Avatar Alaný */
body.msg-style-book .chat-header-title-group {
  background-color: transparent !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

body.light-theme.msg-style-book .chat-header-title-group {
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
}

/* 12. Manga */
body.msg-style-manga .message {
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 50% 20% / 10% 40%;
  box-shadow: 2px 2px 0 #000;
}

body.dark-theme.msg-style-manga .message {
  background: #000;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 2px 2px 0 #fff;
}

/* --- Gölge Stilleri --- */
body.msg-shadow-none .message {
  box-shadow: none !important;
}

body.msg-shadow-soft .message {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

body.msg-shadow-medium .message {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

body.msg-shadow-strong .message {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

/* --- Ayarlar Menüsü Önizleme Kutusu --- */
.settings-preview-box {
  background-color: var(--bg-main);
  /* Ana arka planı simüle et */
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: 150px;
  justify-content: center;
  overflow: hidden;
}

/* === YENİ STİL SEÇİM LİSTESİ (MODAL İÇİ) === */
.style-selection-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 0;
}

.style-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: var(--bg-content);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.style-list-item:hover {
  background-color: var(--bg-hover);
  border-color: var(--accent-primary);
}

.style-list-item.active {
  border-color: var(--accent-primary);
  background-color: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-content));
  box-shadow: 0 0 0 1px var(--accent-primary);
}

.style-info-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.style-name-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.style-preview-bubble {
  padding: 8px 12px;
  font-size: 0.85rem;
  max-width: 150px;
  /* Varsayılan stil önizlemesi için */
  background-color: var(--bg-hover);
  color: var(--text-primary);
  border-radius: 12px;
  pointer-events: none;
  /* Tıklamayı engelle */
}

/* ÖNİZLEME İÇİN STİL UYARLAMALARI (Modal İçinde) */
/* iOS */
.style-preview-bubble.preview-ios {
  background: #007AFF;
  color: white;
  border-radius: 18px;
  border-bottom-right-radius: 4px;
}

/* Discord */
.style-preview-bubble.preview-discord {
  background: transparent;
  border-left: 3px solid var(--accent-primary);
  border-radius: 2px;
  padding-left: 8px;
}

/* Cyberpunk */
.style-preview-bubble.preview-cyberpunk {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--accent-primary);
  color: var(--accent-primary);
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* Cutecore */
.style-preview-bubble.preview-cutecore {
  border: 2px dashed var(--accent-secondary);
  background: #fff0f5;
  color: #d65db1;
  border-radius: 20px;
}

/* Retro */
.style-preview-bubble.preview-retro {
  border: 2px solid var(--text-primary);
  background: black;
  color: var(--text-primary);
  font-family: 'Courier New', monospace;
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--text-primary);
}

/* Minimal */
.style-preview-bubble.preview-minimal {
  background: transparent;
  border-right: 2px solid var(--accent-primary);
  text-align: right;
  border-radius: 0;
  padding-right: 10px;
}

/* Heart */
.style-preview-bubble.preview-heart {
  border-radius: 20px;
  border-bottom-right-radius: 0;
  background: var(--accent-red);
  color: white;
}

/* Manga */
.style-preview-bubble.preview-manga {
  background: #fff;
  color: #000;
  border: 2px solid #000;
  border-radius: 50% 20% / 10% 40%;
  box-shadow: 2px 2px 0 #000;
}

/* Book */
.style-preview-bubble.preview-book {
  background: transparent;
  font-family: 'Georgia', serif;
  font-style: italic;
  border-bottom: 1px solid var(--text-secondary);
  border-radius: 0;
}

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