/* ============================================================
   chatWS — extras.css: status, gifts, profile music (js/extras.js)
============================================================ */
/* Status dots */
.cws-st-dot { display:inline-block; width:9px; height:9px; border-radius:50%; flex:0 0 9px; background:#22c55e; }
.cws-st-dot.st-away { background:#f59e0b; }
.cws-st-dot.st-busy { background:#ef4444; }
.cws-st-dot.st-invisible { background:transparent; border:2px solid #a3a3a3; width:9px; height:9px; box-sizing:border-box; }
.cws-st-dot.st-offline { background:#737373; }

/* Avatar menu status: round icon button in the header opens a small list (CodyChat style) */
.cws-status-head { margin-left:auto; flex:none; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:26px; }
.cws-status-head:hover { background:rgba(127,127,127,.12); }
#cwsStatusCurrent { display:inline-flex; }
.cws-stbtn-ico.st-online { color:#74b20e; } .cws-stbtn-ico.st-away { color:#f59e0b; }
.cws-stbtn-ico.st-busy { color:#ef4444; } .cws-stbtn-ico.st-invisible { color:#999; }
.cws-status-section { padding:0; border:0; display:none; }
.cws-status-section.open { display:block; border-bottom:1px solid rgba(127,127,127,.15); padding:4px 0 6px; }
.cws-status-opt { display:flex; align-items:center; gap:12px; width:100%; padding:9px 24px; border:0; border-radius:0; background:none; color:inherit; font-size:15px; cursor:pointer; font-family:inherit; text-align:left; }
.cws-status-opt:hover { background:rgba(127,127,127,.12); }
.cws-status-opt.active { font-weight:700; color:var(--th-accent,#03add8); }
.menu-edit-link { font-size:13px; color:#999; cursor:pointer; margin-top:1px; }
.menu-edit-link:hover { color:var(--th-accent,#03add8); }

/* Topbar avatar dot */
#topAvatarBtn { position:relative; }
.cws-top-dot { position:absolute; right:0; bottom:0; width:11px; height:11px; border-radius:50%; border:2px solid #0c0c0c; background:#22c55e; pointer-events:none; }
body.cws-st-away .cws-top-dot { background:#f59e0b; }
body.cws-st-busy .cws-top-dot { background:#ef4444; }
body.cws-st-invisible .cws-top-dot { background:#0c0c0c; border-color:#a3a3a3; }

/* User list status */
.ul-dot.ul-dot-away { background:#f59e0b; }
.ul-dot.ul-dot-busy { background:#ef4444; }
.ul-dot.ul-dot-invisible { background:#0c0c0c; border-color:#a3a3a3; }
.ul-st-away { color:#f59e0b; }
.ul-st-busy { color:#ef4444; }
.ul-st-invisible { color:#a3a3a3; }

/* Profile extras row */
.profile-extras { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.profile-extras:empty { display:none; }
.px-status { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:99px; background:rgba(255,255,255,.06); font-size:12px; color:#d4d4d4; }
.pmusic-pill { display:inline-flex; align-items:center; gap:6px; padding:2px 4px 2px 2px; border-radius:99px; background:rgba(255,255,255,.08); }
.pmusic-play, .pmusic-remove { width:28px; height:28px; border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:11px; }
.pmusic-play { background:#f97316; color:#fff; }
.pmusic-remove { background:transparent; color:#a3a3a3; }
.pmusic-remove:hover { color:#f87171; background:rgba(248,113,113,.12); }
.pmusic-bars { display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.pmusic-bars i { width:3px; height:4px; border-radius:2px; background:#d4d4d4; opacity:.6; }
.pmusic-play:has(.fa-pause) ~ .pmusic-bars i { animation:pmbar .9s ease-in-out infinite; opacity:1; }
.pmusic-bars i:nth-child(2) { animation-delay:.15s !important; }
.pmusic-bars i:nth-child(3) { animation-delay:.3s !important; }
.pmusic-bars i:nth-child(4) { animation-delay:.45s !important; }
@keyframes pmbar { 0%,100% { height:4px; } 50% { height:12px; } }
.pmusic-add, .px-gift-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid rgba(255,255,255,.12); border-radius:99px; background:rgba(255,255,255,.04); color:#e5e5e5; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; }
.pmusic-add:hover, .px-gift-btn:hover { background:rgba(255,255,255,.1); }
.px-gift-btn { border-color:rgba(236,72,153,.4); color:#f9a8d4; }
.px-gift-btn i { color:#ec4899; }

/* Gift images */
.gift-emoji { font-size:34px; line-height:1; display:block; }
.gift-img { width:42px; height:42px; object-fit:contain; display:block; }

/* Profile Gifts tab */
.gift-grid-profile { display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:8px; padding:8px 2px; }
.gift-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px 8px; border-radius:12px; background:rgba(255,255,255,.04); }
.gift-card-title { font-size:11px; color:#a3a3a3; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.gift-count { position:absolute; top:4px; right:6px; font-size:11px; font-weight:800; color:#f9a8d4; }
.gift-empty { grid-column:1/-1; text-align:center; color:#737373; font-size:12px; padding:18px; }

/* Gift picker */
.gift-picker { padding:4px; }
.gift-picker-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.gift-picker-title { font-size:16px; font-weight:700; color:#f5f5f5; display:flex; align-items:center; gap:8px; }
.gift-picker-title i { color:#ec4899; }
.gift-x { width:34px; height:34px; border:none; border-radius:50%; background:rgba(255,255,255,.06); color:#d4d4d4; cursor:pointer; }
.gift-balance { display:flex; gap:14px; margin-bottom:12px; font-size:13px; color:#d4d4d4; }
.gb-gold i { color:#eab308; } .gb-ruby i { color:#ec4899; }
.gift-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(86px, 1fr)); gap:8px; max-height:60vh; overflow-y:auto; }
.gift-item { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 4px 10px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.03); color:#e5e5e5; cursor:pointer; font-family:inherit; transition:transform .1s, background .12s; }
.gift-item:hover { background:rgba(255,255,255,.08); transform:translateY(-1px); }
.gift-item.cant { opacity:.45; }
.gift-item-title { font-size:12px; font-weight:600; }
.gift-price { font-size:11.5px; font-weight:700; }
.gift-price.gold { color:#eab308; } .gift-price.ruby { color:#ec4899; }