/* HK Ads Desk - AOEDE, the voice robot (voice.js). The face follows two live numbers set by voice.js:
   --mic (how loud the person is, 0..1: the ears glow) and --say (how loud Aoede is, 0..1: the mouth opens).
   State = data-s on .ao-dock / .ao-panel: idle connecting listening thinking working speaking ended error. */
.ao-dock{position:fixed;left:18px;bottom:18px;z-index:70;border:0;padding:0;background:none;cursor:pointer;display:grid;justify-items:center;gap:2px;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.6));transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
.ao-dock:hover{transform:translateY(-3px) rotate(-4deg)}
.ao-dock.hide{opacity:0;transform:scale(.6) translateY(20px);pointer-events:none}
.ao-dock-tag{font:600 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);padding:2px 8px;border-radius:99px;
  background:rgba(14,16,21,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.1)}
.ao-dock::before{content:"";position:absolute;inset:6px 6px 22px;border-radius:50%;background:radial-gradient(circle,rgba(127,224,255,.35),transparent 70%);filter:blur(10px);z-index:-1;animation:ao-glow 3s ease-in-out infinite}
@keyframes ao-glow{50%{opacity:.4;transform:scale(1.1)}}

/* the robot itself */
.ao-bot{overflow:visible;display:block}
.ao-float{transform-origin:60px 110px;animation:ao-bob 3.2s ease-in-out infinite}
@keyframes ao-bob{50%{transform:translateY(-4px) rotate(1.5deg)}}
.ao-tip{transform-origin:60px 7px;animation:ao-tip 2.4s ease-in-out infinite}
@keyframes ao-tip{50%{opacity:.55;transform:scale(.8)}}
.ao-eyes{transform-origin:60px 58px;transition:transform .25s}
.ao-eye{transform-box:fill-box;transform-origin:center;transition:transform .12s}
.ao-bot.blink .ao-eye{transform:scaleY(.12)}
.ao-x{opacity:0;transition:opacity .2s}
.ao-mouth{transform-box:fill-box;transform-origin:center;transform:scaleY(calc(1 + var(--say,0) * 2.6)) scaleX(calc(1 - var(--say,0) * .25));transition:transform .06s linear}
.ao-ear{transform-box:fill-box;transform-origin:center;transition:filter .1s}
.ao-blush{transition:opacity .3s}

