/* ─────────────────────────────────────────────────────────────
   Nebulo chat decoration, profile popup + profile editor
   Loaded after the inline <style> in index.html so it layers on top.
   ───────────────────────────────────────────────────────────── */

/* ── Small chat decoration ───────────────────────────────────── */
#channel-header{position:relative;background:linear-gradient(180deg,#181824,#13131a)!important}
#channel-header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,153,255,.65) 30%,rgba(167,139,250,.65) 70%,transparent);
  background-size:200% 100%;animation:deco-header-sweep 9s linear infinite;opacity:.8}
#header-icon{filter:drop-shadow(0 0 6px rgba(56,189,248,.45))}
#channel-header-name{letter-spacing:-.01em}

#messages-container{
  background:
    radial-gradient(560px 280px at 100% 0%,rgba(0,153,255,.065),transparent 70%),
    radial-gradient(480px 260px at 0% 100%,rgba(167,139,250,.055),transparent 70%),
    radial-gradient(rgba(255,255,255,.04) 1px,transparent 1.3px) 0 0/24px 24px;
}

.msg-row{border-radius:12px;transition:background .15s ease}
.msg-row:hover{background:linear-gradient(90deg,rgba(255,255,255,.028),transparent 70%)}
.msg-row::before{content:'';position:absolute;left:-6px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#38bdf8,#a78bfa);opacity:0;transform:scaleY(.4);transition:opacity .15s ease,transform .18s ease}
.msg-row:hover::before{opacity:.75;transform:scaleY(1)}

.unread-divider{color:#7dd3fc}
.unread-divider::before{background:linear-gradient(90deg,transparent,rgba(0,153,255,.7))}
.unread-divider::after{background:linear-gradient(90deg,rgba(167,139,250,.7),transparent)}
.unread-divider span{padding:3px 10px;border-radius:999px;border:1px solid rgba(56,189,248,.28);
  background:rgba(14,165,233,.09);box-shadow:0 0 14px rgba(56,189,248,.14)}

.input-wrap{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.input-wrap:focus-within{border-color:rgba(56,189,248,.42)!important;
  box-shadow:0 0 0 3px rgba(56,189,248,.09),0 10px 30px -10px rgba(56,189,248,.28)}
#send-btn{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
#send-btn:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.1);box-shadow:0 6px 18px -4px rgba(0,153,255,.55)}
#send-btn:not(:disabled):active{transform:translateY(0) scale(.96)}

#jump-latest-btn{box-shadow:0 8px 24px -8px rgba(0,153,255,.5),0 0 0 1px rgba(125,211,252,.18)}
#typing-bar:not(:empty){color:#c4b5fd}

.member-item{transition:background .15s ease,transform .15s ease}
.member-item:hover{transform:translateX(2px)}

@keyframes deco-header-sweep{0%{background-position:0% 0}100%{background-position:-200% 0}}

/* ── Profile popup (clicking someone) ────────────────────────── */
@keyframes pc-pop{0%{opacity:0;transform:translateY(14px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes pc-sheen{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(260%) skewX(-18deg)}}
@keyframes pc-rise{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}

.modal-box:has(.profile-card-modal){padding:0;background:transparent;border:0;box-shadow:none;max-width:410px;
  animation:pc-pop .26s cubic-bezier(.2,.9,.3,1.15) both}
.profile-card-modal{--pc-accent:#6366f1;margin:0!important;border-radius:22px;background:#0e0e14;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 28px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03),0 0 60px -30px var(--pc-accent)}
.profile-card-modal.profile-fx-host>.profile-card-banner{border-radius:21px 21px 0 0}
.profile-card-modal.profile-fx-host>.profile-card-main{border-radius:0 0 21px 21px;background:#0e0e14}

.profile-card-banner{height:112px;border-bottom:0;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--pc-accent) 70%,#0b0b12),#12121a 78%)}
.profile-card-banner:not([class*="member-banner-"])::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(260px 120px at 85% 0%,rgba(255,255,255,.16),transparent 70%),
             radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.4px) 0 0/16px 16px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 92%);mask:linear-gradient(180deg,#000,transparent 92%)}
.profile-card-banner:not([class*="member-banner-"])::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(14,14,20,.75));z-index:1}
.profile-card-banner:not([class*="member-banner-"])>.pc-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pc-sheen::after{content:'';position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);animation:pc-sheen 1.5s .25s ease-out both}

.profile-card-close{border-radius:11px;backdrop-filter:blur(8px);background:rgba(0,0,0,.35);z-index:3;transition:transform .15s ease,background .15s ease}
.profile-card-close:hover{transform:rotate(90deg);background:rgba(255,255,255,.14)}

.profile-card-main{padding:0 20px 20px}
.profile-card-avatar{margin-top:-46px;width:92px;height:92px;border-radius:28px;padding:5px;background:#0e0e14;
  box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 0 2px color-mix(in srgb,var(--pc-accent) 55%,transparent);z-index:2}
.profile-card-avatar .msg-avatar{width:82px!important;height:82px!important;border-radius:23px!important;font-size:22px!important}
.profile-card-presence{position:absolute;right:2px;bottom:2px;width:20px;height:20px;border:4px solid #0e0e14;border-radius:50%;z-index:3;box-shadow:0 0 10px rgba(74,222,128,.5)}
.profile-card-presence.status-idle{box-shadow:0 0 10px rgba(251,191,36,.5)}
.profile-card-presence.status-dnd{box-shadow:0 0 10px rgba(248,113,113,.5)}
.profile-card-presence.status-offline{background:#52525b;box-shadow:none}

.profile-card-head{padding-top:12px;animation:pc-rise .3s .08s ease both}
.profile-card-head h3{font-size:23px;letter-spacing:-.02em}
.profile-card-head p{display:flex;align-items:center;gap:5px;margin-top:5px}
.profile-card-head p .material-icons-round{font-size:14px;color:var(--pc-accent);filter:brightness(1.5)}
.profile-card-note{display:flex;align-items:flex-start;gap:7px;margin-top:11px;padding:9px 11px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);color:#c4c4cc;font-size:12px;line-height:1.4}
.profile-card-note .material-icons-round{font-size:15px;color:#71717a;margin-top:1px}
.profile-card-badges{margin-top:10px}

.profile-card-stats{gap:8px;margin-top:16px;animation:pc-rise .3s .14s ease both}
.profile-card-stats>div{position:relative;overflow:hidden;padding:11px 11px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));transition:transform .15s ease,border-color .15s ease}
.profile-card-stats>div:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pc-accent) 55%,transparent)}
.profile-card-stats>div>span{display:flex;align-items:center;gap:4px;font-size:9.5px}
.profile-card-stats>div>span .material-icons-round{font-size:12px;color:#71717a;display:inline-block;margin:0}
.profile-card-stats strong{font-size:13px;font-weight:700}
.profile-card-stats strong>.material-icons-round{display:inline-block;margin:0;text-transform:none;letter-spacing:normal;font-size:14px;line-height:1}
.profile-card-stats strong>span:not(.material-icons-round){display:inline;margin:0;color:inherit;font-size:inherit;letter-spacing:0;text-transform:none}

.profile-card-actions{display:flex!important;flex-direction:column;gap:8px;margin-top:16px;animation:pc-rise .3s .2s ease both}
.pc-actions-main{display:flex;gap:8px}
.pc-actions-main .modal-btn{min-height:42px;border-radius:13px;font-size:13px}
.pc-actions-main .modal-btn-primary{background:linear-gradient(135deg,#0ea5e9,#6366f1);box-shadow:0 8px 22px -8px rgba(99,102,241,.7)}
.pc-actions-main .modal-btn-primary:hover{filter:brightness(1.1)}
.pc-actions-sub{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:7px}
.pc-actions-sub .modal-btn{flex-direction:column;gap:3px;min-height:54px;padding:8px 4px;border-radius:13px;font-size:10.5px;font-weight:600;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);transition:transform .15s ease,background .15s ease,color .15s ease}
.pc-actions-sub .modal-btn:hover{background:rgba(255,255,255,.09);transform:translateY(-2px);color:#fff}
.pc-actions-sub .modal-btn .material-icons-round{font-size:19px}
.profile-card-actions .modal-btn:disabled{opacity:.55;cursor:default}
.pc-actions-sub .modal-btn.pc-danger{color:#f87171}
.pc-actions-sub .modal-btn.pc-danger:hover{background:rgba(248,113,113,.14);color:#fca5a5}
.pc-actions-sub .modal-btn.pc-gold{color:#fbbf24}
.pc-actions-sub .modal-btn.pc-gold:hover{background:rgba(251,191,36,.12);color:#fde68a}

.profile-card-main .ch-public-profile{margin-top:14px;border-radius:14px}

@media(max-width:560px){
  .profile-card-modal .profile-card-actions{display:flex!important}
  .profile-card-modal .pc-actions-sub{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-card-modal .profile-card-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px}
  .profile-card-modal .profile-card-stats>div{padding:9px 7px}
  .profile-card-modal .profile-card-stats strong{font-size:11px}
  .profile-card-banner{height:96px}
}

/* Tall effect card: keep the overlapping avatar visible (main is a scroll box there) */
.profile-card-modal.profile-fx-host:has(.profile-dx-fx) .profile-card-main{margin-top:-52px;padding-top:52px;background:linear-gradient(180deg,transparent 0 52px,#0e0e14 52px)}
.profile-card-modal.profile-fx-host:has(.profile-dx-fx) .profile-card-banner{position:relative;z-index:1}

/* ── Profile editor (matches the profile card + effect build) ── */
.modal-box:has(.pe-shell){padding:0;background:#12121a;border-radius:24px;animation:pc-pop .26s cubic-bezier(.2,.9,.3,1.15) both}
@media(min-width:821px){.modal-box:has(.pe-shell){width:min(880px,calc(100vw - 28px))!important;max-width:880px!important}}
.pe-shell{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);min-height:0}
.pe-side{position:relative;padding:22px 0 22px 22px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;
  background:radial-gradient(420px 320px at 30% 0%,rgba(99,102,241,.14),transparent 70%)}
.pe-side-label{align-self:flex-start;display:flex;align-items:center;gap:6px;color:#a1a1aa;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.pe-side-label .material-icons-round{font-size:14px;color:#7dd3fc}
.pe-live{align-self:flex-start;margin-left:auto}
.pe-preview.profile-card-modal{width:100%;pointer-events:none}
.pe-preview .profile-card-close{display:none}
.pe-preview .profile-card-stats{margin-top:12px}
.pe-preview .profile-card-actions{display:none!important}
.pe-preview.profile-card-modal.profile-fx-host:has(.profile-dx-fx){margin:0!important}
@media(min-width:821px){.pe-shell .pe-preview.profile-card-modal.profile-fx-host:has(.profile-dx-fx){width:min(360px,calc((100dvh - 210px)*.5113636364),calc(100vw - 48px))}}
.pe-effect-note{align-self:stretch;display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:12px;font-size:11px;color:#a1a1aa;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.pe-effect-note .material-icons-round{font-size:16px;color:#c4b5fd}
.pe-effect-note b{color:#e4e4e7;font-weight:700}

.pe-main{padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0;overflow:auto;max-height:calc(100vh - 32px)}
.pe-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pe-head h3{margin:0;font-size:19px;font-weight:850;color:#fff;letter-spacing:-.02em}
.pe-head p{margin:4px 0 0;font-size:11px;line-height:1.45;color:#71717a}
.pe-close{width:34px;height:34px;flex:0 0 34px;border-radius:11px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:#a1a1aa;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,transform .15s}
.pe-close:hover{background:rgba(255,255,255,.1);color:#fff;transform:rotate(90deg)}
.pe-close .material-icons-round{font-size:18px}
.pe-card{padding:14px;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.07)}
.pe-card-title{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:12px;font-weight:800;color:#e4e4e7}
.pe-card-title .material-icons-round{font-size:16px;color:#7dd3fc}
.pe-hint{margin-top:7px;font-size:10px;line-height:1.45;color:#71717a}
.pe-row{display:flex;gap:8px}
.pe-row .modal-input{min-width:0;flex:1}
.pe-row .modal-btn{flex:0 0 auto;padding:9px 14px;border-radius:11px}
.pe-card .modal-input{background:#0b0b10;border-radius:12px}
.pe-card .modal-input:focus{border-color:rgba(56,189,248,.55);box-shadow:0 0 0 3px rgba(56,189,248,.1)}
.pe-avatar-row{display:flex;align-items:center;gap:13px}
.pe-avatar-box{width:62px;height:62px;flex:0 0 62px;border-radius:19px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.4),0 0 0 2px rgba(255,255,255,.07)}
.pe-avatar-actions{display:flex;gap:7px;margin-top:9px}
.pe-avatar-actions .modal-btn{flex:0 1 auto;padding:8px 12px}
.pe-status{display:none;padding:9px 11px;border-radius:11px;font-size:11px}
.pe-pw{display:flex;flex-direction:column;gap:7px}
.pe-check{display:flex;align-items:center;gap:7px;color:#a1a1aa;font-size:11px;cursor:pointer;user-select:none}
.pe-check input{accent-color:#0ea5e9}

@media(max-width:820px){
  .pe-shell{grid-template-columns:1fr}
  .pe-side{padding:18px 18px 4px}
  .pe-main{padding:14px 18px 20px;max-height:none;overflow:visible}
  /* On small screens show a compact version of the card instead of the tall effect poster */
  .pe-shell .pe-preview.profile-card-modal.profile-fx-host:has(.profile-dx-fx){width:100%;aspect-ratio:auto;display:block}
  .pe-shell .pe-preview .profile-dx-fx,.pe-shell .pe-preview .quick-profile-fx{display:none!important}
  .pe-shell .pe-preview.profile-card-modal.profile-fx-host:has(.profile-dx-fx) .profile-card-banner{height:96px}
  .pe-shell .pe-preview.profile-card-modal.profile-fx-host:has(.profile-dx-fx) .profile-card-main{overflow:visible;padding:0 20px 20px}
}

body.chat-reduce-motion #channel-header::after,
body.chat-reduce-motion .pc-sheen::after,
body.chat-reduce-motion .modal-box:has(.profile-card-modal),
body.chat-reduce-motion .modal-box:has(.pe-shell),
body.chat-reduce-motion .profile-card-head,
body.chat-reduce-motion .profile-card-stats,
body.chat-reduce-motion .profile-card-actions{animation:none!important}
@media (prefers-reduced-motion:reduce){
  #channel-header::after,.pc-sheen::after,.modal-box:has(.profile-card-modal),.modal-box:has(.pe-shell),
  .profile-card-head,.profile-card-stats,.profile-card-actions{animation:none!important}
}

/* ── Shop: profile effect cards ──────────────────────────────────
   The mini profile card now fills the same 450:880 frame the effect art is
   drawn for, and the art is clipped to it, so nothing spills past the card. */
#cosmetics-page:not(.is-play) .cosmetic-shop-card-profile{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
#cosmetics-page:not(.is-play) .cosmetic-shop-card-profile:hover{transform:translateY(-4px);
  box-shadow:0 18px 40px -18px color-mix(in srgb,var(--r,#6366f1) 60%,transparent),0 0 0 1px color-mix(in srgb,var(--r,#6366f1) 45%,transparent)}
#cosmetics-page:not(.is-play) .cosmetic-shop-card-profile .cosmetic-profile-visual{
  --fx-color:#818cf8;min-height:0;height:312px;padding:20px 0;overflow:hidden;position:relative;
  background:
    radial-gradient(180px 220px at 50% 46%,color-mix(in srgb,var(--fx-color) 32%,transparent),transparent 72%),
    radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px) 0 0/16px 16px,
    #0d0e15}
#cosmetics-page:not(.is-play) .cosmetic-shop-card-profile .cosmetic-profile-visual::after{content:'';position:absolute;left:0;right:0;bottom:0;height:42px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(13,14,21,.85))}

.profile-fx-demo.profile-fx-demo-card.profile-fx-raster-card,
.profile-fx-demo.profile-fx-demo-large:has(.profile-art-fx){
  position:relative;height:100%;width:auto;aspect-ratio:450/880;max-width:100%;border-radius:16px;overflow:hidden;isolation:isolate;
  background:#0e0e14;box-shadow:0 16px 34px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12),0 0 34px -10px var(--fx-color,#818cf8)}
.profile-fx-demo.profile-fx-demo-large:has(.profile-art-fx){height:100%;width:auto;max-width:100%;border-radius:22px}

/* the fake profile card is the full frame, never inset */
.profile-fx-demo.profile-fx-raster-card.profile-fx-demo-card .profile-fx-demo-shell,
.profile-fx-demo.profile-fx-demo-large:has(.profile-art-fx) .profile-fx-demo-shell{inset:0;border:0;border-radius:0;box-shadow:none;background:#0e0e14;z-index:1}
.profile-fx-demo-shell>.pfx-banner{position:absolute;left:0;right:0;top:0;height:23%;
  background:linear-gradient(135deg,color-mix(in srgb,var(--fx-color,#818cf8) 70%,#0b0b12),#15151e 85%)}
.profile-fx-demo.profile-fx-raster-card .profile-fx-demo-shell>span,
.profile-fx-demo.profile-fx-demo-large:has(.profile-art-fx) .profile-fx-demo-shell>span{
  left:9%;top:calc(23% - 9%);width:34%;height:auto;aspect-ratio:1;border:3px solid #0e0e14;border-radius:26%;
  display:flex;align-items:center;justify-content:center;color:#fff;font:800 14px/1 Inter,sans-serif;
  background:linear-gradient(135deg,var(--fx-color,#6366f1),#1c1c28);box-shadow:0 6px 14px rgba(0,0,0,.4)}
.profile-fx-demo.profile-fx-raster-card .profile-fx-demo-shell>b,
.profile-fx-demo.profile-fx-demo-large:has(.profile-art-fx) .profile-fx-demo-shell>b{
  left:9%;top:calc(23% + 28%);transform:none;font-size:11px;font-weight:800;letter-spacing:-.01em;color:#fff;max-width:82%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-fx-demo.profile-fx-demo-large:has(.profile-art-fx) .profile-fx-demo-shell>b{font-size:20px}
.profile-fx-demo.profile-fx-demo-large:has(.profile-art-fx) .profile-fx-demo-shell>span{font-size:28px}
.profile-fx-demo-shell>.pfx-line,.profile-fx-demo-shell>.pfx-box,.profile-fx-demo-shell>.pfx-btn{position:absolute;left:9%;display:block}
.profile-fx-demo-shell>.pfx-line{top:calc(23% + 35%);width:46%;height:2.2%;border-radius:99px;background:rgba(255,255,255,.12)}
.profile-fx-demo-shell>.pfx-line.pfx-short{top:calc(23% + 39%);width:28%;background:rgba(255,255,255,.07)}
.profile-fx-demo-shell>.pfx-box{top:calc(23% + 45%);right:9%;height:10%;border-radius:10px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}
.profile-fx-demo-shell>.pfx-btn{top:calc(23% + 58%);right:9%;height:6%;border-radius:10px;background:linear-gradient(135deg,#0ea5e9,#6366f1);opacity:.85}

/* effect art: same frame as the card, clipped to it */
.profile-fx-demo .profile-art-fx.quick-profile-fx{inset:0;overflow:hidden;border-radius:inherit;z-index:2}
.profile-fx-demo .profile-dx-static,.profile-fx-demo .profile-dx-layer{width:100%;height:100%;object-fit:fill}
.profile-fx-demo .profile-art-shop-preview{z-index:2;overflow:hidden;border-radius:inherit}
.profile-fx-demo .profile-art-shop-preview>img{width:100%;height:100%;object-fit:contain;object-position:50% 0;filter:none}

.cosmetic-preview-modal-profile .cosmetic-preview-profile{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(260px 340px at 50% 50%,color-mix(in srgb,var(--fx-color,#818cf8) 28%,transparent),transparent 72%),#0d0e15}
@media(max-width:700px){#cosmetics-page:not(.is-play) .cosmetic-shop-card-profile .cosmetic-profile-visual{height:292px}}

/* ===== Nameplates (replace the banner in the members list) ===== */
.member-item.has-nameplate{
  min-height:44px;padding:5px 8px 5px 9px;position:relative;overflow:hidden;isolation:isolate;
  border:1px solid rgba(255,255,255,.07);background:#0d0d13;
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 4px 12px rgba(0,0,0,.18);
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.member-item.has-nameplate:hover{background:#0d0d13;box-shadow:inset 0 1px rgba(255,255,255,.1),0 5px 16px rgba(0,0,0,.28)}
.member-item.has-nameplate>*{position:relative;z-index:2}
.member-item.has-nameplate>.member-nameplate-video,
.member-item.has-nameplate>.member-nameplate-shade{position:absolute;inset:0;z-index:0}
.member-nameplate-video{width:100%;height:100%;object-fit:cover;object-position:right center;pointer-events:none;display:block;background:transparent;border-radius:inherit}
.member-nameplate-shade{z-index:1!important;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,rgba(8,8,12,.82) 0,rgba(8,8,12,.55) 42%,rgba(8,8,12,.08) 100%)}
.member-item.has-nameplate .member-custom-status{display:none}
.member-item.has-nameplate:has(.member-avatar-status .avatar-fx){overflow:visible}
.member-item.has-nameplate:has(.member-avatar-status .avatar-fx) .member-nameplate-video,
.member-item.has-nameplate:has(.member-avatar-status .avatar-fx) .member-nameplate-shade{border-radius:7px;clip-path:inset(0 round 7px)}
.member-item.has-nameplate.speaking{border-color:rgba(74,222,128,.55)}

/* Shop + preview: same proportions as the real members row */
.cosmetic-nameplate-visual,.cosmetic-preview-nameplate{display:flex;align-items:center;justify-content:center;width:100%}
.nameplate-demo{position:relative;display:flex;align-items:center;gap:8px;width:182px;max-width:100%;height:44px;flex:0 0 auto;padding:0 9px;border-radius:7px;overflow:hidden;isolation:isolate;
  background:#0d0d13;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px rgba(255,255,255,.06),0 6px 18px rgba(0,0,0,.3);text-shadow:0 1px 6px rgba(0,0,0,.9)}
.nameplate-demo-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;pointer-events:none;z-index:0}
.nameplate-demo-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(8,8,12,.82) 0,rgba(8,8,12,.55) 42%,rgba(8,8,12,.08) 100%)}
.nameplate-demo-avatar{position:relative;z-index:2;flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.nameplate-demo-name{position:relative;z-index:2;min-width:0;font-size:13px;font-weight:600;color:#f4f4f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cosmetic-preview-nameplate .nameplate-demo{width:280px;height:62px;padding:0 14px;gap:12px;border-radius:10px}
.cosmetic-preview-nameplate .nameplate-demo-avatar{flex-basis:38px;width:38px;height:38px;font-size:14px}
.cosmetic-preview-nameplate .nameplate-demo-name{font-size:16px}
.cosmetic-shop-card-tag .cosmetic-nameplate-visual{padding:4px 0}
body.chat-reduce-motion .member-nameplate-video,body.chat-reduce-motion .nameplate-demo-video{opacity:.9}
@media (max-width:820px){.member-item.has-nameplate{min-height:48px}}

/* ===== Shop item dialog (buy / equip) ===== */
.modal-box:has(.cpm){width:min(800px,calc(100vw - 28px))!important;max-width:none!important;padding:0!important;overflow:hidden!important;
  background:#12131a!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:22px!important;
  box-shadow:0 30px 90px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.4)!important;animation:cpm-in .22s cubic-bezier(.2,.9,.3,1) both}
@keyframes cpm-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.cpm{--cpm-accent:#818cf8;display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:440px;color:#f4f4f6;font-family:inherit;position:relative}
.cpm *{box-sizing:border-box}
.cpm-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:30px 26px;min-width:0;overflow:hidden;
  background:radial-gradient(420px 320px at 50% 46%,color-mix(in srgb,var(--cpm-accent) 26%,transparent),transparent 72%),
  linear-gradient(180deg,#0e0f16,#0a0b10)}
.cpm-stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 78%);mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 78%);pointer-events:none}
.cpm-stage>*{position:relative;z-index:1;max-width:100%}
.cpm-info{display:flex;flex-direction:column;padding:26px 26px 24px;background:#14151d;border-left:1px solid rgba(255,255,255,.07);min-width:0}
.cpm-close{position:absolute;top:14px;right:14px;z-index:5;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#d4d4dc;padding:0;transition:background .15s,color .15s}
.cpm-close:hover{background:rgba(255,255,255,.14);color:#fff}
.cpm-close .material-icons-round{font-size:19px}
.cpm-tags{display:flex;flex-wrap:wrap;gap:6px;padding-right:44px}
.cpm-chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#d4d4dc;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.cpm-chip .material-icons-round{font-size:13px;text-transform:none}
.cpm-chip[data-rarity="common"]{color:#c4c4cc}
.cpm-chip[data-rarity="rare"]{color:#7db3ff;background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.32)}
.cpm-chip[data-rarity="epic"]{color:#d3a4ff;background:rgba(168,85,247,.15);border-color:rgba(168,85,247,.35)}
.cpm-chip[data-rarity="legendary"]{color:#ffcf6b;background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.4)}
.cpm-chip-soft{text-transform:none;letter-spacing:0;font-weight:600}
.cpm h2{margin:14px 0 6px;font-size:25px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere}
.cpm-desc{margin:0;font-size:13px;line-height:1.6;color:#9b9caa}
.cpm-spacer{flex:1 1 18px;min-height:18px}
.cpm-price{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 15px;background:#191b25}
.cpm-price-main{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cpm-price-main span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a8b99}
.cpm-price-main strong{display:inline-flex;align-items:center;font-size:24px;font-weight:800;color:#fde68a;letter-spacing:-.01em}
.cpm-price-main .sp-coin{width:18px;height:18px;margin-right:7px}
.cpm-balance{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0;padding-top:12px;border-top:1px dashed rgba(255,255,255,.1)}
.cpm-balance div{min-width:0}
.cpm-balance dt{font-size:11px;color:#8a8b99;margin:0 0 2px}
.cpm-balance dd{margin:0;font-size:15px;font-weight:700;color:#e8e8ee;font-variant-numeric:tabular-nums}
.cpm-balance .is-short dd{color:#fb923c}
.cpm-meter{height:6px;border-radius:99px;margin-top:12px;background:rgba(255,255,255,.08);overflow:hidden}
.cpm-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.cpm-status{display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:13px 15px;background:#191b25}
.cpm-status>.material-icons-round{font-size:26px;color:#9b9caa}
.cpm-status strong{display:block;font-size:14px;color:#f4f4f6}
.cpm-status small{display:block;margin-top:1px;font-size:12px;color:#8a8b99}
.cpm-status.is-active{border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.07)}
.cpm-status.is-active>.material-icons-round{color:#4ade80}
.cpm-actions{display:flex;gap:8px;margin-top:12px}
.cpm-cta{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border-radius:13px;border:0;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--cpm-accent),color-mix(in srgb,var(--cpm-accent) 55%,#7c5cff));
  box-shadow:0 8px 22px color-mix(in srgb,var(--cpm-accent) 38%,transparent),inset 0 1px rgba(255,255,255,.22);transition:transform .12s,filter .15s,box-shadow .15s}
.cpm-cta:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.1)}
.cpm-cta:active:not(:disabled){transform:none}
.cpm-cta .material-icons-round{font-size:20px}
.cpm-cta em{display:inline-flex;align-items:center;font-style:normal;font-weight:700;padding:3px 9px 3px 7px;margin-left:2px;border-radius:99px;background:rgba(0,0,0,.28);font-size:12.5px}
.cpm-cta em .sp-coin{width:12px;height:12px;margin-right:4px}
.cpm-cta:disabled{cursor:default;color:#7b7c88;background:#20222e;box-shadow:none;filter:none}
.cpm-cta-earn{color:#1c1302;background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 8px 22px rgba(245,158,11,.28),inset 0 1px rgba(255,255,255,.35)}
.cpm-ghost{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 15px;border-radius:13px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;
  color:#d4d4dc;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.cpm-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.cpm-ghost .material-icons-round{font-size:18px}
.cpm :is(button):focus-visible{outline:2px solid var(--cpm-accent);outline-offset:2px}

/* stage content */
.cpm .cosmetic-preview-none{display:grid;place-items:center;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.18);color:#6d6e7c}
.cpm .cosmetic-preview-none .material-icons-round{font-size:56px}
.cpm .cosmetic-preview-avatar{display:grid;place-items:center;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%)}
.cpm .cosmetic-preview-message{width:100%;max-width:400px;padding:22px 18px;border-radius:16px;background:#0f1016;border:1px solid rgba(255,255,255,.07)}
.cpm .cosmetic-preview-message .msg-bubble{max-width:100%}
.cpm .cosmetic-preview-tag{display:flex;justify-content:center;width:100%;padding:34px 12px;border-radius:16px;background:#0f1016;border:1px solid rgba(255,255,255,.07)}
.cpm .cosmetic-preview-nameplate{padding:30px 12px}
.cpm .cosmetic-preview-nameplate .nameplate-demo{width:min(100%,300px);height:66px}
.cpm-banner-demo{display:flex;flex-direction:column;gap:14px;width:100%;max-width:400px}
.cpm .cosmetic-preview-banner{position:relative;overflow:hidden;height:150px;border-radius:14px;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px rgba(0,0,0,.4);isolation:isolate}
.cpm .cpm-mock-row{width:196px;align-self:center;pointer-events:none;gap:8px;min-height:44px}
.cpm-mock-avatar{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.cpm-mock-name{font-size:13px;font-weight:600;color:#f4f4f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpm .cosmetic-preview-profile{display:flex;align-items:center;justify-content:center;height:min(540px,calc(100dvh - 150px));padding:0;background:none}
.cpm .cosmetic-preview-profile .profile-fx-demo-large{height:100%;width:auto;max-width:100%}
.cpm.cosmetic-preview-modal-profile .cpm-stage{padding:22px}
.cpm.cosmetic-preview-modal-profile{min-height:0}

@media(max-width:700px){
  .modal-box:has(.cpm){width:100%!important;border-radius:22px!important}
  .cpm{grid-template-columns:1fr;min-height:0}
  .cpm-stage{padding:26px 18px 22px;min-height:230px}
  .cpm-info{border-left:0;border-top:1px solid rgba(255,255,255,.07);padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px))}
  .cpm .cosmetic-preview-banner{height:110px}
  .cpm .cosmetic-preview-avatar{width:150px;height:150px}
  .cpm .cosmetic-preview-profile{height:min(360px,46dvh)}
  .cpm h2{font-size:22px}
  .cpm-close{background:rgba(10,11,16,.7)}
}
@media(prefers-reduced-motion:reduce){.modal-box:has(.cpm){animation:none}.cpm-cta{transition:none}}
.cpm-cta{white-space:nowrap;min-width:0;padding:0 14px;gap:7px}
.cpm-ghost{flex:0 0 auto;white-space:nowrap;padding:0 13px}

/* ===== Profile effects wait 0.5s after the card opens ===== */
.profile-card-modal .profile-art-fx:not(.fx-live) :is(.profile-dx-layer,.profile-art-layer){display:none!important}
.profile-card-modal .quick-profile-fx:not(.profile-art-fx):not(.fx-live){visibility:hidden}
.profile-card-modal .quick-profile-fx:not(.profile-art-fx):not(.fx-live),
.profile-card-modal .quick-profile-fx:not(.profile-art-fx):not(.fx-live) *{animation-play-state:paused!important}

/* ===== Shop: even cards, one stage size per grid ===== */
#cosmetics-page:not(.is-play) :is(.sp-picks,.sp-legend){align-items:stretch;gap:16px}
#cosmetics-page:not(.is-play) :is(.sp-picks,.sp-legend) .cosmetic-shop-card{height:100%}
#cosmetics-page:not(.is-play) .cosmetic-shop-card .cosmetic-card-copy{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;min-width:0}
#cosmetics-page:not(.is-play) .cosmetic-shop-card .shop-card-meta{margin-top:auto;padding-top:8px}
#cosmetics-page:not(.is-play) .shop-product-type{flex-wrap:nowrap;min-width:0;white-space:nowrap;overflow:hidden}
#cosmetics-page:not(.is-play) .shop-product-type>*{flex:0 0 auto}
#cosmetics-page:not(.is-play) .shop-product-type .spt-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
#cosmetics-page:not(.is-play) .cosmetic-card-copy>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#cosmetics-page:not(.is-play) :is(.sp-picks,.sp-legend) .cosmetic-shop-card :is(.cosmetic-none-visual,.cosmetic-message-visual,.cosmetic-avatar-visual,.cosmetic-tag-visual,.cosmetic-banner-visual,.cosmetic-profile-visual){
  height:196px;min-height:196px;width:100%;display:flex;align-items:center;justify-content:center;flex:0 0 196px;position:relative;overflow:hidden}
#cosmetics-page:not(.is-play) :is(.sp-picks,.sp-legend) .cosmetic-shop-card .cosmetic-profile-visual{align-items:flex-start;padding:16px 0 0}
#cosmetics-page:not(.is-play) :is(.sp-picks,.sp-legend) .cosmetic-shop-card .profile-fx-demo.profile-fx-demo-card.profile-fx-raster-card{
  flex:0 0 auto;height:auto;width:112px;aspect-ratio:450/880;border-radius:14px 14px 0 0}
#cosmetics-page:not(.is-play) :is(.sp-picks,.sp-legend) .cosmetic-shop-card .cosmetic-profile-visual::after{height:56px;background:linear-gradient(180deg,transparent,#101118)}
#cosmetics-page:not(.is-play) :is(.sp-picks,.sp-legend) .cosmetic-shop-card .cosmetic-banner-visual{border-radius:0}

/* tag pills were tiny in a big stage */
#cosmetics-page:not(.is-play) .cosmetic-tag-visual .user-tag{font-size:13px;padding:6px 14px;border-radius:999px}
#cosmetics-page:not(.is-play) .cosmetic-tag-visual .user-tag-nameplate{padding:0;min-width:0}
#cosmetics-page:not(.is-play) .cosmetic-avatar-visual,#cosmetics-page:not(.is-play) .cosmetic-message-visual{padding:0 14px}
#cosmetics-page:not(.is-play) .cosmetic-nameplate-visual{padding:0 8px}
#cosmetics-page .cosmetic-message-visual .msg-bubble strong,.cpm .cosmetic-preview-message .msg-bubble strong{display:block;margin-bottom:2px}
@media(max-width:700px){#cosmetics-page:not(.is-play) .shop-product-type{letter-spacing:.03em;font-size:10px;gap:4px}}

/* ===== Avatar decorations: animated rings drawn in front of a round avatar ===== */
.avatar-fx.avatar-fx-wrap.avatar-fx-image::before,.avatar-fx.avatar-fx-wrap.avatar-fx-image::after{content:none!important;display:none!important;animation:none!important}
.avatar-fx-wrap.avatar-fx-image .msg-avatar{border-radius:50%!important;box-shadow:none}
.avatar-fx-wrap.avatar-fx-image .msg-avatar img{border-radius:50%}
.avatar-fx-art{position:absolute;left:50%;top:50%;width:120%;height:120%;max-width:none;transform:translate(-50%,-50%);z-index:5;pointer-events:none;-webkit-user-select:none;user-select:none;object-fit:contain}
.avatar-fx-art-still{display:none}
body.chat-reduce-motion .avatar-fx-art-live{display:none}
body.chat-reduce-motion .avatar-fx-art-still{display:block}
@media (prefers-reduced-motion:reduce){.avatar-fx-art-live{display:none}.avatar-fx-art-still{display:block}}

/* rings animate only for rows that are on screen */
#messages-list .avatar-fx-image:not(.ring-live) .avatar-fx-art-live{display:none}
#messages-list .avatar-fx-image:not(.ring-live) .avatar-fx-art-still{display:block}