/* ═══════════════════════════════════════════════════════════════════
   GlomaxGPT — Design System v3
   ChatGPT / Gemini / Claude kalitesinde premium, minimal, sade UI
   
   YÜKLEME SIRASI: index.php'de chatgpt-ui.css'den SONRA yüklenir.
   Tüm mevcut CSS dosyalarını override eder — hiçbirini silmez.
   Backend / PHP / API'ye dokunulmaz.
   
   Bölümler:
     0.  Flash önleme & font
     1.  CSS Token sistemi (dark / light)
     2.  Z-index hiyerarÅŸisi
     3.  Global reset & tipografi
     4.  Sidebar sistemi (260px / 70px, 300ms)
     5.  Mobile header
     6.  Topbar
     7.  Model seçici dropdown
     8.  Chat layout
     9.  Mesaj baloncukları
    10.  Input alanı
    11.  Speed picker & dropdown fix
    12.  Buton sistemi
    13.  Kart tasarımı
    14.  Modal sistemi
    15.  Animasyonlar
    16.  Scrollbar
    17.  Footer
    18.  Mobil responsive
    19.  Tablet (768px+)
    20.  Yardımcı sınıflar
═══════════════════════════════════════════════════════════════════ */

/* ── 0. FLASH ÖNLEME & FONT ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

html {
  font-family: 'Inter', Arial, sans-serif !important;
}

/* ── 1. CSS TOKEN SİSTEMİ ───────────────────────────────────────── */

/* LIGHT TEMA */
[data-theme="light"],
html:not([data-theme="dark"]) {
  /* Ana arka planlar */
  --v3-bg:            #FFFFFF;
  --v3-sidebar-bg:    #F2F2F2;
  --v3-surface:       #F5F5F5;
  --v3-surface2:      #EBEBEB;
  --v3-card:          #FFFFFF;
  --v3-input-bg:      #F7F7F7;

  /* Kenarlıklar */
  --v3-border:        #E2E2E2;
  --v3-border2:       #C0C0C0;

  /* Metin */
  --v3-text:          #050816;
  --v3-text2:         #4A4A4A;
  --v3-text3:         #7A7A7A;
  --v3-text4:         #AAAAAA;

  /* Butonlar */
  --v3-btn-bg:        #222222;
  --v3-btn-hover:     #000000;
  --v3-btn-text:      #FFFFFF;
  --v3-btn-disabled:  #CCCCCC;

  /* Kullanıcı mesaj balonu */
  --v3-user-bubble:   #F0F0F0;

  /* Accent */
  --v3-accent:        #222222;
  --v3-accent2:       #555555;

  /* Gölgeler */
  --v3-shadow-sm:     0 1px 4px rgba(0,0,0,0.06);
  --v3-shadow-md:     0 4px 20px rgba(0,0,0,0.08);
  --v3-shadow-lg:     0 8px 32px rgba(0,0,0,0.10);
  --v3-input-shadow:  0 4px 20px rgba(0,0,0,0.08);

  /* Sidebar hover/active */
  --v3-sidebar-hover:  #EBEBEB;
  --v3-sidebar-active: #E0E0E0;

  /* Hover genel */
  --v3-hover:         rgba(0,0,0,0.04);
}

/* DARK TEMA */
[data-theme="dark"] {
  /* Ana arka planlar */
  --v3-bg:            #050816;
  --v3-sidebar-bg:    #0b142d;
  --v3-surface:       #2A2A2A;
  --v3-surface2:      #333333;
  --v3-card:          #2A2A2A;
  --v3-input-bg:      #2E2E2E;

  /* Kenarlıklar */
  --v3-border:        rgba(255,255,255,.10);
  --v3-border2:       rgba(255,255,255,.18);

  /* Metin */
  --v3-text:          #FFFFFF;
  --v3-text2:         #A8A8A8;
  --v3-text3:         #707070;
  --v3-text4:         #555555;

  /* Butonlar */
  --v3-btn-bg:        #E8E8E8;
  --v3-btn-hover:     #FFFFFF;
  --v3-btn-text:      #050816;
  --v3-btn-disabled:  #404040;

  /* Kullanıcı mesaj balonu */
  --v3-user-bubble:   rgba(255,255,255,.08);

  /* Accent */
  --v3-accent:        #E8E8E8;
  --v3-accent2:       #AAAAAA;

  /* Gölgeler */
  --v3-shadow-sm:     0 1px 4px rgba(0,0,0,0.4);
  --v3-shadow-md:     0 4px 20px rgba(0,0,0,0.5);
  --v3-shadow-lg:     0 8px 32px rgba(0,0,0,0.6);
  --v3-input-shadow:  0 4px 20px rgba(0,0,0,0.3);

  /* Sidebar hover/active */
  --v3-sidebar-hover:  rgba(255,255,255,.07);
  --v3-sidebar-active: rgba(255,255,255,.12);

  /* Hover genel */
  --v3-hover:         rgba(255,255,255,0.06);
}

/* ── 2. Z-INDEX HİYERARŞİSİ ─────────────────────────────────────── */
/*
  Sidebar overlay:   100
  Sidebar:           200
  Mobile header:     300
  Topbar:            400
  Dropdown/Popup:    9999
  Modal overlay:     99990
  Modal box:         99999
*/

/* ── 3. GLOBAL RESET & TİPOGRAFİ ───────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  font-family: 'Inter', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--v3-bg) !important;
  color: var(--v3-text) !important;
  margin: 0;
  padding: 0;
}

/* Başlıklar */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', Arial, sans-serif !important;
  font-weight: 600;
  color: var(--v3-text) !important;
}

/* Linkler */
a {
  color: inherit;
  text-decoration: none;
}

/* ── 4. SIDEBAR SİSTEMİ ─────────────────────────────────────────── */

/* Sidebar overlay (mobil) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 150 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Ana sidebar */
.sidebar {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  /* overflow: visible — popup'ların sidebar dışına çıkabilmesi için */
  overflow-x: visible !important;
  overflow-y: visible !important;
  background: var(--v3-sidebar-bg) !important;
  border-right: 1px solid var(--v3-border) !important;
  transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, transform 0.3s ease !important;
  z-index: 200 !important;
}

/* Daraltılmış sidebar */
.sidebar.collapsed {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
}

/* Sidebar üst bölge */
.sidebar-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 14px 8px !important;
  flex-shrink: 0 !important;
  min-height: 56px !important;
}

/* Logo */
.sidebar-logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.sidebar-logo-text {
  font-size: 1.2rem !important;
  color: var(--v3-text) !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: opacity 0.2s ease !important;
}

.sidebar.collapsed .sidebar-logo-text {
  opacity: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
}

/* Sidebar üst sağ butonlar */
.sidebar-top-right {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}

/* Sidebar icon butonlar */
.sidebar-icon-btn,
.sb-new-chat-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--v3-text3) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

.sidebar-icon-btn:hover,
.sb-new-chat-btn:hover {
  background: var(--v3-sidebar-hover) !important;
  color: var(--v3-text) !important;
}

/* Yeni sohbet tam buton */
.sb-new-chat-wrap {
  padding: 4px 10px 8px !important;
  flex-shrink: 0 !important;
}

.sb-new-chat-full {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid var(--v3-border) !important;
  color: var(--v3-text2) !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.sb-new-chat-full:hover {
  background: var(--v3-sidebar-hover) !important;
  border-color: var(--v3-border2) !important;
  color: var(--v3-text) !important;
}

.sb-new-chat-full svg {
  flex-shrink: 0 !important;
}

.sb-new-chat-full span {
  transition: opacity 0.2s ease, width 0.3s ease !important;
  overflow: hidden !important;
}

.sidebar.collapsed .sb-new-chat-full {
  justify-content: center !important;
  padding: 9px !important;
  border-color: transparent !important;
}

.sidebar.collapsed .sb-new-chat-full span {
  opacity: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
}

/* Sidebar nav — flex: 0 0 auto ile sadece içeriği kadar yer kaplar, boşluk oluşmaz */
.sidebar-nav {
  flex: 0 0 auto !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  padding: 4px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--v3-border);
  border-radius: 2px;
}
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

/* Nav item */
.sidebar-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  border-radius: 10px !important;
  color: var(--v3-text2) !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  text-align: left !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  position: relative !important;
}

.sidebar-nav-item:hover {
  background: var(--v3-sidebar-hover) !important;
  color: var(--v3-text) !important;
}

.sidebar-nav-item.active {
  background: var(--v3-sidebar-active) !important;
  color: var(--v3-text) !important;
  font-weight: 500 !important;
}

.sidebar-nav-item svg {
  flex-shrink: 0 !important;
  opacity: 0.7 !important;
  transition: opacity 0.18s ease !important;
}

.sidebar-nav-item:hover svg,
.sidebar-nav-item.active svg {
  opacity: 1 !important;
}

