/* ═══════════════════════════════════════════════════════════════════





   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: 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;





  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;



#111625

  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;

  position: relative;

  width: 100%;

  height: 56px;

  background: var(--v3-bg);

  border-bottom: 1px solid var(--v3-border);

  z-index: 100;

  align-items: center;

  justify-content: space-between;

  padding: 0 12px;

  gap: 8px;

  flex-shrink: 0;

  box-sizing: border-box;

}











.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;





}











/* ─â#3e73e61c€ 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: 40px 20px 20px !important;





  text-align: center !important;





  animation: v3FadeIn 0.35s ease both !important;





  min-height: 0 !important;





  max-width: 768px !important;





  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;





}











.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;





}











.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: 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, 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: none;





    pointer-events: none;





  }











  .sidebar-overlay.active {





    pointer-events: auto;





  }











  /* Mobil header görünür */





    .mobile-page-header {

    display: flex !important;

    position: relative !important;

    flex-shrink: 0 !important;

    width: 100% !important;

    height: 56px !important;

    min-height: 56px !important;

    top: auto !important;

    left: auto !important;

    right: auto !important;

  }











  /* Chat main mobilde tam ekran flex column */





  .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:     #2f2f2f;





  --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: 18px !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: visible !important;





  position: relative !important;





  min-width: 0 !important;





  z-index: 1 !important;





}











.composer-box:focus-within {





  border-color: var(--v3-border2) !important;





  box-shadow: 0 4px 28px rgba(0,0,0,0.13) !important;





}











[data-theme="dark"] .composer-box:focus-within {





  box-shadow: 0 4px 28px rgba(0,0,0,0.45) !important;





}











/* Textarea sarmalayıcı */





.composer-textarea-wrap {





  padding: 14px 16px 6px !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.93rem !important;





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





  line-height: 1.6 !important;





  resize: none !important;





  min-height: 26px !important;





  max-height: 220px !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;





}











/* Alt toolbar */





.composer-toolbar {





  display: flex !important;





  align-items: center !important;





  justify-content: space-between !important;





  padding: 6px 10px 10px !important;





  gap: 6px !important;





}











.composer-tools-left,





.composer-tools-right {





  display: flex !important;





  align-items: center !important;





  gap: 3px !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 ── */





.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.06) !important;





}











.btn-send:disabled {





  background: var(--v3-btn-disabled) !important;





  cursor: not-allowed !important;





  opacity: 0.45 !important;





}











/* Durdur (stop) durumu */





.btn-send.btn-stop {





  background: #ef4444 !important;





  opacity: 1 !important;





  cursor: pointer !important;





}











.btn-send.btn-stop:hover {





  background: #dc2626 !important;





  transform: scale(1.06) !important;





}











/* ── Responsive: Mobil ── */





@media (max-width: 768px) {





  .composer-box {





    border-radius: 16px !important;





  }











  .composer-toolbar {





    padding: 8px 0px 4px !important;





    gap: 0px !important;





  }











  .composer-tools-left,





  .composer-tools-right {





    gap: 2px !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;





}





/* ── 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);





}