@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root{--kai-font:'Inter',system-ui,sans-serif;--kai-ease:cubic-bezier(.22,1,.36,1);}

#kai-toggle{
    position:fixed;bottom:24px;right:24px;z-index:99998;
    width:54px;height:54px;border-radius:50%;border:none;
    background:var(--kai-ana,#0f172a);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 32px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.18);
    transition:transform .3s var(--kai-ease),box-shadow .2s;outline:none;
}
#kai-toggle:hover{transform:scale(1.07);}
#kai-toggle .t-icon{width:22px;height:22px;}
.dot-badge{
    position:absolute;top:11px;right:11px;width:9px;height:9px;
    border-radius:50%;background:#22c55e;border:2px solid #fff;
    animation:blink 2.5s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}

#kai-box{
    position:fixed;bottom:88px;right:24px;z-index:99999;
    width:390px;
    display:flex;flex-direction:column;
    background:#f8fafc;
    border-radius:22px;
    box-shadow:0 28px 80px rgba(0,0,0,.18),0 4px 16px rgba(0,0,0,.10);
    overflow:hidden;font-family:var(--kai-font);
    transform:translateY(18px) scale(.95);transform-origin:bottom right;
    opacity:0;pointer-events:none;
    transition:transform .4s var(--kai-ease),opacity .3s ease;
    max-height:min(620px,calc(100dvh - 110px));
}
#kai-box.open{transform:translateY(0) scale(1);opacity:1;pointer-events:all;}

.kai-hdr{
    background:var(--kai-ana,#0f172a);
    padding:14px 16px;display:flex;align-items:center;gap:11px;flex-shrink:0;
}
.kai-hdr-av{
    width:38px;height:38px;border-radius:50%;flex-shrink:0;
    background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.18);
    display:flex;align-items:center;justify-content:center;font-size:18px;
}
.kai-hdr-info{flex:1;min-width:0;}
.kai-hdr-name{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.01em;}
.kai-hdr-status{font-size:11px;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:5px;margin-top:2px;}
.kai-hdr-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#4ade80;flex-shrink:0;}
.kai-hdr-close{
    width:28px;height:28px;border-radius:7px;background:none;
    border:none;color:rgba(255,255,255,.45);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s,color .15s;flex-shrink:0;
}
.kai-hdr-close:hover{background:rgba(255,255,255,.1);color:#fff;}

#kai-kvkk-bant{
    background:#fff;border-bottom:1px solid #e2e8f0;
    padding:10px 14px;font-size:11.5px;color:#475569;
    display:flex;align-items:flex-start;gap:8px;flex-shrink:0;
}
#kai-kvkk-bant svg{width:13px;height:13px;flex-shrink:0;margin-top:1px;color:#6366f1;}
.kvkk-text{flex:1;line-height:1.5;}
.kvkk-text a{color:#6366f1;text-decoration:none;}
#kai-kvkk-kabul{
    background:var(--kai-vurgu,#6366f1);color:#fff;border:none;
    padding:5px 11px;border-radius:8px;font-size:11px;font-weight:600;
    cursor:pointer;white-space:nowrap;align-self:center;flex-shrink:0;
    font-family:var(--kai-font);transition:opacity .15s;
}
#kai-kvkk-kabul:hover{opacity:.85;}

.kai-msgs{
    flex:1;overflow-y:auto;padding:14px 12px;
    display:flex;flex-direction:column;gap:8px;
    scroll-behavior:smooth;min-height:0;
}
.kai-msgs::-webkit-scrollbar{width:3px;}
.kai-msgs::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px;}

.kai-row{display:flex;gap:8px;animation:msg-in .3s var(--kai-ease) both;}
.kai-row.user{flex-direction:row-reverse;}
@keyframes msg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.kai-av{
    width:28px;height:28px;border-radius:50%;flex-shrink:0;
    align-self:flex-end;display:flex;align-items:center;
    justify-content:center;font-size:14px;
}

.kai-bubble{
    max-width:80%;padding:9px 12px;font-size:13px;line-height:1.6;
    word-break:break-word;white-space:pre-wrap;border-radius:14px;
}
.kai-bubble strong{font-weight:600;}
.kai-bubble code{font-family:monospace;font-size:12px;background:rgba(0,0,0,.07);padding:1px 5px;border-radius:4px;}
.kai-bubble a{color:inherit;text-underline-offset:2px;}
.kai-kargo-baslik{font-weight:600;border-top:1px solid rgba(0,0,0,.08);margin-top:8px;padding-top:8px;display:block;}

