/* === Pai ULTRA-ADAPTIVE CHAT STYLES (TEMA UYUMLU V3) === */
/* ============================================================ */

/* --- 1. TEMEL GEÇİŞLER --- */
.message {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- 2. ŞEKİL ODAKLI STİLLER (Mevcut Tema Rengini Kullanır) --- */

/* Varsayılan (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;
}

/* Tam Yuvarlak */
body.msg-style-rounded .message {
  border-radius: 24px;
  padding: 14px 20px;
}

/* Keskin Köşe */
body.msg-style-sharp .message {
  border-radius: 2px;
}

/* Minimalist (Sadece Çizgi) */
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: 3px solid var(--bg-message-user);
  padding-right: 12px;
  color: var(--text-primary);
  /* Metin rengini temadan al */
}

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

/* Kitap (Book) */
body.msg-style-book .message {
  background: transparent !important;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  box-shadow: none;
  font-family: 'Georgia', serif;
  font-style: italic;
  width: 100%;
  max-width: 100%;
  padding: 15px 0;
  color: var(--text-primary);
}

body.msg-style-book .message.user {
  text-align: right;
}

body.msg-style-book .message.user::before {
  content: "� ";
  font-weight: bold;
}

/* SÜSLÜ PARANTEZ KAPATILDI */

/* ================================================================== */
/* === SOHBET AYARLARI - GERÇEK TAM EKRAN FİX (ZERO GAP) === */
/* ================================================================== */

/* 1. Modalın Dış Çerçevesi (Overlay) */
#chatSpecificSettingsModal {
  padding: 0 !important;
  /* Dış boşlukları sil */
  align-items: flex-start !important;
  /* Ortalamayı iptal et, yukarı yasla */
  background-color: var(--bg-main) !important;
  /* Arka planı tamamen boya */
}

/* 2. Modalın İçeriği */
#chatSpecificSettingsModal .modal-dialog-content {
  position: fixed !important;
  /* Sabitle */
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  /* Ekran genişliği */
  height: 100dvh !important;
  /* Ekran yüksekliği */
  max-width: 100vw !important;
  max-height: 100dvh !important;

  border-radius: 0 !important;
  /* Yuvarlak köşeleri kaldır (Tam ekran hissi için) */
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;

  /* İçerik düzeni */
  display: flex;
  flex-direction: column;
  background-color: #000000 !important;
  /* OLED Siyah */
}

/* 3. Header (Çentik Uyumu) */
/* Telefonun üst çentiğinin (kamera/saat) altında kalmasını engeller */
#chatSpecificSettingsModal .cs-glass-header {
  padding-top: calc(20px + env(safe-area-inset-top)) !important;
  background: radial-gradient(circle at top, #1a1a1a 0%, #000000 100%);
  border-bottom: 1px solid #222;
}

/* Kapatma butonunu biraz aşağı alalım ki çentiğe girmesin */
#chatSpecificSettingsModal .cs-close-btn-floating {
  top: calc(15px + env(safe-area-inset-top)) !important;
}

/* ============================================================ */
/* === TANRI MODU (NARRATOR) MESAJ STİLİ === */
/* ============================================================ */

.message.narrator {
  align-self: center !important;
  /* Ortaya hizala */
  background-color: transparent !important;
  /* Arka planı kaldır */
  border: 1px solid var(--accent-secondary) !important;
  /* İnce çerçeve */
  box-shadow: 0 0 10px rgba(var(--accent-secondary-rgb), 0.2) !important;
  max-width: 90% !important;
  margin: 15px auto !important;
  text-align: center !important;
  border-radius: 12px !important;
  padding: 8px 20px !important;
}

.message.narrator .message-content {
  font-family: 'Georgia', serif !important;
  /* Kitap/Roman fontu */
  font-style: italic !important;
  color: var(--text-secondary) !important;
  font-size: 0.9rem !important;
}

/* Tanrı modu mesajında kullanıcı adı vb. gizle */
.message.narrator .message-timestamp-area {
  display: none !important;
}

/* İkon ekle */
.message.narrator::before {
  content: '? Olay';
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-secondary);
  margin-bottom: 4px;
}

/* ================================================================== */
/* === SOHBET AYARLARI - TAM EKRAN FİX === */
/* ================================================================== */

#chatSpecificSettingsModal .modal-dialog-content {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background-color: var(--bg-main) !important;
  border: none !important;
}

/* Header'ı biraz daha genişletelim tam ekran olunca */
.cs-glass-header {
  padding-top: env(safe-area-inset-top);
  /* Çentik payı */
  height: auto;
  min-height: 160px;
}

/* ================================================================== */
/* === Pai KESİN HİZALAMA VE BOŞLUK DÜZELTMELERİ (FİNAL FİX) === */
/* ================================================================== */

/* 1. Global Taşma ve Hizalama Sıfırlama */
html,
body {
  width: 100vw !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  /* Yan boşlukları öldürür */
  position: fixed;
  /* Mobilde sayfanın oynamasını kilitler */
  inset: 0;
}

/* 2. Ana Uygulama Konteyneri */
.app-container {
  width: 100vw !important;
  height: 100dvh !important;
  /* Dinamik viewport height */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 3. Ana İçerik Alanı (Sarı Çizgideki Boşluğu Kaldırma) */
.main-content-area {
  width: 100% !important;
  flex: 1;
  /* Kalan alanı doldur */
  overflow-y: auto;
  overflow-x: hidden;
  /* Padding'i 0 yapıyoruz, çünkü artık gridlerin kendisine padding verdik (yukarıdaki adımlarda) */
  /* Böylece çift katmanlı boşluk oluşmaz */
  padding-bottom: 0 !important;
}

/* 4. Alt Tab Bar (Sarı Çizgideki Kaymayı Düzeltme) */
/* === PAI ELITE SAFE-TOUCH NAVIGATION === */
.bottom-tab-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;

  /* Mobilde butonların üzerine binen Android navigasyon barı koruması */
  height: calc(65px + env(safe-area-inset-bottom)) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;

  background-color: rgba(15, 15, 15, 0.9) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;

  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  z-index: 5000 !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* === MODERN NATIVE LİSTE TASARIMI (V7 - LIGHT/DARK FIX) === */

/* 1. Liste Konteyner */
.personalities-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 10px 20px 140px 20px !important;
  /* Kenar boşluklarını eşitle */
  margin: 0 !important;
  width: 100% !important;
  background-color: transparent !important;
  /* Arka planı body'den alsın */
}

/* 2. Liste Elemanı (Kart - Temaya Duyarlı) */
.personality-card-item {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  height: 90px !important;

  /* TEMAYA GÖRE DEĞİŞKEN ARKA PLAN */
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 20px !important;

  padding: 10px !important;
  box-shadow: var(--shadow-soft) !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, background-color 0.2s !important;
  overflow: visible !important;
  margin: 0 !important;
}

.personality-card-item:active {
  transform: scale(0.98) !important;
  background-color: var(--bg-active) !important;
}

/* 3. Avatar (Net ve Büyük) */
.personality-card-avatar-wrapper {
  width: 70px !important;
  height: 70px !important;
  flex-shrink: 0 !important;
  margin-right: 16px !important;
  border-radius: 16px !important;

  position: relative !important;
  overflow: hidden !important;
  background-color: var(--bg-content) !important;
  border: 1px solid var(--border-input) !important;

  opacity: 1 !important;
}

.personality-card-avatar-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
}

/* 4. Metin Alanı (Okunabilirlik Fix) */
.personality-card-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-right: 10px !important;
  overflow: hidden !important;
}

/* İsim Rengi (Temaya Bağlı) */
.personality-card-name {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  /* DÜZELTME: Beyaz yerine tema değişkeni */
  margin-bottom: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0.3px !important;
  text-shadow: none !important;
  /* Gölgeyi kaldır */
}

/* Açıklama Rengi */
.personality-card-tags {
  font-size: 0.85rem !important;
  color: var(--text-secondary) !important;
  /* DÜZELTME: Gri yerine tema değişkeni */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  font-weight: 500 !important;
  opacity: 0.9 !important;
}

/* Tarih Rozeti */
.avatar-time-badge {
  position: absolute !important;
  top: 12px !important;
  right: 15px !important;
  background: transparent !important;
  color: var(--text-tertiary) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 0 !important;
}

.personality-card-item:active {
  transform: scale(0.98) !important;
  background-color: #1a1a1a !important;
}

/* 3. Avatar (YUMUŞAK KARE & NET) */
.personality-card-avatar-wrapper {
  width: 65px !important;
  height: 65px !important;
  flex-shrink: 0 !important;
  margin-right: 15px !important;

  /* Yumuşak Kare (Squircle) */
  border-radius: 16px !important;

  position: relative !important;
  overflow: hidden !important;
  background-color: #222 !important;
  border: none !important;

  /* Gölge ile derinlik */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  opacity: 1 !important;
  /* Şeffaflığı kaldır */
}