.sidebar-nav-item > span:not(.sb-badge-beta) {
  transition: opacity 0.2s ease !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sidebar.collapsed .sidebar-nav-item > span:not(.sb-badge-beta) {
  opacity: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
}

.sidebar.collapsed .sidebar-nav-item {
  justify-content: center !important;
  padding: 9px !important;
}

/* Beta badge */
.sb-badge-beta {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: var(--v3-accent) !important;
  color: #fff !important;
  letter-spacing: 0.02em !important;
  flex-shrink: 0 !important;
  transition: opacity 0.2s ease !important;
}

.sidebar.collapsed .sb-badge-beta {
  opacity: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Sidebar section label */
.sidebar-section-label {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--v3-text4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 12px 10px 4px !important;
  transition: opacity 0.2s ease !important;
}

.sidebar.collapsed .sidebar-section-label {
  opacity: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Sidebar divider */
.sidebar-divider,
.sb-divider {
  height: 1px !important;
  background: var(--v3-border) !important;
  margin: 6px 10px !important;
  flex-shrink: 0 !important;
}

/* Sidebar alt bölge */
.sidebar-bottom {
  flex-shrink: 0 !important;
  padding: 8px !important;
  border-top: 1px solid var(--v3-border) !important;
}

/* Kullanıcı profil alanı (sidebar alt) */
.sidebar-user,
.sb-user-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: background 0.18s ease !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

.sidebar-user:hover,
.sb-user-btn:hover {
  background: var(--v3-sidebar-hover) !important;
}

.sidebar-user-avatar,
.sb-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--v3-surface2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--v3-text) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.sidebar-user-avatar img,
.sb-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.sidebar-user-info {
  flex: 1 !important;
  min-width: 0 !important;
  transition: opacity 0.2s ease !important;
}

.sidebar.collapsed .sidebar-user-info {
  opacity: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
}

.sidebar-user-name {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--v3-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sidebar-user-plan {
  font-size: 0.72rem !important;
  color: var(--v3-text3) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Sidebar expand butonu (collapsed modda) */
.sidebar-expand-btn {
  display: none !important;
  width: 100% !important;
  padding: 14px 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  color: var(--v3-text3) !important;
  transition: color 0.18s ease !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.sidebar.collapsed .sidebar-expand-btn {
  display: flex !important;
}

.sidebar-expand-btn:hover {
  color: var(--v3-text) !important;
}

/* Sohbet listesi */
.sidebar-conv-list,
.sb-conv-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.sidebar-conv-group-label,
.sb-conv-date-label {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--v3-text4) !important;
  padding: 8px 10px 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: opacity 0.2s ease !important;
}

.sidebar.collapsed .sidebar-conv-group-label,
.sidebar.collapsed .sb-conv-date-label {
  opacity: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.sidebar-conv-item,
.sb-conv-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: var(--v3-text2) !important;
  font-size: 0.82rem !important;
  text-decoration: none !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  position: relative !important;
}

.sidebar-conv-item:hover,
.sb-conv-item:hover {
  background: var(--v3-sidebar-hover) !important;
  color: var(--v3-text) !important;
}

.sidebar-conv-item.active,
.sb-conv-item.active {
  background: var(--v3-sidebar-active) !important;
  color: var(--v3-text) !important;
}

/* Kullanım çubuğu */
.sidebar-usage,
.sb-usage {
  padding: 8px 10px !important;
  transition: opacity 0.2s ease !important;
}

.sidebar.collapsed .sidebar-usage,
.sidebar.collapsed .sb-usage {
  opacity: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.sidebar-usage-bar,
.sb-usage-bar {
  height: 3px !important;
  background: var(--v3-border) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}

.sidebar-usage-fill,
.sb-usage-fill {
  height: 100% !important;
  background: var(--v3-accent) !important;
  border-radius: 2px !important;
  transition: width 0.4s ease !important;
}

/* "Daha fazla" popup */
.sb-more-wrap {
  position: relative !important;
}

.sb-more-popup {
  /* position ve left/top JS tarafından yönetilir (sbToggleMore fonksiyonu) */
  position: fixed !important;
  width: 220px !important;
  background: varx  (--bg)) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--v3-shadow-lg) !important;
  z-index: 9999 !important;
  padding: 6px !important;
  animation: v3FadeIn 0.18s ease both !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
}

.sb-more-section-label {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: var(--v3-text4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 6px 10px 4px !important;
}

.sb-more-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  border-radius: 8px !important;
  color: var(--v3-text2) !important;
  font-size: 0.83rem !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  text-align: left !important;
}

.sb-more-item:hover,
.sb-more-item.active {
  background: var(--v3-sidebar-hover) !important;
  color: var(--v3-text) !important;
}

/* ── 5. MOBİL HEADER ────────────────────────────────────────────── */
.mobile-page-header {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 52px !important;
  background: var(--v3-bg) !important;
  border-bottom: 1px solid var(--v3-border) !important;
  z-index: 300 !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 12px !important;
  gap: 8px !important;
}

.mph-left,
.mph-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.mph-center {
  flex: 1 !important;
  text-align: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.mobile-hamburger,
.mobile-back-btn,
.mobile-header-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--v3-text2) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  text-decoration: none !important;
}

.mobile-hamburger:hover,
.mobile-back-btn:hover,
.mobile-header-btn:hover {
  background: var(--v3-hover) !important;
  color: var(--v3-text) !important;
}

.mobile-logo-text {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: var(--v3-text) !important;
  letter-spacing: 0.04em !important;
}

.mobile-header-login-btn,
.mobile-header-register-btn {
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

.mobile-header-login-btn {
  color: var(--v3-text2) !important;
  background: transparent !important;
}

.mobile-header-register-btn {
  color: var(--v3-btn-text) !important;
  background: var(--v3-btn-bg) !important;
}

.mobile-header-register-btn:hover {
  background: var(--v3-btn-hover) !important;
}

/* ── 6. TOPBAR ──────────────────────────────────────────────────── */
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 400 !important;
  height: 56px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  
  box-shadow: none !important;
  transition: background 0.25s ease, border-color 0.25s ease !important;
}

[data-theme="light"] .topbar {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="dark"] .topbar {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── 7. MODEL SEÇİCİ DROPDOWN ──────────────────────────────────── */
.tb-model-selector {
  position: relative !important;
}

.tb-model-btn {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  border: 1px solid var(--v3-border) !important;
  background: transparent !important;
  color: var(--v3-text) !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.18s ease, border-color 0.18s ease !important;
  font-family: 'Inter', Arial, sans-serif !important;
  white-space: nowrap !important;
}

.tb-model-btn:hover {
  background: var(--v3-hover) !important;
  border-color: var(--v3-border2) !important;
}

.tb-model-chevron {
  transition: transform 0.2s ease !important;
  opacity: 0.6 !important;
}

.tb-model-btn[aria-expanded="true"] .tb-model-chevron {
  transform: rotate(180deg) !important;
}

.tb-model-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  min-width: 280px !important;
  max-width: 340px !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  background: var(--v3-card) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--v3-shadow-lg) !important;
  z-index: 9999 !important;
  padding: 6px !important;
  animation: v3FadeIn 0.18s ease both !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--v3-border) transparent !important;
}

.tb-model-menu::-webkit-scrollbar { width: 4px; }
.tb-model-menu::-webkit-scrollbar-thumb {
  background: var(--v3-border);
  border-radius: 2px;
}

.tb-model-menu-header {
  padding: 8px 10px 6px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--v3-text4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.tb-model-group-label {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: var(--v3-text4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 8px 10px 4px !important;
}

.tb-model-option {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 9px 10px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--v3-text2) !important;
  font-size: 0.83rem !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: left !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

.tb-model-option:hover {
  background: var(--v3-hover) !important;
  color: var(--v3-text) !important;
}

.tb-model-option.active {
  background: var(--v3-sidebar-active) !important;
  color: var(--v3-text) !important;
}

.tb-model-option-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.tb-model-option-name {
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tb-model-option-ctx {
  font-size: 0.7rem !important;
  color: var(--v3-text4) !important;
}

.tb-model-option-badge {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: var(--v3-accent) !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}

/* Topbar saÄŸ butonlar */
.topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.btn-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--v3-text3) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  text-decoration: none !important;
  position: relative !important;
}

.btn-icon:hover {
  background: var(--v3-hover) !important;
  color: var(--v3-text) !important;
}

/* Topbar avatar */
.tb-avatar,
.topbar-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--v3-surface2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--v3-text) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  border: none !important;
  transition: opacity 0.18s ease !important;
}

.tb-avatar:hover,
.topbar-avatar:hover {
  opacity: 0.85 !important;
}

.tb-avatar img,
.topbar-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Bildirim badge */
.notif-badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  border: 2px solid var(--v3-bg) !important;
}

/* ── 8. CHAT LAYOUT ─────────────────────────────────────────────── */
.chat-main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: var(--v3-bg) !important;
  position: relative !important;
}

.messages-container,
#messages.messages-container {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth !important;
  padding: 0px 0px 0px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-height: 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--v3-border) transparent !important;
}

.messages-container::-webkit-scrollbar { width: 5px; }
.messages-container::-webkit-scrollbar-thumb {
  background: var(--v3-border);
  border-radius: 3px;
}
.messages-container::-webkit-scrollbar-track { background: transparent; }

/* Mesajlar max-width ile ortala */
.messages-container > .message,
.messages-container > .message-wrapper {
  flex-shrink: 0 !important;
  max-width: 768px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Welcome screen */
.welcome-screen {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  padding: 0px 0px 0px !important;
  text-align: center !important;
  animation: v3FadeIn 0.35s ease both !important;
  min-height: 0 !important;
  max-width: 100%;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.welcome-title,
#welcome-greeting {
  font-size: clamp(1.5rem, 4vw, 2rem) !important;
  font-weight: 700 !important;
  color: var(--v3-text) !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.02em !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--v3-text) !important;
  background-clip: unset !important;
  animation: none !important;
}

.welcome-subtitle {
  font-size: 0.95rem !important;
  color: var(--v3-text3) !important;
  line-height: 1.6 !important;
  margin: 0 0 32px !important;
  max-width: 480px !important;
}

