/*

 * GlomaxGPT — Glomax Fix CSS

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

 * Token'a bağlı fix ve layout kuralları.

 * Hardcoded renkler kaldırıldı, tüm renkler token'dan gelir.

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

 */

/* ── 1. SPACE ORBS — dekoratif arka plan efekti ── */

.space-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.space-orb  { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .07; will-change: transform; pointer-events: none; }

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

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

.space-orb:nth-child(1) { width:600px;height:600px;background:radial-gradient(circle,rgba(255,255,255,.12),transparent);top:-200px;left:-100px;animation:orbFloat1 20s ease-in-out infinite; }

.space-orb:nth-child(2) { width:500px;height:500px;background:radial-gradient(circle,rgba(255,255,255,.08),transparent);top:30%;right:-150px;animation:orbFloat2 25s ease-in-out infinite; }

.space-orb:nth-child(3) { width:400px;height:400px;background:radial-gradient(circle,rgba(100,200,220,.15),transparent);bottom:-100px;left:20%;animation:orbFloat3 18s ease-in-out infinite; }

.space-orb:nth-child(4) { width:350px;height:350px;background:radial-gradient(circle,rgba(80,190,140,.12),transparent);bottom:20%;right:10%;animation:orbFloat4 22s ease-in-out infinite; }

@keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,30px) scale(1.05)} 66%{transform:translate(-20px,50px) scale(.95)} }

@keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-50px,40px) scale(1.08)} 66%{transform:translate(30px,-30px) scale(.92)} }

@keyframes orbFloat3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,-40px) scale(1.1)} }

@keyframes orbFloat4 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-40px,30px) scale(.9)} 80%{transform:translate(20px,-20px) scale(1.05)} }

@media (max-width:768px) {

  .space-orb:nth-child(1){width:300px;height:300px}

  .space-orb:nth-child(2){width:250px;height:250px}

  .space-orb:nth-child(3){width:200px;height:200px}

  .space-orb:nth-child(4){width:180px;height:180px}

  .space-orb{opacity:.03;filter:blur(60px)}

}

@media (prefers-reduced-motion:reduce) { .space-orb{animation:none} }

/* ── 2. SIDEBAR OVERLAY ── */

.sidebar-overlay { display:none; opacity:0; pointer-events:none; }

.sidebar-overlay.show { display:block; opacity:1; pointer-events:auto; }

/* ── 3. MOBİL iOS zoom önleme ── */

@media (max-width:768px) {

  input[type="text"],input[type="email"],input[type="password"],

  input[type="search"],textarea,select { font-size:16px !important; }

}

/* ── 4. TAŞMA ÖNLEMELERİ ── */

img,video,iframe,embed,object { max-width:100%; }

pre { max-width:100%; overflow-x:auto; }

/* ── 5. FILTER BAR MOBİL ── */

@media (max-width:768px) {

  .filter-bar { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; -webkit-overflow-scrolling:touch; }

  .filter-btn  { flex-shrink:0; white-space:nowrap; }

}

/* ── 6. CARD GRID MOBİL ── */

@media (max-width:768px) { .cards-grid,.grid-2,.grid-3,.grid-4 { grid-template-columns:1fr !important; } }

/* ── 7. MODELS GRID ── */

.models-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }

@media (max-width:768px) { .models-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); } }

@media (max-width:480px) { .models-grid { grid-template-columns:1fr; } }

/* ── 8. MUSIC-GEN MOBİL ── */

@media (max-width:768px) { .form-row{grid-template-columns:1fr !important} .genre-grid{grid-template-columns:repeat(3,1fr) !important} }

@media (max-width:480px) { .genre-grid{grid-template-columns:repeat(2,1fr) !important} }

/* ── 9. CONTACT LINKS MOBİL ── */

@media (max-width:480px) { .contact-links{flex-direction:column} .contact-link{justify-content:center} }

/* ── 10. SB-MORE-POPUP MOBİL ── */

