/* Replaro support chat (templates/_support.html, js/support.js). Self-contained: its own tokens, so it looks the same
   on the site, the sign-in screens and the app. It never moves the page: everything here is position:fixed, nothing
   locks the page's scroll, the list keeps its own scrolling (overscroll-behavior:contain) and every field is 16px so
   iOS Safari never zooms. Layers: button 32, panel 33; under popovers (40), drawers (54/55), toasts (70) and modals
   (80), over the app tab bar (20) and sticky save bars. */
.rs{
  --rs-ink:#1D1D1F; --rs-ink-2:#5E5E63; --rs-ink-3:#6E6E73;
  --rs-card:#FFFFFF; --rs-field:#F2F2F5; --rs-field-2:#E9E9EE; --rs-line:#E3E3E8;
  --rs-in:#F1F1F4; --rs-in-ink:#1D1D1F; --rs-out:#1D1D1F; --rs-out-ink:#FFFFFF;
  --rs-head:#0B0D12; --rs-head-ink:#FFFFFF; --rs-head-ink-2:#A1A1A6; --rs-head-line:rgba(255,255,255,.08);
  --rs-launch:#0B0D12; --rs-launch-edge:rgba(255,255,255,.16); --rs-launch-ink:#D6FF3F;
  --rs-lime:#D6FF3F; --rs-lime-hover:#CDF63A; --rs-lime-ink:#0B0D12;
  --rs-answered:#30D158; --rs-err:#B42318; --rs-focus:#15171A; --rs-sel:rgba(214,255,63,.5);
  --rs-shadow:0 30px 80px -24px rgba(11,13,18,.38),0 10px 24px -12px rgba(11,13,18,.18),0 0 0 1px rgba(11,13,18,.06);
  --rs-launch-shadow:0 12px 28px -10px rgba(11,13,18,.5),0 3px 8px -2px rgba(11,13,18,.2);
  --rs-ease:cubic-bezier(.32,.72,0,1);
  --rs-b:calc(20px + env(safe-area-inset-bottom, 0px)); /* the button's distance from the bottom; lifted below */
  /* while the cookie choice bar shows at the bottom, consent.js puts its height in --rpl-cb: the button moves up by it */
  --rs-bb:calc(var(--rs-b) + var(--rpl-cb, 0px));
  --rs-r:20px;
  font-family:"Geist","Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .rs{
    --rs-ink:#F5F5F7; --rs-ink-2:#B4B4B9; --rs-ink-3:#A1A1A6;
    --rs-card:#1C1C1E; --rs-field:#2C2C2E; --rs-field-2:#3A3A3C; --rs-line:#2C2C2E;
    --rs-in:#2C2C2E; --rs-in-ink:#F5F5F7; --rs-out:#F5F5F7; --rs-out-ink:#0B0D12;
    --rs-head:#111113; --rs-head-line:rgba(255,255,255,.07);
    --rs-launch:#1C1C1E; --rs-launch-edge:rgba(255,255,255,.12);
    --rs-lime-hover:#E0FF6A; --rs-err:#FF6961; --rs-focus:#D7FF45; --rs-sel:rgba(214,255,63,.3);
    --rs-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);
    --rs-launch-shadow:0 12px 28px -8px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] .rs{
  --rs-ink:#F5F5F7; --rs-ink-2:#B4B4B9; --rs-ink-3:#A1A1A6;
  --rs-card:#1C1C1E; --rs-field:#2C2C2E; --rs-field-2:#3A3A3C; --rs-line:#2C2C2E;
  --rs-in:#2C2C2E; --rs-in-ink:#F5F5F7; --rs-out:#F5F5F7; --rs-out-ink:#0B0D12;
  --rs-head:#111113; --rs-head-line:rgba(255,255,255,.07);
  --rs-launch:#1C1C1E; --rs-launch-edge:rgba(255,255,255,.12);
  --rs-lime-hover:#E0FF6A; --rs-err:#FF6961; --rs-focus:#D7FF45; --rs-sel:rgba(214,255,63,.3);
  --rs-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);
  --rs-launch-shadow:0 12px 28px -8px rgba(0,0,0,.7);
}

.rs[hidden],.rs [hidden]{display:none !important}
.rs *,.rs *::before,.rs *::after{box-sizing:border-box}
.rs ::selection{background:var(--rs-sel);color:inherit}
.rs .ic{display:block;flex:none}
.rs-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.rs-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;opacity:0;pointer-events:none}