.personality-card-avatar-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  /* Resim netliği */
  filter: none !important;
  /* Filtreleri kaldır */
}

/* 4. Metin Alanı */
.personality-card-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-right: 10px !important;
  overflow: hidden !important;
}

.personality-card-name {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
  letter-spacing: 0.3px !important;
}

.personality-card-tags {
  font-size: 0.85rem !important;
  color: #9ca3af !important;
  /* Açık gri */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  text-align: left !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  /* Solukluğu kaldır */
}

/* 5. Tarih/Saat (Sağ Üst, Kartın İçinde) */
.avatar-time-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: transparent !important;
  color: #666 !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 0 !important;
}

.avatar-time-badge i {
  display: none !important;
}

/* 6. Gereksizleri Gizle */
.source-badge,
.card-edit-btn-top,
.mini-badge,
.personality-card-avatar-wrapper::after {
  display: none !important;
}

.personality-card-checkbox {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 10;
}

/* ======================================================= */
/* === Pai ULTRA PROFİL TASARIMI (TAM EKRAN & MODERN) === */
/* ======================================================= */

/* 1. ANA KAPLAYICI (Tam Ekran Fix) */
#set-profile.settings-tab-pane {
  background-color: #000000 !important;
  padding: 0 !important;
  /* Kenar boşluklarını öldür */
  margin: 0 !important;
  width: 100%;
  min-height: 100dvh;
  /* Tüm ekranı kapla */
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* 2. HEADER ALANI (Profil Özeti) */
.cai-header-section {
  position: relative;
  padding: 40px 24px 30px 24px;
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
  border-bottom: 1px solid #27272a;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Ortala */
  gap: 20px;
}

/* Profil Resmi ve Düzenle Butonu */
.cai-avatar-container {
  position: relative;
  width: 110px;
  height: 110px;
}

.cai-avatar-large {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #27272a;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.cai-edit-badge-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
  color: #000;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 3px solid #18181b;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}

.cai-edit-badge-btn:active {
  transform: scale(0.9);
}

/* İsim ve Handle */
.cai-user-details {
  text-align: center;
  width: 100%;
}

.cai-user-details h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.cai-uid-pill {
  background: rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 8px;
  font-family: monospace;
  cursor: pointer;
}

.cai-uid-pill:active {
  background: rgba(255, 255, 255, 0.15);
}

/* İstatistikler */
.cai-stats-bar {
  display: flex;
  justify-content: center;
  gap: 40px;
  width: 100%;
  margin-top: 10px;
}

.cai-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cai-stat b {
  font-size: 1.1rem;
  color: #fff;
}

.cai-stat span {
  font-size: 0.75rem;
  color: #71717a;
  font-weight: 600;
  text-transform: uppercase;
}

/* 3. KAYDIRILABİLİR KARTLAR (Premium, Google vb.) */
.cai-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  padding: 20px 24px;
  display: flex;
  gap: 16px;
  scrollbar-width: none;
  /* Firefox */
}

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

.cai-info-card {
  min-width: 280px;
  background-color: #18181b;
  border-radius: 24px;
  padding: 20px;
  border: 1px solid #27272a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.cai-card-premium {
  background: linear-gradient(135deg, #1c1c20 0%, #111 100%);
  border-color: #3f3f46;
}

/* Altın Işıltı Efekti */
.cai-card-premium::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.15), transparent 70%);
  pointer-events: none;
}

.cai-card-text h4 {
  font-size: 1rem;
  color: #fff;
  margin: 0 0 4px 0;
  font-weight: 700;
}

.cai-card-text p {
  font-size: 0.8rem;
  color: #a1a1aa;
  margin: 0;
}

.cai-card-icon {
  font-size: 1.8rem;
  color: #fbbf24;
}

/* 4. GRID MENÜ (Ayarlar) */
.cai-menu-section {
  padding: 10px 24px 100px 24px;
  /* Alt boşluk footer için */
}

.cai-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #52525b;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  padding-left: 5px;
}

.cai-grid-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cai-btn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

.cai-icon-box {
  width: 64px;
  height: 64px;
  background-color: #18181b;
  border: 1px solid #27272a;
  border-radius: 22px;
  /* Yumuşak kare */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  transition: transform 0.2s, background-color 0.2s;
}

.cai-btn-item:active .cai-icon-box {
  transform: scale(0.92);
  background-color: #27272a;
}

.cai-btn-label {
  font-size: 0.75rem;
  color: #a1a1aa;
  font-weight: 500;
}

/* İkon Renkleri */
.box-purple {
  color: #c084fc;
}

.box-blue {
  color: #60a5fa;
}

.box-green {
  color: #4ade80;
}

.box-yellow {
  color: #facc15;
}

