/* Credit-gift announcement: a corner toast and a claim dialog. Fixed dark palette, independent of the chat theme. */
.ttp-toast,.ttp-mask{font:13px/1.4 system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
.ttp-toast{position:fixed;left:16px;bottom:76px;z-index:2147482000;width:292px;box-sizing:border-box;padding:14px 16px 13px;border-radius:12px;color:#e6e8ec;
  background:radial-gradient(90% 120% at 100% 100%,rgba(60,90,150,.16) 0,transparent 65%),linear-gradient(135deg,#0a0a0a 0,#0e0f12 60%,#111319 100%);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 28px rgba(0,0,0,.55);animation:ttp-in .28s cubic-bezier(.2,.8,.2,1)}
.ttp-toast.ttp-out{animation:ttp-out .18s ease forwards}
.ttp-brand{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#9ba1ab}
.ttp-brand b{color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em}
.ttp-logo{width:17px;height:17px;border-radius:4px;background:#fff;color:#000;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;flex:none}
.ttp-x{position:absolute;top:11px;right:11px;width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:#7d8490;cursor:pointer;font-size:14px;line-height:20px;padding:0}
.ttp-x:hover{background:rgba(255,255,255,.1);color:#fff}
.ttp-amount{margin:11px 0 8px;display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.ttp-amount b{font-size:19px;line-height:1.15;font-weight:800;color:#fff}
.ttp-amount span{font-size:11px;color:#9ba1ab;font-weight:700}
.ttp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#9ba1ab;font-size:12.5px}
.ttp-row i{font-style:normal;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ttp-pill{flex:none;height:22px;padding:0 12px;border-radius:11px;border:1.5px solid #f2f4f7;background:transparent;color:#fff;font-size:12px;cursor:pointer}
.ttp-pill:hover:not(:disabled){background:#fff;color:#000}
.ttp-pill:disabled{opacity:.6;cursor:default}
.ttp-err{margin-top:8px;color:#ff9b8f;font-size:12px}

.ttp-mask{position:fixed;inset:0;z-index:2147482500;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);animation:ttp-fade .2s ease;font-size:14px;line-height:1.5}
.ttp-dialog{position:relative;width:min(440px,calc(100vw - 32px));border-radius:20px;overflow:hidden;background:#1c1c1c;color:#e6e6e6;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 70px rgba(0,0,0,.7);animation:ttp-pop .26s cubic-bezier(.2,.8,.2,1)}
.ttp-sky{position:relative;perspective:1100px;height:340px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(36% 32% at 76% 28%,rgba(120,160,235,.3),transparent 72%),radial-gradient(110% 95% at 50% 52%,#0c1a3b 0,#080f22 50%,#050709 100%)}
.ttp-sky:before{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 30% 72%,#bcd2ff,transparent),radial-gradient(1.5px 1.5px at 64% 12%,#fff,transparent),radial-gradient(1px 1px at 84% 64%,#bcd2ff,transparent),radial-gradient(1px 1px at 46% 86%,#fff,transparent),radial-gradient(1px 1px at 92% 34%,#fff,transparent),radial-gradient(1px 1px at 6% 82%,#fff,transparent),radial-gradient(1px 1px at 55% 30%,#8fb2ff,transparent)}
.ttp-sky:after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(32deg,transparent 49.4%,rgba(255,255,255,.55) 50%,transparent 50.6%) 8% 12%/70px 56px no-repeat,
  linear-gradient(-28deg,transparent 49.4%,rgba(255,255,255,.4) 50%,transparent 50.6%) 0 86%/60px 40px no-repeat,
  linear-gradient(-32deg,transparent 49.4%,rgba(255,255,255,.35) 50%,transparent 50.6%) 94% 88%/36px 24px no-repeat}
.ttp-dialog .ttp-x{top:14px;right:14px;width:30px;height:30px;line-height:30px;font-size:16px;background:rgba(0,0,0,.55);color:#fff;z-index:2}
.ttp-replay{position:absolute;top:14px;left:14px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#d6def0;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:2}
.ttp-replay:hover{background:rgba(255,255,255,.12)}
.ttp-replay svg{width:14px;height:14px}
.ttp-ticket{position:relative;z-index:1;width:336px;box-sizing:border-box;padding:18px 20px 16px;border-radius:14px;color:#111;
  background:linear-gradient(100deg,#fff 0,#fff 42%,#e3eeff 72%,#c6dcff 100%);transform:rotate(-2.5deg);animation:ttp-drop 1s cubic-bezier(.22,.8,.25,1) both;
  -webkit-mask:radial-gradient(circle 11px at 0 120px,transparent 97%,#000 100%),radial-gradient(circle 11px at 100% 120px,transparent 97%,#000 100%);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle 11px at 0 120px,transparent 97%,#000 100%),radial-gradient(circle 11px at 100% 120px,transparent 97%,#000 100%);mask-composite:intersect}
.ttp-tk-head{display:flex;justify-content:space-between;align-items:center}
.ttp-tk-head span{color:#3d8bfd;font-size:10.5px;font-weight:700;letter-spacing:.07em}
.ttp-tk-head .ttp-logo{background:#111;color:#fff;width:18px;height:18px}
.ttp-tk-head .ttp-brandtxt{display:flex;align-items:center;gap:7px;color:#111;font-size:12.5px;font-weight:700}
.ttp-tk-amount{margin:22px 0 8px;font-size:26px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.ttp-tk-amount small{font-size:11px;font-weight:600;color:#555;margin-left:6px}
.ttp-tk-sub{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#4f6f9f;min-height:18px}
.ttp-tk-sub svg{width:13px;height:13px;flex:none;color:#3d8bfd}
.ttp-tk-line{margin:22px 0 14px;border-top:2px dashed rgba(70,90,130,.28)}
.ttp-tk-foot{text-align:center;font-size:12px;color:#666;font-variant-numeric:tabular-nums}
.ttp-tk-foot b{color:#222;font-weight:700}
.ttp-body{padding:30px 28px 32px;text-align:center}
.ttp-body h3{margin:0 0 10px;font-size:16.5px;font-weight:700;color:#e4e4e4}
.ttp-body p{margin:0 0 24px;color:#a6a6a6;font-size:13.5px}
.ttp-body p b{color:#fff;font-weight:700}
.ttp-btns{display:flex;justify-content:center;gap:12px}
.ttp-btn{min-width:126px;height:40px;padding:0 20px;border:0;border-radius:20px;font-size:14px;cursor:pointer;background:#333;color:#e6e6e6}
.ttp-btn:hover{background:#3d3d3d}
.ttp-btn.ttp-primary{background:#fff;color:#000;font-weight:600}
.ttp-btn.ttp-primary:hover{background:#ececec}
.ttp-btn:disabled{opacity:.6;cursor:default}
@keyframes ttp-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ttp-out{to{opacity:0;transform:translateY(6px)}}
@keyframes ttp-fade{from{opacity:0}to{opacity:1}}
@keyframes ttp-pop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
@keyframes ttp-drop{0%{opacity:0;transform:translateY(-40px) scale(.7) rotateX(540deg) rotate(-2.5deg)}35%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1) rotateX(0) rotate(-2.5deg)}}
.ttp-fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ttp-toast,.ttp-mask,.ttp-dialog,.ttp-ticket{animation:none}.ttp-fx{display:none}}
@media (max-width:640px){.ttp-toast{left:12px;right:12px;width:auto;bottom:72px}.ttp-sky{height:260px}.ttp-ticket{width:min(320px,calc(100% - 32px))}}

/* Light theme: a separate treatment (soft sky card, dark ticket), not an inverted copy of the dark one. */
.ttp-toast.ttp-light{color:#1f2430;background:radial-gradient(80% 120% at 100% 0,rgba(120,170,255,.28) 0,transparent 62%),linear-gradient(135deg,#ffffff 0,#f4f8ff 100%);border:1px solid rgba(40,70,130,.14);box-shadow:0 10px 30px rgba(40,70,130,.18)}
.ttp-light .ttp-brand{color:#6b7385}
.ttp-light .ttp-brand b{color:#10131a}
.ttp-light .ttp-logo{background:#10131a;color:#fff}
.ttp-light .ttp-x{color:#8a92a3}
.ttp-light .ttp-x:hover{background:rgba(20,30,60,.08);color:#10131a}
.ttp-light .ttp-amount b{color:#10131a}
.ttp-light .ttp-amount span,.ttp-light .ttp-row{color:#6b7385}
.ttp-light .ttp-pill{border:0;background:#10131a;color:#fff;height:24px;padding:0 14px}
.ttp-light .ttp-pill:hover:not(:disabled){background:#2a3040;color:#fff}
.ttp-light .ttp-err{color:#d33b2b}
.ttp-mask.ttp-light{background:rgba(30,40,70,.28)}
.ttp-light .ttp-dialog{background:#fff;color:#1f2430;border:0;box-shadow:0 24px 70px rgba(40,70,130,.3)}
.ttp-light .ttp-sky{background:radial-gradient(40% 36% at 78% 26%,rgba(255,255,255,.95),transparent 72%),radial-gradient(60% 50% at 14% 84%,rgba(255,255,255,.6),transparent 70%),linear-gradient(160deg,#cfe0ff 0,#e4eeff 55%,#f3f7ff 100%)}
.ttp-light .ttp-sky:before{background-image:radial-gradient(2px 2px at 14% 24%,#fff,transparent),radial-gradient(3px 3px at 82% 70%,#fff,transparent),radial-gradient(2px 2px at 66% 14%,#fff,transparent),radial-gradient(2px 2px at 30% 74%,#fff,transparent),radial-gradient(2px 2px at 92% 36%,#fff,transparent);opacity:.9}
.ttp-light .ttp-sky:after{display:none}
.ttp-light .ttp-dialog .ttp-x{background:rgba(255,255,255,.85);color:#10131a}
.ttp-light .ttp-replay{color:#4b5a7a}
.ttp-light .ttp-replay:hover{background:rgba(255,255,255,.7)}
.ttp-light .ttp-ticket{color:#fff;background:linear-gradient(120deg,#12151d 0,#1a2030 60%,#26365e 100%);box-shadow:none}
.ttp-light .ttp-tk-head .ttp-brandtxt{color:#fff}
.ttp-light .ttp-tk-head .ttp-logo{background:#fff;color:#10131a}
.ttp-light .ttp-tk-head span{color:#7fb0ff}
.ttp-light .ttp-tk-amount small{color:#a9b3c8}
.ttp-light .ttp-tk-sub{color:#b8c6e6}
.ttp-light .ttp-tk-sub svg{color:#7fb0ff}
.ttp-light .ttp-tk-line{border-top-color:rgba(255,255,255,.22)}
.ttp-light .ttp-tk-foot{color:#a9b3c8}
.ttp-light .ttp-tk-foot b{color:#fff}
.ttp-light .ttp-body h3{color:#10131a}
.ttp-light .ttp-body p{color:#6b7385}
.ttp-light .ttp-body p b{color:#10131a}
.ttp-light .ttp-btn{background:#eef1f6;color:#1f2430}
.ttp-light .ttp-btn:hover{background:#e2e7f0}
.ttp-light .ttp-btn.ttp-primary{background:#10131a;color:#fff}
.ttp-light .ttp-btn.ttp-primary:hover{background:#2a3040}
/* Reminder toast (same card as the gift toast, text instead of a figure). */
.ttp-headline{margin:11px 0 4px;font-size:14px;font-weight:700;color:#fff;line-height:1.35}
.ttp-note{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:#9ba1ab}
.ttp-light .ttp-headline{color:#10131a}
.ttp-light .ttp-note{color:#6b7385}