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

   Glomax GPT — Modern UI Katmanı v2

   Mevcut app.css üzerine eklenir, yapıyı bozmaz.

   Yeni özellikler: görsel yükleme, fiyat karşılaştırma,

   arama sonuçları, görsel önizleme, modern animasyonlar

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



/* ── Gelişmiş CSS Değişkenleri ──────────────────────────── */

:root {

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

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

  --glass-blur:    blur(20px);

  --accent-rgb:    34,34,34;

  --accent2-rgb:   68,68,68;

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

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

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

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

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

  --input-radius:  18px;

  --msg-radius:    18px;

  --card-radius:   14px;

}

[data-theme="dark"] {

  --glass-bg:      rgba(20,20,20,0.9);

  --glass-border:  rgba(120,120,120,0.15);

  --accent-rgb:    0,102,255;

  --accent2-rgb:   123,44,255;

}



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

   GÖRSEL YÜKLEME BUTONU

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

.btn-tool-image {

  position: relative;

  color: var(--accent) !important;

  transition: all 0.2s var(--anim-smooth);

}

.btn-tool-image:hover {

  background: var(--accent-soft) !important;

  transform: scale(1.08);

}

.btn-tool-image::after {

  content: '';

  position: absolute;

  inset: -2px;

  border-radius: 10px;

  border: 1.5px solid transparent;

  background: var(--accent-grad) border-box;

  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: destination-out;

  mask-composite: exclude;

  opacity: 0;

  transition: opacity 0.2s;

}

.btn-tool-image:hover::after { opacity: 1; }



/* ── Görsel Ekleme Önizleme (attachments) ── */

.att-preview-item img {

  width: 52px;

  height: 52px;

  object-fit: cover;

  border-radius: 10px;

  border: 2px solid var(--border2);

  cursor: pointer;

  transition: transform 0.2s var(--anim-spring), box-shadow 0.2s;

}

.att-preview-item img:hover {

  transform: scale(1.06);

  box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.3);

}



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

   GÖRSEL ÖNİZLEME MODAL

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

.img-preview-modal {

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

  opacity: 0;

  transition: opacity 0.25s var(--anim-smooth);

}

.img-preview-modal.open { opacity: 1; }



.img-preview-backdrop {

  position: absolute;

  inset: 0;

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

  backdrop-filter: blur(12px);

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

}



.img-preview-box {

  position: relative;

  z-index: 1;

  max-width: min(90vw, 900px);

  max-height: 90vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  animation: imgPreviewIn 0.3s var(--anim-spring);

}

@keyframes imgPreviewIn {

  from { transform: scale(0.88) translateY(20px); opacity: 0; }

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

}



.img-preview-img {

  max-width: 100%;

  max-height: 75vh;

  border-radius: 16px;

  box-shadow: 0 24px 80px rgba(0,0,0,0.7);

  object-fit: contain;

}



.img-preview-close {

  position: absolute;

  top: -14px;

  right: -14px;

  width: 36px;

  height: 36px;

  border-radius: 50%;

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

  backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,0.2);

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.2s;

  z-index: 2;

}

.img-preview-close:hover {

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

  transform: scale(1.1);

}



.img-preview-actions {

  display: flex;

  gap: 8px;

}

.img-preview-actions .btn-secondary {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 7px 14px;

  border-radius: 9px;

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

  backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,0.2);

  color: #fff;

  font-size: 0.8rem;

  font-weight: 500;

  transition: all 0.2s;

}

.img-preview-actions .btn-secondary:hover {

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

  text-decoration: none;

}



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

   ARAMA SONUÇLARI — Modernize

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

.search-results-wrap {

  max-width: 720px;

  width: 100%;

  margin: 8px auto 4px;

  border-radius: var(--card-radius);

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

  background: var(--surface);

  overflow: hidden;

  animation: slideDown 0.3s var(--anim-smooth);

}

@keyframes slideDown {

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

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

}



.search-results-header {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 10px 14px;

  font-size: 0.78rem;

  color: var(--text3);

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

  background: var(--surface2);

}

.search-results-header strong { color: var(--text2); }



.search-results-toggle {

  margin-left: auto;

  width: 24px;

  height: 24px;

  border-radius: 6px;

  background: transparent;

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

  color: var(--text3);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.2s;

  flex-shrink: 0;

}

