/* HASIL WD REFERRAL banner in the chat header (desktop stage = 1536px wide). */
@property --wdc-a{syntax:'<angle>';initial-value:0deg;inherits:false}
.wdc{--g:#e9c77b;--g2:#b8893a;--v:#a874ff;--ok:#52e3a4;position:absolute;left:250px;top:9px;width:360px;height:48px;z-index:5;box-sizing:border-box;
 display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:10px;overflow:hidden;color:#fff;text-decoration:none;
 background:linear-gradient(135deg,#140c2c,#24123f);border:1px solid rgba(233,199,123,.55);box-shadow:0 0 16px rgba(168,116,255,.45);animation:wdcIn .8s cubic-bezier(.2,.8,.2,1) both}
.wdc[hidden]{display:none}
.wdc::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--wdc-a),transparent 0 70%,var(--g) 80%,var(--v) 90%,transparent);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:wdcSpin 4s linear infinite}
.wdc::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);transform:translateX(-100%);animation:wdcSweep 3.2s ease-in-out infinite}
.wdc-coin{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:800 15px Georgia,serif;color:#3a2507;
 background:radial-gradient(circle at 35% 30%,#fff3c4,var(--g) 45%,var(--g2));box-shadow:0 0 10px rgba(233,199,123,.6);animation:wdcBob 2.4s ease-in-out infinite}
.wdc-txt{flex:1;min-width:0;height:100%;position:relative}
.wdc-line{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(60%);animation:wdcRot 12s infinite}
.wdc-line:nth-child(2){animation-delay:3s}.wdc-line:nth-child(3){animation-delay:6s}.wdc-line:nth-child(4){animation-delay:9s}
.wdc-k{font-size:9px;letter-spacing:.25em;color:var(--g);display:flex;align-items:center;gap:6px;white-space:nowrap}
.wdc-k i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:wdcPing 1.6s infinite}
.wdc-v{font:700 18px/1.15 Georgia,serif;white-space:nowrap;background:linear-gradient(90deg,#fff,var(--g),#fff);background-size:200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wdcShine 3s linear infinite}
.wdc-v b{font:inherit}
.wdc-v.wa{font:800 13px Arial,sans-serif;letter-spacing:.06em;-webkit-text-fill-color:#b8ffd9;color:#b8ffd9}
.wdc-arrow{flex:0 0 auto;font-size:20px;color:var(--g);animation:wdcNudge 1s ease-in-out infinite}
.topbar.has-wdc .tagline{display:none}
@keyframes wdcRot{0%{opacity:0;transform:translateY(60%)}4%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-60%)}}
@keyframes wdcSpin{to{--wdc-a:360deg}}@keyframes wdcSweep{60%,100%{transform:translateX(100%)}}@keyframes wdcShine{to{background-position:-200%}}
@keyframes wdcPing{0%{box-shadow:0 0 0 0 var(--ok)}70%{box-shadow:0 0 0 7px transparent}}@keyframes wdcNudge{50%{transform:translateX(4px)}}
@keyframes wdcBob{50%{transform:translateY(-3px) scale(1.06);box-shadow:0 0 14px rgba(233,199,123,.9)}}@keyframes wdcIn{from{opacity:0;transform:translateY(-8px)}}
/* Mobile: banner takes the logo spot, bell + avatar stay. */
@media (max-width:768px){.wdc{left:8px;top:7px;width:calc(100% - 120px);height:46px}.topbar.has-wdc .brand{display:none}}
@media (prefers-reduced-motion:reduce){.wdc,.wdc *,.wdc::before,.wdc::after{animation:none!important}.wdc-line:first-child{opacity:1;transform:none}}