/* YAPAY ZEKA SOHBET BALONU — tema-bağımsız stil. Yalnızca CSS custom property'lerle (fallback zincirli) tema token'larına bağlanır: --ai-accent temanın --t-accent'ini (o da --c-primary'yi, yani Theme Customizer'ı) izler. Sabit hex YOK (fallback'ler hariç, temanın hiç yüklenmediği aşırı uç durum için). Renk/zemin: sayfanın color-scheme'ine uyar. Site kendi açık/koyu geçişini ile yönetiyor (bkz. tema layout'larındaki satır içi script) — bu yüzden `color-scheme` özelliğini o attribute'a göre burada da ayarlıyoruz; Canvas/CanvasText sistem renkleri sonra bunu takip eder (OS tercihine değil, sitenin kendi anahtarına bağlı kalır). Konumlandırma: sağ alt sabit. Yüzen WhatsApp butonu (veya mobil alt çubuk) sayfada gerçekten varsa ai-chat.js çalışma zamanında --ai-chat-bottom'u yükselterek çakışmayı önler; JS hiç çalışmazsa (devre dışı) balon zaten 24px'te güvenli köşede kalır. */ .ai-chat { --ai-accent: var(--t-accent, var(--c-primary, #2563eb)); --ai-on-accent: var(--t-on-accent, #fff); --ai-radius: var(--t-radius, 16px); --ai-shadow: 0 12px 32px rgba(15, 20, 30, .22), 0 2px 8px rgba(15, 20, 30, .12); --ai-chat-bottom: 24px; --ai-gap: 12px; color-scheme: light; font-family: var(--t-font-body, system-ui, -apple-system, "Segoe UI", sans-serif); } html[data-bs-theme="dark"] .ai-chat { color-scheme: dark; } .ai-chat { --ai-bg: Canvas; --ai-fg: CanvasText; --ai-border: rgba(127, 127, 127, .28); --ai-surface-2: rgba(127, 127, 127, .10); --ai-surface-2: color-mix(in srgb, CanvasText 6%, Canvas); --ai-border: color-mix(in srgb, CanvasText 16%, transparent); } /* ---------- Balon (bubble) ---------- */ .ai-chat__bubble { position: fixed; right: 24px; bottom: var(--ai-chat-bottom, 24px); z-index: 1031; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--ai-accent); color: var(--ai-on-accent); box-shadow: var(--ai-shadow); cursor: pointer; padding: 0; transition: transform .18s ease, box-shadow .18s ease, bottom .18s ease; } .ai-chat__bubble:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(15, 20, 30, .28), 0 4px 10px rgba(15, 20, 30, .16); } .ai-chat__bubble:focus-visible { outline: 3px solid var(--ai-accent); outline-offset: 3px; } .ai-chat__bubble svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ai-chat__bubble .ai-chat__bubble-close-icon { display: none; } .ai-chat[data-ai-chat-open] .ai-chat__bubble .ai-chat__bubble-chat-icon { display: none; } .ai-chat[data-ai-chat-open] .ai-chat__bubble .ai-chat__bubble-close-icon { display: block; } /* ---------- Panel ---------- */ .ai-chat__panel { position: fixed; right: 24px; bottom: calc(var(--ai-chat-bottom, 24px) + 56px + var(--ai-gap)); z-index: 1031; width: 360px; height: 520px; max-height: calc(100vh - var(--ai-chat-bottom, 24px) - 56px - var(--ai-gap) - 16px); display: flex; flex-direction: column; overflow: hidden; background: var(--ai-bg); color: var(--ai-fg); border: 1px solid var(--ai-border); border-radius: var(--ai-radius); box-shadow: var(--ai-shadow); opacity: 0; transform: translateY(12px) scale(.98); transform-origin: bottom right; pointer-events: none; transition: opacity .18s ease, transform .18s ease, bottom .18s ease; } .ai-chat__panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .ai-chat__bubble, .ai-chat__panel { transition: none !important; } } /* ---------- Başlık ---------- */ .ai-chat__header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .85rem 1rem; background: var(--ai-accent); color: var(--ai-on-accent); flex: 0 0 auto; } .ai-chat__title { font-weight: 600; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-chat__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 44px; min-height: 44px; margin: -6px -8px -6px 0; border: none; background: transparent; color: inherit; border-radius: 8px; cursor: pointer; font-size: 1.4rem; line-height: 1; } .ai-chat__close:hover { background: rgba(255, 255, 255, .16); } .ai-chat__close:focus-visible { outline: 2px solid var(--ai-on-accent); outline-offset: -2px; } /* ---------- Mesaj listesi ---------- */ .ai-chat__messages { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .ai-chat__messages { scroll-behavior: auto; } } .ai-chat__msg { max-width: 84%; padding: .55rem .75rem; border-radius: 14px; font-size: .92rem; line-height: 1.42; white-space: pre-wrap; word-break: break-word; } .ai-chat__msg--assistant { align-self: flex-start; background: var(--ai-surface-2); color: var(--ai-fg); border-bottom-left-radius: 4px; } .ai-chat__msg--user { align-self: flex-end; background: var(--ai-accent); color: var(--ai-on-accent); border-bottom-right-radius: 4px; } .ai-chat__msg--error { border: 1px solid rgba(220, 53, 69, .35); } /* Ret/keşif sonucu satırları (iletişim butonları, keşif onayı) mesajın altına eklenir */ .ai-chat__contact-row { align-self: flex-start; display: flex; flex-wrap: wrap; gap: .4rem; max-width: 84%; } .ai-chat__contact-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; min-height: 36px; border: 1px solid var(--ai-accent); border-radius: 999px; background: transparent; color: var(--ai-accent); text-decoration: none; font-size: .85rem; font-weight: 600; } .ai-chat__contact-btn:hover { background: var(--ai-accent); color: var(--ai-on-accent); } .ai-chat__contact-btn:focus-visible { outline: 2px solid var(--ai-accent); outline-offset: 2px; } .ai-chat__lead-note { align-self: flex-start; display: flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--ai-fg); opacity: .75; } .ai-chat__lead-note svg { width: 15px; height: 15px; stroke: #16a34a; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } /* ---------- "Yazıyor" göstergesi ---------- */ .ai-chat__typing { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; padding: 0 1rem .5rem; color: var(--ai-fg); opacity: .7; font-size: .82rem; } .ai-chat__typing-dots { display: inline-flex; gap: 3px; } .ai-chat__typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; animation: ai-chat-typing 1.1s ease-in-out infinite; } .ai-chat__typing-dots span:nth-child(2) { animation-delay: .15s; } .ai-chat__typing-dots span:nth-child(3) { animation-delay: .3s; } @keyframes ai-chat-typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .ai-chat__typing-dots span { animation: none; opacity: .7; } } /* ---------- Giriş alanı ---------- */ .ai-chat__form { position: relative; flex: 0 0 auto; display: flex; align-items: flex-end; gap: .5rem; padding: .65rem; border-top: 1px solid var(--ai-border); } .ai-chat__input { flex: 1 1 auto; resize: none; min-height: 40px; max-height: 84px; padding: .55rem .7rem; border: 1px solid var(--ai-border); border-radius: 12px; background: var(--ai-bg); color: var(--ai-fg); font: inherit; font-size: .92rem; line-height: 1.35; } .ai-chat__input:focus-visible { outline: 2px solid var(--ai-accent); outline-offset: 1px; } .ai-chat__send { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--ai-accent); color: var(--ai-on-accent); cursor: pointer; } .ai-chat__send:disabled { opacity: .55; cursor: default; } .ai-chat__send:focus-visible { outline: 2px solid var(--ai-accent); outline-offset: 2px; } .ai-chat__send svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ai-chat__counter { position: absolute; right: 60px; bottom: 68px; font-size: .72rem; opacity: .6; background: var(--ai-bg); padding: 0 .2rem; } /* ---------- Alt bilgi ---------- */ .ai-chat__footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .75rem .6rem; border-top: 1px solid var(--ai-border); } .ai-chat__privacy { font-size: .72rem; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-chat__clear { flex: 0 0 auto; border: none; background: transparent; color: var(--ai-accent); font-size: .74rem; font-weight: 600; cursor: pointer; padding: .2rem 0; min-height: 24px; } .ai-chat__clear:hover { text-decoration: underline; } .ai-chat__clear:focus-visible { outline: 2px solid var(--ai-accent); outline-offset: 2px; } /* ---------- Mobil ---------- */ @media (max-width: 991.98px) { .ai-chat__panel { right: 8px; left: 8px; width: auto; height: 70vh; max-height: calc(100vh - var(--ai-chat-bottom, 24px) - 56px - var(--ai-gap) - 16px); } } @media (max-width: 420px) { .ai-chat__bubble { right: 16px; } .ai-chat__panel { right: 8px; left: 8px; } } /* Yapay zeka simgesi (ışıltı): dolgu, çizgi yok; kapalı/açık geçişi mevcut kurallarla aynı. */ .ai-chat__bubble .ai-chat__bubble-ai-icon { width: 28px; height: 28px; stroke: none; fill: currentColor; } .ai-chat__bubble .ai-chat__bubble-ai-icon .ai-chat__spark { fill: currentColor; }