/* The chat that writes its answer: the kitchen assistant of a cooking app, on a white page, in the minimal style.
   Black type, hairlines, and one vermilion accent: the caret and the line that waits for the first word.
   (In a real app the box sits wherever the assistant lives, a side panel or the bottom of a recipe: here it is in
   the middle of the page; drop the .stage centring to put it back.) */
:root {
  --page: #ffffff;          /* the page */
  --card: #ffffff;          /* the assistant's box */
  --edge: #e6e6e3;          /* its edge and the field's */
  --hair: #efefec;          /* the thin rule under the name */
  --ink: #141414;           /* the question, the name, the Stop button */
  --text: #232323;          /* the answer */
  --muted: #8b8b86;         /* the small words, the caret when stopped */
  --accent: #e5462b;        /* the caret and the waiting line */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Roboto Flex Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.ask {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(384px, 100%);
  height: min(560px, calc(100svh - 48px));
  min-height: 440px;
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--edge), 0 1px 2px rgba(20, 20, 20, 0.03), 0 22px 44px -30px rgba(20, 20, 20, 0.2);
  overflow: hidden;
}

/* ---------------------------------------------------------------- the head */
.ask__head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: none;
  padding: 19px 24px 15px;
}

.ask__brand {
  font-size: 16px;
  font-variation-settings: 'wdth' 58, 'wght' 720;
  letter-spacing: 0.01em;
  line-height: 18px;
}

.ask__role {
  color: var(--muted);
  font-size: 12.5px;
  font-variation-settings: 'wdth' 100, 'wght' 430;
  line-height: 18px;
}

.ask__rule {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 1px;
  background: var(--hair);
  transform-origin: 0 50%;
}

/* ---------------------------------------------------------------- the question and the answer */
.ask__thread {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 26px 24px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.ask__thread::-webkit-scrollbar {
  display: none;
}

.ask__q {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  line-height: 25px;
  font-variation-settings: 'wdth' 88, 'wght' 600;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.ask__a {
  position: relative;
  margin-top: 20px;
}

/* the answer: every word is an inline block of its own, whose width and weight the script moves. The script
   breaks the lines itself, with the width each word will have once settled, so no word ever jumps to the next line
   while it widens */
.ask__text {
  --wd: 100;
  --wg: 400;
  margin: 0;
  min-height: 25px;
  color: var(--text);
  font-size: 16px;
  line-height: 25px;
  font-variation-settings: 'wdth' var(--wd), 'wght' var(--wg);
  word-spacing: 0.035em;
  white-space: normal;
}

.w {
  display: inline-block;
  font-variation-settings: 'wdth' var(--wd), 'wght' var(--wg);
  white-space: nowrap;
  will-change: transform;
}

/* the hidden ruler that measures the settled width of every word */
.ask__meter {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  font-size: 16px;
  line-height: 25px;
  font-variation-settings: 'wdth' var(--wd), 'wght' var(--wg);
  word-spacing: 0.035em;
  white-space: nowrap;
  pointer-events: none;
}

/* the caret and the waiting line: one element 1 pixel square, which the script stretches every frame */
.ask__caret {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: var(--accent);
  transform-origin: 0 0;
  transform: scale(0);
  pointer-events: none;
  transition: background-color 0.35s;
}

.ask__caret.is-stopped {
  background: var(--muted);
}

/* under the answer, once it has come in: Regenerate, and Stopped if it was stopped */
.ask__after {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 0 -8px;
  min-height: 34px;
}

.ask__after[hidden] {
  display: none;
}

.regen {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--ink);
  font: 13.5px/1 'Roboto Flex Variable', system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.regen__label {
  font-variation-settings: 'wdth' 100, 'wght' 470;
  transition: font-variation-settings 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), color 0.3s;
}

.regen__icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the word widens and takes weight under the pointer, on the font's axes */
@media (hover: hover) {
  .regen:hover .regen__label {
    font-variation-settings: 'wdth' 118, 'wght' 600;
  }
}

.regen:active .regen__label {
  font-variation-settings: 'wdth' 118, 'wght' 600;
}

.ask__note {
  color: var(--muted);
  font-size: 12.5px;
  font-variation-settings: 'wdth' 100, 'wght' 430;
}

.ask__note[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- the field */
.ask__composer {
  flex: none;
  padding: 10px 14px 14px;
}

.field {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 6px 0 18px;
  border-radius: 25px;
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: box-shadow 0.3s;
}

.field:focus-within {
  box-shadow: inset 0 0 0 1px #c9c9c4;
}

.field__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 16px 'Roboto Flex Variable', system-ui, sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  outline: none;
}

.field__input::placeholder {
  color: #a3a39e;
}

/* Send, which turns into Stop while the answer comes in */
.act {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 19px;
  background: var(--ink);
  color: #ffffff;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.act:disabled {
  background: #f1f1ee;
  color: #a9a9a4;
  cursor: default;
}

.act__icons {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
}

.act__icons svg {
  position: absolute;
  inset: 7px;
  width: 24px;
  height: 24px;
}

.act__arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.act__square {
  fill: currentColor;
  opacity: 0;
}

.act__label {
  flex: none;
  padding-right: 15px;
  margin-left: -6px;
  font-size: 14px;
  font-variation-settings: 'wdth' 100, 'wght' 560;
  white-space: nowrap;
  opacity: 0;
}

@media (hover: hover) {
  .act:not(:disabled):hover {
    background: #2e2e2e;
  }
}

/* ---------------------------------------------------------------- the keys */
.regen:focus-visible,
.act:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 2px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 420px) {
  .ask__head,
  .ask__thread {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ask__rule {
    left: 20px;
    right: 20px;
  }

  .ask__q {
    font-size: 18px;
    line-height: 24px;
  }
}