/* --- the button --------------------------------------------------------------------------------------------- */
.rs-launch{
  position:fixed;right:20px;bottom:var(--rs-bb);z-index:32;
  width:54px;height:54px;padding:0;margin:0;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--rs-launch);color:var(--rs-launch-ink);
  box-shadow:var(--rs-launch-shadow),inset 0 0 0 1px var(--rs-launch-edge);
  -webkit-tap-highlight-color:transparent;
  transition:transform .35s var(--rs-ease),box-shadow .35s var(--rs-ease),bottom .35s var(--rs-ease),opacity .2s ease,visibility 0s;
}
.rs-launch:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(11,13,18,.55),0 4px 10px -2px rgba(11,13,18,.2),inset 0 0 0 1px var(--rs-launch-edge)}
.rs-launch:active{transform:scale(.95)}
.rs-launch:focus-visible{outline:2px solid var(--rs-focus);outline-offset:3px}
.rs-ic{grid-area:1/1;display:grid;place-items:center;transition:transform .35s var(--rs-ease),opacity .2s ease}
.rs-ic-x{opacity:0;transform:rotate(-90deg) scale(.6)}
.rs.is-open .rs-ic-chat{opacity:0;transform:rotate(90deg) scale(.6)}
.rs.is-open .rs-ic-x{opacity:1;transform:none}
.rs-dot{position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;background:var(--rs-answered);box-shadow:0 0 0 2.5px var(--rs-launch);animation:rs-pop .5s var(--rs-ease) both}
@keyframes rs-pop{from{transform:scale(0)}to{transform:scale(1)}}

/* --- the panel ---------------------------------------------------------------------------------------------- */
.rs-panel{
  position:fixed;right:20px;bottom:calc(var(--rs-bb) + 68px);z-index:33;
  width:380px;height:min(580px,calc(100vh - var(--rs-bb) - 88px));height:min(580px,calc(100dvh - var(--rs-b) - 88px));height:min(580px,calc(100dvh - var(--rs-bb) - 88px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--rs-card);color:var(--rs-ink);border-radius:var(--rs-r);box-shadow:var(--rs-shadow);
  transform-origin:calc(100% - 27px) calc(100% + 41px);
  opacity:0;transform:translateY(10px) scale(.96);visibility:hidden;
  transition:opacity .18s ease,transform .22s var(--rs-ease),visibility 0s linear .22s,bottom .35s var(--rs-ease);
  font-size:15px;line-height:1.45;text-align:left;
}
/* an open chat sits above the cookie choice bar (80); the bar is back when the chat closes */
.rs.is-open .rs-panel{z-index:85}
.rs.is-open .rs-panel{opacity:1;transform:none;visibility:visible;transition:opacity .2s ease,transform .32s var(--rs-ease),visibility 0s,bottom .35s var(--rs-ease)}

.rs-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 14px 16px 16px;background:var(--rs-head);color:var(--rs-head-ink);box-shadow:inset 0 -1px 0 var(--rs-head-line)}
.rs-who{display:flex;align-items:flex-start;gap:12px;min-width:0}
.rs-mark{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--rs-lime);color:var(--rs-lime-ink)}
.rs-head h2{margin:1px 0 3px;font-family:inherit;font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--rs-head-ink)}
.rs-head p{margin:0;font-size:13px;line-height:1.4;color:var(--rs-head-ink-2);text-wrap:pretty}
.rs-close{flex:none;width:34px;height:34px;margin:-2px -2px 0 0;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:transparent;color:var(--rs-head-ink-2);transition:background .2s ease,color .2s ease}
.rs-close:hover{background:rgba(255,255,255,.1);color:var(--rs-head-ink)}
.rs-close:focus-visible{outline:2px solid var(--rs-lime);outline-offset:1px}