.search-results-toggle:hover { background: var(--surface3); color: var(--text); }

.search-results-wrap.collapsed .search-results-grid,

.search-results-wrap.collapsed .price-summary { display: none; }

.search-results-wrap.collapsed .search-results-toggle svg {

  transform: rotate(180deg);

}



.search-results-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

  gap: 1px;

  background: var(--border);

}



.search-result-card {

  display: flex;

  flex-direction: column;

  gap: 4px;

  padding: 12px 14px;

  background: var(--surface);

  text-decoration: none;

  transition: background 0.15s;

  cursor: pointer;

}

.search-result-card:hover {

  background: var(--surface2);

  text-decoration: none;

}

.search-result-card.src-card-cheapest {

  background: rgba(var(--success-rgb),0.06);

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

}

.search-result-card.src-card-cheapest:hover {

  background: rgba(var(--success-rgb),0.1);

}



.src-card-title {

  font-size: 0.82rem;

  font-weight: 600;

  color: var(--text);

  line-height: 1.35;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.src-card-price {

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--success);

  letter-spacing: -0.02em;

}

.src-card-snippet {

  font-size: 0.75rem;

  color: var(--text3);

  line-height: 1.4;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.src-card-host {

  display: flex;

  align-items: center;

  gap: 4px;

  font-size: 0.7rem;

  color: var(--text4);

  margin-top: 2px;

}



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

   FÄ°YAT KARÅžILAÅžTIRMA

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

.price-compare-wrap { }



.price-header {

  background: linear-gradient(135deg,

    rgba(var(--success-rgb),0.08) 0%,

    rgba(var(--accent-rgb),0.06) 100%);

}

.price-header svg { color: var(--success); }



.price-summary {

  display: flex;

  gap: 8px;

  padding: 10px 14px;

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

  flex-wrap: wrap;

}



.price-badge {

  display: flex;

  flex-direction: column;

  gap: 2px;

  padding: 10px 14px;

  border-radius: 10px;

  min-width: 140px;

  flex: 1;

}

.price-badge-cheapest {

  background: rgba(var(--success-rgb),0.1);

  border: 1px solid rgba(var(--success-rgb),0.25);

}

.price-badge-expensive {

  background: rgba(var(--error-rgb),0.07);

  border: 1px solid rgba(var(--error-rgb),0.2);

}

.price-badge-label {

  font-size: 0.7rem;

  font-weight: 600;

  color: var(--text3);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}

.price-badge-val {

  font-size: 1.1rem;

  font-weight: 800;

  color: var(--text);

  letter-spacing: -0.03em;

}

.price-badge-cheapest .price-badge-val { color: var(--success); }

.price-badge-expensive .price-badge-val { color: var(--error); }

.price-badge-src {

  font-size: 0.72rem;

  color: var(--text4);

}



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

   MODERN INPUT ALANI

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

.input-area {

  border-radius: 20px;

  transition: box-shadow 0.2s var(--anim-smooth);

}

.input-area:focus-within {

  box-shadow: none;

}



.input-box {

  border-radius: var(--input-radius);

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

}



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

.btn-send {

  transition: all 0.2s var(--anim-spring) !important;

}

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

  transform: scale(1.08) !important;

  box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.4) !important;

}

.btn-send:not(:disabled):active {

  transform: scale(0.95) !important;

}



/* ── Araç butonları ── */

.btn-tool {

  transition: all 0.18s var(--anim-smooth) !important;

}

.btn-tool:hover {

  transform: translateY(-1px) !important;

}



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

   MESAJ BALONCUKLARI — Modern

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

.message {

  animation: msgIn 0.28s var(--anim-smooth);

}

@keyframes msgIn {

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

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

}



/* Kullanıcı mesajı — modern pill */

.message.user .message-content {

  border-radius: var(--msg-radius) var(--msg-radius) 4px var(--msg-radius);

}



/* AI mesajı */

.message.assistant .message-content {

  border-radius: 4px var(--msg-radius) var(--msg-radius) var(--msg-radius);

}



/* Mesaj içindeki görseller */

.message-content img {

  max-width: 100%;

  border-radius: 12px;

  cursor: pointer;

  transition: transform 0.2s var(--anim-spring), box-shadow 0.2s;

  display: block;

  margin: 8px 0;

}

.message-content img:hover {

  transform: scale(1.02);

  box-shadow: 0 8px 32px rgba(0,0,0,0.2);

}



