/* ===== AI Customer Service Widget ===== */

/* Panel container */
.ai-cs-overlay{display:none;position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.2);opacity:0;transition:opacity .3s}
.ai-cs-overlay.visible{opacity:1}
[data-theme="light"] .ai-cs-overlay{background:rgba(0,0,0,.08)}

.ai-cs-panel{position:fixed;right:24px;top:50%;transform:translateY(-50%) scale(.95);z-index:9999;width:440px;height:650px;max-height:calc(100vh - 80px);display:flex;flex-direction:column;border-radius:20px;background:rgba(10,14,23,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 80px rgba(0,0,0,.45),0 0 0 1px rgba(79,123,255,.1),0 0 40px rgba(79,123,255,.03),inset 0 1px 0 rgba(255,255,255,.06);opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.23,1,.32,1),opacity .3s;overflow:hidden;will-change:transform,opacity}
.ai-cs-panel.open{transform:translateY(-50%) scale(1);opacity:1;pointer-events:auto}

[data-theme="light"] .ai-cs-panel{background:rgba(255,255,255,.94);border-color:rgba(0,0,0,.08);box-shadow:0 24px 80px rgba(0,0,0,.12),0 0 0 1px rgba(79,123,255,.08),inset 0 1px 0 rgba(255,255,255,1)}

/* Staggered entrance */
.ai-cs-panel .ai-cs-header,.ai-cs-panel .ai-cs-messages,.ai-cs-panel .ai-cs-input{transition:opacity .3s ease,transform .3s ease}
.ai-cs-panel:not(.ai-cs-entered) .ai-cs-header{opacity:0;transform:translateY(-6px)}
.ai-cs-panel:not(.ai-cs-entered) .ai-cs-messages{opacity:0}
.ai-cs-panel:not(.ai-cs-entered) .ai-cs-input{opacity:0;transform:translateY(6px)}