.rs-list{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:3px;padding:16px 14px 10px;
  scrollbar-width:thin;scrollbar-color:var(--rs-field-2) transparent;
}
.rs-list::-webkit-scrollbar{width:8px}
.rs-list::-webkit-scrollbar-thumb{background:var(--rs-field-2);border-radius:8px;border:2px solid var(--rs-card)}
.rs-hello{display:flex;flex-direction:column;margin-bottom:10px}
.rs-b{
  margin:0;max-width:84%;padding:9px 13px;border-radius:18px;text-align:start;
  font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext;
}
.rs-b-in{align-self:flex-start;background:var(--rs-in);color:var(--rs-in-ink)}
.rs-b-out{align-self:flex-end;background:var(--rs-out);color:var(--rs-out-ink)}
.rs-b-in.rs-end{border-bottom-left-radius:6px}
.rs-b-out.rs-end{border-bottom-right-radius:6px}
.rs-meta{margin:3px 6px 12px;font-size:12px;line-height:1.3;color:var(--rs-ink-3);font-variant-numeric:tabular-nums}
.rs-meta-in{align-self:flex-start}
.rs-meta-out{align-self:flex-end}
.rs-note{
  align-self:stretch;display:flex;gap:8px;align-items:flex-start;margin:4px 2px 6px;padding:10px 12px;border-radius:14px;
  background:var(--rs-field);color:var(--rs-ink-2);font-size:13px;line-height:1.45;text-wrap:pretty;text-align:start;
  animation:rs-rise .4s var(--rs-ease) both;
}
.rs-note .ic{color:var(--rs-answered);margin-top:1px}
@keyframes rs-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* --- writing ------------------------------------------------------------------------------------------------ */
.rs-form{flex:none;position:relative;margin:0;padding:10px 12px 12px;border-top:1px solid var(--rs-line);background:var(--rs-card)}
.rs-mail{margin:0 2px 10px}
.rs-mail label{display:block;margin:0 0 6px;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--rs-ink)}
.rs-mail label span{font-weight:400;color:var(--rs-ink-2)}
.rs input,.rs textarea{
  font-family:inherit;font-size:16px;color:var(--rs-ink);caret-color:var(--rs-ink);
  background:var(--rs-field);border:0;outline:0;margin:0;-webkit-appearance:none;appearance:none;
  transition:box-shadow .15s ease,background .15s ease;
}
.rs input::placeholder,.rs textarea::placeholder{color:var(--rs-ink-3);opacity:1}
.rs input:focus-visible,.rs textarea:focus-visible{box-shadow:0 0 0 2px var(--rs-focus);background:var(--rs-card)}
.rs-mail input{display:block;width:100%;height:40px;padding:0 13px;border-radius:12px;line-height:40px}
.rs-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.rs-compose textarea{display:block;width:100%;min-height:44px;max-height:132px;padding:11px 15px;border-radius:22px;line-height:22px;resize:none;overflow-wrap:anywhere;unicode-bidi:plaintext}
.rs-send{
  width:44px;height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--rs-lime);color:var(--rs-lime-ink);transition:background .2s ease,transform .2s var(--rs-ease),color .2s ease;
}
.rs-send .ic{transform:translate(-1px,1px)}
.rs-send:hover:not(:disabled){background:var(--rs-lime-hover)}
.rs-send:active:not(:disabled){transform:scale(.94)}
.rs-send:disabled{cursor:default;background:var(--rs-field);color:var(--rs-ink-3)}
.rs-send[aria-busy="true"]{background:var(--rs-lime);color:var(--rs-lime-ink);animation:rs-breathe 1s ease-in-out infinite alternate}
@keyframes rs-breathe{from{opacity:1}to{opacity:.55}}
.rs-send:focus-visible{outline:2px solid var(--rs-focus);outline-offset:2px}
.rs-err{margin:8px 4px 0;font-size:13px;line-height:1.4;color:var(--rs-err)}

/* --- out of the way of what is already fixed at the bottom ------------------------------------------------------ */
body:has(.pk-bar) .rs{--rs-b:calc(104px + env(safe-area-inset-bottom, 0px))}
@media (max-width:959px){
  body:has(.tabbar) .rs{--rs-b:calc(78px + env(safe-area-inset-bottom, 0px))}
  body:has(.tabbar):has(form.dirty .su-save) .rs{--rs-b:calc(148px + env(safe-area-inset-bottom, 0px))}
  /* the page-pick bar sticks above the tab bar and can wrap to two rows: the button goes above it */
  body:has(.pk-bar) .rs{--rs-b:calc(190px + env(safe-area-inset-bottom, 0px))}
}
@media (max-width:760px){
  body:has(.mcta) .rs{--rs-b:calc(80px + env(safe-area-inset-bottom, 0px))}
}

/* --- phones: a sheet from the bottom that stays above the keyboard (js/support.js sets --rs-kb and --rs-vh) ------- */
@media (max-width:560px){
  .rs-launch{right:14px;width:48px;height:48px}
  .rs-launch .rs-ic .ic{width:21px;height:21px}
  .rs-panel{
    left:8px;right:8px;width:auto;
    bottom:calc(8px + var(--rs-kb, 0px) + env(safe-area-inset-bottom, 0px));
    height:min(600px,calc(var(--rs-vh, 100vh) - 64px));height:min(600px,calc(var(--rs-vh, 100dvh) - 64px));
    transform-origin:50% 100%;transform:translateY(24px);
  }
  .rs.is-open .rs-launch{opacity:0;visibility:hidden;transform:scale(.7);transition:transform .25s var(--rs-ease),opacity .15s ease,visibility 0s linear .25s}
}

@media (prefers-reduced-motion: reduce){
  .rs-launch,.rs-ic,.rs-panel,.rs.is-open .rs-panel,.rs-send{transition:none !important}
  .rs-dot,.rs-note,.rs-send[aria-busy="true"]{animation:none !important}
  .rs-panel{transform:none}
}
@media print{.rs{display:none !important}}

/* the chat button keeps its place while the app moves between screens (css/v2.css view transition) */
.rs-launch{view-transition-name:rs-launch}