/**

 * Glomax GPT — Theme v2

 * Siyah karanlık tema / beyaz aydınlık tema

 * ChatGPT-style clean, premium design

 */

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

   DARK TEMA — Varsayılan (data-theme="dark") — TAM SİYAH

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

:root {

  --bg:              #0d0d0d;

  --bg2:             #171717;

  --main-bg:         #0d0d0d;

  --surface:         #1a1a1a;

  --surface2:        #252525;

  --surface3:        #333333;

  --card:            #1a1a1a;

  --card2:           #252525;

  --sidebar-bg:      #000000;

  --input-bg:        #252525;

  --border:          rgba(255,255,255,.1);

  --border2:         rgba(255,255,255,.15);

  --border-subtle:   rgba(255,255,255,.06);

  --border-control:  rgba(255,255,255,.18);

  --text:            #ececec;

  --text1:           #ececec;

  --text2:           #b0b0b0;

  --text3:           #707070;

  --text4:           #505050;

  --text-secondary:  #b0b0b0;

  --accent:          #ffffff;

  --accent2:         #b0b0b0;

  --accent-soft:     rgba(255,255,255,.12);

  --accent-grad:     linear-gradient(135deg, #ffffff 0%, #ececec 100%);

  --accent-rgb:      255,255,255;

  --accent2-rgb:     176,176,176;

  --sidebar-hover:   rgba(255,255,255,.07);

  --sidebar-active:  rgba(255,255,255,.12);

  --bg-hover:        rgba(255,255,255,.06);

  --bg-active:       rgba(255,255,255,.1);

  --bg-elevated:     #1a1a1a;

  --success:         #10b981;

  --error:           #ef4444;

  --warning:         #f59e0b;

  --info:            #3b82f6;

  --shadow-sm:       0 1px 4px rgba(0,0,0,.6);

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

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

  --code-header:     #1a1a1a;

  --code-bg:         #111111;

  --glass-bg:        rgba(10,10,10,.92);

  --glass-border:    rgba(255,255,255,.1);

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

}



[data-theme="dark"] {

  --bg:              #0d0d0d;

  --bg2:             #171717;

  --main-bg:         #0d0d0d;

  --surface:         #1a1a1a;

  --surface2:        #252525;

  --surface3:        #333333;

  --card:            #1a1a1a;

  --card2:           #252525;

  --sidebar-bg:      #000000;

  --input-bg:        #252525;

  --border:          rgba(255,255,255,.1);

  --border2:         rgba(255,255,255,.15);

  --border-subtle:   rgba(255,255,255,.06);

  --border-control:  rgba(255,255,255,.18);

  --text:            #ececec;

  --text1:           #ececec;

  --text2:           #b0b0b0;

  --text3:           #707070;

  --text4:           #505050;

  --text-secondary:  #b0b0b0;

  --accent:          #ffffff;

  --accent2:         #b0b0b0;

  --accent-soft:     rgba(255,255,255,.12);

  --accent-grad:     linear-gradient(135deg, #ffffff 0%, #ececec 100%);

  --accent-rgb:      255,255,255;

  --accent2-rgb:     176,176,176;

  --sidebar-hover:   rgba(255,255,255,.07);

  --sidebar-active:  rgba(255,255,255,.12);

  --bg-hover:        rgba(255,255,255,.06);

  --bg-active:       rgba(255,255,255,.1);

  --bg-elevated:     #1a1a1a;

  --success:         #10b981;

  --error:           #ef4444;

  --warning:         #f59e0b;

  --info:            #3b82f6;

  --shadow-sm:       0 1px 4px rgba(0,0,0,.6);

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

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

  --code-header:     #1a1a1a;

  --code-bg:         #111111;

  --glass-bg:        rgba(10,10,10,.92);

  --glass-border:    rgba(255,255,255,.1);

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

}



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

   LIGHT TEMA — (data-theme="light")

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

[data-theme="light"] {

  --bg:              #ffffff;

  --bg2:             #f4f4f4;

  --main-bg:         #ffffff;

  --surface:         #f4f4f4;

  --surface2:        #ebebeb;

  --surface3:        #e0e0e0;

  --card:            #f4f4f4;

  --card2:           #ebebeb;

  --sidebar-bg:      #ffffff;

  --input-bg:        #f4f4f4;

  --border:          rgba(0,0,0,.1);

  --border2:         rgba(0,0,0,.15);

  --border-subtle:   rgba(0,0,0,.06);

  --border-control:  rgba(0,0,0,.2);

  --text:            #0d0d0d;

  --text1:           #0d0d0d;

  --text2:           #6e6e80;

  --text3:           #9e9ea8;

  --text4:           #b0b0c0;

  --text-secondary:  #6e6e80;

  --accent:          #0d0d0d;

  --accent2:         #333333;

  --accent-soft:     rgba(0,0,0,.08);

  --accent-grad:     linear-gradient(135deg, #0d0d0d 0%, #333333 100%);

  --accent-rgb:      13,13,13;

  --accent2-rgb:     51,51,51;

  --sidebar-hover:   rgba(0,0,0,.05);

  --sidebar-active:  rgba(0,0,0,.08);

  --bg-hover:        rgba(0,0,0,.05);

  --bg-active:       rgba(0,0,0,.08);

  --bg-elevated:     #ffffff;

  --success:         #059669;

  --error:           #dc2626;

  --warning:         #d97706;

  --info:            #3b82f6;

  --shadow-sm:       0 1px 4px rgba(0,0,0,.08);

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

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

  --code-header:     #f0f0f0;

  --code-bg:         #f8f8f8;

  --glass-bg:        rgba(255,255,255,.92);

  --glass-border:    rgba(0,0,0,.08);

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

}



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

   GLOBAL — Tema bağımsız değişkenler

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

:root {

  --input-radius:    20px;

  --msg-radius:      18px;

  --card-radius:     14px;

  --sidebar-width:   260px;

  --topbar-height:   64px;

  --anim-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --anim-smooth:     cubic-bezier(0.4, 0, 0.2, 1);

  --anim-fast:       cubic-bezier(0.2, 0, 0, 1);

  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);

  --font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-mono:       'JetBrains Mono', 'Fira Code', monospace;

  --success-rgb:     16,185,129;

  --error-rgb:       239,68,68;

  --warning-rgb:     245,158,11;

}



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

   TEMEL LAYOUT — Body & HTML

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

html, body {

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

  color: var(--text) !important;

  font-family: var(--font-sans) !important;

  font-feature-settings: "kern", "liga", "calt";

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



/* Tema geçiş animasyonu */

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

  transition-property: background-color, border-color, color, box-shadow;

  transition-duration: 0.15s;

  transition-timing-function: var(--anim-smooth);

}



/* Animasyon geçişini devre dışı bırak (tema değişimi sırasında flash önleme) */

.no-transition,

.no-transition * {

  transition: none !important;

}



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

   SIDEBAR — Yeni minimal stil

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

.sidebar {

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

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

  width: var(--sidebar-width) !important;

  min-width: var(--sidebar-width) !important;

  flex-shrink: 0 !important;

  transition: width .2s ease, min-width .2s ease !important;

}



.sidebar.collapsed {

  width: 60px !important;

  min-width: 60px !important;

}



/* Sidebar header */

.sidebar-header {

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

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

}



/* Sidebar nav item */

.sb-item,

.sidebar-item {

  border-radius: 8px !important;

  color: var(--text2) !important;

  transition: background 0.12s, color 0.12s !important;

}

.sb-item:hover,

.sidebar-item:hover {

  background: var(--sidebar-hover) !important;

  color: var(--text) !important;

}

.sb-item.active,

.sidebar-item.active {

  background: var(--sidebar-active) !important;

  color: var(--text) !important;

  font-weight: 600 !important;

}



/* Sidebar footer */

.sidebar-footer {

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

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

}



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

   TOPBAR — Sticky blur, minimal

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

.topbar {

  background: var(--bg) !important;

  border-bottom: 0px solid var(--border) !important;

  backdrop-filter: blur(12px) !important;

  -webkit-backdrop-filter: blur(12px) !important;

}



[data-theme="dark"] .topbar {

  background: rgba(0,0,0,0.97) !important;

}

[data-theme="light"] .topbar {

  background: rgba(255,255,255,0.92) !important;

}



.topbar.scrolled {

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

  box-shadow: var(--shadow-sm) !important;

}



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

   INPUT ALANI — Modern, yuvarlak (premium-ui.css override eder)

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

.input-wrapper {

  background: var(--bg) !important;

  padding: 12px 20px 16px !important;

}



.input-box {

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

  border: 1.5px solid var(--border) !important;

  border-radius: 20px !important;

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

}



.input-box:focus-within {

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

  box-shadow: 0 0 0 3px var(--accent-soft) !important;

}



[data-theme="dark"] .input-box {

  background: var(--surface2) !important;

}



#message-input {

  color: var(--text) !important;

  background: transparent !important;

  font-size: 0.9375rem !important;

  line-height: 1.6 !important;

}



#message-input::placeholder {

  color: var(--text4) !important;

}



/* Send butonu */

#send-btn,

.btn-send,

#btn-send {

  background: var(--text) !important;

  color: var(--bg) !important;

  border-radius: 10px !important;

  transition: opacity 0.15s, transform 0.15s !important;

}

#send-btn:hover:not(:disabled),

.btn-send:hover:not(:disabled),

#btn-send:hover:not(:disabled) {

  opacity: 0.85 !important;

  transform: scale(1.05) !important;

}

#send-btn:disabled,

.btn-send:disabled,

#btn-send:disabled {

  opacity: 0.3 !important;

  cursor: not-allowed !important;

}



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

   MESAJLAR — Doğal, kart yok

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

.message {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

}



/* Kullanıcı mesajı balonu */

.message.user .message-content-wrapper,

.message.user .message-bubble {

  background: var(--surface2) !important;

  border-radius: var(--msg-radius) !important;

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

  max-width: 75% !important;

}



/* AI mesajı — düz metin */

.message.assistant .message-content-wrapper,

.message.assistant .message-bubble {

  background: transparent !important;

  border: none !important;

  max-width: 100% !important;

}



.message-content {

  color: var(--text) !important;

  line-height: 1.75 !important;

}

.message-content h1,
.message-content h2,

.message-content h3,

.message-content h4 {

  color: var(--text) !important;

  font-weight: 700 !important;

}



