/* 3PT chat UI.
   System font stack on purpose: the host CSP is font-src 'self' and we are not
   shipping webfont binaries for a chat panel. Brand colours match the website
   (#4A90D9 accent, #4A4A4A text). */

:root {
  --accent:      #4A90D9;
  --accent-dark: #3A73AE;
  --ink:         #4A4A4A;
  --ink-strong:  #2F2F2F;
  --muted:       #6B7280;
  --line:        #E4E8EE;
  --ground:      #F7F9FC;
  --surface:     #FFFFFF;
  --bubble-them: #F1F4F9;
  --bubble-me:   #4A90D9;
  --danger:      #B3261E;
  --danger-bg:   #FCECEA;
  --warn-bg:     #FFF6E5;
  --warn-ink:    #7A5300;
  --radius:      14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  /* 100% rather than 100vh so the iOS keyboard does not push the composer off. */
  height: 100%;
  background: var(--ground);
}

body {
  font-family: var(--font);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ground);
}

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

.hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.hdr-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.brand {
  font-weight: 800; font-size: 17px; color: var(--accent);
  letter-spacing: .5px; flex: none;
}
.hdr-title {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tag {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .4px;
  background: var(--warn-bg); color: var(--warn-ink);
  padding: 3px 8px; border-radius: 999px;
}
.icon-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer;
}
.icon-btn:hover { background: var(--bubble-them); color: var(--ink-strong); }

/* ---------- hours banner ---------- */

.banner {
  flex: none; padding: 9px 14px; font-size: 13px;
  background: var(--warn-bg); color: var(--warn-ink);
  border-bottom: 1px solid #F0E2C4;
}

/* ---------- conversation ---------- */

.log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  overscroll-behavior: contain;
}

.row { display: flex; }
.row.them { justify-content: flex-start; }
.row.me   { justify-content: flex-end; }

.bubble {
  max-width: 85%;
  padding: 9px 13px;
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.row.them .bubble { background: var(--bubble-them); color: var(--ink-strong); border-bottom-left-radius: 4px; }
.row.me   .bubble { background: var(--bubble-me);   color: #FFFFFF;           border-bottom-right-radius: 4px; }

.bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.row.them .bubble a { color: var(--accent-dark); }

/* typing indicator */
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: blink 1.2s infinite ease-in-out; display: inline-block;
}
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ---------- quick replies ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-size: 14px; font-weight: 600;
  background: var(--surface); color: var(--accent-dark);
  border: 1.5px solid var(--accent); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; min-height: 40px;
}
.chip:hover:not(:disabled) { background: var(--accent); color: #FFF; }
.chip:disabled { opacity: .45; cursor: default; }

/* ---------- cards: slots, form, confirmation, handoff ---------- */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px; max-width: 100%;
}
.card-title { font-weight: 700; color: var(--ink-strong); margin: 0 0 10px; font-size: 14px; }

.slot-list { display: flex; flex-direction: column; gap: 7px; }
.slot {
  font: inherit; font-size: 14px; text-align: left; width: 100%;
  background: var(--surface); color: var(--ink-strong);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; cursor: pointer; min-height: 44px;
}
.slot:hover:not(:disabled) { border-color: var(--accent); background: #F5F9FE; }
.slot:disabled { opacity: .45; cursor: default; }
.slot-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

.field { margin-bottom: 11px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-strong); margin-bottom: 4px; }
.field .req { color: var(--danger); margin-left: 2px; }
.field input, .field select {
  font: inherit;
  /* 16px minimum stops iOS zooming the page when an input takes focus. */
  font-size: 16px;
  width: 100%; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-strong);
  min-height: 44px;
}
.field input:focus, .field select:focus { border-color: var(--accent); outline: none; }
.field.bad input, .field.bad select { border-color: var(--danger); background: var(--danger-bg); }
.field .err { display: block; font-size: 12.5px; color: var(--danger); margin-top: 4px; font-weight: 600; }
.field .help { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.field.check { display: flex; align-items: flex-start; gap: 9px; }
.field.check input { width: 20px; height: 20px; min-height: 20px; flex: none; margin-top: 2px; }
.field.check label { font-weight: 400; font-size: 13px; margin: 0; }

.submit-btn {
  font: inherit; font-size: 15px; font-weight: 700; width: 100%;
  background: var(--accent); color: #FFF; border: 0; border-radius: 10px;
  padding: 12px; cursor: pointer; min-height: 46px; margin-top: 2px;
}
.submit-btn:hover:not(:disabled) { background: var(--accent-dark); }
.submit-btn:disabled { opacity: .55; cursor: default; }

.conf { border-left: 4px solid var(--accent); }
.conf ul { margin: 0; padding-left: 18px; }
.conf li { margin-bottom: 3px; }

.handoff { background: var(--warn-bg); border-color: #F0E2C4; color: var(--warn-ink); }

/* ---------- system notices and errors ---------- */

.note {
  align-self: center; text-align: center; font-size: 13px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 13px; max-width: 90%;
}
.note.bad { color: var(--danger); background: var(--danger-bg); border-color: #F3D2CE; }
.note a { color: inherit; font-weight: 700; }
.note button {
  font: inherit; font-size: 13px; font-weight: 700; margin-top: 7px;
  background: var(--accent); color: #FFF; border: 0; border-radius: 8px;
  padding: 8px 14px; cursor: pointer; min-height: 38px;
}

/* ---------- composer ---------- */

.composer {
  flex: none; display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line);
}
.composer textarea {
  flex: 1; font: inherit; font-size: 16px; resize: none;
  max-height: 110px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--ground);
  color: var(--ink-strong); line-height: 1.4;
}
.composer textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.composer textarea:disabled { opacity: .6; }
.send-btn {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: var(--accent); color: #FFF; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.send-btn:hover:not(:disabled) { background: var(--accent-dark); }
.send-btn:disabled { opacity: .45; cursor: default; }

.counter {
  flex: none; margin: 0; padding: 0 14px 6px;
  font-size: 12px; color: var(--muted); text-align: right; background: var(--surface);
}
.counter.over { color: var(--danger); font-weight: 700; }

/* ---------- focus visibility, required for keyboard-only use ---------- */

:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .typing i { animation: none; opacity: .6; }
  * { transition: none !important; }
}

/* The launcher owns the outer dimensions, so this document fills whatever box
   it is given. The cap below only bites when the box is wider than a chat panel
   ever needs to be, which happens when someone opens the host directly rather
   than through the bubble. In the launcher's panel the viewport is already
   narrower than the cap and nothing changes. */
@media (min-width: 560px) {
  .app {
    max-width: 480px;
    margin: 0 auto;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
}