/* Header */
.ai-cs-header{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--bdr);background:linear-gradient(135deg,rgba(79,123,255,.06) 0%,rgba(108,92,231,.04) 100%);flex-shrink:0}
[data-theme="light"] .ai-cs-header{background:linear-gradient(135deg,rgba(79,123,255,.04) 0%,rgba(108,92,231,.02) 100%)}
.ai-cs-header .avatar{width:40px;height:40px;border-radius:50%;background:rgba(79,123,255,.12);display:flex;align-items:center;justify-content:center;font-size:16px;color:#4f7bff;flex-shrink:0;overflow:hidden;border:2px solid rgba(79,123,255,.2);box-shadow:0 0 12px rgba(79,123,255,.15)}
[data-theme="light"] .ai-cs-header .avatar{background:rgba(79,123,255,.08);border-color:rgba(79,123,255,.12);box-shadow:0 0 8px rgba(79,123,255,.08)}
.ai-cs-header .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ai-cs-header .info{flex:1;min-width:0}
.ai-cs-header .info .name{font-size:15px;font-weight:600;color:var(--txt-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}
.ai-cs-header .info .status{font-size:12px;color:rgba(79,123,255,.7);display:flex;align-items:center;gap:4px}
.ai-cs-header .info .status::before{content:'';width:7px;height:7px;border-radius:50%;background:#4f7bff;box-shadow:0 0 6px rgba(79,123,255,.5);flex-shrink:0;animation:ai-cs-pulse 2s ease-in-out infinite}
.ai-cs-header .actions{display:flex;gap:4px}
.ai-cs-header .actions button{width:32px;height:32px;border-radius:10px;background:transparent;border:none;color:var(--txt-3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .25s cubic-bezier(.23,1,.32,1)}
.ai-cs-header .actions button:hover{background:rgba(79,123,255,.1);color:var(--txt-head);transform:rotate(90deg) scale(1.1)}

/* Messages area */
.ai-cs-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:280px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(79,123,255,.15) transparent}
.ai-cs-messages::-webkit-scrollbar{width:5px}
.ai-cs-messages::-webkit-scrollbar-track{background:transparent}
.ai-cs-messages::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(79,123,255,.15),rgba(79,123,255,.08));border-radius:4px}
.ai-cs-messages::-webkit-scrollbar-thumb:hover{background:rgba(79,123,255,.25)}
.ai-cs-messages:not(.scrolling)::-webkit-scrollbar-thumb{background:transparent}
[data-theme="light"] .ai-cs-messages{scrollbar-color:rgba(79,123,255,.12) transparent}

/* Message bubble */
.ai-cs-msg{display:flex;gap:8px;max-width:88%;animation:ai-cs-msgIn .3s cubic-bezier(.23,1,.32,1)}
.ai-cs-msg.user{align-self:flex-end;flex-direction:row-reverse;animation-name:ai-cs-msgInRight}
.ai-cs-msg .msg-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;overflow:hidden}
.ai-cs-msg.agent .msg-avatar{background:rgba(79,123,255,.1);color:#4f7bff;border:1px solid rgba(79,123,255,.1);box-shadow:0 2px 6px rgba(79,123,255,.1)}
.ai-cs-msg.agent .msg-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ai-cs-msg.user .msg-avatar{background:rgba(255,255,255,.06);color:var(--txt-3)}

.ai-cs-msg .bubble{padding:12px 16px;border-radius:16px;font-size:14.5px;line-height:1.65;word-break:break-word;transition:background .2s,box-shadow .3s}
.ai-cs-msg.agent .bubble{background:linear-gradient(135deg,rgba(79,123,255,.06) 0%,rgba(79,123,255,.03) 100%);color:var(--txt);border:1px solid rgba(79,123,255,.1);border-top-left-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ai-cs-msg.agent .bubble:hover{background:linear-gradient(135deg,rgba(79,123,255,.08) 0%,rgba(79,123,255,.04) 100%)}
.ai-cs-msg.user .bubble{background:linear-gradient(135deg,rgba(79,123,255,.18) 0%,rgba(108,92,231,.12) 100%);color:#fff;border:1px solid rgba(79,123,255,.15);border-top-right-radius:4px;box-shadow:0 2px 12px rgba(79,123,255,.1)}
.ai-cs-msg.user .bubble:hover{background:linear-gradient(135deg,rgba(79,123,255,.22) 0%,rgba(108,92,231,.15) 100%)}
/* Message body wrapper */
.ai-cs-msg .msg-body{display:flex;flex-direction:column;min-width:0;max-width:100%}
.ai-cs-msg.user .msg-body{align-items:flex-end}
.ai-cs-msg.agent .msg-body{align-items:flex-start}
/* Message time — below bubble, outside */
.ai-cs-msg .msg-time{font-size:11px;color:var(--txt-4);margin-top:4px;padding:0 4px;opacity:.6;letter-spacing:.3px;white-space:nowrap}
.ai-cs-msg.user .msg-time{text-align:right}
.ai-cs-msg.agent .msg-time{text-align:left}

[data-theme="light"] .ai-cs-msg.agent .bubble{background:linear-gradient(135deg,rgba(79,123,255,.06) 0%,rgba(79,123,255,.02) 100%);border-color:rgba(79,123,255,.12)}
[data-theme="light"] .ai-cs-msg.user .bubble{background:linear-gradient(135deg,#4f7bff 0%,#6c5ce7 100%);color:#fff;border-color:transparent;box-shadow:0 4px 16px rgba(79,123,255,.2)}

/* Bubble content formatting */
.ai-cs-msg .bubble p{margin:0 0 4px}
.ai-cs-msg .bubble p:last-child{margin-bottom:0}
.ai-cs-msg .bubble strong{font-weight:600;color:var(--txt-head)}
.ai-cs-msg .bubble em{font-style:italic;color:var(--txt-2)}
.ai-cs-msg .bubble code{background:rgba(79,123,255,.08);padding:1px 5px;border-radius:4px;font-size:13px;font-family:inherit}
.ai-cs-msg .bubble ul,.ai-cs-msg .bubble ol{margin:4px 0;padding-left:18px}
.ai-cs-msg .bubble li{margin:2px 0}

/* Markdown headings */
.ai-cs-msg .bubble .md-h1{font-size:15.5px;font-weight:700;color:var(--txt-head);margin:8px 0 3px;letter-spacing:-.2px}
.ai-cs-msg .bubble .md-h2{font-size:14.5px;font-weight:600;color:var(--txt-head);margin:6px 0 3px}
.ai-cs-msg .bubble .md-h3{font-size:14px;font-weight:600;color:var(--txt-2);margin:5px 0 2px}
.ai-cs-msg .bubble .md-h1:first-child,.ai-cs-msg .bubble .md-h2:first-child,.ai-cs-msg .bubble .md-h3:first-child{margin-top:0}

/* Markdown horizontal rule */
.ai-cs-msg .bubble .md-hr{border:none;border-top:1px solid rgba(79,123,255,.12);margin:6px 0}

/* Markdown list styling */
.ai-cs-msg .bubble .md-ul{list-style:disc}
.ai-cs-msg .bubble .md-ol-item{padding-left:20px;position:relative;margin:3px 0}
.ai-cs-msg .bubble .md-ol-num{position:absolute;left:0;color:var(--txt-2);font-weight:500}
.ai-cs-msg .bubble .md-ul-sub{padding-left:24px;margin:2px 0;color:var(--txt-2);font-size:13.5px;line-height:1.55}
.ai-cs-msg .bubble .md-ul-sub .md-ul-bullet{margin-right:6px;color:var(--txt-3);font-size:12px}
.ai-cs-msg .bubble .md-p{margin:2px 0}

/* Streaming cursor */
.ai-cs-cursor{display:inline-block;width:2px;height:14px;background:rgba(79,123,255,.6);margin-left:2px;vertical-align:middle;animation:ai-cs-blink .8s step-end infinite}

/* Typing indicator */
.ai-cs-typing{display:flex;gap:4px;padding:12px 16px;align-items:center;border-radius:16px;background:linear-gradient(135deg,rgba(79,123,255,.06) 0%,rgba(79,123,255,.03) 100%);border:none}
.ai-cs-typing span{width:7px;height:7px;border-radius:50%;background:rgba(79,123,255,.5);animation:ai-cs-dot 1.2s infinite}
.ai-cs-typing span:nth-child(2){animation-delay:.15s}
.ai-cs-typing span:nth-child(3){animation-delay:.3s}
[data-theme="light"] .ai-cs-typing{background:rgba(79,123,255,.05);border:none}
[data-theme="light"] .ai-cs-typing span{background:rgba(79,123,255,.35)}

/* Welcome message */
.ai-cs-welcome{text-align:center;padding:28px 24px;animation:ai-cs-welcomeIn .5s cubic-bezier(.23,1,.32,1)}
.ai-cs-welcome .welcome-avatar{width:64px;height:64px;border-radius:50%;margin:0 auto 12px;background:rgba(79,123,255,.1);border:2px solid rgba(79,123,255,.25);display:flex;align-items:center;justify-content:center;font-size:24px;color:#4f7bff;overflow:hidden;box-shadow:0 4px 24px rgba(79,123,255,.15);animation:ai-cs-float 3s ease-in-out infinite}
[data-theme="light"] .ai-cs-welcome .welcome-avatar{border-color:rgba(79,123,255,.2);box-shadow:0 4px 16px rgba(79,123,255,.08)}
.ai-cs-welcome .welcome-avatar img{width:100%;height:100%;object-fit:cover}
.ai-cs-welcome .welcome-name{font-size:18px;font-weight:600;color:var(--txt-head);margin-bottom:8px;letter-spacing:-.3px}
.ai-cs-welcome .welcome-text{font-size:14.5px;color:var(--txt-3);line-height:1.55;max-width:300px;margin:0 auto}

/* Input area */
.ai-cs-input{display:flex;align-items:flex-end;gap:8px;padding:10px 16px 14px;border-top:1px solid var(--bdr);background:rgba(79,123,255,.03);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);flex-shrink:0;flex-wrap:wrap}
[data-theme="light"] .ai-cs-input{background:rgba(79,123,255,.02)}
.ai-cs-privacy{width:100%;font-size:11px;color:var(--txt-4);margin-bottom:2px;line-height:1.4;padding:0 2px}
.ai-cs-input textarea{flex:1;resize:none;border:none;background:transparent;color:var(--txt);font-size:14.5px;font-family:inherit;line-height:1.5;padding:6px 0;min-height:24px;max-height:80px;outline:none}
.ai-cs-input textarea::placeholder{color:var(--txt-4)}
.ai-cs-input .send-btn{width:36px;height:36px;border-radius:12px;background:rgba(79,123,255,.12);border:1px solid rgba(79,123,255,.15);color:#4f7bff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .3s cubic-bezier(.23,1,.32,1);flex-shrink:0}
.ai-cs-input .send-btn:hover:not(:disabled){background:#4f7bff;color:#fff;border-color:#4f7bff;box-shadow:0 6px 20px rgba(79,123,255,.35);transform:scale(1.05)}
.ai-cs-input .send-btn:active:not(:disabled){transform:scale(.92)}
.ai-cs-input .send-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}
[data-theme="light"] .ai-cs-input .send-btn{background:rgba(79,123,255,.08);border-color:rgba(79,123,255,.1)}

/* Error message */
.ai-cs-error{text-align:center;padding:12px 18px;font-size:13px;color:rgba(255,100,100,.8);background:rgba(255,100,100,.05);border:1px solid rgba(255,100,100,.1);border-radius:10px;margin:0 16px;animation:ai-cs-msgIn .3s ease}
[data-theme="light"] .ai-cs-error{color:rgba(200,50,50,.8);background:rgba(200,50,50,.04);border-color:rgba(200,50,50,.08)}

/* Animations */
@keyframes ai-cs-msgIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ai-cs-msgInRight{from{opacity:0;transform:translateX(8px) scale(.98)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes ai-cs-dot{0%,60%,100%{transform:translateY(0) scale(1);opacity:.4}30%{transform:translateY(-8px) scale(1.15);opacity:1}}
@keyframes ai-cs-pulse{0%,100%{box-shadow:0 0 4px rgba(79,123,255,.4)}50%{box-shadow:0 0 12px rgba(79,123,255,.8)}}
@keyframes ai-cs-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ai-cs-welcomeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes ai-cs-blink{0%,100%{opacity:1}50%{opacity:0}}

/* Mobile responsive */
@media(max-width:480px){
    .ai-cs-panel{right:0;bottom:0;left:0;width:100%;height:auto;max-height:90vh;border-radius:24px 24px 0 0;transform-origin:bottom center}
    .ai-cs-messages{max-height:calc(90vh - 140px)}
    .ai-cs-msg .bubble{font-size:14px;padding:12px 16px}
    .ai-cs-input textarea{font-size:14px}
}