/*

 * GlomaxGPT — ChatGPT Kalitesi UI Sistemi v1.1

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

 * Bu dosya MEVCUT CSS'leri ezmez; token tabanlı override ve

 * component sınıfları ile çalışır.

 * Yükleme sırası: En son yüklenmeli (diğer CSS'lerin üstünde).

 *

 * Kapsam:

 *  - Sidebar daraltma / mobil drawer

 *  - Welcome ekranı merkezi layout

 *  - Composer / input alanı

 *  - Mesaj alanı okunabilirlik

 *  - Topbar

 *  - Model picker popup

 *  - Z-index katman sistemi

 *  - Dark / Light tema uyumu

 *  - Responsive (mobile-first)

 *  - Erişilebilirlik (focus, aria, reduced-motion)

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

 */

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

   Z-INDEX KATMAN SİSTEMİ — Merkezi yönetim

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

:root {

  --z-base:        1;

  --z-sticky:      10;

  --z-input:       20;

  --z-topbar:      100;

  --z-dropdown:    200;

  --z-popup:       300;

  --z-sidebar:     400;

  --z-overlay:     390;

  --z-modal:       500;

  --z-toast:       600;

  /* Layout boyutları */

  --gx-sidebar-w:          260px;

  --gx-sidebar-collapsed:  60px;

  --gx-topbar-h:           56px;

  --gx-composer-max:       780px;

  --gx-msg-max:            760px;

  --gx-content-max:        860px;

  /* Animasyon */

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

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

  --gx-dur-fast:   120ms;

  --gx-dur-mid:    200ms;

  --gx-dur-slow:   280ms;

}

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

   GENEL RESET — Taşma önleme

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

html, body {

  overflow-x: hidden !important;

  max-width: 100vw !important;

}

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

   APP LAYOUT — Ana iskelet

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

.app-with-sidebar {

  display: flex !important;

  width: 100% !important;

  max-width: 100vw !important;

  height: 100dvh !important;

  overflow: hidden !important;

}

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

   SIDEBAR — Desktop sticky, mobil drawer

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

/* Desktop: sidebar sabit genişlik */

@media (min-width: 769px) {

  #sidebar,

  aside#sidebar,

  .sidebar,

  aside.sidebar {

    position: sticky !important;

    top: 0 !important;

    height: 100dvh !important;

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

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

    max-width: var(--gx-sidebar-w) !important;

    flex-shrink: 0 !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    transform: none !important;

    visibility: visible !important;

    transition:

      width var(--gx-dur-slow) var(--gx-ease),

      min-width var(--gx-dur-slow) var(--gx-ease),

      max-width var(--gx-dur-slow) var(--gx-ease) !important;

    z-index: var(--z-sidebar) !important;

    background: var(--bg-sidebar, #111111) !important;

    border-right: 1px solid var(--border-subtle, rgba(255,255,255,0.06)) !important;

    display: flex !important;

    flex-direction: column !important;

  }

  /* Daraltılmış sidebar */

  #sidebar.collapsed,

  aside#sidebar.collapsed,

  .sidebar.collapsed {

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

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

    max-width: var(--gx-sidebar-collapsed) !important;

  }

  /* Daraltılmışken metin gizle */

  #sidebar.collapsed .sidebar-logo-name,

  #sidebar.collapsed .sidebar-country-sup,

  #sidebar.collapsed .sidebar-nav-item span:not(.sb-badge-beta),

  #sidebar.collapsed .sidebar-section-label,

  #sidebar.collapsed .sidebar-conv-list,

  #sidebar.collapsed .sidebar-search-wrap,

  #sidebar.collapsed .sidebar-bottom-info,

  #sidebar.collapsed .sb-more-wrap > .sidebar-nav-item > span,

  #sidebar.collapsed .sidebar-user-name,

  #sidebar.collapsed .sidebar-user-plan,

  #sidebar.collapsed .sidebar-collapse-btn-desktop {

    display: none !important;

  }

  /* Daraltılmışken expand butonu göster */

  #sidebar.collapsed .sidebar-expand-btn {

    display: flex !important;

  }

  /* Daraltılmışken nav item'ları ortala */

  #sidebar.collapsed .sidebar-nav-item {

    justify-content: center !important;

    padding: 10px !important;

  }

  /* Daraltılmışken logo ortala */

  #sidebar.collapsed .sidebar-top {

    justify-content: center !important;

    padding: 12px 8px !important;

  }

  #sidebar.collapsed .sidebar-logo {

    justify-content: center !important;

  }

  #sidebar.collapsed .sidebar-top-right {

    display: none !important;

  }

}

/* Mobil: sidebar fixed overlay drawer */

@media (max-width: 768px) {

  #sidebar,

  aside#sidebar,

  .sidebar,

  aside.sidebar {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    width: min(85vw, 320px) !important;

    max-width: 320px !important;

    height: 100dvh !important;

    z-index: var(--z-sidebar) !important;

    transform: translateX(-100%) !important;

    visibility: hidden !important;

    transition:

      transform var(--gx-dur-slow) var(--gx-ease),

      visibility var(--gx-dur-slow) !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    background: var(--bg-sidebar, #111111) !important;

    border-right: 1px solid var(--border-subtle, rgba(255,255,255,0.06)) !important;

    display: flex !important;

    flex-direction: column !important;

  }

  #sidebar.open,

  aside#sidebar.open,

  .sidebar.open,

  body.sidebar-open #sidebar,

  body.sidebar-open .sidebar {

    transform: translateX(0) !important;

    visibility: visible !important;

    box-shadow: 4px 0 32px rgba(0,0,0,0.55) !important;

  }

}

/* Sidebar overlay (mobil) */

.sidebar-overlay,

#sidebar-overlay {

  display: none;

  position: fixed !important;

  inset: 0 !important;

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

  z-index: var(--z-overlay) !important;

  cursor: pointer !important;

  backdrop-filter: blur(2px);

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

}

body.sidebar-open .sidebar-overlay,

body.sidebar-open #sidebar-overlay {

  display: block !important;

}

/* ── Sidebar iç yapı ── */

.sidebar-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 14px 8px;

  flex-shrink: 0;

  gap: 6px;

}

.sidebar-logo {

  display: flex;

  align-items: center;

  gap: 8px;

  text-decoration: none;

  min-width: 0;

  flex: 1;

}

.sidebar-logo-favicon {

  flex-shrink: 0;

  display: flex;

  align-items: center;

}

.sidebar-logo-name {

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--text-primary, #ececec);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  letter-spacing: -0.01em;

}

.sidebar-country-sup {

  font-size: 0.6rem;

  font-weight: 600;

  color: var(--text-muted, #555);

  vertical-align: super;

  margin-left: 2px;

  letter-spacing: 0.02em;

}

.sidebar-top-right {

  display: flex;

  align-items: center;

  gap: 2px;

  flex-shrink: 0;

}

/* Sidebar ikon butonları */

.sidebar-icon-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 32px;

  height: 32px;

  border-radius: 8px;

  border: none;

  background: transparent;

  color: var(--icon-default, #888);

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease);

  text-decoration: none;

  flex-shrink: 0;

}

.sidebar-icon-btn:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

  color: var(--icon-active, #ececec);

}

/* Expand butonu (daraltılmış modda) */

