/*


 * GlomaxGPT — Root CSS v3.0 (Base Design Tokens)


 * ============================================================


 * Base color and layout tokens; platform-polish.css applies the active theme palette.


 * Yükleme sırası: HER ZAMAN ilk CSS dosyası olmalıdır.


 * ============================================================


 */





/* Dark palette is the safe baseline; the shared theme layer overrides it for light mode. */


:root,


html,


[data-theme="dark"],


html:not([data-theme="light"]) {





  /* ── Ana Arka Planlar ── */


  --bg-main:          #0F1115;   /* Ana arka plan */


  --bg-sidebar:       #151820;   /* Sol menü ve ana paneller */


  --bg-surface:       #1D212B;   /* Kartlar ve mesaj yazma alanı */


  --bg-elevated:      #252B36;   /* Hover ve seçili yüzeyler */


  --bg-input:         #1D212B;   /* Mesaj yazma alanı */


  --bg-hover:         #252B36;   /* Hover durumu */


  --bg-active:        #2D3441;   /* Aktif/seçili durum */





  /* ── Metin Renkleri ── */


  --text-primary:     #EEF1F6;   /* Ana metin */


  --text-secondary:   #ADB6C5;   /* İkincil metin ve ikonlar */


  --text-muted:       #6B7A92;   /* Soluk metin */


  --text-disabled:    #4A5568;   /* Devre dışı metin */


  --text-placeholder: #5A6A82;   /* Placeholder metni */





  /* ── İkon Renkleri ── */


  --icon-default:     #ADB6C5;   /* Varsayılan ikon */


  --icon-active:      #EEF1F6;   /* Aktif ikon */


  --icon-muted:       #6B7A92;   /* Soluk ikon */





  /* ── Kenarlıklar ── */


  --border-subtle:    #1E2330;   /* Çok ince kenarlık */


  --border-default:   #303744;   /* Standart kenarlık */


  --border-strong:    #3D4860;   /* Güçlü kenarlık */


  --focus-ring:       #818CF8;   /* Odak halkası */





  /* ── Marka Vurgu Renkleri ── */


  --accent:           #818CF8;   /* Ana marka vurgu */


  --accent-hover:     #A5B4FC;   /* Vurgu hover */


  --accent-soft:      rgba(129,140,248,0.12);  /* Yumuşak vurgu arka plan */


  --accent-rgb:       129,140,248;


  --accent-grad:      linear-gradient(135deg, #818CF8, #A5B4FC);  /* Gradient vurgu */


  --accent-purple:    #818CF8;   /* Mor vurgu alias */





  /* ── Primary Buton ── */


  --primary-bg:       #818CF8;


  --primary-bg-solid: #818CF8;


  --primary-text:     #FFFFFF;


  --primary-hover:    #A5B4FC;





  /* ── Sidebar ── */


  --sidebar-width:           260px;


  --sidebar-collapsed-width: 60px;


  --sidebar-hover:    #252B36;


  --sidebar-active:   #2D3441;


  --sidebar-border:   #303744;





  /* ── Mesaj Balonları ── */


  --user-bubble-bg:     #1D212B;


  --user-bubble-border: #303744;


  --ai-bubble-bg:       transparent;





  /* ── Durum Renkleri ── */


  --color-success:    #10B981;


  --color-error:      #EF4444;


  --color-warning:    #F59E0B;


  --color-info:       #3B82F6;


  --color-success-bg: rgba(16,185,129,0.12);


  --color-error-bg:   rgba(239,68,68,0.12);


  --color-warning-bg: rgba(245,158,11,0.12);


  --color-info-bg:    rgba(59,130,246,0.12);





  /* ── Gölgeler ── */


  --shadow-sm:        0 1px 3px rgba(0,0,0,0.4);


  --shadow-md:        0 4px 16px rgba(0,0,0,0.5);


  --shadow-lg:        0 8px 32px rgba(0,0,0,0.6);


  --shadow-xl:        0 16px 64px rgba(0,0,0,0.7);





  /* ── Glow efektleri ── */


  --glow-accent:      0 0 20px rgba(129,140,248,0.15);


  --glow-strong:      0 0 30px rgba(129,140,248,0.25);


  --glow-blue:        0 0 20px rgba(129,140,248,0.25);  /* Alias for glow-accent */





  /* ── Kod Blokları ── */


  --code-bg:          #0D1117;


  --code-header-bg:   #161B22;


  --code-border:      #30363D;


  --code-text:        #C9D1D9;





  /* ── Input ── */


  --input-bg:         #1D212B;


  --input-border:     #303744;


  --input-radius:     16px;





  /* ── Topbar ── */


  --topbar-bg:        transparent;


  --topbar-border:    transparent;


  --topbar-height:    50px;





  /* ── Scrollbar ── */


  --scrollbar-track:  transparent;


  --scrollbar-thumb:  #303744;





  /* ── Glass efekti ── */


  --glass-bg:         rgba(15,17,21,0.92);


  --glass-border:     #303744;





  /* ── Z-index hiyerarşisi ── */


  --z-topbar:         100;


  --z-overlay:        400;


  --z-sidebar:        500;


  --z-modal:          600;


  --z-tooltip:        700;





  /* ── Eski değişken aliasları (geriye uyumluluk) ── */


  --bg:               #0F1115;


  --bg2:              #151820;


  --bg3:              #1D212B;


  --main-bg:          #0F1115;


  --surface:          #1D212B;


  --surface2:         #252B36;


  --surface3:         #2D3441;


  --card:             #1D212B;


  --card2:            #252B36;


  --sidebar-bg:       #151820;


  --border:           #303744;


  --border2:          #3D4860;


  --border-control:   #303744;


  --hover:            #252B36;


  --text:             #EEF1F6;


  --text1:            #EEF1F6;


  --text2:            #ADB6C5;


  --text3:            #6B7A92;


  --text4:            #4A5568;


  --msg-user-bg:      #1D212B;


  --msg-ai-bg:        transparent;


  --accent-text:      #FFFFFF;


  --accent-color:     #818CF8;


  --accent2:          #A5B4FC;


  --code-header:      #161B22;





  /* ── v3 aliasları ── */


  --v3-bg:            #0F1115;


  --v3-sidebar-bg:    #151820;


  --v3-surface:       #1D212B;


  --v3-surface2:      #252B36;


  --v3-input-bg:      #1D212B;


  --v3-border:        #303744;


  --v3-text:          #EEF1F6;


  --v3-text2:         #ADB6C5;


  --v3-text3:         #6B7A92;


  --v3-text4:         #4A5568;


  --v3-accent:        #818CF8;


  --v3-hover:         #252B36;


  --v3-sidebar-hover: #252B36;


  --v3-sidebar-active:#2D3441;


  --v3-user-bubble:   #1D212B;


  --v3-border2:       #3D4860;


  --v3-card:          #1D212B;


  --v3-card2:         #252B36;


  --gx-msg-max:       800px;


  --gx-content-max:   860px;    /* Image-gen ve diger sayfalarda maks genislik */


  --gx-composer-max:  780px;    /* Input alani maks genislik */





  /* ── Diğer eski aliaslar ── */


  --bg-hover:         #252B36;


  --bg-active:        #2D3441;


  --bg-elevated:      #252B36;


}





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


   LIGHT THEME PALETTE — Aydınlık Tema Tokenları


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


[data-theme="light"],


html[data-theme="light"],


body[data-theme="light"] {


  color-scheme: light;





  /* ── Ana Arka Planlar ── */


  --bg-main:          #f8fafc;   /* Temiz aydınlık arka plan */


  --bg-sidebar:       #ffffff;   /* Beyaz sidebar */


  --bg-surface:       #ffffff;   /* Beyaz yüzey / kartlar */


  --bg-elevated:      #f1f5f9;   /* Hover yüzeyi */


  --bg-input:         #ffffff;   /* Input arka planı */


  --bg-hover:         rgba(0, 0, 0, 0.04);


  --bg-active:        rgba(0, 0, 0, 0.06);





  /* ── Metin Renkleri ── */


  --text-primary:     #0f172a;   /* Koyu okunabilir metin */


  --text-secondary:   #475569;   /* İkincil metin */


  --text-muted:       #94a3b8;   /* Soluk metin */


  --text-disabled:    #cbd5e1;


  --text-placeholder: #94a3b8;





  /* ── İkon Renkleri ── */


  --icon-default:     #475569;


  --icon-active:      #0f172a;


  --icon-muted:       #94a3b8;





  /* ── Kenarlıklar ── */


  --border-subtle:    rgba(0, 0, 0, 0.06);


  --border-default:   rgba(0, 0, 0, 0.10);


  --border-strong:    rgba(0, 0, 0, 0.16);


  --focus-ring:       var(--accent, #6366f1);





  /* ── Sidebar ── */


  --sidebar-hover:    rgba(0, 0, 0, 0.04);


  --sidebar-active:   rgba(0, 0, 0, 0.06);


  --sidebar-border:   rgba(0, 0, 0, 0.08);





  /* ── Mesaj Balonları ── */


  --user-bubble-bg:     #f1f5f9;


  --user-bubble-border: rgba(0, 0, 0, 0.06);


  --ai-bubble-bg:       transparent;





  /* ── Gölgeler ── */


  --shadow-sm:        0 1px 3px rgba(0,0,0,0.06);


  --shadow-md:        0 4px 16px rgba(0,0,0,0.08);


  --shadow-lg:        0 8px 32px rgba(0,0,0,0.10);


  --shadow-xl:        0 16px 64px rgba(0,0,0,0.14);





  /* ── Kod Blokları ── */


  --code-bg:          #f1f5f9;


  --code-header-bg:   #e2e8f0;


  --code-border:      rgba(0, 0, 0, 0.10);


  --code-text:        #0f172a;





  /* ── Input ── */


  --input-bg:         #ffffff;


  --input-border:     rgba(0, 0, 0, 0.12);





  /* ── Topbar ── */


  --topbar-bg:        rgba(255, 255, 255, 0.94);


  --topbar-border:    rgba(0, 0, 0, 0.06);





  /* ── Scrollbar ── */


  --scrollbar-thumb:  rgba(0, 0, 0, 0.18);





  /* ── Glass ── */


  --glass-bg:         rgba(255, 255, 255, 0.92);


  --glass-border:     rgba(0, 0, 0, 0.08);





  /* ── Geriye uyumluluk aliasları ── */


  --bg:               #f8fafc;


  --bg2:              #ffffff;


  --bg3:              #ffffff;


  --main-bg:          #f8fafc;


  --surface:          #ffffff;


  --surface2:         #f1f5f9;


  --surface3:         #e2e8f0;


  --card:             #ffffff;


  --card2:            #f8fafc;


  --sidebar-bg:       #ffffff;


  --border:           rgba(0, 0, 0, 0.10);


  --border2:          rgba(0, 0, 0, 0.16);


  --border-control:   rgba(0, 0, 0, 0.10);


  --hover:            rgba(0, 0, 0, 0.04);


  --text:             #0f172a;


  --text1:            #0f172a;


  --text2:            #475569;


  --text3:            #94a3b8;


  --text4:            #cbd5e1;


  --msg-user-bg:      #f1f5f9;


  --msg-ai-bg:        transparent;





  /* ── v3 aliasları ── */


  --v3-bg:            #f8fafc;


  --v3-sidebar-bg:    #ffffff;


  --v3-surface:       #ffffff;


  --v3-surface2:      #f1f5f9;


  --v3-input-bg:      #ffffff;


  --v3-border:        rgba(0, 0, 0, 0.10);


  --v3-text:          #0f172a;


  --v3-text2:         #475569;


  --v3-text3:         #94a3b8;


  --v3-text4:         #cbd5e1;


  --v3-hover:         rgba(0, 0, 0, 0.04);


  --v3-sidebar-hover: rgba(0, 0, 0, 0.04);


  --v3-sidebar-active:rgba(0, 0, 0, 0.06);


  --v3-user-bubble:   #f1f5f9;


  --v3-border2:       rgba(0, 0, 0, 0.16);


  --v3-card:          #ffffff;


  --v3-card2:         #f8fafc;


}





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


   FOUC & DİNAMİK TEMA TEMELİ


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


html {


  background: var(--bg-main) !important;


}





body {


  background: var(--bg-main) !important;


}





html[data-theme="dark"],


html:not([data-theme="light"]) {


  color-scheme: dark;


}





html[data-theme="light"] {


  color-scheme: light;


}





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


   RESET & BASE


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


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }





html {


  background: var(--bg-main);


  color: var(--text-primary);


  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;


  font-size: 16px;


  line-height: 1.5;


  -webkit-font-smoothing: antialiased;


  -moz-osx-font-smoothing: grayscale;


  height: 100%;


}





body {


  background: var(--bg-main);


  color: var(--text-primary);


  min-height: 100vh;


  height: 100%;


  overflow: hidden;


}





a { color: inherit; text-decoration: none; }


a:hover { text-decoration: none; }


button { cursor: pointer; border: none; background: none; font-family: inherit; }


input, textarea, select { font-family: inherit; }


img { max-width: 100%; display: block; }





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


   LAYOUT — App shell


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


.app-with-sidebar {


  display: flex;


  height: 100dvh;


  overflow: hidden;


  background: var(--bg-main);


}





/* ── Sidebar ── */


#sidebar,


.sidebar {


  width: var(--sidebar-width, 260px);


  min-width: var(--sidebar-width, 260px);


  max-width: var(--sidebar-width, 260px);


  height: 100dvh;


  background: var(--bg-sidebar);


  display: flex;


  flex-direction: column;


  flex-shrink: 0;


  overflow: hidden;


  transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease, transform 0.28s cubic-bezier(0.4,0,0.2,1);


  position: relative;


  z-index: 500;


  border-right: 1px solid var(--border-subtle);


}





#sidebar.collapsed,


.sidebar.collapsed {


  width: var(--sidebar-collapsed-width, 60px);


  min-width: var(--sidebar-collapsed-width, 60px);


  max-width: var(--sidebar-collapsed-width, 60px);


}





/* ── Main content ── */


#main,


.main-content {


  flex: 1;


  min-width: 0;


  display: flex;


  flex-direction: column;


  height: 100dvh;


  overflow: hidden;


  background: var(--bg-main);


}





/* ── Topbar ── */


.topbar,


header.topbar,


#topbar {


  height: var(--topbar-height, 56px);


  min-height: var(--topbar-height, 56px);


  display: flex;


  align-items: center;


  padding: 0 12px;


  background: var(--topbar-bg, transparent);


  border-bottom: none;


  flex-shrink: 0;


  width: 100%;


  position: relative;


  z-index: 50;


}





