/* SiteSetu Ask — mobile-first (360px baseline), no build step, no CDN fonts.
   Design tokens: deep teal primary (overridable per business via --primary),
   cool grey ground, marigold reserved for "needs attention" states. */

:root {
  --primary: #0B7A75;
  --primary-soft: #E1F2F0;
  --primary-line: #B5DCD8;
  --ink: #0F1E2E;
  --ink-2: #3F4E5E;
  --caption: #5E6D7C;
  --ground: #EEF2F1;
  --surface: #FFFFFF;
  --surface-2: #F6F9F8;
  --line: #DCE3E2;
  --line-strong: #C5D2D1;
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* A business can set any primary colour; derive the tints from it where the
   browser supports color-mix, otherwise the teal tints above remain. */
@supports (color: color-mix(in srgb, red 10%, white)) {
  :root {
    --primary-soft: color-mix(in srgb, var(--primary) 12%, white);
    --primary-line: color-mix(in srgb, var(--primary) 30%, white);
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--ground);
  overflow: hidden;
}

body.embed {
  background: transparent;
}

button, input { font-family: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- header ---------- */

.ask-header {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 16px 16px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.ask-logo {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--ground);
}

.ask-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 21px;
}

.ask-header-text {
  flex: 1 1 160px;
  min-width: 0;
}

.ask-header-text h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ask-subline {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ask-hours-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.ask-hours-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.ask-hours-badge.is-open {
  background: #DDF3E4;
  color: #14633A;
}

.ask-hours-badge.is-closed {
  background: #E8ECEC;
  color: #3F4E5E;
}

/* ---------- chat area ---------- */

.ask-chat {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 8px;
}

/* AI disclosure — the assistant never pretends to be human, so say so up front. */
.ask-note {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.ask-demo {
  margin: 8px 12px 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: #FFF6E0;
  border: 1px solid #F3DDA4;
  color: #6B4E00;
  font-size: 12.5px;
  line-height: 1.45;
}

.ask-note svg {
  color: var(--primary);
  flex: 0 0 auto;
}

/* Reply-language picker inside the "AI receptionist" pill. */
.ask-lang select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 32px;
  padding: 4px 26px 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--primary-soft, #E1F2F0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ask-lang select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.ask-messages {
  /* margin-top:auto anchors the conversation to the bottom of a short chat
     (like a messaging app) while still scrolling normally once it overflows. */
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ask-bubble {
  max-width: 82%;
  padding: 11px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.ask-bubble.bot {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}

.ask-bubble.user {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.ask-bubble.system {
  align-self: center;
  background: #FFF1D6;
  color: #7A4B00;
  font-size: 13px;
  text-align: center;
  max-width: 90%;
}

.ask-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 14px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  border-bottom-left-radius: 6px;
}

.ask-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--caption);
  animation: ask-bounce 1.2s infinite ease-in-out;
}

.ask-typing span:nth-child(2) { animation-delay: 0.15s; }
.ask-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ask-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ask-typing span { animation: none; opacity: 0.8; }
}

.ask-retry {
  align-self: center;
  min-height: 44px;
  margin-top: 2px;
  padding: 0 20px;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  background: var(--surface);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- quick actions ---------- */

.ask-quick-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 6px 14px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
  scroll-snap-type: x proximity;
  /* Fades the chip row's own content near the right edge — not a background
     gradient — so it looks correct whether the page behind it is opaque
     (normal mode) or transparent (?embed=1). */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
}

.ask-quick-actions::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.ask-quick-actions:empty {
  padding: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.ask-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* The booking action is the conversion — give it the filled treatment. */
.ask-chip--primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.ask-chip:active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--ink);
}

.ask-chip--primary:active {
  background: var(--primary);
  color: #fff;
  opacity: 0.88;
}

/* ---------- input bar ---------- */

.ask-input-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

#ask-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 16px; /* >=16px prevents iOS auto-zoom on focus */
  outline: none;
}

#ask-input::placeholder {
  color: var(--caption);
  opacity: 1;
}

#ask-input:focus {
  border-color: var(--primary);
  background: var(--surface);
}

#ask-send {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ask-send:disabled,
#ask-input:disabled {
  opacity: 0.5;
}

/* ---------- contact row ---------- */

.ask-contact-row {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 0 14px 10px;
  background: var(--surface);
}

.ask-contact-link {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 12px;
  background: #F1F5F4;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.ask-contact-link:active {
  background: var(--primary-soft);
}

/* ---------- footer ---------- */

.ask-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 0 14px;
  background: var(--surface);
  font-size: 12px;
  color: var(--caption);
}

/* ---------- desktop: center as a phone-width card ---------- */

@media (min-width: 640px) {
  body:not(.embed) {
    background: #E3E9E8;
  }

  body:not(.embed) .ask-header,
  body:not(.embed) .ask-chat,
  body:not(.embed) .ask-quick-actions,
  body:not(.embed) .ask-input-bar,
  body:not(.embed) .ask-contact-row,
  body:not(.embed) .ask-footer {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  body:not(.embed) .ask-quick-actions {
    background: var(--ground);
  }

  body:not(.embed) .ask-chat {
    background: var(--ground);
  }
}