/* =========================================================
   RAPVILLE (US) — support chat window + launcher
   One component (#chat-window), two placements:
     inline   : homepage, inside section#apply (never hidden)
     floating : every other page, inside #chat-dock[data-placement="floating"], closed until the launcher is used
   Sheet mode (phones and short landscape viewports) is chosen by the same media query chat.js uses.
   ========================================================= */
:root{--chat-launcher-h:52px;--chat-gap:12px;--chat-edge:max(16px,env(safe-area-inset-bottom))}

/* ---------- window (shared) ---------- */
.chatwin{
  position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;overflow:clip;
  background:var(--bg-2);color:var(--white);
  border:1px solid var(--line);border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  scroll-margin-top:96px;
}
@media(max-width:560px){.chatwin{scroll-margin-top:84px}}

/* the window header is a <header>; site.css styles bare `header` as the fixed site bar, so reset every inherited rule here */
.chatwin .chatwin-head{
  position:relative;top:auto;left:auto;right:auto;z-index:auto;flex:0 0 auto;
  display:flex;align-items:center;gap:.8rem;
  padding:.9rem 1.1rem;
  background:linear-gradient(180deg,rgba(45,125,255,.16),rgba(45,125,255,.04)),var(--bg-2);
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:none;
}
.chatwin .chatwin-head .badge{width:42px;height:42px}
.chatwin-who{min-width:0;flex:1 1 auto}
.chatwin-who h2{font-weight:800;font-size:1.12rem;letter-spacing:-.005em;line-height:1.15;color:var(--white)}
.chatwin-who p{margin-top:.2rem;font-size:.82rem;line-height:1.35;color:rgba(246,245,241,.72)}

/* relative: the off-screen honeypot field is absolutely positioned and must scroll (and be clipped) with the body, not stretch the window */
.chatwin-body{
  position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:.9rem;
  padding:1.1rem 1.1rem 1.2rem;
}

/* incoming bubbles carry the brand badge only: no photos, personal names or presence indicators */
.bubble{display:flex;align-items:flex-end;gap:.55rem;min-width:0}
.bubble .badge{width:30px;height:30px;flex:0 0 30px;margin-bottom:2px}
.bubble-text{
  min-width:0;padding:.8rem 1rem;border-radius:18px 18px 18px 6px;
  background:var(--bg-3);border:1px solid var(--line);
  font-size:1rem;line-height:1.55;color:rgba(246,245,241,.95);overflow-wrap:anywhere;
}
.bubble-text p+p{margin-top:.55rem}
.bubble-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px .9rem;padding:.2rem .8rem}
.bubble-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--white);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(45,125,255,.85)}

/* success state */
.chat-done{display:flex;flex-direction:column;gap:.9rem}
.chat-done{scroll-margin-top:96px}
.chat-done:focus{outline:none}
.chat-again{align-self:flex-start;min-height:48px;touch-action:manipulation}

/* ---------- close button (floating only) ---------- */
.chat-close{
  flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;margin-left:auto;
  border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.05);color:var(--white);
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
@media(hover:hover){.chat-close:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}}

/* ---------- launcher ---------- */
.chat-launcher{
  position:fixed;z-index:900;
  right:max(16px,env(safe-area-inset-right));bottom:var(--chat-edge);
  display:inline-flex;align-items:center;gap:.6rem;
  height:var(--chat-launcher-h);padding:0 1.3rem 0 1.1rem;
  font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:1rem;letter-spacing:.01em;line-height:1;white-space:nowrap;
  color:#fff;background:var(--blue-deep);
  border:1px solid rgba(45,125,255,.9);border-radius:100px;
  box-shadow:0 12px 32px rgba(27,78,216,.5),0 2px 8px rgba(0,0,0,.55);
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform .3s var(--ease),opacity .2s,visibility 0s,box-shadow .3s;
}
.chat-launcher svg{flex:0 0 auto}
.chat-launcher:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:100px}
@media(hover:hover){.chat-launcher:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(45,125,255,.55),0 2px 8px rgba(0,0,0,.55)}}
/* away: mobile menu open, or (homepage) the inline window already fills the view */
.chat-launcher.is-away{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:transform .2s,opacity .2s,visibility 0s .2s}
html.chat-sheet-open .chat-launcher{visibility:hidden}

/* keep the footer's legal text clear of the launcher at the bottom of every page */
footer{padding-bottom:calc(2.5rem + var(--chat-launcher-h) + 28px + env(safe-area-inset-bottom))}

/* ---------- floating panel (desktop / tablet) ---------- */
.chat-dock[data-placement="floating"] .chatwin{
  position:fixed;z-index:900;
  right:max(16px,env(safe-area-inset-right));
  bottom:calc(var(--chat-edge) + var(--chat-launcher-h) + var(--chat-gap));
  width:400px;max-width:calc(100% - 32px); /* % of the viewport for a fixed box: unlike 100vw it excludes the scrollbar */
  /* 172px = fixed site header (78px) + launcher row (80px) + breathing room, so the panel never slides under the header */
  max-height:min(720px,calc(100vh - 172px));
  max-height:min(720px,calc(100dvh - 172px));
  transform-origin:100% 100%;
  animation:chat-pop .3s var(--ease);
}
.chat-dock[data-placement="floating"] .chatwin-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* when chat.js scrolls a covered text field into view it keeps it clear of the sheet header and the keyboard edge */
.chat-dock[data-placement="floating"] .field input,.chat-dock[data-placement="floating"] .field textarea{scroll-margin-top:72px;scroll-margin-bottom:24px}
/* touch tablets: a wider, taller panel so both consent texts and the submit button fit together */
@media(pointer:coarse) and (min-width:601px) and (min-height:541px){
  .chat-dock[data-placement="floating"] .chatwin{
    width:460px;
    max-height:min(860px,calc(100vh - 172px));
    max-height:min(860px,calc(100dvh - 172px));
  }
}
@keyframes chat-pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- sheet mode: phones (<=600px wide) and short landscape viewports (<=540px tall) ---------- */
.chat-backdrop{position:fixed;inset:0;z-index:1090;background:rgba(5,5,7,.66);-webkit-tap-highlight-color:transparent}
html.chat-lock,html.chat-lock body{overflow:hidden}