/* ── Chat messages area ── */


.chat-messages,


#chat-messages {


  flex: 1;


  overflow-y: auto;


  overflow-x: hidden;


  padding: 24px 0 8px;


  scroll-behavior: smooth;


  contain: layout style;


}





/* ── Input area ── */


#input-area,


.input-area {


  flex-shrink: 0;


  padding: 8px 16px 20px;


  background: var(--bg-main);


}





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


   SCROLLBAR


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


* {


  scrollbar-width: thin;


  scrollbar-color: var(--scrollbar-thumb) transparent;


}


::-webkit-scrollbar { width: 5px; height: 5px; }


::-webkit-scrollbar-track { background: transparent; }


::-webkit-scrollbar-thumb {


  background: var(--scrollbar-thumb);


  border-radius: 3px;


}


::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }





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


   SIDEBAR ITEMS


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


.sidebar-nav-item {


  display: flex;


  align-items: center;


  gap: 10px;


  padding: 8px 12px;


  border-radius: 8px;


  color: var(--text-secondary);


  font-size: 14px;


  font-weight: 400;


  transition: background 0.15s, color 0.15s;


  cursor: pointer;


  text-decoration: none;


  white-space: nowrap;


  overflow: hidden;


}





.sidebar-nav-item:hover {


  background: var(--sidebar-hover);


  color: var(--text-primary);


  text-decoration: none;


}