/* 5. AÇILIR FORMLAR (Edit & Prefs) */
.cai-expandable-form {
  display: none;
  background-color: #09090b;
  padding: 24px;
  border-top: 1px solid #27272a;
  animation: slideUp_v10 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cai-expandable-form.active {
  display: block;
}

.cai-input-group {
  margin-bottom: 20px;
}

.cai-input-group label {
  display: block;
  color: #71717a;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.cai-text-input {
  width: 100%;
  background-color: #18181b;
  border: 1px solid #27272a;
  padding: 16px;
  border-radius: 16px;
  color: #fff;
  font-size: 1rem;
  outline: none;
  font-family: inherit;
}

.cai-text-input:focus {
  border-color: #71717a;
  background-color: #202023;
}

.cai-action-btn {
  width: 100%;
  padding: 16px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  margin-top: 10px;
}

.btn-save {
  background-color: #fff;
  color: #000;
}

.btn-save:active {
  opacity: 0.9;
  transform: scale(0.98);
}

.cai-danger-area {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.btn-logout {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === SONSUZ KAYDIRMA YÜKLEYİCİSİ --- */
#infiniteScrollLoader {
  width: 100%;
  height: 50px;
  display: none;
  /* Varsayılan gizli */
}


/* ========================================================= */
/* === NEURAL VAULT V3 (FLEXBOX LAYOUT & SCROLL FIX) === */
/* ========================================================= */

/* Ana Kapsayıcı (Tam Ekran ve Kaydırma Yok) */
#csMemoryModal .modal-dialog-content {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  /* Dinamik viewport yüksekliği */
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;

  /* Arka Plan */
  background-color: #030304 !important;
  background-image: linear-gradient(to bottom, #030304 0%, #0a0a0a 100%);

  /* FLEX YAPISI (Scroll Sorununu Çözen Kısım) */
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  /* Dış scroll'u engelle */
}

/* 1. HEADER (Sabit) */
.nv-header {
  flex-shrink: 0;
  padding: calc(15px + env(safe-area-inset-top)) 20px 15px 20px;
  background: rgba(10, 10, 10, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
}

.nv-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nv-title i {
  color: var(--accent-primary);
}

.nv-close-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
}

/* 2. KONTROL PANELİ (Arama ve Ekleme - Sabit) */
.nv-controls {
  flex-shrink: 0;
  padding: 15px 20px;
  background: #050505;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  z-index: 15;
}

/* Arama */
.nv-search {
  background: #111;
  border-radius: 12px;
  padding: 0 15px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #222;
}

.nv-search input {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  width: 100%;
  height: 100%;
  font-size: 0.95rem;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ekleme Alanı (Toggle veya Açık) */
.nv-add-box {
  background: #0f0f0f;
  border: 1px solid #222;
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nv-row {
  display: flex;
  gap: 8px;
}

.nv-input {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 10px !important;
  font-size: 0.9rem !important;
  width: 100%;
  margin: 0 !important;
}

.nv-btn-save {
  background: var(--accent-primary);
  color: #000;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
}

/* 3. LİSTE ALANI (SCROLLABLE - Esnek) */
.nv-body {
  flex-grow: 1;
  /* Kalan tüm alanı kapla */
  overflow-y: auto;
  /* Sadece burası kaydırılsın */
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* Scroll Davranışı */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Kaydırma Çubuğu Gizleme (İsteğe bağlı) */
.nv-body::-webkit-scrollbar {
  display: none;
}

/* KART TASARIMI (Data Strip) */
.nv-card {
  background: #111;
  border-left: 3px solid #555;
  /* Renk kodu */
  border-radius: 0 10px 10px 0;
  padding: 14px;
  position: relative;
  border-bottom: 1px solid #1a1a1a;
}

.nv-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.nv-key {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}

.nv-tag {
  font-size: 0.65rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.1);
  padding: 3px 6px;
  border-radius: 4px;
  color: #aaa;
}

.nv-desc {
  font-size: 0.85rem;
  color: #888;
  line-height: 1.4;
}

.nv-del {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: none;
  border: none;
  color: #444;
  font-size: 1rem;
}

.nv-del:active {
  color: #ef4444;
}

/* Renkler */
.nv-type-core {
  border-left-color: #f43f5e;
}

.nv-type-bio {
  border-left-color: #eab308;
}

.nv-type-world {
  border-left-color: #3b82f6;
}

.nv-type-relation {
  border-left-color: #a855f7;
}

/* 4. FOOTER (Sabit) */
.nv-footer {
  flex-shrink: 0;
  padding: 15px 20px;
  padding-bottom: calc(15px + env(safe-area-inset-bottom));
  background: #050505;
  border-top: 1px solid #222;
  display: flex;
  gap: 15px;
  z-index: 20;
}

.nv-action-btn {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
}

.nv-btn-danger {
  background: #1a0505;
  color: #ef4444;
  border: 1px solid #3f1010;
}

.nv-btn-primary {
  background: #fff;
  color: #000;
}

/* === ULTRA TAM EKRAN C.AI PROFİL TASARIMI (V3) === */


#set-profile.cai-layout {
  background-color: #000000;
  min-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 100px;
  /* Alt bar için boşluk */
}

/* 1. HEADER (Tam Genişlik) */
.cai-header-section {
  padding: 40px 24px 30px 24px;
  /* Üstten güvenli boşluk */
  background: radial-gradient(circle at top right, #1a1a1a 0%, #000000 70%);
  border-bottom: 1px solid #1f1f1f;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Ortala */
  gap: 20px;
  text-align: center;
}

/* --- Profil Resmi Alanı (İkon Konumu Düzeltildi) --- */
.cai-avatar-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  /* Alttaki isimle arasına boşluk */
}

.cai-avatar-large {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #121212;
  /* Koyu çerçeve */
  box-shadow: 0 0 0 2px #333;
  /* Dış çerçeve efekti */
}

/* Kamera İkonu (Sağ Alta Tam Hizalandı) */
.cai-edit-circle {
  position: absolute;
  bottom: 0px;
  /* Tam sınıra */
  right: 0px;
  /* Tam sınıra */
  width: 34px;
  height: 34px;
  background-color: #ffffff;
  color: #000000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 3px solid #121212;
  /* Arka planla kaynaşması için çerçeve */
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.cai-text-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.cai-text-info h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 5px 0;
  line-height: 1.2;
}

.cai-uid-badge {
  background-color: #1f1f22;
  color: #a1a1aa;
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: monospace;
  display: inline-block;
  border: 1px solid #333;
}

/* --- "Profili Düzenle" Butonu (CSS Eklendi) --- */
.cai-edit-btn-large {
  background-color: #ffffff;
  /* Beyaz Buton */
  color: #000000;
  /* Siyah Yazı */
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 30px;
  /* Geniş ve rahat basılabilir */
  border-radius: 50px;
  /* Tam yuvarlak köşeler */
  border: none;
  cursor: pointer;
  margin-top: 20px;
  /* Üstteki istatistiklerden ayır */
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
  /* Hafif beyaz parlama */
  transition: transform 0.1s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* İkon varsa arası açılsın */
}

.cai-edit-btn-large:active {
  transform: scale(0.96);
  /* Tıklama efekti */
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

/* İstatistikler */
.cai-stats-row {
  display: flex;
  gap: 30px;
  margin-top: 5px;
}

.cai-stat-item {
  color: #71717a;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cai-stat-item b {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}

/* 2. PREMIUM BANNER (Tam Genişlik) */
.cai-premium-banner {
  background: linear-gradient(90deg, #1c1c1c 0%, #111 100%);
  border: 1px solid #333;
  border-radius: 24px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.cai-premium-text h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #fff;
  font-weight: 700;
}

.cai-premium-text p {
  margin: 5px 0 0 0;
  font-size: 0.8rem;
  color: #fbbf24;
}

.cai-premium-icon {
  font-size: 2rem;
  color: #ffd700;
}

/* 3. MENU GRID (Daha Büyük İkonlar) */
.cai-section-title {
  padding: 10px 0 15px 5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #52525b;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.cai-grid-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.cai-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.cai-menu-icon-box {
  width: 60px;
  height: 60px;
  background-color: #121212;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  border: 1px solid #27272a;
  transition: all 0.2s;
}

.cai-menu-item:active .cai-menu-icon-box {
  background-color: #27272a;
  transform: scale(0.95);
}

.cai-menu-label {
  font-size: 0.75rem;
  color: #a1a1aa;
  font-weight: 500;
}

/* Edit Form Animasyonu */
.cai-expandable-form {
  background: #09090b;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #27272a;
  margin-top: 20px;
  display: none;
}

.cai-expandable-form.active {
  display: block;
  animation: slideUp_v10 0.3s ease;
}

.cai-form-group {
  margin-bottom: 20px;
}

.cai-form-label {
  display: block;
  color: #71717a;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.cai-input,
.cai-textarea {
  width: 100%;
  background-color: #18181b;
  border: 1px solid #27272a;
  padding: 14px;
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  outline: none;
  font-family: inherit;
}

/* --- ZORUNLU DÜZELTMELER (FORCE OVERRIDE) --- */

/* 1. Profil Resmi ve Çerçevesi */
.cai-avatar-wrapper {
  position: relative !important;
  width: 110px !important;
  height: 110px !important;
  margin: 0 auto 15px auto !important;
  /* Ortala ve alttan boşluk bırak */
  display: block !important;
}

.cai-avatar-large {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid #121212 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* 2. Kamera İkonu (Yerini Zorla Düzelt) */
/* Eski 'relative' veya 'static' tanımlarını ezmek için */
.cai-edit-circle {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  /* Sol hizalamayı iptal et */
  top: auto !important;
  /* Üst hizalamayı iptal et */
  margin: 0 !important;
  /* Dış boşlukları sıfırla */

  width: 32px !important;
  height: 32px !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  border-radius: 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 14px !important;
  border: 3px solid #121212 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  z-index: 20 !important;
}

/* İkonun içindeki i etiketini de ortala */
.cai-edit-circle i {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* 3. Profili Düzenle Butonu (Stili Zorla) */
.cai-edit-btn-large {
  /* Varsayılan tarayıcı stillerini sıfırla */
  appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: none !important;
  border: none !important;

  /* Yeni Stil */
  background-color: #ffffff !important;
  color: #000000 !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  font-family: inherit !important;

  padding: 12px 30px !important;
  border-radius: 50px !important;

  cursor: pointer !important;
  margin-top: 20px !important;
  display: inline-flex !important;
  /* Flex yaparak ortalamayı garantile */
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15) !important;
  text-decoration: none !important;
  /* Alt çizgiyi kaldır */
  width: auto !important;
  /* Genişliği içeriğe göre ayarla */
}

.cai-edit-btn-large:active {
  transform: scale(0.96) !important;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1) !important;
}



/* ============================================================ */
/* === Pai C.AI REPLICA FOOTER DESIGN (FINAL V2 - COMPACT) === */
/* ============================================================ */

/* 1. Ana Kapsayıcı (Footer) - Tamamen Şeffaf ve Havada */
.Pai-ultimate-footer-centered {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;

  /* Flex düzeni */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;

  /* --- ANDROID & IOS SAFE AREA FIX --- */
  /* Klavye açılınca veya gesture bar varsa boşluk bırak */
  padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;

  z-index: 2000 !important;

  /* Arka planı yumuşak bir geçişle (gradient) yap ki yazılar okunsun */
  background: linear-gradient(to top, var(--bg-main) 60%, transparent 100%) !important;

  pointer-events: none !important;
  /* Tıklamaları arkaya geçir */
  box-sizing: border-box !important;

  /* Klavye açıldığında yumuşak geçiş */
  transition: padding-bottom 0.2s ease-out;
}

/* Input Wrapper (Koyu Kaps�l) */
.chat-input-wrapper.gemini-style-v3 {
  pointer-events: auto !important;
  margin-bottom: 26px !important;
  /* Bir t�k daha yukar� ta��nd� (20px -> 26px) */
  width: 96% !important;
  max-width: 600px !important;

  /* Koyu Solid Arka Plan */
  background-color: #1a1a1a !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #2a2a2a !important;
  box-shadow: none !important;

  /* Yuvarlak Kaps�l */
  border-radius: 28px !important;
  padding: 6px 8px !important;
  align-items: center !important;
  display: flex !important;
}

/* === PAI ADAPTIVE CHAT INPUT (MOBILE OPTIMIZED) === */
.Pai-ultimate-footer-centered {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  background: transparent !important;
  z-index: 3000 !important;
}



.chat-input-wrapper.gemini-style-v3:focus-within {
  border-color: #3a3a3a !important;
  box-shadow: none !important;
}

/* --- LIGHT THEME CHAT INPUT FIX (CLEAN GLASS) --- */
body.light-theme .chat-input-wrapper.gemini-style-v3 {
  background-color: rgba(255, 255, 255, 0.65) !important;
  /* Hafif Cam Efekti A��k Tema */
  backdrop-filter: blur(15px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(180%) !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  /* İnce gri kenarlık */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important;

  margin-bottom: 20px !important;
  /* Alttan biraz daha yukarıda */
}

/* Footer Arka Planı (Arkadan geçen yazılar için Beyaz Fade) */
body.light-theme .chat-input-area-footer {
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%) !important;
}

/* Yasal Metin Rengi (Gri) */
body.light-theme .cai-disclaimer-text {
  color: #9CA3AF !important;
  text-shadow: none !important;
}

/* Input Placeholder Rengi */
body.light-theme #userMessageInput::placeholder {
  color: #9CA3AF !important;
}

/* 3. Sol İkon (TEMA UYUMLU) */
#chatInputExpandToggleBtn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background-color: transparent !important;

  /* Temaya göre otomatik renk (Beyazda koyu, Koyuda açık) */
  color: var(--text-secondary) !important;

  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: all 0.2s !important;
}

#chatInputExpandToggleBtn:hover {
  color: var(--accent-primary) !important;
  background-color: var(--bg-hover) !important;
}

/* 4. Metin Alanı (DİNAMİK RENK) */
#userMessageInput {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  /* Bu değişken beyaz temada siyah, koyu temada beyaz olur */
  color: var(--text-primary) !important;

  font-size: 1rem !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  max-height: 120px !important;
  min-height: 24px !important;
  line-height: 1.2 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Placeholder rengini de temaya bağla */
#userMessageInput::placeholder {
  color: var(--text-placeholder) !important;
  opacity: 0.8 !important;
}

/* 6. Alt Uyarı Metni (HER TEMA İÇİN UYGUN) */
.cai-disclaimer-text {
  font-size: 9px !important;

  /* Bu değişken hem koyu hem açık temada 'Gri'dir, böylece hep görünür */
  color: var(--text-tertiary) !important;

  text-align: center !important;
  margin: 0 !important;
  margin-bottom: 2px !important;
  padding: 0 10px !important;

  opacity: 0.6 !important;
  /* Beyaz temada görülmesi için opaklık biraz artırıldı */

  pointer-events: none !important;
  width: 100% !important;
  max-width: 600px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  /* Biraz daha kalın */

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Galeri ve Diğer İkonlar (DİNAMİK) */
.icon-button.footer-action-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: transparent !important;

  /* Temaya göre renk */
  color: var(--text-secondary) !important;

  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.icon-button.footer-action-btn:hover {
  color: var(--text-primary) !important;
  background-color: var(--bg-hover) !important;
  /* Dinamik hover rengi */
}

/* ================================================================ */
/* === Pai ULTRA PREMIUM PROFIL TASARIMI (V4 - CSS MOTORU) === */
/* ================================================================ */

/* 1. ANA DÜZEN VE ARKA PLAN */
#set-profile.cai-layout {
  background-color: var(--bg-main);
  /* Tema rengini kullan */
  min-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding: 0 !important;
  /* Varsayılan padding'i ez */
}

/* 2. KAPAK FOTOĞRAFI (BANNER) - YÜKSEKLİK AZALTILDI */
.profile-banner-container {
  width: 100%;
  height: 120px;
  /* 160px -> 120px */
  position: relative;
  background: linear-gradient(135deg, #1e1e24 0%, #2d1b4e 100%);
  overflow: hidden;
}

#profileBannerOverlay {
  /* Resim yüklendiğinde hafif karartma ve karışım modu */
  mix-blend-mode: overlay;
  transition: all 0.5s ease;
}

/* 3. HEADER VE AVATAR ALANI */
.cai-header-section {
  position: relative;
  z-index: 2;
  /* Banner'ın içine girmesi için negatif margin */
  margin-top: -60px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cai-avatar-wrapper {
  position: relative;
  /* Gölge ve Derinlik */
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cai-avatar-wrapper:hover {
  transform: scale(1.05);
  /* Üzerine gelince hafif büyüme */
}

.cai-avatar-large {
  /* Ana arka plan renginde kalın çerçeve (Cut-out efekti) */
  border: 4px solid var(--bg-main);
  background-color: var(--bg-main);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
}

/* Düzenleme İkonu (Kalem/Kamera) */
.cai-edit-circle {
  border: 3px solid var(--bg-main) !important;
  background: var(--accent-primary) !important;
  color: #fff !important;
  transition: all 0.2s ease;
}

.cai-edit-circle:hover {
  transform: scale(1.1) rotate(15deg);
  background: #fff !important;
  color: var(--accent-primary) !important;
}

/* 4. ROZETLER VE İSİM */
.vip-model-tag {
  /* Parlayan Pro Etiketi */
  background: linear-gradient(45deg, #FFD700, #FFA500);
  color: #000 !important;
  font-weight: 800;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
  letter-spacing: 0.5px;
}

#accountTypeBadge {
  /* Misafir/Google Rozeti */
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  font-weight: 600;
}

/* 5. İSTATİSTİKLER (GLASSMORPHISM KARTLARI) */
.cai-stats-row {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px;
  box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background 0.2s;
}

.cai-stats-row:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  transform: translateY(-2px);
}

.cai-stat-item b {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  /* Sayısal font */
  letter-spacing: 0px;
}

/* 6. DÜZENLEME FORMU (ANIMASYONLU AÇILIR MENÜ) */
.cai-expandable-form {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden;
  transform-origin: top;
  /* Açılış animasyonu */
  animation: expandForm 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes expandForm {
  from {
    opacity: 0;
    transform: scaleY(0.9) translateY(-20px);
  }

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

/* Form Inputları */
.cai-input,
.cai-textarea,
.cai-input option {
  background-color: var(--bg-main) !important;
  /* Input içi daha koyu */
  border: 1px solid var(--border-input) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  font-family: var(--font-primary);
  transition: all 0.2s ease;
}

.cai-input:focus,
.cai-textarea:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent) !important;
  background-color: var(--bg-elevated) !important;
  /* Odaklanınca hafif aç */
}

/* Etiketler (Labels) */
.cai-form-label {
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700 !important;
  color: var(--text-tertiary) !important;
}

/* 7. BUTONLAR */
.button.primary.full-width {
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border: none;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-primary) 40%, transparent);
  transition: all 0.2s;
}

.button.primary.full-width:active {
  transform: scale(0.98);
  filter: brightness(0.9);
}

/* Çıkış Yap Butonu */
#caiLogoutBtn {
  background-color: rgba(220, 38, 38, 0.1) !important;
  /* Kırmızımsı */
  color: #ef4444 !important;
  border: 1px solid rgba(220, 38, 38, 0.2) !important;
}

#caiLogoutBtn:hover {
  background-color: #ef4444 !important;
  color: white !important;
}

