/* Route 257 Direct — 24/7 instant chat (§96, owner's order 2026-11-13
   ~06:55: "a 24-7 instant message bubble has to be in there, and it
   has to match that vintage color, everything that we have").
   Self-contained: this file + js/chat.js + one markup block per page.
   Palette: site.css :root vars ONLY (navy / Route red / chrome /
   aged brass / warm cream) — no off-palette color is introduced.
   THE PANEL'S GROUND (§96 cloth direction, owner's words 06:56):
   aged white cloth — "like a piece of an old flag without the
   stripes — just a white old cloth" — sampled from HER OWN flag
   artwork's white field (assets/chat-cloth.jpg; provenance and the
   named treatments live in work/chat/build-cloth.py). The cloth
   motif belongs to this panel ONLY. Lettering sits ON the cloth in
   navy / Route red, Playfair, spread out (tracked capitals, airy
   line spacing — her "more slender and more organized" register).
   Fittings (rim, header rail, close) are aged brass / chrome — the
   frame's metal language. The BUBBLE stays in that same metal/brass
   language (judgment pictured in R257-CHAT: brass disc seated; a
   cloth-faced disc was rendered in the sample study and reads as a
   coaster against the frame's corner — the metal carries her eye
   to it, the cloth is for reading).
   §CHAT2 (owner, 2026-11-13 ~07:55): the disc moves to the BOTTOM-
   RIGHT, all the way at the bottom of the right side (supersedes
   the bottom-left seat), and it GLOWS — a brass/gold halo breathing
   at the family's 5.2 s (the calendar dots' own pace), so it reads
   LIVE at a glance inside her vintage dress: no neon, no green.
   NAMED CALL on the red dot: it stays Route red and steady — the
   marker; the halo carries the life. The films' gold sound bubbles
   (.sound-bubble, §84) own the bottom-right INSIDE their films, so
   the disc YIELDS: js/chat.js measures any film bubble approaching
   its resting rect and rides the disc (and the panel with it) up
   by the exact overlap + a 12 px gap via --r257-chat-lift — the
   two gold discs never touch and never stack. Panel head renamed
   by her dictation: "24/7 TRANSPORT SUPPORT". */

/* ---------- the bubble (a real door, §86) ---------- */
.r257-chat-bubble{
  position:fixed;
  right:calc(4.68vw + 9px);
  bottom:calc(7.86vw + 11px);
  z-index:9995;
  width:56px;height:56px;
  border-radius:50%;
  border:2px solid var(--brass-dark);
  background:
    radial-gradient(circle at 34% 30%, var(--steel-1) 0%, var(--steel-2) 34%, var(--brass) 78%, var(--brass-dark) 100%);
  box-shadow:0 4px 14px rgba(0,0,0,.55), inset 0 1px 3px rgba(255,255,255,.65), inset 0 -3px 6px rgba(0,0,0,.35);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  -webkit-tap-highlight-color:transparent;
  transform:translateY(calc(-1 * var(--r257-chat-lift, 0px)));
  transition:transform .18s ease-out;
}
/* the living halo — her gold breathing behind the disc, at the
   calendar dots' 5.2 s pace; a breath, never a blink */
