/* MATSYA — customer chat. Deep-sea teal and slate, coral accent.
   Mobile first: the chat is the page on a phone, the demo panel folds away. */

:root {
  --ink: #0c1a20;
  --ink-soft: #5a7581;
  --line: #dce7ea;
  --bg: #eef5f6;
  --panel: #ffffff;

  --teal: #0f5f6e;
  --teal-dark: #08414c;
  --teal-wash: #e3f0f2;
  --coral: #e2603f;
  --coral-wash: #fdeee9;
  --good: #1f7a52;
  --good-wash: #e7f4ee;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(8, 26, 32, .05), 0 8px 28px rgba(8, 26, 32, .08);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 15.5px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

button { font: inherit; }

/* ---------- layout ---------- */

.shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 820px;      /* chat on its own: a narrower column reads better */
  margin: 0 auto;
  padding: 16px;
  min-height: 100vh;
}
html.dev .shell { max-width: 1180px; }
@media (min-width: 1000px) {
  .shell { padding: 22px 16px; }
  html.dev .shell { grid-template-columns: minmax(0, 1fr) 330px; }
}

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

.chat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 78vh;
  overflow: hidden;
}

.chathead {
  background: var(--teal-dark);
  color: #fff;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chathead .logo {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(140deg, #1d8a9c, #0a4b58);
  display: grid; place-items: center; font-size: 18px;
}
.chathead h1 { font-size: 16px; margin: 0; letter-spacing: .14em; font-weight: 700; }
.chathead .tag { font-size: 12.5px; color: #9fcdd5; margin-top: 1px; }
.chathead .spacer { margin-left: auto; }
.chathead .storechip {
  font-size: 12px; background: rgba(255,255,255,.14); padding: 4px 10px;
  border-radius: 999px; color: #dff1f4;
}

.log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }

.msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; }
.msg.bot { background: var(--teal-wash); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.me { background: var(--teal); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.msg.nudge {
  background: var(--coral-wash); border: 1px solid #f3cabc; align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.msg.nudge .who {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--coral); font-weight: 700; margin-bottom: 3px;
}
.msg.system {
  align-self: center; background: transparent; color: var(--ink-soft);
  font-size: 13px; text-align: center; max-width: 100%;
}

.typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%; background: #9dc2c9;
  animation: bob 1.1s infinite;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 60%, 100% { transform: translateY(0); opacity: .5 } 30% { transform: translateY(-5px); opacity: 1 } }

/* ---------- options, cards ---------- */

.opts { display: flex; flex-direction: column; gap: 7px; align-self: flex-start; max-width: 88%; }
.opts .prompt { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 1px; }
.opt {
  text-align: left; background: #fff; border: 1px solid var(--teal);
  color: var(--teal-dark); border-radius: 11px; padding: 9px 13px; cursor: pointer;
}
.opt:hover { background: var(--teal-wash); }
.opt .sub { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.opt[disabled] { opacity: .5; cursor: not-allowed; }
.opts .more { font-size: 12.5px; color: var(--coral); }

.card {
  align-self: flex-start; max-width: 88%; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; box-shadow: var(--shadow);
}
.card pre {
  margin: 0 0 12px; font: inherit; white-space: pre-wrap;
  border-bottom: 1px dashed var(--line); padding-bottom: 10px;
}
.card .row { display: flex; gap: 9px; flex-wrap: wrap; }
.card .addr { font-size: 13px; color: var(--ink-soft); margin: 0 0 10px; }

/* address form, rendered by the server like every other control here */
.addrform { display: grid; gap: 9px; }
.addrfield { display: block; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.addrfield input {
  width: 100%; margin-top: 3px; padding: 8px 11px; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
}
.addrfield input:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
.addrfield.bad input { border-color: var(--coral); background: var(--coral-wash); }
.addrerr { display: block; color: #b03a1d; font-weight: 500; margin-top: 3px; }

.btn {
  background: var(--teal); color: #fff; border: 1px solid var(--teal);
  border-radius: 10px; padding: 9px 16px; cursor: pointer; font-weight: 600;
  text-decoration: none; display: inline-block;
}
.btn:hover { background: var(--teal-dark); }
.btn.ghost { background: #fff; color: var(--teal); }
.btn.ghost:hover { background: var(--teal-wash); }
.btn.coral { background: var(--coral); border-color: var(--coral); }
.btn.pay { background: var(--good); border-color: var(--good); width: 100%; margin-bottom: 10px; }
.btn.fail { background: #fff; color: var(--coral); border-color: var(--coral); width: 100%; }

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

.composer { border-top: 1px solid var(--line); padding: 12px; background: #fbfdfd; }
.composer .tools { display: flex; gap: 7px; margin-bottom: 9px; flex-wrap: wrap; }
.chip {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font-size: 13px; cursor: pointer; color: var(--teal-dark);
}
.chip:hover { border-color: var(--teal); background: var(--teal-wash); }
.composer form { display: flex; gap: 9px; }
.composer input[type=text] {
  flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 11px;
  font: inherit; background: #fff;
}
.composer input:focus { outline: 2px solid var(--teal); outline-offset: -1px; }

/* ---------- demo panel ---------- */
/* Hidden unless the page was opened with ?dev=1 — see the script in index.html.
   The markup stays in the DOM either way, so app.js can fill it without guards. */

.side { display: none; }
html.dev .side { display: flex; flex-direction: column; gap: 14px; }
.box {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px;
}
.box h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--teal); margin: 0 0 10px;
}
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 3px 0; }
.kv span { color: var(--ink-soft); }
.kv b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px;
  font-weight: 700;
}
.pill.on { background: var(--good-wash); color: var(--good); }
.pill.off { background: var(--coral-wash); color: #b03a1d; }
.events { font-size: 12.5px; color: var(--ink-soft); max-height: 190px; overflow-y: auto; }
.events div { padding: 2px 0; border-bottom: 1px dotted var(--line); }
.side .row { display: flex; gap: 8px; flex-wrap: wrap; }
.side .btn { padding: 7px 12px; font-size: 13.5px; }

/* ---------- map modal ---------- */

.modal {
  position: fixed; inset: 0; background: rgba(8, 26, 32, .55);
  display: none; place-items: center; z-index: 500; padding: 16px;
}
.modal.open { display: grid; }
.modal .sheet {
  background: #fff; border-radius: var(--radius); width: min(640px, 100%);
  box-shadow: var(--shadow); overflow: hidden;
}
.modal header { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal header h3 { margin: 0; font-size: 16px; }
.modal header p { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
#map { height: 320px; }
.modal footer {
  padding: 12px 16px; border-top: 1px solid var(--line);
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
}
.modal footer .hint { font-size: 12.5px; color: var(--ink-soft); flex: 1 1 140px; }

/* ---------- payment and invoice pages ---------- */

.paypage { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.paycard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px; width: min(380px, 100%); text-align: center;
}
.paybrand { font-weight: 700; letter-spacing: .16em; color: var(--teal-dark); margin-bottom: 4px; }
.paynote { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 18px; }
.payamount { font-size: 34px; font-weight: 700; color: var(--teal-dark); }
.payref { font-size: 13px; color: var(--ink-soft); margin: 4px 0 20px; }
.paydone { font-size: 21px; font-weight: 700; color: var(--good); margin: 8px 0; }
.payfail { font-size: 19px; font-weight: 700; color: var(--coral); margin: 8px 0; }
.paycard .btn { margin: 4px 3px; }

.invoicepage { padding: 22px 16px; }
.invoice {
  max-width: 780px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px;
}
.invoice h1 { font-size: 20px; margin: 0 0 16px; letter-spacing: .04em; }
.invoice .seller { font-size: 13.5px; line-height: 1.6; margin-bottom: 16px; }
.invoice .meta {
  display: grid; gap: 4px; font-size: 13.5px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.invoice .meta span { color: var(--ink-soft); display: inline-block; min-width: 82px; }
.invoice table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.invoice th, .invoice td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.invoice th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.invoice .num { text-align: right; font-variant-numeric: tabular-nums; }
.invoice .sub { font-size: 12.5px; color: var(--ink-soft); }
.invoice tr.total td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }
.invoice .note { font-size: 12.5px; color: var(--ink-soft); margin: 18px 0; }

/* ---------- phones ---------- */
/* There was no mobile CSS at all before this: one `min-width: 1000px` query and
   desktop styling everywhere else. Three things were actually broken on a phone,
   and the first one caused the other two.

   1. `100vh` counts the strip behind the browser's address bar, so the page was
      taller than the screen. The chat box could never fill it exactly.
   2. Because the page overflowed, the *page* scrolled rather than `.log`. Auto
      scroll sets `log.scrollTop`, so it moved a box the reader was not looking at
      and the newest message stayed off screen.
   3. An input under 16px makes iOS Safari zoom the page in on focus, and it does
      not zoom back out.

   `100dvh` is the dynamic viewport height: the space actually visible right now.
   The plain `100vh` line above it is the fallback for browsers that lack it. */

@media (max-width: 640px) {
  .shell {
    padding: 0;
    gap: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* The chat is the whole screen. Nothing outside it scrolls, so .log is the one
     scrolling box and scrollTop means what it says. */
  .chat {
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .chathead { padding: 10px 14px; }
  .chathead h1 { font-size: 15px; }
  .chathead .tag { display: none; }        /* the strapline is for the desktop page */
  .chathead .storechip { font-size: 11.5px; padding: 3px 8px; }

  .log { padding: 14px 12px; gap: 10px; }
  .msg { max-width: 90%; padding: 9px 12px; }   /* 82% wasted a lot of width */
  .msg.system { font-size: 12.5px; }

  .opt { padding: 9px 12px; }
  .card { padding: 12px; }

  /* The composer is pinned to the bottom of the chat, clear of the home bar. */
  .composer {
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  }
  .composer .tools { gap: 6px; margin-bottom: 7px; }
  .chip { padding: 7px 11px; font-size: 12.5px; }
  .composer input[type=text] {
    font-size: 16px;      /* below 16px, iOS zooms in on focus and never back out */
    padding: 10px 13px;
  }
  .composer .btn { padding: 10px 16px; }
}

/* Narrow phones: the four tool chips take two rows and eat the conversation.
   Keep the two that matter in the flow and drop the rest to a second line only
   when they are needed. */
@media (max-width: 380px) {
  .chip { padding: 6px 9px; font-size: 12px; }
  .log { padding: 12px 10px; }
  .msg { max-width: 93%; }
}