/* Site chat assistant widget (assets/js/chat.js builds the markup).
   Self-contained under .spchat- so it can load on any page without touching
   page styles. Launcher sits bottom-LEFT; the to-top button owns bottom-right
   (locked: never move it). Loaded from footer.php only when the API key is
   configured. */

.spchat-fab{
  position:fixed; right:20px; bottom:20px; z-index:var(--z-overlay);
  width:40px; height:40px; border-radius:var(--radius-pill);
  background:var(--bg-dark); color:#fff; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(17,24,39,0.25); /* matches .to-top so the pair reads as one set */
  transition:background .18s ease, transform .18s ease, right .25s ease;
}
.spchat-fab:hover{ background:var(--accent); transform:translateY(-2px); }
.spchat-fab svg{ width:18px; height:18px; }
.spchat-fab[hidden]{ display:none; }

/* The corner choreography: the chat bubble holds the corner until the to-top
   earns its spot (after ~1 viewport of scroll, main.js), then slides left so
   the pair reads chat first, to-top last in the corner. Both 40px. This sheet
   is unlayered, so it outranks the layered components.css to-top base rule;
   key-less/bare pages keep the original solo to-top. */
body:has(.to-top.is-visible) .spchat-fab{
  right:calc(20px + 40px + var(--space-3));
}
.to-top{
  right:20px;
  bottom:20px;
  width:40px; height:40px;
}
.to-top svg{ width:18px; height:18px; }

/* Proactive greeting: a one-time teaser that invites the visitor in. */
.spchat-nudge{
  position:fixed; right:20px; bottom:calc(20px + 40px + var(--space-3));
  z-index:var(--z-overlay); max-width:264px;
  background:var(--surface); border:var(--bw) solid var(--border);
  border-radius:var(--radius-md); border-bottom-right-radius:var(--radius-xs);
  box-shadow:var(--shadow-lg); padding:12px 34px 12px 14px;
  font-size:var(--text-sm); line-height:1.5; color:var(--neutral-900);
  cursor:pointer; animation:spchat-nudge-in .3s ease both;
}
@keyframes spchat-nudge-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .spchat-nudge{ animation:none; } }
.spchat-nudge__close{
  position:absolute; top:4px; right:6px; background:none; border:0; cursor:pointer;
  color:var(--text-muted); font-size:1.05rem; line-height:1; padding:2px 4px;
}
.spchat-nudge__close:hover{ color:var(--neutral-900); }