.message-content strong {

  color: var(--text) !important;

}



.message-content code {

  background: var(--surface2) !important;

  color: var(--text) !important;

  border-radius: 5px !important;

  font-family: var(--font-mono) !important;

  font-size: 0.82em !important;

  padding: 2px 6px !important;

}



/* Kod bloğu */

.code-block {

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

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

  border-radius: 10px !important;

  overflow: hidden !important;

}



.code-block-header {

  background: var(--code-header) !important;

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

}



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

   WELCOME EKRANI — Minimal, ortalanmış

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

.welcome-logo-icon {

  background: var(--surface2) !important;

  box-shadow: none !important;

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

  animation: none !important;

}



[data-theme="dark"] .welcome-logo-icon {

  background: var(--surface2) !important;

}



.welcome-title,

#welcome-greeting {

  background: none !important;

  -webkit-background-clip: unset !important;

  -webkit-text-fill-color: var(--text) !important;

  background-clip: unset !important;

  color: var(--text) !important;

  font-weight: 800 !important;

  font-size: clamp(28px, 4vw, 48px) !important;

  letter-spacing: -0.02em !important;

  line-height: 1.15 !important;

}



.welcome-subtitle {

  color: var(--text3) !important;

  font-size: 1rem !important;

  line-height: 1.65 !important;

}



/* Öneri kartları (eski compat) */

.suggestion-card {

  background: var(--surface) !important;

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

  border-radius: 12px !important;

  transition: background 0.12s, border-color 0.12s, transform 0.12s !important;

}

.suggestion-card:hover {

  background: var(--surface2) !important;

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

  transform: translateY(-2px) !important;

}



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

   MODAL — Temiz, minimal

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

.modal-content,

.modal-box {

  background: var(--surface) !important;

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

  border-radius: 16px !important;

  box-shadow: var(--shadow-lg) !important;

}



.modal-header {

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

}



.modal-footer {

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

}



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

   BUTONLAR — Minimal, tutarlı

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

.btn-primary {

  background: var(--text) !important;

  color: var(--bg) !important;

  border: none !important;

  border-radius: 9px !important;

  font-weight: 600 !important;

  transition: opacity 0.15s, transform 0.15s !important;

}

.btn-primary:hover {

  opacity: 0.85 !important;

  transform: translateY(-1px) !important;

}



.btn-secondary {

  background: var(--surface2) !important;

  color: var(--text) !important;

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

  border-radius: 9px !important;

  font-weight: 600 !important;

}

.btn-secondary:hover {

  background: var(--surface3) !important;

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

}



