/* fixes.css - loaded last. (1) "Stop paying fees" banner on Home  (2) chat fits phones  (3) support/admin purple bubbly names */

/* ---------- 1. Home banner -> opens the Plans tab (grey, long, clean) ---------- */
.fee-promo{display:flex;align-items:center;gap:14px;width:calc(100% - 28px);min-height:72px;margin:12px 14px 6px;padding:16px 16px 16px 18px;border:0;border-radius:20px;
  text-align:left;cursor:pointer;color:#f3f3f5;font:inherit;-webkit-tap-highlight-color:transparent;
  background:#1c1d21;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .15s,transform .12s ease}
.fee-promo[hidden]{display:none!important}
.fee-promo:active{transform:scale(.985)}
@media(hover:hover){.fee-promo:hover{background:#232429}}
.fee-promo .fp-ic{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#2a2c31;color:#e9eaee}
.fee-promo .fp-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fee-promo .fp-tx b{font-size:16.5px;font-weight:780;letter-spacing:-.02em;line-height:1.15;color:#f3f3f5}
.fee-promo .fp-tx small{font-size:13px;line-height:1.35;color:#9a9ca6;white-space:normal}
.fee-promo .fp-go{flex:none;height:34px;padding:0 16px;border-radius:99px;display:grid;place-items:center;
  font-size:13px;font-weight:700;background:#e9e9ec;color:#16161a}
@media(max-width:380px){.fee-promo .fp-tx small{display:none}}
@media(min-width:1024px){.fee-promo{width:calc(100% - 48px);margin:14px 24px 6px;max-width:none}}

/* ---------- Creator-code notification: cleaner card, own space, no cramped buttons ---------- */
#cr-promo{--crp-w:460px}
#cr-promo .crp-main{width:min(var(--crp-w),100%);padding:16px 18px 18px 18px;gap:16px;border-radius:20px;background:#1c1d21;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 16px 40px rgba(0,0,0,.55)}
@media(hover:hover){#cr-promo .crp-main:hover{background:#232429}}
#cr-promo .crp-main::before{content:"";flex:none;width:42px;height:42px;border-radius:50%;background:#2a2c31 center/20px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9eaee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.6 6.6 19.5l1.2-6L3.3 9.3l6.1-.7L12 3z'/%3E%3C/svg%3E")}
#cr-promo .crp-txt{flex:1;gap:3px}
#cr-promo .crp-tag{font-size:10.5px;color:#8d8f99}
#cr-promo .crp-t{font-size:16px;font-weight:780;letter-spacing:-.02em}
#cr-promo .crp-d{font-size:12.5px;line-height:1.4;color:#9a9ca6}
#cr-promo .crp-go{position:static;transform:none;flex:none;height:34px;padding:0 16px;font-size:13px;align-self:center}
/* close button: small, top-right corner of the card, clear of the Apply button */
#cr-promo .crp-x{top:8px;transform:none;width:24px;height:24px;font-size:18px;
  right:calc(max(0px,(100% - var(--crp-w))/2) + 10px)}
#cr-promo .crp-main{padding-right:34px}
#cr-promo .crp-bar{left:calc(max(0px,(100% - var(--crp-w))/2) + 18px);right:calc(max(0px,(100% - var(--crp-w))/2) + 18px)}
/* desktop: same as phones - centred at the top */

/* ---------- 2. Chat on phones: messages get the room, extras fold away ---------- */
.ch-moretog{display:none}
@media(max-width:1023px){
  #ch-tabs{display:flex;align-items:center;gap:6px}
  .ch-moretog{display:grid;place-items:center;flex:none;margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2,rgba(255,255,255,.12));
    background:rgba(255,255,255,.05);color:var(--txt-2,#9aa1ad);-webkit-tap-highlight-color:transparent}
  .ch-moretog[aria-pressed="true"]{background:#e9eaee;color:#101113}

  /* top block: only support strip + a slim voice bar by default, never more than ~1/4 of the chat */
  html body #s-chat .ch-side{max-height:min(150px,26%)!important;gap:6px!important;padding:4px 12px 6px!important}
  html body #s-chat.ch-more .ch-side{max-height:40%!important}
  html body #s-chat:not(.ch-more) .ch-find,
  html body #s-chat:not(.ch-more) .ch-side>div:not(.ch-staff):not(.ch-voice):not(.ch-find){display:none!important}

  /* voice room: one slim row */
  html body #s-chat .ch-voice{padding:5px 8px!important;border-radius:12px!important}
  html body #s-chat .vc-top{gap:8px}
  html body #s-chat .vc-ico{width:26px;height:26px;border-radius:9px}
  html body #s-chat .vc-t b{font-size:13.5px}
  html body #s-chat .vc-t small,html body #s-chat .vc-t small.vc-warn{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body #s-chat .vc-btns button{min-height:30px;padding-top:0;padding-bottom:0}
  html body #s-chat .vc-list{margin-top:6px;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  html body #s-chat .vc-list::-webkit-scrollbar{display:none}

  /* support strip: one line, chips scroll sideways */
  html body #s-chat .ch-staff{flex-wrap:nowrap;overflow:hidden}
  html body #s-chat .stf-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  html body #s-chat .stf-row::-webkit-scrollbar{display:none}
  html body #s-chat .stf-quick{display:none}
  html body #s-chat .stf{flex:none}

  /* messages always keep a usable height */
  html body #s-chat .ch-main{min-height:40%!important}
}
@media(max-width:1023px) and (max-height:520px){ html body #s-chat .ch-moretog{display:none} }

/* ---------- 3. Support / admin names: styled in admin-name.css (no box, no bubble around admin messages) ---------- */
.cm.cm-adm .ctx{display:block;padding:0;border:0;background:none;border-radius:0}

/* ---------- Rug Guard toggle (Tools tab card + coin screen row) ---------- */
.rg-sw{flex:none;position:relative;width:46px;height:28px;border-radius:99px;background:rgba(255,255,255,.14);transition:background .18s ease}
.rg-sw i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .18s ease}
[data-rug-toggle][aria-pressed="true"] .rg-sw{background:#7c4dff}
[data-rug-toggle][aria-pressed="true"] .rg-sw i{transform:translateX(18px)}
.tl-rug .tl-tx small{white-space:normal}
.rg-sect{padding-top:4px;padding-bottom:4px}
.rg-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-radius:18px;text-align:left;color:inherit;font:inherit;cursor:pointer;
  background:rgba(255,255,255,.045);-webkit-tap-highlight-color:transparent}
.rg-row:active{background:rgba(255,255,255,.08)}
.rg-ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#2a2c31;color:#e9eaee}
[data-rug-toggle][aria-pressed="true"] .rg-ic{background:#4b27a0;color:#f4ecff}
.rg-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rg-tx b{font-size:15px;font-weight:750;letter-spacing:-.02em}
.rg-tx small{font-size:12.5px;line-height:1.35;color:var(--txt-2,#9aa1ad)}

/* "Stop paying fees": grey, and exactly as long as the coin rows on mobile (coin rows: 12px side margin, 18px corners) */
@media(max-width:1023px){
  .fee-promo{width:calc(100% - 24px)!important;margin:8px 12px 6px!important;min-height:72px;padding:12px 14px!important;border-radius:18px!important;
    background:#26282c!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)!important;color:#f3f3f5!important}
  .fee-promo:active{background:#2e3034!important}
  .fee-promo .fp-ic{background:#34363b!important;color:#e9eaee!important}
  .fee-promo .fp-tx b{color:#f3f3f5!important}
  .fee-promo .fp-tx small{color:#a3a6af!important}
  .fee-promo .fp-go{background:#e9e9ec!important;color:#16161a!important}
}