/* SIBT Paper Design System: chat panel restyle (chat.css).
 * Loaded after paper.css by the homepage lane. CSS only: no markup or JS
 * changes. Restyles the existing chat widget classes to the Paper system:
 * plate panel (#edeaf3) on the paper wall (#e2e0eb), Instrument Serif for
 * the header title, DM Mono for labels, progress and system text, Command
 * Green accents for Sib and the send action, ink text. All selectors below
 * already exist in index.html (embedded chat styles) or are generated by
 * assets/site.js; no new classes are required.
 */

/* launcher: the fixed bottom CTA bar that opens the chat */
.sticky-cta{
  background:rgba(21,19,17,.94);
  border-top:1px solid rgba(231,231,226,.14);
}
.sticky-cta .sticky-note{color:rgba(231,231,226,.6)}
.sticky-cta .btn{font-family:var(--body);background:var(--green);color:#fff}
.sticky-cta .btn:hover{background:#0d3a30;box-shadow:0 10px 26px rgba(18,73,61,.45)}

/* scrim: paper-tinted ink, lets the wall show through */
.chat-scrim{background:rgba(21,19,17,.45)}

/* panel: a plate card lifted off the paper wall */
.chat-panel{
  background:var(--plate);
  border:1px solid var(--rule);
  border-radius:6px;
  box-shadow:0 2rem 5rem rgba(21,19,17,.28),0 .25rem 1rem rgba(21,19,17,.12);
  color:var(--ink);
  font-family:var(--body);
  background-image:var(--grain);
}
.chat-panel.open,.chat-scrim.open{display:block}

/* header: serif title, mono sub-label, sticky on the plate */
.chat-head{
  background:var(--plate);
  background-image:var(--grain);
  border-bottom:1px solid var(--rule);
  padding:1rem 1.25rem;
}
.chat-head h2{
  font-family:var(--display);
  font-weight:400;
  font-size:1.35rem;
  letter-spacing:-.01em;
  color:var(--ink);
}
.chat-head .chat-sub{
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--green);
  font-weight:500;
  margin-top:.25rem;
}
.chat-close{
  background:transparent;
  border:1px solid var(--rule);
  border-radius:6px;
  color:var(--ink);
}
.chat-close:hover{border-color:var(--ink);background:rgba(21,19,17,.05)}

/* body */
.chat-body{padding:1.25rem}

/* progress: mono step label, green fill on a rule track */
.chat-progress-label{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--green);
}
.chat-progress-bar{background:var(--rule)}
.chat-progress-bar span{background:var(--green)}

/* message log */
.chat-log{gap:.6rem;max-height:36vh}
.chat-msg{
  font-family:var(--body);
  border-radius:6px;
  padding:.65rem .9rem;
}
/* Sib speaks on paper with a green edge; the visitor speaks in green */
.chat-msg-bot{
  background:var(--paper);
  background-image:var(--grain);
  border:1px solid var(--rule);
  border-left:3px solid var(--green);
  color:var(--ink);
  align-self:flex-start;
}
.chat-msg-user{
  background:var(--green);
  border:1px solid var(--green);
  color:#f6f7f4;
  align-self:flex-end;
}

/* quick-reply chips: plate pills, green when hovered or chosen */
.chat-choice{
  font-family:var(--body);
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:999px;
  color:var(--ink);
}
.chat-choice:hover{border-color:var(--green);color:var(--green);background:var(--plate)}
.chat-choice.is-selected{border-color:var(--green);color:#fff;background:var(--green)}
.chat-choice:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}

/* input row: ledger-style fields on the plate */
.chat-body .field{margin-bottom:.9rem}
.chat-step .field label,
.chat-body label{
  display:block;
  font-family:var(--mono);
  font-weight:500;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:.35rem;
}
.chat-step input,
.chat-step textarea{
  width:100%;
  font:inherit;
  font-family:var(--body);
  padding:.8rem .9rem;
  border:1px solid var(--rule);
  border-radius:6px;
  background:var(--paper);
  color:var(--ink);
  min-height:48px;
}
.chat-step input:focus,
.chat-step textarea:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(18,73,61,.18);
}
.chat-step input::placeholder,
.chat-step textarea::placeholder{color:var(--ink-2,rgba(21,19,17,.46))}

/* actions row */
.chat-actions{margin-top:.25rem}
.chat-actions-stack{flex-direction:column;align-items:stretch}
.chat-actions-stack .btn{text-align:center}
.chat-back{
  font-family:var(--body);
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--rule);
  text-underline-offset:3px;
}
.chat-back:hover{color:var(--green);text-decoration-color:var(--green)}

/* buttons inside the panel: green send, line secondary */
.chat-panel .btn{
  font-family:var(--body);
  border-radius:999px;
  font-weight:600;
}
.chat-panel .btn-primary{background:var(--green);color:#fff;border:1px solid var(--green)}
.chat-panel .btn-primary:hover{background:#0d3a30;border-color:#0d3a30}
.chat-panel .btn-outline{background:transparent;border:1px solid var(--rule);color:var(--ink)}
.chat-panel .btn-outline:hover{border-color:var(--green);color:var(--green)}
.chat-panel .btn-block{flex:1}
.chat-step button[disabled]{
  opacity:.55;
  cursor:progress;
  background:#4d5a56;
  border-color:#4d5a56;
}

/* done state: serif summary on the plate, stacked actions */
.chat-done .chat-log{margin-bottom:1.25rem}
.chat-done .chat-msg-bot{border-left-color:var(--indigo)}

/* system text: mono labels under the flow */
.chat-note{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--ink-2,rgba(21,19,17,.46));
}
.chat-note a{color:var(--green);text-decoration:underline;text-underline-offset:2px}

/* validation error: mono alert, kept in a legible error red on paper */
.chat-error{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#8f1b1b;
  border-left:3px solid #8f1b1b;
  padding:.5rem .75rem;
  margin:.75rem 0 0;
  background:rgba(143,27,27,.06);
}

/* honeypot stays invisible */
.chat-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* focus: indigo ring keeps keyboard parity with the rest of the site */
.chat-panel :focus-visible{outline:3px solid var(--indigo);outline-offset:2px;border-radius:6px}

/* desktop: plate card pinned to the corner */
@media(min-width:40rem){
  .chat-panel{left:auto;width:25rem;right:1.5rem;bottom:1.5rem}
}

/* mobile: panel becomes a near-full-screen plate sheet */
@media(max-width:39.99rem){
  .chat-panel{
    top:.75rem;
    bottom:0;
    left:0;
    right:0;
    max-height:none;
    border-radius:6px 6px 0 0;
    display:none;
  }
  .chat-panel.open{display:flex;flex-direction:column}
  .chat-head{border-radius:6px 6px 0 0}
  .chat-body{
    flex:1;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
  }
  .chat-log{max-height:44vh}
}

@media(prefers-reduced-motion:reduce){
  .chat-panel,.chat-msg,.chat-choice{transition:none}
}

/* intro: overview screen before the first question */
.chat-intro{display:flex;flex-direction:column;gap:.6rem}
.chat-intro .chat-actions{margin-top:.5rem}