/* "Ask the house" chat widget. All classes ck-chat-*. Rides pages that
   never load portal.css (the mirrored site, /book), so the --gp-* values
   it uses are declared here on the widget root — keep in sync with
   portal.css :root (identical values, so the portal is unaffected). The
   Söhne font-faces come from the mirrored site stylesheet, loaded on
   every surface. */

#ck-chat {
  --gp-bg: #faf8f4;
  --gp-panel: #ffffff;
  --gp-ink: #1c1a17;
  --gp-muted: #6f6a61;
  --gp-line: #e5e0d6;
  --gp-accent: #8a7350;
  --gp-accent-ink: #ffffff;
  --gp-error: #8c3b2e;
  --gp-font: "Sohne Leicht", Arial, sans-serif;
  --gp-font-wide: "Sohnebreit Leicht", Arial, sans-serif;
}
.ck-chat-panel {
  font-family: var(--gp-font);
  color: var(--gp-ink);
}

.ck-chat-pill {
  position: fixed;
  right: 22px;
  bottom: 22px;
  /* The mirrored Webflow pages stack floating art and text up to
     z-index 9999; the widget must beat all of it and stay under the
     .ck-nf 404 modal (99999). */
  z-index: 99990;
  padding: 12px 20px;
  border: 1px solid var(--gp-line);
  border-radius: 999px;
  background: var(--gp-accent);
  color: var(--gp-accent-ink);
  font-family: var(--gp-font-wide);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(28, 26, 23, 0.18);
}
.ck-chat-pill:hover { filter: brightness(1.06); }

.ck-chat-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 99991; /* above the pill; see the pill's stacking note */
  width: min(590px, calc(100vw - 24px));
  /* Starts as small as its contents and grows with the conversation,
     capping out before it dominates the page. */
  max-height: min(88vh, 830px);
  display: flex;
  flex-direction: column;
  background: var(--gp-panel);
  border: 1px solid var(--gp-line);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(28, 26, 23, 0.22);
  overflow: hidden;
}
@media (max-width: 480px) {
  .ck-chat-panel {
    right: 0; bottom: 0;
    width: 100vw; max-height: 100dvh; height: 100dvh;
    border-radius: 0; border: none;
  }
  /* Same iOS focus-zoom rule for the debug model picker. */
  .ck-chat-model { font-size: 16px; }
}

/* Authored display values beat the UA's [hidden] { display: none } rule —
   without this, the panel ignores its hidden attribute entirely (it sat
   open on page load and the close button appeared dead). */
.ck-chat-panel[hidden],
.ck-chat-pill[hidden],
.ck-chat-model[hidden],
.ck-chat-voice-btn[hidden] {
  display: none !important;
}

.ck-chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gp-line);
}
.ck-chat-title {
  flex: 1;
  font-family: var(--gp-font-wide);
  letter-spacing: 0.12em;
  font-size: 13px;
  text-transform: uppercase;
}
.ck-chat-model {
  max-width: 45%;
  font: inherit; font-size: 12.5px;
  color: var(--gp-muted);
  border: 1px solid var(--gp-line);
  border-radius: 5px;
  background: var(--gp-bg);
  padding: 3px 6px;
}
.ck-chat-close {
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1;
  color: var(--gp-muted); padding: 0 2px;
}

.ck-chat-log {
  flex: 1 1 auto;
  min-height: 56px; /* room for the greeting note before any messages */
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ck-chat-msg {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.ck-chat-msg p { margin: 0 0 8px; }
.ck-chat-msg p:last-child { margin-bottom: 0; }
.ck-chat-msg ul { margin: 4px 0; padding-left: 20px; }
.ck-chat-msg code {
  font-size: 13px;
  background: var(--gp-bg);
  border: 1px solid var(--gp-line);
  border-radius: 4px;
  padding: 1px 4px;
}
.ck-chat-msg a { color: var(--gp-accent); }

.ck-chat-user {
  align-self: flex-end;
  background: var(--gp-accent);
  color: var(--gp-accent-ink);
  border-bottom-right-radius: 4px;
}
.ck-chat-user a, .ck-chat-user code { color: inherit; background: transparent; }

.ck-chat-assistant {
  align-self: flex-start;
  background: var(--gp-bg);
  border: 1px solid var(--gp-line);
  border-bottom-left-radius: 4px;
}
.ck-chat-streaming::after {
  content: "▍";
  color: var(--gp-muted);
  animation: ck-chat-blink 1s steps(2) infinite;
}
@keyframes ck-chat-blink { 50% { opacity: 0; } }

.ck-chat-tool {
  color: var(--gp-muted);
  font-style: italic;
  font-size: 13.5px;
}

.ck-chat-note {
  align-self: center;
  color: var(--gp-muted);
  font-size: 13px;
  text-align: center;
  max-width: 95%;
}

.ck-chat-error {
  align-self: center;
  color: var(--gp-error);
  font-size: 13.5px;
  text-align: center;
  max-width: 95%;
}

.ck-chat-meta {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--gp-muted);
  letter-spacing: 0.02em;
}

.ck-chat-offline .ck-chat-head { opacity: 0.55; }

/* Simple 2D line icons (inline SVG, stroke = currentColor); state changes
   recolor the button and the icon follows. */
.ck-chat-voice-btn {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gp-line);
  border-radius: 50%;
  background: var(--gp-bg);
  color: var(--gp-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.ck-chat-voice-btn:hover { color: var(--gp-ink); border-color: var(--gp-accent); }
.ck-chat-tts-on {
  background: var(--gp-accent);
  border-color: var(--gp-accent);
  color: var(--gp-accent-ink);
}
.ck-chat-tts-on:hover { color: var(--gp-accent-ink); }
.ck-chat-mic.ck-chat-recording {
  background: var(--gp-error);
  border-color: var(--gp-error);
  color: #fff;
  animation: ck-chat-pulse 1.4s ease-in-out infinite;
}
.ck-chat-mic.ck-chat-recording:hover { color: #fff; }
@keyframes ck-chat-pulse {
  50% { box-shadow: 0 0 0 6px rgba(140, 59, 46, 0.18); }
}

.ck-chat-form {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--gp-line);
}
.ck-chat-form textarea {
  flex: 1;
  resize: none;
  /* 16px minimum: anything smaller makes iOS Safari zoom the page when
     the field takes focus, leaving the full-screen panel hanging past
     the visual viewport until the guest pinches back out. */
  font: inherit; font-size: 16px;
  color: var(--gp-ink);
  background: var(--gp-bg);
  border: 1px solid var(--gp-line);
  border-radius: 8px;
  padding: 9px 12px;
  max-height: 120px;
}
.ck-chat-form textarea:focus { outline: 1.5px solid var(--gp-accent); }
.ck-chat-send {
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: var(--gp-accent);
  color: var(--gp-accent-ink);
  font-size: 17px;
  cursor: pointer;
  flex-shrink: 0;
}
.ck-chat-send:disabled { opacity: 0.45; cursor: default; }