/* Tufenkian Heritage Hotels palette — terracotta (#CC5A33) + charcoal (#231F20)
 * + Raleway, read from the brand. The variable NAMES are inherited verbatim from
 * the ported widget (internal, never user-visible); only their VALUES change, so
 * every rule below keeps working unchanged. */
:root {
  --kmr-navy: #CC5A33;
  --kmr-navy-deep: #a8452a;
  --kmr-accent: #b34e2c;
  --kmr-accent-soft: #e8c4b3;
  --kmr-bone: #f7f2ec;
  --kmr-bone-card: #fcf8f3;
  --kmr-ink: #231F20;
  --kmr-muted: #6b625d;
  --kmr-line: #e7ddd2;
  --kmr-agent-bg: #eef2ea;
  --kmr-agent-line: #d6dccb;
  --kmr-agent-ink: #5c6b3f;
  --kmr-serif: 'Raleway', 'Noto Serif Armenian', Georgia, serif;
  --kmr-sans: 'Raleway', 'Noto Sans Armenian', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.kmr-chat { font-family: var(--kmr-sans); }
.kmr-chat *, .kmr-chat *::before, .kmr-chat *::after { box-sizing: border-box; }

/* launcher */
.kmr-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 2147483000;
  width: 70px; height: 70px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--kmr-navy); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(204, 90, 51, 0.38);
  transition: transform .18s ease, background .18s ease;
}
.kmr-launcher:hover { transform: translateY(-2px); background: var(--kmr-navy-deep); }
.kmr-launcher .kmr-ic-open { display: grid; place-items: center; }
.kmr-launcher .kmr-ic-close { display: none; }
.kmr-open .kmr-launcher .kmr-ic-open { display: none; }
.kmr-open .kmr-launcher .kmr-ic-close { display: grid; place-items: center; }

/* subtle one-time attention pulse, a few rings then done */
@keyframes kmr-launcher-pulse {
  0% { box-shadow: 0 10px 30px rgba(204, 90, 51, 0.38), 0 0 0 0 rgba(204, 90, 51, 0.45); }
  70% { box-shadow: 0 10px 30px rgba(204, 90, 51, 0.38), 0 0 0 16px rgba(204, 90, 51, 0); }
  100% { box-shadow: 0 10px 30px rgba(204, 90, 51, 0.38), 0 0 0 0 rgba(204, 90, 51, 0); }
}
.kmr-launcher.kmr-attn { animation: kmr-launcher-pulse 1.8s ease-out 3; }
@media (prefers-reduced-motion: reduce) {
  .kmr-launcher.kmr-attn { animation: none; }
}

