/* ─── Değişkenler (renk JS tarafından enjekte edilir) ────────────────── */
:root {
  --iac-primary: #0eab6c;
  --iac-primary-dark: #067a4a;
  --iac-bg: #f5f8f4;
  --iac-radius: 18px;
}

/* ─── Chat Bubble (FAB) ───────────────────────────────────────────────── */
#iac-chat-bubble {
  position: fixed !important; bottom: 22px !important; right: 22px !important; z-index: 2147483646 !important;
  width: 60px !important; height: 60px !important; border-radius: 50% !important;
  background: linear-gradient(135deg, var(--iac-primary), var(--iac-primary-dark)) !important;
  color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; box-shadow: 0 4px 14px rgba(6,122,74,.4) !important;
  user-select: none; border: none !important; outline: none !important; padding: 0 !important;
  font-family: inherit !important;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: iac-pulse 2.6s infinite ease-in-out;
}
#iac-chat-bubble:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(6,122,74,.5);
  animation: none;
}
#iac-chat-bubble.active { animation: none; }
#iac-chat-bubble svg { width: 28px; height: 28px; fill: #fff; pointer-events: none; }
#iac-chat-bubble .iac-icon-close { display: none; }
#iac-chat-bubble.active .iac-icon-chat { display: none; }
#iac-chat-bubble.active .iac-icon-close { display: block; }

#iac-chat-badge {
  position: absolute; top: -2px; right: -2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #ef4444; border: 2px solid #fff;
  display: none;
}
#iac-chat-badge.visible { display: block; }

@keyframes iac-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(6,122,74,.4); }
  50% { box-shadow: 0 4px 14px rgba(6,122,74,.4), 0 0 0 10px rgba(14,171,108,.15); }
}

/* ─── Tooltip ─────────────────────────────────────────────────────────── */
#iac-chat-tooltip {
  position: fixed !important; bottom: 92px !important; right: 22px !important; z-index: 2147483645 !important;
  background: #fff; color: #222; padding: 11px 16px;
  border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.15);
  font-family: 'Segoe UI', -apple-system, Roboto, sans-serif;
  font-size: 13.5px; line-height: 1.45; max-width: 230px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
#iac-chat-tooltip.visible {
  opacity: 1; transform: translateY(0); pointer-events: auto; cursor: pointer;
}
#iac-chat-tooltip::after {
  content: '';
  position: absolute; bottom: -6px; right: 24px;
  width: 12px; height: 12px; background: #fff;
  transform: rotate(45deg);
  box-shadow: 3px 3px 5px rgba(0,0,0,.05);
}

/* ─── Chat Window ─────────────────────────────────────────────────────── */
#iac-chat-window {
  position: fixed; bottom: 94px; right: 22px; z-index: 2147483646;
  width: 380px; max-width: 92vw; height: 560px; max-height: 74vh;
  background: #fff; border-radius: var(--iac-radius);
  box-shadow: 0 14px 50px rgba(0,0,0,.2);
  display: flex; flex-direction: column; overflow: hidden;
  font-family: 'Segoe UI', -apple-system, Roboto, sans-serif;
  opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
#iac-chat-window.open {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}

/* ─── Header ──────────────────────────────────────────────────────────── */
#iac-chat-header {
  background: linear-gradient(135deg, var(--iac-primary), var(--iac-primary-dark));
  color: #fff; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
#iac-chat-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex-shrink: 0; position: relative; overflow: hidden;
}
#iac-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
#iac-chat-avatar::after {
  content: '';
  position: absolute; bottom: 1px; right: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #4ade80; border: 2px solid var(--iac-primary-dark);
}
#iac-chat-header-info { flex: 1; min-width: 0; }
#iac-chat-header-name { font-weight: 600; font-size: 15px; letter-spacing: .01em; }
#iac-chat-header-status { font-size: 11.5px; opacity: .88; margin-top: 1px; }
#iac-chat-header-actions { display: flex; gap: 2px; flex-shrink: 0; }
/* Host temanın genel `button` reset'leri (Woodmart vb.) çoğu zaman bare
   `button` seçicisine `!important` ile arka plan/kenarlık/gölge veriyor —
   sınıf seçicisi normalde kazanır ama bazı temalar utility sınıflarını
   `!important`'la zorluyor. Bu widget rastgele temalara gömüleceği için
   kritik görsel özellikleri burada da `!important` ile garanti ediyoruz. */