/* Öneri kartları */
.suggestion-pills {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

.suggestion-chip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  background: var(--v3-surface) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 12px !important;
  font-size: 0.83rem !important;
  font-weight: 500 !important;
  color: var(--v3-text2) !important;
  cursor: pointer !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  text-align: left !important;
  line-height: 1.4 !important;
  font-family: 'Inter', Arial, sans-serif !important;
  flex-direction: row !important;
}

.suggestion-chip:hover {
  background: var(--v3-surface2) !important;
  border-color: var(--v3-border2) !important;
  color: var(--v3-text) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--v3-shadow-md) !important;
}

/* ── 9. MESAJ BALONCULARI ───────────────────────────────────────── */
.message.user,
.message.assistant {
  display: flex !important;
  width: 100% !important;
  padding: 4px 0 !important;
  box-sizing: border-box !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  animation: v3MsgIn 0.22s ease both !important;
}

/* Kullanıcı mesajı — sağa hizalı */
.message.user {
  justify-content: flex-end !important;
}

.message.user .message-inner,
.message.user .msg-content {
  background: #32281900 !important;
  border-radius: 18px 18px 4px 18px !important;
  padding: 12px 16px !important;
  max-width: 100% !important;
  color: var(--v3-text) !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  word-break: break-word !important;
}

/* AI mesajı — sola hizalı, şeffaf */
.message.assistant {
  justify-content: flex-start !important;
}

.message.assistant .message-inner,
.message.assistant .msg-content {
  background: transparent !important;
  padding: 4px 0 !important;
  max-width: 100% !important;
  color: var(--v3-text) !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  word-break: break-word !important;
}

/* Avatar */
.message-avatar,
.msg-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  overflow: hidden !important;
}

/* Mesaj aksiyonları (beğen, kopyala vb.) */
.message-actions,
.msg-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  opacity: 0 !important;
  transition: opacity 0.18s ease !important;
  margin-top: 4px !important;
}

.message:hover .message-actions,
.message:hover .msg-actions {
  opacity: 1 !important;
}

.msg-action-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--v3-text4) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.msg-action-btn:hover {
  background: var(--v3-hover) !important;
  color: var(--v3-text2) !important;
}

/* ── 10. INPUT ALANI ────────────────────────────────────────────── */
.input-wrapper {
  flex-shrink: 0 !important;
  width: 100% !important;
  padding: 10px 16px 16px !important;
  box-sizing: border-box !important;
  background: var(--v3-bg) !important;
  position: relative !important;
  z-index: 2 !important;
  border-top: none !important;
  /* Taşmayı önle */
  overflow: hidden !important;
  max-width: 100vw !important;
}

.input-area {
  max-width: 768px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  /* Taşmayı önle */
  overflow: hidden !important;
  min-width: 0 !important;
}

.input-box {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  background: var(--v3-input-bg) !important;
  border: 1px solid var(--v3-border2) !important;
  box-shadow: var(--v3-input-shadow) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  overflow: hidden !important;
}

.input-box:focus-within {
  border-color: var(--v3-border2) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important;
}

[data-theme="dark"] .input-box:focus-within {
  box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
}

.input-row {
  display: flex !important;
  align-items: flex-end !important;
  padding: 12px 14px 4px !important;
  gap: 8px !important;
}

#message-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: var(--v3-text) !important;
  font-size: 0.92rem !important;
  font-family: 'Inter', Arial, sans-serif !important;
  line-height: 1.6 !important;
  resize: none !important;
  min-height: 24px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  padding: 0 !important;
  scrollbar-width: thin !important;
}

#message-input::placeholder {
  color: var(--v3-text4) !important;
}

.input-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px 10px !important;
  gap: 6px !important;
}

.input-actions-left,
.input-actions-right {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Input araç butonları */
.btn-tool {
  width: 45px !important;
  height: 32px !important;
  border-radius: 4px !important;
  border: none !important;
  background: transparent !important;
  color: var(--v3-text3) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.2s ease !important;
  flex-shrink: 0 !important;
}

.btn-tool:hover {
  background: var(--v3-hover) !important;
  color: var(--v3-text) !important;
  transform: scale(1.05) !important;
}

/* Gönder butonu */
.btn-send {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: none !important;
  background: var(--v3-btn-bg) !important;
  color: var(--v3-btn-text) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.18s ease, transform 0.2s ease, opacity 0.18s ease !important;
  flex-shrink: 0 !important;
}

.btn-send:hover:not(:disabled) {
  background: var(--v3-btn-hover) !important;
  transform: scale(1.05) !important;
}

.btn-send:disabled {
  background: var(--v3-btn-disabled) !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* Ek önizleme */
.attachments-preview {
  padding: 0 14px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.attachments-preview:empty {
  display: none !important;
}

/* ── 11. SPEED PICKER & DROPDOWN FIX ───────────────────────────── */
.speed-picker {
  position: relative !important;
}

.speed-picker-btn {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--v3-border) !important;
  background: transparent !important;
  color: var(--v3-text3) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
  font-family: 'Inter', Arial, sans-serif !important;
  white-space: nowrap !important;
}

.speed-picker-btn:hover {
  background: var(--v3-hover) !important;
  border-color: var(--v3-border2) !important;
  color: var(--v3-text) !important;
}

.speed-chevron {
  transition: transform 0.2s ease !important;
  opacity: 0.6 !important;
}

/* KRITIK: Dropdown her zaman input'un ÜSTÜNDE açılır */
.speed-picker-dropdown {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  right: 0 !important;
  width: 240px !important;
  background: var(--v3-card) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--v3-shadow-lg) !important;
  z-index: 9999 !important;
  padding: 6px !important;
  animation: v3FadeUp 0.18s ease both !important;
  display: none !important;
}

.speed-picker-dropdown.open {
  display: block !important;
}

.speed-picker-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important;
  color: var(--v3-text2) !important;
  font-size: 0.83rem !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: left !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

.speed-picker-option:hover,
.speed-picker-option.active {
  background: var(--v3-hover) !important;
  color: var(--v3-text) !important;
}

.speed-option-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: var(--v3-surface2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--v3-text2) !important;
}

.speed-option-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.speed-option-name {
  font-weight: 500 !important;
  color: var(--v3-text) !important;
  font-size: 0.83rem !important;
}

.speed-option-desc {
  font-size: 0.72rem !important;
  color: var(--v3-text4) !important;
}

/* Karakter sayacı */
.char-count {
  font-size: 0.72rem !important;
  color: var(--v3-text4) !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

/* ── 12. BUTON SİSTEMİ ──────────────────────────────────────────── */
.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  border: none !important;
  background: var(--v3-btn-bg) !important;
  color: var(--v3-btn-text) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  font-family: 'Inter', Arial, sans-serif !important;
  text-decoration: none !important;
}

.btn-primary:hover {
  background: var(--v3-btn-hover) !important;
  transform: scale(1.03) !important;
}

.btn-primary:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  border: 1px solid var(--v3-border) !important;
  background: transparent !important;
  color: var(--v3-text2) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
  font-family: 'Inter', Arial, sans-serif !important;
  text-decoration: none !important;
}

.btn-secondary:hover {
  background: var(--v3-hover) !important;
  border-color: var(--v3-border2) !important;
  transform: scale(1.03) !important;
}

.btn-accent {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  border: none !important;
  background: var(--v3-accent) !important;
  color: #fff !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  font-family: 'Inter', Arial, sans-serif !important;
  text-decoration: none !important;
}

.btn-accent:hover {
  opacity: 0.88 !important;
  transform: scale(1.03) !important;
}

/* ── 13. KART TASARIMI ──────────────────────────────────────────── */
.card,
.settings-card,
.profile-card,
.plan-card,
.workspace-card {
  background: var(--v3-card) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: var(--v3-shadow-sm) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.card:hover {
  box-shadow: var(--v3-shadow-md) !important;
}

/* ── 14. MODAL SİSTEMİ ──────────────────────────────────────────── */
/* KRITIK: display:none inline style'ı override etmemek için display kuralı YOK */
/* Modal açma/kapama tamamen JS tarafından yönetilir (style="display:none/flex") */
.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99990 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

.modal-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.5) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.modal-box {
  position: relative !important;
  z-index: 99999 !important;
  background: var(--v3-card) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--v3-shadow-lg) !important;
  width: 100% !important;
  max-width: 520px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  animation: v3ModalIn 0.25s ease both !important;
}

.modal-box.modal-lg {
  max-width: 720px !important;
}

.modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid var(--v3-border) !important;
}

.modal-header h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--v3-text) !important;
  margin: 0 !important;
}

.modal-header button {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--v3-text3) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

.modal-header button:hover {
  background: var(--v3-hover) !important;
  color: var(--v3-text) !important;
}

.modal-body {
  padding: 20px 24px !important;
}

.modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 16px 24px 20px !important;
  border-top: 1px solid var(--v3-border) !important;
}

/* Form elemanları */
.form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}

.form-group label {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--v3-text2) !important;
}

.form-group input,
.form-group textarea,
.form-group select {
  background: var(--v3-input-bg) !important;
  border: 1px solid var(--v3-border2) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  color: var(--v3-text) !important;
  font-size: 0.88rem !important;
  font-family: 'Inter', Arial, sans-serif !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--v3-accent) !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--v3-text4) !important;
}

.form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

/* Range input */
input[type="range"] {
  accent-color: var(--v3-accent) !important;
}