.sidebar-nav-item.active {


  background: var(--sidebar-active);


  color: var(--text-primary);


  font-weight: 500;


}





.sidebar-nav-item svg { flex-shrink: 0; color: var(--icon-default); }


.sidebar-nav-item:hover svg { color: var(--icon-active); }


.sidebar-nav-item.active svg { color: var(--accent); }





/* ── Sidebar nav odak durumu ── */


.sidebar-nav-item:focus-visible {


  outline: 2px solid var(--accent);


  outline-offset: -2px;


}





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


   MESAJ LAYOUT — ChatGPT birebir


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


.msg-wrapper {


  display: flex;


  padding: 4px 20px;


  gap: 12px;


  max-width: var(--gx-msg-max, 800px);


  margin: 0 auto;


  width: 100%;


  box-sizing: border-box;


  align-items: flex-start;


  flex-shrink: 0;


}





/* Kullanıcı mesajı — SAĞDA */


.msg-wrapper.user {


  flex-direction: row-reverse;


  align-items: flex-end;


}





/* AI mesajı — SOLDA */


.msg-wrapper.ai,


.msg-wrapper.assistant {


  flex-direction: row;


  align-items: flex-start;


}





.msg-wrapper + .msg-wrapper { margin-top: 2px; }


.msg-wrapper.ai + .msg-wrapper.user,


