/* The page's section title; only the gap under it is set here. */
.ask-agent-title {
  margin: 0 0 var(--space-3);
}

/* What pressing the button does, said before the box, since nothing goes
   under a call to action. */
.ask-agent-say {
  margin: 0 0 var(--space-6);
  color: var(--ink-soft);
}

.aa-form {
  margin: 0;
}

/* The composer stacks: the field on top, full width, and the button on a
   row of its own under it, at the right. The field grows with the text;
   it must not flex, or a column's zero basis pins it at its minimum and
   the text scrolls out of view. */
.aa-composer {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.build-box .aa-composer textarea.aa-prompt-field {
  flex: none;
  min-height: 3.5rem;
  resize: none;
  overflow: hidden;
}

.aa-composer-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

/* On a phone the question stays on one line: it measures about ten times
   its font size, so it shrinks only as far as the screen, or a zoomed one,
   needs. */
@media (max-width: 700px) {
  .session-title.ask-agent-title {
    font-size: min(1.875rem, calc((100vw - 3rem) / 10.4));
  }
}