/* Suhail site widget. Scoped to #jsa-w; resets theme styles on its own controls. */
#jsa-w{
	--jsa-accent:var(--jsa-accent-in,#d01429);
	--w-bg:#ffffff;--w-ink:#18181b;--w-mut:#63636b;--w-line:#e4e4e7;--w-shadow:20,10,12;
	--w-ease:cubic-bezier(.2,.8,.2,1);
	--w-edge:clamp(14px,2.4vw,24px);
	position:fixed;z-index:2147483000;bottom:calc(var(--w-edge) + env(safe-area-inset-bottom));
	font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic",Arial,sans-serif;color:var(--w-ink);
}
@media (prefers-color-scheme:dark){#jsa-w{--w-bg:#141315;--w-ink:#f4f4f5;--w-mut:#a1a1aa;--w-line:#2c2b2f;--w-shadow:0,0,0}}
#jsa-w.is-right{right:calc(var(--w-edge) + env(safe-area-inset-right))}
#jsa-w.is-left{left:calc(var(--w-edge) + env(safe-area-inset-left))}
#jsa-w *,#jsa-w *::before,#jsa-w *::after{box-sizing:border-box}
#jsa-w button{all:unset;box-sizing:border-box;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font:inherit;color:inherit}
#jsa-w :focus-visible{outline:2px solid var(--jsa-accent);outline-offset:3px}
#jsa-w svg.jsa-i{width:20px;height:20px}
#jsa-w h2,#jsa-w p{margin:0;padding:0;border:0;font:inherit;color:inherit;letter-spacing:normal;text-transform:none}

/* Launcher — the animated head */
#jsa-w .jsa-w-launch{position:relative;display:block;width:clamp(62px,7vw,76px);aspect-ratio:477/459;filter:drop-shadow(0 8px 14px rgba(var(--w-shadow),.28)) drop-shadow(0 2px 3px rgba(var(--w-shadow),.18));transition:transform .2s var(--w-ease)}
#jsa-w .jsa-w-launch:active{transform:scale(.94)}
#jsa-w .jsa-w-launch-m{display:block;width:100%}
#jsa-w.is-open .jsa-w-launch{transform:scale(.9)}
@media (hover:hover) and (pointer:fine){#jsa-w .jsa-w-launch:hover{transform:translateY(-2px) scale(1.05)}#jsa-w.is-open .jsa-w-launch:hover{transform:scale(.94)}}
#jsa-w .jsa-w-badge{position:absolute;top:2px;right:-2px;min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:var(--jsa-accent);color:#fff;font-size:12px;font-weight:700;border:2px solid var(--w-bg);font-variant-numeric:tabular-nums;animation:jsaBump .35s var(--w-ease)}
#jsa-w .jsa-w-badge[hidden]{display:none}
@keyframes jsaBump{0%{transform:scale(.8)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* Comic speech bubble (rounded box + tail pointing at Suhail) */
#jsa-w .jsa-w-bubble{--b-ink:#10243f;position:absolute;bottom:calc(100% + 16px);display:flex;align-items:flex-start;gap:2px;width:max-content;max-width:min(260px,calc(100vw - 40px));padding:11px 6px 11px 16px;border-radius:18px;background:#fff;color:#111;border:3px solid var(--b-ink);box-shadow:0 12px 30px -12px rgba(var(--w-shadow),.4);opacity:0;transform:translateY(6px) scale(.96);transition:opacity .22s var(--w-ease),transform .22s var(--w-ease);pointer-events:auto}
#jsa-w .jsa-w-bubble::before,#jsa-w .jsa-w-bubble::after{content:"";position:absolute;top:100%;width:0;height:0;border-style:solid}
#jsa-w .jsa-w-bubble::before{border-width:16px 14px 0 0;border-color:var(--b-ink) transparent transparent transparent;margin-top:1px}
#jsa-w .jsa-w-bubble::after{border-width:11px 9px 0 0;border-color:#fff transparent transparent transparent;margin-top:-2px}
#jsa-w.is-right .jsa-w-bubble{right:8px;transform-origin:bottom right}
#jsa-w.is-right .jsa-w-bubble::before{right:22px}#jsa-w.is-right .jsa-w-bubble::after{right:25px}
#jsa-w.is-left .jsa-w-bubble{left:8px;transform-origin:bottom left}
#jsa-w.is-left .jsa-w-bubble::before{left:22px;border-width:16px 0 0 14px}#jsa-w.is-left .jsa-w-bubble::after{left:25px;border-width:11px 0 0 9px}
@media (prefers-color-scheme:dark){#jsa-w .jsa-w-bubble{--b-ink:#f4edea;background:#1b1a1c;color:#f4edea}#jsa-w .jsa-w-bubble::after{border-top-color:#1b1a1c}}
#jsa-w .jsa-w-bubble-txt{color:inherit}
#jsa-w .jsa-w-bubble.is-in{opacity:1;transform:none}
#jsa-w .jsa-w-bubble[hidden]{display:none}
#jsa-w .jsa-w-bubble-txt{font-size:15px;font-weight:600;line-height:1.35;text-wrap:pretty;padding:2px 0}
#jsa-w .jsa-w-bubble-x{display:grid;place-items:center;width:30px;height:30px;margin:-4px 0 -4px 2px;border-radius:50%;color:var(--w-mut);flex:none;position:relative}
#jsa-w .jsa-w-bubble-x::before{content:"";position:absolute;inset:-7px}
#jsa-w .jsa-w-bubble-x svg.jsa-i{width:15px;height:15px}

/* Full character mode */
#jsa-w.is-full .jsa-w-launch{display:none}
#jsa-w.is-full .jsa-ch .jsa-w-bubble{bottom:calc(100% - 8px);left:50%;right:auto;transform-origin:bottom center;max-width:min(240px,calc(100vw - 40px))}
#jsa-w.is-full.is-right .jsa-ch .jsa-w-bubble{transform:translate(-62%,6px) scale(.96)}#jsa-w.is-full.is-right .jsa-ch .jsa-w-bubble.is-in{transform:translate(-62%,0)}
#jsa-w.is-full.is-left .jsa-ch .jsa-w-bubble{transform:translate(-38%,6px) scale(.96)}#jsa-w.is-full.is-left .jsa-ch .jsa-w-bubble.is-in{transform:translate(-38%,0)}
#jsa-w.is-full .jsa-ch .jsa-w-bubble::before{right:auto;left:50%;margin-left:-4px;border-width:16px 0 0 14px}
#jsa-w.is-full .jsa-ch .jsa-w-bubble::after{right:auto;left:50%;margin-left:-1px;border-width:11px 0 0 9px}
#jsa-w.is-full .jsa-ch .jsa-w-badge{position:absolute;top:8%;right:14%;pointer-events:none}
#jsa-w.is-full.is-right .jsa-w-panel{right:calc(var(--ch-w,150px) + 12px);bottom:0}
#jsa-w.is-full.is-left .jsa-w-panel{left:calc(var(--ch-w,150px) + 12px);bottom:0}
@media (max-width:560px){#jsa-w.is-full .jsa-w-panel{right:8px;left:8px}}

/* Panel */
#jsa-w .jsa-w-panel{position:absolute;bottom:calc(100% + 14px);width:min(400px,calc(100vw - 2 * var(--w-edge)));height:min(680px,calc(100dvh - 140px));display:flex;flex-direction:column;border-radius:20px;background:var(--w-bg);border:1px solid var(--w-line);box-shadow:0 30px 60px -20px rgba(var(--w-shadow),.45),0 8px 20px -10px rgba(var(--w-shadow),.2);overflow:hidden;opacity:0;transform:translateY(12px) scale(.97);transition:opacity .24s var(--w-ease),transform .24s var(--w-ease)}
#jsa-w.is-right .jsa-w-panel{right:0;transform-origin:bottom right}
#jsa-w.is-left .jsa-w-panel{left:0;transform-origin:bottom left}
#jsa-w .jsa-w-panel.is-in{opacity:1;transform:none}
#jsa-w .jsa-w-panel[hidden]{display:none}
#jsa-w .jsa-w-head{display:flex;align-items:center;gap:10px;padding:10px 8px 10px 12px;border-bottom:1px solid var(--w-line);flex:none;background:linear-gradient(180deg,color-mix(in srgb,var(--jsa-accent) 7%,var(--w-bg)),var(--w-bg))}
#jsa-w .jsa-w-head-m{display:block;width:46px;flex:none}
#jsa-w .jsa-w-head-t{flex:1;min-width:0}
#jsa-w .jsa-w-head-t h2{font-size:16px;font-weight:700;line-height:1.2}
#jsa-w .jsa-w-head-t p{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--w-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jsa-w .jsa-w-dot{width:8px;height:8px;border-radius:50%;background:#16a34a;flex:none;box-shadow:0 0 0 3px color-mix(in srgb,#16a34a 22%,transparent)}
#jsa-w .jsa-c-ib{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--w-mut);transition:background-color .15s,transform .15s var(--w-ease)}
#jsa-w .jsa-c-ib:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){#jsa-w .jsa-w-head .jsa-c-ib:hover{background:color-mix(in srgb,var(--w-ink) 7%,transparent);color:var(--w-ink)}}
#jsa-w .jsa-w-body{flex:1;min-height:0;display:flex}
#jsa-w .jsa-w-body .jsa-c{flex:1;--c-bg:var(--w-bg)}
#jsa-w .jsa-w-foot{flex:none;padding:0 14px 10px;font-size:11px;color:var(--w-mut);text-align:center}

/* Phones: bottom sheet (not full screen) that slides up over the page */
@media (max-width:560px){
	#jsa-w .jsa-w-panel{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;height:min(76dvh,640px);max-height:calc(100dvh - 72px - env(safe-area-inset-top));border-radius:22px;border:1px solid var(--w-line);transform:translateY(calc(100% + 24px));opacity:1;transition:transform .32s var(--w-ease);box-shadow:0 -10px 40px -10px rgba(var(--w-shadow),.45)}
	#jsa-w .jsa-w-panel.is-in{transform:none}
	#jsa-w .jsa-w-panel::before{content:"";position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:4px;background:var(--w-line);z-index:1}
	#jsa-w .jsa-w-head{padding:16px 6px 10px 12px}
	#jsa-w.is-open .jsa-w-launch,#jsa-w.is-open .jsa-w-bubble{visibility:hidden}
	html.jsa-w-lock,html.jsa-w-lock body{overflow:hidden!important}
}
@media print{#jsa-w{display:none!important}}
@media (prefers-reduced-motion:reduce){#jsa-w *,#jsa-w{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}