/* =========================================================
   Site asistanı — sohbet arayüzü
   ---------------------------------------------------------
   Kaynak tasarım koyu zeminli, mor/indigo ve tam ekrandı. Burada iki şey
   değişti: (1) renkler marka paletine çevrildi, (2) tam ekran yerine SSS
   bölümünün yerine oturan bir KART. Hareket dili korundu — bulanık lekeler,
   yazıyor noktaları, odak halkası, kayarak giren mesajlar.

   Tüm renkler style.css'teki değişkenlerden gelir; tema (data-theme) değişince
   asistan da onunla değişir.
   ========================================================= */

.vtb-chat { position: relative; max-width: 780px; margin: 0 auto; }

/* ---------- kart ----------
   Kaynak tasarımdaki bulanık renk lekeleri ve cam efekti kaldırıldı: koyu
   zeminde efekt gibi duruyordu, sitenin açık ve sade zemininde kirlilik gibi
   göründü. Kart artık sitenin diğer yüzeyleriyle aynı dili konuşuyor —
   düz beyaz, ince çizgi, yumuşak gölge. */
.vtb-chat__panel {
  position: relative; z-index: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ---------- bölüm başlığı ----------
   Kartın İÇİNDE küçük bir başlık değil, bölümün ana başlığı: sayfalarda
   ayrıca "sık sorulan sorular" başlığı yok, onun yerini bu aldı. Ölçek
   style.css'teki .sec-head-center ile aynı olsun diye h2 varsayılanı
   (clamp(2rem, 4.6vw, 3.85rem)) bilerek biraz kısıldı — 780px'lik kartın
   üstünde tam boy h2 orantısız duruyor. */
.vtb-chat__intro { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 3.4vw, 44px); }
.vtb-chat__intro h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin: 0; }
.vtb-chat__intro p {
  color: var(--text-soft); font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.6; margin: clamp(12px, 1.4vw, 18px) auto 0;
}

/* Paket sayfalarında sohbet, iki sütunlu metin akışının içinde duruyor:
   orada başlık ortalanmış dev bir bölüm başlığı değil, çevresindeki
   prose başlıklarıyla (.pd-main h2) aynı boyda ve sola dayalı olmalı. */
/* 780px'lik ortalama burada geçersiz: sütun bundan birkaç piksel geniş olduğu
   için sohbet, komşu paragraflara göre birkaç piksel içeri kaçıyordu. */
.pd-faq .vtb-chat { max-width: none; margin: 0; }
.pd-faq .vtb-chat__intro { text-align: left; max-width: none; margin-bottom: 20px; }
.pd-faq .vtb-chat__intro h2 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.pd-faq .vtb-chat__intro p { margin-left: 0; font-size: .95rem; }

/* ---------- mesaj akışı ---------- */
.vtb-chat__log {
  padding: 20px 26px; display: flex; flex-direction: column; gap: 14px;
  max-height: 46vh; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.vtb-chat__log:empty { display: none; }
.vtb-chat__log::-webkit-scrollbar { width: 8px; }
.vtb-chat__log::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }

.vtb-msg { display: flex; gap: 10px; align-items: flex-start; animation: vtb-msg-in .3s ease-out both; }
@keyframes vtb-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.vtb-msg__who {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: .68rem; font-weight: 700;
  letter-spacing: .02em; margin-top: 2px;
}
/* Asistan avatarında baş harf ("As") yerine marka amblemi var; renkler bu
   yüzden yer değiştirdi: amblem kendi renginde (--coral, favicon.svg ile
   birebir aynı) görünsün diye asistan coral zemine, ziyaretçinin baş
   harfleri de teal zemine taşındı. İkisi hâlâ bir bakışta ayrılıyor. */
.vtb-msg--agent .vtb-msg__who { background: color-mix(in srgb, var(--coral) 16%, var(--paper)); color: var(--coral); }
.vtb-msg--user  .vtb-msg__who { background: color-mix(in srgb, var(--teal) 24%, var(--paper)); color: var(--teal-d); }
/* Amblem dairenin içinde nefes alsın: yazı boyutundan bağımsız sabit ölçü. */
.vtb-msg__who svg { width: 16px; height: 16px; display: block; }

.vtb-msg__body {
  padding: 11px 15px; border-radius: var(--r-sm);
  font-size: .94rem; line-height: 1.62; color: var(--text-body);
  max-width: 60ch; overflow-wrap: anywhere;
}
.vtb-msg--agent .vtb-msg__body { background: var(--gray); border-top-left-radius: 4px; }
/* Balon, avatarıyla aynı renk ailesinde kalsın (avatarlar yer değiştirdi).
   Coral artık asistanın amblemine ve hata balonuna ayrıldı. */
.vtb-msg--user  .vtb-msg__body { background: color-mix(in srgb, var(--teal) 14%, var(--paper)); border-top-left-radius: 4px; }
.vtb-msg__body p + p { margin-top: .6em; }
.vtb-msg__body ul { margin: .5em 0; padding-left: 1.1em; list-style: disc; }
.vtb-msg__body li { margin: .22em 0; }
.vtb-msg__body a { color: var(--primary-d); text-decoration: underline; text-underline-offset: 2px; }
.vtb-msg--error .vtb-msg__body { background: color-mix(in srgb, var(--coral) 10%, var(--paper)); color: var(--coral-d); }