@media(max-width:600px),(max-height:540px){
  .chat-dock[data-placement="floating"] .chatwin{
    z-index:1100;top:0;right:0;bottom:auto;left:auto;
    width:min(100%,440px);max-width:none;
    height:100vh;height:100dvh;max-height:none;
    border-radius:0;border-width:0 0 0 1px;
    box-shadow:-20px 0 60px rgba(0,0,0,.5);
    transform-origin:50% 100%;animation:chat-sheet .32s var(--ease);
  }
  .chat-dock[data-placement="floating"] .chatwin .chatwin-head{
    padding-top:max(.9rem,env(safe-area-inset-top));
    padding-left:max(1.1rem,env(safe-area-inset-left));
    padding-right:max(1.1rem,env(safe-area-inset-right));
  }
  .chat-dock[data-placement="floating"] .chatwin-body{
    padding-left:max(1.1rem,env(safe-area-inset-left));
    padding-right:max(1.1rem,env(safe-area-inset-right));
    padding-bottom:max(1.6rem,calc(env(safe-area-inset-bottom) + 1rem));
  }
}
@media(max-width:600px){
  .chat-dock[data-placement="floating"] .chatwin{width:100%;border-width:0;box-shadow:none}
  .chat-dock[data-placement="floating"] .chatwin-body{padding-left:max(.75rem,env(safe-area-inset-left));padding-right:max(.75rem,env(safe-area-inset-right))}
}
@keyframes chat-sheet{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- small screens: tighter inline window ---------- */
@media(max-width:480px){
  /* a long uppercase legend would wrap across the fieldset border: show it as a heading inside the box instead */
  .sms-consent legend{float:left;width:100%;padding:0 0 .6rem;letter-spacing:.12em}
  .sms-consent legend+*{clear:both}

  /* Every pixel of width counts for the mandated consent wording: on phones the form drops its own frame (the chat
     window is the frame), the consent box is tighter and the checkbox hugs the text. Hit areas stay >= 44px. */
  .optin{padding:0;border:0;border-radius:0;background:none}
  .sms-consent{padding:.9rem .6rem .8rem}
  .consent-row input[type="checkbox"]{margin:0 -6px 0 -10px}
  .consent-row label{font-size:.9rem;line-height:1.45;padding:.55rem 0 .55rem .15rem}
  .optin-btn{margin-top:1rem}

  /* sheet header: one slim row (title + one-line subtitle + close) so the form gets the screen */
  .chat-dock[data-placement="floating"] .chatwin .chatwin-head{padding-top:max(.55rem,env(safe-area-inset-top));padding-bottom:.55rem}
  .chat-dock[data-placement="floating"] .chatwin-head .badge{display:none}
  .chat-dock[data-placement="floating"] .chatwin-who p{font-size:.8rem}
}
/* short phones (iPhone SE / 8 class, 667px tall and below): squeeze the consent block a little more so both
   mandated texts and the submit button are on screen together; text stays >= 13px */
@media(max-width:480px) and (max-height:700px){
  .sms-consent{margin-inline:-6px;padding:.75rem .45rem .4rem}
  .consent-row{margin-top:.1rem}
  .consent-row label{padding-block:.35rem}
  .sms-fine{margin-top:.1rem;font-size:.8125rem;line-height:1.85}
  .optin-btn{margin-top:.3rem;min-height:46px;padding-block:.75em}
}
@media(max-width:560px){
  .chatwin{border-radius:20px}
  .chatwin-body{padding:.9rem .6rem 1rem}
  .chat-launcher{padding:0 1.15rem 0 1rem}
  /* homepage: the inline window uses nearly the full screen width (8px from the edges) instead of the page gutter */
  .apply-grid>.chatwin{margin-inline:calc(8px - 5vw)}
}

/* 320px-class phones: a slightly slimmer pill that sits lower so it does not cover the hero button, and a one-row sheet header */
@media(max-width:340px){
  :root{--chat-launcher-h:48px;--chat-edge:max(8px,env(safe-area-inset-bottom))}
}
@media(max-width:360px){
  .chat-dock[data-placement="floating"] .chatwin-who p{display:none}
}

@media print{.chat-dock,.chat-launcher{display:none!important}}

/* ---------- homepage apply section: headline, then the chat window, then steps and SMS notes on phones ---------- */
.apply-grid{grid-template-areas:"copy chat" "more chat";grid-template-rows:auto 1fr;row-gap:0}
.apply-copy{grid-area:copy}
.apply-more{grid-area:more}
.apply-grid>.chatwin{grid-area:chat}
@media(max-width:900px){
  .apply-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "chat" "more";grid-template-rows:auto;row-gap:2rem}
  .apply-more .apply-steps{margin-top:0}
}