.msg-wrapper.assistant + .msg-wrapper.user { margin-top: 16px; }


.msg-wrapper.user + .msg-wrapper.ai,


.msg-wrapper.user + .msg-wrapper.assistant { margin-top: 16px; }





/* Avatar */


.msg-avatar {


  width: 32px;


  height: 32px;


  border-radius: 50%;


  flex-shrink: 0;


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 12px;


  font-weight: 700;


  overflow: hidden;


}





.msg-avatar.user {


  background: var(--bg-elevated);


  color: var(--text-primary);


  border: 1px solid var(--border-default);


}





.msg-avatar.ai {


  background: var(--bg-surface);


  color: var(--accent);


  border: 1px solid var(--border-default);


}





.msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }





/* İçerik */


.msg-content { flex: 1; min-width: 0; }





/* Kullanıcı balonu */


.msg-wrapper.user .msg-bubble {


  display: inline-block;


  background: var(--user-bubble-bg) !important;


  color: var(--text-primary) !important;


  padding: 10px 16px !important;


  border-radius: 18px 18px 4px 18px !important;


  max-width: 80%;


  margin-left: auto;


  border: 1px solid var(--border-default) !important;


  box-shadow: none !important;


  font-size: 0.9375rem;


  line-height: 1.65;


  word-break: break-word;


}





