/* ShaheeniX Ultra — live features: live strip, demo feed, Shaheen AI chat / voice / call */

/* live strip */
.sx-live[hidden]{display:none}
.sx-live{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:26px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:14px;color:#d3e6ee}
.sx-live b{color:#fff;font-weight:700}
.sx-live .dot{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--body);letter-spacing:.14em;color:#ff6b6b}
.sx-live .dot::before{content:"";width:9px;height:9px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 0 0 rgba(255,77,77,.6);animation:sxPulse 1.6s infinite}
@keyframes sxPulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.6)}70%{box-shadow:0 0 0 10px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}

/* live demo */
.sx-demo{display:grid;grid-template-columns:1fr 380px;gap:clamp(28px,5vw,64px);align-items:center}
.sx-phone{width:100%;max-width:360px;margin:0 auto;background:#0b1220;border-radius:42px;padding:12px;box-shadow:0 40px 80px -30px rgba(9,44,76,.55)}
.sx-screen{background:#f3f5f9;border-radius:32px;overflow:hidden;height:620px;display:flex;flex-direction:column}
.sx-sbar{background:var(--royal);color:#fff;padding:18px 18px 16px}
.sx-sbar small{display:block;color:#a9c8d6;font-size:12px}
.sx-sbar .bal{font:800 26px/1.1 var(--display);margin-top:4px}
.sx-sbar .row{display:flex;gap:8px;margin-top:12px}
.sx-sbar .row span{flex:1;background:rgba(255,255,255,.1);border-radius:10px;padding:8px 10px;font-size:11.5px;color:#d3e6ee}
.sx-sbar .row b{display:block;color:#fff;font-size:14px}
.sx-feed{flex:1;overflow:hidden;padding:12px;display:flex;flex-direction:column;gap:10px}
.sx-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 12px;font-size:13px;color:var(--ink2);animation:sxIn .5s var(--ease) both}
.sx-item .t{display:flex;justify-content:space-between;gap:8px;color:var(--ink);font-weight:600}
.sx-item .amt.in{color:#0f8a5f}.sx-item .amt.out{color:#c0392b}
.sx-item .k{display:inline-block;font:700 10px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:6px;margin-bottom:6px;background:var(--sky);color:var(--royal)}
.sx-item .k.bank{background:#fff1d6;color:#8a5a00}.sx-item .k.ai{background:var(--royal);color:#fff}.sx-item .k.ok{background:#dff7ec;color:#0f6b4a}
.sx-item .acts{display:flex;gap:6px;margin-top:8px}
.sx-item .acts i{font-style:normal;font-size:11.5px;padding:5px 9px;border-radius:8px;border:1px solid var(--line2)}
.sx-item .acts i.on{background:var(--royal);border-color:var(--royal);color:#fff}
@keyframes sxIn{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
.sx-demo-note{font-size:13px;color:var(--mute);text-align:center;margin-top:12px}
.sx-steps{list-style:none;padding:0;margin:0;counter-reset:s}
.sx-steps li{position:relative;padding:16px 0 16px 56px;border-bottom:1px solid var(--line);color:var(--ink2);transition:color .3s}
.sx-steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:14px;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--grey2);color:var(--ink2);font:800 15px var(--display);transition:background .3s,color .3s}
.sx-steps li b{display:block;color:var(--ink);font-size:17px;margin-bottom:2px}
.sx-steps li.on::before{background:var(--sun);color:var(--ink)}
.sx-steps li.on b{color:var(--royal)}

/* assistant cards */
.sx-ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sx-ai{border-radius:20px;padding:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);display:flex;flex-direction:column}
.sx-ai .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--royal);color:var(--sun);margin-bottom:16px}
.sx-ai h3{font-size:21px;margin-bottom:8px}
.sx-ai p{color:var(--ink2);font-size:15.5px;flex:1}
.sx-ai button{margin-top:14px;align-self:flex-start}
.sx-ai.hl{background:var(--royal);border-color:var(--royal);color:#fff}
.sx-ai.hl p{color:#d3e6ee}.sx-ai.hl .ico{background:var(--sun);color:var(--ink)}

/* floating launcher */
.sxa-fab{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:10px;border:0;cursor:pointer;background:var(--royal);color:#fff;border-radius:999px;padding:8px 18px 8px 8px;font:600 15px var(--body);box-shadow:0 18px 40px -14px rgba(9,44,76,.7)}
.sxa-fab .orb{width:40px;height:40px}
.sxa-fab:hover{background:var(--royal2)}
.orb{border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffc68f 0,#FE9F43 30%,#009688 62%,#092C4C 100%);position:relative;flex:none}
.orb::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(254,159,67,.5);animation:sxRing 2.4s infinite}
@keyframes sxRing{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}

/* chat panel */
.sxa-panel{position:fixed;right:20px;bottom:20px;z-index:95;width:min(400px,calc(100vw - 24px));height:min(620px,calc(100vh - 40px));background:#fff;border-radius:22px;box-shadow:0 30px 80px -20px rgba(11,18,32,.45);display:none;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.sxa-panel.open{display:flex;animation:sxIn .35s var(--ease)}
.sxa-head{background:var(--royal);color:#fff;padding:14px 14px 14px 16px;display:flex;align-items:center;gap:12px}
.sxa-head .orb{width:38px;height:38px}
.sxa-head b{display:block;font:700 16px var(--display)}
.sxa-head small{color:#a9c8d6;font-size:12px}
.sxa-head .sp{flex:1}
.sxa-ib{width:36px;height:36px;border-radius:10px;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:grid;place-items:center}
.sxa-ib:hover{background:rgba(255,255,255,.2)}
.sxa-ib[aria-pressed="true"]{background:var(--sun);color:var(--ink)}
.sxa-body{flex:1;overflow-y:auto;padding:16px;background:var(--grey);display:flex;flex-direction:column;gap:10px}
.sxa-m{max-width:86%;padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.sxa-m.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px;align-self:flex-start;color:var(--ink)}
.sxa-m.me{background:var(--royal);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.sxa-m.typing{color:var(--mute)}
.sxa-m.typing span{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--mute);animation:sxDot 1s infinite}
.sxa-m.typing span:nth-child(2){animation-delay:.15s}.sxa-m.typing span:nth-child(3){animation-delay:.3s}
@keyframes sxDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.sxa-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 0;background:#fff}
.sxa-chips button{border:1px solid var(--line2);background:#fff;border-radius:999px;padding:6px 11px;font:500 12.5px var(--body);cursor:pointer;color:var(--ink2)}
.sxa-chips button:hover{border-color:var(--royal);color:var(--royal)}
.sxa-foot{display:flex;gap:8px;padding:12px;background:#fff;border-top:1px solid var(--line)}
.sxa-foot input{flex:1;min-width:0;border:1px solid var(--line2);border-radius:12px;padding:0 12px;font:400 15px var(--body);height:44px}
.sxa-foot input:focus{outline:2px solid var(--royal2);border-color:transparent}
.sxa-btn{width:44px;height:44px;border-radius:12px;border:0;cursor:pointer;display:grid;place-items:center;background:var(--grey2);color:var(--ink)}
.sxa-btn.send{background:var(--royal);color:#fff}
.sxa-btn.rec{background:#ff4d4d;color:#fff;animation:sxPulse 1.4s infinite}
.sxa-note{font-size:11.5px;color:var(--mute);text-align:center;padding:0 12px 10px;background:#fff}

/* call overlay */
.sxc{position:fixed;inset:0;z-index:120;display:none;background:radial-gradient(circle at 50% 20%,#009688 0,#092C4C 45%,#0b1220 100%);color:#fff;flex-direction:column;align-items:center;justify-content:space-between;padding:clamp(24px,6vh,60px) 20px}
.sxc.open{display:flex}
.sxc .who{text-align:center}
.sxc .who small{color:#a9c8d6;letter-spacing:.14em;text-transform:uppercase;font:600 12px var(--body)}
.sxc .who h2{font-size:clamp(28px,5vw,40px);margin:8px 0 4px;color:#fff}
.sxc .who .time{color:#a9c8d6;font-variant-numeric:tabular-nums}
.sxc-orb{width:min(46vw,220px);height:min(46vw,220px);transition:transform .15s}
.sxc-orb.speaking{animation:sxTalk .5s infinite alternate}
.sxc-orb.listening::after{border-color:#ff6b6b;animation-duration:1.2s}
@keyframes sxTalk{from{transform:scale(.96)}to{transform:scale(1.06)}}
.sxc .state{font:600 16px var(--body);color:var(--sun2);min-height:24px;text-align:center}
.sxc .cap{max-width:560px;min-height:72px;text-align:center;color:#d3e6ee;font-size:16px;line-height:1.5}
.sxc .cap b{color:#fff}
.sxc .ctr{display:flex;gap:22px;align-items:center}
.sxc .ctr button{width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff}
.sxc .ctr button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.sxc .ctr .end{width:74px;height:74px;background:#e5484d}
.sxc .ctr label{display:block;text-align:center;font-size:12px;color:#a9c8d6;margin-top:6px}
.sxc select{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:8px 10px;font:500 14px var(--body)}
.sxc select option{color:#0b1220}
.sxc .cb{width:min(420px,100%);background:#fff;color:var(--ink);border-radius:18px;padding:20px;display:none}
.sxc .cb.show{display:block}
.sxc .cb h3{font-size:20px;margin-bottom:4px}
.sxc .cb p{color:var(--ink2);font-size:14px;margin-bottom:12px}
.sx-form input,.sx-form textarea{width:100%;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font:400 15px var(--body);margin-bottom:8px}
.sx-form textarea{min-height:70px;resize:vertical}
.sx-form .hp{position:absolute;left:-9999px}
.sx-form .msg{font-size:14px;margin-top:6px}
.sx-form .msg.ok{color:#0f6b4a}.sx-form .msg.err{color:#c0392b}

@media (max-width:960px){.sx-demo{grid-template-columns:1fr}.sx-ai-grid{grid-template-columns:1fr}}
@media (max-width:620px){.sxa-fab span{display:none}.sxa-fab{padding:8px}.sx-screen{height:560px}}
@media (prefers-reduced-motion:reduce){.orb::after,.sxc-orb.speaking,.sx-live .dot::before{animation:none}}

.sx-hero button.btn-ghost{background:transparent}