/* ======================================================================
   MODULE — AI LIVE CHAT WIDGET / PHASE 3 PREMIUM UI (ANIMATED VERSION)
   Prefix: .m-chat
   ====================================================================== */

:root {
    --m-chat-primary: var(--primary, #e85d04);
    --m-chat-primary-dark: color-mix(in srgb, var(--m-chat-primary) 82%, #111827);
    --m-chat-primary-soft: color-mix(in srgb, var(--m-chat-primary) 12%, #fff);
    --m-chat-primary-glow: color-mix(in srgb, var(--m-chat-primary) 38%, transparent);
    --m-chat-bg: var(--bg-page, #f7f4ef);
    --m-chat-card: var(--bg-card, #fff);
    --m-chat-text: var(--text, #171717);
    --m-chat-muted: var(--text-muted, #737373);
    --m-chat-border: var(--border, rgba(0, 0, 0, .08));
    --m-chat-radius: 28px;
    --m-chat-shadow: 0 26px 80px rgba(17, 24, 39, .24);
}

/* İzolasyon */
.m-chat-overlay, .m-chat-panel-inner, .m-chat-fab, .m-chat-tooltip { box-sizing: border-box; }
.m-chat-overlay *, .m-chat-panel-inner *, .m-chat-fab *, .m-chat-tooltip * { box-sizing: border-box; }

/* ─────────── Floating Action Button ─────────── */
.m-chat-fab {
    position: fixed;
    bottom: calc(var(--sp-5, 20px) + env(safe-area-inset-bottom, 0px));
    inset-inline-end: var(--sp-5, 20px);
    width: 56px;
    height: 56px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: radial-gradient(circle at 28% 18%, rgba(255,255,255,.55), transparent 28%), linear-gradient(135deg, var(--m-chat-primary) 0%, var(--m-chat-primary-dark) 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 18px 44px var(--m-chat-primary-glow), 0 8px 18px rgba(0, 0, 0, .18);
    z-index: var(--z-sticky, 200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .22s ease, box-shadow .22s ease, bottom .28s ease, inset-inline-end .28s ease;
}

/* Sayfa aşağı kaydırıldığında (Normal Durum) */
body.btt-visible .m-chat-fab {
    inset-inline-end: calc(var(--sp-5, 20px) + 56px + 12px);
}

/* Chat paneli AÇIKSA, butonun sola kaymasını iptal et ve yerinde tut */
body.btt-visible .m-chat-fab.is-open {
    inset-inline-end: var(--sp-5, 20px) !important;
}

.m-chat-fab[hidden] { display: none !important; }
.m-chat-fab:hover { transform: translateY(-3px) scale(1.045); box-shadow: 0 24px 60px color-mix(in srgb, var(--m-chat-primary) 48%, transparent), 0 10px 24px rgba(0,0,0,.22); }
.m-chat-fab-icon { display: inline-flex; align-items:center; justify-content:center; position: relative; z-index: 2; }
.m-chat-fab-icon svg { width: 24px; height: 24px; }
.m-chat-fab-icon img { width: 34px; height: 34px; border-radius: 14px; object-fit: cover; }

.m-chat-fab.is-open {
    z-index: calc(var(--z-modal, 400) + 10);
    transform: scale(.94);
}

/* Tooltip */
.m-chat-tooltip {
    position: fixed;
    bottom: calc(var(--sp-5, 20px) + 70px + env(safe-area-inset-bottom, 0px));
    inset-inline-end: var(--sp-5, 20px);
    max-width: 250px;
    padding: 11px 14px;
    border-radius: 18px 18px 6px 18px;
    background: rgba(255,255,255,.94);
    color: var(--m-chat-text);
    border: 1px solid rgba(255,255,255,.65);
    box-shadow: 0 18px 50px rgba(17,24,39,.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 13px;
    font-weight: 700;
    z-index: calc(var(--z-sticky, 200) + 1);
}
body.btt-visible .m-chat-tooltip {
    inset-inline-end: calc(var(--sp-5, 20px) + 56px + 12px);
}
.m-chat-tooltip[hidden] { display:none !important; }

/* ─────────── Overlay & Panel Yerleşimi + Animasyonları ─────────── */
.m-chat-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 400);
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--m-chat-primary) 18%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--m-chat-primary) 9%, #fff), #fff 44%);
    
    /* Arka plan yumuşak geçiş başlangıcı */
    opacity: 0;
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Panel açıldığında arka planı opaklaştır */
body.m-chat-open .m-chat-overlay {
    opacity: 1;
}

.m-chat-overlay[hidden] { display: none !important; }

.m-chat-panel-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--m-chat-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;

    /* Akıcı yükselme efekti başlangıç değerleri */
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.24s ease;
}

/* Panel açıldığında yukarı süzülüp orijinal konumuna otursun */
body.m-chat-open .m-chat-panel-inner {
    opacity: 1;
    transform: translateY(0) scale(1) !important;
}

/* Masaüstü Yerleşimi Sabitleme (Zıplama Engelleyici) */
@media (min-width: 640px) {
    .m-chat-overlay {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        pointer-events: none;
    }
    .m-chat-panel-inner {
        pointer-events: auto;
        position: fixed !important;
        bottom: calc(var(--sp-5, 20px) + 56px + 14px) !important;
        inset-inline-end: var(--sp-5, 20px) !important;
        width: 430px !important;
        height: 690px !important;
        max-height: calc(100vh - 116px) !important;
        border-radius: var(--m-chat-radius);
        border: 1px solid rgba(255,255,255,.72);
        box-shadow: var(--m-chat-shadow);
        margin: 0 !important;
    }
    body.m-chat-open { overflow: auto !important; } /* Sayfa zıplamasını keser */
}

/* Mobil Cihaz Kararlılığı */
@media (max-width: 639px) {
    .m-chat-overlay {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
    .m-chat-panel-inner {
        border-radius: 0 !important;
        /* Mobilde tam ekran açıldığı için başlangıç süzülmesini biraz derinleştiriyoruz */
        transform: translateY(40px);
    }
    body.m-chat-open .m-chat-panel-inner {
        transform: translateY(0) !important;
    }
    .m-chat-fab {
        width: 52px !important;
        height: 52px !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        inset-inline-end: 16px !important;
    }
    body.btt-visible .m-chat-fab {
        inset-inline-end: calc(16px + 52px + 10px);
    }
    body.btt-visible .m-chat-fab.is-open {
        inset-inline-end: 16px !important;
    }
}

/* ─────────── İçerik & Arayüz Öğeleri (Orijinal Tasarım) ─────────── */
.m-chat-header { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; background: linear-gradient(135deg, var(--m-chat-primary) 0%, var(--m-chat-primary-dark) 100%); color: #fff; flex-shrink: 0; }
.m-chat-header-avatar { width: 48px; height: 48px; border-radius: 18px; background: rgba(255,255,255,.16); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.m-chat-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.m-chat-header-text { flex: 1; min-width: 0; }
.m-chat-bot-name { font-size: 16px; font-weight: 900; }
.m-chat-status { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; }
.m-chat-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.m-chat-close, .m-chat-clear { width: 36px; height: 36px; background: rgba(255,255,255,.12); color: #fff; border-radius: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border: 0; }
.m-chat-close svg, .m-chat-clear svg { width: 17px; height: 17px; }
.m-chat-clear[hidden] { display: none !important; }

.m-chat-messages { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 11px; background: var(--m-chat-bg); }
.m-chat-msg { max-width: 84%; padding: 12px 14px; border-radius: 20px; font-size: 14px; line-height: 1.52; }
.m-chat-msg-user { align-self: flex-end; color: #fff; background: linear-gradient(135deg, var(--m-chat-primary), var(--m-chat-primary-dark)); border-top-right-radius: 7px; }
.m-chat-msg-bot { align-self: flex-start; background: #fff; color: var(--m-chat-text); border-top-left-radius: 7px; border: 1px solid var(--m-chat-border); }

.m-chat-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; background: #fff; }
.m-chat-quick-replies[hidden] { display: none !important; }
.m-chat-quick { border: 1px solid var(--m-chat-primary); background: var(--m-chat-primary-soft); color: var(--m-chat-primary-dark); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 800; cursor: pointer; }
.m-chat-quick:hover { background: var(--m-chat-primary); color: #fff; }

.m-chat-composer { display: flex; align-items: flex-end; gap: 10px; padding: 13px 20px; background: #fff; border-top: 1px solid var(--m-chat-border); }
.m-chat-input { flex: 1; border: 1px solid var(--m-chat-border); border-radius: 18px; padding: 12px; font-size: 14px; height: 44px; resize: none; outline: none; }
.m-chat-send { width: 44px; height: 44px; border-radius: 17px; background: var(--m-chat-primary); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border: 0; }
.m-chat-send svg { width: 18px; height: 18px; }