.btn-icon {

  background: transparent !important;

  color: var(--text3) !important;

  border-radius: 8px !important;

  transition: background 0.12s, color 0.12s !important;

}

.btn-icon:hover {

  background: var(--surface2) !important;

  color: var(--text) !important;

}



/* Topbar register butonu */

.btn-topbar-register {

  background: var(--text) !important;

  color: var(--bg) !important;

  border-radius: 8px !important;

  font-weight: 700 !important;

  box-shadow: none !important;

}

.btn-topbar-register:hover {

  opacity: 0.85 !important;

  transform: translateY(-1px) !important;

  box-shadow: var(--shadow-sm) !important;

}



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

   FORM ELEMANLARI

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

.form-input,

.form-select,

.form-textarea,

input[type="text"],

input[type="email"],

input[type="password"],

textarea,

select {

  background: var(--surface) !important;

  color: var(--text) !important;

  border-radius: 8px !important;

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

}



.form-input:focus,

.form-select:focus,

.form-textarea:focus,

input:focus,

textarea:focus,

select:focus {

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

  box-shadow: 0 0 0 3px var(--accent-soft) !important;

  outline: none !important;

}



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

   TOAST BİLDİRİMLERİ

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

.toast {

  background: var(--surface) !important;

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

  border-radius: 10px !important;

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

  color: var(--text) !important;

}



.toast.success { border-left: 3px solid var(--success) !important; }

.toast.error   { border-left: 3px solid var(--error) !important; }

.toast.warning { border-left: 3px solid var(--warning) !important; }

.toast.info    { border-left: 3px solid var(--info) !important; }



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

   SCROLLBAR — İnce, minimal

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

* {

  scrollbar-width: thin;

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

}

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

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

::-webkit-scrollbar-thumb {

  background: var(--border2);

  border-radius: 3px;

}

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



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

   FOCUS — Erişilebilirlik

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

:focus-visible {

  outline: 2px solid var(--border2) !important;

  outline-offset: 2px !important;

}



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

   AVATAR — AI & Kullanıcı

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

.message-avatar {

  background: var(--surface2) !important;

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

  box-shadow: none !important;

}



.message.user .message-avatar {

  background: var(--surface3) !important;

}



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

   SIDEBAR KONUŞMA LİSTESİ — Tarih grupları

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

.conv-list-header,

.sb-group-header {

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

  color: var(--text4) !important;

  font-size: 0.65rem !important;

  font-weight: 700 !important;

  text-transform: uppercase !important;

  letter-spacing: 0.06em !important;

}



.sb-group-header[aria-expanded="true"] {

  color: var(--text3) !important;

}



.sidebar-conversations {

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

  scrollbar-color: var(--border2) transparent !important;

}



/* Konuşma öğesi */

.sb-conv-item,

.conversation-item {

  border-radius: 8px !important;

  color: var(--text2) !important;

  transition: background 0.1s !important;

}

.sb-conv-item:hover,

.conversation-item:hover {

  background: var(--sidebar-hover) !important;

  color: var(--text) !important;

}

.sb-conv-item.active,

.conversation-item.active {

  background: var(--sidebar-active) !important;

  color: var(--text) !important;

}



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

   SIDEBAR ARAMA

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

.sidebar-search {

  background: var(--surface2) !important;

  border: 1px solid transparent !important;

  border-radius: 9px !important;

}

.sidebar-search:focus-within {

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

}



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

   SIDEBAR KULLANIM ÇUBUĞU

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

.sb-usage-bar-track {

  background: var(--surface3) !important;

  border-radius: 100px !important;

}

.sb-usage-bar-fill {

  background: var(--text) !important;

  border-radius: 100px !important;

  transition: width 0.4s var(--anim-smooth) !important;

}



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

   SIDEBAR WIDGET'LAR

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

.sb-stats-widget,

.sb-recent-widget,

.sb-model-chip,

.sb-usage-widget {

  background: var(--surface2) !important;

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

  border-radius: 10px !important;

}



.sb-stats-widget:hover,

.sb-recent-widget:hover {

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

}



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

   DUYURU BANNER

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

.announcement-info,

.announcement-warning,

.announcement-success {

  background: var(--surface) !important;

  color: var(--text2) !important;

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

}



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

   MOBILE — Responsive

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