/* ── Mesaj ekleri — görsel önizleme ── */

.message-attachments {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 8px;

}

.msg-attachment img {

  width: 120px;

  height: 90px;

  object-fit: cover;

  border-radius: 10px;

  cursor: pointer;

  border: 2px solid var(--border);

  transition: all 0.2s var(--anim-spring);

}

.msg-attachment img:hover {

  transform: scale(1.04);

  border-color: var(--accent);

  box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.25);

}



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

   KARŞILAMA EKRANI — Modern

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

.welcome-screen {

  animation: welcomeIn 0.5s var(--anim-smooth);

}

@keyframes welcomeIn {

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

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

}



#welcome-greeting {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--text) !important;
  background-clip: unset !important;
  color: var(--text) !important;
}

#welcome-greeting span {
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
}



/* ── Öneri pilleri ── */

.suggestion-pill {

  transition: all 0.2s var(--anim-spring) !important;

}

.suggestion-pill:hover {

  transform: translateY(-2px) scale(1.03) !important;

  box-shadow: 0 6px 20px rgba(var(--accent-rgb),0.2) !important;

}

.suggestion-pill:active {

  transform: translateY(0) scale(0.97) !important;

}



/* ── Misafir CTA ── */

.guest-inline-cta {

  background: linear-gradient(135deg,

    rgba(var(--accent-rgb),0.06) 0%,

    rgba(var(--accent2-rgb),0.06) 100%);

  border: 1px solid rgba(var(--accent-rgb),0.15);

  border-radius: 14px;

  padding: 14px 18px;

  font-size: 0.875rem;

  color: var(--text2);

  line-height: 1.6;

  animation: fadeIn 0.4s var(--anim-smooth);

}

.guest-inline-cta a {

  font-weight: 600;

  color: var(--accent);

  text-decoration: none;

  border-bottom: 1px solid rgba(var(--accent-rgb),0.3);

  transition: border-color 0.15s;

}

.guest-inline-cta a:hover {

  border-color: var(--accent);

  text-decoration: none;

}



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

   TOPBAR — Modern

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

.topbar {

  backdrop-filter: blur(12px);

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

}



.btn-topbar-login {

  padding: 6px 14px;

  border-radius: 9px;

  font-size: 0.82rem;

  font-weight: 600;

  color: var(--text2);

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

  background: transparent;

  transition: all 0.18s;

  text-decoration: none;

}

.btn-topbar-login:hover {

  background: var(--surface2);

  color: var(--text);

  text-decoration: none;

}



.btn-topbar-register {

padding: 6px 14px;

border-radius: 9px;

font-size: 0.82rem;

font-weight: 700;

color: #fff;

background: var(--accent2);

border: none;

transition: all 0.18s var(--anim-spring);

text-decoration: none;

box-shadow: 0 2px 10px rgba(var(--accent-rgb),0.3);
}

.btn-topbar-register:hover {

  transform: translateY(-1px);

  box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.4);

  text-decoration: none;

}



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

   SIDEBAR — Modern İyileştirmeler

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

.sidebar-nav-item {

  transition: all 0.15s var(--anim-smooth) !important;

}

.sidebar-nav-item:hover {

  transform: translateX(2px) !important;

}

.sidebar-nav-item.active {

  position: relative;

}

.sidebar-nav-item.active::before {

  content: '';

  position: absolute;

  left: 0;

  top: 20%;

  height: 60%;

  width: 3px;

  border-radius: 0 3px 3px 0;

  background: var(--accent-grad);

}



/* ── Kullanıcı avatarı ── */

.user-avatar {

  transition: transform 0.2s var(--anim-spring);

}

.sidebar-user-item:hover .user-avatar {

  transform: scale(1.08);

}



/* ── Kullanım çubuğu ── */

.usage-fill {

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

  background: var(--accent-grad) !important;

}



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

   TOAST BİLDİRİMLERİ — Modern

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

.toast {

  backdrop-filter: blur(12px);

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

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

  animation: toastIn 0.3s var(--anim-spring) !important;

}

@keyframes toastIn {

  from { opacity: 0; transform: translateX(100%) scale(0.9); }

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

}



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

   MODAL — Modern

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

.modal-box {

  animation: modalIn 0.28s var(--anim-spring) !important;

}