/* AI balonu — şeffaf */


.msg-wrapper.ai .msg-bubble,


.msg-wrapper.assistant .msg-bubble {


  background: none !important;


  border: none !important;


  box-shadow: none !important;


  padding: 2px 0 0 0 !important;


  border-radius: 0 !important;


  color: var(--text-primary) !important;


  font-size: 0.9375rem;


  line-height: 1.65;


  word-break: break-word;


}





/* Model etiketi */


.msg-model-label {


  display: flex;


  align-items: center;


  gap: 5px;


  font-size: 12px;


  color: var(--text-muted);


  margin-bottom: 4px;


  font-weight: 500;


}





/* Mesaj aksiyonları */


.msg-actions {


  display: flex;


  gap: 2px;


  opacity: 0;


  transition: opacity 0.15s;


  margin-top: 4px;


}





.msg-wrapper:hover .msg-actions { opacity: 1; }


.msg-wrapper.user .msg-actions { justify-content: flex-end; }





.msg-action-btn {


  display: flex;


  align-items: center;


  justify-content: center;


  width: 28px;


  height: 28px;


  border-radius: 6px;


  background: none;


  border: none;


  color: var(--icon-default);


  cursor: pointer;


  transition: background 0.15s, color 0.15s;


}





.msg-action-btn:hover {


  background: var(--bg-hover);


  color: var(--text-primary);


}





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


   INPUT ALANI


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