@media (max-width:768px) {

  .sb-more-popup {

    position:fixed !important; left:8px !important; right:8px !important;

    bottom:80px !important; top:auto !important;

    max-width:calc(100vw - 16px) !important; min-width:0 !important; width:auto !important;

    max-height:65vh !important; border-radius:20px !important;

    z-index:99999 !important; overflow-y:auto !important;

  }

}

/* ── 11. COUNTRY BADGE ── */

.sidebar-logo-wrap,.mobile-logo-wrap { position:relative; display:inline-flex; align-items:center; }

.sidebar-country-badge,.mobile-country-badge {

  position:absolute; top:-7px; right:-20px;

  font-size:9px; font-weight:700; padding:1px 3px; border-radius:3px;

  color:#fff; line-height:1.2; pointer-events:none;

}

/* ── 12. PRINT ── */

@media print {

  .sidebar,.sidebar-overlay,.mobile-page-header,.space-orbs,.topbar,.inner-topbar { display:none !important; }

  .main-content,.page-main { height:auto !important; overflow:visible !important; }

}

/* ── 13. APP LAYOUT EVRENSELİ ── */

.app-with-sidebar {

  display: flex !important;

  height: 100dvh !important;

  overflow: hidden !important;

}

.app-with-sidebar > .main-content {

  flex: 1 1 0 !important;

  display: flex !important;

  flex-direction: column !important;

  min-height: 0 !important;

  height: 100dvh !important;

  overflow: hidden !important;

}

.app-with-sidebar .page-main,

.app-with-sidebar main.page-main {

  flex: 1 1 0 !important;

  overflow-y: auto !important;

  min-height: 0 !important;

}

/* ── 14. CHAT SAYFA LAYOUT ── */

#main-content {

  display: flex !important;

  flex-direction: column !important;

  height: 100dvh !important;

  overflow: hidden !important;

  position: relative !important;

}

#main-content > .topbar,

#main-content > header.topbar { flex-shrink: 0 !important; }

#messages {

  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-start !important;

  flex: 1 1 0 !important;

  overflow-y: auto !important;

  overscroll-behavior: contain !important;

  min-height: 0 !important;

  padding-bottom: 8px !important;

}

#main-content:not(.chat-started) #messages { display: none !important; }

#main-content:not(.chat-started) #welcome {

  display: flex !important;

  flex: 1 1 0 !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  position: static !important;

  width: 100% !important;

  padding: 0 20px !important;

  text-align: center !important;

  min-height: 0 !important;

  overflow-y: auto !important;

}

#main-content.chat-started #welcome { display: none !important; }

#main-content.chat-started #messages {

  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-start !important;

  flex: 1 1 0 !important;

  overflow-y: auto !important;

  min-height: 0 !important;

}

/* Input area — HER ZAMAN altta ── */

#input-area {

  flex-shrink: 0 !important;

  order: 999 !important;

  position: relative !important;

  z-index: 50 !important;

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

}

/* ── 15. TOPBAR 3 SÜTUN LAYOUT ── */

.topbar {

  display: grid !important;

  grid-template-columns: 1fr auto 1fr !important;

  align-items: center !important;

  padding: 0 12px !important;

  gap: 0 !important;

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

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

}

.topbar-left   { grid-column: 1; justify-self: start;  display:flex; align-items:center; gap:6px; }

.topbar-center { grid-column: 2; justify-self: center; display:flex; align-items:center; gap:6px; }

.topbar-right  { grid-column: 3; justify-self: end;    display:flex; align-items:center; gap:4px; }

#tb-share-btn { display: none !important; }

#tb-more-wrap { display: none !important; }

#tb-share-btn.visible { display: inline-flex !important; }

#tb-more-wrap.visible { display: inline-flex !important; }

@media (max-width: 640px) {

  .topbar { grid-template-columns: auto 1fr auto !important; }

  /* Sol kolon taşmasın, tab'lara yer kalsın */

  .topbar-left { max-width: 130px; min-width: 0; overflow: hidden; flex-shrink: 1; }

  .tb-brand-wrap { min-width: 0; overflow: hidden; }

  .tb-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80px; display: block; }

  .topbar-center { justify-self: center; min-width: 0; overflow: hidden; }

  .tb-tabs { gap: 8px !important; background: none !important; border: none !important; padding: 0 !important; }

  .tb-tab { padding: 5px 16px !important; font-size: 12.5px !important; white-space: nowrap; border-radius: 999px !important; }

}