@keyframes modalIn {

  from { opacity: 0; transform: scale(0.92) translateY(16px); }

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

}



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

   PWA PROMO BANNER — Modern

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

.pwa-promo-banner {

  background: linear-gradient(135deg,

    rgba(var(--accent-rgb),0.08) 0%,

    rgba(var(--accent2-rgb),0.06) 100%) !important;

  border: 1px solid rgba(var(--accent-rgb),0.18) !important;

  border-radius: 14px !important;

  backdrop-filter: blur(8px);

}



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

   KOD BLOKLARI — Modern

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

pre {

  border-radius: 12px !important;

  overflow: hidden;

}

.code-header {

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

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

}

.btn-copy-code, .btn-edit-code, .btn-preview-code {

  transition: all 0.15s !important;

}

.btn-copy-code:hover, .btn-edit-code:hover, .btn-preview-code:hover {

  background: var(--surface3) !important;

  transform: translateY(-1px) !important;

}



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

   TİP BANNER — Modern

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

.tip-banner {

  border-radius: 14px !important;

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

  background: var(--surface) !important;

  backdrop-filter: blur(8px);

  transition: all 0.3s var(--anim-smooth) !important;

}

.tip-banner.visible {

  animation: tipIn 0.35s var(--anim-spring) !important;

}

@keyframes tipIn {

  from { opacity: 0; transform: translateY(12px) scale(0.97); }

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

}



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

   YAZMA GÖSTERGESİ — Modern

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

.typing-dot {

  background: var(--accent) !important;

}



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

   MOBÄ°L Ä°YÄ°LEÅžTÄ°RMELER

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

@media (max-width: 768px) {

  /* Görsel önizleme modal — tam ekran */

  .img-preview-modal { padding: 12px; }

  .img-preview-box { max-width: 100%; }

  .img-preview-img { max-height: 65vh; border-radius: 12px; }



  /* Fiyat karşılaştırma — dikey */

  .price-summary { flex-direction: column; }

  .price-badge { min-width: unset; }



  /* Arama sonuçları — tek kolon */

  .search-results-grid {

    grid-template-columns: 1fr;

  }



  /* Topbar butonları */

  .btn-topbar-login, .btn-topbar-register {

    padding: 5px 10px;

    font-size: 0.78rem;

  }



  /* Karşılama ekranı */

  #welcome-greeting {

    font-size: 1.2rem !important;

  }



  /* Input alanı */

  .input-area {

    border-radius: 16px;

  }



  /* Mesaj baloncukları */

  .message.user .message-content,

  .message.assistant .message-content {

    border-radius: 14px;

  }



  /* Görsel ekleri — daha küçük */

  .msg-attachment img {

    width: 90px;

    height: 68px;

  }

}



@media (max-width: 480px) {

  /* Çok küçük ekranlar */

  .search-results-header { font-size: 0.72rem; padding: 8px 10px; }

  .search-result-card { padding: 10px 12px; }

  .src-card-title { font-size: 0.78rem; }

  .src-card-snippet { font-size: 0.7rem; }

  .price-badge-val { font-size: 0.95rem; }

}



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

   GENEL ANÄ°MASYONLAR

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

@keyframes fadeIn {

  from { opacity: 0; }

  to   { opacity: 1; }

}

@keyframes pulse-glow {

  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.3); }

  50%       { box-shadow: 0 0 0 8px rgba(var(--accent-rgb),0); }

}



/* ── Yükleme animasyonu ── */

.loading-shimmer {

  background: linear-gradient(90deg,

    var(--surface2) 25%,

    var(--surface3) 50%,

    var(--surface2) 75%);

  background-size: 200% 100%;

  animation: shimmer 1.5s infinite;

}

@keyframes shimmer {

  0%   { background-position: 200% 0; }

  100% { background-position: -200% 0; }

}



/* ── Scroll to bottom butonu ── */

.scroll-bottom-btn {

  position: absolute;

  bottom: 16px;

  right: 16px;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: var(--surface);

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

  color: var(--text2);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  box-shadow: var(--shadow);

  transition: all 0.2s var(--anim-spring);

  z-index: 10;

  opacity: 0;

  pointer-events: none;

  transform: translateY(8px);

}

.scroll-bottom-btn.visible {

  opacity: 1;

  pointer-events: auto;

  transform: translateY(0);

}