/* 8. RESPONSIVE IZGARA (GRID) */
/* Mobilde yan yana olan inputları alt alta almak için */
@media (max-width: 480px) {
  .cai-expandable-form .grid-template-columns {
    grid-template-columns: 1fr !important;
    /* Tek sütun */
  }

  .cai-stats-row {
    gap: 10px;
    padding: 12px;
  }
}

/* === Pai ULTRA: VOID ELITE EDITION (TAÇSIZ & ÜSTTE) === */

.ultra-fullscreen-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #000000 !important;
  /* Saf Siyah */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: none !important;
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* Arka Plan (Derin Mor Void) */
.ultra-bg-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(88, 28, 135, 0.5) 0%, transparent 70%),
    /* Üst Derin Mor */
    radial-gradient(circle at 0% 100%, rgba(124, 58, 237, 0.2) 0%, transparent 50%),
    /* Sol Alt Mor */
    #000000;
  pointer-events: none;
}

/* Hareketli Parıltılar */
.gold-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.2) 0%, transparent 70%);
  filter: blur(80px);
  animation: floatOrb 15s infinite alternate ease-in-out;
  mix-blend-mode: screen;
}

.gold-orb:nth-child(1) {
  width: 400px;
  height: 400px;
  top: -15%;
  left: 10%;
  animation-duration: 20s;
}

.gold-orb:nth-child(2) {
  width: 300px;
  height: 300px;
  bottom: 10%;
  right: -10%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
  animation-duration: 12s;
}

