/* Vaki's own palette, light first. A guest opens this on a phone outdoors in
   daylight, often on a bad connection, which is the opposite of the dark slate
   the first version used. Dark still follows the guest's own setting. */
:root {
  --ground:#EAF1F1; --surface:#FFFFFF; --raised:#F3F8F8; --ink:#0D1618;
  --muted:#52676A; --hairline:#D3DFDF;
  --aurora:#0C7A5E; --aurora-soft:rgba(12,122,94,.10);
  --bad:#A0342A; --bad-soft:rgba(160,52,42,.10);
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#080D0F; --surface:#0F1719; --raised:#16211F; --ink:#E8F0F0;
    --muted:#8CA2A4; --hairline:#223032;
    --aurora:#4FDCAE; --aurora-soft:rgba(79,220,174,.12);
    --bad:#F08A7C; --bad-soft:rgba(240,138,124,.12);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.chat {
  max-width: 680px; margin: 0 auto; height: 100dvh;
  display: flex; flex-direction: column; background: var(--surface);
}
@media (min-width: 720px) {
  .chat { height: min(100dvh, 900px); margin-block: max(0px, calc((100dvh - 900px) / 2));
          border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
}

header { padding: 16px 18px 12px; border-bottom: 1px solid var(--hairline); }
header h1 { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 0; letter-spacing: -.3px; }
header p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; }
.disclosure {
  margin-top: 10px !important; font-size: 12px; color: var(--muted);
  background: var(--raised); border-radius: 8px; padding: 7px 10px;
}

.messages {
  flex: 1; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  overscroll-behavior: contain;
}
.msg {
  padding: 11px 14px; border-radius: 14px; max-width: 85%;
  white-space: pre-wrap; line-height: 1.5; font-size: 15.5px;
  overflow-wrap: anywhere;
}
.msg.bot strong { font-weight: 600; }
.msg.user { align-self: flex-end; background: var(--aurora); color: var(--surface); border-bottom-right-radius: 5px; }
.msg.bot { align-self: flex-start; background: var(--raised); border-bottom-left-radius: 5px; }
/* An error is not a reply. It must not look like one. */
.msg.error { align-self: flex-start; background: var(--bad-soft); color: var(--bad); border-left: 2px solid var(--bad); }

/* The confirm step. Deliberately looks like an action, not like a message:
   pressing it is the moment a real place is taken. */
.confirmbar { align-self: flex-start; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.confirmbar button {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 10px 16px; border-radius: 12px; border: 1px solid transparent;
}
.confirm-yes { background: var(--aurora); color: var(--surface); }
.confirm-no { background: transparent; color: var(--muted); border-color: var(--hairline); }
.confirmbar button:focus-visible { outline: 2px solid var(--aurora); outline-offset: 2px; }

/* Three dots rather than a literal ellipsis character, so it reads as activity
   rather than as the assistant having said "..." */
.msg.pending { display: flex; gap: 4px; align-items: center; padding: 15px 16px; }
.msg.pending i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: pulse 1.2s infinite; }
.msg.pending i:nth-child(2) { animation-delay: .18s; }
.msg.pending i:nth-child(3) { animation-delay: .36s; }
@keyframes pulse { 0%,60%,100% { opacity:.25 } 30% { opacity:1 } }
@media (prefers-reduced-motion: reduce) { .msg.pending i { animation: none; opacity: .6 } }

.composer {
  display: flex; gap: 9px; padding: 12px 14px;
  border-top: 1px solid var(--hairline);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.composer input {
  flex: 1; padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--hairline); background: var(--ground); color: var(--ink);
  font: inherit; min-width: 0;
}
.composer input:focus { outline: 2px solid var(--aurora); outline-offset: 1px; border-color: transparent; }
.composer button {
  padding: 12px 18px; border: 0; border-radius: 11px;
  background: var(--aurora); color: var(--surface);
  font: 600 15px/1 var(--body); cursor: pointer;
}
.composer button:disabled { opacity: .5; cursor: default; }
.composer button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }