/* ═══════════════════════════════════════════════
   chaos.css — floaters, wires, ads, survey
   ═══════════════════════════════════════════════ */

.layer-floaters{position:absolute;inset:0;z-index:120;pointer-events:none}
.layer-wires{position:absolute;inset:0;z-index:118;pointer-events:none}
.layer-wires svg{position:absolute;inset:0;width:100%;height:100%}
.layer-ads{position:absolute;inset:0;z-index:150;pointer-events:none}
.layer-ads > *,.layer-floaters > *{pointer-events:auto}

/* ═══════════ FLOATING BUTTONS ═══════════ */
.floater{
  position:absolute;left:0;top:0;
  transform:translate3d(var(--x),var(--y),0) rotate(var(--r,0deg)) scale(var(--s,1));
  will-change:transform;
  padding:9px clamp(12px,3.4vw,20px);min-height:40px;
  display:flex;align-items:center;gap:6px;
  border-radius:12px;white-space:nowrap;
  font-size:clamp(11px,3vw,14.5px);font-weight:800;
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.floater.dim{opacity:.55;filter:saturate(.5)}

.floater.green{
  color:#04160c;
  background:linear-gradient(180deg,#63ffae,#0fae59);
  box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 6px 20px rgba(0,0,0,.55),
             0 0 26px rgba(49,255,143,.55);
  animation:glowGreen 1.8s ease-in-out infinite;
}
.floater.red{
  color:#fff;
  background:linear-gradient(180deg,#ff5a68,#a30414);
  box-shadow:0 0 0 1px rgba(255,255,255,.24) inset,0 6px 20px rgba(0,0,0,.55),
             0 0 26px rgba(255,45,63,.6);
  animation:glowRed 1.15s ease-in-out infinite;
}
@keyframes glowGreen{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 6px 20px rgba(0,0,0,.55),0 0 20px rgba(49,255,143,.4)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 6px 20px rgba(0,0,0,.55),0 0 46px rgba(49,255,143,.85)}}
@keyframes glowRed{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.24) inset,0 6px 20px rgba(0,0,0,.55),0 0 18px rgba(255,45,63,.45)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.34) inset,0 6px 20px rgba(0,0,0,.55),0 0 52px rgba(255,45,63,.95)}}

.floater.jitter{animation-name:glowRed,jitterFx;animation-duration:1.15s,.22s;animation-iteration-count:infinite,infinite}
@keyframes jitterFx{0%,100%{filter:none}33%{filter:hue-rotate(20deg) contrast(1.3)}66%{filter:blur(.6px)}}

.floater::after{ /* afterimage */
  content:attr(data-label);position:absolute;inset:9px 16px;opacity:0;color:#fff;
  mix-blend-mode:difference;pointer-events:none;
}
.floater.ghosty::after{opacity:.6;animation:ghostShift .5s steps(2) infinite}
@keyframes ghostShift{0%{transform:translate(0,0)}50%{transform:translate(3px,-2px)}100%{transform:translate(-2px,1px)}}

.floater:active{transform:translate3d(var(--x),var(--y),0) scale(.9)}