/* ── 15. ANİMASYONLAR ───────────────────────────────────────────── */
@keyframes v3FadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes v3FadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes v3MsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes v3ModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes v3SlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Typing indicator */
.typing-indicator,
.typing-dots {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 12px 0 !important;
}

.typing-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--v3-text4) !important;
  animation: v3TypingBounce 1.2s ease infinite !important;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s !important; }
.typing-dot:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes v3TypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%            { transform: translateY(-6px); opacity: 1; }
}

/* ── 16. SCROLLBAR ──────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--v3-border) transparent;
}

*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-thumb {
  background: var(--v3-border);
  border-radius: 3px;
}
*::-webkit-scrollbar-track { background: transparent; }

/* ── 17. FOOTER ─────────────────────────────────────────────────── */
.input-footer {
  text-align: center !important;
  font-size: 0.72rem !important;
  color: var(--v3-text4) !important;
  padding: 6px 0 0 !important;
  line-height: 1.5 !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

/* ── 18. MOBİL RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar mobilde drawer olarak çalışır */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    transform: translateX(-100%) !important;
    z-index: 200 !important;
    box-shadow: var(--v3-shadow-lg) !important;
  }

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

  /* Collapsed modda da tam genişlik göster */
  .sidebar.collapsed {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
  }

  /* Overlay mobilde sadece aktifken görünür ve tıklanabilir */
  .sidebar-overlay {
    display: block !important;
    pointer-events: none;
  }

  .sidebar-overlay.active {
    pointer-events: auto !important;
  }

  /* Mobil header görünür */
  .mobile-page-header {
    display: flex !important;
  }

  /* Chat main mobilde tam ekran flex column — padding-top yok */
  .chat-main {
    padding-top: 0 !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Input wrapper mobilde her zaman görünür ve altta sabit */
  .input-wrapper {
    flex-shrink: 0 !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Messages container kalan alanı doldursun */
  .messages-container,
  #messages.messages-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* Topbar mobilde gizlenir (mobile-page-header kullanılır) */
  .topbar {
    display: none !important;
  }

  /* Mesajlar tam geniÅŸlik */
  .messages-container > .message,
  .messages-container > .message-wrapper {
    max-width: 100% !important;
  }

  /* Kullanıcı mesajı mobilde daha geniş */
  .message.user .message-inner,
  .message.user .msg-content {
    max-width: 88% !important;
  }

  /* Input alanı mobilde */
  .input-wrapper {
    padding: 8px 12px 12px !important;
  }

  /* Öneri kartları mobilde 2 kolon */
  .suggestion-pills {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Modal tam ekran */
  .modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .modal-box {
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    max-width: 100% !important;
  }

  /* Speed picker dropdown mobilde tam geniÅŸlik */
  .speed-picker-dropdown {
    right: auto !important;
    left: 0 !important;
    width: 260px !important;
  }

  /* Form row mobilde tek kolon */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar nav item metinleri mobilde görünür */
  .sidebar.open .sidebar-nav-item > span:not(.sb-badge-beta) {
    opacity: 1 !important;
    width: auto !important;
  }

  .sidebar.open .sidebar-nav-item {
    justify-content: flex-start !important;
    padding: 9px 10px !important;
  }

  .sidebar.open .sb-new-chat-full span {
    opacity: 1 !important;
    width: auto !important;
  }

  .sidebar.open .sidebar-logo-text {
    opacity: 1 !important;
    width: auto !important;
  }

  /* Klavye açıldığında input yukarı çıkar */
  @supports (height: 100dvh) {
    .chat-main {
      height: 100dvh !important;
    }
  }
}

/* Çok küçük ekranlar */
@media (max-width: 400px) {
  .suggestion-pills {
    grid-template-columns: 1fr !important;
  }

  .input-actions-left {
    gap: 2px !important;
  }

  .btn-tool {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ── 19. TABLET (768px - 1024px) ────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }

  .sidebar.collapsed {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
  }
}

/* ── 20. YARDIMCI SINIFLAR ──────────────────────────────────────── */

/* Toast bildirimleri */
.toast,
.toast-notification {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--v3-card) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-size: 0.84rem !important;
  color: var(--v3-text) !important;
  box-shadow: var(--v3-shadow-lg) !important;
  z-index: 99999 !important;
  animation: v3FadeIn 0.25s ease both !important;
  white-space: nowrap !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

.toast.success { border-color: var(--border-control) !important; }
.toast.error   { border-color: var(--border-control) !important; }
.toast.warning { border-color: var(--border-control) !important; }

/* Duyuru bandı */
.announcement {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  font-size: 0.82rem !important;
  border-bottom: 1px solid var(--v3-border) !important;
  flex-shrink: 0 !important;
}

.announcement-info    { background: rgba(80,80,80,0.08) !important; color: var(--v3-accent2) !important; }
.announcement-success { background: rgba(16,163,127,0.08) !important; color: var(--v3-accent) !important; }
.announcement-warning { background: var(--surface2) !important; color: var(--text2) !important; }
.announcement-error   { background: var(--surface2) !important; color: var(--text2) !important; }

.announcement button {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  opacity: 0.7 !important;
  transition: opacity 0.15s ease !important;
}

.announcement button:hover { opacity: 1 !important; }

/* Kod bloÄŸu */
/* ══════════════════════════════════════════════════════════════
   23. KOD BLOGU — ChatGPT / Claude seviyesinde modern gorunum
   Tum mevcut CSS dosyalarini override eder.
   Dark/Light tema CSS degiskenleri uzerinden yonetilir.
══════════════════════════════════════════════════════════════ */

/* Kod blogu CSS degiskenleri */
[data-theme="light"] {
  --cb-bg:               #f7f7f8;
  --cb-header-bg:        #ebebec;
  --cb-border:           #e0e0e1;
  --cb-text:             #1e1e2e;
  --cb-lang-color:       #555;
  --cb-btn-color:        #666;
  --cb-btn-hover-bg:     rgba(0,0,0,0.07);
  --cb-btn-hover-border: rgba(0,0,0,0.14);
  --cb-btn-hover-color:  #050816;
  --cb-expand-bg:        #ebebec;
  --cb-expand-hover:     #dededf;
  --cb-shadow:           0 2px 12px rgba(0,0,0,0.07);
}

[data-theme="dark"] {
  --cb-bg:               #1e1e1e;
  --cb-header-bg:        #2a2a2a;
  --cb-border:           #333;
  --cb-text:             #e2e2f0;
  --cb-lang-color:       #aaa;
  --cb-btn-color:        #888;
  --cb-btn-hover-bg:     rgba(255,255,255,0.1);
  --cb-btn-hover-border: rgba(255,255,255,0.18);
  --cb-btn-hover-color:  #fff;
  --cb-expand-bg:        #252525;
  --cb-expand-hover:     #3e73e61c;
  --cb-shadow:           0 2px 16px rgba(0,0,0,0.4);
}

/* Ana pre sarmalayici */
.code-block-wrap {
  margin: 10px 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--cb-border) !important;
  box-shadow: var(--cb-shadow) !important;
  background: var(--cb-bg) !important;
  max-height: none !important;
  position: relative !important;
}

pre,
.code-block {
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 10px 0 !important;
  background: var(--cb-bg) !important;
  border: 1px solid var(--cb-border) !important;
  box-shadow: var(--cb-shadow) !important;
}

.code-block-wrap pre {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Kod icerigi */
pre code,
.message-content pre code {
  display: block !important;
  padding: 16px 18px !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Monaco', monospace !important;
  font-size: 0.855rem !important;
  line-height: 1.7 !important;
  overflow-x: auto !important;
  color: var(--cb-text) !important;
  background: transparent !important;
  tab-size: 2 !important;
  -moz-tab-size: 2 !important;
  white-space: pre !important;
  word-break: normal !important;
  word-wrap: normal !important;
}

/* Satir ici kod */
code:not(pre code),
.message-content code:not(pre code) {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 0.84em !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  background: var(--cb-header-bg) !important;
  border: 1px solid var(--cb-border) !important;
  color: var(--v3-accent) !important;
  word-break: break-word !important;
}

/* Kod blogu header */
.code-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 12px !important;
  height: 44px !important;
  min-height: 44px !important;
  background: var(--cb-header-bg) !important;
  border-bottom: 1px solid var(--cb-border) !important;
  border-radius: 12px 12px 0 0 !important;
  gap: 8px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
}

/* Sol: dil badge */
.code-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.code-lang-badge,
.code-lang {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--cb-lang-color) !important;
  white-space: nowrap !important;
  user-select: none !important;
}

/* Sag: aksiyon butonlari */
.code-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
}

.btn-copy-code,
.btn-edit-code,
.btn-download-code,
.btn-preview-code {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--cb-btn-color) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  font-family: 'Inter', Arial, sans-serif !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.btn-copy-code:hover,
.btn-edit-code:hover,
.btn-download-code:hover {
  background: var(--cb-btn-hover-bg) !important;
  border-color: var(--cb-btn-hover-border) !important;
  color: var(--cb-btn-hover-color) !important;
}

.btn-preview-code:hover,
.btn-preview-code.active {
  background: rgba(80,80,80,0.1) !important;
  border-color: rgba(120,120,120,0.25) !important;
  color: var(--v3-accent) !important;
}

.btn-copy-code.copied {
  color: var(--v3-accent) !important;
  background: rgba(80,80,80,0.08) !important;
  border-color: rgba(120,120,120,0.2) !important;
}

/* Uzun kod collapse butonu */
.code-expand-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 9px 14px !important;
  background: var(--cb-expand-bg) !important;
  border: none !important;
  border-top: 1px solid var(--cb-border) !important;
  color: var(--cb-btn-color) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  border-radius: 0 0 12px 12px !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

.code-expand-btn:hover {
  background: var(--cb-expand-hover) !important;
  color: var(--cb-btn-hover-color) !important;
}

/* Syntax highlight: hljs override — Dark tema */
[data-theme="dark"] .hljs { background: var(--cb-bg) !important; color: #abb2bf !important; }
[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-selector-tag,
[data-theme="dark"] .hljs-built_in { color: #c678dd !important; }
[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-attr { color: #98c379 !important; }
[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-literal { color: #d19a66 !important; }
[data-theme="dark"] .hljs-comment { color: #5c6370 !important; font-style: italic !important; }
[data-theme="dark"] .hljs-function,
[data-theme="dark"] .hljs-title { color: #61afef !important; }
[data-theme="dark"] .hljs-variable,
[data-theme="dark"] .hljs-name { color: #e06c75 !important; }
[data-theme="dark"] .hljs-type,
[data-theme="dark"] .hljs-class { color: #e5c07b !important; }
[data-theme="dark"] .hljs-tag { color: #e06c75 !important; }
[data-theme="dark"] .hljs-attribute { color: #d19a66 !important; }
[data-theme="dark"] .hljs-meta { color: #56b6c2 !important; }
[data-theme="dark"] .hljs-property { color: #56b6c2 !important; }

/* Syntax highlight: hljs override — Light tema */
[data-theme="light"] .hljs { background: var(--cb-bg) !important; color: #383a42 !important; }
[data-theme="light"] .hljs-keyword,
[data-theme="light"] .hljs-selector-tag,
[data-theme="light"] .hljs-built_in { color: #a626a4 !important; }
[data-theme="light"] .hljs-string,
[data-theme="light"] .hljs-attr { color: #50a14f !important; }
[data-theme="light"] .hljs-number,
[data-theme="light"] .hljs-literal { color: #986801 !important; }
[data-theme="light"] .hljs-comment { color: #a0a1a7 !important; font-style: italic !important; }
[data-theme="light"] .hljs-function,
[data-theme="light"] .hljs-title { color: #4078f2 !important; }
[data-theme="light"] .hljs-variable,
[data-theme="light"] .hljs-name { color: #e45649 !important; }
[data-theme="light"] .hljs-type,
[data-theme="light"] .hljs-class { color: #c18401 !important; }
[data-theme="light"] .hljs-tag { color: #e45649 !important; }
[data-theme="light"] .hljs-attribute { color: #986801 !important; }
[data-theme="light"] .hljs-meta { color: #0184bc !important; }
[data-theme="light"] .hljs-property { color: #0184bc !important; }

/* Kod onizleme frame */
.code-preview-frame {
  border-top: 1px solid var(--cb-border) !important;
  background: var(--v3-bg) !important;
  border-radius: 0 0 12px 12px !important;
  overflow: hidden !important;
}

.code-preview-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: var(--cb-header-bg) !important;
  border-bottom: 1px solid var(--cb-border) !important;
}

.code-preview-dots {
  display: flex !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}

.cpd { width: 10px !important; height: 10px !important; border-radius: 50% !important; }
.cpd-red    { background: #ff5f57 !important; }
.cpd-yellow { background: #febc2e !important; }
.cpd-green  { background: #28c840 !important; }

.code-preview-bar-label {
  flex: 1 !important;
  text-align: center !important;
  font-size: 0.72rem !important;
  color: var(--cb-btn-color) !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

.code-preview-close {
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px !important;
  border: none !important;
  background: transparent !important;
  color: var(--cb-btn-color) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease !important;
  flex-shrink: 0 !important;
}

.code-preview-close:hover {
  background: var(--cb-btn-hover-bg) !important;
  color: var(--cb-btn-hover-color) !important;
}

.code-preview-frame iframe {
  width: 100% !important;
  min-height: 280px !important;
  max-height: 480px !important;
  border: none !important;
  display: block !important;
  background: #fff !important;
}

/* Monaco / Kod editor popup */
.code-editor-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 99990 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.code-editor-overlay.open {
  display: flex !important;
}

.code-editor-dialog {
  background: var(--v3-card) !important;
  border: 1px solid var(--cb-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
  width: 100% !important;
  max-width: 860px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: v3ModalIn 0.25s ease both !important;
}

.code-editor-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  background: var(--cb-header-bg) !important;
  border-bottom: 1px solid var(--cb-border) !important;
  flex-shrink: 0 !important;
}

.code-editor-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--v3-text) !important;
}

.code-editor-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.code-editor-header-actions button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cb-border) !important;
  background: transparent !important;
  color: var(--cb-btn-color) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

.code-editor-header-actions button:hover {
  background: var(--cb-btn-hover-bg) !important;
  color: var(--cb-btn-hover-color) !important;
}

.code-editor-close {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  justify-content: center !important;
}

.code-editor-body {
  flex: 1 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

#code-editor-textarea {
  flex: 1 !important;
  width: 100% !important;
  min-height: 360px !important;
  padding: 16px 18px !important;
  background: var(--cb-bg) !important;
  color: var(--cb-text) !important;
  border: none !important;
  outline: none !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  resize: none !important;
  tab-size: 2 !important;
  -moz-tab-size: 2 !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--cb-border) transparent !important;
}

#code-editor-preview-pane {
  border-top: 1px solid var(--cb-border) !important;
  background: #fff !important;
}

#code-editor-iframe {
  width: 100% !important;
  height: 280px !important;
  border: none !important;
  display: block !important;
}

.code-editor-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  background: var(--cb-header-bg) !important;
  border-top: 1px solid var(--cb-border) !important;
  flex-shrink: 0 !important;
}

.code-editor-stats {
  font-size: 0.72rem !important;
  color: var(--cb-btn-color) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

.btn-ghost-sm {
  padding: 7px 14px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cb-border) !important;
  background: transparent !important;
  color: var(--v3-text2) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

.btn-ghost-sm:hover { background: var(--v3-hover) !important; }

.btn-primary-sm {
  padding: 7px 14px !important;
  border-radius: 8px !important;
  border: none !important;
  background: var(--v3-btn-bg) !important;
  color: var(--v3-btn-text) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

.btn-primary-sm:hover { background: var(--v3-btn-hover) !important; }

/* Mobil: buton etiketleri gizle */
@media (max-width: 640px) {
  .code-header { height: 40px !important; min-height: 40px !important; padding: 0 10px !important; }
  .btn-copy-code .btn-label,
  .btn-edit-code .btn-label,
  .btn-download-code .btn-label,
  .btn-preview-code .btn-label { display: none !important; }
  .btn-copy-code,
  .btn-edit-code,
  .btn-download-code,
  .btn-preview-code { padding: 5px 7px !important; }
  .code-lang-badge, .code-lang { font-size: 0.68rem !important; }
  pre code, .message-content pre code { font-size: 0.8rem !important; padding: 12px 14px !important; }
  .code-editor-dialog { max-width: 100% !important; max-height: 100vh !important; border-radius: 0 !important; }
  #code-editor-textarea { min-height: 260px !important; font-size: 0.8rem !important; }
}

/* Yükleme spinner */
.spinner {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--v3-border) !important;
  border-top-color: var(--v3-text) !important;
  border-radius: 50% !important;
  animation: v3Spin 0.7s linear infinite !important;
}

@keyframes v3Spin {
  to { transform: rotate(360deg); }
}

/* BoÅŸ durum */
.empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 48px 24px !important;
  text-align: center !important;
  color: var(--v3-text3) !important;
}

.empty-state svg {
  opacity: 0.4 !important;
}

.empty-state h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--v3-text2) !important;
  margin: 0 !important;
}

.empty-state p {
  font-size: 0.84rem !important;
  color: var(--v3-text3) !important;
  margin: 0 !important;
  max-width: 320px !important;
}

/* PWA banner */
#pwa-promo-banner {
  border-radius: 14px !important;
  border: 1px solid var(--v3-border) !important;
  background: var(--v3-card) !important;
  box-shadow: var(--v3-shadow-md) !important;
}

/* Genel yardımcılar */
.hidden { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* App layout */
.app-with-sidebar {
  display: flex !important;
  width: 100% !important;
  min-height: 100vh !important;
}

/* Sayfa main alanları */
.settings-main,
.profile-main,
.pricing-main,
.page-main {
  flex: 1 !important;
  overflow-y: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: var(--v3-bg) !important;
}

/* Sayfa içerik konteyneri */
.page-content,
.settings-content,
.profile-content {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 32px 24px !important;
}

@media (max-width: 768px) {
  .page-content,
  .settings-content,
  .profile-content {
    padding: 20px 16px !important;
  }
}

/* Sayfa başlığı */
.page-header {
  margin-bottom: 28px !important;
}

.page-header h1 {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--v3-text) !important;
  margin: 0 0 6px !important;
}

.page-header p {
  font-size: 0.88rem !important;
  color: var(--v3-text3) !important;
  margin: 0 !important;
}

/* ── SON: Tüm popup/dropdown'lar için global z-index güvencesi ── */
[id$="-dropdown"]:not([style*="display: none"]),
[id$="-popup"]:not([style*="display: none"]),
[id$="-menu"]:not([style*="display: none"]),
.dropdown-open,
.popup-open {
  z-index: 9999 !important;
}

/* ══════════════════════════════════════════════════════════════
   21. UZUN CEVAP IÇERIK KARTI (ChatGPT tarzi)
   Esik: 600 karakter veya 8 satir -> .msg-content-card wrapper
══════════════════════════════════════════════════════════════ */

/* Kart wrapper */
.msg-content-card {
  position: relative !important;
  background: var(--v3-card) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 12px !important;
  padding: 16px 48px 16px 16px !important;
  margin: 2px 0 !important;
  box-shadow: var(--v3-shadow-sm) !important;
  transition: box-shadow 0.18s ease, border-color 0.18s ease !important;
  word-break: break-word !important;
  overflow: visible !important;
}

.msg-content-card:hover {
  box-shadow: var(--v3-shadow-md) !important;
  border-color: var(--v3-border2) !important;
}

[data-theme="dark"] .msg-content-card {
  background: #1e1e1e !important;
  border-color: #2a2a2a !important;
}

[data-theme="dark"] .msg-content-card:hover {
  border-color: #3a3a3a !important;
}

/* Kart icindeki message-content */
.msg-content-card .message-content {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Kopyala butonu (sag ust kose) */
.msg-card-copy-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 7px !important;
  border: 1px solid var(--v3-border) !important;
  background: var(--v3-surface) !important;
  color: var(--v3-text3) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease !important;
  opacity: 0 !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
}

.msg-content-card:hover .msg-card-copy-btn {
  opacity: 1 !important;
}

.msg-card-copy-btn:hover {
  background: var(--v3-hover) !important;
  color: var(--v3-text) !important;
  border-color: var(--v3-border2) !important;
}

.msg-card-copy-btn.copied {
  color: var(--v3-accent) !important;
  border-color: var(--v3-accent) !important;
  background: rgba(16,163,127,0.10) !important;
  opacity: 1 !important;
}

/* Tooltip */
.msg-card-copy-btn::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  background: #050816 !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
  z-index: 10 !important;
}

.msg-card-copy-btn.show-tooltip::after {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

[data-theme="dark"] .msg-card-copy-btn::after {
  background: #e5e5e5 !important;
  color: #050816 !important;
}

/* Streaming sirasinda kart yok */
.msg-content-card.streaming {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.msg-content-card.streaming .msg-card-copy-btn {
  display: none !important;
}

/* Kart ici tipografi */
.msg-content-card p:first-child { margin-top: 0 !important; }
.msg-content-card p:last-child  { margin-bottom: 0 !important; }

.msg-content-card h1,
.msg-content-card h2,
.msg-content-card h3 {
  margin-top: 1.2em !important;
  margin-bottom: 0.5em !important;
}

.msg-content-card h1:first-child,
.msg-content-card h2:first-child,
.msg-content-card h3:first-child {
  margin-top: 0 !important;
}

.msg-content-card ul,
.msg-content-card ol {
  padding-left: 1.4em !important;
  margin: 0.5em 0 !important;
}

.msg-content-card pre {
  margin: 12px 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════
   22. CHATGPT COMPOSER — Yeni input alanı sistemi
   Tüm .input-box yerini .composer-box alır
══════════════════════════════════════════════════════════════ */

/* Eski input-box'ı gizle, composer-box'ı göster */
.input-box {
  display: none !important;
}

/* Composer ana kutu */
.composer-box {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 20px !important;
  background: var(--v3-input-bg) !important;
  border: 1.5px solid var(--v3-border2) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
  transition: border-color 0.2s ease, box-shadow 0.25s ease !important;
  overflow: hidden !important;
  position: relative !important;
  min-width: 0 !important;
}

[data-theme="dark"] .composer-box {
  background: #ff353500 !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 3px 2px rgb(66 122 243) !important;
}

.composer-box:focus-within {
  border-color: rgba(120,120,120,0.5) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.12), 0 0 0 3px rgba(120,120,120,0.08) !important;
}

[data-theme="dark"] .composer-box:focus-within {
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.5), 0 0 0 3px rgba(255,255,255,0.04) !important;
}

/* Textarea sarmalayici */
.composer-textarea-wrap {
  padding: 16px 18px 8px !important;
}

.composer-textarea-wrap textarea,
.composer-box #message-input {
  width: 100% !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: var(--v3-text) !important;
  font-size: 0.95rem !important;
  font-family: 'Inter', Arial, sans-serif !important;
  line-height: 1.65 !important;
  resize: none !important;
  min-height: 28px !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  padding: 0 !important;
  scrollbar-width: thin !important;
  display: block !important;
}

.composer-box #message-input::placeholder {
  color: var(--v3-text4) !important;
  font-size: 0.95rem !important;
}

/* Alt toolbar */
.composer-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px 12px !important;
  gap: 6px !important;
}

.composer-tools-left,
.composer-tools-right {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

/* ── Öneri kartları (welcome screen) ── */
.suggestion-chip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  background: var(--v3-surface) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 12px !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  color: var(--v3-text2) !important;
  cursor: pointer !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  text-align: left !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

.suggestion-chip:hover {
  background: var(--v3-surface2) !important;
  border-color: var(--v3-border2) !important;
  color: var(--v3-text) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--v3-shadow-md) !important;
}

.suggestion-chip-icon {
  font-size: 1rem !important;
  flex-shrink: 0 !important;
}

.suggestion-chip-text {
  white-space: nowrap !important;
}

/* ── ➕ Ekle dropdown ── */
.composer-add-wrap {
  position: relative !important;
}

.composer-add-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid var(--v3-border) !important;
  background: transparent !important;
  color: var(--v3-text3) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
  flex-shrink: 0 !important;
}

.composer-add-btn:hover {
  background: var(--v3-hover) !important;
  border-color: var(--v3-border2) !important;
  color: var(--v3-text) !important;
}

.composer-add-dropdown {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 0 !important;
  width: 240px !important;
  background: var(--v3-card) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--v3-shadow-lg) !important;
  z-index: 9999 !important;
  padding: 6px !important;
  animation: v3FadeUp 0.18s ease both !important;
  display: none !important;
}

.composer-add-dropdown.open {
  display: block !important;
}

.composer-add-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important;
  color: var(--v3-text2) !important;
  font-size: 0.83rem !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: left !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

.composer-add-item:hover {
  background: var(--v3-hover) !important;
  color: var(--v3-text) !important;
}

.composer-add-item-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: var(--v3-surface2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--v3-text2) !important;
}

.composer-add-item-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.composer-add-item-name {
  font-weight: 500 !important;
  color: var(--v3-text) !important;
  font-size: 0.83rem !important;
}

.composer-add-item-desc {
  font-size: 0.7rem !important;
  color: var(--v3-text4) !important;
}

/* ── Mikrofon animasyonu ── */
.btn-mic-composer {
  position: relative !important;
}

.mic-icon-wrap,
.mic-wave-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}

.mic-wave-bar {
  width: 3px !important;
  border-radius: 2px !important;
  background: var(--v3-accent) !important;
  animation: micWave 0.8s ease-in-out infinite !important;
}

.mic-wave-bar:nth-child(1) { height: 8px;  animation-delay: 0s; }
.mic-wave-bar:nth-child(2) { height: 14px; animation-delay: 0.1s; }
.mic-wave-bar:nth-child(3) { height: 18px; animation-delay: 0.2s; }
.mic-wave-bar:nth-child(4) { height: 14px; animation-delay: 0.3s; }
.mic-wave-bar:nth-child(5) { height: 8px;  animation-delay: 0.4s; }

@keyframes micWave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
  50%       { transform: scaleY(1);   opacity: 1; }
}

.btn-mic-composer.recording {
  background: rgba(239,68,68,0.1) !important;
  color: #ef4444 !important;
}

/* ── Mod seçici dropdown ── */
.composer-mode-wrap {
  position: relative !important;
}

.composer-mode-btn {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--v3-border) !important;
  background: transparent !important;
  color: var(--v3-text3) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
  font-family: 'Inter', Arial, sans-serif !important;
  white-space: nowrap !important;
}

.composer-mode-btn:hover {
  background: var(--v3-hover) !important;
  border-color: var(--v3-border2) !important;
  color: var(--v3-text) !important;
}

.composer-mode-icon {
  font-size: 0.85rem !important;
  line-height: 1 !important;
}

.composer-mode-chevron {
  transition: transform 0.2s ease !important;
  opacity: 0.6 !important;
}

.composer-mode-btn[aria-expanded="true"] .composer-mode-chevron {
  transform: rotate(180deg) !important;
}

.composer-mode-dropdown {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  right: 0 !important;
  width: 260px !important;
  background: var(--v3-card) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--v3-shadow-lg) !important;
  z-index: 9999 !important;
  padding: 6px !important;
  animation: v3FadeUp 0.18s ease both !important;
  display: none !important;
}

.composer-mode-dropdown.open {
  display: block !important;
}

.composer-mode-header {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: var(--v3-text4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 6px 12px 4px !important;
}

.composer-mode-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important;
  color: var(--v3-text2) !important;
  font-size: 0.83rem !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: left !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

.composer-mode-option:hover,
.composer-mode-option.active {
  background: var(--v3-hover) !important;
  color: var(--v3-text) !important;
}

.composer-mode-opt-icon {
  font-size: 1.1rem !important;
  width: 28px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.composer-mode-opt-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.composer-mode-opt-name {
  font-weight: 500 !important;
  color: var(--v3-text) !important;
  font-size: 0.83rem !important;
}

.composer-mode-opt-desc {
  font-size: 0.7rem !important;
  color: var(--v3-text4) !important;
  line-height: 1.3 !important;
}

.composer-mode-opt-check {
  color: var(--v3-accent) !important;
  flex-shrink: 0 !important;
}

/* ── Gönder / Durdur butonu ── */
/* ── Gönder butonu — ChatGPT tarzı modern ── */
.btn-send {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

/* Dark tema: beyaz buton */
[data-theme="dark"] .btn-send:not(:disabled):not(.btn-stop) {
  background: #FFFFFF !important;
  color: #000000 !important;
  box-shadow: 0 2px 8px rgba(255,255,255,0.15) !important;
}

/* Light tema: siyah buton */
[data-theme="light"] .btn-send:not(:disabled):not(.btn-stop) {
  background: #000000 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

/* Varsayılan (tema belirsiz) */
.btn-send:not(:disabled):not(.btn-stop) {
  background: var(--v3-btn-bg, #000) !important;
  color: var(--v3-btn-text, #fff) !important;
}

.btn-send:hover:not(:disabled):not(.btn-stop) {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
}

[data-theme="dark"] .btn-send:hover:not(:disabled):not(.btn-stop) {
  background: #F0F0F0 !important;
  box-shadow: 0 4px 16px rgba(255,255,255,0.2) !important;
}

[data-theme="light"] .btn-send:hover:not(:disabled):not(.btn-stop) {
  background: #222222 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}

.btn-send:disabled {
  background: rgba(128,128,128,0.2) !important;
  color: rgba(128,128,128,0.5) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* Durdur (stop) durumu */
.btn-send.btn-stop {
  background: #ef4444 !important;
  color: #fff !important;
  opacity: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(239,68,68,0.3) !important;
}

.btn-send.btn-stop:hover {
  background: #dc2626 !important;
  transform: scale(1.08) !important;
}

/* ── Responsive: Mobil ── */
@media (max-width: 768px) {
  .composer-box {
    border-radius: 16px !important;
  }

  .composer-toolbar {
    gap: 0px !important;
  }

  .composer-tools-left,
  .composer-tools-right {
    gap: 0px !important;
  }

  /* Mobilde bazı araçları gizle — taşma önleme */
  .composer-tools-left .btn-tool:nth-child(n+5) {
    display: none !important;
  }

  .composer-add-dropdown {
    left: 0 !important;
    right: auto !important;
    width: 230px !important;
  }

  .composer-mode-dropdown {
    right: 0 !important;
    left: auto !important;
    width: 240px !important;
  }

  .suggestion-pills {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .suggestion-chip {
    padding: 9px 12px !important;
    font-size: 0.8rem !important;
  }
}

@media (max-width: 400px) {
  .suggestion-pills {
    grid-template-columns: 1fr !important;
  }

  .composer-mode-label {
    display: none !important;
  }

  .composer-tools-left .btn-tool:nth-child(n+4) {
    display: none !important;
  }
}

/* ── Mesaj "Daha fazla" dropdown ───────────────────────── */
.msg-more-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  background: var(--surface2, #050816);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: .5rem;
  padding: .3rem;
  min-width: 130px;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.msg-more-dropdown button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  background: none;
  border: none;
  border-radius: .35rem;
  color: var(--text-secondary, #B0B0B0);
  font-size: .8rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .12s, color .12s;
}

.msg-more-dropdown button:hover {
  background: var(--surface3, rgba(255,255,255,.07));
  color: var(--text, #ECECEC);
}

.message-actions {
  position: relative;
}

/* ── Follow-up Chips (AI yanıtı sonrası öneriler) ──────── */
.followup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
}

.followup-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  background: var(--surface2, rgba(255,255,255,.05));
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 999px;
  color: var(--text-secondary, #B0B0B0);
  font-size: .78rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}

.followup-chip:hover {
  background: var(--accent-muted, rgba(80,80,80,.1));
  border-color: var(--text3);
  color: var(--text3);
}

.followup-chip-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: .7;
}

.followup-chip:hover .followup-chip-icon {
  opacity: 1;
}

@media (max-width: 768px) {
  .followup-chips {
    gap: .3rem;
  }
  .followup-chip {
    font-size: .75rem;
    padding: .3rem .6rem;
  }
}

/* ── Blockquote (sohbet mesajları) ─────────────────────── */
.message-content blockquote,
.message-content .gx-blockquote {
  margin: .75rem 0;
  padding: .6rem 1rem;
  border-left: 3px solid var(--text3);
  background: rgba(80,80,80,.07);
  border-radius: 0 .4rem .4rem 0;
  color: var(--text-secondary, #B0B0B0);
  font-style: italic;
  line-height: 1.65;
}

.message-content blockquote p,
.message-content .gx-blockquote p {
  margin: 0;
}

.message-content blockquote strong,
.message-content .gx-blockquote strong {
  color: var(--text, #ECECEC);
  font-style: normal;
}

/* Suggestion chip icon SVG hizalama */
.suggestion-chip-icon svg {
  display: block;
  flex-shrink: 0;
}

/* Composer mode icon SVG hizalama */
.composer-mode-icon svg,
.composer-mode-opt-icon svg {
  display: block;
  flex-shrink: 0;
}
/* ── Space Orbs — Arka plan animasyonlu orb'lar ── */
.space-orbs {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.space-orb {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  opacity: 0 !important;
  animation: orbFloat 18s ease-in-out infinite !important;
}

[data-theme="dark"] .space-orb {
  opacity: 0.18 !important;
}

[data-theme="light"] .space-orb {
  opacity: 0.08 !important;
}

.space-orb:nth-child(1) {
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(30,60,120,0.8) 0%, transparent 70%) !important;
  top: -100px !important;
  left: -100px !important;
  animation-delay: 0s !important;
  animation-duration: 20s !important;
}

.space-orb:nth-child(2) {
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(60,20,100,0.7) 0%, transparent 70%) !important;
  top: 30% !important;
  right: -80px !important;
  animation-delay: -5s !important;
  animation-duration: 25s !important;
}

.space-orb:nth-child(3) {
  width: 350px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(10,40,80,0.6) 0%, transparent 70%) !important;
  bottom: -80px !important;
  left: 30% !important;
  animation-delay: -10s !important;
  animation-duration: 22s !important;
}

.space-orb:nth-child(4) {
  width: 300px !important;
  height: 300px !important;
  background: radial-gradient(circle, rgba(80,30,60,0.5) 0%, transparent 70%) !important;
  bottom: 20% !important;
  right: 20% !important;
  animation-delay: -15s !important;
  animation-duration: 28s !important;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%       { transform: translate(30px, -20px) scale(1.05); }
  50%       { transform: translate(-20px, 30px) scale(0.95); }
  75%       { transform: translate(20px, 20px) scale(1.02); }
}

/* Masaüstünde de orb'lar görünsün */
@media (min-width: 769px) {
  [data-theme="dark"] .space-orb {
    opacity: 0.22 !important;
  }
  [data-theme="light"] .space-orb {
    opacity: 0.06 !important;
  }
}

/* ── GlomaxGPT v3 DARK TEMA — Uzay renkleri ── */
[data-theme="dark"] {
  --v3-bg:            #050816;
  --v3-sidebar-bg:    rgba(5,8,22,.95);
  --v3-surface:       rgba(8,20,40,.85);
  --v3-surface2:      rgba(10,25,50,.7);
  --v3-card:          rgb(26 26 26);
  --v3-input-bg:      rgb(26 26 26);
  --v3-border:        rgba(120,120,120,.15);
  --v3-border2:       rgba(100,100,100,.2);
  --v3-text:          #e8f4ff;
  --v3-text2:         #B0B0B0;
  --v3-text3:         #808080;
  --v3-accent:        #ECECEC;
  --v3-accent2:       #CCCCCC;
  --v3-accent-grad:   linear-gradient(135deg, #3A3A3A 0%, #050816 100%);
  --v3-glow:          0 0 24px rgba(80,80,80,.25);
}

/* ══════════════════════════════════════════════════════════
   COMPOSER / INPUT ALANI — TÜM CİHAZLAR UYUM DÜZELTMESİ
   Taşma önleme, flex layout, mobil uyum, z-index düzeltme
══════════════════════════════════════════════════════════ */

/* Genel: composer-box taşmasın ama dropdown'lar görünsün */
.composer-box {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important; /* dropdown'lar için visible */
  position: relative !important;
  z-index: 1 !important;
}

/* input-area: yatay taşmayı önle */
.input-area {
  max-width: min(768px, 100%) !important;
  min-width: 0 !important;
  overflow: visible !important; /* dropdown'lar için visible */
  position: relative !important;
}

/* input-wrapper: mesaj listesinin üzerinde, tıklanabilir */
.input-wrapper {
  max-width: 100vw !important;
  min-width: 0 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}

/* messages-container: input-wrapper'ın altında */
.messages-container,
#messages.messages-container {
  position: relative !important;
  z-index: 1 !important;
}

/* composer-toolbar: butonlar görünsün, tıklanabilir olsun */
.composer-toolbar {
  min-width: 0 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10 !important;
}

/* composer-tools-left/right: min-width:0 ile flex taşmasını önle */
.composer-tools-left,
.composer-tools-right {
  min-width: 0 !important;
  flex-shrink: 1 !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Tüm toolbar butonları tıklanabilir olsun */
.composer-toolbar .btn-tool,
.composer-toolbar button,
.composer-add-btn,
.btn-send,
.btn-mic-composer {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}

/* Dropdown'lar en üstte */
.composer-add-dropdown,
.composer-mode-dropdown {
  z-index: 9999 !important;
  pointer-events: auto !important;
}

/* Textarea: yatay taşmayı önle */
.composer-textarea-wrap textarea,
.composer-box #message-input,
#message-input {
  max-width: 100% !important;
  min-width: 0 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* ── Mobil (≤768px) ── */
@media (max-width: 768px) {
  /* chat-main: flex column — input altta görünsün */
  .chat-main {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* messages-container: kalan alanı doldur, scroll içeride */
  .messages-container,
  #messages.messages-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* input-wrapper: alta yapış, dropdown'lar görünsün, tıklanabilir */
  .input-wrapper {
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0px 0px max(env(safe-area-inset-bottom, 0px), 12px) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
  }

  /* input-area: tam genişlik */
  .input-area {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* composer-box: mobilde tam genişlik */
  .composer-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    overflow: visible !important;
    box-shadow: 0 0px 5px rgb(115 115 115) !important;
  }

  /* composer-toolbar: mobilde sıkışmasın, butonlar görünsün */
  .composer-toolbar {
    padding: 0px 0px 0px !important;
    gap: 0px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* Tüm toolbar butonları mobilde tıklanabilir */
  .composer-toolbar .btn-tool,
  .composer-toolbar button,
  .composer-add-btn,
  .btn-send,
  .btn-mic-composer {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Textarea: mobilde max-height küçülsün, iOS zoom önle */
  .composer-textarea-wrap textarea,
  .composer-box #message-input {
    max-height: 160px !important;
    font-size: 16px !important;
  }

  /* Dropdown'lar mobilde görünsün */
  .composer-add-dropdown,
  .composer-mode-dropdown {
    z-index: 9999 !important;
    position: absolute !important;
  }
}

/* ── Çok küçük ekranlar (≤380px) ── */
@media (max-width: 380px) {
  .input-wrapper {
    padding: 6px 8px max(env(safe-area-inset-bottom, 10px), 10px) !important;
  }

  .composer-textarea-wrap {
    padding: 10px 12px 6px !important;
  }

  .composer-toolbar {
    padding: 4px 6px 4px !important;
    gap: 2px !important;
  }

  .composer-box #message-input {
    max-height: 120px !important;
  }
}

/* ── Tablet (769px–1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .input-area {
    max-width: min(680px, 100%) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   CHAT SAYFASI — body.chat-page
══════════════════════════════════════════════════════════ */

/* Chat sayfasında body scroll kilitlenir */
body.chat-page {
  overflow: hidden !important;
  height: 100dvh !important;
  overscroll-behavior: none !important;
  position: fixed !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   APP-WITH-SIDEBAR LAYOUT — tüm sidebar sayfaları
   (chat-page dahil, index.php'de app-with-sidebar var)
══════════════════════════════════════════════════════════ */

/* app-with-sidebar: tam yükseklik flex row */
.app-with-sidebar {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
  position: relative !important;
}

/* main-content: flex column, kalan alanı doldur */
/* app.css'deki body:has(.app-with-sidebar) kuralını override et */
.app-with-sidebar .main-content,
body:has(.app-with-sidebar) .main-content,
body:has(.app-with-sidebar):not(:has(#messages)) .main-content {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* page-main ve diğer sayfa ana alanları: scroll burada */
.app-with-sidebar .page-main,
.app-with-sidebar .settings-main,
.app-with-sidebar .profile-main,
.app-with-sidebar .pricing-main,
.app-with-sidebar .page-content-wrap {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

/* space-orbs: TAMAMEN KALDIRILDI — hiçbir sayfada gösterme */
.space-orbs,
.space-orb {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}

/* ══════════════════════════════════════════════════════════
   CHAT LAYOUT — chat-main + messages + input
══════════════════════════════════════════════════════════ */

/* chat-main: flex column, kalan alanı doldur */
.chat-main {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

/* messages-container: kalan alanı doldur, sadece içeride scroll */
.messages-container,
#messages.messages-container {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* input-wrapper: asla büyümesin, altta sabit */
.input-wrapper {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 20 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ── Mobil özel düzeltmeler (≤768px) ── */
@media (max-width: 768px) {

  /* Chat sayfasında html/body sabit */
  body.chat-page {
    position: fixed !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100dvh !important;
  }

  /* app-with-sidebar mobilde: flex column, tam yükseklik */
  .app-with-sidebar {
    height: 100dvh !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }

  /* app-with-sidebar olan sayfalarda body scroll kilitlenir */
  body:has(.app-with-sidebar) {
    overflow: hidden !important;
    height: 100dvh !important;
  }

  /* main-content mobilde: flex column */
  .app-with-sidebar .main-content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* topbar (inner-topbar) mobilde sticky kalır */
  .app-with-sidebar .main-content .topbar {
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 400 !important;
    display: flex !important;
  }

  /* page-main ve diğer sayfa alanları mobilde */
  .app-with-sidebar .page-main,
  .app-with-sidebar .settings-main,
  .app-with-sidebar .profile-main,
  .app-with-sidebar .pricing-main {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  /* chat-main mobilde: flex column, kalan alanı doldur */
  .chat-main,
  body.chat-page > main,
  body.chat-page > .chat-main {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    /* height: 100dvh KULLANMA — app-with-sidebar zaten 100dvh */
  }

  /* messages-container: scroll sadece burada */
  .messages-container,
  #messages.messages-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: 8px !important;
  }

  /* input-wrapper: mobilde altta sabit, asla kaybolmasın */
  .input-wrapper {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 8px 10px !important;
    padding-bottom: max(env(safe-area-inset-bottom, 8px), 8px) !important;
    box-sizing: border-box !important;
    background: var(--v3-bg) !important;
    overflow: visible !important;
    z-index: 20 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
  }

  /* input-area: tam genişlik */
  .input-area {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* composer-box: mobilde tam genişlik, yuvarlak köşe */
  .composer-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  /* Textarea: iOS zoom önleme (16px min) */
  .composer-textarea-wrap {
    padding: 12px 14px 6px !important;
  }

  .composer-textarea-wrap textarea,
  .composer-box #message-input,
  #message-input {
    font-size: 16px !important;
    max-height: 140px !important;
    min-height: 24px !important;
  }

  /* Toolbar: sıkışmasın, yatay scroll yok */
  .composer-toolbar {
    padding: 6px 10px 10px !important;
    gap: 2px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    align-items: center !important;
  }

  .composer-tools-left {
    flex: 1 !important;
    min-width: 0 !important;
    gap: 1px !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }

  .composer-tools-right {
    flex-shrink: 0 !important;
    gap: 4px !important;
    align-items: center !important;
  }

  /* Araç butonları mobilde küçük ama tıklanabilir */
  .composer-toolbar .btn-tool {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-shrink: 0 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Etiketli butonlar: etiketi gizle, sadece ikon */
  .btn-tool-label,
  .btn-deep-think-label,
  .btn-tone-label,
  .btn-length-label {
    display: none !important;
  }

  /* Mod seçici butonu: etiketi gizle */
  .composer-mode-label {
    display: none !important;
  }

  /* Gönder butonu: yuvarlak, belirgin */
  .btn-send {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Composer char count: gizle */
  .composer-char-count,
  #composer-char-count {
    display: none !important;
  }

  /* Mod seçici: küçük */
  .composer-mode-btn {
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
  }

  /* Dropdown'lar: ekrandan taşmasın */
  .composer-add-dropdown {
    left: 0 !important;
    right: auto !important;
    width: min(240px, 90vw) !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

  .composer-mode-dropdown {
    right: 0 !important;
    left: auto !important;
    width: min(260px, 90vw) !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

  .composer-tone-dropdown,
  .composer-length-dropdown,
  .composer-template-dropdown {
    bottom: calc(100% + 8px) !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    width: min(240px, 90vw) !important;
  }

  /* input-footer: gizle (yer kazanmak için) */
  .input-footer {
    display: none !important;
  }

  /* Topbar mobilde gizli */
  .topbar {
    display: none !important;
  }

  /* Mobile header görünür */
  .mobile-page-header {
    display: flex !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 300 !important;
    flex-shrink: 0 !important;
  }

  /* Mesajlar tam genişlik */
  .messages-container > .message,
  .messages-container > .message-wrapper {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Kullanıcı mesajı mobilde daha geniş */
  .message.user .message-inner,
  .message.user .msg-content {
    max-width: 90% !important;
  }

  /* Welcome screen mobilde */
  .welcome-screen {
    padding: 20px 16px !important;
    padding-top: 40px !important;
  }

  .welcome-title,
  #welcome-greeting {
    font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
    margin-bottom: 16px !important;
  }

  /* Öneri kartları mobilde 2 kolon */
  .suggestion-pills {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .suggestion-chip {
    padding: 9px 12px !important;
    font-size: 0.78rem !important;
  }
}

/* ── Çok küçük ekranlar (≤380px) ── */
@media (max-width: 380px) {
  .composer-toolbar .btn-tool {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .btn-send {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .suggestion-pills {
    grid-template-columns: 1fr !important;
  }

  /* Çok küçük ekranda bazı araçları gizle */
  .composer-tools-left .btn-tool:nth-child(n+4) {
    display: none !important;
  }
}

/* ── Klavye açıkken layout koruması (iOS/Android) ── */
@supports (height: 100dvh) {
  html, body {
    height: 100dvh !important;
  }

  .app-with-sidebar,
  .chat-main {
    height: 100dvh !important;
  }
}