.gx-gemini-bar,


#chat-input-container {


  background: var(--input-bg) !important;


  border-radius: var(--input-radius, 16px) !important;


  border: 1px solid var(--border-default) !important;


  padding: 12px 16px !important;


  max-width: 800px;


  margin: 0 auto;


  width: 100%;


  box-shadow: none !important;


  transition: border-color 0.2s;


}





.gx-gemini-bar:focus-within,


#chat-input-container:focus-within {


  border-color: var(--border-strong) !important;


}





#message-input,


.gx-gemini-bar textarea {


  background: transparent !important;


  border: none !important;


  outline: none !important;


  color: var(--text-primary) !important;


  font-size: 1rem;


  line-height: 1.5;


  resize: none;


  width: 100%;


  max-height: 200px;


  overflow-y: auto;


}





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





/* Gönder butonu */


#send-btn,


.gx-send-btn {


  width: 36px;


  height: 36px;


  border-radius: 8px;


  background: var(--accent) !important;


  color: #FFFFFF !important;


  border: none;


  display: flex;


  align-items: center;


  justify-content: center;


  cursor: pointer;


  flex-shrink: 0;


  transition: background 0.15s, opacity 0.15s;


}





#send-btn:hover { background: var(--accent-hover) !important; }


#send-btn:disabled { opacity: 0.4; cursor: not-allowed; background: var(--bg-elevated) !important; }





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


   BUTONLAR


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


.btn-primary {


  display: inline-flex;


  align-items: center;


  justify-content: center;


  gap: 6px;


  padding: 8px 16px;


  border-radius: 8px;


  background: var(--accent);


  color: #FFFFFF;


  font-size: 14px;


  font-weight: 500;


  border: none;


  cursor: pointer;


  transition: background 0.15s, opacity 0.15s;


  text-decoration: none;


}