/* download button variant */
.floater.dl{
  padding-inline:14px;
  background:linear-gradient(180deg,#7dffbf,#06a852 60%,#04853f);
  color:#03170c;border-color:rgba(255,255,255,.5);
}
.floater.dl .dl-ic{
  width:20px;height:20px;border-radius:6px;background:rgba(0,0,0,.22);
  display:grid;place-items:center;font-size:13px;color:#eafff3;
}
.floater.dl .dl-sub{font-size:9px;opacity:.75;font-weight:600}
.floater.dl .dl-txt{display:flex;flex-direction:column;line-height:1.15;align-items:flex-start}

/* wire-hung button */
.hanger{
  position:absolute;left:0;top:0;
  transform:translate3d(var(--x),var(--y),0) rotate(var(--r,0deg));
  transform-origin:50% -8px;will-change:transform;
  pointer-events:auto;
}
.hanger .clip{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:14px;height:12px;border-radius:3px;
  background:linear-gradient(180deg,#c3ced8,#6d7986);
  box-shadow:0 2px 4px rgba(0,0,0,.6);
}
.wire-path{fill:none;stroke:#3a444f;stroke-width:2.2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.wire-path.hot{stroke:#5b6b58;animation:wireSpark 3.4s infinite}
@keyframes wireSpark{0%,94%,100%{stroke:#3a444f}95%{stroke:#9dffca}97%{stroke:#3a444f}98%{stroke:#ffd36e}}

/* fake download progress popup */
.dl-modal{
  position:absolute;z-index:170;pointer-events:auto;
  width:min(84vw,320px);padding:14px;border-radius:14px;
  background:linear-gradient(180deg,#101820,#080c11);
  border:1px solid rgba(49,255,143,.35);
  box-shadow:0 22px 60px rgba(0,0,0,.7),0 0 40px rgba(49,255,143,.16);
  animation:popIn .3s cubic-bezier(.2,1.4,.4,1);
}
@keyframes popIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.dl-modal h4{font-size:13.5px;margin-bottom:4px;color:#bff5d6}
.dl-modal .sub{font-size:10.5px;color:var(--muted);margin-bottom:10px}
.dl-modal .bar{height:9px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.dl-modal .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0a7a3d,#31ff8f);
  box-shadow:0 0 12px rgba(49,255,143,.6);transition:width .3s}
.dl-modal .pct{margin-top:6px;font-size:11px;color:#8bffc4;text-align:left;direction:ltr}

/* ═══════════ ADS ═══════════ */
.ad{
  position:absolute;left:0;top:0;
  transform:translate3d(var(--x),var(--y),0) rotate(var(--r,0deg));
  width:var(--w,260px);
  border-radius:12px;overflow:hidden;
  background:#0d141c;color:#dfe8ef;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 48px rgba(0,0,0,.72);
  animation:adIn .38s cubic-bezier(.2,1.3,.4,1);
  will-change:transform;
}
@keyframes adIn{from{opacity:0;transform:translate3d(var(--x),var(--y),0) scale(.8) rotate(var(--r,0deg))}}
.ad.closing{animation:adOut .26s ease-in forwards}
@keyframes adOut{to{opacity:0;transform:translate3d(var(--x),var(--y),0) scale(.85)}}
.ad.wobble{animation:adIn .38s cubic-bezier(.2,1.3,.4,1),adWobble 4.5s ease-in-out .4s infinite}
@keyframes adWobble{0%,100%{margin-top:0}50%{margin-top:-10px}}

.ad-bar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:5px 6px 5px 5px;font-size:9.5px;color:#8b98a6;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);
}
.ad-tag{padding:1px 7px;border-radius:99px;background:rgba(255,196,77,.14);
  color:var(--amber);border:1px solid rgba(255,196,77,.3);font-weight:700;font-size:9px}
.ad-x{
  width:30px;height:30px;min-width:30px;display:grid;place-items:center;
  border-radius:8px;font-size:15px;line-height:1;color:#cfd9e2;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  transition:background .15s,transform .12s;
}
.ad-x:active{transform:scale(.88)}
@media(hover:hover){.ad-x:hover{background:rgba(255,45,63,.3);color:#fff}}
@media (pointer:coarse){.ad-x{width:38px;height:38px;min-width:38px;font-size:17px}}

.ad-body{padding:12px;cursor:pointer}
.ad-body h3{font-size:clamp(13px,3.6vw,16px);margin-bottom:5px;line-height:1.35}
.ad-body p{font-size:clamp(10.5px,2.8vw,12px);color:#9fadba;line-height:1.6}
.ad-cta{
  margin-top:10px;display:block;width:100%;padding:9px;border-radius:10px;
  font-weight:800;font-size:clamp(11.5px,3.1vw,13.5px);text-align:center;
}
.ad-foot{padding:4px 10px 7px;font-size:8.5px;color:#5d6a76;text-align:center}

/* generic */
.ad.plain .ad-cta{background:linear-gradient(180deg,#5ad0ff,#0d7fbf);color:#03151f}

/* zahhh */
.ad.zahhh{
  background:linear-gradient(150deg,#2a0d4a,#0d0a1f 60%);
  border-color:rgba(190,120,255,.45);
  box-shadow:0 18px 48px rgba(0,0,0,.7),0 0 44px rgba(170,80,255,.3);
}
.ad.zahhh h3{color:#f0d9ff;text-shadow:0 0 18px rgba(200,120,255,.6)}
.ad.zahhh .claim{
  direction:ltr;display:block;margin:8px 0 2px;font-size:clamp(14px,4vw,19px);font-weight:900;
  background:linear-gradient(90deg,#ffd86e,#ff6ec7,#7de8ff,#ffd86e);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 2.6s linear infinite;text-align:center;
}
@keyframes shine{to{background-position:300% 0}}
.ad.zahhh .ad-cta{background:linear-gradient(180deg,#e07bff,#7a19c9);color:#fff;
  box-shadow:0 0 26px rgba(190,80,255,.5);animation:ctaPulse 1.3s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.ad.zahhh .sparkles{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.5) 0 1px,transparent 2px),
             radial-gradient(circle at 70% 20%,rgba(255,255,255,.4) 0 1px,transparent 2px),
             radial-gradient(circle at 45% 80%,rgba(255,255,255,.45) 0 1px,transparent 2px);
  animation:twinkle 1.8s steps(2) infinite}
@keyframes twinkle{50%{opacity:.2}}

/* security warning */
.ad.warn{
  background:repeating-linear-gradient(45deg,#1a0a00 0 14px,#241000 14px 28px);
  border:2px solid #ffb400;
  box-shadow:0 18px 48px rgba(0,0,0,.7),0 0 48px rgba(255,60,0,.45);
  animation:adIn .38s cubic-bezier(.2,1.3,.4,1),sirenBorder .55s steps(2) infinite;
}
@keyframes sirenBorder{0%{border-color:#ffb400;box-shadow:0 18px 48px rgba(0,0,0,.7),0 0 40px rgba(255,180,0,.5)}
  50%{border-color:#ff2d3f;box-shadow:0 18px 48px rgba(0,0,0,.7),0 0 62px rgba(255,45,63,.75)}}
.ad.warn .ad-body{background:rgba(0,0,0,.35)}
.ad.warn h3{direction:ltr;text-align:left;color:#ffde8a;font-size:clamp(12px,3.4vw,15px);
  text-shadow:0 0 14px rgba(255,120,0,.7)}
.ad.warn .siren{font-size:26px;text-align:center;animation:sirenSpin .8s steps(8) infinite}
@keyframes sirenSpin{to{filter:hue-rotate(360deg)}}
.ad.warn .ad-cta{background:linear-gradient(180deg,#ffcf4d,#e0570b);color:#2a0c00}
.ad.warn .fake-ribbon{
  background:rgba(255,180,0,.16);color:#ffd98a;border:1px dashed rgba(255,180,0,.5);
  font-size:9px;padding:2px 8px;border-radius:6px;margin-top:8px;text-align:center;
}

/* antivirus */
.ad.av{
  background:linear-gradient(160deg,#04212e,#010a10);
  border-color:rgba(0,220,255,.4);
  box-shadow:0 18px 48px rgba(0,0,0,.7),0 0 40px rgba(0,200,255,.28);
}
.ad.av .shield{font-size:30px;text-align:center;filter:drop-shadow(0 0 12px rgba(0,220,255,.8));
  animation:shieldBob 2.2s ease-in-out infinite}
@keyframes shieldBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.ad.av h3{direction:ltr;text-align:center;color:#a9f4ff}
.ad.av .scanline{height:2px;background:linear-gradient(90deg,transparent,#00e5ff,transparent);
  margin:8px 0;animation:scanMove 1.6s ease-in-out infinite}
@keyframes scanMove{0%,100%{opacity:.3;transform:scaleX(.4)}50%{opacity:1;transform:scaleX(1)}}
.ad.av .ad-cta{background:linear-gradient(180deg,#5ef0ff,#0090c4);color:#001b25}
.ad.av .threats{font-size:10px;color:#ff8b95;text-align:center;margin-top:6px}

/* fake chat */
.ad.chat{background:linear-gradient(180deg,#131b25,#0a0e14);border-color:rgba(255,255,255,.2)}
.ad.chat .avatar{width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#4a5a6a,#0d1319);float:right;margin-left:9px;
  box-shadow:0 0 0 2px rgba(49,255,143,.5)}
.ad.chat .msg{font-size:12px;background:rgba(255,255,255,.06);padding:8px 10px;
  border-radius:12px 12px 12px 3px;margin-bottom:6px}
.ad.chat .typing{font-size:10px;color:var(--bile-green)}

/* fake system dialog */
.ad.sys{background:#101820;border-color:#39434e;border-radius:8px}
.ad.sys .ad-bar{background:linear-gradient(180deg,#2b3742,#1a222b);color:#cbd6e0;font-size:11px;padding:7px 8px}
.ad.sys .ad-body{display:flex;gap:10px;align-items:flex-start}
.ad.sys .icon{font-size:26px}

@media (max-width:420px){
  .ad{width:var(--w-m,min(80vw,250px))!important}
}

/* ═══════════ FAKE VIDEO WINDOW ═══════════ */
.layer-windows{position:absolute;inset:0;z-index:160;pointer-events:none}
.layer-windows > *{pointer-events:auto}

.vidwin{
  position:absolute;left:0;top:0;
  transform:translate3d(var(--x),var(--y),0) rotate(var(--r,0deg));
  width:var(--w,300px);
  border-radius:10px;overflow:hidden;
  background:#0a0f14;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 26px 70px rgba(0,0,0,.8),0 0 44px rgba(49,255,143,.14);
  animation:popIn .34s cubic-bezier(.2,1.3,.4,1);
  will-change:transform;
}
.vidwin .vw-bar{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:5px 6px;font-size:10px;color:#9fadba;
  background:linear-gradient(180deg,#22303c,#131b23);
  border-bottom:1px solid rgba(255,255,255,.09);
  cursor:move;touch-action:none;
}
.vidwin .vw-title{display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vidwin .vw-live{
  width:6px;height:6px;border-radius:50%;background:#ff2d3f;
  box-shadow:0 0 8px #ff2d3f;animation:liveBlink 1.1s steps(2) infinite;flex:none;
}
@keyframes liveBlink{50%{opacity:.25}}
/* deliberately, uselessly tiny close button */
.vidwin .vw-x{
  width:9px;height:9px;min-width:9px;padding:0;flex:none;
  display:grid;place-items:center;
  font-size:6px;line-height:1;color:#8d99a5;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:2px;transition:transform .1s;
}
.vidwin .vw-x:active{transform:scale(.8)}
.vidwin video{display:block;width:100%;height:auto;background:#000}
.vidwin .vw-foot{
  padding:6px 8px;font-size:9px;color:#7f8c99;display:flex;justify-content:space-between;gap:6px;
  background:rgba(255,255,255,.03);
}
.vidwin .vw-cta{
  display:block;margin:0;padding:8px;text-align:center;font-weight:800;font-size:12px;
  color:#03170c;background:linear-gradient(180deg,#7dffbf,#06a852);
  box-shadow:0 0 22px rgba(49,255,143,.35) inset;
}
.vidwin.shaking{animation:vwShake .32s}
@keyframes vwShake{0%,100%{margin:0}25%{margin:0 -8px}75%{margin:0 8px}}

/* ═══════════ SURVEY ═══════════ */
.survey-root{
  position:fixed;inset:0;z-index:400;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(30,8,50,.86),rgba(0,0,0,.95));
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  animation:fadeIn .3s;
}
.survey-root[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}}

.survey-card{
  position:relative;width:min(94vw,520px);max-height:min(88vh,720px);
  display:flex;flex-direction:column;
  background:linear-gradient(165deg,#1c0b30,#0a0714 65%);
  border:1px solid rgba(190,120,255,.4);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.8),0 0 70px rgba(160,60,255,.24);
  animation:popIn .35s cubic-bezier(.2,1.3,.4,1);
}
.survey-head{padding:14px 16px 10px;border-bottom:1px solid rgba(255,255,255,.09);position:relative}
.survey-head .brand{
  direction:ltr;font-size:clamp(15px,4.2vw,20px);font-weight:900;text-align:center;
  background:linear-gradient(90deg,#ffd86e,#ff6ec7,#7de8ff,#ffd86e);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 2.6s linear infinite;
}
.survey-head .sec{font-size:11px;color:#c4a6e0;text-align:center;margin-top:4px}
.survey-x{
  position:absolute;top:8px;left:8px;
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  font-size:18px;color:#ffd6ee;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);transition:transform .35s cubic-bezier(.3,1.4,.4,1),background .2s;
}
.survey-x:active{transform:scale(.9)}
@media(hover:hover){.survey-x:hover{background:rgba(255,45,63,.35)}}

.survey-prog{padding:10px 16px 0}
.survey-prog .bar{height:9px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.survey-prog .bar i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,#7a19c9,#e07bff,#ffd86e);
  box-shadow:0 0 16px rgba(224,123,255,.6);transition:width .5s cubic-bezier(.3,.9,.3,1)}
.survey-prog .meta{display:flex;justify-content:space-between;font-size:10.5px;color:#b79cd2;margin-top:5px}
.survey-prog .meta b{color:#ffd86e;font-variant-numeric:tabular-nums}

.survey-body{padding:16px;overflow-y:auto;flex:1}
.survey-q{font-size:clamp(13.5px,3.8vw,17px);font-weight:800;margin-bottom:14px;line-height:1.6;color:#f3e6ff}
.survey-q .qn{color:#b98cff;font-size:12px;display:block;margin-bottom:4px}
.survey-opts{display:flex;flex-direction:column;gap:9px}
.survey-opt{
  text-align:right;padding:12px 14px;min-height:46px;border-radius:12px;
  font-size:clamp(12px,3.3vw,14.5px);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  transition:background .16s,transform .12s,border-color .16s;
}
.survey-opt:active{transform:scale(.98)}
@media(hover:hover){.survey-opt:hover{background:rgba(190,120,255,.2);border-color:rgba(190,120,255,.55)}}
.survey-opt.picked{background:rgba(49,255,143,.18);border-color:rgba(49,255,143,.5)}

.survey-input{
  width:100%;padding:12px;border-radius:12px;font-family:inherit;font-size:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:#fff;
}
.survey-next{
  margin-top:14px;width:100%;padding:13px;border-radius:12px;font-weight:800;font-size:14.5px;
  background:linear-gradient(180deg,#e07bff,#7a19c9);color:#fff;
  box-shadow:0 0 26px rgba(190,80,255,.4);
}
.survey-foot{padding:9px 16px calc(11px + env(safe-area-inset-bottom));font-size:9.5px;color:#7c6a90;
  text-align:center;border-top:1px solid rgba(255,255,255,.07)}
.survey-loading{padding:26px;text-align:center;color:#c9b0e4;font-size:13px}
.survey-loading .spin{
  width:34px;height:34px;margin:0 auto 12px;border-radius:50%;
  border:3px solid rgba(255,255,255,.15);border-top-color:#e07bff;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.survey-card.shake{animation:cardShake .4s}
@keyframes cardShake{0%,100%{transform:none}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}

@media (prefers-reduced-motion:reduce){
  .floater.green,.floater.red,.ad.warn,.ad.zahhh .ad-cta,.ad.av .shield{animation:none!important}
}