.scroll-bottom-btn:hover {

  background: var(--accent);

  color: #fff;

  border-color: var(--accent);

  transform: scale(1.1);

}



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

   DUYURU BANNER — Modern

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

.announcement {

  border-radius: 10px !important;

  margin: 6px 16px !important;

  animation: slideDown 0.3s var(--anim-smooth);

}



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

   FORM ELEMENTLERİ — Modern

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

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus {

  outline: none;

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

  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12) !important;

}



/* ── Range input ── */

input[type="range"] {

  -webkit-appearance: none;

  height: 4px;

  border-radius: 2px;

  background: var(--surface3);

  outline: none;

}

input[type="range"]::-webkit-slider-thumb {

  -webkit-appearance: none;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  background: var(--accent-grad);

  cursor: pointer;

  box-shadow: 0 2px 6px rgba(var(--accent-rgb),0.4);

  transition: transform 0.2s var(--anim-spring);

}

input[type="range"]::-webkit-slider-thumb:hover {

  transform: scale(1.2);

}



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

   DARK MODE ÖZEL İYİLEŞTİRMELER

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

[data-theme="dark"] .search-result-card:hover {

  background: var(--surface3);

}

[data-theme="dark"] .img-preview-backdrop {

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

}

[data-theme="dark"] .price-badge-cheapest {

  background: rgba(var(--success-rgb),0.12);

}

[data-theme="dark"] .price-badge-expensive {

  background: rgba(var(--error-rgb),0.1);

}

[data-theme="dark"] .guest-inline-cta {

  background: linear-gradient(135deg,

    rgba(var(--accent-rgb),0.1) 0%,

    rgba(var(--accent2-rgb),0.08) 100%);

  border-color: rgba(var(--accent-rgb),0.2);

}



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

   EXPORT BUTONU — MOBİL RESPONSIVE

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

.gx-export-label {

  display: inline;

}

@media (max-width: 600px) {

  .gx-export-label { display: none; }

  .gx-export-btn { padding: 6px 8px; }

}



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

   TOPBAR — CMD PALETTE BUTONU

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

#btn-cmd-palette {

  color: var(--text3);

  transition: color 0.15s, background 0.15s;

}

#btn-cmd-palette:hover {

  color: var(--accent);

  background: var(--accent-soft);

}



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

   WELCOME SCREEN — İYİLEŞTİRMELER

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

.welcome-screen {

  padding-bottom: 12px;

}

.suggestion-pills {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}


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

   MESAJ ARAÇ ÇUBUĞU ENTEGRASYONU

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

.message {

  position: relative;

}

.message .message-actions {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;

}



/* Var olan copy/like butonları ile gx-reactions aynı satırda */

.message .gx-reactions {

  margin-left: 4px;

}



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

   INPUT WRAPPER — MODEL BAR ALANI

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

#gx-model-bar {

  user-select: none;

}



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

   ANİMASYON — Sayfa giriş efektleri

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

.main-content {

  animation: mainFadeIn 0.35s ease;

}

@keyframes mainFadeIn {

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

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

}



/* Sidebar konuÅŸma listesi stagger */

.conv-item:nth-child(1)  { animation-delay: 0.02s; }

.conv-item:nth-child(2)  { animation-delay: 0.04s; }

.conv-item:nth-child(3)  { animation-delay: 0.06s; }

.conv-item:nth-child(4)  { animation-delay: 0.08s; }

.conv-item:nth-child(5)  { animation-delay: 0.10s; }

.conv-item:nth-child(6)  { animation-delay: 0.12s; }

.conv-item:nth-child(n+7){ animation-delay: 0.14s; }

.conv-item {

  animation: convSlideIn 0.28s ease both;

}

@keyframes convSlideIn {

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

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

}



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

   INPUT AREA — Yeni odak efekti

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

.input-box:focus-within,

.input-area:focus-within {

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

}



/* Gönder butonuna glow efekti */

.btn-send:not(:disabled) {

  box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.25);

}



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

   PRINT MEDIA

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

@media print {

  .search-results-wrap { margin-top: 0; margin-bottom: 2px; }

  .sidebar, .topbar, .input-wrapper,

  .pwa-promo-banner, .tip-banner,

  .search-results-wrap, .price-compare-wrap { display: none !important; }

  .messages-container { overflow: visible !important; height: auto !important; }

  .message { break-inside: avoid; }

}