@media (max-width: 768px) {

  .sidebar {

    width: 100% !important;

    max-width: 280px !important;

  }



  .message.user .message-content-wrapper,

  .message.user .message-bubble {

    max-width: 90% !important;

  }



  .input-wrapper {

    padding: 8px 12px 12px !important;

  }

}



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

   PREFERS-COLOR-SCHEME FALLBACK

   (data-theme atanmamışsa sistem temasını kullan)

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

@media (prefers-color-scheme: dark) {

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

    --bg:              #0d0d0d;

    --main-bg:         #0d0d0d;

    --surface:         #1a1a1a;

    --surface2:        #252525;

    --surface3:        #333333;

    --card:            #1a1a1a;

    --card2:           #252525;

    --sidebar-bg:      #000000;

    --input-bg:        #252525;

    --border:          rgba(255,255,255,.1);

    --border2:         rgba(255,255,255,.15);

    --border-subtle:   rgba(255,255,255,.06);

    --border-control:  rgba(255,255,255,0.18);

    --text:            #ececec;

    --text2:           #b0b0b0;

    --text3:           #707070;

    --text4:           #505050;

    --text-secondary:  #b0b0b0;

    --accent:          #19c37d;

    --accent-soft:     rgba(25,195,125,.15);

    --accent-grad:     linear-gradient(135deg, #19c37d 0%, #10a37f 100%);

    --sidebar-hover:   rgba(255,255,255,.07);

    --sidebar-active:  rgba(255,255,255,.12);

    --bg-hover:        rgba(255,255,255,.06);

    --shadow-sm:       0 1px 4px rgba(0,0,0,0.6);

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

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

    --code-header:     #1a1a1a;

    --code-bg:         #111111;

    --glass-bg:        rgba(10,10,10,.92);

    --glass-border:    rgba(255,255,255,.1);

  }

}



@media (prefers-color-scheme: light) {

  :root:not([data-theme="dark"]) {

    --bg:              #FFFFFF;

    --main-bg:         #FFFFFF;

    --surface:         rgba(255,255,255,.9);

    --surface2:        rgba(250,250,250,.8);

    --surface3:        rgba(220,230,255,.7);

    --card:            rgba(255,255,255,.92);

    --card2:           rgba(250,250,250,.8);

    --sidebar-bg:      rgba(250,250,250,.97);

    --input-bg:        rgba(255,255,255,.95);

    --border:          rgba(60,60,60,.12);

    --border2:         rgba(60,60,60,.2);

    --border-subtle:   rgba(60,60,60,.07);

    --border-control:  #c0c0c0;

    --text:            #0D0D0D;

    --text2:           #4A4A4A;

    --text3:           #808080;

    --text4:           #9e9e9e;

    --text-secondary:  #444444;

    --accent:          #222222;

    --accent-soft:     rgba(60,60,60,.1);

    --accent-grad:     linear-gradient(135deg, #3A3A3A 0%, #1A1A1A 100%);

    --sidebar-hover:   rgba(60,60,60,.08);

    --sidebar-active:  rgba(60,60,60,.14);

    --bg-hover:        rgba(60,60,60,.06);

    --shadow-sm:       0 1px 4px rgba(0,0,0,0.08);

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

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

    --code-header:     #f0f0f0;

    --code-bg:         #f8f8f8;

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

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

  }

}



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

   LAYOUT — App shell (sidebar + main)

   NOT: app.css'deki body:has(.sidebar) kuralı zaten layout'u

   doğru şekilde tanımlıyor. Burada sadece renk override'ları.

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



/* Body arka plan rengi */

body {

  background: var(--bg) !important;

  color: var(--text) !important;

}



/* Sidebar renk override */

.sidebar {

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

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

}



/* Main content arka plan */

.main-content,

.chat-main {

  background: var(--bg) !important;

}



/* Messages container scrollbar */

.messages-container {

  scrollbar-width: thin;

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

}

.messages-container::-webkit-scrollbar { width: 6px; }

.messages-container::-webkit-scrollbar-thumb {

  background: var(--border2);

  border-radius: 3px;

}



/* Input wrapper */

.input-wrapper {

  background: var(--bg);

}



/* Input area */

.input-area {

  max-width: 760px;

  margin: 0 auto;

  padding: 0 16px;

}



.input-box {

  background: var(--surface2) !important;

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

  border-radius: 20px !important;

  transition: border-color .15s, box-shadow .15s !important;

  overflow: hidden;

}



.input-box:focus-within {

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

  box-shadow: 0 0 0 3px var(--accent-soft) !important;

}



.input-row {

  padding: 12px 14px 4px !important;

}



#message-input {

  background: transparent !important;

  border: none !important;

  outline: none !important;

  resize: none !important;

  width: 100% !important;

  font-size: .9375rem !important;

  line-height: 1.9 !important;

  color: var(--text) !important;

  min-height: 24px !important;

  max-height: 46px !important;

  overflow-y: auto !important;

}