.r257-chat-bubble::before{
  content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle, rgba(233,185,73,.62) 0%, rgba(233,185,73,.28) 46%, rgba(233,185,73,0) 70%);
  animation:r257ChatHalo 5.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes r257ChatHalo{
  0%,100%{opacity:.5;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.07)}
}
@media (prefers-reduced-motion: reduce){
  .r257-chat-bubble::before{animation:none;opacity:.65;transform:none}
  .r257-chat-bubble,.r257-chat-panel{transition:none}
}
.r257-chat-bubble::after{ /* the navy field the glyph is engraved on */
  content:"";position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, var(--navy-700) 0%, var(--navy-900) 62%, var(--navy-950) 100%);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.8), inset 0 -1px 2px rgba(232,201,135,.35);
}
.r257-chat-bubble svg{position:relative;z-index:1;display:block}
.r257-chat-bubble:hover,.r257-chat-bubble:focus-visible{
  box-shadow:0 4px 14px rgba(0,0,0,.55), inset 0 0 0 2px rgba(232,201,135,.9), inset 0 0 16px rgba(255,214,120,.4);
  outline:none;
}
.r257-chat-bubble:active{
  box-shadow:0 2px 8px rgba(0,0,0,.6), inset 0 0 0 2px rgba(232,201,135,1), inset 0 0 22px rgba(255,214,120,.55);
}
.r257-chat-bubble .r257-chat-dot{
  position:absolute;top:1px;right:1px;z-index:2;
  width:11px;height:11px;border-radius:50%;
  background:var(--red-500);
  border:2px solid var(--cream);
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* ---------- the panel ---------- */
.r257-chat-panel{
  position:fixed;
  right:calc(4.68vw + 9px);
  bottom:calc(7.86vw + 79px);
  z-index:9996;
  transform:translateY(calc(-1 * var(--r257-chat-lift, 0px)));
  transition:transform .18s ease-out;
  width:min(352px, calc(100vw - 2 * (4.68vw + 9px) - 4px));
  max-height:min(572px, calc(100dvh - 210px));
  display:none;
  flex-direction:column;
  border-radius:14px;
  border:2px solid var(--brass-dark);
  box-shadow:0 14px 40px rgba(0,0,0,.65), inset 0 0 0 1px rgba(232,201,135,.5);
  overflow:hidden;
  font-family:var(--serif);
  background:var(--cream);
}
.r257-chat-panel.open{display:flex}
.r257-chat-head{
  background:linear-gradient(180deg, var(--steel-1) 0%, #e6dfca 48%, var(--steel-2) 58%, #efe8d5 100%);
  border-bottom:2px solid var(--brass-dark);
  padding:10px 40px 9px 12px;
  position:relative;
  text-align:center;
}
.r257-chat-title{
  margin:0;
  font-family:var(--serif);
  font-weight:700;
  /* §CHAT2: the dictated name "24/7 TRANSPORT SUPPORT" is 22
     characters — the seat tightens a step (15px, .17em tracking)
     so her name rides ONE line in the same tracked Playfair dress */
  font-size:15px;
  letter-spacing:.17em;
  text-indent:.17em; /* optically re-centers tracked capitals */
  color:var(--ink-navy);
  text-align:center;
  white-space:nowrap;
}
.r257-chat-close{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--brass-dark);
  background:radial-gradient(circle at 38% 32%, var(--navy-700) 0%, var(--navy-900) 70%);
  color:var(--cream);
  font-family:var(--serif);font-size:15px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.r257-chat-close:hover,.r257-chat-close:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(232,201,135,.9)}
.r257-chat-body{
  background-image:url('../assets/chat-cloth.jpg');
  background-size:cover;
  background-position:50% 38%;
  padding:16px 18px 14px;
  overflow-y:auto;
  text-align:center;
}
.r257-chat-greet{
  margin:0 0 8px;
  font-size:16.5px;line-height:1.65;
  color:var(--ink-navy);
  text-align:center;
}
.r257-chat-open24{
  margin:0 0 4px;
  font-size:13.5px;font-weight:700;
  letter-spacing:.22em;text-indent:.22em;
  color:var(--red-600);
  text-align:center;
}
.r257-chat-hours{
  margin:0 0 12px;
  font-size:13.5px;line-height:1.55;font-style:italic;
  color:var(--ink-navy);
  text-align:center;
}
.r257-chat-form{text-align:center}
.r257-chat-field{margin:0 0 11px;text-align:center}
.r257-chat-field label{
  display:block;
  font-size:13px;font-weight:700;
  letter-spacing:.26em;text-indent:.26em;
  color:var(--ink-navy);
  margin:0 0 5px;
  text-align:center;
}
.r257-chat-field input,.r257-chat-field textarea{
  width:100%;box-sizing:border-box;
  font-family:var(--serif);font-size:16px;
  color:var(--ink-navy);
  text-align:center;
  background:rgba(247,236,212,.72);
  border:1.5px solid var(--brass);
  border-radius:9px;
  padding:9px 10px;
}
.r257-chat-field textarea{min-height:74px;resize:vertical;line-height:1.5}
.r257-chat-field input:focus,.r257-chat-field textarea:focus{
  outline:none;border-color:var(--brass-dark);
  box-shadow:0 0 0 2px rgba(176,141,79,.35);
}
.r257-chat-error{
  display:none;
  margin:0 0 10px;
  font-size:14px;line-height:1.5;font-weight:600;
  color:var(--red-700);
  text-align:center;
}
.r257-chat-error.show{display:block}
.r257-chat-send{
  display:block;width:100%;
  font-family:var(--serif);font-weight:700;font-size:15.5px;
  letter-spacing:.3em;text-indent:.3em;
  color:var(--cream);
  background:linear-gradient(180deg, var(--red-500) 0%, var(--red-600) 55%, var(--red-700) 100%);
  border:2px solid var(--brass-dark);
  border-radius:10px;
  padding:11px 10px;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.35);
  -webkit-tap-highlight-color:transparent;
}
.r257-chat-send:hover,.r257-chat-send:focus-visible{outline:none;box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 0 0 2px rgba(232,201,135,.85)}
.r257-chat-done{display:none;text-align:center;padding:6px 0 2px}
.r257-chat-done.show{display:block}
.r257-chat-done .r257-chat-check{
  width:46px;height:46px;margin:0 auto 10px;border-radius:50%;
  border:2px solid var(--brass-dark);
  background:radial-gradient(circle at 38% 32%, var(--navy-700) 0%, var(--navy-900) 70%);
  display:flex;align-items:center;justify-content:center;
}
.r257-chat-done p{
  margin:0 0 12px;font-size:15.5px;line-height:1.6;color:var(--ink-navy);text-align:center;
}
.r257-chat-again{
  font-family:var(--serif);font-weight:700;font-size:13.5px;
  letter-spacing:.26em;text-indent:.26em;
  color:var(--ink-navy);
  background:linear-gradient(180deg, var(--steel-1) 0%, var(--steel-2) 100%);
  border:1.5px solid var(--brass-dark);border-radius:9px;
  padding:9px 14px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.r257-chat-again:hover,.r257-chat-again:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(176,141,79,.8)}