.ultra-content-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* --- 1. HEADER (EN TEPEDE & ELİT) --- */
.ultra-header-section {
  flex-shrink: 0;
  /* Header'ı en tepeye yapıştır */
  padding-top: calc(50px + env(safe-area-inset-top));
  padding-bottom: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ultra-title-text {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-weight: 900;
  font-size: 2.8rem;
  /* Daha Büyük */
  /* Elit Metalik Gradyan */
  background: linear-gradient(180deg, #FFFFFF 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.5));
}

.ultra-subtitle {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  margin-top: 5px;
  letter-spacing: 6px;
  font-weight: 600;
  text-transform: uppercase;
}

/* --- 2. ELITE LIST --- */
.ultra-scroll-area {
  flex-grow: 1;
  overflow-y: auto;
  width: 100%;
  padding: 0 20px;
  -webkit-overflow-scrolling: touch;
}

/* Yeni Liste Yapısı */
.ultra-feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
}

.ultra-feature-item {
  background: rgba(20, 20, 25, 0.6);
  /* Yarı saydam koyu */
  border: 1px solid rgba(147, 51, 234, 0.2);
  /* Mor çerçeve */
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  backdrop-filter: blur(10px);
  transition: transform 0.2s, background 0.2s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.ultra-feature-item:hover {
  background: rgba(147, 51, 234, 0.15);
  /* Hover'da mor ışık */
  transform: translateX(5px);
  border-color: rgba(147, 51, 234, 0.5);
}

/* Sol Taraf (Metin) */
.feat-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.feat-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

/* Sağ Taraf (İkon/Durum) */
.feat-status-icon {
  font-size: 1.2rem;
  color: #4ade80;
  /* Yeşil Tik */
  filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.4));
}

.feat-status-icon.infinity {
  color: #d8b4fe;
}

/* Sonsuzluk Moru */
.feat-status-icon.up {
  color: #60a5fa;
}

/* Mavi Ok */
.feat-status-icon.gold {
  color: #FFD700;
}

/* Altın */

/* --- 3. FOOTER (PREMIUM BUTON) --- */
.ultra-footer-section {
  flex-shrink: 0;
  width: 100%;
  padding: 20px 25px;
  padding-bottom: calc(25px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, #05000a 80%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.price-tag-container {
  margin-bottom: 15px;
  text-align: center;
  background: rgba(255, 215, 0, 0.1);
  padding: 8px 20px;
  border-radius: 30px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: #FFD700;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}

/* --- NEURAL VAULT SCROLL FIX --- */
.memory-modal-redesigned {
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 100dvh !important;
  /* Ekran boyunu aşma */
  border-radius: 0 !important;
  /* Mobilde tam ekran olsun */
  background-color: var(--bg-main) !important;
}

/* Header ve Footer sabit, ortası kayar */
.memory-content-area {
  /* Kaydırma özelliği */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  /* iOS akıcılığı */
  scrollbar-width: thin;
  /* Firefox ince scroll */

  /* SCROLL FİX: En alttaki kartın butonların altında kalmaması için büyük boşluk */
  padding-bottom: 150px !important;
}

/* Scrollbar'ı gizlemek istersen (Modern görünüm) */
.memory-content-area::-webkit-scrollbar {
  width: 4px;
}

.memory-content-area::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 4px;
}

/* Ekleme Kartı Tasarımı */
.add-memory-card {
  background-color: var(--bg-content);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.add-memory-card input,
.add-memory-card textarea,
.add-memory-card select {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-primary) !important;
  font-size: 0.9rem;
  border-radius: 10px !important;
  padding: 10px !important;
}

.add-memory-card input:focus,
.add-memory-card textarea:focus {
  border-color: var(--accent-primary) !important;
  outline: none;
}

/* --- PROFİL İÇİ SEKME SİSTEMİ (V2) --- */
.profile-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  background-color: var(--bg-elevated);
  padding: 5px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.profile-nav-button {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.profile-nav-button:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.profile-nav-button.active {
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

.profile-panel {
  display: none;
  animation: fadeIn_v10 0.3s ease-out;
}

.profile-panel.active {
  display: block;
}

/* Profil Rozetleri */
#profileBadgesContainer {
  display: flex;
  gap: 6px;
  margin-top: 5px;
  justify-content: center;
}

.profile-badge {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: help;
  transition: transform 0.2s;
}

.profile-badge:hover {
  transform: scale(1.1);
}

.profile-badge.ultra {
  background: linear-gradient(45deg, #FFD700, #FFA500);
  color: #000;
  border: none;
}

.profile-badge.early {
  color: #ff6b6b;
  border-color: #ff6b6b;
}

.profile-badge.dev {
  background: #5865F2;
  color: #fff;
  border: none;
}

/* Discord Mavisi */
.profile-badge.google {
  color: #4285F4;
  border-color: #4285F4;
}

/* Bağış Butonları */
.donation-amount-btn {
  background-color: var(--bg-content);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
  padding: 15px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.donation-amount-btn:hover {
  background-color: var(--bg-hover);
}

.donation-amount-btn.selected {
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
  border-color: var(--accent-primary);
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* === ULTRA ÜYELİK DURUM KARTI (DASHBOARD) === */
.ultra-status-card-wrapper {
  background: linear-gradient(160deg, #1a1a1a 0%, #050505 100%);
  border: 1px solid rgba(255, 215, 0, 0.2);
  /* Altın çerçeve */
  border-radius: 24px;
  padding: 25px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.8);
}

/* Arka plan efekti */
.ultra-status-card-wrapper::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 60%);
  /* Mor ışık */
  animation: rotateGlow 10s linear infinite;
  pointer-events: none;
}

@keyframes rotateGlow {
  0% {
    transform: rotate(0deg);
  }

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

.ultra-status-icon-large {
  font-size: 3.5rem;
  color: #FFD700;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
  margin-bottom: 10px;
  animation: pulseIcon 3s infinite ease-in-out;
}

@keyframes pulseIcon {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

.ultra-status-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(to right, #fff, #FFD700);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  letter-spacing: 0px;
}

.ultra-status-subtitle {
  color: #4ade80;
  /* Yeşil Aktif Yazısı */
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  display: inline-block;
  padding: 4px 12px;
  background: rgba(74, 222, 128, 0.1);
  border-radius: 20px;
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.ultra-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 25px;
  position: relative;
  z-index: 2;
}

.ultra-stat-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(5px);
}

.ultra-stat-label {
  font-size: 0.7rem;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.ultra-stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}

.cancel-sub-btn {
  background: rgba(220, 38, 38, 0.15);
  color: #ef4444;
  border: 1px solid rgba(220, 38, 38, 0.3);
  padding: 14px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.9rem;
  width: 100%;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
  z-index: 2;
}

.cancel-sub-btn:hover {
  background: rgba(220, 38, 38, 0.25);
}

/* --- KİLİTLİ TEMA KARTI TASARIMI --- */
.theme-preview-box.locked {
  cursor: not-allowed;
  position: relative;
  opacity: 0.7;
  /* Biraz soluk */
}

/* Kartın üzerindeki renkleri grileştir */
.theme-preview-box.locked .theme-preview-colors {
  filter: grayscale(1) brightness(0.5);
  /* Renkleri öldür ve karart */
}

/* Kilit İkonu (Ortada) */
.theme-preview-box.locked::after {
  content: '\f023';
  /* FontAwesome Kilit İkonu */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 40%;
  /* Renk barının ortasına denk gelsin */
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  color: #FFD700;
  /* Altın Rengi Kilit */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  z-index: 10;
}

/* VIP Kartlar için Kilit (Eğer HTML yapısı farklıysa) */
.vip-theme-card.locked {
  filter: grayscale(1);
  opacity: 0.6;
  position: relative;
}

.vip-theme-card.locked::after {
  content: '\f023';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: #FFD700;
  z-index: 5;
}



/* --- Giriş Ekranı Veri Kurtarma Kutusu --- */
.migration-alert-box {
  background: rgba(255, 165, 0, 0.1);
  /* Turuncu hafif zemin */
  border: 1px solid rgba(255, 165, 0, 0.3);
  border-radius: 16px;
  padding: 15px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  backdrop-filter: blur(5px);
}

.migration-alert-box:active {
  transform: scale(0.98);
  background: rgba(255, 165, 0, 0.2);
}

.migration-alert-box .mig-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 165, 0, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: orange;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.migration-alert-box .mig-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.migration-alert-box .mig-text strong {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.migration-alert-box .mig-text span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  line-height: 1.3;
}

.migration-alert-box i.fa-chevron-right {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.9rem;
}

/* Block Extracted */
.plan-card-v3.active {
  background: rgba(124, 58, 237, 0.15) !important;
  border: 2px solid #7c3aed !important;
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.3);
}

/* REKLAM YÜKLENİYOR GÖSTERGESİ */
#adLoadingIndicator {
  position: fixed;
  top: 80px;
  /* Header'ın altında */
  right: 20px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000;
  border-radius: 50%;
  z-index: 21000;
  /* En üstte */
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulseAd 1s infinite;
  border: 2px solid #fff;
  pointer-events: none;
  /* Tıklamayı engelle */
}

@keyframes pulseAd {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  }
}

/* Block Extracted */
body {
  margin: 0;
  overflow: hidden;
  background: white;
}


/* --- GROUP SYSTEM LAYOUT FIX --- */
.chat-input-main-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  position: relative;
}

