/* Customer-service (private support) popup. window.openSupport() opens a modal (desktop) /
   full-screen sheet (mobile). Reads/writes /api/support/messages — MEMBERS ONLY (guests get a
   register/login CTA). Support replies show on the left ("Support"), the client's own on right. */
/* No dark backdrop and click-through, so the page behind stays bright + usable — exactly like the
   public-chat docked rail (not a dimming modal). Only the panel itself captures pointer events. */
.sw-overlay{position:fixed;inset:0;z-index:4200;display:none;background:transparent;pointer-events:none}
.sw-overlay.open{display:flex;align-items:stretch;justify-content:flex-end}
/* start BELOW the 68px top navbar (which stays visible) — like the public-chat rail. Phones stay full-screen. */
@media (min-width:561px){ .sw-overlay{top:68px} }
/* docked to the RIGHT side (full height), like the public-chat rail — not a centered modal */
.sw-panel{pointer-events:auto;display:flex;flex-direction:column;background:#fff;color:#191c26;width:100%;max-width:400px;height:100%;overflow:hidden;box-shadow:-16px 0 50px -24px rgba(0,0,0,.45);animation:sw-slidein-right .28s ease;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
/* On the homepage (wide desktop), opening support makes the panel TAKE OVER the right-rail space so
   it sits BESIDE the games and reflows them — never on top — exactly like the public-chat rail. It
   drops the grid to 2 columns (sidebar + main), hides whatever rail was there (public chat / quick
   register), and reserves the panel's width on the right so the last game card clears the panel. The
   navbar (a sibling of .shell) is untouched and stays full-width. `.shell`/`.pubchat`/`.quickreg`
   only exist on the homepage, so this is a no-op elsewhere (portal pages keep the docked-overlay,
   same as their public-chat widget). Gated to 1201px+ where the rail is a real grid column. */
@media (min-width:1201px){
  body.sw-open .shell{grid-template-columns:var(--sb-w,280px) 1fr;padding-right:412px;transition:padding-right .28s ease}
  body.sw-open .pubchat,body.sw-open .quickreg,body.sw-open #quickTabs,body.sw-open .pc-reopen,body.sw-open .qr-reopen{display:none !important}
}
@keyframes sw-slidein-right{from{transform:translateX(100%)}to{transform:translateX(0)}}
/* LIGHT header, identical to the public-chat rail header (.pc-head): white bg, green dot, dark title */
.sw-head{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:16px 18px 12px;background:#fff;color:#191c26;border-bottom:1px solid #eef0f4}
.sw-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:#191c26}
.sw-dot{width:8px;height:8px;border-radius:50%;background:#12b46a;box-shadow:0 0 0 3px rgba(18,180,106,.18)}
.sw-sub{display:block;margin-top:3px;font-size:11px;color:#8b8b93}
.sw-head-btns{flex:none;display:flex;align-items:center;gap:6px}
.sw-min,.sw-close{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:rgba(0,0,0,.05);color:#8b8b93;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.14s;font-family:inherit}
.sw-min:hover,.sw-close:hover{background:rgba(0,0,0,.11);color:#191c26}
.sw-close{font-size:15px}
.sw-close:hover{background:color-mix(in srgb,var(--brand,#F5003A) 12%,transparent);color:var(--brand,#F5003A)}
/* minimize + start-screen only make sense once you're logged in with a live session */
.sw-panel.guest .sw-min,.sw-panel.prestart .sw-min{display:none}
.sw-msgs{flex:1 1 auto;overflow-y:auto;padding:16px 14px 6px;display:flex;flex-direction:column;gap:9px;background:#f7f8fa}
.sw-empty{margin:auto;text-align:center;color:#8b8b93;font-size:12.5px;padding:0 20px;line-height:1.5}
.sw-msg{max-width:82%;align-self:flex-start;background:#fff;border:1px solid #e8e8e8;border-radius:12px;border-bottom-left-radius:4px;padding:8px 12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.sw-msg.mine{align-self:flex-end;background:linear-gradient(120deg,#ffe3ea,#fff0f3);border-color:#f7c9d6;border-bottom-left-radius:12px;border-bottom-right-radius:4px}
.sw-msg.pop{animation:sw-msgpop .4s cubic-bezier(.34,1.56,.64,1) both;transform-origin:bottom left}
.sw-msg.mine.pop{transform-origin:bottom right}
@keyframes sw-msgpop{0%{opacity:0;transform:translateY(11px) scale(.55)}55%{opacity:1;transform:translateY(0) scale(1.06)}100%{transform:translateY(0) scale(1)}}
.sw-who{font-size:10.5px;font-weight:800;color:var(--brand,#F5003A);margin-bottom:2px;text-transform:uppercase;letter-spacing:.3px}
.sw-msg.mine .sw-who{display:none}
.sw-text{font-size:13px;line-height:1.42;color:#191c26;word-wrap:break-word;overflow-wrap:anywhere}
.sw-time{font-size:9.5px;color:#a0a0a8;margin-top:3px;text-align:right}
.sw-form{position:relative;flex:0 0 auto;display:flex;gap:8px;padding:12px 14px;border-top:1px solid #eef0f4;background:#fff}
.sw-form input{flex:1;min-width:0;background:#f3f4f7;border:1px solid #e8e8e8;border-radius:20px;padding:10px 14px;font-size:13.5px;color:#191c26}
.sw-form input:focus{outline:none;border-color:var(--brand,#F5003A)}
.sw-cd{position:absolute;left:14px;right:62px;top:12px;bottom:12px;display:none;align-items:center;justify-content:center;gap:7px;background:#fff0f3;border:1px solid #f5b6c5;border-radius:20px;font-size:13px;font-weight:800;color:var(--brand-d,#c0003a);pointer-events:none;z-index:2}
.sw-cd::before{content:"";width:13px;height:13px;border-radius:50%;border:2px solid #f5b6c5;border-top-color:var(--brand-d,#c0003a);animation:sw-cd-spin .9s linear infinite}
@keyframes sw-cd-spin{to{transform:rotate(360deg)}}
.sw-send{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sw-send svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sw-send:hover{filter:brightness(1.08)}
.sw-send:disabled{cursor:default;opacity:.5}
.sw-login{display:none;flex:0 0 auto;margin:12px 14px;padding:13px;border:0;border-radius:22px;background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));color:#fff;font-weight:800;font-size:14px;cursor:pointer;text-align:center}
.sw-login:hover{filter:brightness(1.06)}
.sw-panel.guest .sw-form,.sw-panel.guest .sw-msgs,.sw-panel.guest .sw-start{display:none}
.sw-panel.guest .sw-login{display:block}

/* ---- Start screen (shown before a session exists) ---- */
.sw-start{display:none;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:24px 28px;background:#f7f8fa}
.sw-panel.prestart .sw-start{display:flex}
.sw-panel.prestart .sw-msgs,.sw-panel.prestart .sw-form{display:none}
.sw-start-ico{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(120deg,#fff0f3,#ffe3ea);border:1px solid #f7c9d6}
.sw-start-ico svg{width:30px;height:30px;stroke:var(--brand,#F5003A);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sw-start-title{font-size:16px;font-weight:800;color:#191c26}
.sw-start-sub{font-size:12.5px;color:#8b8b93;line-height:1.5;max-width:260px}
.sw-start-btn{margin-top:6px;padding:13px 34px;border:0;border-radius:24px;background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));color:#fff;font-weight:800;font-size:14.5px;cursor:pointer;box-shadow:0 8px 22px -8px color-mix(in srgb,var(--brand,#F5003A) 60%,transparent)}
.sw-start-btn:hover{filter:brightness(1.07)}
.sw-start-btn:disabled{opacity:.6;cursor:default}

/* ---- Attach (image upload) button ---- */
.sw-attach{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:#f3f4f7;color:#8b8b93;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.14s}
.sw-attach svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sw-attach:hover{background:#e9eaef;color:var(--brand,#F5003A)}
.sw-attach.busy{opacity:.5;cursor:default;animation:sw-attach-pulse 1s ease-in-out infinite}
@keyframes sw-attach-pulse{50%{opacity:.85}}

/* ---- Image messages ---- */
.sw-img{display:block;margin:0;border-radius:9px;overflow:hidden;max-width:200px}
.sw-img img{display:block;width:100%;height:auto;max-height:260px;object-fit:cover;cursor:pointer}
.sw-img + .sw-text{margin-top:5px}

/* ---- End-chat confirm ---- */
.sw-confirm{display:none;position:absolute;inset:0;z-index:5;align-items:center;justify-content:center;padding:22px;background:rgba(20,22,30,.42);backdrop-filter:blur(2px)}
.sw-panel{position:relative}
.sw-panel.confirming .sw-confirm{display:flex}
.sw-confirm-card{width:100%;max-width:300px;background:#fff;border-radius:16px;padding:22px 20px;text-align:center;box-shadow:0 20px 50px -16px rgba(0,0,0,.4)}
.sw-confirm-title{font-size:16px;font-weight:800;color:#191c26}
.sw-confirm-sub{margin-top:7px;font-size:12.5px;color:#8b8b93;line-height:1.5}
.sw-confirm-btns{display:flex;gap:10px;margin-top:18px}
.sw-confirm-btns button{flex:1;padding:11px;border:0;border-radius:12px;font-weight:800;font-size:13.5px;cursor:pointer;font-family:inherit}
.sw-confirm-no{background:#f0f1f4;color:#191c26}
.sw-confirm-no:hover{background:#e6e7ec}
.sw-confirm-yes{background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));color:#fff}
.sw-confirm-yes:hover{filter:brightness(1.07)}

@media (max-width:560px){ .sw-panel{max-width:100%} } /* full-screen on phones */
@media (prefers-reduced-motion:reduce){ .sw-panel,.sw-msg.pop{animation:none} }

/* Right-edge Chat + Support tabs for portal pages (activity/promotion/account) that lack the
   homepage's built-in #quickTabs. Mirrors the homepage .qtab look. */
.edge-tabs{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:3900;display:flex;flex-direction:column;gap:9px}
.edge-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:86px;gap:6px;background:linear-gradient(180deg,var(--brand,#ff2d55),var(--brand-d,#c0003a));color:#fff;border:0;border-radius:12px 0 0 12px;padding:13px 9px;font-weight:800;font-size:11px;letter-spacing:.4px;cursor:pointer;box-shadow:-6px 6px 20px color-mix(in srgb,var(--brand,#F5003A) 35%,transparent);transition:.14s;font-family:inherit}
.edge-tab:hover{filter:brightness(1.08)}
.edge-tab span{writing-mode:vertical-rl;text-orientation:mixed}
.edge-tab svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.edge-tab-support{background:linear-gradient(180deg,#20a968,#0d8a50)}
/* blink the Support button while there's an unread reply from support (until the client opens it) */
.qtab-support.sw-alert,.edge-tab-support.sw-alert{animation:sw-alert-blink 1.1s ease-in-out infinite}
@keyframes sw-alert-blink{
  0%{box-shadow:-6px 6px 20px color-mix(in srgb,var(--brand,#F5003A) 35%,transparent),0 0 0 0 rgba(32,169,104,.6);filter:brightness(1.25)}
  70%{box-shadow:-6px 6px 20px color-mix(in srgb,var(--brand,#F5003A) 35%,transparent),0 0 0 13px rgba(32,169,104,0);filter:brightness(1)}
  100%{box-shadow:-6px 6px 20px color-mix(in srgb,var(--brand,#F5003A) 35%,transparent),0 0 0 0 rgba(32,169,104,0);filter:brightness(1.25)}
}
/* phones: icon-only (hide the vertical text label), compact square buttons, sit lower */
@media (max-width:600px){
  .edge-tabs{top:63%}
  .edge-tab span{display:none}
  .edge-tab{min-height:0;gap:0;padding:13px 12px;border-radius:14px 0 0 14px}
  .edge-tab svg{width:22px;height:22px}
}