/* ---------- the office surface (inbox + settings) ---------- */
.r257-inbox{
  margin:18px auto 6px;max-width:560px;
  border:2px solid var(--brass-dark);border-radius:14px;
  overflow:hidden;
  font-family:var(--serif);
  background:var(--cream);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.r257-inbox-head{
  background:linear-gradient(180deg, var(--steel-1) 0%, #e6dfca 48%, var(--steel-2) 58%, #efe8d5 100%);
  border-bottom:2px solid var(--brass-dark);
  padding:10px 12px;text-align:center;
}
.r257-inbox-title{
  margin:0;font-size:16px;font-weight:700;
  letter-spacing:.3em;text-indent:.3em;color:var(--ink-navy);text-align:center;
}
.r257-inbox-note{
  margin:0;padding:9px 14px 0;
  font-size:13.5px;line-height:1.55;font-style:italic;
  color:var(--ink-navy);text-align:center;
}
.r257-inbox-list{padding:8px 14px 12px}
.r257-inbox-empty{
  margin:6px 0 2px;font-size:14.5px;color:var(--ink-navy);text-align:center;line-height:1.55;
}
.r257-msg{
  border:1.5px solid var(--brass);border-radius:10px;
  background:rgba(247,236,212,.6);
  padding:9px 12px;margin:0 0 9px;text-align:center;
}
.r257-msg-when{font-size:12.5px;letter-spacing:.14em;color:var(--red-600);font-weight:700;margin:0 0 3px;text-align:center}
.r257-msg-name{font-size:15.5px;font-weight:700;color:var(--ink-navy);margin:0;text-align:center}
.r257-msg-contact{font-size:14px;color:var(--ink-navy);margin:0 0 4px;text-align:center}
.r257-msg-text{font-size:14.5px;line-height:1.55;color:var(--ink-navy);margin:0;text-align:center;white-space:pre-wrap}
.r257-inbox-settings{
  border-top:1.5px solid var(--brass);
  padding:10px 14px 13px;text-align:center;
}
.r257-sms-row{
  display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 6px;
}
.r257-sms-label{font-size:14.5px;font-weight:700;letter-spacing:.18em;color:var(--ink-navy)}
.r257-sms-toggle{
  width:52px;height:28px;border-radius:999px;flex:0 0 auto;
  border:1.5px solid var(--brass-dark);
  background:linear-gradient(180deg, var(--steel-2), var(--steel-3));
  position:relative;cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.r257-sms-toggle::after{
  content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, var(--steel-1) 0%, var(--steel-2) 70%);
  border:1.5px solid var(--brass-dark);
  transition:left .18s ease;
}
.r257-sms-toggle[aria-checked="true"]{
  background:linear-gradient(180deg, var(--red-500) 0%, var(--red-700) 100%);
}
.r257-sms-toggle[aria-checked="true"]::after{left:25px}
.r257-sms-toggle:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(176,141,79,.55)}
.r257-sms-state{font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--red-600)}
.r257-sms-note{
  margin:0;font-size:13px;line-height:1.55;font-style:italic;color:var(--ink-navy);text-align:center;
}