/* Sakhi AI Chatbot v2.0.0 — Frontend CSS */
#sakhi-chatbot-root *{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',sans-serif}

/* ── Floating Button ── */
#sakhi-fab{position:fixed;width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:999998;border:none;box-shadow:0 6px 28px rgba(0,0,0,.30);transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;overflow:hidden;padding:0;color:#fff}
#sakhi-fab:hover{transform:scale(1.14);box-shadow:0 10px 36px rgba(0,0,0,.38)}
#sakhi-fab:focus{outline:3px solid rgba(108,52,131,.5);outline-offset:3px}
#sakhi-fab img{width:100%;height:100%;object-fit:cover}
#sakhi-fab-badge{position:absolute;top:-2px;right:-2px;background:#e74c3c;color:#fff;border-radius:50%;font-size:10px;font-weight:700;min-width:19px;height:19px;display:none;align-items:center;justify-content:center;border:2px solid #fff;z-index:1}
.sakhi-br{bottom:22px;right:22px}.sakhi-bl{bottom:22px;left:22px}.sakhi-tr{top:22px;right:22px}.sakhi-tl{top:22px;left:22px}
.sakhi-win-br{bottom:96px;right:22px}.sakhi-win-bl{bottom:96px;left:22px}.sakhi-win-tr{top:96px;right:22px}.sakhi-win-tl{top:96px;left:22px}

/* ── Chat Window ── */
#sakhi-win{position:fixed;z-index:999999;width:390px;max-width:calc(100vw - 14px);background:#fff;border-radius:22px;box-shadow:0 14px 64px rgba(0,0,0,.24);display:flex;flex-direction:column;overflow:hidden;transition:transform .32s cubic-bezier(.34,1.56,.64,1),opacity .25s;transform-origin:bottom right;max-height:calc(100vh - 110px)}
#sakhi-win.s-hidden{transform:scale(.82) translateY(24px);opacity:0;pointer-events:none}
#sakhi-win.s-visible{transform:scale(1) translateY(0);opacity:1}
#sakhi-win.s-minimized #sakhi-body,#sakhi-win.s-minimized #sakhi-footer,#sakhi-win.s-minimized #sakhi-voice-bar{display:none}

/* ── Header ── */
#sakhi-hdr{padding:11px 14px;display:flex;align-items:center;gap:9px;flex-shrink:0;backdrop-filter:blur(4px)}
#sakhi-hdr-av{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden;flex-shrink:0;border:2px solid rgba(255,255,255,.3)}
#sakhi-hdr-av img{width:100%;height:100%;object-fit:cover}
#sakhi-hdr-info{flex:1;min-width:0}
#sakhi-hdr-title{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sakhi-hdr-status{font-size:11px;opacity:.82;display:flex;align-items:center;gap:4px;margin-top:1px}
.s-online-dot{color:#2ecc71;font-size:8px;animation:s-pulse-dot 2s ease infinite}
@keyframes s-pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}
#sakhi-hdr-acts{display:flex;gap:4px;align-items:center;flex-shrink:0}
.s-hbtn{background:rgba(255,255,255,.12);border:none;cursor:pointer;font-size:13px;opacity:.82;padding:5px 6px;border-radius:7px;transition:opacity .15s,background .15s;color:inherit;line-height:1;display:flex;align-items:center;justify-content:center;min-width:28px;min-height:28px}
.s-hbtn:hover{opacity:1;background:rgba(255,255,255,.26)}

/* ── Body ── */
#sakhi-body{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:12px;min-height:260px;scroll-behavior:smooth}
#sakhi-body::-webkit-scrollbar{width:4px}
#sakhi-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:2px}

