.supportChatButton{position:fixed;z-index:905;right:18px;bottom:76px;display:flex;align-items:center;gap:8px;min-height:42px;padding:9px 14px;border:1px solid color-mix(in srgb,var(--accent) 72%,var(--line));border-radius:999px;background:linear-gradient(145deg,var(--surface-raised),color-mix(in srgb,var(--accent) 16%,var(--surface-raised)));color:var(--text);box-shadow:0 13px 30px rgba(0,0,0,.3),0 0 18px color-mix(in srgb,var(--accent) 20%,transparent);font:650 .78rem/1 var(--app-font,system-ui);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.supportChatButton:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.34),0 0 24px color-mix(in srgb,var(--accent) 34%,transparent)}.supportChatButton svg{width:19px;height:19px;fill:none;stroke:var(--accent2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.supportChatPanel{position:fixed;z-index:10000;right:18px;bottom:128px;display:grid;grid-template-rows:auto minmax(150px,1fr) auto auto auto;width:min(390px,calc(100vw - 24px));height:min(570px,calc(100vh - 165px));overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 65%,var(--line));border-radius:22px;background:var(--surface-main,var(--panel));box-shadow:0 30px 80px rgba(0,0,0,.52),0 0 28px color-mix(in srgb,var(--accent) 18%,transparent);opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);transform-origin:bottom right;transition:opacity .2s ease,transform .2s ease,visibility .2s}.supportChatPanel.open{opacity:1;visibility:visible;transform:none}.supportChatPanel>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 17px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 15%,var(--surface-raised)),var(--surface-raised))}.supportChatPanel>header>div{display:grid;gap:3px}.supportChatPanel>header span{color:var(--accent2);font-size:.62rem;font-weight:900;letter-spacing:.12em}.supportChatPanel>header strong{font-size:1.05rem}.supportChatPanel>header small{color:var(--muted);font-size:.7rem}.supportChatPanel>header button{display:grid;place-items:center;width:35px;height:35px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface-input);color:var(--text);font-size:1.3rem;cursor:pointer}.supportChatMessages{overflow:auto;padding:15px;scrollbar-color:var(--accent) transparent;scrollbar-width:thin}.supportChatMessage{display:grid;gap:4px;max-width:88%;margin-bottom:12px}.supportChatMessage.user{margin-left:auto}.supportChatMessage>span{color:var(--muted);font-size:.61rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.supportChatMessage.user>span{text-align:right}.supportChatMessage p{margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:14px 14px 14px 4px;background:var(--surface-raised);font-size:.78rem;line-height:1.45;white-space:pre-wrap}.supportChatMessage.user p{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:14px 14px 4px 14px;background:var(--accent-soft)}.supportChatSuggestions{display:flex;gap:6px;overflow-x:auto;padding:7px 13px 9px}.supportChatSuggestions button{flex:0 0 auto;padding:7px 9px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));border-radius:999px;background:var(--surface-raised);color:var(--muted);font-size:.66rem;cursor:pointer}.supportChatSuggestions button:hover{border-color:var(--accent);color:var(--text)}.supportChatThinking{display:flex;align-items:center;gap:4px;padding:0 15px 8px;color:var(--muted);font-size:.68rem}.supportChatThinking i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:supportDot 1s ease-in-out infinite}.supportChatThinking i:nth-child(2){animation-delay:.16s}.supportChatThinking i:nth-child(3){animation-delay:.32s}.supportChatThinking span{margin-left:5px}.supportChatForm{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:8px;padding:11px 13px;border-top:1px solid var(--line)}.supportChatForm textarea{min-height:44px;max-height:100px;resize:none;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:var(--surface-input);color:var(--text);font:inherit}.supportChatForm textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}.supportChatForm button{display:grid;place-items:center;border:0;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--buttonText,#07111b);cursor:pointer}.supportChatForm button:disabled{opacity:.55;cursor:wait}.supportChatForm svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.supportChatPanel>footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 13px 10px;color:var(--muted);font-size:.61rem}.supportChatPanel>footer button{padding:0;border:0;background:none;color:var(--accent2);font:inherit;cursor:pointer}@keyframes supportDot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}@media(max-width:620px){.supportChatButton{right:12px;bottom:67px}.supportChatButton span{display:none}.supportChatButton{width:42px;height:42px;justify-content:center;padding:0}.supportChatPanel{right:8px;bottom:116px;width:calc(100vw - 16px);height:min(560px,calc(100vh - 130px));border-radius:18px}}@media(prefers-reduced-motion:reduce){.supportChatButton,.supportChatPanel{transition:none}.supportChatThinking i{animation:none}}
@media(max-width:620px){.supportChatPanel{left:8px;right:8px;width:auto}}
.supportChatThinking[hidden]{display:none!important}
.supportChatBubble{margin:0;padding:11px 13px;border:1px solid var(--line);border-radius:14px 14px 14px 4px;background:var(--surface-raised);font-size:.78rem;line-height:1.5}
.supportChatMessage.user .supportChatBubble{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:14px 14px 4px 14px;background:var(--accent-soft);white-space:pre-wrap}
.supportChatRich p{margin:0 0 8px;padding:0;border:0;border-radius:0;background:none;font-size:inherit;line-height:inherit;white-space:normal}
.supportChatRich p:last-child{margin-bottom:0}
.supportChatRich h4{margin:2px 0 7px;color:var(--text);font-size:.82rem;line-height:1.35}
.supportChatRich ul,.supportChatRich ol{display:grid;gap:5px;margin:3px 0 9px;padding-left:20px}
.supportChatRich ul:last-child,.supportChatRich ol:last-child{margin-bottom:0}
.supportChatRich li{padding-left:2px}
.supportChatRich li::marker{color:var(--accent2);font-weight:800}
.supportChatRich strong{color:var(--text);font-weight:800}
.supportChatRich code{padding:1px 4px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-radius:5px;background:var(--surface-input);color:var(--accent2);font-size:.72rem}

/* Banner header, theme-aware. A CSS background rather than an <img> so only the artwork that applies
   is downloaded, and so switching theme repaints an already-open panel with nothing listening.
   aspect-ratio stands in for the intrinsic height an <img> would have provided; the dark and light
   files are near but not identical in shape, so the light rule restates it.
   The close button is absolutely positioned over the banner and MUST stay reachable — it is the only
   way to dismiss this panel — hence its own backdrop rather than relying on the artwork behind it. */
.supportChatPanel>header.supportChatHeader{
  position:relative;display:block;padding:0;border-bottom:1px solid var(--line);
  aspect-ratio:1626/516;
  background:url("/images/AISB.png?v=4") center/cover no-repeat}
/* Explicit list, matching public/light-theme-refresh-20260721.css. NOT [class*="-light"] — "arctic"
   is a light theme with no -light suffix and a wildcard would give it the dark banner. */
body.arctic .supportChatPanel>header.supportChatHeader,
body.theme-light .supportChatPanel>header.supportChatHeader,
body.graphite-light .supportChatPanel>header.supportChatHeader,
body.midnight-light .supportChatPanel>header.supportChatHeader,
body.forest-light .supportChatPanel>header.supportChatHeader,
body.royal-light .supportChatPanel>header.supportChatHeader,
body.rose-light .supportChatPanel>header.supportChatHeader,
body.crimson-light .supportChatPanel>header.supportChatHeader,
body.copper-light .supportChatPanel>header.supportChatHeader,
body.ocean-light .supportChatPanel>header.supportChatHeader,
body.orange-light .supportChatPanel>header.supportChatHeader,
body.sunrise-light .supportChatPanel>header.supportChatHeader{
  aspect-ratio:1626/516;
  background-image:url("/images/AISBL.png?v=1")}
.supportChatPanel>header.supportChatHeader button{position:absolute;top:14px;right:10px;width:23px;height:23px;border:1px solid rgba(255,255,255,.26);background:rgba(8,10,14,.55);color:#fff;font-size:.72rem;line-height:1;backdrop-filter:blur(2px)}
.supportChatPanel>header.supportChatHeader button:hover{background:rgba(8,10,14,.85);border-color:rgba(255,255,255,.5)}
/* On a light banner a dark-on-dark chip disappears; invert it so the control stays visible. */
body.arctic .supportChatPanel>header.supportChatHeader button,
body[class*="-light"] .supportChatPanel>header.supportChatHeader button{
  border-color:rgba(0,0,0,.22);background:rgba(255,255,255,.78);color:#10141a}
body.arctic .supportChatPanel>header.supportChatHeader button:hover,
body[class*="-light"] .supportChatPanel>header.supportChatHeader button:hover{
  background:rgba(255,255,255,.95);border-color:rgba(0,0,0,.4)}


/* The visible circle is deliberately small, but 15px is well under a usable tap target, so the
   BUTTON keeps a comfortable hit area via an invisible inset overlay. Shrinking the art without
   this makes the control fiddly on a phone and near-impossible with a shaky hand. */
.supportChatPanel>header.supportChatHeader button::after{content:"";position:absolute;inset:-6px;border-radius:50%}

/* ⚠ MUST BE !important, and this is why.
   public/system-polish-20260717.css pins EVERY dimension of `button[aria-label*="close" i]` to 44px
   (40px under its mobile media query) with !important on width/min/max, height/min/max, flex,
   aspect-ratio, font-size, border, background and colour. Our close button carries aria-label="Close",
   so it matched, and every size set above was silently discarded — the button kept rendering as the
   global 44px accent circle no matter what this file said.
   These selectors are more specific than that rule, so !important here wins. If the button's
   aria-label ever changes, the global rule stops matching and these can lose the !important. */
.supportChatPanel>header.supportChatHeader button{
  width:23px!important;min-width:23px!important;max-width:23px!important;
  height:23px!important;min-height:23px!important;max-height:23px!important;
  flex:0 0 23px!important;aspect-ratio:1/1!important;
  padding:0!important;font-size:.72rem!important;line-height:1!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.26)!important;
  background:rgba(8,10,14,.55)!important;color:#fff!important}
body.arctic .supportChatPanel>header.supportChatHeader button,
body[class*="-light"] .supportChatPanel>header.supportChatHeader button{
  border-color:rgba(0,0,0,.22)!important;background:rgba(255,255,255,.8)!important;color:#10141a!important}