/* Çok küçük ekranlarda marka adını gizle, tab'lara tam alan ver */

@media (max-width: 400px) {

  .topbar-left { max-width: 44px !important; }

  .tb-brand-wrap { display: none !important; }

  .tb-tab { padding: 5px 8px !important; font-size: 11.5px !important; }

}

/* ── 16. TOPBAR LOGIN BUTONU ── */

.btn-topbar-login {

  display: inline-flex; align-items: center; gap: 6px;

  background: var(--primary-bg); color: var(--primary-text); border: none;

  border-radius: 8px; padding: 7px 14px;

  text-decoration: none; font-size: 13px; font-weight: 500;

  white-space: nowrap; transition: opacity 0.15s;

}

.btn-topbar-login:hover { opacity: .85; color: var(--primary-text); text-decoration: none; }

/* ── 17. MESAJ WRAPPER (ChatGPT tarzı) ── */

.msg-wrapper {

  display: flex; flex-direction: column;

  padding: 2px 20px; max-width: 840px;

  margin: 0 auto; width: 100%; box-sizing: border-box;

}

.msg-wrapper.user      { align-items: flex-end; }

.msg-wrapper.assistant { align-items: flex-start; }

.msg-content { display: flex; flex-direction: column; min-width: 0; }

.msg-wrapper.user      .msg-content { align-items: flex-end;  max-width: 68%; }

.msg-wrapper.assistant .msg-content { align-items: flex-start; max-width: 100%; width: 100%; }

/* ── Kullanıcı balonu ── */

.msg-bubble.user {

  display: inline-block !important; width: fit-content !important; max-width: 100% !important;

  padding: 10px 16px !important; border-radius: 18px 18px 4px 18px !important;

  font-size: 15px !important; line-height: 1.6 !important; word-break: break-word;

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

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

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

}

/* ── Asistan mesajı ── */

.msg-bubble.assistant {

  display: block !important; background: transparent !important; border: none !important;

  padding: 2px 0 !important; font-size: 15px !important; line-height: 1.75 !important;

  word-break: break-word; max-width: 100% !important;

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

}

/* msg-avatar görünür — AI avatar beyaz zemin, siyah ikon */

.msg-avatar { display: flex !important; }

