/* Karnidale chat widget — branding (spec §8). Mobile-first.
   SCAFFOLD: tokens + layout in place; refine fonts once the Festival app
   families are confirmed. */

:root {
  --kc-purple: #6B3FA0;       /* primary: launcher, header, send icon, focus */
  --kc-purple-dark: #4A2C70;  /* text on light */
  --kc-purple-tint: #F1ECF7;  /* bot message bubbles */
  --kc-panel-bg: #FFFFFF;
  --kc-text: #2A2433;
  /* Matches the Karnidale apps: Playfair Display headings, Raleway body
     (with graceful fallbacks where those web fonts aren't loaded). */
  --kc-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --kc-font-body: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root {
  /* Sit clear of the app's bottom nav bar. Uses the app's own --nav-h when it
     exposes one (Festival = 70px); falls back to 68px (ITP's sticky nav). */
  --kc-bottom: calc(var(--nav-h, 68px) + 18px + env(safe-area-inset-bottom, 0px));
}

.kc-launcher {
  position: fixed;
  right: 16px;
  bottom: var(--kc-bottom);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--kc-purple);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 2147483000;
}

.kc-panel {
  position: fixed;
  right: 16px;
  bottom: calc(var(--kc-bottom) + 68px);
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100dvh - var(--kc-bottom) - 96px));
  background: var(--kc-panel-bg);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--kc-font-body);
  color: var(--kc-text);
  z-index: 2147483000;
}
.kc-panel.kc-open { display: flex; }

.kc-header {
  background: var(--kc-purple);
  color: #fff;
  padding: 14px 16px;
  font-family: var(--kc-font-heading);
  font-size: 1.05rem;
}

.kc-messages { flex: 1; overflow-y: auto; padding: 12px; }

.kc-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; margin: 6px 0; line-height: 1.4; }
.kc-msg-bot { background: var(--kc-purple-tint); color: var(--kc-purple-dark); }
.kc-msg-user { background: var(--kc-purple); color: #fff; margin-left: auto; }

.kc-inputbar { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #eee; }
.kc-input { flex: 1; border: 1px solid #ccc; border-radius: 10px; padding: 8px 10px; font: inherit; }
.kc-input:focus { outline: 2px solid var(--kc-purple); border-color: var(--kc-purple); }
.kc-send { background: var(--kc-purple); color: #fff; border: none; border-radius: 10px; padding: 0 14px; cursor: pointer; }

/* Inline "leave your details" capture form (spec §6) */
.kc-capture { border: 1px solid var(--kc-purple-tint); border-radius: 12px; padding: 10px; margin: 6px 0; }
.kc-capture input { display: block; width: 100%; margin: 6px 0; padding: 8px; border: 1px solid #ccc; border-radius: 8px; }