.btn-primary:hover { background: var(--accent-hover); text-decoration: none; color: #FFFFFF; }





.btn-secondary {


  display: inline-flex;


  align-items: center;


  justify-content: center;


  gap: 6px;


  padding: 8px 16px;


  border-radius: 8px;


  background: var(--bg-surface);


  color: var(--text-primary);


  font-size: 14px;


  font-weight: 500;


  border: 1px solid var(--border-default);


  cursor: pointer;


  transition: background 0.15s;


  text-decoration: none;


}





.btn-secondary:hover { background: var(--bg-elevated); text-decoration: none; color: var(--text-primary); }





.btn-icon {


  display: flex;


  align-items: center;


  justify-content: center;


  width: 36px;


  height: 36px;


  border-radius: 8px;


  background: none;


  border: none;


  color: var(--icon-default);


  cursor: pointer;


  transition: background 0.15s, color 0.15s;


}





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





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


   KARTLAR


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


.card {


  background: var(--bg-surface);


  border: 1px solid var(--border-default);


  border-radius: 12px;


  padding: 16px;


}





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


   FORMLAR


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


.form-input,


input[type="text"],


input[type="email"],


input[type="password"],


input[type="number"],


input[type="search"],


textarea,


select {


  background: var(--bg-surface);


  border: 1px solid var(--border-default);


  border-radius: 8px;


  color: var(--text-primary);


  font-size: 14px;


  padding: 8px 12px;


  outline: none;


  transition: border-color 0.15s, box-shadow 0.15s;


  width: 100%;


  color-scheme: dark;


}





.form-input:focus,


input[type="text"]:focus,


input[type="email"]:focus,


input[type="password"]:focus,


textarea:focus {


  border-color: var(--accent);


  box-shadow: 0 0 0 2px var(--accent-soft);


}





.form-input::placeholder { color: var(--text-placeholder); }





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


   MODALLER


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


.modal-overlay {


  position: fixed;


  inset: 0;


  background: rgba(0,0,0,0.65);


  backdrop-filter: blur(4px);


  -webkit-backdrop-filter: blur(4px);


  z-index: 1000;


  display: flex;


  align-items: center;


  justify-content: center;


}





.modal-box {


  background: var(--bg-surface);


  border: 1px solid var(--border-default);


  border-radius: 14px;


  padding: 24px;


  max-width: 480px;


  width: 90%;


  box-shadow: var(--shadow-xl);


}





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


   TOAST BİLDİRİMLERİ


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


.toast {


  position: fixed;


  bottom: 24px;


  left: 50%;


  transform: translateX(-50%);


  background: var(--bg-elevated);


  color: var(--text-primary);


  border: 1px solid var(--border-default);


  border-radius: 10px;


  padding: 10px 18px;


  font-size: 14px;


  z-index: 9999;


  box-shadow: var(--shadow-md);


}





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


   KOD BLOKLARI


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


pre, code {


  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;


}





pre {


  background: var(--code-bg);


  border: 1px solid var(--code-border);


  border-radius: 8px;


  overflow-x: auto;


  max-width: 100%;


}





code {


  background: var(--code-bg);


  color: var(--code-text);


  padding: 2px 6px;


  border-radius: 4px;


  font-size: 0.875em;


}





pre code {


  background: none;


  padding: 0;


  font-size: 0.875rem;


  line-height: 1.7;


}





/* ── Markdown içerik ── */


.msg-bubble h1, .msg-bubble h2, .msg-bubble h3,


.msg-bubble h4, .msg-bubble h5, .msg-bubble h6 {


  color: var(--text-primary);


  margin: 1em 0 0.5em;


  font-weight: 600;


  line-height: 1.3;


}





.msg-bubble p { margin: 0.5em 0; }


.msg-bubble p:first-child { margin-top: 0; }


.msg-bubble p:last-child { margin-bottom: 0; }





.msg-bubble ul, .msg-bubble ol {


  padding-left: 1.5em;


  margin: 0.5em 0;


}





.msg-bubble li { margin: 0.25em 0; line-height: 1.6; }





.msg-bubble a {


  color: var(--accent);


  text-decoration: underline;


  text-underline-offset: 2px;


}





.msg-bubble a:hover { color: var(--accent-hover); }





.msg-bubble blockquote {


  border-left: 3px solid var(--accent);


  margin: 0.75em 0;


  padding: 0.5em 1em;


  background: var(--accent-soft);


  border-radius: 0 6px 6px 0;


  color: var(--text-secondary);


}





.msg-bubble table {


  border-collapse: collapse;


  width: 100%;


  max-width: 100%;


  overflow-x: auto;


  display: block;


  margin: 0.75em 0;


}





.msg-bubble th, .msg-bubble td {


  padding: 8px 12px;


  border: 1px solid var(--border-default);


  text-align: left;


  font-size: 0.875rem;


}





.msg-bubble th {


  background: var(--bg-elevated);


  font-weight: 600;


  color: var(--text-primary);


}





.msg-bubble td { color: var(--text-secondary); }





/* ── Kaynak / referans kutucukları ── */


.gx-source-card, .source-card {


  background: var(--bg-surface);


  border: 1px solid var(--border-default);


  border-radius: 10px;


  padding: 10px 14px;


  margin: 6px 0;


  font-size: 0.83rem;


  color: var(--text-secondary);


  display: flex;


  align-items: flex-start;


  gap: 8px;


  transition: background 0.15s;


  text-decoration: none;


}





.gx-source-card:hover, .source-card:hover {


  background: var(--bg-elevated);


  color: var(--text-primary);


}




.gx-answer-sources {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 7px 10px;

  margin-top: 12px;

  color: var(--text-muted);

  font-size: 0.76rem;

}



.gx-answer-sources-label {

  flex: 0 0 auto;

  font-weight: 600;

}



.gx-answer-sources-list {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}



.gx-answer-source {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  max-width: 190px;

  min-height: 28px;

  padding: 3px 9px 3px 6px;

  overflow: hidden;

  border: 1px solid var(--border-default);

  border-radius: 999px;

  background: var(--bg-surface);

  color: var(--text-secondary);

  text-decoration: none;

  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

}



.gx-answer-source:hover {

  border-color: var(--border-strong);

  background: var(--bg-elevated);

  color: var(--text-primary);

}



.gx-answer-source-icon {

  position: relative;

  display: grid;

  width: 16px;

  height: 16px;

  flex: 0 0 16px;

  place-items: center;

  overflow: hidden;

  border-radius: 50%;

  background: var(--bg-elevated);

}



.gx-answer-source-icon img {

  display: block;

  width: 16px;

  height: 16px;

  border-radius: 50%;

}



.gx-answer-source-fallback {

  color: var(--text-muted);

  font-size: 0.65rem;

  font-weight: 700;

}



.gx-answer-source-name {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



/* ── İşlem durumu ── */

.gx-thinking-indicator, .typing-indicator {

  color: var(--text-muted);


  font-size: 0.875rem;


  display: flex;


  align-items: center;


  gap: 6px;


}





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


   HAREKET AZALTMA


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


@media (prefers-reduced-motion: reduce) {


  *, *::before, *::after {


    animation-duration: 0.01ms !important;


    animation-iteration-count: 1 !important;


    transition-duration: 0.01ms !important;


  }


}





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


   YARDIMCI SINIFLAR


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


.hidden { display: none !important; }


.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }


.flex { display: flex; }


.flex-col { display: flex; flex-direction: column; }


.items-center { align-items: center; }


.justify-center { justify-content: center; }


.gap-2 { gap: 8px; }


.gap-4 { gap: 16px; }


.w-full { width: 100%; }


.h-full { height: 100%; }


.min-w-0 { min-width: 0; }


.flex-1 { flex: 1; }


.flex-shrink-0 { flex-shrink: 0; }


.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.text-sm { font-size: 14px; }


.text-xs { font-size: 12px; }


.font-medium { font-weight: 500; }


.font-bold { font-weight: 700; }


.opacity-0 { opacity: 0; }


.opacity-50 { opacity: 0.5; }


.pointer-events-none { pointer-events: none; }


.cursor-pointer { cursor: pointer; }


.rounded { border-radius: 8px; }


.rounded-full { border-radius: 9999px; }





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


   MOBİL LAYOUT


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


@media (max-width: 768px) {


  #sidebar,


  .sidebar {


    position: fixed;


    top: 0;


    left: 0;


    height: 100dvh;


    z-index: 9999;


    transform: translateX(-100%);


    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), visibility 0.28s;


    visibility: hidden;


    width: 85vw !important;


    min-width: 260px !important;


    max-width: 320px !important;


  }





  #sidebar.open,


  .sidebar.open,


  body.sidebar-open #sidebar,


  body.sidebar-open .sidebar {


    transform: translateX(0);


    visibility: visible;


  }





  #sidebar-overlay,


  .sidebar-overlay {


    display: none;


    position: fixed;


    inset: 0;


    background: rgba(0,0,0,0.55);


    z-index: 9998;


    cursor: pointer;


    transition: opacity 0.28s ease;


  }





  body.sidebar-open #sidebar-overlay,


  body.sidebar-open .sidebar-overlay {


    display: block;


  }





  .msg-wrapper { padding: 4px 12px; }


  .msg-wrapper.user .msg-bubble { max-width: 88% !important; }





  #chat-input-container,


  .gx-gemini-bar {


    border-radius: 14px !important;


  }


}





@media (min-width: 769px) {


  .sidebar-toggle-btn { display: none !important; }


  .mobile-page-header { display: none !important; }


}