.msg-avatar.ai-av {

  display: flex !important;

  background: var(--bg-surface, #080f1c) !important;

}

[data-theme="light"] .msg-avatar.ai-av { background: #ffffff !important; }

[data-theme="dark"]  .msg-avatar.ai-av { background: var(--bg-surface, #080f1c) !important; }

/* ── Meta satırı (saat + butonlar) ── */

.msg-meta {

  display: flex; align-items: center; gap: 3px;

  margin-top: 5px; padding: 0 2px; min-height: 24px;

}

.msg-wrapper.user      .msg-meta { flex-direction: row-reverse; }

.msg-wrapper.assistant .msg-meta { flex-direction: row; }

.msg-time { font-size: 11px !important; opacity: 0.45; flex-shrink: 0; color: var(--text-muted) !important; }

/* ── Aksiyon butonları ── */

.msg-actions {

  display: inline-flex !important; align-items: center !important; gap: 2px !important;

  opacity: 1 !important; transition: opacity 0.15s;

}

@media (pointer: coarse) { .msg-actions { opacity: 1 !important; } }

.msg-action-btn {

  display: inline-flex !important; align-items: center !important; justify-content: center !important;

  width: 30px !important; height: 30px !important; border-radius: 8px !important;

  padding: 0 !important; background: transparent !important; border: none !important;

  cursor: pointer !important; transition: background .15s, color .15s !important;

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

}

.msg-action-btn:hover { background: var(--bg-hover) !important; color: var(--icon-active) !important; }

.msg-action-btn.gx-copied { color: var(--color-info) !important; }

/* ── Kod bloğu (mesaj içi) ── */

.msg-bubble pre { overflow-x: auto; max-width: 100%; border-radius: 10px; margin: 10px 0; }

.msg-bubble pre code { background: transparent; }

.msg-bubble .table-wrap, .msg-bubble table { overflow-x: auto; max-width: 100%; }

.msg-bubble th, .msg-bubble td { border: 1px solid var(--border-subtle); padding: 6px 12px; }

[data-theme="light"] .msg-bubble pre { background: var(--code-bg); border: 1px solid var(--border-default); }

[data-theme="light"] .msg-bubble th,

[data-theme="light"] .msg-bubble td  { border-color: var(--border-default); }

/* Kod bloğu renkleri */

[data-theme="light"] .msg-content pre,

[data-theme="light"] .msg-content code,

[data-theme="light"] .msg-bubble  pre,

[data-theme="light"] .msg-bubble  code { background: var(--code-bg) !important; color: var(--code-text) !important; }

[data-theme="dark"]  .msg-content pre,

[data-theme="dark"]  .msg-content code,

[data-theme="dark"]  .msg-bubble  pre,

[data-theme="dark"]  .msg-bubble  code { background: #1e1e2e !important; }

[data-theme="dark"]  .msg-content pre code,

[data-theme="dark"]  .msg-bubble  pre code { color: #cdd6f4 !important; background: transparent !important; }

/* ── 18. IMAGE REDIRECT BUTONU ── */

.gx-image-redirect-btn {

  display: inline-flex; align-items: center; gap: 6px;

  background: var(--primary-bg); color: var(--primary-text);

  border: none; border-radius: 8px; padding: 7px 14px;

  text-decoration: none; font-size: 13px; font-weight: 500;

  white-space: nowrap; transition: opacity 0.15s;

}

.gx-image-redirect-btn:hover { opacity: .85; color: var(--primary-text); }

/* ── 19. YANIT TERCİHLERİ PANELİ ── */

.pref-panel {

  position: absolute; bottom: calc(100% + 8px); left: 10px;

  z-index: 500; width: 256px; border-radius: 16px; padding: 6px;

  display: none; flex-direction: column; gap: 2px;

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

  background: var(--bg-elevated);

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

}

.pref-panel.open { display: flex; }

.pref-panel h4 {

  font-size: 11px; font-weight: 600; letter-spacing: .05em;

  text-transform: uppercase; margin: 0; padding: 8px 12px 6px;

  color: var(--text-muted);

}

.pref-row {

  display: flex; align-items: center; justify-content: space-between;

  gap: 8px; padding: 8px 12px; border-radius: 10px;

  transition: background .12s; cursor: default;

}

.pref-row:hover { background: var(--bg-hover); }

.pref-row label { font-size: 13px; font-weight: 400; white-space: nowrap; flex-shrink: 0; cursor: default; color: var(--text-primary); }

.pref-select {

  flex-shrink: 0; max-width: 116px; padding: 4px 6px;

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

  font-size: 12px; font-weight: 500; font-family: inherit;

  cursor: pointer; outline: none; transition: border-color .15s, background .15s;

  background: var(--bg-surface); color: var(--text-primary);

}

.pref-select:hover,

.pref-select:focus { border-color: var(--border-strong); background: var(--bg-elevated); }

@media (max-width: 768px) {

  .pref-panel { left: 10px; right: 10px; width: auto; }

}

/* ── 20. MOBİL MESAJ ── */

@media (max-width:768px) {

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

  .msg-wrapper.user .msg-content { max-width: 88%; }

  #input-area { padding: 0 10px max(12px, env(safe-area-inset-bottom,12px)) !important; }

}

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

   INPUT TOOLBAR — Tek satır: + | textarea | pref | model | mic | stop | send

   Sıkışık değil, flex nowrap, overflow gizli

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

.input-area {

  max-width: 760px;

  margin: 0 auto;

  padding: 10px 16px 14px;

  width: 100%;

  box-sizing: border-box;

}

.input-container {

  position: relative;

  background: var(--bg-surface);

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

  border-radius: 16px;

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

}

.input-container:focus-within {

  border-color: inherit;

  box-shadow: none;

}

/* Attachment preview - dosyalar seçilince üstte görünür */

.input-attachments {

  display: none;

  flex-wrap: wrap;

  gap: 6px;

  padding: 10px 12px 0;

}

.input-attachments:not(:empty) { display: flex; }

/* Feature badge'leri (web arama / derin düşünce) */

.input-badges {

  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  padding: 8px 12px 0;

}

.input-feature-badge {

  display: none;

  align-items: center;

  gap: 4px;

  padding: 3px 8px;

  border-radius: 100px;

  font-size: 11px;

  font-weight: 500;

  background: var(--bg-elevated);

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

  color: var(--text-secondary);

}

.input-feature-badge.active { display: inline-flex; }

.input-feature-badge .remove-badge {

  background: none; border: none; cursor: pointer;

  color: var(--text-muted); padding: 0; display: flex; align-items: center;

  border-radius: 50%; width: 14px; height: 14px; justify-content: center;

}

.input-feature-badge .remove-badge:hover { color: var(--color-error); }

/* Textarea */

#message-input {

  display: block;

  width: 100%;

  padding: 12px 14px 4px;

  background: transparent;

  border: none;

  outline: none;

  resize: none;

  font-size: .9375rem;

  line-height: 1.6;

  color: var(--text-primary);

  min-height: 24px;

  max-height: 160px;

  overflow-y: auto;

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

  box-sizing: border-box;

}

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

/* ── TOOLBAR — tek satır, asla 2 satıra kaymasın ── */

.input-toolbar {

  display: flex;

  align-items: center;

  gap: 2px;

  padding: 4px 6px 6px;

  flex-wrap: nowrap;

  overflow: hidden;

  min-height: 44px;

}

/* + ekle butonu — sol köşe */

.input-add-wrap { position: relative; flex-shrink: 0; }

.input-btn {

  display: inline-flex; align-items: center; justify-content: center;

  width: 32px; height: 32px; border-radius: 8px;

  background: none; border: none; cursor: pointer;

  color: var(--icon-default);

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

  flex-shrink: 0;

}

.input-btn:hover { background: var(--bg-hover); color: var(--icon-active); }

/* + menü popup */

.input-add-menu {

position: absolute; bottom: calc(100% + 6px); left: 0;

  z-index: 999999; min-width: 170px;
  background: var(--bg-elevated);

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

  border-radius: 12px; padding: 4px;

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

  display: none; flex-direction: column; gap: 1px;

}

.input-add-menu.open { display: flex; }

.input-add-item {

  display: flex; align-items: center; gap: 8px;

  padding: 8px 10px; border-radius: 8px;

  background: none; border: none; cursor: pointer;

  font-size: 13px; font-weight: 400; text-align: left; width: 100%;

  color: var(--text-primary);

  transition: background .1s;

}

.input-add-item:hover { background: var(--bg-hover); }

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

/* Textarea alanı — esnek, kalan boşluğu doldur, görünmez */

.input-textarea-wrap {

  flex: 1 1 0;

  min-width: 0;

  display: flex;

  align-items: center;

  overflow: hidden;

}

/* Yanıt Tercihleri butonu */

#pref-btn {

  display: inline-flex; align-items: center; justify-content: center;

  height: 28px; border-radius: 100px;

  padding: 0 8px; gap: 4px;

  background: none; border: 1px solid var(--border-subtle);

  cursor: pointer; font-size: 11px; font-weight: 500;

  color: var(--text-muted); white-space: nowrap; flex-shrink: 0;

  transition: background .12s, border-color .12s, color .12s;

}

#pref-btn:hover { background: var(--bg-hover); border-color: var(--border-default); color: var(--text-primary); }

/* Model pill */

.input-model-pill {

  display: inline-flex; align-items: center; gap: 4px;

  height: 28px; border-radius: 100px; padding: 0 10px;

  background: none; border: 1px solid var(--border-subtle);

  cursor: pointer; font-size: 11px; font-weight: 500;

  color: var(--text-muted); white-space: nowrap; flex-shrink: 0;

  max-width: 120px; overflow: hidden; text-overflow: ellipsis;

  transition: background .12s, border-color .12s, color .12s;

}

.input-model-pill:hover { background: var(--bg-hover); border-color: var(--border-default); color: var(--text-primary); }

.input-model-pill svg { flex-shrink: 0; }

/* Mikrofon butonu */

.input-mic-btn {

  display: inline-flex; align-items: center; justify-content: center;

  width: 32px; height: 32px; border-radius: 8px;

  background: none; border: none; cursor: pointer;

  color: var(--icon-default); flex-shrink: 0;

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

}

.input-mic-btn:hover { background: var(--bg-hover); color: var(--icon-active); }

.input-mic-btn.recording {

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

  color: var(--color-error) !important;

  animation: micPulse 1s ease-in-out infinite;

}

@keyframes micPulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* Durdur butonu — streaming sırasında görünür */

.input-stop-btn {

  display: none;

  align-items: center; justify-content: center;

  width: 32px; height: 32px; border-radius: 8px;

  background: var(--color-error-bg); border: 1px solid var(--color-error);

  cursor: pointer; color: var(--color-error); flex-shrink: 0;

  transition: background .12s;

}

.input-stop-btn.visible { display: inline-flex; }

.input-stop-btn:hover { background: var(--color-error); color: #fff; }

/* Gönder butonu */

.input-send-btn {

  display: inline-flex; align-items: center; justify-content: center;

  width: 32px; height: 32px; border-radius: 9px;

  background: var(--primary-bg); border: none;

  cursor: pointer; color: var(--primary-text); flex-shrink: 0;

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

  opacity: .35;

}

.input-send-btn:not(:disabled) { opacity: 1; cursor: pointer; }

.input-send-btn:not(:disabled):hover { opacity: .85; transform: scale(1.05); }

.input-send-btn:disabled { opacity: .35; cursor: not-allowed; }

/* btn-send eski alias */

#btn-send, #send-btn {

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

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

}

/* ── Model popup ── */

.model-popup {

  position: absolute; bottom: calc(100% + 8px); left: 50%;

  transform: translateX(-50%);

  z-index: 400; min-width: 220px; max-width: 280px;

  background: var(--bg-elevated); border: 1px solid var(--border-default);

  border-radius: 14px; padding: 6px; box-shadow: var(--shadow-lg);

  display: none; flex-direction: column; gap: 2px;

}

.model-popup.open { display: flex; }

.model-popup-title {

  font-size: 10px; font-weight: 600; text-transform: uppercase;

  letter-spacing: .06em; color: var(--text-muted);

  padding: 6px 10px 4px;

}

.model-popup-item {

  display: flex; align-items: center; gap: 8px;

  padding: 8px 10px; border-radius: 8px;

  cursor: pointer; transition: background .1s;

  font-size: 13px; color: var(--text-primary);

  background: none; border: none; text-align: left; width: 100%;

}

.model-popup-item:hover { background: var(--bg-hover); }

.model-popup-item.active { background: var(--bg-active); font-weight: 500; }

.model-popup-item .model-badge {

  margin-left: auto; font-size: 9px; font-weight: 600;

  padding: 1px 5px; border-radius: 100px;

  background: var(--color-warning-bg); color: var(--color-warning);

}

/* ── İç sayfa layout (chat dışı) ── */

body:not(.chat-page) .app-with-sidebar {

  height: 100dvh !important; overflow: hidden !important;

}

body:not(.chat-page) .app-with-sidebar > .main-content,

body:not(.chat-page) #main-content {

  display: flex !important; flex-direction: column !important;

  flex: 1 1 0 !important; min-height: 0 !important;

  overflow-y: auto !important; overflow-x: hidden !important;

}

body:not(.chat-page) .app-with-sidebar .page-main,

body:not(.chat-page) .app-with-sidebar main.page-main {

  flex: 1 1 0 !important; overflow-y: auto !important;

  overflow-x: hidden !important; min-height: 0 !important;

}

/* ══ WELCOME SCREEN — hızlı aksiyon kartları ══ */

.welcome-screen {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 40px 24px 24px;

  gap: 24px;

  min-height: 0;

  flex: 1 1 0;

}

.welcome-title {

  font-size: clamp(22px, 3.5vw, 38px);

  font-weight: 700;

  color: var(--text-primary);

  letter-spacing: -.025em;

  line-height: 1.2;

  margin: 0;

  max-width: 600px;

}

.welcome-capabilities-btn {

  display: inline-flex; align-items: center; gap: 6px;

  padding: 7px 14px; border-radius: 100px;

  background: var(--bg-surface); border: 1px solid var(--border-default);

  color: var(--text-secondary); font-size: 13px; font-weight: 500;

  cursor: pointer; transition: background .12s, color .12s;

}

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

/* Quick action kartları */

.welcome-quick-actions {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 8px;

  max-width: 520px;

}

.wqa-card {

  display: inline-flex; align-items: center; gap: 7px;

  padding: 9px 16px; border-radius: 100px;

  background: var(--bg-surface); border: 1px solid var(--border-subtle);

  color: var(--text-secondary); font-size: 13px; font-weight: 500;

  cursor: pointer; transition: background .12s, border-color .12s, color .12s, transform .1s;

  white-space: nowrap;

}

.wqa-card:hover {

  background: var(--bg-elevated); border-color: var(--border-default);

  color: var(--text-primary); transform: translateY(-1px);

}

.wqa-card svg { flex-shrink: 0; color: var(--icon-default); }

.wqa-card:hover svg { color: var(--icon-active); }

/* ══ PREF-BTN — toolbar içinde pill stili ══ */

#pref-btn {

  display: inline-flex; align-items: center; gap: 5px;

  height: 28px; border-radius: 100px;

  padding: 0 10px;

  background: none; border: 1px solid var(--border-subtle);

  cursor: pointer; font-size: 11px; font-weight: 500;

  color: var(--text-muted); white-space: nowrap; flex-shrink: 0;

  transition: background .12s, border-color .12s, color .12s;

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

}

#pref-btn:hover { background: var(--bg-hover); border-color: var(--border-default); color: var(--text-primary); }

#pref-btn svg { flex-shrink: 0; }

/* ══ INPUT TOOLBAR — kesin tek satır ══ */

.input-toolbar {

  display: flex !important;

  align-items: center !important;

  gap: 3px !important;

  padding: 4px 6px 6px !important;

  flex-wrap: nowrap !important;

  overflow: hidden !important;

  min-height: 42px !important;

  max-height: 42px !important;

}

/* textarea wrap kaldırıldı, spacer olarak kullanılıyor */

.input-textarea-wrap {

  flex: 1 1 0;

  min-width: 0;

  pointer-events: none;

}

/* model popup select — gizlenecek, sadece hidden list kullanılıyor */

.model-popup-select {

  display: none !important;

}

/* ── Mobil chat ── */

@media (max-width:768px) {

  .input-area { padding: 6px 10px max(10px, env(safe-area-inset-bottom,10px)); }

  .input-model-pill { max-width: 88px; font-size: 10px; padding: 0 8px; }

  #pref-btn { display: none !important; }

  .welcome-quick-actions { gap: 6px; }

  .wqa-card { padding: 8px 12px; font-size: 12px; }

}

@media (max-width:480px) {

  .input-model-pill { max-width: 68px; }

  .welcome-quick-actions { max-width: 100%; }

}

/* ── Mesaj layout güvence kuralları — üst üste binmeyi önler ── */

#messages {

  display: flex !important;

  flex-direction: column !important;

}

#messages > .message,

#messages > .msg-wrapper {

  position: static !important;

  flex-shrink: 0 !important;

  width: 100% !important;

  box-sizing: border-box !important;

  animation-fill-mode: forwards !important;

}