.iac-header-btn {
  all: unset;
  box-sizing: border-box !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: #fff !important; cursor: pointer !important;
  width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important;
  border-radius: 50% !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  opacity: .85; transition: opacity .15s ease, background .15s ease;
}
.iac-header-btn:hover { opacity: 1; background: rgba(255,255,255,.16) !important; }
.iac-header-btn svg {
  width: 16px !important; height: 16px !important; flex-shrink: 0;
  fill: #fff !important; stroke: none !important; pointer-events: none;
  display: block !important;
}

/* ─── Messages ────────────────────────────────────────────────────────── */
#iac-chat-messages {
  flex: 1; overflow-y: auto; padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--iac-bg);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
#iac-chat-messages::-webkit-scrollbar { width: 5px; }
#iac-chat-messages::-webkit-scrollbar-thumb { background: #cfd8cf; border-radius: 3px; }

.iac-msg-wrap { display: flex; flex-direction: column; max-width: 84%; }
.iac-msg-wrap.user { align-self: flex-end; align-items: flex-end; }
.iac-msg-wrap.assistant { align-self: flex-start; align-items: flex-start; }
.iac-msg-name {
  font-size: 11px; color: #6f8a76; font-weight: 600; margin: 0 6px 3px;
}
.iac-msg {
  padding: 10px 14px; border-radius: 16px;
  font-size: 13.5px; line-height: 1.55; word-break: break-word;
}
.iac-msg.user {
  background: var(--iac-primary); color: #fff;
  border-bottom-right-radius: 5px;
}
.iac-msg.assistant {
  background: #fff; color: #222;
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.iac-msg-time {
  font-size: 10px; color: #9aa79c; margin: 3px 6px 0;
}
.iac-msg a { color: var(--iac-primary-dark); text-decoration: underline; font-weight: 600; }
.iac-msg.user a { color: #fff; }

.iac-product-card {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 8px;
  background: var(--iac-bg); border: 1px solid #e3e9e2; border-radius: 12px;
  text-decoration: none !important; transition: border-color .15s ease, background .15s ease;
}
.iac-product-card:hover { border-color: var(--iac-primary); background: #eef5ee; }
.iac-product-card img {
  /* object-fit:cover, kutu/paket fotoğraflarında üzerindeki yazı/rakamın
     bir köşesini kırpıp anlamsız bir "metin" gibi görünmesine yol açıyordu
     — contain ile görselin tamamı (kırpılmadan) küçük kutuya sığdırılıyor. */
  width: 46px; height: 46px; border-radius: 8px; object-fit: contain; flex-shrink: 0;
  background: #fff; padding: 3px; box-sizing: border-box;
}
.iac-product-info { min-width: 0; }
.iac-product-name {
  font-size: 12.5px; font-weight: 600; color: #222;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}
.iac-product-price {
  font-size: 12.5px; font-weight: 700; color: var(--iac-primary-dark); margin-top: 1px;
}

.iac-cta-btn {
  display: inline-block !important; margin-top: 10px;
  background: var(--iac-primary-dark) !important; color: #fff !important;
  padding: 9px 16px !important; border-radius: 10px !important;
  text-decoration: none !important; font-weight: 600 !important; font-size: 13px !important;
  border: none !important; font-family: inherit !important;
  transition: background .15s ease;
}
.iac-cta-btn:hover { filter: brightness(85%); }

.iac-typing {
  display: flex; gap: 5px; align-self: flex-start;
  background: #fff; padding: 12px 16px; border-radius: 16px;
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.iac-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: #b0bab0;
  animation: iac-bounce 1.2s infinite ease-in-out;
}
.iac-typing span:nth-child(2) { animation-delay: .16s; }
.iac-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes iac-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ─── Hızlı Cevap Çipleri ─────────────────────────────────────────────── */
#iac-chat-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 14px 10px; background: var(--iac-bg); flex-shrink: 0;
}
/* Host temanın genel `button` reset'leri (bkz. .iac-header-btn'deki not) bu
   çipleri de düz, köşeli, gri kutulara çevirebiliyor - garanti pill şekli ve
   renkler için kritik özellikleri burada da !important ile koruyoruz. */
.iac-chip {
  all: unset;
  box-sizing: border-box !important;
  background: #fff !important; color: var(--iac-primary-dark) !important;
  border: 1.5px solid #d5e5da !important; border-radius: 999px !important;
  padding: 7px 13px !important; font-size: 12.5px !important; font-weight: 600 !important;
  cursor: pointer !important; font-family: inherit !important;
  display: inline-block !important; line-height: normal !important;
  transition: background .15s ease, border-color .15s ease;
}
.iac-chip:hover { background: #eaf5ee !important; border-color: var(--iac-primary) !important; }
#iac-chat-chips.hidden { display: none; }

/* ─── Sohbet Öncesi Form ──────────────────────────────────────────────── */
#iac-chat-precall {
  padding: 20px 16px; display: flex; flex-direction: column; gap: 10px;
  background: var(--iac-bg); flex: 1;
}
#iac-chat-precall p { margin: 0 0 4px; font-size: 13.5px; color: #444; }
#iac-chat-precall input {
  border: 1.5px solid #d5e5da; border-radius: 10px; padding: 10px 12px;
  font-size: 13.5px; font-family: inherit; outline: none;
}
#iac-chat-precall input:focus { border-color: var(--iac-primary); }
#iac-chat-precall button {
  border: none !important; background: var(--iac-primary) !important; color: #fff !important;
  border-radius: 10px !important; padding: 10px 12px !important; font-size: 13.5px !important; font-weight: 600 !important;
  cursor: pointer !important; font-family: inherit !important; box-shadow: none !important;
}
#iac-chat-precall button:hover { background: var(--iac-primary-dark) !important; }
#iac-chat-precall.hidden { display: none; }

#iac-precall-consent-label {
  display: flex; align-items: flex-start; gap: 7px; cursor: pointer;
  font-size: 11.5px; color: #667069; line-height: 1.4;
  margin-bottom: 6px;
}
#iac-precall-consent-label input[type="checkbox"] {
  width: 14px; height: 14px; margin: 2px 0 0; flex-shrink: 0; cursor: pointer;
  border: 1.5px solid #d5e5da; border-radius: 3px; padding: 0;
}
#iac-precall-consent-label a { color: var(--iac-primary-dark); text-decoration: underline; }