/* "do you have questions?" bubble near the launcher */
.kmr-cta {
  position: fixed; right: 22px; bottom: 104px; z-index: 2147482999;
  max-width: 216px; background: #fff; color: var(--kmr-ink);
  border: 1px solid var(--kmr-line); border-radius: 16px 16px 4px 16px;
  padding: 11px 30px 11px 15px; font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 10px 26px rgba(4, 30, 49, 0.18);
  opacity: 0; transform: translateY(8px) scale(.96); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; cursor: pointer;
}
.kmr-cta-visible .kmr-cta { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.kmr-open .kmr-cta { display: none; }
.kmr-cta-text { margin: 0; }
.kmr-cta-close {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: none;
  background: transparent; color: var(--kmr-muted); cursor: pointer; border-radius: 50%;
  display: grid; place-items: center;
}
.kmr-cta-close:hover { background: rgba(0, 0, 0, 0.06); }

/* backdrop — disabled (task 55): opening the chat must NOT dim or freeze the
   rest of the page, on any viewport. Kept as a DOM no-op (display: none)
   rather than deleted from widget.js, so the JS backdrop click-listener
   just becomes harmless dead code instead of needing a JS change too.
   Closing the panel still works via the launcher, the header close button,
   and Escape. */
.kmr-backdrop { display: none; }

/* panel */
.kmr-panel {
  position: fixed; right: 22px; bottom: 100px; z-index: 2147483001;
  width: 384px; max-width: calc(100vw - 32px); height: 588px; max-height: calc(100vh - 136px);
  background: var(--kmr-bone); border: 1px solid var(--kmr-line);
  border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(4, 30, 49, 0.28);
  transform: translateY(14px) scale(.97); opacity: 0; pointer-events: none;
  transform-origin: bottom right; transition: transform .22s ease, opacity .22s ease;
}
.kmr-open .kmr-panel { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

/* header with arch motif */
.kmr-header {
  position: relative; background: var(--kmr-navy); color: #fff;
  padding: 18px 88px 20px 20px; overflow: hidden;
}
.kmr-header .kmr-arch {
  position: absolute; right: -30px; top: -46px; width: 130px; height: 130px;
  border: 2px solid rgba(255, 255, 255, 0.30);
  border-radius: 100px 100px 0 0; transform: rotate(8deg); pointer-events: none;
}
.kmr-hrow { display: flex; align-items: flex-start; gap: 10px; }
.kmr-havatar {
  flex: none; width: 32px; height: 32px; margin-top: 1px; border-radius: 50%;
  background: var(--kmr-bone); display: grid; place-items: center;
}
.kmr-htext { min-width: 0; }
.kmr-htitle { margin: 0; font-family: var(--kmr-serif); font-size: 18px; font-weight: 600; }
.kmr-hsub { margin: 4px 0 0; font-size: 12.5px; color: var(--kmr-accent-soft); line-height: 1.35; max-width: 250px; }
.kmr-header-actions { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.kmr-newchat, .kmr-close {
  width: 30px; height: 30px; border: none; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, 0.12); display: grid; place-items: center; flex: none;
}
.kmr-newchat:hover, .kmr-close:hover { background: rgba(255, 255, 255, 0.22); }

/* transcript */
.kmr-transcript { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.kmr-row { display: flex; align-items: flex-start; gap: 8px; }
.kmr-user { justify-content: flex-end; }
.kmr-assistant, .kmr-agent { justify-content: flex-start; }
/* the big photo avatars read better vertically centered on their column
   than top-aligned like the old tiny icon avatars */
.kmr-row.kmr-assistant, .kmr-row.kmr-agent { align-items: center; gap: 10px; }
.kmr-bcol { display: flex; flex-direction: column; max-width: 82%; min-width: 0; }
.kmr-avatar {
  flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%;
  display: grid; place-items: center;
}
.kmr-avatar-bot { background: var(--kmr-accent-soft); color: var(--kmr-navy); }
/* The bot and "Anna" now share ONE generated photo avatar, both at the same
   big 65px size (David: "make sure both profile pics are the same size in
   the chat, big as Anna"). The <img> fills the round frame edge-to-edge. */
.kmr-avatar-photo {
  width: 65px; height: 65px; margin-top: 0; padding: 0;
  overflow: hidden; background: var(--kmr-accent-soft);
  box-shadow: 0 1px 3px rgba(204, 90, 51, 0.18);
}
.kmr-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.kmr-agent-label {
  margin: 0 0 2px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--kmr-agent-ink);
}
.kmr-bubble {
  max-width: 100%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word;
}
.kmr-user .kmr-bubble { background: var(--kmr-navy); color: #fff; border-bottom-right-radius: 5px; }
.kmr-assistant .kmr-bubble { background: var(--kmr-bone-card); color: var(--kmr-ink); border: 1px solid var(--kmr-line); border-bottom-left-radius: 5px; }
.kmr-bubble.kmr-bubble-agent { background: var(--kmr-agent-bg); color: var(--kmr-ink); border: 1px solid var(--kmr-agent-line); border-bottom-left-radius: 5px; }
.kmr-bubble.kmr-error { background: #fbeaea; border-color: #edd0d0; color: #8a2b2b; }
.kmr-streaming::after {
  content: ''; display: inline-block; width: 7px; height: 15px; margin-left: 2px;
  background: var(--kmr-accent); vertical-align: text-bottom; animation: kmr-blink 1s step-end infinite;
}
@keyframes kmr-blink { 50% { opacity: 0; } }

/* typing / "thinking…" indicator — word is static, only the 3 dots animate */
.kmr-typing { display: inline-flex; gap: 6px; align-items: center; }
.kmr-typing-label { font-size: 13px; font-style: italic; color: var(--kmr-muted); }
.kmr-typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.kmr-typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--kmr-accent); opacity: .4; animation: kmr-bounce 1.2s infinite; }
.kmr-typing-dots span:nth-child(2) { animation-delay: .15s; }
.kmr-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes kmr-bounce { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .kmr-typing-dots span { animation: none; opacity: .7; }
}

/* connecting-to-a-human note */
.kmr-connecting {
  margin: 2px 0; padding: 6px 10px; text-align: center; font-size: 12px;
  font-style: italic; color: var(--kmr-muted);
}

/* handoff-suggested buttons */
.kmr-handoff-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px 34px; }
.kmr-handoff-btn {
  font-family: var(--kmr-sans); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none;
  padding: 9px 13px; border-radius: 999px; border: 1px solid var(--kmr-navy);
  background: #fff; color: var(--kmr-navy); display: inline-flex; align-items: center;
  min-height: 36px; transition: background .15s, color .15s;
}
.kmr-handoff-talk { background: var(--kmr-navy); color: #fff; }
.kmr-handoff-talk:hover { background: var(--kmr-navy-deep); }
.kmr-handoff-talk:disabled { opacity: .55; cursor: default; }
.kmr-handoff-call:hover { background: var(--kmr-bone-card); }

/* suggestions */
.kmr-suggests { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.kmr-chip {
  font-family: var(--kmr-sans); font-size: 13px; cursor: pointer;
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--kmr-accent-soft);
  background: var(--kmr-bone-card); color: var(--kmr-accent); transition: background .15s, color .15s;
}
.kmr-chip:hover { background: var(--kmr-navy); color: #fff; border-color: var(--kmr-navy); }

/* composer "New chat" button — a second, easy-to-find "start over" right
   above the input, in addition to the header's newChat icon (task 42).
   Task 54: relabeled from "Clear" + enlarged into a real pill button
   (was a bare ghost-text control); task 53: fully rounded to match the
   rest of the widget's soft/pill language (chips, handoff buttons). */
.kmr-composer-bar { display: flex; justify-content: flex-end; padding: 6px 12px 0; background: var(--kmr-bone-card); }
.kmr-clear {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--kmr-sans);
  font-size: 13px; font-weight: 600; color: var(--kmr-navy); background: #fff;
  border: 1px solid var(--kmr-line); cursor: pointer; padding: 8px 14px; min-height: 34px;
  border-radius: 999px; transition: background .15s, color .15s, border-color .15s;
}
.kmr-clear:hover { background: var(--kmr-navy); color: #fff; border-color: var(--kmr-navy); }
.kmr-clear svg { flex: none; }

/* form */
.kmr-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--kmr-line); background: var(--kmr-bone-card); }
.kmr-input {
  flex: 1; resize: none; font-family: var(--kmr-sans); font-size: 14px; line-height: 1.4;
  padding: 10px 14px; border: 1px solid var(--kmr-line); border-radius: 18px;
  background: #fff; color: var(--kmr-ink); max-height: 120px; outline: none;
}
.kmr-input:focus { border-color: var(--kmr-accent); box-shadow: 0 0 0 3px rgba(36, 96, 140, 0.14); }
/* task 53: fully round (was a 12px square-ish button) so it reads as soft
   as the rest of the widget's controls (launcher, header icons, chips). */
.kmr-send {
  flex: none; width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer;
  background: var(--kmr-navy); color: #fff; display: grid; place-items: center; transition: background .15s;
}
.kmr-send:disabled { opacity: .45; cursor: default; }
.kmr-send:not(:disabled):hover { background: var(--kmr-navy-deep); }

.kmr-disclaimer { margin: 0; padding: 8px 14px 12px; font-size: 11px; color: var(--kmr-muted); text-align: center; background: var(--kmr-bone-card); }

/* "Powered by gsd.club" credit — a subtle footer under the AI disclaimer,
   deliberately understated (smaller + lighter than the disclaimer above it)
   so it never competes with the clinic's own branding. */
.kmr-poweredby {
  margin: 0; padding: 0 14px 10px; font-size: 10.5px; color: var(--kmr-muted);
  text-align: center; background: var(--kmr-bone-card); opacity: .75;
}
.kmr-poweredby a { color: var(--kmr-muted); text-decoration: underline; text-underline-offset: 2px; }
.kmr-poweredby a:hover { color: var(--kmr-accent); }

@media (max-width: 640px) {
  .kmr-panel {
    /* A small inset (instead of true edge-to-edge) so the rounded corners
       stay visible — overflow: hidden (base rule) still clips children to
       them, and the panel is never cut off since it's inset from every
       edge, not flush against one. */
    top: 10px; right: 10px; bottom: 10px; left: 10px;
    width: auto; max-width: none; height: auto; max-height: none;
    border-radius: 18px;
  }
  /* Offset by the iOS home-indicator safe area so the launcher never tucks
     under it, and keep the CTA a clear step above the 64px launcher. */
  .kmr-launcher { width: 64px; height: 64px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .kmr-cta { right: 16px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 96px); }
  /* iOS Safari zooms the page when a focused input has font-size < 16px —
     16px here (not just a rem/em trick) kills that zoom-on-focus entirely. */
  .kmr-input { font-size: 16px; }
  .kmr-header { padding: 16px 116px 16px 16px; }
  .kmr-havatar { width: 28px; height: 28px; }
  .kmr-header-actions { gap: 4px; }
  .kmr-newchat, .kmr-close { width: 40px; height: 40px; }
  .kmr-send { width: 44px; height: 44px; }
  .kmr-form { padding: 10px; gap: 6px; }
  .kmr-composer-bar { padding: 6px 10px 0; }
  .kmr-clear { min-height: 40px; padding: 9px 16px; font-size: 13.5px; }
  .kmr-avatar { width: 24px; height: 24px; }
  /* both photo avatars stay equal-sized on mobile too */
  .kmr-avatar-photo { width: 58px; height: 58px; }
  .kmr-bcol { max-width: 86%; }
  .kmr-chip { padding: 10px 14px; min-height: 40px; }
  .kmr-handoff-row { margin-left: 30px; }
  .kmr-handoff-btn { min-height: 40px; padding: 10px 14px; }
}