/* WellHeart London — text chat page. Reuses tokens/buttons/fonts from app.css;
   petite, rectangular, medical — not big consumer bubbles. RTL-aware via
   logical properties. */

.chat-wrap { max-width: 780px; margin: 0 auto; padding: 120px var(--gutter) var(--section); }
.chat-back {
  display: inline-block; margin-bottom: 28px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--secondary); text-decoration: none;
}
.chat-back:hover { color: var(--primary); text-decoration: underline; }
.chat-head { text-align: center; margin-bottom: 28px; }
.chat-head .brand-logo { height: 50px; width: auto; display: inline-block; margin-bottom: 22px; }
.chat-head .brand-word { display: inline-block; margin-bottom: 22px; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 26px; letter-spacing: .01em; color: var(--mid, #00081E); text-decoration: none; }
.chat-head .lede { max-width: 54ch; margin: 12px auto 0; font-size: 16px; }

/* Conversation panel */
.chat-panel {
  border: 1px solid var(--hairline); background: var(--white);
  border-radius: var(--radius); overflow: hidden;
}
/* The log grows with the conversation (no inner scroll box) so every reply is
   fully visible; the page scrolls and the input below stays reachable (sticky). */
.chat-log {
  min-height: 220px;
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
  background: var(--background);
}
.msg { max-width: 84%; display: flex; flex-direction: column; gap: 4px; scroll-margin-top: 84px; scroll-margin-bottom: 96px; }
.msg .who {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.msg .txt {
  font-size: 15px; line-height: 1.55; white-space: pre-wrap;
  padding: 11px 15px; border-radius: 3px;
}
.from-assistant { margin-inline-end: auto; align-items: flex-start; }
.from-assistant .who { color: var(--secondary); }
.from-assistant .txt { background: var(--surface-stone); border: 1px solid var(--hairline); color: var(--on-background); }
.from-you { margin-inline-start: auto; align-items: flex-end; }
.from-you .who { color: var(--on-surface-variant); }
.from-you .txt { background: var(--primary); color: var(--on-primary); }

/* Input row — sticks to the bottom of the viewport while chatting so it's
   always reachable as the log grows above it. */
.chat-input {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 10px; padding: 14px;
  border-top: 1px solid var(--hairline); background: var(--white);
  box-shadow: 0 -6px 16px rgba(10, 31, 68, .05);
}
.chat-input textarea {
  flex: 1; font: inherit; font-size: 15px; line-height: 1.5; color: var(--on-background);
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 11px 14px; resize: none; max-height: 140px; min-height: 44px;
}
.chat-input textarea:focus { outline: none; border-color: var(--primary); }
.chat-send { flex-shrink: 0; align-self: stretch; padding: 12px 22px; }
.chat-send[disabled] { opacity: .55; cursor: default; }
.chat-unavail { padding: 24px; text-align: center; font-size: 14px; color: var(--on-surface-variant); }

/* A gentle, low-key safety note — reassurance, not an alarm banner. */
.chat-emergency {
  display: flex; gap: 10px; align-items: baseline;
  margin: 16px 2px 0; font-size: 12.5px; line-height: 1.55;
  color: var(--on-surface-variant);
  border-inline-start: 2px solid rgba(119, 90, 25, .35); padding-inline-start: 12px;
}
.chat-emergency span[aria-hidden] { color: var(--secondary); }

/* Leave-your-details card */
.chat-lead { margin-top: 36px; border: 1px solid var(--hairline); background: var(--surface-stone); border-radius: var(--radius); padding: 30px; }
.chat-lead h2 { font-family: var(--serif); font-weight: 600; font-size: 21px; color: var(--primary); margin: 0 0 6px; }
.chat-lead .sub { font-size: 14px; color: var(--on-surface-variant); margin: 0 0 22px; }

/* Form controls (mirrors voice.css so this page needs only app.css + chat.css) */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); margin-bottom: 6px; }
.field input {
  width: 100%; font: inherit; font-size: 16px; color: var(--on-background);
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 14px;
}
.field input:focus { outline: none; border-color: var(--primary); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0; font-size: 14px; line-height: 1.5; color: var(--on-surface-variant); }
.consent input { margin-top: 3px; flex-shrink: 0; }
.consent a { color: var(--secondary); text-decoration: underline; }
.chat-lead .btn { width: 100%; }
.form-msg { margin-top: 14px; font-size: 14px; }
.form-msg.ok { color: #1f6b3a; }
.form-msg.err { color: #8a1b1b; }

/* Arabic: the chat is RTL and uses the bundled Naskh/Amiri like the rest of the site. */
[dir="rtl"] .chat-input textarea,
[dir="rtl"] .field input,
[dir="rtl"] .msg .txt { text-align: right; }
[dir="rtl"] .field label, [dir="rtl"] .msg .who { letter-spacing: normal; text-transform: none; }

@media (max-width: 767px) {
  .chat-wrap { padding-top: 90px; }
  .msg { max-width: 92%; }
}

/* What pressing Submit does, said once, plainly, where the finger is. */
.submit-note { margin: 14px 0 0; font-size: 11.5px; line-height: 1.6; color: #74767d; }
.submit-note a { color: var(--secondary); }
.chat-lead form[hidden] { display: none; }

/* Submit sits under the conversation, the summary folded behind one link
   (mirrors .assist-submit on the enquiry page so the two read as one product). */
.chat-lead .assist-submit .btn { width: 100%; }
.chat-lead .field[hidden] { display: none; }
.chat-lead .details-field { margin-top: 16px; }
.chat-lead .details-field textarea {
  width: 100%; font: inherit; font-size: 15px; line-height: 1.6; color: var(--on-background);
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 12px 14px; resize: vertical;
}
.chat-lead .details-field textarea:focus { outline: none; border-color: var(--primary); }
.review-row { margin: 12px 0 0; }
.review-toggle {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--secondary); text-decoration: underline; cursor: pointer;
}
.review-toggle:hover { color: var(--primary); }

/* ── The 999/111 stop ─────────────────────────────────────────────────────
   Shown when either assistant refers someone to the emergency services. Not a
   notice — the page's only remaining job. Same restrained palette as the
   emergency banner, but the two things to tap are unmistakable and full width,
   because the person reading this may be doing so one-handed and frightened. */
.emergency-act {
  border: 1px solid #d9a9a6; background: #fbf1f1; border-radius: var(--radius);
  padding: 22px 22px 24px; margin: 0 0 22px;
}
.emergency-act[hidden] { display: none; }
.emergency-act h2 {
  font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.25;
  color: #8a1b1b; margin: 0 0 10px;
}
.emergency-act p { font-size: 14.5px; line-height: 1.6; color: #6b1f1f; margin: 0 0 18px; }
.emergency-act-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn--emg {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; background: #a81f1f; color: #fff; border: 1px solid #a81f1f;
  border-radius: var(--radius); padding: 16px 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
}
.btn--emg:hover { background: #8a1b1b; border-color: #8a1b1b; color: #fff; }
.btn--emg .icon { width: 17px; height: 17px; }
/* 111 is the calmer of the two and must not compete with 999 for the thumb. */
.btn--emg-alt { background: transparent; color: #8a1b1b; border-color: #c08d8a; }
.btn--emg-alt:hover { background: #f4e2e1; color: #8a1b1b; border-color: #a81f1f; }
@media (max-width: 480px) {
  .emergency-act { padding: 18px 16px 20px; }
  .emergency-act h2 { font-size: 20px; }
  .emergency-act-btns { grid-template-columns: 1fr; }
}

/* ── Booking-helper actions (2026-08-27) — the deterministic buttons above the composer for a
      visitor who arrived from the blocked booking panel. The chat explains; these resolve. */
.chat-bookhelp { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 4px; border-top: 1px solid var(--hairline, #e5e1d8); }
.chat-bookhelp-row { margin: 0; display: flex; gap: 8px; }
.chat-bookhelp-btn { width: 100%; }
.chat-bookhelp-emailrow input { flex: 1 1 auto; min-width: 0; padding: 9px 11px; font-size: 16px;
  border: 1px solid var(--hairline, #e5e1d8); border-radius: 2px; }
.chat-bookhelp-emailrow .chat-bookhelp-btn { width: auto; flex: 0 0 auto; }
.chat-bookhelp .is-busy { opacity: .65; pointer-events: none; }