/* The live chat bubble and panel. Square, like everything else on the site; indigo with a
   brass rule, and quiet enough not to compete with the page's own call to action. */

.chat { position: fixed; right: calc(16px + var(--safe-right)); bottom: calc(16px + var(--safe-bottom)); z-index: 45; font-family: var(--font-sans); }

.chat__bubble {
  display: inline-flex; align-items: center; gap: 8px; position: relative;
  min-height: var(--tap-min); padding: 0 18px;
  background: var(--indigo); color: var(--on-indigo); border: 0; border-bottom: 3px solid var(--brass);
  font: 600 14px/1 var(--font-sans); letter-spacing: var(--ls-button); text-transform: uppercase;
  cursor: pointer; box-shadow: 0 6px 20px rgba(13, 25, 41, 0.25);
}
.chat__bubble svg, .chat__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.chat__bubble:hover { background: var(--indigo-deep); }
.chat__dot { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; background: var(--brass-light); border: 2px solid var(--indigo); }
.chat.is-open .chat__bubble { display: none; }

.chat__panel {
  display: flex; flex-direction: column;
  width: 360px; height: min(560px, calc(100vh - 32px));
  background: var(--salt-paper); border: 1px solid var(--line-dark); border-top: 3px solid var(--brass);
  box-shadow: 0 12px 40px rgba(13, 25, 41, 0.28);
}
.chat__panel[hidden] { display: none; }

.chat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: 14px 16px; background: var(--indigo); color: var(--on-indigo); }
.chat__title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.chat__wa { font-size: 13px; color: var(--on-indigo-accent); }
.chat__close { background: none; border: 0; color: var(--on-indigo); min-width: var(--tap-min); min-height: var(--tap-min); display: grid; place-items: center; cursor: pointer; margin: -10px -10px 0 0; }

.chat__start { display: grid; gap: 10px; padding: 16px; overflow-y: auto; }
.chat__start[hidden] { display: none; }
.chat__start label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.chat__start input { font: 16px var(--font-sans); min-height: var(--tap-min); padding: 0 12px; border: 1px solid var(--line-dark); background: #fff; color: var(--ink); }
.chat__intro { margin: 0; color: var(--ink); line-height: 1.5; }
.chat__note { margin: 0; font-size: 12.5px; color: var(--ink-muted); line-height: 1.45; }
.chat__trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.chat__problem { margin: 0; padding: 8px 10px; font-size: 13px; background: #FBEDEA; border-left: 3px solid #8E3A26; color: var(--ink); }
.chat__problem[hidden] { display: none; }

.chat__thread { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat__thread[hidden] { display: none; }
.chat__msgs { list-style: none; margin: 0; padding: 14px 16px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.chat__msg { max-width: 85%; }
.chat__msg p { margin: 0; padding: 9px 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat__who { display: block; font-size: 11.5px; color: var(--ink-muted); margin-bottom: 3px; }
.chat__msg--guest { align-self: flex-end; text-align: right; }
.chat__msg--guest p { background: var(--indigo); color: var(--on-indigo); text-align: left; }
.chat__msg--staff { align-self: flex-start; }
.chat__msg--staff p { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brass); color: var(--ink); }
.chat__msg--system { align-self: stretch; max-width: none; }
.chat__msg--system p { font-size: 13px; color: var(--ink-muted); background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 0; }
.chat__typing { margin: 0; padding: 0 16px 6px; font-size: 12.5px; font-style: italic; color: var(--ink-muted); }
.chat__typing[hidden] { display: none; }
.chat__thread > .chat__problem { margin: 0 16px 8px; }

.chat__compose { display: flex; gap: 8px; padding: 10px 12px calc(10px + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--salt); }
.chat__compose textarea { flex: 1; resize: none; font: 16px/1.4 var(--font-sans); padding: 10px 12px; border: 1px solid var(--line-dark); background: #fff; color: var(--ink); max-height: 120px; }
.chat__compose .btn { min-width: 0; padding-inline: 16px; }

/* A phone gets the whole screen: a floating box on a 390px screen is a box nobody can type in. */
@media (max-width: 560px) {
  .chat.is-open { inset: 0; }
  .chat__panel { width: 100%; height: 100%; height: 100dvh; border: 0; }
  .chat__bubble span:not(.chat__dot) { display: none; }
  .chat__bubble { padding: 0 14px; }
}

/* With the phone tab bar, Chat is one of its buttons: no bubble in the corner, and the
   panel opens above the bar (or over everything, on a phone, as above). */
@media (max-width: 860px) {
  .has-tabbar .chat__bubble { display: none; }
  .has-tabbar .chat { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px); }
  .has-tabbar .chat__panel { height: min(560px, calc(100vh - var(--tabbar-h) - var(--safe-bottom) - 28px)); }
}
@media (max-width: 560px) {
  .has-tabbar .chat.is-open { bottom: 0; }
  .has-tabbar .chat__panel { height: 100%; height: 100dvh; }
}

@media print { .chat { display: none; } }

.chat__practice { margin: 0; padding: 8px 10px; font-size: 12.5px; background: #FBF6EC; border-left: 3px solid var(--brass); color: var(--ink); }

/* "Keep talking" after the booking or contact form. */
.continue-chat { max-width: 52ch; margin-top: var(--s-4); padding: var(--s-4); background: var(--salt-paper); border: 1px solid var(--line); border-left: 3px solid var(--brass); display: grid; gap: var(--s-3); justify-items: start; }
.continue-chat p { margin: 0; }