[data-s=listening] .ao-ear{filter:drop-shadow(0 0 calc(2px + var(--mic,0) * 14px) rgba(62,207,142,.95)) brightness(calc(1 + var(--mic,0) * .5))}
[data-s=listening] .ao-eye{transform:scale(1.08)}
[data-s=thinking] .ao-eyes{animation:ao-look 1.2s ease-in-out infinite}
@keyframes ao-look{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
[data-s=working] .ao-eyes{animation:ao-look 0.8s ease-in-out infinite}
[data-s=working] .ao-tip,[data-s=connecting] .ao-tip{animation:ao-spin .6s linear infinite}
@keyframes ao-spin{50%{opacity:.3;transform:scale(1.4)}}
[data-s=speaking] .ao-blush{opacity:.85}
[data-s=speaking] .ao-float{animation-duration:1.6s}
[data-s=ended] .ao-eye{transform:scaleY(.18)}
[data-s=error] .ao-eye{opacity:0}
[data-s=error] .ao-x{opacity:1}
[data-s=error] .ao-mouth{fill:#ff7b70}

/* the panel */
.ao-panel{position:fixed;left:18px;bottom:18px;z-index:72;width:360px;max-height:calc(100vh - 110px);display:flex;flex-direction:column;border-radius:28px;overflow:hidden;
  background:linear-gradient(165deg,rgba(34,38,48,.84),rgba(12,14,19,.88));-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.12),0 40px 90px -30px #000,0 0 80px -40px rgba(127,224,255,.6);
  opacity:0;transform:translateY(16px) scale(.96);transform-origin:bottom left;transition:opacity .28s,transform .35s cubic-bezier(.2,.8,.2,1)}
.ao-panel.on{opacity:1;transform:none}
.ao-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 0}
.ao-name{display:flex;flex-direction:column;line-height:1.25}
.ao-name b{font:600 15px var(--sans);letter-spacing:-.01em;background:linear-gradient(180deg,#fff,#b8c4d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.ao-name small{font-size:12px;color:var(--muted)}
[data-s=listening] .ao-name small{color:var(--good)}
[data-s=working] .ao-name small,[data-s=thinking] .ao-name small{color:var(--accent)}
[data-s=error] .ao-name small{color:var(--bad)}
.ao-ib{width:32px;height:32px;border-radius:11px;border:0;display:grid;place-items:center;color:var(--soft);cursor:pointer;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.ao-ib:hover{color:#fff;background:rgba(255,255,255,.1)}

.ao-stage{position:relative;display:grid;place-items:center;height:190px}
.ao-stage .ao-bot{position:relative;z-index:1;filter:drop-shadow(0 20px 26px rgba(0,0,0,.55))}
.ao-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.ao-rings i{position:absolute;width:150px;height:150px;border-radius:50%;border:1.5px solid rgba(127,224,255,.0);transform:scale(calc(1 + var(--mic,0) * .5))}
[data-s=listening] .ao-rings i{border-color:rgba(62,207,142,.35);animation:ao-ring 2.4s ease-out infinite}
[data-s=speaking] .ao-rings i{border-color:rgba(127,224,255,.4);animation:ao-ring 1.6s ease-out infinite}
[data-s=working] .ao-rings i{border-color:rgba(217,119,87,.45);animation:ao-ring 1.2s ease-out infinite}
.ao-rings i:nth-child(2){animation-delay:.6s!important}.ao-rings i:nth-child(3){animation-delay:1.2s!important}
@keyframes ao-ring{from{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.7)}}
.ao-stage::after{content:"";position:absolute;bottom:14px;width:110px;height:16px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.6),transparent 70%)}

.ao-caps{flex:1;min-height:70px;max-height:200px;overflow:auto;padding:4px 16px 8px;display:grid;gap:8px;align-content:start;scrollbar-width:none}
.ao-hint{font-size:13px;color:var(--muted);line-height:1.5;text-align:center;padding:4px 6px}
.ao-line{display:grid;gap:2px;font-size:14px;line-height:1.45;animation:ao-in .25s both}
.ao-line b{font:600 10.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ao-line.bot span{color:#e8f6ff}
.ao-line.you{justify-items:end;text-align:right}
.ao-line.you span{color:var(--soft)}
@keyframes ao-in{from{opacity:0;transform:translateY(6px)}}
.ao-acts{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px;min-height:8px}
.ao-act{font-size:11.5px;padding:3px 9px;border-radius:99px;color:var(--soft);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);animation:ao-in .25s both}
.ao-act.ok{color:var(--good);background:var(--goodbg)}
.ao-act.warn{color:#ffb79a;background:rgba(217,119,87,.14)}

.ao-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 16px 18px}
.ao-btn{width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(255,255,255,.1),0 10px 20px -10px #000;transition:transform .15s}
.ao-btn:active{transform:scale(.93)}
.ao-btn.on{color:var(--bad);background:rgba(255,95,87,.16)}
.ao-btn.go{width:auto;padding:0 22px;border-radius:99px;display:flex;gap:8px;font:600 14px var(--sans);color:#06110c;
  background:linear-gradient(180deg,#6ff0b2,#2fbf7a);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 26px -10px rgba(62,207,142,.8)}
.ao-btn.go.live{color:#fff;background:linear-gradient(180deg,#ec8c6b,#d06a49);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 26px -10px rgba(217,119,87,.8)}

@media (max-width:820px){
  .ao-dock{left:12px;bottom:calc(92px + env(safe-area-inset-bottom))}
  .ao-dock .ao-bot{width:50px;height:50px}
  .ao-panel{left:8px;right:8px;width:auto;bottom:calc(88px + env(safe-area-inset-bottom));max-height:calc(100vh - 150px)}
  .ao-stage{height:160px}.ao-stage .ao-bot{width:124px;height:124px}
}
@media (prefers-reduced-motion:reduce){.ao-float,.ao-tip,.ao-rings i,.ao-dock::before{animation:none!important}}
/* a closed panel never sits over the robot (display:flex above beat the hidden attribute: taps on the robot hit the
   invisible panel - Harsh, 30 Oct 2026: "koi button hi nahi hai usko chalane ka") */
.ao-panel[hidden]{display:none!important}
.ao-panel:not(.on){pointer-events:none}
.ao-dock-tag{display:flex;align-items:center;gap:5px;color:#06110c;font-weight:700;letter-spacing:.04em;text-transform:none;font-size:11.5px;padding:3px 10px 3px 8px;
  background:linear-gradient(180deg,#6ff0b2,#2fbf7a);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -6px rgba(62,207,142,.8)}
.ao-dock-tag svg{width:12px;height:12px}
/* the robot moves (drag the body) and has its own on/off button under it */
.ao-body{border:0;padding:0;background:none;cursor:grab;touch-action:none;display:block;-webkit-tap-highlight-color:transparent}
.ao-dock.drag{transform:scale(1.08) rotate(-3deg)!important;transition:none}
.ao-dock.drag .ao-body{cursor:grabbing}
.ao-power{display:flex;align-items:center;gap:5px;border:0;cursor:pointer;font:700 11.5px var(--sans);letter-spacing:.02em;padding:4px 11px 4px 8px;border-radius:99px;color:#06110c;
  background:linear-gradient(180deg,#6ff0b2,#2fbf7a);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -6px rgba(62,207,142,.8);transition:transform .15s}
.ao-power:active{transform:scale(.94)}
.ao-power svg{width:12px;height:12px}
.ao-power.live{color:#fff;background:linear-gradient(180deg,#ff8a7a,#e0443c);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 16px -6px rgba(255,95,87,.8);animation:ao-live 1.6s ease-in-out infinite}
@keyframes ao-live{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 6px rgba(255,95,87,.18)}}
.ao-btn.go.live{background:linear-gradient(180deg,#ff8a7a,#e0443c);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 26px -10px rgba(255,95,87,.8)}
@media (prefers-reduced-motion:reduce){.ao-power.live{animation:none}}
/* steady and quick (Harsh, 30 Oct 2026: "hatka raha hai ... smooth kar do isko and bahut fast kar do"): the docked robot
   does not hop, tilt or bob; showing and hiding is a short fade; the panel opens in 0.17 s */
.ao-dock,.ao-dock:hover{transform:none!important;transition:opacity .15s ease}
.ao-dock .ao-float{animation:none}
.ao-dock .ao-body{transition:transform .12s ease}
.ao-dock .ao-body:hover{transform:scale(1.06)}
.ao-dock .ao-body:active{transform:scale(.95)}
.ao-dock.hide{opacity:0;pointer-events:none}
.ao-dock::before{inset:4px 4px 26px}
.ao-power{font-size:10.5px;padding:3px 9px 3px 7px}
.ao-panel{transition:opacity .17s ease,transform .17s cubic-bezier(.2,.8,.2,1);transform:translateY(8px) scale(.98)}
.ao-panel.on{transform:none}
.ao-stage{cursor:pointer}
@media (max-width:820px){.ao-dock .ao-bot{width:42px;height:42px}}
.ao-btn.sm{width:38px;height:38px}
.ao-btn.sm svg{width:16px;height:16px}
/* light and smooth (Harsh, 30 Oct 2026: "bada wala version ... bahut atakta hai ... upar jaake atak jaata hai"):
   less blur, no shadow filter on the robot, its own layer, a grab bar to move it, opens with a quick fade */
.ao-panel{width:340px;max-height:calc(100vh - 76px);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  contain:layout paint;will-change:opacity,transform;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.12),0 30px 60px -24px #000}
.ao-panel.drag{transition:none;user-select:none}
.ao-top{cursor:grab;touch-action:none;position:relative;padding-top:18px}
.ao-panel.drag .ao-top{cursor:grabbing}
.ao-top::before{content:"";position:absolute;left:50%;top:7px;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:rgba(255,255,255,.22)}
.ao-stage{height:168px}
.ao-stage .ao-bot{width:132px;height:132px;filter:none}
.ao-stage::after{bottom:10px}
.ao-ib{width:34px;height:34px}
@media (max-width:820px){.ao-top{cursor:default}.ao-top::before{display:none}.ao-panel{width:auto}}

/* the number check (31 Oct 2026): a number Hiku said that is not in the desk's data */
.ao-chk{display:inline-block;margin-left:6px;padding:0 6px;border-radius:6px;font:600 10px/1.6 var(--sans);font-style:normal;letter-spacing:.04em;text-transform:uppercase;
  color:#1a1206;background:#f0b44c;vertical-align:1px;cursor:help}
.ao-wrong{margin-left:6px;padding:0 7px;border:0;border-radius:6px;font:600 10px/1.7 var(--sans);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  color:var(--soft);background:rgba(255,255,255,.07);opacity:.55;transition:opacity .15s,background .15s}
.ao-line:hover .ao-wrong{opacity:1}.ao-wrong:hover{background:rgba(255,95,87,.25);color:#fff}.ao-wrong:disabled{opacity:.8;background:rgba(62,207,142,.2);cursor:default}