.group-speaker-selector {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 12px;
  background: var(--bg-elevated);
  /* Solid background to cover overlap */
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  align-items: center;
  width: 92%;
  max-width: 700px;
  margin: 0 auto;
  /* Centered */
  z-index: 5;
  min-height: 44px;
  /* Ensure visibility */
  box-sizing: border-box;
  /* Hide scrollbar */
  -ms-overflow-style: none;
  scrollbar-width: none;
  transform: translateY(1px);
  /* Slight overlap to connect borders */
}

.group-speaker-selector::-webkit-scrollbar {
  display: none;
}

/* Speaker Chip Styling Update */
.speaker-chip {
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--bg-content);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--border-input);
  transition: 0.2s;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.speaker-chip img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.speaker-chip.active {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.speaker-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Fix chat input wrapper stacking */
.chat-input-wrapper.gemini-style-v3 {
  z-index: 10;
  position: relative;
}

/* Tablet/Desktop Adjustment */
@media (min-width: 768px) {
  .group-speaker-selector {
    max-width: 800px;
  }
}

/* --- HİÇBİR ŞEYİ DEĞİŞTİRME, BUNU EN ALTA YAPIŞTIR --- */

/* 1. Modal ve Menüleri Güzelleştir (GPT Glass Effect) */
.gpt-settings-overlay,
.modal-overlay-container,
#masterSettingsOverlay {
  background-color: rgba(0, 0, 0, 0.6) !important;
  /* Arka planı karart */
  backdrop-filter: blur(15px) !important;
  /* Güçlü buzlu cam efekti */
  -webkit-backdrop-filter: blur(15px) !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 2. Kartları ve Kutuları Yumuşat */
.gpt-settings-sidebar,
.gpt-settings-content,
.panel-card,
.modal-dialog-content {
  background-color: #1e1e1e !important;
  /* Mat koyu gri */
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  /* İyice yuvarlat */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

/* 3. Butonları İpeksi Yap (Pill Shape) */
button,
.button,
.icon-button {
  border-radius: 999px !important;
  /* Tam yuvarlak */
  font-weight: 600 !important;
  transition: transform 0.1s, background-color 0.2s !important;
}

button:active {
  transform: scale(0.95) !important;
  /* Tıklama hissi */
}

/* 4. Inputları Modernleştir */
input[type="text"],
textarea,
select {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: 12px 16px !important;
}

input:focus,
textarea:focus {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--accent-primary) !important;
  outline: none !important;
}

/* 5. Yazı Tipini İyileştir */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: -0.015em !important;
  /* Harfleri hafifçe sıkıştır (Premium his) */
}




.auth-input-group {
  position: relative;
  margin-bottom: 20px;
}

/* --- PREMIUM MINIMALIST INPUTS --- */
.auth-input {
  width: 100%;
  height: 56px !important;
  padding: 0 20px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 16px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  outline: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box;
}

.auth-input:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
  transform: translateY(-1px);
}

/* Hata durumunda daha pro bir kırmızı */
.auth-input.error-border {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.05) !important;
}

.auth-input:focus {
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.auth-input.error-border {
  border-color: #ef4444;
}

.auth-toggle-password {
  position: absolute;
  right: 15px;
  top: 18px;
  color: #666;
  cursor: pointer;
  z-index: 10;
  font-size: 1rem;
}

.auth-toggle-password:hover {
  color: #fff;
}

.auth-error-text {
  color: #ef4444;
  font-size: 0.8rem;
  margin-top: 5px;
  min-height: 1.2em;
  display: none;
  padding-left: 5px;
  font-weight: 500;
}

/* --- PRO AUTH CARD (FLUTTER/IOS STYLE) --- */
.auth-card {
  background: rgba(20, 20, 20, 0.65) !important;
  /* Biraz daha koyu ve şeffaf */
  backdrop-filter: blur(40px) saturate(150%) !important;
  /* Çok güçlü blur */
  -webkit-backdrop-filter: blur(40px) saturate(150%) !important;

  padding: 40px 30px !important;
  border-radius: 40px !important;
  /* Daha yuvarlak (Squircle) */

  width: 100% !important;
  max-width: 400px !important;

  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.8) !important;
  /* Derin gölge */

  animation: authPopUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  /* Yaylanma efekti */
  position: relative;
  overflow: hidden;
  margin: 20px;
  /* Kenar boşluğu */
}

@keyframes authPopUp {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Input Alanları İçin Modern Stil */
.auth-input {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  height: 54px !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
}

.auth-input:focus {
  background: rgba(0, 0, 0, 0.5) !important;
  border-color: var(--accent-primary) !important;
  transform: scale(1.02);
}

/* Kartın arkasına gizli bir parlama ekleyelim */
.auth-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

@keyframes authFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}



/* 1. THE CONTAINER (Deep Space Black) */
#splashScreenContainer {
  position: fixed;
  inset: 0;
  background-color: #000000;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Apple-style smooth easing for the exit animation */
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

/* 2. BACKGROUND AMBIENCE (Aurora Mesh) */
.splash-aurora {
  position: absolute;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.15), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.1), transparent 50%);
  animation: auroraSpin 20s linear infinite;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
}

@keyframes auroraSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 3. LOGO & BRANDING */
.splash-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.app-icon-frame {
  width: 120px;
  height: 120px;
  background: #000;
  border-radius: 32px;
  /* iOS Squircle shape */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 50px -10px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  animation: iconFloat 6s ease-in-out infinite;
}

/* Logo Shine Effect */
.app-icon-frame::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: rotate(45deg);
  animation: shinePass 4s infinite;
}