#iac-precall-skip {
  background: transparent !important; color: #667069 !important;
  font-weight: 500 !important; font-size: 12.5px !important;
  text-decoration: underline; padding: 2px !important;
}
#iac-precall-skip:hover { color: var(--iac-primary-dark) !important; }

/* ─── Input Row ───────────────────────────────────────────────────────── */
#iac-chat-input-row {
  display: flex; align-items: center;
  border-top: 1px solid #eef0ec; background: #fff;
  padding: 8px 8px 8px 6px; gap: 6px; flex-shrink: 0;
}
#iac-chat-input {
  flex: 1; border: none; padding: 10px 12px;
  font-size: 13.5px; outline: none; background: transparent;
  font-family: inherit; color: #222;
}
#iac-chat-input::placeholder { color: #a0a8a0; }
#iac-chat-send {
  border: none !important; background: var(--iac-primary) !important; color: #fff !important;
  width: 40px !important; height: 40px !important; border-radius: 50% !important; padding: 0 !important;
  cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: none !important; font-family: inherit !important;
  transition: background .15s ease, transform .1s ease, opacity .15s ease;
  flex-shrink: 0;
}
#iac-chat-send:hover { background: var(--iac-primary-dark); }
#iac-chat-send:active { transform: scale(.92); }
#iac-chat-send:disabled { opacity: .5; cursor: default; }
#iac-chat-send svg { width: 18px; height: 18px; fill: #fff; pointer-events: none; }

/* ─── Tablet: alt toolbar'ların üstünde kal ────────────────────────────── */
@media (max-width: 1024px) {
  #iac-chat-bubble { bottom: 80px !important; right: 16px !important; }
  #iac-chat-tooltip { bottom: 148px !important; right: 16px !important; }
  #iac-chat-window { bottom: 150px; right: 16px; max-height: 66vh; }
}

/* ─── Mobil: tam ekran pencere ────────────────────────────────────────── */
@media (max-width: 480px) {
  #iac-chat-window {
    inset: 0;
    width: 100%; max-width: 100%;
    height: 100%; max-height: 100%;
    border-radius: 0;
    /* Klavye açıldığında visualViewport küçülür ve sayfa yukarı kayar —
       JS bu ikisini (--iac-vh yükseklik, --iac-vh-top kayma miktarı) canlı
       günceller; sadece yükseklik ayarlayıp top'u sabit bırakırsak pencere
       eski konumda "asılı" kalıp ekran dışına taşardı. */
    top: var(--iac-vh-top, 0);
    bottom: auto;
    height: var(--iac-vh, 100%);
  }
  #iac-chat-header {
    padding-top: calc(14px + env(safe-area-inset-top));
  }
  #iac-chat-input-row {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  #iac-chat-input { font-size: 16px; }
  #iac-chat-window.open ~ #iac-chat-bubble,
  body.iac-chat-open #iac-chat-bubble { display: none; }
}