/* ── Starters ── */
#sakhi-starters{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.s-starter{border:1.5px solid var(--sakhi-hbg,#6C3483);border-radius:20px;padding:6px 14px;font-size:12.5px;cursor:pointer;transition:all .2s;background:transparent;font-weight:500;font-family:inherit;color:var(--sakhi-hbg,#6C3483);line-height:1.4}
.s-starter:hover{background:var(--sakhi-hbg,#6C3483);color:#fff}

/* ── Messages ── */
.s-row{display:flex;align-items:flex-end;gap:8px;animation:s-in .22s ease-out}
.s-row.bot{flex-direction:row}.s-row.user{flex-direction:row-reverse}
@keyframes s-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.s-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;overflow:hidden}
.s-av img{width:100%;height:100%;object-fit:cover}
.s-bubble{max-width:76%;padding:10px 14px;border-radius:20px;font-size:13.5px;line-height:1.6;word-wrap:break-word;position:relative}
.s-bubble.bot{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08);border-bottom-left-radius:4px}
.s-bubble.user{border-bottom-right-radius:4px}
.s-bubble code{background:#f0f0f0;padding:1px 5px;border-radius:4px;font-family:monospace;font-size:12px}
.s-meta{font-size:10px;opacity:.52;margin-top:5px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.s-lang-tag{background:rgba(108,52,131,.1);color:#6C3483;padding:1px 8px;border-radius:10px;font-size:10px;font-weight:600}
.s-actions{display:flex;gap:4px;margin-top:6px}
.s-abtn{background:none;border:none;cursor:pointer;font-size:12px;opacity:.45;padding:3px 5px;border-radius:5px;transition:opacity .15s,background .15s;display:flex;align-items:center;justify-content:center}
.s-abtn:hover{opacity:1;background:rgba(0,0,0,.06)}
.s-abtn.speaking{color:var(--sakhi-hbg,#6C3483);opacity:1}

/* ── Typing ── */
.s-typing-row{display:flex;align-items:flex-end;gap:8px}
.s-dots{display:flex;gap:5px;padding:12px 15px;background:#fff;border-radius:20px;border-bottom-left-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.s-dot{width:7px;height:7px;border-radius:50%;background:#ccc;animation:s-bounce .9s ease-in-out infinite}
.s-dot:nth-child(2){animation-delay:.15s}.s-dot:nth-child(3){animation-delay:.3s}
@keyframes s-bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-8px)}}
.s-err{background:#fff0f0;color:#c0392b;border:1px solid #f5c6cb;border-radius:12px;padding:9px 13px;font-size:12.5px}

/* ── Footer ── */
#sakhi-footer{padding:8px 12px 10px;display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(0,0,0,.07);flex-shrink:0}
#sakhi-input{width:100%;border:1.5px solid #ced4da;outline:none;font-size:14px;padding:9px 13px;resize:none;line-height:1.5;min-height:40px;max-height:160px;overflow-y:hidden;transition:border-color .2s,box-shadow .2s;font-family:inherit;background:#fff;color:#212529;display:block}
#sakhi-input:focus{border-color:var(--sakhi-hbg,#6C3483);box-shadow:0 0 0 3px rgba(108,52,131,.12)}
#sakhi-input::placeholder{color:#aaa;font-size:13px}
.s-footer-btns{display:flex;justify-content:flex-end;align-items:center;gap:7px;margin-top:6px}
.s-ibtn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;transition:transform .18s,box-shadow .18s;background:transparent}
.s-ibtn:hover{transform:scale(1.1)}
.s-ibtn:active{transform:scale(0.95)}
.s-mic-btn{background:rgba(108,52,131,.08)!important}
.s-mic-btn:hover{background:rgba(108,52,131,.16)!important}
#sakhi-mic.recording{animation:s-pulse-rec .8s ease infinite;background:rgba(231,76,60,.15)!important}
@keyframes s-pulse-rec{0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,.4)}50%{box-shadow:0 0 0 9px rgba(231,76,60,0)}}
#sakhi-send:hover{box-shadow:0 4px 16px rgba(0,0,0,.22)}

/* ── Language Picker ── */
#sakhi-lang-picker{position:absolute;bottom:64px;right:12px;background:#fff;border-radius:14px;box-shadow:0 8px 36px rgba(0,0,0,.2);z-index:10;width:220px;display:none;flex-direction:column;overflow:hidden}
#sakhi-lang-picker.open{display:flex;animation:s-in .18s ease-out}
#sakhi-lang-search{border:none;border-bottom:1px solid #f0f0f0;padding:10px 14px;font-size:12.5px;outline:none;font-family:inherit;color:#333}
#sakhi-lang-list{max-height:240px;overflow-y:auto}
.s-lang-opt{padding:8px 14px;cursor:pointer;font-size:12.5px;display:flex;align-items:center;justify-content:space-between;transition:background .14s;border-bottom:1px solid #f6f6f6}
.s-lang-opt:hover{background:#f9f0ff}
.s-lang-opt.active{background:#f0e6ff;font-weight:700}
.s-lang-native{font-weight:600;color:#333}
.s-lang-opt small{color:#999;font-size:11px}
.s-lang-opt:last-child{border-bottom:none}

/* ── Voice Bar ── */
#sakhi-voice-bar{position:absolute;bottom:62px;left:0;right:0;background:rgba(20,20,30,.85);backdrop-filter:blur(6px);padding:10px 14px;display:none;align-items:center;gap:10px;color:#fff;font-size:12px;z-index:5}
#sakhi-voice-bar.active{display:flex}
#sakhi-voice-status{flex-shrink:0;font-size:11.5px;max-width:130px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.s-wave{flex:1;height:28px;display:flex;align-items:center;gap:3px}
.s-wbar{width:4px;border-radius:2px;background:#9B59B6;animation:s-wave .7s ease-in-out infinite}
.s-wbar:nth-child(2){animation-delay:.1s}.s-wbar:nth-child(3){animation-delay:.2s}.s-wbar:nth-child(4){animation-delay:.15s}.s-wbar:nth-child(5){animation-delay:.05s}
@keyframes s-wave{0%,100%{height:4px}50%{height:20px}}
#sakhi-voice-stop{background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;font-size:14px;padding:4px 8px;border-radius:6px;flex-shrink:0;transition:background .15s}
#sakhi-voice-stop:hover{background:rgba(255,255,255,.3)}

/* ── Mobile fullscreen ── */
@media(max-width:480px){
    #sakhi-win{width:100vw!important;max-width:100vw!important}
    #sakhi-win.mobile-fs{height:100dvh!important;max-height:100dvh!important;top:0!important;left:0!important;bottom:0!important;right:0!important;border-radius:0!important}
    #sakhi-body{min-height:200px}
    .sakhi-win-br,.sakhi-win-bl,.sakhi-win-tr,.sakhi-win-tl{bottom:0!important;right:0!important;left:0!important;top:auto!important}
}
@media(prefers-reduced-motion:reduce){
    #sakhi-win,#sakhi-fab,.s-row,.s-wbar{animation:none!important;transition:opacity .15s!important}
}

/* ── User Info Form ── */
.s-user-form{background:#fff;border-radius:16px;padding:18px;box-shadow:0 2px 16px rgba(108,52,131,.12);border:1px solid #f0e6ff;animation:s-in .3s ease}
.s-user-form-title{font-size:15px;font-weight:700;color:#6C3483;margin-bottom:6px}
.s-user-form-desc{font-size:12.5px;color:#666;margin:0 0 12px;line-height:1.5}
.sk-field{width:100%;border:1.5px solid #ddd;border-radius:10px;padding:8px 12px;font-size:13px;margin-bottom:8px;font-family:inherit;outline:none;transition:border-color .2s;background:#fafafa;display:block}
.sk-field:focus{border-color:#6C3483;background:#fff}
.sk-start-btn{width:100%;background:linear-gradient(135deg,#6C3483,#9B59B6);color:#fff;border:none;border-radius:10px;padding:10px;font-size:13.5px;font-weight:700;cursor:pointer;margin-top:4px;font-family:inherit;transition:transform .2s}
.sk-start-btn:hover{transform:translateY(-1px)}
/* ── Sequential step form ── */
.s-user-step{padding:6px 12px 10px;animation:s-in .25s ease}
.sk-step-field{width:100%;border:1.5px solid #dce0ea;border-radius:10px;padding:9px 13px;font-size:13.5px;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s;background:#fafafa;display:block;margin-bottom:8px;box-sizing:border-box}
.sk-step-field:focus{border-color:#6C3483;background:#fff;box-shadow:0 0 0 3px rgba(108,52,131,.1)}
.sk-step-btn{background:linear-gradient(135deg,#6C3483,#9B59B6);color:#fff;border:none;border-radius:10px;padding:9px 22px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 8px rgba(108,52,131,.25)}
.sk-step-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(108,52,131,.35)}
@keyframes sk-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ── Source tag ── */
.s-source-tag{background:#e8f4fd;color:#2980b9;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:600}