.app-icon-img {
  width: 80%;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

.brand-name {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #fff 0%, #a5a5a5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.loading-pill {
  width: 140px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin-top: 30px;
  overflow: hidden;
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

.loading-fill {
  width: 0%;
  height: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transition: width 2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ANIMATIONS */
@keyframes iconFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes shinePass {
  0% {
    transform: translateX(-150%) rotate(45deg);
  }

  100% {
    transform: translateX(150%) rotate(45deg);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* EXIT STATE (Slide Up like iPhone Unlock) */
#splashScreenContainer.launching {
  transform: translateY(-100%);
  /* Slide up out of view */
  border-radius: 0 0 40px 40px;
  /* Rounded bottom corners during exit */
}

/* --- GLOBAL IOS FEEL INNOVATIONS --- */

/* 1. Haptic Touch (Button Press Effect) */
button,
.icon-button,
.tab-button,
.card,
.message {
  transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s, opacity 0.2s !important;
}

button:active,
.icon-button:active,
.tab-button:active {
  transform: scale(0.94) !important;
  /* The "Squish" */
}

/* 2. Premium Glassmorphism Update */
.bg-elevated-transparent,
.bottom-tab-bar,
.app-header,
.cai-chat-header,
.modal-dialog-content {
  /* Daha canlı ve kristalize cam efekti */
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  background-color: rgba(20, 20, 20, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 3. Typography Update (Clean) */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: -0.01em;
}



/* RP Mod Seçici Butonları */
.rp-mode-btn {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.rp-mode-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.rp-mode-btn.active {
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
  border-color: var(--accent-primary);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* LIMITLESS (Janitor Mode) Özel Stili - Kırmızı/Neon */
.rp-mode-btn.limitless-mode {
  border-color: #ff4757;
  color: #ff4757;
  background-color: rgba(255, 71, 87, 0.05);
}

.rp-mode-btn.limitless-mode.active {
  background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
  color: #fff;
  border-color: #ff4757;
  box-shadow: 0 0 10px rgba(255, 71, 87, 0.4);
  animation: pulseLimitless 2s infinite;
}

@keyframes pulseLimitless {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(255, 71, 87, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
  }
}

/* Karakter Kartı Etiketleri (Janitor Style) */
.janitor-tag {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 4px;
  display: inline-block;
}

.janitor-tag.nsfw {
  background-color: rgba(255, 71, 87, 0.15);
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.3);
}

.janitor-tag.sfw {
  background-color: rgba(46, 213, 115, 0.15);
  color: #2ed573;
  border: 1px solid rgba(46, 213, 115, 0.3);
}

.janitor-tag.limitless {
  background-color: rgba(168, 85, 247, 0.15);
  /* Mor */
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.3);
}



/* Neon Code Block Design */
.neon-code-block {
  margin: 15px 0;
  background-color: #0d0d0d;
  border: 1px solid #333;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.05);
  transition: border-color 0.3s ease;
}

.neon-code-block:hover {
  border-color: var(--accent-primary, #00f3ff);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.15);
}

/* Code Header (Language & Copy) */
.neon-code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1a1a1a;
  padding: 6px 12px;
  border-bottom: 1px solid #333;
  font-family: 'Consolas', monospace;
  font-size: 0.8rem;
}

.neon-lang-badge {
  color: var(--accent-primary, #00f3ff);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Copy Button */
.neon-copy-btn {
  background: transparent;
  border: 1px solid #444;
  color: #aaa;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.neon-copy-btn:hover {
  background: var(--accent-primary, #00f3ff);
  color: #000;
  border-color: var(--accent-primary, #00f3ff);
  font-weight: bold;
}

.neon-copy-btn:active {
  transform: scale(0.95);
}

/* Override Prism styling for cleaner look */
pre[class*="language-"] {
  margin: 0 !important;
  padding: 15px !important;
  background: transparent !important;
  text-shadow: none !important;
}

code[class*="language-"],
pre[class*="language-"] {
  font-family: 'Fira Code', 'Consolas', monospace !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}



/* === C.AI STYLE ELITE INTRO (V5) === */
#splashScreenContainer {
  position: fixed;
  inset: 0;
  background-color: #000000;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Arka Plan Aurora Efekti */
#splashScreenContainer::before {
  content: '';
  position: absolute;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
  animation: auroraPulse 6s ease-in-out infinite alternate;
}

@keyframes auroraPulse {
  from {
    transform: scale(1) translate(-5%, -5%);
    opacity: 0.3;
  }

  to {
    transform: scale(1.2) translate(5%, 5%);
    opacity: 0.6;
  }
}

.splash-content-v5 {
  position: relative;
  z-index: 10;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.splash-hero-image {
  width: 120px;
  height: 120px;
  border-radius: 30px;
  object-fit: cover;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
  animation: splashEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) both, splashPulse 3s ease-in-out infinite alternate;
}

@keyframes splashEntrance {
  from {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes splashPulse {
  from {
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
  }

  to {
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.4);
  }
}

.splash-loader-v5 {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  animation: fadeIn_v10 0.5s ease forwards 0.8s;
}

.v5-bar-track {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
}

.v5-bar-fill {
  width: 0%;
  height: 100%;
  background: #ffffff;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  transition: width 0.4s ease;
}

.v5-status-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 2px;
}

#splashPercentText {
  color: #ffffff;
}

/* Çıkış Animasyonu (C.AI Style Zoom Out) */
#splashScreenContainer.launching {
  opacity: 0;
  transform: scale(1.1);
  filter: blur(20px);
  pointer-events: none;
}

/* --- MODERN CHAT INPUT & FOOTER REDESIGN (FIXED) --- */

/* 1. Ana Kapsayıcı (Footer) - Görünmez ve Dokunulmaz Yap */
.Pai-ultimate-footer-centered {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  background: linear-gradient(to top, var(--bg-main) 80%, transparent) !important;
  pointer-events: none !important;
  /* Tıklamaları arkadaki mesaja geçir */
  z-index: 2000 !important;
  /* Katmanı düşürdük */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* 2. Giriş Kutusu (Premium Floating Glass Pill) */
.chat-input-wrapper.gemini-style-v3 {
  pointer-events: auto !important;
  width: 96% !important;
  max-width: 650px !important;
  min-height: 54px !important;
  /* Dokunmatik alan büyütüldü */
  margin: 0 auto 5px auto !important;

  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  padding: 6px 8px 6px 16px !important;

  /* Görünüm - İleri Seviye Cam Efekti */
  background-color: rgba(15, 15, 18, 0.85) !important;
  /* Daha tok bir siyah */
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
  /* Üstten ışık vurma efekti */
  border-radius: 30px !important;

  backdrop-filter: blur(30px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%) !important;

  /* Derin ve yumuşak Apple gölgesi */
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
}

.chat-input-wrapper.gemini-style-v3:focus-within {
  transform: translateY(-3px) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 15px 50px -5px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(var(--accent-primary-rgb), 0.3) !important;
}

/* 3. Metin Alanı */
#userMessageInput {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  padding: 10px 0 !important;
  max-height: 120px !important;
  min-height: 24px !important;
  outline: none !important;
}

#userMessageInput::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* 4. Butonlar (Sol ve Sağ) */
#chatInputProfileBtn,
#chatInputExpandToggleBtn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.2s !important;
}

#chatInputProfileBtn img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Sağ Kontroller */
.right-controls {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding-bottom: 2px !important;
  /* Hizalama */
}

/* G�nder Butonu (Parlak ve Yuvarlak) */
.right-controls .send-btn,
.right-controls .continue-btn-input {
  position: absolute !important;
  /* Wrapper i�inde �st �ste binmeleri i�in */
  top: 0 !important;
  left: 0 !important;
  width: 42px !important;
  height: 42px !important;
  background: #000000 !important;
  /* Siyah yap�ld� */
  color: #ffffff !important;
  /* �kon rengi beyaz */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* KES�N G�ZLEME (FLEX'� EZMES� ���N) */
.right-controls .send-btn.hidden,
.right-controls .continue-btn-input.hidden {
  opacity: 0 !important;
  transform: scale(0.5) !important;
  pointer-events: none !important;
  display: none !important;
  z-index: -1 !important;
}

.right-controls .send-btn:active {
  transform: scale(0.9) !important;
}

/* Header'daki profil ve diğer yuvarlak butonların fixi */
.header-profile-btn,
.icon-button.new-style-button {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.right-controls .send-btn:active {
  transform: scale(0.9) !important;
}

/* 5. Alt Yasal Metin (Çok ince ve silik) */
.cai-disclaimer-text,
.ai-policy-disclaimer {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.3) !important;
  margin-top: 5px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  /* Okunabilirlik */
  background: transparent !important;
  /* Arka planı kaldır */
  border: none !important;
}

/* LIGHT THEME UYUMU */
body.light-theme .chat-input-wrapper.gemini-style-v3 {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme #userMessageInput {
  color: #000 !important;
}

body.light-theme #userMessageInput::placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}

/* --- LIGHT THEME BUTTONS (Soft & Clean) --- */

/* Gönder Butonu: Siyah yerine Tema Rengi (Mavi) */
body.light-theme .right-controls .send-btn,
body.light-theme .right-controls .continue-btn-input {
  background-color: var(--accent-primary) !important;
  /* Mavi/Tema rengi */
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
  /* Mavi gölge */
}

/* RP (*) Butonu */
body.light-theme #rpFormatBtn {
  color: var(--accent-primary) !important;
}

/* Sol Profil Butonu Çerçevesi */
body.light-theme #chatInputProfileBtn img {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Input Genişleme (+) Butonu */
body.light-theme #chatInputExpandToggleBtn {
  color: #6B7280 !important;
  /* Koyu gri */
}

body.light-theme #chatInputExpandToggleBtn:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* --- ELITE ACTION BUTTONS --- */

/* Ana Giriş Butonu */
#auth-form-login button[onclick*="login()"],
#auth-form-register button[onclick*="register()"] {
  height: 56px !important;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: none !important;
  border-radius: 16px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3) !important;
  transition: all 0.3s ease !important;
  margin-top: 10px !important;
}

#auth-form-login button[onclick*="login()"]:active,
#auth-form-register button[onclick*="register()"]:active {
  transform: scale(0.97) !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2) !important;
}

/* Google Butonu */
button[onclick*="loginWithGoogle()"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  height: 52px !important;
  border-radius: 16px !important;
  font-weight: 600 !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.2s ease !important;
}

button[onclick*="loginWithGoogle()"]:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Block Source: Inline */
.plan-toggle-btn {
  flex: 1;
  background: #222;
  border: 1px solid #333;
  color: #888;
  padding: 10px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}

.plan-toggle-btn.active {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.plan-grid-container {
  display: grid;
  gap: 15px;
}

.plan-card-v4 {
  background: #111;
  border: 1px solid #333;
  border-radius: 20px;
  padding: 20px;
  position: relative;
  cursor: pointer;
  transition: 0.2s;
}

.plan-card-v4.selected {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.plan-card-v4.ultra-glow.selected {
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.plan-price {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  margin: 10px 0;
}

.plan-price span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #888;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: #ccc;
}

.plan-features li {
  margin-bottom: 5px;
}

.plan-features i {
  color: #4ade80;
  margin-right: 8px;
}

.plan-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.6rem;
  background: #333;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
}

.plan-tag.best {
  background: #ffd700;
  color: #000;
}

/* ==========================================================================
   ?? PHAURA AI - SENIOR MOBILE ARCHITECT PATCH (V4.2)
   Fixes: Viewport Resize, Hidden Buttons, Performance, Safe Areas
   ========================================================================== */

/* 1. VIEWPORT & LAYOUT ENGINE (The Core Fix) */
/* Force the app to take exact viewport height, ignoring address bar expansion */
html,
body {
  height: 100dvh !important;
  width: 100vw !important;
  overflow: hidden !important;
  /* No global scroll */
  position: fixed !important;
  /* Prevent bounce effects */
  inset: 0 !important;
}

.app-container {
  height: 100dvh !important;
  width: 100vw !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
}

.main-content {
  flex: 1 !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* 2. CHAT AREA (Flexible Scrolling) */
/* This area grows to fill space but respects the input area at bottom */
.chat-container {
  flex: 1 !important;
  /* Grow to fill available space */
  height: auto !important;
  overflow-y: auto !important;
  /* Internal scroll only */
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;

  /* Spacing */
  padding: 16px 16px 0 16px !important;
  /* Remove bottom padding, handled by spacer */
  gap: 16px !important;

  /* Native Momentum Scrolling */
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;

  /* Fix for bottom content being cut off */
  padding-bottom: 20px !important;
}

/* 3. INPUT AREA (Sticky Bottom - The Real Fix) */
/* No longer absolute positioning! Part of the Flex column. */
.input-area-wrapper {
  flex-shrink: 0 !important;
  /* Never shrink */
  position: relative !important;
  /* Normal flow */
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  z-index: 50 !important;

  background-color: var(--bg-app) !important;
  /* Opaque background prevents ghosting */
  border-top: 1px solid var(--border-subtle) !important;

  /* Padding for aesthetics + Safe Area */
  padding: 12px 16px !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;

  /* Shadow for depth */
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* 4. MOBILE SPECIFIC OVERRIDES (Max-Width: 768px) */
@media (max-width: 768px) {

  /* Hide Sidebar by default */
  .sidebar {
    position: fixed !important;
    z-index: 2000 !important;
    height: 100dvh !important;
    width: 80% !important;
    max-width: 300px !important;
    background-color: var(--bg-sidebar) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 10px 0 50px rgba(0, 0, 0, 0.5) !important;
  }

  .sidebar.active {
    transform: translateX(0) !important;
  }

  /* Overlay when sidebar is open */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1999;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .sidebar.active+.sidebar-overlay {
    display: block;
    opacity: 1;
  }

  /* Compact Chat Bubbles */
  .message-content {
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    max-width: 85% !important;
  }

  /* Optimized Input Area */
  .input-area-wrapper {
    padding: 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }

  /* Performance: Disable heavy blurs on mobile */
  .glass-effect,
  .modal-content,
  .toast-notification {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--bg-card) !important;
  }

  /* Hide Scrollbars but keep functionality */
  .chat-container::-webkit-scrollbar {
    width: 4px;
  }

  .chat-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

/* 5. ANDROID NATIVE SPECIFIC (Injected Class) */
body.native-android {
  /* Remove status bar padding if native handles it */
  padding-top: 0 !important;

  /* Disable selection explicitly */
  user-select: none !important;

  /* Remove any tap highlights */
  -webkit-tap-highlight-color: transparent !important;
}

body.native-android .input-area-wrapper {
  /* Android native keyboard handling is different, adjust padding */
  padding-bottom: 12px !important;
}


/* --- SURGICAL UI PATCH (V4.5) - Fixes Overlaps, Visibility & Layout --- */

/* 1. Header Overlap Fix */
.app-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 15px !important;
  overflow: visible !important; /* D�ZELTME: Dropdown'lar�n g�r�nmesi i�in */
}

.app-header .header-left {
  min-width: 0 !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

#appTitle {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

#headerSpecialLogo {
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

.app-header .header-right {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* 2. Personalities Header Overlap Fix */
.personalities-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.header-actions-group {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: auto !important;
  flex: 1 1 auto !important;
}

.search-input-wrapper.new-style-search {
  flex: 1 1 200px !important;
  max-width: none !important;
  min-width: 150px !important;
}

.search-input-wrapper.new-style-search i {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

/* 3. Personality Card Overlap Fix (Row Style) */
/* Assuming Row Style based on screenshot analysis of Date/Menu overlap */
.personality-card-item {
  padding-right: 50px !important;
  overflow: hidden !important;
}

.card-date-label {
  position: absolute !important;
  top: 10px !important;
  right: 50px !important;
  font-size: 0.65rem !important;
  color: var(--text-tertiary) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.card-menu-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 8px !important;
  width: 36px !important;
  height: 36px !important;
  background: var(--bg-hover) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}

/* 4. Category Filter Buttons Fix */
.category-filter-container {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  overflow-x: auto !important;
  padding-bottom: 10px !important;
}

.cat-filter-btn {
  flex: 1 1 0 !important;
  min-width: 80px !important;
  padding: 8px 4px !important;
  font-size: 0.8rem !important;
  color: var(--text-primary) !important;
  text-align: center !important;
  justify-content: center !important;
}

/* 5. Fix for bottom elements covered by taskbar */
.bottom-tab-bar {
  padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  height: auto !important;
  min-height: 60px !important;
}

/* === 🎯 CHAT INPUT PERFECT CENTER FIX === */
.chat-input-wrapper.gemini-style-v3 {
  width: 94% !important;
  max-width: 700px !important;
  background: rgba(15, 15, 18, 0.9) !important;
  backdrop-filter: blur(35px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(35px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 32px !important;
  padding: 0 8px 0 18px !important;
  /* Dikey padding sıfırlandı */
  display: flex !important;
  align-items: center !important;
  /* Kesin ortalama */
  gap: 10px !important;
  box-sizing: border-box !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
  pointer-events: auto !important;
  height: 56px !important;
  /* Tek satır yüksekliği sabitlendi */
  min-height: 56px !important;
}

#userMessageInput {
  flex: 1 !important;
  height: 30px !important;
  /* Alan genişletildi */
  min-height: 30px !important;
  max-height: 160px !important;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 1rem !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 30px !important;
  /* Yükseklik ile eşitlenerek baseline kayması önlendi */
  outline: none !important;
  resize: none !important;
  display: block !important;
  align-self: center !important;
}

/* Metin çok satıra çıkınca wrapper'ın height'ını auto yap ve hizalamayı flex-end'e çek */
.chat-input-wrapper.gemini-style-v3:has(#userMessageInput:not([style*="height: 30px"])) {
  height: auto !important;
  min-height: 56px !important;
  align-items: flex-end !important;
  padding-bottom: 8px !important;
  padding-top: 8px !important;
}

/* === MODERN AI STREAM CURSOR === */
.ai-cursor {
  display: inline-block;
  color: var(--accent-primary);
  margin-left: 4px;
  animation: cursorBlink 0.8s infinite;
}

@keyframes cursorBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Mesaj bittiğinde JS imleci silecek ama garanti olması için */
.message:not(.streaming) .ai-cursor {
  display: none !important;
}

/* === C.AI STYLE SOHBET AYARLARI (V5) === */
#chatSpecificSettingsModal .modal-dialog-content {
  background-color: #09090b !important;
  /* C.AI arka plan rengi */
  color: #fff;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

.cai-settings-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.cai-set-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #27272a;
  background: #09090b;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cai-set-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.cai-set-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 5px;
}

.cai-set-profile {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 24px 20px;
  border-bottom: 1px solid #27272a;
}

.cai-set-profile img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.cai-set-profile h3 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
}

.cai-set-profile p {
  margin: 0;
  font-size: 0.8rem;
  color: #a1a1aa;
}

.cai-set-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #000;
}

.cai-set-label {
  font-size: 0.75rem;
  color: #71717a;
  font-weight: 700;
  margin-left: 10px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cai-set-section {
  background: #18181b;
  border-radius: 16px;
  margin-bottom: 24px;
  overflow: hidden;
}

.cai-set-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #27272a;
  cursor: pointer;
  transition: background 0.2s;
}

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

.cai-set-row:not(.no-click):hover {
  background: #27272a;
}

.cai-set-row.sub-row {
  padding: 12px 16px 12px 40px;
  /* İçerideki öğeleri sağa kaydır */
}

.cai-set-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 500;
}

.cai-set-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a1a1aa;
  font-size: 0.9rem;
}

.cai-chevron {
  color: #52525b;
  font-size: 0.8rem;
}

.text-danger {
  color: #ef4444 !important;
  justify-content: center;
  font-weight: 600;
}

/* C.AI Style Segmented Control (Hap Butonlar) */
.cai-segmented {
  display: flex;
  background: #09090b;
  border-radius: 10px;
  padding: 4px;
  width: 100%;
}

.cai-seg-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #a1a1aa;
  padding: 8px 0;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.cai-seg-btn.active {
  background: #27272a;
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Custom Range Slider */
.cai-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: #27272a;
  border-radius: 4px;
  outline: none;
}

.cai-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

/* iOS Style Switch */
.cai-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

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

.cai-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #3f3f46;
  transition: .3s;
  border-radius: 24px;
}

.cai-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.cai-switch input:checked+.cai-slider {
  background-color: #3b82f6;
}

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

#chatSection {
  position: fixed !important;
  inset: 0 !important;
  height: 100% !important;
  height: 100dvh !important;
  width: 100% !important;
  width: 100vw !important;
  overflow: hidden !important;
  transform: translate3d(0, 0, 0);
  background-color: var(--bg-main);
  z-index: 8000;
}

#chatHistory {
  height: calc(100dvh - 140px);
  /* Header + Footer pay� */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#splashScreenContainer {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.splash-minimal {
  width: 200px;
  text-align: center;
}

.splash-avatar-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto 30px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

.splash-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.splash-loader-bar {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: #fff;
  transition: width 0.3s ease;
}