.sidebar-expand-btn {

  display: none;

  align-items: center;

  justify-content: center;

  gap: 6px;
#000000

  width: 100%;

  padding: 12px 8px;

  border: none;
#000000

  background: transparent;

  cursor: pointer;

  color: var(--icon-default, #888);
#000000

  transition: color var(--gx-dur-fast) var(--gx-ease);

}

.sidebar-expand-btn:hover { color: var(--icon-active, #ececec); }

/* Sidebar arama */

.sidebar-search-wrap {

  padding: 6px 10px 4px;

  flex-shrink: 0;

}

.sidebar-search-input {

  width: 100%;

  background: var(--bg-hover, rgba(255,255,255,0.05));

  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));

  border-radius: 8px;

  padding: 7px 10px 7px 32px;

  font-size: 0.8rem;

  color: var(--text-primary, #ececec);

  outline: none;

  transition: border-color var(--gx-dur-fast) var(--gx-ease),

              background var(--gx-dur-fast) var(--gx-ease);

  font-family: inherit;

}

.sidebar-search-input::placeholder {

  color: var(--text-muted, #555);

}

.sidebar-search-input:focus {

  border-color: var(--border-default, rgba(255,255,255,0.10));

  background: var(--bg-active, rgba(255,255,255,0.08));

}

.sidebar-search-wrap-inner {

  position: relative;

}

.sidebar-search-icon {

  position: absolute;

  left: 9px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--text-muted, #555);

  pointer-events: none;

}

/* Sidebar nav */

.sidebar-nav {

  padding: 4px 8px;

  flex-shrink: 0;

}

.sidebar-nav-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 8px 10px;

  border-radius: 8px;

  font-size: 0.85rem;

  font-weight: 500;

  color: var(--text-secondary, #999);

  text-decoration: none;

  cursor: pointer;

  border: none;

  background: transparent;

  width: 100%;

  text-align: left;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease);

  white-space: nowrap;

  overflow: hidden;

  font-family: inherit;

  min-height: 36px;

}

.sidebar-nav-item:hover {

  background: var(--sidebar-hover, rgba(255,255,255,0.06));

  color: var(--text-primary, #ececec);

}

.sidebar-nav-item.active {

  background: var(--sidebar-active, rgba(255,255,255,0.10));

  color: var(--text-primary, #ececec);

  font-weight: 600;

}

.sidebar-nav-item svg {

  flex-shrink: 0;

  opacity: 0.7;

}

.sidebar-nav-item:hover svg,

.sidebar-nav-item.active svg {

  opacity: 1;

}

/* Beta badge */

.sb-badge-beta {

  font-size: 0.6rem;

  font-weight: 700;

  padding: 2px 5px;

  border-radius: 4px;

  background: var(--accent-soft, rgba(99,102,241,0.15));

  color: var(--accent, #6366f1);

  letter-spacing: 0.03em;

  text-transform: uppercase;

  margin-left: auto;

  flex-shrink: 0;

}

/* Sidebar section label */

.sidebar-section-label {

  font-size: 0.7rem;

  font-weight: 600;

  color: var(--text-muted, #555);

  text-transform: uppercase;

  letter-spacing: 0.06em;

  padding: 10px 10px 4px;

}

/* Sohbet listesi */

.sidebar-conv-list {

  flex: 1;

  overflow-y: auto;

  overflow-x: hidden;

  padding: 0 8px;

  min-height: 0;

}

.sidebar-conv-list::-webkit-scrollbar { width: 3px; }

.sidebar-conv-list::-webkit-scrollbar-thumb {

  background: var(--border-subtle, rgba(255,255,255,0.06));

  border-radius: 3px;

}

.sidebar-conv-item {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 7px 10px;

  border-radius: 8px;

  font-size: 0.82rem;

  color: var(--text-secondary, #999);

  text-decoration: none;

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  min-height: 34px;

  position: relative;

}

.sidebar-conv-item:hover {

  background: var(--sidebar-hover, rgba(255,255,255,0.06));

  color: var(--text-primary, #ececec);

}

.sidebar-conv-item.active {

  background: var(--sidebar-active, rgba(255,255,255,0.10));

  color: var(--text-primary, #ececec);

}

.sidebar-conv-title {

  flex: 1;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

/* Sidebar alt bölüm */

.sidebar-bottom {

  flex-shrink: 0;

  padding: 8px;

  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));

  margin-top: auto;

}

/* Kullanıcı profil alanı */

.sidebar-user-btn {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 8px 10px;

  border-radius: 10px;

  border: none;

  background: transparent;

  cursor: pointer;

  width: 100%;

  text-align: left;

  transition: background var(--gx-dur-fast) var(--gx-ease);

  font-family: inherit;

  min-height: 44px;

}

.sidebar-user-btn:hover {

  background: var(--sidebar-hover, rgba(255,255,255,0.06));

}

.sidebar-user-avatar {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: var(--bg-elevated, #222);

  color: var(--text-primary, #ececec);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.8rem;

  font-weight: 700;

  flex-shrink: 0;

  overflow: hidden;

}

.sidebar-user-avatar img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 50%;

}

.sidebar-user-info {

  flex: 1;

  min-width: 0;

}

.sidebar-user-name {

  font-size: 0.83rem;

  font-weight: 600;

  color: var(--text-primary, #ececec);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  display: block;

}

.sidebar-user-plan {

  font-size: 0.72rem;

  color: var(--text-muted, #555);

  display: block;

  margin-top: 1px;

}

/* Kullanım çubuğu */

.sidebar-usage-bar-wrap {

  padding: 6px 10px 4px;

}

.sidebar-usage-bar-track {

  height: 3px;

  background: var(--border-subtle, rgba(255,255,255,0.06));

  border-radius: 3px;

  overflow: hidden;

}

.sidebar-usage-bar-fill {

  height: 100%;

  border-radius: 3px;

  background: var(--accent, #6366f1);

  transition: width 0.4s var(--gx-ease);

}

.sidebar-usage-bar-fill.warn { background: #f59e0b; }

.sidebar-usage-bar-fill.danger { background: #ef4444; }

.sidebar-usage-text {

  font-size: 0.7rem;

  color: var(--text-muted, #555);

  margin-top: 4px;

  display: block;

}

/* Bildirim badge */

.sidebar-notif-badge {

  font-size: 0.65rem;

  font-weight: 700;

  padding: 1px 5px;

  border-radius: 10px;

  background: #ef4444;

  color: #fff;

  margin-left: auto;

  flex-shrink: 0;

}

/* ── Daha fazla popup ── */

.sb-more-wrap {

  position: relative;

}

.sb-more-popup {

  position: absolute;

  bottom: calc(100% + 8px);

  left: 8px;

  right: 8px;

  background: var(--bg-elevated, #222);

  border: 1px solid var(--border-default, rgba(255,255,255,0.10));

  border-radius: 12px;

  padding: 6px;

  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.60));

  z-index: var(--z-popup);

  max-height: 70vh;

  overflow-y: auto;

}

.sb-more-item {

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 8px 10px;

  border-radius: 8px;

  font-size: 0.82rem;

  color: var(--text-secondary, #999);

  text-decoration: none;

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease);

  white-space: nowrap;

  border: none;

  background: transparent;

  width: 100%;

  text-align: left;

  font-family: inherit;

}

.sb-more-item:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

  color: var(--text-primary, #ececec);

}

.sb-more-item.active {

  color: var(--text-primary, #ececec);

}

.sb-more-section-label {

  font-size: 0.68rem;

  font-weight: 600;

  color: var(--text-muted, #555);

  text-transform: uppercase;

  letter-spacing: 0.06em;

  padding: 8px 10px 4px;

}

.sb-more-divider {

  height: 1px;

  background: var(--border-subtle, rgba(255,255,255,0.06));

  margin: 4px 0;

}

/* Light tema sidebar */

[data-theme="light"] .sidebar-logo-name { color: #111; }

[data-theme="light"] .sidebar-nav-item { color: #555; }

[data-theme="light"] .sidebar-nav-item:hover { color: #111; background: rgba(0,0,0,0.04); }

[data-theme="light"] .sidebar-nav-item.active { color: #111; background: rgba(0,0,0,0.07); }

[data-theme="light"] .sidebar-user-name { color: #111; }

[data-theme="light"] .sidebar-user-plan { color: #888; }

[data-theme="light"] .sb-more-popup { background: #fff; border-color: rgba(0,0,0,0.10); }

[data-theme="light"] .sb-more-item { color: #555; }

[data-theme="light"] .sb-more-item:hover { background: rgba(0,0,0,0.04); color: #111; }

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

   MAIN ALAN — #main

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

#main,

.main-content {

  flex: 1 1 0 !important;

  min-width: 0 !important;

  height: 100dvh !important;

  display: flex !important;

  flex-direction: column !important;

  overflow: hidden !important;

  background: var(--bg-main, #0d0d0d) !important;

  position: relative !important;

}

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

   TOPBAR

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

.topbar,

.inner-topbar,

#topbar {

  height: var(--gx-topbar-h) !important;

  min-height: var(--gx-topbar-h) !important;

  max-height: var(--gx-topbar-h) !important;

  flex-shrink: 0 !important;

  display: flex !important;

  align-items: center !important;

  padding: 0 16px !important;

  gap: 8px !important;

  background: var(--bg-main, #0d0d0d) !important;

  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06)) !important;

  z-index: var(--z-topbar) !important;

  position: relative !important;

}

.topbar-inner {

  display: flex;

  align-items: center;

  width: 100%;

  gap: 8px;

}

/* Topbar sol */

.topbar-left {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

}

/* Topbar orta */

.topbar-center {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 0;

}

/* Topbar sağ */

.topbar-right {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-shrink: 0;

}

/* Hamburger (mobil) */

.topbar-hamburger,

.mobile-hamburger {

  display: none;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  border-radius: 8px;

  border: none;

  background: transparent;

  color: var(--icon-default, #888);

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease);

  flex-shrink: 0;

}

.topbar-hamburger:hover,

.mobile-hamburger:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

  color: var(--icon-active, #ececec);

}

@media (max-width: 768px) {

  .topbar-hamburger,

  .mobile-hamburger {

    display: flex !important;

  }

}

/* Topbar butonları */

.tb-icon-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  border-radius: 8px;

  border: none;

  background: transparent;

  color: var(--icon-default, #888);

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease);

  text-decoration: none;

}

.tb-icon-btn:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

  color: var(--icon-active, #ececec);

}

/* Paylaş butonu */

.tb-share-btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 6px 12px;

  border-radius: 8px;

  border: 1px solid var(--border-default, rgba(255,255,255,0.10));

  background: transparent;

  color: var(--text-secondary, #999);

  font-size: 0.8rem;

  font-weight: 500;

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease),

              border-color var(--gx-dur-fast) var(--gx-ease);

  font-family: inherit;

}

.tb-share-btn:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

  color: var(--text-primary, #ececec);

  border-color: var(--border-strong, rgba(255,255,255,0.18));

}

/* Topbar 3 nokta menü */

.tb-more-wrap {

  position: relative;

}

.tb-more-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  border-radius: 8px;

  border: none;

  background: transparent;

  color: var(--icon-default, #888);

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease);

}

.tb-more-btn:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

  color: var(--icon-active, #ececec);

}

.tb-more-menu,

.tb-more-dropdown {

  position: absolute;

  top: calc(100% + 6px);

  right: 0;

  min-width: 200px;

  background: var(--bg-elevated, #222);

  border: 1px solid var(--border-default, rgba(255,255,255,0.10));

  border-radius: 12px;

  padding: 6px;

  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.60));

  z-index: var(--z-dropdown);

}

[data-theme="light"] .tb-more-menu,

[data-theme="light"] .tb-more-dropdown {

  background: #fff;

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

  box-shadow: 0 8px 24px rgba(0,0,0,0.12);

}

.tb-more-sep {

  height: 1px;

  background: var(--border-subtle, rgba(255,255,255,0.06));

  margin: 4px 0;

}

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

   CHAT AREA — Mesaj + Input dikey sütun

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

#chat-area {

  flex: 1 1 0 !important;

  min-height: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  overflow: hidden !important;

  position: relative !important;

  background: var(--bg, #000000) !important;

}

[data-theme="light"] #chat-area {

  background: var(--bg, #ffffff) !important;

}

/* html/body/main arka planı — scroll sırasında boşluk gözükmesin */

html, body {

  background: var(--bg, #000000) !important;

}

[data-theme="light"] html,

[data-theme="light"] body {

  background: var(--bg, #ffffff) !important;

}

#main {

  background: var(--bg, #000000) !important;

}

[data-theme="light"] #main {

  background: var(--bg, #ffffff) !important;

}

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

   MESAJ ALANI — #messages

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

#messages {

  flex: 1 1 0 !important;

  min-height: 0 !important;

  overflow-y: auto !important;

  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch;

  overscroll-behavior: contain;

  scroll-behavior: smooth;

  padding: 20px 0 120px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: stretch !important;

}

#messages.has-messages {

  justify-content: flex-start !important;

}

#messages::-webkit-scrollbar { width: 4px; }

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

#messages::-webkit-scrollbar-thumb {

  background: var(--border-subtle, rgba(255,255,255,0.06));

  border-radius: 4px;

}

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

   MESAJ WRAPPER — ChatGPT tarzı

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

.msg-wrapper {

  display: flex;

  padding: 2px 20px;

  gap: 12px;

  max-width: var(--gx-msg-max);

  margin: 0 auto;

  width: 100%;

  box-sizing: border-box;

  align-items: flex-start;

  flex-shrink: 0 !important;

}

.msg-wrapper.user {

  flex-direction: row-reverse;

  align-items: flex-end;

}

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

/* Mesaj 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;

  margin-top: 2px;

}

.msg-avatar.ai {

  background: var(--bg-surface, #1a1a1a);

  color: var(--text-primary, #ececec);

}

.msg-avatar.user {

  background: var(--bg-elevated, #222);

  color: var(--text-primary, #ececec);

}

.msg-avatar img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 50%;

}

/* Mesaj içerik */

.msg-content {

  flex: 1;

  min-width: 0;

}

/* Kullanıcı balonu */

.msg-wrapper.user .msg-bubble {

  display: inline-block;

  background: var(--bg-elevated, #222) !important;

  color: var(--text-primary, #ececec) !important;

  padding: 10px 16px !important;

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

  max-width: 80%;

  margin-left: auto;

  border: 1px solid var(--border-default, rgba(255,255,255,0.10)) !important;

  box-shadow: none !important;

  font-size: 0.9375rem;

  line-height: 1.65;

  word-break: break-word;

}

[data-theme="light"] .msg-wrapper.user .msg-bubble {

  background: #f0ede8 !important;

  color: #1a1a1a !important;

  border-color: transparent !important;

}

/* 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, #ececec) !important;

  font-size: 0.9375rem;

  line-height: 1.65;

  word-break: break-word;

}

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

[data-theme="light"] .msg-wrapper.assistant .msg-bubble {

  color: #1a1a1a !important;

}

/* Mesaj aksiyonları */

.msg-actions {

  display: flex;

  gap: 2px;

  margin-top: 6px;

  opacity: 0;

  transition: opacity var(--gx-dur-fast) var(--gx-ease);

}

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

  border: none;

  background: none;

  color: var(--text-muted, #555);

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease);

}

.msg-action-btn:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

  color: var(--text-primary, #ececec);

}

/* Mesaj model etiketi */

.msg-model-label {

  font-size: 11px;

  color: var(--text-muted, #555);

  margin-bottom: 4px;

  display: flex;

  align-items: center;

  gap: 5px;

}

/* Typing indicator */

.typing-indicator {

  display: flex;

  gap: 6px;

  align-items: center;

  padding: 12px 0;

}

.typing-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--text-secondary, #888);

  animation: gx-typing-bounce 0.9s infinite;

}

.typing-dot:nth-child(2) { animation-delay: 0.15s; }

.typing-dot:nth-child(3) { animation-delay: 0.30s; }

@keyframes gx-typing-bounce {

  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }

  30% { transform: translateY(-5px); opacity: 1; }

}

/* Typing status yazısı — belirgin ve okunabilir */

.typing-status {

  font-size: 0.80rem !important;

  color: var(--text-secondary, #aaa) !important;

  margin-left: 4px !important;

  font-weight: 400 !important;

  letter-spacing: 0 !important;

}

[data-theme="light"] .typing-status {

  color: #555 !important;

}

.typing-status-anim {

  animation: gx-status-fade .35s ease both !important;

}

@keyframes gx-status-fade {

  from { opacity: 0; transform: translateY(3px); }

  to   { opacity: 1; transform: translateY(0); }

}

/* Streaming cursor */

.stream-cursor::after {

  content: '▋';

  animation: gx-blink 0.7s infinite;

  color: var(--accent, #6366f1);

}

/* ── Topbar marka logosu — sidebar toggle'dan sonra ── */

.tb-brand-logo {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  text-decoration: none !important;

  flex-shrink: 0 !important;

  overflow: hidden !important;

  max-width: 160px !important;

  min-width: 0 !important;

}

.tb-brand-favicon {

  width: 20px !important;

  height: 20px !important;

  flex-shrink: 0 !important;

  object-fit: contain !important;

}

.tb-brand-name {

  font-size: 0.84rem !important;

  font-weight: 600 !important;

  color: var(--text-primary, #ececec) !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  max-width: 110px !important;

  letter-spacing: -0.01em !important;

}

[data-theme="light"] .tb-brand-name {

  color: #111 !important;

}

/* Mobilde marka adını gizle — sadece favicon göster */

@media (max-width: 480px) {

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

  .tb-brand-logo { max-width: 28px !important; }

}

/* ── Tamamlandı chip — done event sonrası kısa süre görünür ── */

.gx-done-chip {

  display: inline-flex !important;

  align-items: center !important;

  gap: 5px !important;

  padding: 3px 8px !important;

  border-radius: 6px !important;

  background: rgba(74,222,128,0.08) !important;

  border: 1px solid rgba(74,222,128,0.18) !important;

  color: #4ade80 !important;

  font-size: 0.72rem !important;

  font-weight: 500 !important;

  margin: 4px 0 2px !important;

  animation: gx-done-in .2s ease !important;

  transition: opacity .4s ease !important;

}

[data-theme="light"] .gx-done-chip {

  background: rgba(22,163,74,0.07) !important;

  border-color: rgba(22,163,74,0.15) !important;

  color: #16a34a !important;

}

.gx-done-chip-out {
  animation: gx-done-out .75s cubic-bezier(.4,0,.2,1) forwards !important;
  transition: none !important;
}

@keyframes gx-done-in {
  from { opacity: 0; transform: translateY(4px) scale(.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gx-done-out {
  0%   { opacity: 1;  transform: scale(1)   rotate(0deg);   max-height: 32px; margin: 4px 0 2px; padding: 3px 8px; }
  40%  { opacity: .6; transform: scale(.88) rotate(-8deg); }
  70%  { opacity: .2; transform: scale(.72) rotate(12deg);  max-height: 32px; margin: 4px 0 2px; padding: 3px 8px; }
  100% { opacity: 0;  transform: scale(.5)  rotate(-6deg); max-height: 0;    margin: 0;         padding: 0 8px; }
}

  to   { opacity: 1; transform: translateY(0); }

}

@keyframes gx-blink {

  0%, 100% { opacity: 1; }

  50% { opacity: 0; }

}

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

   WELCOME EKRANI

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

#welcome-screen,

.welcome-screen {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: flex-end !important;

  flex: 1 !important;

  padding: 40px 24px 32px !important;

  text-align: center !important;

  overflow-y: auto !important;

  min-height: 0 !important;

  width: 100% !important;

  box-sizing: border-box !important;

}

/* Welcome logo */

.welcome-logo {

  width: auto;

  height: 48px;

  max-width: 160px;

  margin: 0 auto 16px;

  display: block;

  object-fit: contain;

}

/* Welcome başlık */

.welcome-title {

  font-size: clamp(1.5rem, 3.5vw, 2.4rem);

  font-weight: 700;

  margin-bottom: 10px;

  line-height: 1.2;

  letter-spacing: -0.02em;

  color: var(--text-primary, #ececec);

}

/* Welcome alt başlık */

.welcome-greeting,

.welcome-sub {

  font-size: 0.95rem;

  color: var(--text-secondary, #999);

  margin-bottom: 28px;

  max-width: 480px;

  line-height: 1.55;

}

/* Welcome öneri kartları grid */

.welcome-suggest-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 8px;

  width: 100%;

  max-width: 640px;

  margin: 0 auto 8px;

}

@media (max-width: 640px) {

  .welcome-suggest-grid {

    grid-template-columns: 1fr;

    max-width: 100%;

  }

}

.wsg-card {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  padding: 12px 14px;

  border-radius: 12px;

  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));

  background: var(--bg-surface, #1a1a1a);

  cursor: pointer;

  text-align: left;

  transition: border-color var(--gx-dur-mid) var(--gx-ease),

              background var(--gx-dur-mid) var(--gx-ease),

              transform var(--gx-dur-fast) var(--gx-ease),

              box-shadow var(--gx-dur-mid) var(--gx-ease);

  font-family: inherit;

  color: var(--text-primary, #ececec);

  border: none;

  background: transparent;

}

.wsg-card:hover {

  background: var(--bg-hover, rgba(255,255,255,0.05));

  transform: translateY(-1px);

}

.wsg-card-icon {

  width: 28px;

  height: 28px;

  border-radius: 8px;

  flex-shrink: 0;

  background: var(--bg-elevated, #222);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--accent, #6366f1);

  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));

}

.wsg-card-body { min-width: 0; }

.wsg-card-title {

  font-size: 0.83rem;

  font-weight: 600;

  color: var(--text-primary, #ececec);

  margin-bottom: 2px;

}

.wsg-card-sub {

  font-size: 0.75rem;

  color: var(--text-muted, #555);

  line-height: 1.4;

}

[data-theme="light"] .wsg-card:hover { background: rgba(0,0,0,0.04); }

[data-theme="light"] .wsg-card-title { color: #111; }

[data-theme="light"] .wsg-card-sub { color: #888; }

[data-theme="light"] .wsg-card-icon { background: #f0f0f2; border-color: rgba(0,0,0,0.08); }

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

   COMPOSER / INPUT ALANI

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

#input-area {

  flex-shrink: 0 !important;

  flex-grow: 0 !important;

  padding: 8px 20px max(16px, env(safe-area-inset-bottom, 16px)) !important;

  background: transparent !important;

  position: relative !important;

  z-index: var(--z-input) !important;

}

/* Composer container */

.input-container,

#chat-input-container {

  max-width: var(--gx-composer-max) !important;

  margin: 0 auto !important;

  background: var(--bg-input, #161616) !important;

  border: 1px solid var(--border-default, rgba(255,255,255,0.10)) !important;

  border-radius: 16px !important;

  transition: border-color var(--gx-dur-mid) var(--gx-ease),

              box-shadow var(--gx-dur-mid) var(--gx-ease) !important;

  overflow: visible !important;

  position: relative !important;

  display: flex !important;

  flex-direction: column !important;

  box-sizing: border-box !important;

  width: 100% !important;

}

.input-container:focus-within,

#chat-input-container:focus-within {

  border-color: var(--border-strong, rgba(255,255,255,0.18)) !important;

  box-shadow: 0 0 0 3px var(--accent-soft, rgba(99,102,241,0.10)) !important;

}

[data-theme="light"] .input-container,

[data-theme="light"] #chat-input-container {

  background: #ffffff !important;

  border-color: rgba(0,0,0,0.12) !important;

  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;

}

[data-theme="light"] .input-container:focus-within,

[data-theme="light"] #chat-input-container:focus-within {

  border-color: rgba(99,102,241,0.40) !important;

  box-shadow: 0 0 0 3px rgba(99,102,241,0.08) !important;

}

/* Textarea */

#message-input {

  width: 100% !important;

  background: transparent !important;

  border: none !important;

  outline: none !important;

  resize: none !important;

  color: var(--text-primary, #ececec) !important;

  font-size: 15px !important;

  line-height: 1.6 !important;

  max-height: 300px !important;

  padding: 14px 16px 4px !important;

  overflow-y: auto !important;

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

  box-shadow: none !important;

  caret-color: var(--accent, #6366f1) !important;

}

#message-input::placeholder {

  color: var(--text-muted, #555) !important;

  opacity: 1 !important;

}

[data-theme="light"] #message-input {

  color: #111 !important;

}

[data-theme="light"] #message-input::placeholder {

  color: #aaa !important;

}

/* Ek dosya chip'leri */

.input-attachments {

  padding: 10px 14px 4px;

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}

.input-attachments:empty { display: none; padding: 0; }

.attach-chip {

  display: flex;

  align-items: center;

  gap: 6px;

  background: var(--bg-elevated, #222);

  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));

  border-radius: 8px;

  padding: 4px 8px;

  font-size: 0.75rem;

  color: var(--text-secondary, #999);

}

.attach-chip-remove {

  background: none;

  border: none;

  color: var(--text-muted, #555);

  cursor: pointer;

  padding: 0;

  display: flex;

  align-items: center;

  transition: color var(--gx-dur-fast) var(--gx-ease);

}

.attach-chip-remove:hover { color: #ef4444; }

/* Input toolbar */

.input-toolbar {

  display: flex;

  align-items: center;

  padding: 6px 10px 10px;

  gap: 4px;

  flex-wrap: nowrap;

  width: 100%;

  box-sizing: border-box;

  min-width: 0;

}

.input-toolbar-left {

  display: flex;

  align-items: center;

  gap: 4px;

  flex-shrink: 0;

}

.input-toolbar-center {

  display: flex;

  align-items: center;

  gap: 4px;

  flex: 1;

  min-width: 0;

  overflow: hidden;

}

.input-toolbar-right {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-shrink: 0;

  margin-left: auto;

}

/* Toolbar butonları */

.input-btn,

.itb-add-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 32px;

  height: 32px;

  border-radius: 8px;

  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));

  background: transparent;

  color: var(--text-muted, #555);

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease),

              border-color var(--gx-dur-fast) var(--gx-ease);

  flex-shrink: 0;

}

.input-btn:hover,

.itb-add-btn:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

  color: var(--text-primary, #ececec);

  border-color: var(--border-default, rgba(255,255,255,0.10));

}

/* Model pill */

.input-model-pill,

.itb-model-pill {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  padding: 5px 10px;

  border-radius: 999px;

  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));

  background: transparent;

  color: var(--text-secondary, #999);

  font-size: 0.78rem;

  font-weight: 500;

  cursor: pointer;

  white-space: nowrap;

  max-width: 180px;

  overflow: hidden;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease),

              border-color var(--gx-dur-fast) var(--gx-ease);

  font-family: inherit;

}

.input-model-pill span,

.itb-model-pill span {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.input-model-pill:hover,

.itb-model-pill:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

  color: var(--text-primary, #ececec);

  border-color: var(--border-default, rgba(255,255,255,0.10));

}

/* Mikrofon butonu */

.input-mic-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 32px;

  height: 32px;

  border-radius: 8px;

  border: none;

  background: none;

  color: var(--text-muted, #555);

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease);

  flex-shrink: 0;

}

.input-mic-btn:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

  color: var(--text-primary, #ececec);

}

/* Gönder butonu */

.input-send-btn,

#send-btn,

.gx-send-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  border-radius: 50%;

  border: none;

  background: var(--accent, #6366f1);

  color: #fff;

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              transform var(--gx-dur-fast) var(--gx-ease),

              opacity var(--gx-dur-fast) var(--gx-ease);

  flex-shrink: 0;

}

.input-send-btn:hover,

#send-btn:hover,

.gx-send-btn:hover {

  background: var(--primary-bg-solid, #4f52e0);

  transform: scale(1.05);

}

.input-send-btn:disabled,

#send-btn:disabled,

.gx-send-btn:disabled {

  opacity: 0.4;

  cursor: not-allowed;

  transform: none;

}

/* Durdur butonu (streaming) */

.input-stop-btn,

#stop-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  border-radius: 10px;

  border: 1px solid var(--border-default, rgba(255,255,255,0.10));

  background: transparent;

  color: var(--text-secondary, #999);

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease);

  flex-shrink: 0;

}

.input-stop-btn:hover,

#stop-btn:hover {

  background: rgba(239,68,68,0.10);

  color: #ef4444;

  border-color: rgba(239,68,68,0.30);

}

/* Disclaimer */

.input-disclaimer,

#ai-disclaimer-bar {

  text-align: center;

  font-size: 0.7rem;

  color: var(--text-muted, #555);

  margin-top: 6px;

  padding: 0 4px;

}

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

   MODEL PICKER POPUP

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

.model-popup,

#model-popup,

.gx-model-popup {

  position: absolute;

  bottom: calc(100% + 10px);

  left: 0;

  min-width: 280px;

  max-width: 340px;

  background: var(--bg-elevated, #222);

  border: 1px solid var(--border-default, rgba(255,255,255,0.10));

  border-radius: 14px;

  padding: 8px;

  box-shadow: var(--shadow-xl, 0 16px 64px rgba(0,0,0,0.70));

  z-index: var(--z-popup);

  max-height: 60vh;

  overflow-y: auto;

}

[data-theme="light"] .model-popup,

[data-theme="light"] #model-popup,

[data-theme="light"] .gx-model-popup {

  background: #fff;

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

  box-shadow: 0 16px 48px rgba(0,0,0,0.14);

}

.model-popup-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 12px;

  border-radius: 10px;

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease);

  border: none;

  background: transparent;

  width: 100%;

  text-align: left;

  font-family: inherit;

}

.model-popup-item:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

}

.model-popup-item.active {

  background: var(--bg-active, rgba(255,255,255,0.09));

}

[data-theme="light"] .model-popup-item:hover { background: rgba(0,0,0,0.04); }

[data-theme="light"] .model-popup-item.active { background: rgba(99,102,241,0.08); }

.model-popup-name {

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--text-primary, #ececec);

}

.model-popup-desc {

  font-size: 0.75rem;

  color: var(--text-muted, #555);

  margin-top: 1px;

}

[data-theme="light"] .model-popup-name { color: #111; }

[data-theme="light"] .model-popup-desc { color: #888; }

.model-popup-badge {

  font-size: 0.65rem;

  font-weight: 700;

  padding: 2px 6px;

  border-radius: 4px;

  margin-left: auto;

  flex-shrink: 0;

}

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

   KOD BLOKLARI

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

.msg-bubble pre,

.message-content pre {

  background: var(--code-bg, #111) !important;

  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06)) !important;

  border-radius: 10px !important;

  overflow: hidden !important;

  margin: 12px 0 !important;

  position: relative !important;

}

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

[data-theme="light"] .message-content pre {

  background: #f6f8fa !important;

  border-color: #d0d7de !important;

}

.msg-bubble pre code,

.message-content pre code {

  background: none !important;

  padding: 14px 16px !important;

  font-size: 0.82em !important;

  display: block !important;

  overflow-x: auto !important;

  line-height: 1.6 !important;

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

}

/* Kod kopyala butonu */

.code-copy-btn {

  position: absolute;

  top: 8px;

  right: 8px;

  background: rgba(255,255,255,0.08);

  border: none;

  border-radius: 6px;

  color: var(--text-secondary, #999);

  font-size: 11px;

  padding: 4px 8px;

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease);

  font-family: inherit;

}

.code-copy-btn:hover {

  background: rgba(255,255,255,0.16);

  color: var(--text-primary, #ececec);

}

[data-theme="light"] .code-copy-btn {

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

  color: #555;

}

[data-theme="light"] .code-copy-btn:hover {

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

  color: #111;

}

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

   MISAFIR BANNER

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

#guest-banner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 12px 20px;

  background: var(--bg-surface, #1a1a1a);

  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));

  flex-shrink: 0;

}

[data-theme="light"] #guest-banner {

  background: #f7f7f8;

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

}

.guest-banner-text {

  font-size: 0.83rem;

  color: var(--text-secondary, #999);

}

.guest-banner-btns {

  display: flex;

  gap: 8px;

  flex-shrink: 0;

}

.guest-banner-login {

  padding: 6px 14px;

  border-radius: 8px;

  border: 1px solid var(--border-default, rgba(255,255,255,0.10));

  background: transparent;

  color: var(--text-primary, #ececec);

  font-size: 0.82rem;

  font-weight: 500;

  cursor: pointer;

  text-decoration: none;

  transition: background var(--gx-dur-fast) var(--gx-ease);

  font-family: inherit;

}

.guest-banner-login:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

}

.guest-banner-register {

  padding: 6px 14px;

  border-radius: 8px;

  border: none;

  background: var(--accent, #6366f1);

  color: #fff;

  font-size: 0.82rem;

  font-weight: 600;

  cursor: pointer;

  text-decoration: none;

  transition: opacity var(--gx-dur-fast) var(--gx-ease);

  font-family: inherit;

}

.guest-banner-register:hover { opacity: 0.88; }

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

   TOAST BİLDİRİMLERİ

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

.gx-toast-container {

  position: fixed;

  bottom: 24px;

  left: 50%;

  transform: translateX(-50%);

  z-index: var(--z-toast);

  display: flex;

  flex-direction: column;

  gap: 8px;

  pointer-events: none;

  width: max-content;

  max-width: calc(100vw - 32px);

}

.gx-toast {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 16px;

  border-radius: 10px;

  background: var(--bg-elevated, #222);

  border: 1px solid var(--border-default, rgba(255,255,255,0.10));

  color: var(--text-primary, #ececec);

  font-size: 0.85rem;

  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.60));

  pointer-events: auto;

  animation: gx-toast-in 0.2s var(--gx-ease);

}

@keyframes gx-toast-in {

  from { opacity: 0; transform: translateY(8px); }

  to   { opacity: 1; transform: translateY(0); }

}

.gx-toast.success { border-color: rgba(16,185,129,0.30); }

.gx-toast.error   { border-color: rgba(239,68,68,0.30); }

.gx-toast.warning { border-color: rgba(245,158,11,0.30); }

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

   MOBİL HEADER (sidebar.php'den gelen)

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

.mobile-page-header {

  display: none;

  align-items: center;

  justify-content: space-between;

  padding: 0 12px;

  height: 52px;

  min-height: 52px;

  background: var(--bg-main, #0d0d0d);

  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));

  flex-shrink: 0;

  z-index: var(--z-topbar);

  position: relative;

}

@media (max-width: 768px) {

  .mobile-page-header {

    display: flex !important;

  }

}

.mph-left {

  display: flex;

  align-items: center;

  gap: 8px;

}

.mph-right {

  display: flex;

  align-items: center;

  gap: 4px;

}

.mobile-header-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  border-radius: 8px;

  border: none;

  background: transparent;

  color: var(--icon-default, #888);

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease);

  text-decoration: none;

  flex-shrink: 0;

}

.mobile-header-btn:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

  color: var(--icon-active, #ececec);

}

.mobile-page-header-logo {

  display: flex;

  align-items: center;

  gap: 6px;

  text-decoration: none;

}

.mobile-logo-text {

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--text-primary, #ececec);

  letter-spacing: -0.01em;

}

.mobile-header-login-btn {

  padding: 5px 12px;

  border-radius: 8px;

  border: 1px solid var(--border-default, rgba(255,255,255,0.10));

  background: transparent;

  color: var(--text-primary, #ececec);

  font-size: 0.8rem;

  font-weight: 500;

  text-decoration: none;

  transition: background var(--gx-dur-fast) var(--gx-ease);

}

.mobile-header-login-btn:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

}

.mobile-header-register-btn {

  padding: 5px 12px;

  border-radius: 8px;

  border: none;

  background: var(--accent, #6366f1);

  color: #fff;

  font-size: 0.8rem;

  font-weight: 600;

  text-decoration: none;

  transition: opacity var(--gx-dur-fast) var(--gx-ease);

}

.mobile-header-register-btn:hover { opacity: 0.88; }

/* Mobil arama çubuğu */

.mobile-search-bar {

  background: var(--bg-main, #0d0d0d);

  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));

  padding: 8px 12px;

  flex-shrink: 0;

}

.mobile-search-inner {

  display: flex;

  align-items: center;

  gap: 6px;

  background: var(--bg-hover, rgba(255,255,255,0.05));

  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));

  border-radius: 10px;

  padding: 6px 10px;

}

.mobile-search-input {

  flex: 1;

  background: transparent;

  border: none;

  outline: none;

  color: var(--text-primary, #ececec);

  font-size: 0.85rem;

  font-family: inherit;

}

.mobile-search-input::placeholder { color: var(--text-muted, #555); }

.mobile-search-count {

  font-size: 0.75rem;

  color: var(--text-muted, #555);

  white-space: nowrap;

}

.mobile-search-nav,

.mobile-search-close {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 28px;

  height: 28px;

  border-radius: 6px;

  border: none;

  background: transparent;

  color: var(--text-muted, #555);

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease);

}

.mobile-search-nav:hover,

.mobile-search-close:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06));

  color: var(--text-primary, #ececec);

}

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

   MOBİL RESPONSIVE

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

@media (max-width: 768px) {

  /* Main tam genişlik */

  #main { width: 100% !important; min-width: 0 !important; }

  /* Input alanı */

  #input-area {

    padding: 8px 12px max(12px, env(safe-area-inset-bottom, 12px)) !important;

  }

  .input-container,

  #chat-input-container {

    border-radius: 14px !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

  }

  /* iOS zoom önleme */

  #message-input { font-size: 16px !important; }

  /* Mesaj padding */

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

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

  /* Welcome */

  #welcome-screen,

  .welcome-screen {

    padding: 20px 16px 16px !important;

  }

  .welcome-title { font-size: 1.4rem; }

  .welcome-greeting,

  .welcome-sub { font-size: 0.85rem; margin-bottom: 20px; }

  /* Toolbar mobil: metin gizle, sadece ikon */

  .itb-pill-btn span { display: none !important; }

  .itb-pill-btn {

    padding: 0 8px !important;

    gap: 0 !important;

    min-width: 30px;

    justify-content: center;

  }

  .itb-model-pill {

    max-width: 120px !important;

    padding: 0 8px !important;

  }

  .itb-model-pill span {

    max-width: 75px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    display: block;

  }

  /* Popup/dropdown ekran dışına çıkmasın */

  .model-popup,

  #model-popup,

  .gx-model-popup,

  .msg-more-dropdown,

  .tb-more-menu,

  .tb-more-dropdown {

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

    left: auto !important;

    right: 0 !important;

  }

  /* Guest banner */

  #guest-banner {

    flex-direction: column;

    gap: 10px;

    text-align: center;

    padding: 12px 16px;

  }

  .guest-banner-btns { justify-content: center; }

}

@media (max-width: 480px) {

  .welcome-title { font-size: 1.2rem; }

  .itb-model-pill { max-width: 90px !important; }

  .itb-model-pill span { max-width: 55px; }

  .input-btn,

  .itb-add-btn,

  .input-mic-btn,

  .mobile-header-btn {

    width: 30px !important;

    height: 30px !important;

  }

}

/* Tablet */

@media (min-width: 769px) and (max-width: 1024px) {

  .welcome-suggest-grid {

    grid-template-columns: repeat(2, 1fr);

    max-width: 520px;

  }

  .msg-wrapper { padding: 2px 16px; }

}

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

   ERİŞİLEBİLİRLİK

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

:focus-visible {

  outline: 2px solid var(--focus-ring, rgba(99,102,241,0.60)) !important;

  outline-offset: 2px !important;

  border-radius: 4px !important;

}

/* Reduced motion */

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

  .sidebar,

  #sidebar,

  .sidebar-overlay,

  #sidebar-overlay,

  .gx-toast,

  .typing-dot,

  .stream-cursor::after {

    animation: none !important;

    transition: none !important;

  }

}

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

   LOGO TEMA UYUMU

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

.logo-dark-only  { display: block; }

.logo-light-only { display: none; }

[data-theme="light"] .logo-dark-only  { display: none; }

[data-theme="light"] .logo-light-only { display: block; }

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

   YARDIMCI SINIFLAR

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

.gx-hidden { display: none !important; }

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

}

/* Divider */

.gx-sep {

  height: 1px;

  background: var(--border-subtle, rgba(255,255,255,0.06));

  margin: 4px 0;

}

/* Scrollbar ince */

.sidebar-conv-list::-webkit-scrollbar,

#messages::-webkit-scrollbar,

.sb-more-popup::-webkit-scrollbar,

.model-popup::-webkit-scrollbar {

  width: 3px;

}

.sidebar-conv-list::-webkit-scrollbar-thumb,

#messages::-webkit-scrollbar-thumb,

.sb-more-popup::-webkit-scrollbar-thumb,

.model-popup::-webkit-scrollbar-thumb {

  background: var(--border-subtle, rgba(255,255,255,0.06));

  border-radius: 3px;

}

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

   LIGHT TEMA GENEL DÜZELTMELER

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

[data-theme="light"] #messages {

  background: #ffffff !important;

}

[data-theme="light"] #main {

  background: #ffffff !important;

}

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

[data-theme="light"] .inner-topbar,

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

  background: #ffffff !important;

  border-bottom-color: rgba(0,0,0,0.08) !important;

}

[data-theme="light"] .mobile-page-header {

  background: #ffffff !important;

  border-bottom-color: rgba(0,0,0,0.08) !important;

}

[data-theme="light"] .mobile-logo-text { color: #111; }

[data-theme="light"] .mobile-header-btn { color: #666; }

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

[data-theme="light"] .tb-share-btn {

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

  color: #555;

}

[data-theme="light"] .tb-share-btn:hover {

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

  color: #111;

  border-color: rgba(0,0,0,0.20);

}

[data-theme="light"] .tb-more-btn { color: #666; }

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

[data-theme="light"] .input-container,

[data-theme="light"] #chat-input-container {

  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;

}

[data-theme="light"] .input-btn,

[data-theme="light"] .itb-add-btn {

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

  color: #666;

}

[data-theme="light"] .input-btn:hover,

[data-theme="light"] .itb-add-btn:hover {

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

  color: #111;

}

[data-theme="light"] .input-model-pill,

[data-theme="light"] .itb-model-pill {

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

  color: #555;

}

[data-theme="light"] .input-model-pill:hover,

[data-theme="light"] .itb-model-pill:hover {

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

  color: #111;

}

[data-theme="light"] .input-mic-btn { color: #888; }

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

[data-theme="light"] .msg-action-btn { color: #aaa; }

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

[data-theme="light"] .typing-dot { background: #ccc; }

[data-theme="light"] .sidebar-search-input {

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

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

  color: #111;

}

[data-theme="light"] .sidebar-search-input:focus {

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

  border-color: rgba(0,0,0,0.14);

}

[data-theme="light"] .sidebar-section-label { color: #aaa; }

[data-theme="light"] .sidebar-conv-item { color: #555; }

[data-theme="light"] .sidebar-conv-item:hover { background: rgba(0,0,0,0.04); color: #111; }

[data-theme="light"] .sidebar-conv-item.active { background: rgba(0,0,0,0.07); color: #111; }

[data-theme="light"] .sidebar-bottom {

  border-top-color: rgba(0,0,0,0.08);

}

[data-theme="light"] .sidebar-user-btn:hover { background: rgba(0,0,0,0.04); }

[data-theme="light"] .sidebar-user-avatar { background: #e8e8eb; color: #111; }

[data-theme="light"] .sidebar-usage-bar-track { background: rgba(0,0,0,0.08); }

[data-theme="light"] .sidebar-usage-text { color: #aaa; }

[data-theme="light"] .attach-chip {

  background: #f0f0f2;

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

  color: #555;

}

[data-theme="light"] .gx-toast {

  background: #fff;

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

  color: #111;

  box-shadow: 0 8px 24px rgba(0,0,0,0.12);

}

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

   DRAG & DROP OVERLAY

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

.gx-drop-overlay {

  position: absolute;

  inset: 0;

  background: rgba(99,102,241,0.08);

  border: 2px dashed var(--accent, #6366f1);

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: var(--z-modal);

  pointer-events: none;

  opacity: 0;

  transition: opacity var(--gx-dur-mid) var(--gx-ease);

}

.gx-drop-overlay.active {

  opacity: 1;

  pointer-events: auto;

}

.gx-drop-overlay-text {

  font-size: 1rem;

  font-weight: 600;

  color: var(--accent, #6366f1);

}

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

   WORK PANEL (Çalışma modu)

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

#work-panel {

  flex: 1 1 0;

  min-height: 0;

  overflow-y: auto;

  padding: 24px 20px;

  display: none;

}

#work-panel.active { display: block; }

@media (max-width: 768px) {

  #work-panel { padding: 16px 12px; }

}

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

   HATA DURUMU

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

.gx-error-msg {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  padding: 12px 16px;

  border-radius: 10px;

  background: var(--color-error-bg, rgba(239,68,68,0.10));

  border: 1px solid rgba(239,68,68,0.20);

  color: var(--color-error, #ef4444);

  font-size: 0.85rem;

  margin: 8px 0;

}

.gx-error-retry {

  margin-left: auto;

  padding: 4px 10px;

  border-radius: 6px;

  border: 1px solid rgba(239,68,68,0.30);

  background: transparent;

  color: var(--color-error, #ef4444);

  font-size: 0.78rem;

  cursor: pointer;

  transition: background var(--gx-dur-fast) var(--gx-ease);

  font-family: inherit;

  flex-shrink: 0;

}

.gx-error-retry:hover { background: rgba(239,68,68,0.10); }

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

   NETWORK DURUMU

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

.gx-offline-bar {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  padding: 8px 16px;

  background: #f59e0b;

  color: #000;

  font-size: 0.82rem;

  font-weight: 600;

  text-align: center;

  z-index: var(--z-toast);

  transform: translateY(-100%);

  transition: transform var(--gx-dur-mid) var(--gx-ease);

}

.gx-offline-bar.visible {

  transform: translateY(0);

}

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

   SAFE AREA (iOS notch / home indicator)

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

@supports (padding-bottom: env(safe-area-inset-bottom)) {

  #input-area {

    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;

  }

  .mobile-page-header {

    padding-top: env(safe-area-inset-top, 0);

  }

}

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

   INPUT BAR — MİKROFON BUTONU (görünür)

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

.gx-mic-visible-btn {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 32px !important;

  height: 32px !important;

  min-width: 32px !important;

  border-radius: 8px !important;

  border: none !important;

  background: none !important;

  color: var(--icon-default, #888) !important;

  cursor: pointer !important;

  flex-shrink: 0 !important;

  transition: background var(--gx-dur-fast) var(--gx-ease), color var(--gx-dur-fast) var(--gx-ease) !important;

}

.gx-mic-visible-btn:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06)) !important;

  color: var(--icon-active, #ececec) !important;

}

.gx-mic-visible-btn.recording {

  color: #ef4444 !important;

  background: rgba(239,68,68,0.10) !important;

  animation: gx-mic-pulse 1s infinite !important;

}

@keyframes gx-mic-pulse {

  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }

  50%       { box-shadow: 0 0 0 5px rgba(239,68,68,0); }

}

/* Welcome ekranı aktifken gx-mic-main-btn gizle (gx-work-mic-btn zaten var) */

#welcome-screen ~ #input-area .gx-mic-visible-btn,

body:not(.chat-active) #gx-mic-main-btn {

  display: none !important;

}

/* Chat başlayınca göster */

body.chat-active #gx-mic-main-btn,

#messages.has-messages ~ #input-area .gx-mic-visible-btn {

  display: inline-flex !important;

}

/* ── Input bar yükseklik eşitleme ── */

/* Dış kapsayıcı: min-height kaldır, içerik belirlesin */

.input-container,

#chat-input-container,

.gx-gemini-bar {

  min-height: unset !important;

}

/* gx-bar-row: tüm elemanlar aynı yükseklikte, dikey ortalı */

.gx-bar-row,

.gx-gemini-bar .gx-bar-row {

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  min-height: 44px !important;

  height: 44px !important;

  padding: 0 8px 0 6px !important;

  gap: 4px !important;

  box-sizing: border-box !important;

}

/* + butonu */

.gx-bar-row .gx-plus-btn,

.gx-bar-row .itb-add-btn {

  width: 32px !important;

  height: 32px !important;

  min-width: 32px !important;

  flex-shrink: 0 !important;

  align-self: center !important;

}

/* Textarea: flex-1, dikey ortalı */

.gx-bar-row #message-input,

#chat-input-container #message-input {

  flex: 1 1 auto !important;

  min-width: 0 !important;

  align-self: center !important;

  min-height: 22px !important;

  max-height: 180px !important;

  height: auto !important;

  padding: 0 4px !important;

  margin: 0 !important;

  font-size: 14px !important;

  line-height: 1.5 !important;

  background: transparent !important;

  border: none !important;

  outline: none !important;

  box-shadow: none !important;

  resize: none !important;

  overflow-y: auto !important;

}

/* Sağ grup: model pill + mic + send — dikey ortalı */

.gx-bar-right {

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  gap: 4px !important;

  flex-shrink: 0 !important;

  align-self: center !important;

}

/* Mobilde tüm gx-bar-right çocukları: aynı yükseklik */

@media (max-width: 768px) {

  .gx-bar-right {

    height: 32px !important;

    gap: 3px !important;

  }

  .gx-bar-right > * {

    height: 32px !important;

    max-height: 32px !important;

    box-sizing: border-box !important;

    align-self: center !important;

  }

  .gx-bar-right .itb-model-pill,

  .gx-bar-right #input-model-pill {

    height: 32px !important;

    padding: 0 8px !important;

    border-radius: 8px !important;

    font-size: 12px !important;

  }

  .gx-bar-right .gx-mic-visible-btn,

  .gx-bar-right #gx-mic-main-btn {

    width: 32px !important;

    height: 32px !important;

  }

  .gx-bar-right .input-send-btn,

  .gx-bar-right #btn-send {

    width: 32px !important;

    height: 32px !important;

  }

}

/* Model pill — gönder butonuyla aynı yükseklik */

.itb-model-pill,

.input-model-pill,

#input-model-pill {

  height: 32px !important;

  min-height: 32px !important;

  display: inline-flex !important;

  align-items: center !important;

  align-self: center !important;

  padding: 0 10px !important;

  border-radius: 8px !important;

  font-size: 13px !important;

  gap: 4px !important;

  white-space: nowrap !important;

  flex-shrink: 0 !important;

}

/* Mikrofon butonu */

.gx-mic-visible-btn {

  width: 32px !important;

  height: 32px !important;

  min-width: 32px !important;

  align-self: center !important;

}

/* Gönder butonu — diğer butonlarla tam eşit */

.input-send-btn,

.input-send-inline,

#btn-send {

  width: 32px !important;

  height: 32px !important;

  min-width: 32px !important;

  max-width: 32px !important;

  max-height: 32px !important;

  box-sizing: border-box !important;

  align-self: center !important;

  border-radius: 50% !important;

  padding: 0 !important;

  margin: 0 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  flex-shrink: 0 !important;

  background: linear-gradient(135deg, #1a73e8 0%, #7c3aed 50%, #db2777 100%) !important;

  color: #fff !important;

  border: none !important;

  cursor: pointer !important;

  transition: opacity 0.15s var(--gx-ease) !important;

  vertical-align: middle !important;

}

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

.input-send-inline:hover:not(:disabled),

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

  opacity: 0.88 !important;

}

.input-send-btn:disabled,

.input-send-inline:disabled,

#btn-send:disabled {

  opacity: 0.40 !important;

  cursor: not-allowed !important;

}

/* Mikrofon butonu — aynı yükseklik */

.gx-mic-visible-btn {

  width: 32px !important;

  height: 32px !important;

  min-width: 32px !important;

  max-height: 32px !important;

  align-self: center !important;

}

@media (max-width: 768px) {

  .gx-bar-row,

  .gx-gemini-bar .gx-bar-row {

    min-height: 44px !important;

    height: 44px !important;

    padding: 0 6px 0 4px !important;

  }

}

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

   TOPBAR — MİSAFİR OTURUM AÇ BUTONU

   Topbar icon butonlarıyla aynı stil

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

.tb-login-btn {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  height: 36px !important;

  padding: 0 14px !important;

  border-radius: 8px !important;

  border: 1px solid var(--border-default, rgba(255,255,255,0.10)) !important;

  background: var(--bg-elevated, #222222) !important;

  color: var(--text-secondary, #999) !important;

  font-size: 0.82rem !important;

  font-weight: 500 !important;

  text-decoration: none !important;

  white-space: nowrap !important;

  cursor: pointer !important;

  flex-shrink: 0 !important;

  transition: background var(--gx-dur-fast) var(--gx-ease),

              color var(--gx-dur-fast) var(--gx-ease),

              border-color var(--gx-dur-fast) var(--gx-ease) !important;

}

.tb-login-btn:hover {

  background: var(--bg-hover, rgba(255,255,255,0.06)) !important;

  color: var(--text-primary, #ececec) !important;

  border-color: var(--border-strong, rgba(255,255,255,0.18)) !important;

  text-decoration: none !important;

}

/* İkon her zaman görünür */

.tb-login-btn svg {

  display: inline-block !important;

  flex-shrink: 0 !important;

  width: 14px !important;

  height: 14px !important;

  color: inherit !important;

}

/* Light tema */

[data-theme="light"] .tb-login-btn {

  background: var(--bg-elevated, #ffffff) !important;

  border-color: rgba(0,0,0,0.12) !important;

  color: var(--text-secondary, #555) !important;

}

[data-theme="light"] .tb-login-btn:hover {

  background: var(--bg-hover, rgba(0,0,0,0.04)) !important;

  color: var(--text-primary, #111) !important;

  border-color: rgba(0,0,0,0.20) !important;

}

/* Küçük ekranda da metin görünsün */

@media (max-width: 480px) {

  .tb-login-btn {

    padding: 0 10px !important;

    font-size: 0.78rem !important;

    height: 34px !important;

  }

  .tb-login-btn .tb-login-text {

    display: inline !important;

  }

  .tb-login-btn svg {

    width: 13px !important;

    height: 13px !important;

  }

}

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

   WELCOME SCREEN — GX HERO IMG WRAP (Avatar / Logo)

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

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

   GX FILE VIEWER — Evrensel Dosya Görüntüleyici Modal

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

/* Modal kapsayıcı */

.gxfv-modal {

  position: fixed !important;

  inset: 0 !important;

  z-index: 9999 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 16px !important;

  box-sizing: border-box !important;

}

/* Overlay */

.gxfv-overlay {

  position: absolute !important;

  inset: 0 !important;

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

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

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

}

/* Panel */

.gxfv-panel {

  position: relative !important;

  z-index: 1 !important;

  width: min(900px, 96vw) !important;

  max-height: 90vh !important;

  background: var(--bg-elevated, #1a1a1a) !important;

  border: 1px solid var(--border-default, rgba(255,255,255,0.10)) !important;

  border-radius: 14px !important;

  display: flex !important;

  flex-direction: column !important;

  overflow: hidden !important;

  box-shadow: 0 24px 64px rgba(0,0,0,0.60) !important;

  animation: gxfv-in 0.18s var(--gx-ease, ease) !important;

}

@keyframes gxfv-in {

  from { opacity: 0; transform: scale(0.96) translateY(8px); }

  to   { opacity: 1; transform: scale(1) translateY(0); }

}

/* Header */

.gxfv-header {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding: 12px 16px !important;

  border-bottom: 1px solid var(--border-default, rgba(255,255,255,0.08)) !important;

  flex-shrink: 0 !important;

  gap: 8px !important;

  min-height: 52px !important;

}

.gxfv-header-left {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  min-width: 0 !important;

  flex: 1 !important;

}

.gxfv-type-badge {

  font-size: 0.68rem !important;

  font-weight: 700 !important;

  padding: 2px 7px !important;

  border-radius: 4px !important;

  letter-spacing: 0.04em !important;

  flex-shrink: 0 !important;

  text-transform: uppercase !important;

}

.gxfv-title {

  font-size: 0.88rem !important;

  font-weight: 500 !important;

  color: var(--text-primary, #ececec) !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  max-width: 400px !important;

}

.gxfv-size {

  font-size: 0.75rem !important;

  color: var(--text-muted, #666) !important;

  flex-shrink: 0 !important;

}

.gxfv-header-actions {

  display: flex !important;

  align-items: center !important;

  gap: 6px !important;

  flex-shrink: 0 !important;

}

/* Butonlar */

.gxfv-btn {

  display: inline-flex !important;

  align-items: center !important;

  gap: 5px !important;

  padding: 5px 10px !important;

  border-radius: 7px !important;

  border: 1px solid var(--border-default, rgba(255,255,255,0.10)) !important;

  background: var(--bg-hover, rgba(255,255,255,0.04)) !important;

  color: var(--text-secondary, #999) !important;

  font-size: 0.78rem !important;

  font-weight: 500 !important;

  cursor: pointer !important;

  text-decoration: none !important;

  white-space: nowrap !important;

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

}

.gxfv-btn:hover {

  background: var(--bg-hover, rgba(255,255,255,0.08)) !important;

  color: var(--text-primary, #ececec) !important;

  border-color: var(--border-strong, rgba(255,255,255,0.18)) !important;

  text-decoration: none !important;

}

.gxfv-btn-primary {

  background: var(--accent, #6366f1) !important;

  color: #fff !important;

  border-color: transparent !important;

}

.gxfv-btn-primary:hover {

  opacity: 0.88 !important;

  color: #fff !important;

}

.gxfv-close-btn {

  padding: 5px !important;

  border-radius: 7px !important;

}

/* Body */

.gxfv-body {

  flex: 1 !important;

  overflow: auto !important;

  position: relative !important;

  min-height: 200px !important;

}

/* Loading */

.gxfv-loading {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 12px !important;

  padding: 48px !important;

  color: var(--text-muted, #666) !important;

  font-size: 0.85rem !important;

}

.gxfv-spinner {

  width: 28px !important;

  height: 28px !important;

  border: 2px solid var(--border-default, rgba(255,255,255,0.10)) !important;

  border-top-color: var(--accent, #6366f1) !important;

  border-radius: 50% !important;

  animation: gxfv-spin 0.7s linear infinite !important;

}

@keyframes gxfv-spin { to { transform: rotate(360deg); } }

/* Hata */

.gxfv-error {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 12px !important;

  padding: 48px !important;

  color: var(--text-muted, #666) !important;

  text-align: center !important;

}

.gxfv-error svg { color: #ef4444 !important; opacity: 0.7 !important; }

.gxfv-error p { font-size: 0.88rem !important; margin: 0 !important; }

/* ── GÖRSEL ── */

.gxfv-img-wrap {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  min-height: 300px !important;

  max-height: calc(90vh - 140px) !important;

  overflow: hidden !important;

  background: var(--bg-base, #0d0d0d) !important;

  cursor: grab !important;

  position: relative !important;

}

.gxfv-img {

  max-width: 100% !important;

  max-height: calc(90vh - 180px) !important;

  object-fit: contain !important;

  transition: transform 0.1s !important;

  user-select: none !important;

  pointer-events: none !important;

}

.gxfv-img-toolbar {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 6px !important;

  padding: 8px 16px !important;

  border-top: 1px solid var(--border-default, rgba(255,255,255,0.08)) !important;

  flex-shrink: 0 !important;

}

.gxfv-zoom-label {

  font-size: 0.78rem !important;

  color: var(--text-muted, #666) !important;

  min-width: 40px !important;

  text-align: center !important;

}

/* ── PDF ── */

.gxfv-pdf-wrap {

  display: flex !important;

  flex-direction: column !important;

  height: 100% !important;

}

.gxfv-pdf-toolbar {

  display: flex !important;

  align-items: center !important;

  gap: 6px !important;

  padding: 8px 16px !important;

  border-bottom: 1px solid var(--border-default, rgba(255,255,255,0.08)) !important;

  flex-shrink: 0 !important;

  flex-wrap: wrap !important;

}

.gxfv-pdf-page-info {

  display: flex !important;

  align-items: center !important;

  gap: 4px !important;

  font-size: 0.82rem !important;

  color: var(--text-secondary, #999) !important;

}

.gxfv-pdf-page-input {

  width: 44px !important;

  padding: 2px 6px !important;

  border-radius: 5px !important;

  border: 1px solid var(--border-default, rgba(255,255,255,0.10)) !important;

  background: var(--bg-base, #0d0d0d) !important;

  color: var(--text-primary, #ececec) !important;

  font-size: 0.82rem !important;

  text-align: center !important;

}

.gxfv-pdf-canvas-wrap {

  flex: 1 !important;

  overflow: auto !important;

  display: flex !important;

  align-items: flex-start !important;

  justify-content: center !important;

  padding: 16px !important;

  background: var(--bg-base, #0d0d0d) !important;

}

.gxfv-pdf-canvas {

  max-width: 100% !important;

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

}

/* ── KOD ── */

.gxfv-code-toolbar {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  padding: 8px 16px !important;

  border-bottom: 1px solid var(--border-default, rgba(255,255,255,0.08)) !important;

  flex-shrink: 0 !important;

}

.gxfv-code-lang {

  font-size: 0.72rem !important;

  font-weight: 600 !important;

  color: var(--accent, #6366f1) !important;

  text-transform: uppercase !important;

  letter-spacing: 0.06em !important;

}

.gxfv-code-lines {

  font-size: 0.72rem !important;

  color: var(--text-muted, #666) !important;

  margin-right: auto !important;

}

.gxfv-code-wrap {

  display: flex !important;

  overflow: auto !important;

  height: calc(90vh - 160px) !important;

  font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace) !important;

  font-size: 13px !important;

  line-height: 1.6 !important;

}

.gxfv-line-nums {

  display: flex !important;

  flex-direction: column !important;

  padding: 16px 12px 16px 16px !important;

  color: var(--text-muted, #444) !important;

  font-size: 12px !important;

  line-height: 1.6 !important;

  text-align: right !important;

  user-select: none !important;

  border-right: 1px solid var(--border-default, rgba(255,255,255,0.06)) !important;

  flex-shrink: 0 !important;

  min-width: 40px !important;

}

.gxfv-line-nums span { display: block !important; }

.gxfv-code-pre {

  flex: 1 !important;

  margin: 0 !important;

  padding: 16px !important;

  overflow: visible !important;

  white-space: pre !important;

  background: transparent !important;

  color: var(--text-primary, #ececec) !important;

}

.gxfv-code-el {

  background: transparent !important;

  font-family: inherit !important;

  font-size: inherit !important;

}

/* ── CSV TABLO ── */

.gxfv-csv-info {

  padding: 8px 16px !important;

  font-size: 0.75rem !important;

  color: var(--text-muted, #666) !important;

  border-bottom: 1px solid var(--border-default, rgba(255,255,255,0.08)) !important;

  flex-shrink: 0 !important;

}

.gxfv-csv-wrap {

  overflow: auto !important;

  max-height: calc(90vh - 160px) !important;

}

.gxfv-csv-table {

  width: 100% !important;

  border-collapse: collapse !important;

  font-size: 0.82rem !important;

  white-space: nowrap !important;

}

.gxfv-csv-table th {

  padding: 8px 12px !important;

  background: var(--bg-hover, rgba(255,255,255,0.04)) !important;

  color: var(--text-secondary, #999) !important;

  font-weight: 600 !important;

  border-bottom: 1px solid var(--border-default, rgba(255,255,255,0.10)) !important;

  text-align: left !important;

  position: sticky !important;

  top: 0 !important;

  z-index: 1 !important;

}

.gxfv-csv-table td {

  padding: 6px 12px !important;

  border-bottom: 1px solid var(--border-default, rgba(255,255,255,0.05)) !important;

  color: var(--text-primary, #ececec) !important;

  max-width: 240px !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

}

.gxfv-csv-table tr:hover td {

  background: var(--bg-hover, rgba(255,255,255,0.03)) !important;

}

/* ── SES / VİDEO ── */

.gxfv-media-wrap {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 16px !important;

  padding: 48px 24px !important;

}

.gxfv-media-icon { color: var(--text-muted, #555) !important; }

.gxfv-media-name {

  font-size: 0.88rem !important;

  color: var(--text-secondary, #999) !important;

  margin: 0 !important;

  text-align: center !important;

}

.gxfv-audio {

  width: 100% !important;

  max-width: 480px !important;

  border-radius: 8px !important;

}

.gxfv-video-wrap {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  background: #000 !important;

  min-height: 300px !important;

}

.gxfv-video {

  max-width: 100% !important;

  max-height: calc(90vh - 120px) !important;

}

/* ── ARŞİV / OFİS ── */

.gxfv-archive-wrap {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 12px !important;

  padding: 48px 24px !important;

  text-align: center !important;

}

.gxfv-archive-icon { color: var(--text-muted, #555) !important; }

.gxfv-archive-name {

  font-size: 0.92rem !important;

  font-weight: 500 !important;

  color: var(--text-primary, #ececec) !important;

  margin: 0 !important;

}

.gxfv-archive-note {

  font-size: 0.80rem !important;

  color: var(--text-muted, #666) !important;

  margin: 0 !important;

}

.gxfv-office-text-wrap {

  padding: 16px !important;

  overflow: auto !important;

  max-height: calc(90vh - 120px) !important;

}

.gxfv-office-note {

  display: flex !important;

  align-items: center !important;

  gap: 6px !important;

  padding: 8px 12px !important;

  border-radius: 7px !important;

  background: rgba(99,102,241,0.08) !important;

  color: var(--text-secondary, #999) !important;

  font-size: 0.78rem !important;

  margin-bottom: 12px !important;

}

.gxfv-office-text {

  font-family: var(--font-sans, system-ui, sans-serif) !important;

  font-size: 0.88rem !important;

  line-height: 1.7 !important;

  color: var(--text-primary, #ececec) !important;

  white-space: pre-wrap !important;

  margin: 0 !important;

}

/* ── LIGHT TEMA ── */

[data-theme="light"] .gxfv-panel {

  background: #ffffff !important;

  border-color: rgba(0,0,0,0.10) !important;

}

[data-theme="light"] .gxfv-header {

  border-bottom-color: rgba(0,0,0,0.08) !important;

}

[data-theme="light"] .gxfv-title { color: #111 !important; }

[data-theme="light"] .gxfv-size  { color: #888 !important; }

[data-theme="light"] .gxfv-btn {

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

  border-color: rgba(0,0,0,0.10) !important;

  color: #555 !important;

}

[data-theme="light"] .gxfv-btn:hover {

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

  color: #111 !important;

}

[data-theme="light"] .gxfv-img-wrap,

[data-theme="light"] .gxfv-pdf-canvas-wrap {

  background: #f0f0f0 !important;

}

[data-theme="light"] .gxfv-code-wrap {

  background: #f8f8f8 !important;

}

[data-theme="light"] .gxfv-code-pre { color: #111 !important; }

[data-theme="light"] .gxfv-csv-table th {

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

  color: #555 !important;

}

[data-theme="light"] .gxfv-csv-table td { color: #111 !important; }

[data-theme="light"] .gxfv-office-text { color: #111 !important; }

/* ── MOBİL ── */

@media (max-width: 640px) {

  .gxfv-modal { padding: 0 !important; align-items: flex-end !important; }

  .gxfv-panel {

    width: 100vw !important;

    max-height: 95vh !important;

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

  }

  .gxfv-title { max-width: 180px !important; }

  .gxfv-code-wrap { height: calc(95vh - 160px) !important; }

  .gxfv-csv-wrap  { max-height: calc(95vh - 160px) !important; }

  .gxfv-img-wrap  { max-height: calc(95vh - 180px) !important; }

  .gxfv-img       { max-height: calc(95vh - 220px) !important; }

}

/* prefers-reduced-motion */

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

  .gxfv-panel { animation: none !important; }

  .gxfv-spinner { animation-duration: 1.5s !important; }

}

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

   ATTACHMENT PREVIEW — TXT / Dosya kartları (input üstü)

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

#attachments-preview,

#work-attachments-preview {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 6px !important;

  padding: 8px 12px 4px !important;

  width: 100% !important;

  box-sizing: border-box !important;

}

#attachments-preview:empty,

#work-attachments-preview:empty {

  display: none !important;

  padding: 0 !important;

}

/* ── Composer attachment chip — ChatGPT tarzı küçük chip ── */

.att-preview-item {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  padding: 5px 8px 5px 7px !important;

  border-radius: 8px !important;

  border: 1px solid var(--border-default, rgba(255,255,255,0.10)) !important;

  background: var(--bg-elevated, #2a2a2a) !important;

  cursor: pointer !important;

  max-width: 220px !important;

  min-width: 0 !important;

  position: relative !important;

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

  flex-shrink: 0 !important;

  vertical-align: middle !important;

}

.att-preview-item:hover {

  border-color: var(--border-strong, rgba(255,255,255,0.22)) !important;

  background: var(--bg-elevated-hover, #333) !important;

}

[data-theme="light"] .att-preview-item {

  background: #f0f0f0 !important;

  border-color: rgba(0,0,0,0.10) !important;

}

[data-theme="light"] .att-preview-item:hover {

  background: #e8e8e8 !important;

  border-color: rgba(0,0,0,0.18) !important;

}

/* TXT kart — ince sol border accent */

.att-txt-card {

  border-left: 2px solid var(--accent, #10a37f) !important;

}

/* İkon alanı — küçük */

.att-txt-icon {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 22px !important;

  height: 22px !important;

  border-radius: 5px !important;

  background: var(--accent-soft, rgba(16,163,127,0.12)) !important;

  color: var(--accent, #10a37f) !important;

  flex-shrink: 0 !important;

}

/* Bilgi alanı */

.att-txt-info {

  flex: 1 !important;

  min-width: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 0 !important;

  overflow: hidden !important;

}

.att-txt-name {

  font-size: 0.75rem !important;

  font-weight: 500 !important;

  color: var(--text-primary, #ececec) !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  max-width: 130px !important;

  display: block !important;

  line-height: 1.3 !important;

}

.att-txt-meta {

  font-size: 0.67rem !important;

  color: var(--text-muted, #888) !important;

  display: block !important;

  line-height: 1.2 !important;

}

[data-theme="light"] .att-txt-name {

  color: var(--text-primary, #111) !important;

}

[data-theme="light"] .att-txt-meta {

  color: #666 !important;

}

/* Aksiyon butonları alanı */

.att-txt-actions {

  display: flex !important;

  align-items: center !important;

  gap: 2px !important;

  flex-shrink: 0 !important;

  margin-left: 2px !important;

}

/* Metin olarak ekle butonu — küçük, chip içinde */

.att-txt-btn {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 16px !important;

  height: 16px !important;

  border-radius: 4px !important;

  border: none !important;

  background: transparent !important;

  color: var(--text-muted, #888) !important;

  cursor: pointer !important;

  padding: 0 !important;

  opacity: 0 !important;

  transition: opacity .13s, background .13s, color .13s !important;

}

.att-preview-item:hover .att-txt-btn {

  opacity: 0.7 !important;

}

.att-txt-btn:hover {

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

  color: var(--text-primary, #ececec) !important;

  opacity: 1 !important;

}

[data-theme="light"] .att-txt-btn:hover {

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

  color: #333 !important;

}

/* Kaldır butonu — chip içinde sağda, küçük */

.att-remove {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 16px !important;

  height: 16px !important;

  border-radius: 50% !important;

  border: none !important;

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

  color: var(--text-muted, #aaa) !important;

  cursor: pointer !important;

  flex-shrink: 0 !important;

  padding: 0 !important;

  z-index: 4 !important;

  opacity: 0.7 !important;

  transition: background .13s, opacity .13s, color .13s !important;

  line-height: 1 !important;

  position: static !important;

}

.att-remove:hover {

  background: rgba(239,68,68,0.18) !important;

  color: #ef4444 !important;

  opacity: 1 !important;

}

[data-theme="light"] .att-remove {

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

  color: #666 !important;

}

[data-theme="light"] .att-remove:hover {

  background: rgba(239,68,68,0.12) !important;

  color: #dc2626 !important;

}

/* Görsel thumbnail için att-remove absolute konumlanır */

.att-preview-item:has(img) .att-remove {

  position: absolute !important;

  top: 3px !important;

  right: 3px !important;

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

  color: #fff !important;

  opacity: 0 !important;

}

.att-preview-item:has(img):hover .att-remove {

  opacity: 1 !important;

}

/* ── gemini-chat.css override — TXT/DOC chip kartları için ── */

/* gemini-chat.css tüm .att-preview-item'ı column/transparent yapıyor,

   TXT ve DOC kartları için chip stilini geri yükle */

#attachments-preview .att-txt-card,

#attachments-preview .att-doc-card,

#work-attachments-preview .att-txt-card,

#work-attachments-preview .att-doc-card {

  flex-direction: row !important;

  align-items: center !important;

  background: var(--bg-elevated, #2a2a2a) !important;

  border: 1px solid var(--border-default, rgba(255,255,255,0.10)) !important;

  padding: 5px 8px 5px 7px !important;

  max-width: 220px !important;

  gap: 6px !important;

}

[data-theme="light"] #attachments-preview .att-txt-card,

[data-theme="light"] #attachments-preview .att-doc-card,

[data-theme="light"] #work-attachments-preview .att-txt-card,

[data-theme="light"] #work-attachments-preview .att-doc-card {

  background: #f0f0f0 !important;

  border-color: rgba(0,0,0,0.10) !important;

}

/* TXT chip içindeki att-remove — static, küçük */

#attachments-preview .att-txt-card .att-remove,

#attachments-preview .att-doc-card .att-remove,

#work-attachments-preview .att-txt-card .att-remove,

#work-attachments-preview .att-doc-card .att-remove {

  position: static !important;

  width: 16px !important;

  height: 16px !important;

  opacity: 0.6 !important;

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

  color: var(--text-muted, #aaa) !important;

  flex-shrink: 0 !important;

}

#attachments-preview .att-txt-card .att-remove:hover,

#attachments-preview .att-doc-card .att-remove:hover,

#work-attachments-preview .att-txt-card .att-remove:hover,

#work-attachments-preview .att-doc-card .att-remove:hover {

  background: rgba(239,68,68,0.18) !important;

  color: #ef4444 !important;

  opacity: 1 !important;

  transform: none !important;

}

[data-theme="light"] #attachments-preview .att-txt-card .att-remove,

[data-theme="light"] #attachments-preview .att-doc-card .att-remove,

[data-theme="light"] #work-attachments-preview .att-txt-card .att-remove,

[data-theme="light"] #work-attachments-preview .att-doc-card .att-remove {

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

  color: #666 !important;

}

/* Önizleme lightbox */

#gx-att-lightbox {

  position: fixed !important;

  inset: 0 !important;

  z-index: 99999 !important;

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

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 20px !important;

  cursor: zoom-out !important;

  animation: gx-lb-in .15s ease !important;

}

@keyframes gx-lb-in {

  from { opacity: 0; }

  to   { opacity: 1; }

}

#gx-att-lightbox img {

  max-width: min(90vw, 1100px) !important;

  max-height: 88vh !important;

  object-fit: contain !important;

  border-radius: 10px !important;

  box-shadow: 0 8px 48px rgba(0,0,0,.6) !important;

  cursor: default !important;

  display: block !important;

  animation: gx-lb-img-in .18s cubic-bezier(.4,0,.2,1) !important;

}

@keyframes gx-lb-img-in {

  from { transform: scale(.93); opacity: 0; }

  to   { transform: scale(1);   opacity: 1; }

}

#gx-att-lightbox-close {

  position: fixed !important;

  top: 16px !important;

  right: 16px !important;

  width: 36px !important;

  height: 36px !important;

  border-radius: 50% !important;

  border: none !important;

  background: rgba(255,255,255,.12) !important;

  color: #fff !important;

  font-size: 1.1rem !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  z-index: 100000 !important;

  transition: background .15s !important;

}

#gx-att-lightbox-close:hover {

  background: rgba(239,68,68,.7) !important;

}

#gx-att-lightbox-name {

  position: fixed !important;

  bottom: 18px !important;

  left: 50% !important;

  transform: translateX(-50%) !important;

  color: rgba(255,255,255,.7) !important;

  font-size: .8rem !important;

  background: rgba(0,0,0,.4) !important;

  padding: 4px 12px !important;

  border-radius: 20px !important;

  max-width: 80vw !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  pointer-events: none !important;

}

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

   MESAJ İÇİ DOSYA KARTLARI — msg-att-doc, msg-att-img-wrap

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

/* Genel attachment wrapper */

.message-attachments {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 8px !important;

  margin-top: 8px !important;

}

/* Görsel thumbnail */

.msg-att-img-wrap {

  display: inline-block !important;

  border-radius: 10px !important;

  overflow: hidden !important;

  cursor: pointer !important;

  border: 1px solid var(--border-default, rgba(255,255,255,0.10)) !important;

  transition: border-color 0.15s, transform 0.15s !important;

  max-width: 240px !important;

}

.msg-att-img-wrap:hover {

  border-color: var(--border-strong, rgba(255,255,255,0.22)) !important;

  transform: scale(1.01) !important;

}

.msg-att-img-thumb {

  display: block !important;

  max-width: 240px !important;

  max-height: 180px !important;

  width: auto !important;

  height: auto !important;

  object-fit: cover !important;

}

/* Dosya kartı — genel */

.msg-att-doc {

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  padding: 8px 12px !important;

  border-radius: 10px !important;

  border: 1px solid var(--border-default, rgba(255,255,255,0.10)) !important;

  background: var(--bg-elevated, #1e1e1e) !important;

  cursor: pointer !important;

  max-width: 280px !important;

  min-width: 160px !important;

  transition: border-color 0.15s, background 0.15s !important;

  position: relative !important;

}

.msg-att-doc:hover {

  border-color: var(--border-strong, rgba(255,255,255,0.20)) !important;

  background: var(--bg-hover, rgba(255,255,255,0.04)) !important;

}

/* İkon alanı */

.msg-att-doc-icon {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  width: 36px !important;

  height: 36px !important;

  border-radius: 7px !important;

  flex-shrink: 0 !important;

  gap: 2px !important;

}

.msg-att-doc-label {

  font-size: 0.58rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.04em !important;

  line-height: 1 !important;

}

/* Bilgi alanı */

.msg-att-doc-info {

  flex: 1 !important;

  min-width: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 2px !important;

}

.msg-att-doc-name {

  font-size: 0.80rem !important;

  font-weight: 500 !important;

  color: var(--text-primary, #ececec) !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  max-width: 160px !important;

  display: block !important;

}

.msg-att-doc-meta {

  font-size: 0.70rem !important;

  color: var(--text-muted, #666) !important;

  display: block !important;

}

/* Aksiyon butonları */

.msg-att-doc-actions,

.msg-att-txt-actions {

  display: flex !important;

  align-items: center !important;

  gap: 2px !important;

  flex-shrink: 0 !important;

  opacity: 0 !important;

  transition: opacity 0.15s !important;

}

.msg-att-doc:hover .msg-att-doc-actions,

.msg-att-doc:hover .msg-att-txt-actions,

.msg-att-txt:hover .msg-att-txt-actions {

  opacity: 1 !important;

}

.msg-att-btn {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 24px !important;

  height: 24px !important;

  border-radius: 5px !important;

  border: none !important;

  background: transparent !important;

  color: var(--text-muted, #666) !important;

  cursor: pointer !important;

  text-decoration: none !important;

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

  padding: 0 !important;

}

.msg-att-btn:hover {

  background: var(--bg-hover, rgba(255,255,255,0.08)) !important;

  color: var(--text-primary, #ececec) !important;

}

/* Light tema */

[data-theme="light"] .msg-att-doc {

  background: #f5f5f5 !important;

  border-color: rgba(0,0,0,0.10) !important;

}

[data-theme="light"] .msg-att-doc:hover {

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

  border-color: rgba(0,0,0,0.18) !important;

}

[data-theme="light"] .msg-att-doc-name { color: #111 !important; }

[data-theme="light"] .msg-att-doc-meta { color: #888 !important; }

[data-theme="light"] .msg-att-img-wrap {

  border-color: rgba(0,0,0,0.10) !important;

}

/* Mobil */

@media (max-width: 640px) {

  .msg-att-doc { max-width: 100% !important; min-width: 0 !important; }

  .msg-att-img-thumb { max-width: 180px !important; max-height: 140px !important; }

  .msg-att-doc-actions,

  .msg-att-txt-actions { opacity: 1 !important; } /* Mobilde her zaman görünür */

}

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

   WELCOME BAŞLIK VE ALT YAZI — Biraz daha küçük

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

.gx-work-title {

  font-size: clamp(1.05rem, 1.7vw, 1.35rem) !important;

  font-weight: 500 !important;

  margin: 0 0 6px !important;

}

.gx-work-subtitle {

  font-size: clamp(0.76rem, 1.2vw, 0.84rem) !important;

  margin: 0 0 18px !important;

}

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

   DESKTOP — GX WORK WELCOME INPUT KUTUSU DÜZELTMELERİ

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

@media (min-width: 769px) {

  .gx-work-box {

    max-width: 720px !important;

    width: 100% !important;

    margin: 0 auto !important;

    border-radius: 16px !important;

    border: 1px solid var(--border, rgba(64,180,255,0.20)) !important;

    background: var(--input-bg, var(--surface, #060d1a)) !important;

    box-shadow: 0 2px 16px rgba(0,0,0,0.18) !important;

    overflow: hidden !important;

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

    box-sizing: border-box !important;

  }

  .gx-work-box:focus-within {

    border-color: rgba(124,58,237,.40) !important;

    box-shadow: 0 0 0 3px rgba(124,58,237,.07), 0 2px 16px rgba(0,0,0,.18) !important;

  }

  [data-theme="light"] .gx-work-box {

    background: #f9fafb !important;

    border-color: rgba(30,80,200,0.15) !important;

    box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;

  }

  [data-theme="light"] .gx-work-box:focus-within {

    border-color: rgba(99,102,241,.45) !important;

    box-shadow: 0 0 0 3px rgba(99,102,241,.08), 0 2px 12px rgba(0,0,0,.07) !important;

  }

  .gx-work-top-row {

    display: flex !important;

    align-items: flex-start !important;

    gap: 6px !important;

    padding: 10px 10px 6px !important;

    min-height: 0 !important;

  }

  #gx-work-textarea {

    flex: 1 1 auto !important;

    min-height: 28px !important;

    max-height: 160px !important;

    overflow-y: auto !important;

    resize: none !important;

    border: none !important;

    outline: none !important;

    background: transparent !important;

    font-size: .935rem !important;

    font-family: inherit !important;

    line-height: 1.6 !important;

    color: var(--text, #dff0ff) !important;

    padding: 2px 4px !important;

    box-sizing: border-box !important;

    scrollbar-width: thin !important;

    word-break: break-word !important;

    white-space: pre-wrap !important;

  }

  #gx-work-textarea::placeholder {

    color: var(--text3, #3a5878) !important;

    opacity: 1 !important;

  }

  [data-theme="light"] #gx-work-textarea { color: #1a1a2e !important; }

  [data-theme="light"] #gx-work-textarea::placeholder { color: #9ca3af !important; }

  .gx-work-top-right {

    display: flex !important;

    align-items: center !important;

    gap: 4px !important;

    flex-shrink: 0 !important;

    padding-top: 1px !important;

  }

  .gx-work-bot-row {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 5px 10px 8px !important;

    gap: 6px !important;

    border-top: 1px solid var(--border, rgba(64,180,255,0.10)) !important;

  }

  [data-theme="light"] .gx-work-bot-row {

    border-top-color: rgba(0,0,0,.07) !important;

  }

  .gx-work-title {

    font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important;

    font-weight: 600 !important;

    margin: 0 0 14px !important;

    line-height: 1.3 !important;

  }

}

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

   SOHBET MESAJ EKLERİ — Resim & Belge Kartları

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

/* Wrapper */

.message-attachments {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 8px !important;

  margin-bottom: 8px !important;

}

/* ── Resim thumbnail ── */

.msg-att-img-wrap {

  position: relative !important;

  display: inline-block !important;

  cursor: zoom-in !important;

  border-radius: 10px !important;

  overflow: hidden !important;

  flex-shrink: 0 !important;

}

.msg-att-img-thumb {

  display: block !important;

  max-width: 220px !important;

  max-height: 180px !important;

  width: auto !important;

  height: auto !important;

  object-fit: cover !important;

  border-radius: 10px !important;

  border: 1px solid var(--border, rgba(255,255,255,.10)) !important;

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

}

.msg-att-img-wrap:hover .msg-att-img-thumb {

  transform: scale(1.02) !important;

  box-shadow: 0 4px 20px rgba(0,0,0,.35) !important;

}

[data-theme="light"] .msg-att-img-thumb {

  border-color: rgba(0,0,0,.10) !important;

}

/* ── Belge kartı ── */

.msg-att-doc {

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  padding: 8px 12px !important;

  min-width: 180px !important;

  max-width: 280px !important;

  border-radius: 10px !important;

  background: var(--surface, rgba(255,255,255,.04)) !important;

  border: 1px solid var(--border, rgba(255,255,255,.10)) !important;

  transition: border-color .13s, background .13s !important;

  position: relative !important;

}

.msg-att-doc:hover {

  border-color: var(--border2, rgba(255,255,255,.20)) !important;

  background: var(--surface2, rgba(255,255,255,.07)) !important;

}

[data-theme="light"] .msg-att-doc {

  background: #f5f7fa !important;

  border-color: rgba(0,0,0,.09) !important;

}

[data-theme="light"] .msg-att-doc:hover {

  background: #eef1f6 !important;

  border-color: rgba(0,0,0,.16) !important;

}

/* İkon kutusu */

.msg-att-doc-icon {

  width: 34px !important;

  height: 38px !important;

  border-radius: 7px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 2px !important;

  flex-shrink: 0 !important;

}

.msg-att-doc-label {

  font-size: .48rem !important;

  font-weight: 700 !important;

  letter-spacing: .03em !important;

  line-height: 1 !important;

}

/* Bilgi alanı */

.msg-att-doc-info {

  flex: 1 !important;

  min-width: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 2px !important;

}

.msg-att-doc-name {

  font-size: .78rem !important;

  font-weight: 600 !important;

  color: var(--text, #ececec) !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: nowrap !important;

  max-width: 160px !important;

}

[data-theme="light"] .msg-att-doc-name { color: #111 !important; }

.msg-att-doc-meta {

  font-size: .68rem !important;

  color: var(--text3, #888) !important;

}

/* Aksiyon butonları */

.msg-att-doc-actions {

  display: flex !important;

  align-items: center !important;

  gap: 4px !important;

  flex-shrink: 0 !important;

  opacity: 0 !important;

  transition: opacity .13s !important;

}

.msg-att-doc:hover .msg-att-doc-actions {

  opacity: 1 !important;

}

/* Genel msg-att-btn stili */

.msg-att-btn {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 24px !important;

  height: 24px !important;

  border-radius: 6px !important;

  border: none !important;

  background: var(--surface2, rgba(255,255,255,.08)) !important;

  color: var(--text2, #aaa) !important;

  cursor: pointer !important;

  text-decoration: none !important;

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

  flex-shrink: 0 !important;

}

.msg-att-btn:hover {

  background: var(--hover, rgba(255,255,255,.14)) !important;

  color: var(--text, #fff) !important;

}

[data-theme="light"] .msg-att-btn {

  background: rgba(0,0,0,.06) !important;

  color: #555 !important;

}

[data-theme="light"] .msg-att-btn:hover {

  background: rgba(0,0,0,.12) !important;

  color: #111 !important;

}

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

   DESKTOP — GX WORK SUGGS (öneri butonları)

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

@media (min-width: 769px) {

  .gx-work-suggs {

    display: flex !important;

    flex-direction: column !important;

    gap: 3px !important;

    width: 100% !important;

    max-width: 720px !important;

    margin: 10px auto 0 !important;

  }

  .gx-work-sugg {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    padding: 9px 14px !important;

    border-radius: 10px !important;

    border: 1px solid transparent !important;

    background: none !important;

    color: var(--text2, #7ab0d8) !important;

    font-size: .84rem !important;

    font-family: inherit !important;

    cursor: pointer !important;

    text-align: left !important;

    transition: background .13s, border-color .13s, color .13s !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }

  .gx-work-sugg:hover {

    background: var(--hover, rgba(64,200,255,.06)) !important;

    border-color: var(--border, rgba(64,180,255,.20)) !important;

    color: var(--text, #dff0ff) !important;

  }

  [data-theme="light"] .gx-work-sugg { color: #4a6080 !important; }

  [data-theme="light"] .gx-work-sugg:hover {

    background: rgba(30,80,200,.05) !important;

    border-color: rgba(30,80,200,.15) !important;

    color: #1a1a2e !important;

  }

  .gx-work-sugg-ico {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 28px !important;

    height: 28px !important;

    border-radius: 7px !important;

    background: var(--surface2, rgba(255,255,255,.05)) !important;

    flex-shrink: 0 !important;

    color: var(--text3, #3a5878) !important;

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

  }

  .gx-work-sugg:hover .gx-work-sugg-ico {

    background: var(--surface3, rgba(255,255,255,.09)) !important;

    color: var(--accent, #00d4ff) !important;

  }

  [data-theme="light"] .gx-work-sugg-ico { background: rgba(30,80,200,.07) !important; color: #6b8ab0 !important; }

  .gx-work-sugg-txt {

    flex: 1 !important;

    line-height: 1.45 !important;

    white-space: normal !important;

    word-break: break-word !important;

  }

}

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

   HERO IMG WRAP — index.php orijinal stilini koru

   gx-chatgpt-ui.css bu alanı override etmez

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

/* Sadece logo görünürlüğü — tema bazlı */

.gx-hero-logo {

  display: none;

  width: auto !important;

  height: 48px !important;

  max-width: 160px !important;

  max-height: 48px !important;

  object-fit: contain !important;

}

[data-theme="dark"]  .gx-hero-logo-dark  { display: block; }

[data-theme="light"] .gx-hero-logo-light { display: block; }

:root:not([data-theme="light"]) .gx-hero-logo-dark { display: block; }

/* gx-hero-img: tam görünür, kırpılmaz */

.gx-hero-img {

  max-width: min(320px, 80%) !important;

  max-height: 120px !important;

  width: auto !important;

  height: auto !important;

  object-fit: contain !important;

  border-radius: 12px !important;

  display: block !important;

  overflow: visible !important;

}

/* Wrap: overflow visible — resim kırpılmasın */

.gx-hero-img-wrap {

  overflow: visible !important;

  border-radius: 0 !important;

  width: auto !important;

  height: auto !important;

  max-width: 160px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

}

/* ══════════════════════════════════════════════════════
   DESKTOP ONLY — Daha yüksek input kutusu (≥ 1025px)
   ══════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  .gx-bar-row,
  .gx-gemini-bar .gx-bar-row {
    min-height: 62px !important;
    height: 62px !important;
  }

  #message-input {
    padding: 20px 16px 8px !important;
    min-height: 62px !important;
  }

}