/* ainative.rocks: one conversation, nothing outside the thread. */
@font-face {
  font-family: "Bricolage";
  src: url("/fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #f3f4f0;
  --ink: #15181a;
  --ink-2: #566159;        /* secondary, tinted from the green */
  --us: #e6e9e3;           /* ainative bubbles */
  --you: #0b6e4f;          /* the visitor's side, the send button */
  --you-ink: #ffffff;
  --card: #ffffff;
  --line: #d4d9d1;
  --shopper: #dfeee6;      /* shopper bubbles inside the sample window */
  --focus: #0b6e4f;
  --col: 44rem;
  --r: 1.25rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Bricolage", system-ui, sans-serif;
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  line-height: 1.5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--you); color: var(--you-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
code { font-family: inherit; font-weight: 600; }
abbr { text-decoration: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top, .thread, .foot {
  width: min(100% - 2rem, var(--col));
  margin-inline: auto;
}
.top {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.25rem 0 0;
  font-size: .9375rem;
}
.wordmark { font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.wordmark span, .appname span { font-weight: 400; color: var(--ink-2); }
.mail { color: var(--ink-2); }

/* The thread */
.thread { flex: 1; padding: 3rem 0 2rem; }
.who { margin: 0 0 .35rem .25rem; font-size: .8125rem; color: var(--ink-2); }
.who.you { text-align: right; margin-right: .25rem; }
.msg > p:first-child { margin-top: 0; } .msg > p:last-child { margin-bottom: 0; }
.where { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; }
.where li { display: flex; gap: .75rem; align-items: baseline; }
.where li > span:first-child { font-weight: 600; min-width: 5rem; }
.where .meta { color: var(--ink-2); font-size: .9375rem; }
.msg {
  width: fit-content;
  max-width: 36rem;
  margin: 0 0 .75rem;
  padding: .8rem 1.1rem;
  background: var(--us);
  border-radius: var(--r);
  border-bottom-left-radius: .35rem;
}
.msg + .msg, .msg + .window, .window + .msg { margin-top: .4rem; }
.lead {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -.025em;
  text-wrap: balance;
  padding: 1rem 1.25rem 1.05rem;
  max-width: 30rem;
}
.from-you {
  margin-left: auto;
  background: var(--you);
  color: var(--you-ink);
  border-bottom-left-radius: var(--r);
  border-bottom-right-radius: .35rem;
}

/* Arrival: each message rises in, in order. Settled by default so nothing is ever missing. */
@media (prefers-reduced-motion: no-preference) {
  .playing [data-play] { opacity: 0; transform: translateY(8px); }
  .playing [data-play].in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .7s var(--ease); }
  .replies .msg { animation: rise .6s var(--ease) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}
.typing { display: inline-flex; gap: .3rem; padding: .95rem 1.1rem; }
.typing i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ink-2); animation: blink 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* The sample assistant window */
.window {
  width: 100%;
  max-width: 100%;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  border-radius: var(--r);
  border-bottom-left-radius: .35rem;
}
.window figcaption {
  display: flex; align-items: center; gap: .5rem;
  white-space: nowrap; overflow: hidden;
  padding: .6rem 1rem;
  font-size: .875rem;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--you); }
.sep { opacity: .5; }
.tag { margin-left: auto; flex: none; font-size: .75rem; padding: .1rem .5rem; border: 1px solid var(--line); border-radius: 999px; }
.chat { padding: 1rem; display: flex; flex-direction: column; gap: .6rem; font-size: .9375rem; }
.b { margin: 0; max-width: 85%; padding: .6rem .9rem; border-radius: 1rem; }
.b p { margin: 0; }
.b p + p, .b ul + p { margin-top: .5rem; }
.shopper { align-self: flex-end; background: var(--shopper); border-bottom-right-radius: .3rem; }
.store { align-self: flex-start; background: var(--ground); border-bottom-left-radius: .3rem; }
.products { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.products li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .6rem; background: var(--card); border: 1px solid var(--line); border-radius: .6rem; font-variant-numeric: tabular-nums; }
.products .meta { color: var(--ink-2); white-space: nowrap; }
.checkout { font-weight: 600; color: var(--you); }
.note { margin: 0; padding: .55rem 1rem; font-size: .875rem; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.checkout + .meta { font-size: .8125rem; color: var(--ink-2); }

/* Composer: the primary action, in the thread's own vocabulary */
.composer {
  display: flex; gap: .5rem; align-items: center;
  margin: 1.25rem 0 .5rem;
  padding: .35rem .35rem .35rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  max-width: 36rem;
  transition: border-color .2s;
}
.composer input + input { border-left: 1px solid var(--line); padding-left: .75rem; }
.fine { margin: 0 0 .5rem .25rem; font-size: .8125rem; color: var(--ink-2); max-width: 36rem; }
.card { width: 100%; background: var(--card); border: 1px solid var(--line); padding: 1rem 1.1rem; }
.steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; }
.steps li::marker { color: var(--you); font-weight: 700; }
.steps em { font-style: normal; color: var(--you); }
.price { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--ink-2); }
.foot .agents { font-size: .8125rem; }
.foot .agents code { font-weight: 500; }
.composer:focus-within { border-color: var(--you); }
.composer input {
  flex: 1; min-width: 0;
  font: inherit; color: inherit;
  background: none; border: 0; padding: .55rem 0;
  caret-color: var(--you);
}
.composer input::placeholder { color: var(--ink-2); opacity: 1; }
.composer input:focus { outline: none; }
.composer button {
  flex: none; height: 2.5rem; padding: 0 1.1rem;
  font: inherit; font-weight: 600; white-space: nowrap;
  border: 0; border-radius: 999px;
  background: var(--you); color: var(--you-ink);
  cursor: pointer;
  transition: transform .25s var(--ease), background .2s;
}
.composer button:hover { transform: translateY(-1px); }
.composer button:active { transform: translateY(0) scale(.96); }
.composer button:disabled { background: var(--ink-2); cursor: default; transform: none; }
.composer.error { border-color: #b3261e; }
.composer.done { display: none; }

.later { margin-top: 2.5rem; }

/* App card inside a message */
.app { padding-bottom: 1rem; }
.app p { margin: 0 0 .6rem; }
.app .try { margin: .6rem 0 0; font-size: .875rem; color: var(--ink-2); }
.app .try code { font-weight: 500; }
.appcard {
  display: block; text-decoration: none;
  padding: .85rem 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: .9rem;
  transition: border-color .2s, transform .25s var(--ease);
}
.appcard:hover { border-color: var(--you); transform: translateY(-1px); }
.appname { display: block; font-weight: 700; }
.appdesc { display: block; color: var(--ink-2); font-size: .9375rem; margin-top: .15rem; }

.foot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.5rem 0 2rem;
  font-size: .875rem; color: var(--ink-2);
}

@media (max-width: 40rem) {
  .msg { max-width: 92%; }
  .composer { flex-wrap: wrap; border-radius: 1.25rem; padding: .5rem .5rem .5rem .9rem; }
  .composer #store { flex: 1 1 100%; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
  .composer #email { flex: 1 1 100%; border-left: 0; padding-left: 0; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
  .composer button { width: 100%; margin-top: .25rem; }
  .products li { flex-direction: column; gap: .1rem; }
  .products .meta { white-space: normal; }
  .thread { padding-top: 2rem; }
}