.kai-row.bot .kai-bubble{
    background:#fff;color:#1e293b;
    border-radius:14px 14px 14px 3px;
    box-shadow:0 1px 3px rgba(0,0,0,.07),0 0 0 .5px rgba(0,0,0,.06);
}
.kai-row.user .kai-bubble{
    background:var(--kai-vurgu,#6366f1);color:#fff;
    border-radius:14px 14px 3px 14px;
}

.kai-time{font-size:10px;color:#94a3b8;margin-top:3px;}
.kai-row.bot .kai-time{margin-left:36px;}
.kai-row.user .kai-time{text-align:right;margin-right:36px;}

/* Ürün kartları */
.kai-urun-list{display:flex;flex-direction:column;gap:5px;margin-top:8px;}
.kai-urun-kart{
    display:flex;align-items:center;gap:8px;
    background:#f8fafc;border-radius:10px;
    border:.5px solid #e2e8f0;padding:7px 9px;
}
.kai-urun-img{width:42px;height:42px;border-radius:7px;object-fit:cover;flex-shrink:0;background:#e2e8f0;}
.kai-urun-ph{
    width:42px;height:42px;border-radius:7px;flex-shrink:0;
    background:#e2e8f0;display:flex;align-items:center;justify-content:center;font-size:18px;
}
.kai-urun-bilgi{flex:1;min-width:0;}
.kai-urun-ad{font-size:11.5px;font-weight:500;color:#1e293b;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.kai-urun-meta{display:flex;align-items:center;gap:5px;margin-top:3px;}
.kai-urun-adet{font-size:10.5px;background:#e2e8f0;color:#475569;padding:1px 6px;border-radius:20px;font-weight:500;}
.kai-urun-fiyat{font-size:11.5px;font-weight:600;color:var(--kai-vurgu,#6366f1);}

.kai-takip-btn{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--kai-vurgu,#6366f1);color:#fff !important;
    padding:7px 13px;border-radius:10px;font-size:12px;
    font-weight:600;text-decoration:none !important;margin-top:8px;
    transition:opacity .15s;
}
.kai-takip-btn:hover{opacity:.88;}

.kai-typing{
    display:flex;gap:4px;padding:10px 13px;
    background:#fff;border-radius:14px 14px 14px 3px;
    width:fit-content;margin-left:36px;
    box-shadow:0 1px 3px rgba(0,0,0,.07),0 0 0 .5px rgba(0,0,0,.06);
}
.kai-typing span{width:6px;height:6px;border-radius:50%;background:#94a3b8;animation:bounce .8s ease-in-out infinite;}
.kai-typing span:nth-child(2){animation-delay:.12s;}
.kai-typing span:nth-child(3){animation-delay:.24s;}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}

.kai-quick{display:flex;flex-wrap:wrap;gap:5px;padding:6px 12px;background:#f8fafc;flex-shrink:0;}
.kai-qbtn{
    padding:5px 11px;border-radius:20px;cursor:pointer;
    font-size:11.5px;font-weight:500;font-family:var(--kai-font);
    border:1px solid #e2e8f0;background:#fff;color:#475569;
    transition:all .15s;white-space:nowrap;
}
.kai-qbtn:hover{border-color:var(--kai-vurgu,#6366f1);color:var(--kai-vurgu,#6366f1);background:#f5f3ff;}

.kai-input-wrap{
    padding:9px 11px;background:#fff;
    border-top:.5px solid #e2e8f0;
    display:flex;gap:7px;align-items:center;flex-shrink:0;
}
.kai-input{
    flex:1;padding:9px 13px;background:#f8fafc;
    border:1.5px solid #e2e8f0;border-radius:22px;
    font-size:13px;font-family:var(--kai-font);color:#1e293b;outline:none;
    transition:border-color .15s,background .15s;
}
.kai-input:focus{border-color:var(--kai-vurgu,#6366f1);background:#fff;}
.kai-input::placeholder{color:#94a3b8;}
.kai-send{
    width:38px;height:38px;border-radius:50%;flex-shrink:0;
    background:var(--kai-ana,#0f172a);border:none;color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:transform .2s var(--kai-ease),background .15s;
}
.kai-send:hover{transform:scale(1.08);background:var(--kai-vurgu,#6366f1);}
.kai-send:disabled{opacity:.35;cursor:not-allowed;transform:none;}
.kai-footer{padding:4px 12px 7px;text-align:center;font-size:10px;color:#cbd5e1;background:#fff;}
.kai-footer a{color:#cbd5e1;text-decoration:none;}

@media(max-width:480px){
    #kai-box{bottom:0;right:0;width:100vw;border-radius:20px 20px 0 0;max-height:92dvh;}
    #kai-toggle{bottom:16px;right:16px;}
}