.spchat{
  position:fixed; right:20px; bottom:20px; z-index:var(--z-overlay);
  width:372px; max-width:calc(100vw - 32px);
  height:min(560px, calc(100dvh - 120px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:var(--bw) solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
}
.spchat[hidden]{ display:none; }

/* Header: the ink band */
.spchat__head{
  background:var(--bg-dark); color:#fff;
  padding:14px 16px; display:flex; align-items:flex-start; gap:12px;
}
.spchat__title{ font-family:var(--font-display); font-weight:700; font-size:1rem; margin:0; line-height:1.2; }
.spchat__sub{ margin:2px 0 0; font-size:var(--text-xs); color:rgba(255,255,255,.7); line-height:1.4; }
.spchat__alt{ margin:4px 0 0; font-size:10px; color:rgba(255,255,255,.55); line-height:1.4; }
.spchat__alt a{ color:var(--accent-on-dark); text-decoration:underline; text-underline-offset:2px; }
.spchat__alt a:hover{ color:#fff; }
.spchat__close{
  margin-left:auto; flex:0 0 auto; background:none; border:0; color:rgba(255,255,255,.8);
  font-size:1.35rem; line-height:1; cursor:pointer; padding:2px 4px;
}
.spchat__close:hover{ color:#fff; }

/* Pre-chat email box: shown instead of the conversation until answered */
.spchat__intro{ display:none; }
.spchat.is-intro .spchat__intro{
  flex:1; display:flex; flex-direction:column; justify-content:center; gap:12px;
  padding:24px 20px;
  background-color:var(--bg);
  background-image:
    linear-gradient(0deg,  rgba(17,24,39,0.05) var(--bw), transparent var(--bw)),
    linear-gradient(90deg, rgba(17,24,39,0.05) var(--bw), transparent var(--bw));
  background-size:38px 38px;
}
.spchat.is-intro .spchat__log,
.spchat.is-intro .spchat__form,
.spchat.is-intro .spchat__note{ display:none; }
.spchat__intro-text{ margin:0; font-size:var(--text-sm); line-height:1.55; color:var(--neutral-900); }
/* One-line capture: the arrow submit lives INSIDE the field, ink on the
   arrow only, never on the field */
.spchat__intro-form{ position:relative; }
.spchat__intro-input{
  width:100%; font:inherit; font-size:var(--text-sm); color:var(--neutral-900);
  background:var(--surface); border:var(--bw) solid var(--border);
  border-radius:var(--radius-sm); padding:11px 48px 11px 12px;
}
.spchat__intro-input:focus{ outline:none; border-color:var(--neutral-900); }
.spchat__intro-start{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:0; cursor:pointer;
  border-radius:var(--radius-pill); background:var(--bg-dark); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease;
}
.spchat__intro-start:hover{ background:var(--accent); }
.spchat__intro-start svg{ width:14px; height:14px; }
.spchat__intro-skip{
  align-self:center; background:none; border:0; cursor:pointer; padding:2px 4px;
  font:inherit; font-size:var(--text-xs); color:var(--text-muted);
  text-decoration:underline; text-underline-offset:2px;
}
.spchat__intro-skip:hover{ color:var(--neutral-900); }

/* Conversation: paper + the house checker field (the hero recipe, unmasked) */
.spchat__log{
  flex:1; overflow-y:auto; padding:16px 14px;
  background-color:var(--bg);
  background-image:
    linear-gradient(0deg,  rgba(17,24,39,0.05) var(--bw), transparent var(--bw)),
    linear-gradient(90deg, rgba(17,24,39,0.05) var(--bw), transparent var(--bw));
  background-size:38px 38px;
  display:flex; flex-direction:column; gap:10px;
}
.spchat__msg{
  max-width:86%; padding:9px 13px; border-radius:var(--radius-md);
  font-size:12px; line-height:1.55; white-space:pre-line; overflow-wrap:break-word;
}
.spchat__msg--bot{
  align-self:flex-start; background:var(--surface);
  border:var(--bw) solid var(--border); border-bottom-left-radius:var(--radius-xs);
}
.spchat__msg--user{
  align-self:flex-end; background:var(--bg-dark); color:#fff;
  border-bottom-right-radius:var(--radius-xs);
}
.spchat__msg a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.spchat__msg--user a{ color:#fdba74; }

/* CTAs rendered from the model's [cta:...] markers; they sit as their own row
   UNDER the reply bubble, never inside it. Text links, ink by default, accent
   on hover. Weight 400 by house rule (600 is reserved for display headings). */
.spchat__ctas{
  align-self:flex-start; display:flex; flex-wrap:wrap; gap:6px 16px;
  max-width:92%; margin-top:-2px;
}
.spchat__cta{
  color:var(--neutral-900) !important; font-size:var(--text-xs); font-weight:400;
  text-decoration:underline; text-underline-offset:2px;
  transition:color .18s ease;
}
.spchat__cta:hover{ color:var(--accent) !important; }

/* Typing indicator */
.spchat__typing{ align-self:flex-start; display:flex; gap:4px; padding:12px 14px; }
.spchat__typing i{
  width:6px; height:6px; border-radius:var(--radius-pill); background:var(--brand-gray);
  animation:spchat-pulse 1.1s infinite ease-in-out;
}
.spchat__typing i:nth-child(2){ animation-delay:.18s; }
.spchat__typing i:nth-child(3){ animation-delay:.36s; }
@keyframes spchat-pulse{ 0%,80%,100%{ opacity:.25; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce){ .spchat__typing i{ animation:none; opacity:.6; } }

/* Input row */
.spchat__form{
  display:flex; align-items:flex-end; gap:8px;
  border-top:var(--bw) solid var(--border); padding:10px 12px; background:var(--surface);
}
.spchat__input{
  flex:1; border:0; background:none; font:inherit; font-size:var(--text-sm);
  color:var(--neutral-900); padding:8px 4px; min-width:0;
  resize:none; overflow-y:auto; max-height:108px; line-height:1.5;
}
.spchat__input:focus{ outline:none; }
.spchat__send{
  flex:0 0 auto; width:38px; height:38px; border-radius:var(--radius-pill);
  background:var(--accent); color:#fff; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease;
}
.spchat__send:hover{ background:var(--bg-dark); }
.spchat__send:disabled{ opacity:.45; cursor:default; }
.spchat__send svg{ width:16px; height:16px; }

.spchat__note{
  margin:0; padding:8px 12px 10px; background:var(--surface);
  border-top:var(--bw) solid var(--border);
  font-size:10px; line-height:1.5; color:var(--text-muted); text-align:center;
}
.spchat__note a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* Small screens: bottom sheet */
@media (max-width:480px){
  .spchat{ left:8px; right:8px; bottom:8px; width:auto; height:min(70dvh, 560px); }
}