/*

 * GlomaxGPT — Theme v2 Component Stilleri

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

 * DIKKAT: Bu dosya artık token tanımlamaz.

 * Tüm CSS değişkenleri glomax-theme-tokens.css'den gelir.

 * Bu dosya yalnızca component stilleri içerir.

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

 */

/* ── Temel layout ── */

html, body {

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

  color:            var(--text-primary) !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;

}

body {

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

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

}

.no-transition,

.no-transition * { transition: none !important; }

/* ── Sidebar ── */

.sidebar {

  background:   var(--bg-sidebar) !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:     var(--sidebar-collapsed-width) !important;

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

}

.sidebar-header {

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

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

}

.sidebar-footer {

background: var(--bg) !important;

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

.sb-item,

.sidebar-item {

  border-radius: 8px !important;

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

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

}

.sb-item:hover,

.sidebar-item:hover {

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

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

}

.sb-item.active,

.sidebar-item.active {

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

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

  font-weight: 600 !important;

}

/* ── Sidebar konuşma listesi ── */

.conv-list-header,

.sb-group-header {

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

  color:          var(--text-disabled) !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(--text-muted) !important; }

.sidebar-conversations {

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

  scrollbar-color: var(--border-default) transparent !important;

}

.sb-conv-item,

.conversation-item {

  border-radius: 8px !important;

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

  transition:    background 0.1s !important;

}

.sb-conv-item:hover,

.conversation-item:hover {

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

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

}

.sb-conv-item.active,

.conversation-item.active {

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

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

}

.sidebar-search {

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

  border:        1px solid transparent !important;

  border-radius: 9px !important;

}

.sidebar-search:focus-within { border-color: var(--border-strong) !important; }

.sb-usage-bar-track {

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

  border-radius: 100px !important;

}

.sb-usage-bar-fill {

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

  border-radius: 100px !important;

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

}

.sb-stats-widget,

.sb-recent-widget,

.sb-model-chip,

.sb-usage-widget {

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

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

  border-radius: 10px !important;

}

.sb-stats-widget:hover,

.sb-recent-widget:hover { border-color: var(--border-strong) !important; }

/* ── Topbar ── */

.topbar {

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

  border-bottom:           1px solid transparent !important;

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

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

}

[data-theme="light"] .topbar { background: rgba(255,255,255,0.92) !important; }

.topbar.scrolled {

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

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

}

/* ── Main content ── */

.main-content,

.chat-main { background: var(--bg-main) !important; }

/* ── Input alanı ── */

.input-wrapper {

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

  padding:    12px 20px 16px !important;

}

.input-area {

  max-width: 760px;

  margin:    0 auto;

  padding:   0 16px;

}

.input-box {

  background:    var(--bg-surface) !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(--border-strong) !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-primary) !important;

  min-height:  24px !important;

  max-height:  200px !important;

  overflow-y:  auto !important;

}

#message-input::placeholder { color: var(--text-placeholder) !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(--text-muted) !important;

  cursor:          pointer !important;

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

  flex-shrink:     0 !important;

}

.btn-tool:hover {

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

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

}

/* ── Gönder butonu ── */

#send-btn,

.btn-send,

#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(--primary-bg) !important;

  border:          none !important;

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

  cursor:          pointer !important;

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

  flex-shrink:     0 !important;

}

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

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

#btn-send:hover:not(:disabled) { opacity: .85 !important; transform: scale(1.04) !important; }

#send-btn:disabled,

.btn-send:disabled,

#btn-send:disabled { opacity: .35 !important; cursor: not-allowed !important; transform: none !important; }

/* ── Mesajlar ── */

.message {

  max-width:   894px !important;

  margin:      0 auto !important;

  padding:     16px !important;

  display:     flex !important;

  gap:         12px !important;

  align-items: center !important;

  background:  transparent !important;

  border:      none !important;

  box-shadow:  none !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;

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

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

  box-shadow:      none !important;

}

.message.user-message .message-avatar { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }

.message.ai-message   .message-avatar { background: var(--bg-surface) !important;   color: var(--text-secondary) !important; }

.message.user         .message-avatar { background: var(--bg-elevated) !important; }

.message-content {

  flex:        1 !important;

  min-width:   0 !important;

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

  line-height: 1.75 !important;

}

.message-content h1,

.message-content h2,

.message-content h3,

.message-content h4  { color: var(--text-primary) !important; font-weight: 700 !important; }

.message-content strong { color: var(--text-primary) !important; }

.message-content code {

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

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

  border-radius: 5px !important;

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

  font-size:   0.82em !important;

  padding:     2px 6px !important;

}

/* Kullanıcı mesaj balonu */

.message.user .message-content-wrapper,

.message.user .message-bubble,

.message.user-message .message-text {

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

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

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

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

}

.message.user-message .message-text {

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

  padding:       10px 14px !important;

  font-size:     .92rem !important;

  line-height:   1.6 !important;

  display:       inline-block !important;

  max-width:     100% !important;

  word-break:    break-word !important;

}

/* AI mesajı */

.message.assistant .message-content-wrapper,

.message.assistant .message-bubble,

.message.ai-message .message-text {

  background: transparent !important;

  border:     none !important;

  padding:    0 !important;

  font-size:  .92rem !important;

  line-height:1.7 !important;

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

}

/* ── Kod blokları ── */

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

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

}

/* ── Welcome ekranı ── */

.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-logo-icon {

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

  box-shadow:  none !important;

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

  animation:   none !important;

}

.welcome-title,

#welcome-greeting {

  background:              none !important;

  -webkit-background-clip: unset !important;

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

  background-clip:         unset !important;

  color:                   var(--text-primary) !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(--text-muted) !important; font-size: 1rem !important; line-height: 1.65 !important; }

.welcome-title    { font-size: 1.6rem !important; font-weight: 700 !important; color: var(--text-primary) !important; margin: 0 0 24px !important; letter-spacing: -.02em !important; line-height: 1.3 !important; }

.suggestion-card {

  background:    var(--bg-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(--bg-elevated) !important;

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

  transform:     translateY(-2px) !important;

}

/* ── Modal ── */

.modal-content,

.modal-box {

  background:    var(--bg-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 ── */

.btn-primary {

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

  color:         var(--primary-text) !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(--bg-elevated) !important;

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

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

  border-radius: 9px !important;

  font-weight:   600 !important;

}

.btn-secondary:hover { background: var(--bg-elevated) !important; border-color: var(--border-strong) !important; filter: brightness(0.95); }

.btn-icon {

  background:    transparent !important;

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

  border-radius: 8px !important;

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

}

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

/* Topbar register butonu — kırmızı yerine nötr primary */

.btn-topbar-register {

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

  color:         var(--primary-text) !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; }

/* ── Form elemanları ── */

.form-input,

.form-select,

.form-textarea,

input[type="text"],

input[type="email"],

input[type="password"],

textarea,

select {background: var(--bg);color:         var(--text-primary) !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(--border-strong) !important;

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

  outline:      none !important;

}

/* ── Toast bildirimleri ── */

.toast {

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

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

  border-radius: 10px !important;

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

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

}

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

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

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

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

/* ── Duyuru banner ── */

.announcement-info,

.announcement-warning,

.announcement-success {

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

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

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

}

/* ── Messages container scrollbar ── */

.messages-container {

  scrollbar-width: thin;

  scrollbar-color: var(--border-default) transparent;

}

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

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

  background:    var(--border-default);

  border-radius: 3px;

}

/* ── Mobile responsive ── */

@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,.25) !important;

  }

  .main-content,

  .chat-main  { height: 100% !important; min-height: 100vh !important; }

  .input-area { padding: 0 10px !important; }

  .input-wrapper { padding: 8px 12px 12px !important; }

  .message.user .message-content-wrapper,

  .message.user .message-bubble { max-width: 90% !important; }

}