#messages > .message {

  display: flex !important;

  min-height: 0 !important;

  margin-bottom: 2px !important;

}

/* ── Mesaj boşluk azaltma ── */

.message {

  padding: 6px 0 !important;

}

.message-actions-bar {

  padding: 0 24px !important;

  min-height: 0 !important;

}

.message.assistant .message-actions-bar {

  padding-left: calc(24px + 28px + 16px) !important;

}

.message-inner {

  padding: 0 16px !important;

}

/* AI favicon: light=dark.png, dark=white.png */

.msg-favicon-ai {

  content: url('/assets/img/white.png');

}

[data-theme="light"] .msg-avatar.ai .msg-favicon-ai {

  content: url('/assets/img/dark.png');

}

[data-theme="dark"] .msg-avatar.ai .msg-favicon-ai {

  content: url('/assets/img/white.png');

}

#messages > .msg-wrapper {

  display: flex !important;

  flex-direction: column !important;

  min-height: 0 !important;

  margin-bottom: 2px !important;

}

/* gx-fab-main sadece ana sayfada (chat-page) görünür */

body:not(.chat-page) .gx-fab-main,

body:not(.chat-page) .gx-fab-wrap,

body:not(.chat-page) .gx-fab-menu {

  display: none !important;

}

/* ── TB-MOBILE-FAVICON ── */
.tb-mobile-favicon {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tb-mobile-favicon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
@media (max-width: 767px) {
  .tb-mobile-favicon {
    display: flex !important;
  }
}

/* ── TB-NOTIF-WRAP: Mobilde görünür ── */
@media (max-width: 768px) {
  .tb-notif-wrap {
    display: flex !important;
  }
  .btn-theme-toggle {
    display: flex !important;
  }
}

/* ── Bildirim dot sayı gösterimi ── */
.tb-notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--color-error, #e53e3e);
  border: 2px solid var(--bg-main, #1a1a2e);
  pointer-events: none;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
}

/* ── Tema toggle: desktop görünür, mobil gizli varsayılan ── */
.btn-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text2, #9090a8);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}

.btn-theme-toggle:hover {
  background: var(--surface2, rgba(255,255,255,.08));
  color: var(--text, #ececec);
}

[data-theme="light"] .btn-theme-toggle {
  color: rgba(0,0,0,.55);
}

[data-theme="light"] .btn-theme-toggle:hover {
  background: rgba(0,0,0,.06);
  color: #111;
}

@media (min-width: 769px) {
  .btn-theme-toggle { display: flex !important; }
}

/* ── Topbar-right sırası: tema → bildirim → profil ── */
.topbar-right { gap: 4px; }

/* ── tb-login-btn ── */
.tb-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-default, rgba(255,255,255,.12));
  background: var(--bg-elevated, rgba(255,255,255,.06));
  color: var(--text-secondary, #aaa);
  font-size: .84rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
  flex-shrink: 0;
}

.tb-login-btn:hover {
  background: var(--bg-hover, rgba(255,255,255,.1));
  color: var(--text-primary, #fff);
  border-color: var(--border-strong, rgba(255,255,255,.25));
  text-decoration: none;
}

[data-theme="light"] .tb-login-btn {
  color: var(--text-secondary, #555);
  border-color: var(--border-default, rgba(0,0,0,.15));
}

[data-theme="light"] .tb-login-btn:hover {
  background: var(--bg-hover, rgba(0,0,0,.05));
  color: var(--text-primary, #111);
}

/* GX FIX: eski tb-model-menu blok kaldirildi */

/* ── Topbar üst boşluk sıfırla ── */
.topbar,
header.topbar,
#topbar {
  margin-top: 0 !important;
  padding-top: 0 !important;
  top: 0 !important;
}

.main-content,
#main-content {
  padding-top: 0 !important;
}

/* ── Topbar üst boşluk tamamen kaldır ── */
.topbar,
header.topbar,
#topbar {
  margin-top: 0 !important;
  padding-top: 0 !important;
  top: 0 !important;
  border-top: none !important;
}

/* ── Desktop: images-page ve support-page layout düzeltmesi ── */
@media (min-width: 769px) {
  body.images-page #main-content,
  body.support-page #main-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: 100dvh !important;
  }

  body.images-page #main-content .page-main,
  body.support-page #main-content .page-main {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    display: block !important;
  }

  body.images-page .app-with-sidebar,
  body.support-page .app-with-sidebar {
    display: flex !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
}

.app-with-sidebar,
#main-content,
.main-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ── Model menüsü JS fixed pozisyonla yönetiliyor — CSS override kaldır ── */
.tb-model-menu {
  position: fixed !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
}