/* yazıyor noktaları */
.vtb-dots { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.vtb-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-soft); animation: vtb-dot 1.2s ease-in-out infinite; }
.vtb-dots i:nth-child(2) { animation-delay: .15s; }
.vtb-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes vtb-dot { 0%, 100% { opacity: .3; transform: scale(.85); } 50% { opacity: .9; transform: scale(1.1); } }

/* ---------- giriş kutusu ---------- */
.vtb-chat__box { position: relative; border-top: 1px solid var(--line); }
.vtb-chat__field { position: relative; padding: 14px 18px 4px; }
.vtb-chat__field textarea {
  display: block; width: 100%; border: 0; background: transparent; resize: none;
  font: inherit; font-size: .96rem; line-height: 1.55; color: var(--text-body);
  padding: 8px 4px; min-height: 56px; max-height: 200px; overflow-y: auto;
}
.vtb-chat__field textarea:focus { outline: none; }
.vtb-chat__field textarea::placeholder { color: var(--text-soft); opacity: .7; }
/* Odak halkası — kaynaktaki violet ring'in marka karşılığı. */
.vtb-chat__field::after {
  content: ""; position: absolute; inset: 8px 12px; border-radius: var(--r-sm);
  border: 2px solid color-mix(in srgb, var(--primary) 32%, transparent);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.vtb-chat__field.is-focused::after { opacity: 1; }

.vtb-chat__actions {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 18px 16px;
}
.vtb-chat__tools { display: flex; align-items: center; gap: 6px; }
.vtb-chat__hint { font-size: .76rem; color: var(--text-soft); }
@media (max-width: 560px) { .vtb-chat__hint { display: none; } }

.vtb-icon-btn {
  border: 0; background: transparent; color: var(--text-soft);
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; transition: background .18s, color .18s, transform .12s;
}
.vtb-icon-btn:hover { background: var(--gray); color: var(--text); }
.vtb-icon-btn:active { transform: scale(.94); }
.vtb-icon-btn[aria-expanded="true"] { background: var(--gray); color: var(--text); }
.vtb-icon-btn svg { width: 17px; height: 17px; }

.vtb-send {
  border: 0; border-radius: var(--r-sm); padding: 10px 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 600; font-family: inherit;
  background: var(--primary); color: var(--on-primary);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 28%, transparent);
  transition: transform .12s, background .18s, box-shadow .18s;
}
.vtb-send:hover:not(:disabled) { transform: translateY(-1px); background: var(--primary-d); }
.vtb-send:active:not(:disabled) { transform: scale(.98); }
.vtb-send:disabled { background: var(--gray); color: var(--text-soft); box-shadow: none; cursor: not-allowed; }
.vtb-send svg { width: 16px; height: 16px; }
.vtb-send .vtb-spin { animation: vtb-spin 1.6s linear infinite; }
@keyframes vtb-spin { to { transform: rotate(360deg); } }

/* ---------- komut paleti ---------- */
.vtb-palette {
  position: absolute; left: 14px; right: 14px; bottom: calc(100% + 8px); z-index: 20;
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); box-shadow: var(--shadow-md);
  overflow: hidden; padding: 5px;
  animation: vtb-pal-in .15s ease-out both;
}
@keyframes vtb-pal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vtb-palette__head {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-soft); padding: 6px 10px 4px;
}
.vtb-palette button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; text-align: left;
  padding: 9px 10px; border-radius: 9px; font: inherit; font-size: .88rem;
  color: var(--text-body); transition: background .14s;
}
.vtb-palette button:hover,
.vtb-palette button.is-active { background: var(--gray); color: var(--text); }
.vtb-palette button svg { width: 15px; height: 15px; color: var(--text-soft); flex: 0 0 auto; }
.vtb-palette button .vtb-palette__cmd { margin-left: auto; font-size: .76rem; color: var(--text-soft); }

/* ---------- kısayol çipleri ---------- */
.vtb-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.vtb-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-2); background: var(--paper);
  border-radius: 99px; padding: 8px 15px;
  font: inherit; font-size: .85rem; color: var(--text-body);
  transition: border-color .18s, color .18s, transform .12s, box-shadow .18s;
  animation: vtb-msg-in .35s ease-out both;
}
.vtb-chip:hover { border-color: var(--primary); color: var(--primary-d); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.vtb-chip svg { width: 14px; height: 14px; }

/* ---------- yedek: ajan kapalıyken SSS listesi ---------- */
.vtb-chat__fallback { max-width: 780px; margin: 0 auto; }
.vtb-chat__fallback > p { color: var(--text-soft); margin-bottom: 20px; font-size: .95rem; }

/* ---------- erişilebilirlik ---------- */
.vtb-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Hareket azaltma tercihi: süslemeler durur, arayüz aynen çalışır. */
@media (prefers-reduced-motion: reduce) {
  .vtb-msg,
  .vtb-chip,
  .vtb-palette,
  .vtb-dots i,
  .vtb-send .vtb-spin { animation: none !important; }
  .vtb-send:hover:not(:disabled),
  .vtb-chip:hover { transform: none; }
}

@media (max-width: 640px) {
  .vtb-chat__log { padding: 16px 18px; max-height: 52vh; }
  .vtb-chat__field { padding: 12px 12px 4px; }
  .vtb-chat__actions { padding: 8px 12px 14px; }
  .vtb-msg__body { font-size: .9rem; }
}