#message-input::placeholder {

  color: var(--text4) !important;

}



.input-actions {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding: 4px 8px 8px !important;

  gap: 4px !important;

}



.input-actions-left {

  display: flex !important;

  align-items: center !important;

  gap: 2px !important;

}



.input-actions-right {

  display: flex !important;

  align-items: center !important;

  gap: 4px !important;

}



/* Tool butonları */

.btn-tool {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 32px !important;

  height: 32px !important;

  border-radius: 8px !important;

  background: none !important;

  border: none !important;

  color: var(--text3) !important;

  cursor: pointer !important;

  transition: background .12s, color .12s !important;

  flex-shrink: 0 !important;

}

.btn-tool:hover {

  background: var(--surface3) !important;

  color: var(--text) !important;

}



/* Gönder butonu */

#send-btn,

.btn-send {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 34px !important;

  height: 34px !important;

  border-radius: 9px !important;

  background: var(--text) !important;

  border: none !important;

  color: var(--bg) !important;

  cursor: pointer !important;

  transition: opacity .15s, transform .15s !important;

  flex-shrink: 0 !important;

}

#send-btn:hover,

.btn-send:hover {

  opacity: .85 !important;

  transform: scale(1.04) !important;

}

#send-btn:disabled,

.btn-send:disabled {

  opacity: .35 !important;

  cursor: not-allowed !important;

  transform: none !important;

}



/* ── Mesaj baloncukları v2 ── */

.message {

  max-width: 760px !important;

  margin: 0 auto !important;

  padding: 16px 16px !important;

  display: flex !important;

  gap: 12px !important;

  align-items: flex-start !important;

}



.message.user-message {

  flex-direction: row-reverse !important;

}



.message-avatar {

  width: 30px !important;

  height: 30px !important;

  border-radius: 50% !important;

  flex-shrink: 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: .72rem !important;

  font-weight: 800 !important;

  overflow: hidden !important;

}



.message.user-message .message-avatar {

  background: var(--surface3) !important;

  color: var(--text) !important;

}



.message.ai-message .message-avatar {

  background: var(--surface2) !important;

  color: var(--text2) !important;

}



.message-content {

  flex: 1 !important;

  min-width: 0 !important;

}



/* Kullanıcı mesajı balonu */

.message.user-message .message-text {

  background: var(--surface2) !important;

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

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

  padding: 10px 14px !important;

  font-size: .92rem !important;

  line-height: 1.6 !important;

  color: var(--text) !important;

  display: inline-block !important;

  max-width: 100% !important;

  word-break: break-word !important;

}



/* AI mesajı — kart yok, düz metin */

.message.ai-message .message-text {

  background: none !important;

  border: none !important;

  padding: 0 !important;

  font-size: .92rem !important;

  line-height: 1.7 !important;

  color: var(--text) !important;

}



/* ── Welcome screen v2 ── */

.welcome-screen {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  min-height: 60vh !important;

  padding: 40px 20px !important;

  text-align: center !important;

}



.welcome-title {

  font-size: 1.6rem !important;

  font-weight: 700 !important;

  color: var(--text) !important;

  margin: 0 0 24px !important;

  letter-spacing: -.02em !important;

  line-height: 1.3 !important;

}



/* ── Mobile ── */

@media (max-width: 768px) {

  body {

    overflow: auto;

  }

  .sidebar {

    position: fixed !important;

    left: -280px !important;

    top: 0 !important;

    height: 100vh !important;

    z-index: 400 !important;

    transition: left .25s ease !important;

    box-shadow: none !important;

  }

  .sidebar.open {

    left: 0 !important;

    box-shadow: 4px 0 24px rgba(0,0,0,.2) !important;

  }

  .main-content,

  .chat-main {

    height: 100% !important;

    min-height: 100vh !important;

  }

  .input-area {

    padding: 0 10px !important;

  }

}