/* ============================================================================
 * BOX BOX - public/brief.css
 * ----------------------------------------------------------------------------
 * The conversation that happens before anything is searched.
 *
 * IT IS A CHAT, SO IT IS SHAPED LIKE ONE: a column of messages that fills the
 * screen and a box docked at the bottom. The first version was a bordered card
 * with a heading, a subtitle and a text field in the middle of a form, which is
 * what a settings panel looks like - and she reads it as one more thing to fill
 * in rather than as somebody to talk to.
 * ==========================================================================*/

.brief {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* -- the messages --------------------------------------------------------- */

.brief-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px clamp(16px, 5vw, 48px) 20px;
}

/* The column the conversation runs down. Wide enough to read, narrow enough
   that a two-line answer does not span a monitor. */
.brief-msg {
  display: flex;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.brief-msg.from-her { justify-content: flex-end; }

.brief-bubble {
  max-width: 82%;
  border-radius: 16px;
  padding: 11px 15px;
  font-size: 14.5px;
  line-height: 1.6;
}

/* Hers is the accent: she is the one being answered. */
.brief-msg.from-her .brief-bubble {
  background: var(--accent);
  color: var(--accent-ink);
  border-bottom-right-radius: 6px;
}

.brief-msg.from-ai .brief-bubble {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}

.brief-bubble p { margin: 0 0 .6em; }
.brief-bubble p:last-child { margin-bottom: 0; }
.brief-bubble ul, .brief-bubble ol { margin: .4em 0 .6em; padding-left: 1.2em; }
.brief-bubble li { margin: .25em 0; }
.brief-bubble strong { color: inherit; font-weight: 650; }

.brief-bubble.brief-error {
  border-color: var(--fail-line);
  background: var(--fail-tint);
  color: var(--fail-text);
}

/* Three dots, because "Thinking…" as words is a sentence she reads and then
   has to un-read when the real answer replaces it. */
.brief-thinking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 15px;
}

.brief-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
  animation: brief-blink 1.3s infinite ease-in-out both;
}

.brief-dot:nth-child(2) { animation-delay: .16s; }
.brief-dot:nth-child(3) { animation-delay: .32s; }

@keyframes brief-blink {
  0%, 80%, 100% { opacity: .25; }
  40% { opacity: 1; }
}

[data-motion="off"] .brief-dot { animation: none; opacity: .5; }

/* -- the dock ------------------------------------------------------------- */

.brief-dock {
  flex: none;
  border-top: 1px solid var(--line);
  padding: 14px clamp(16px, 5vw, 48px) 16px;
  background: var(--bg);
}

/* The one control that spends a run. Above the input, so it is never something
   she presses while reaching for somewhere to type. */
.brief-start {
  max-width: 720px;
  margin: 0 auto 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.brief-go { height: 46px; padding: 0 22px; font-size: 14px; }

/* The sentence is a caption, not a field. She should never be surprised by
   what got made; wording it is not her job. */
.brief-start-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.brief-form {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.brief-input {
  flex: 1 1 auto;
  min-height: 46px;
  max-height: 160px;
  resize: none;
  overflow-y: auto;
  font-size: 14.5px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 14px;
}

.brief-send {
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brief-send .ico {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brief-reset {
  display: block;
  max-width: 720px;
  margin: 10px auto 0;
  background: none;
  border: 0;
  padding: 0;
  color: var(--faint);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.brief-reset:hover { color: var(--text); text-decoration: underline; }

/* -- the switch in the header ------------------------------------------- */

/* The two ways in are one button, not a drawer: a form parked under a chat is
   dead space whether it is open or shut, and its reserved height was what
   stopped the message list from scrolling at all. */
.gen-mode {
  flex: none;
  align-self: center;
  margin-left: auto;
  border-radius: 999px;
  padding: 7px 15px;
  min-height: var(--tap);
  font-size: 12.5px;
}

#gen-manual { flex: 1 1 auto; min-height: 0; }

@media (max-width: 640px) {
  .brief-log { padding: 18px 16px 14px; }
  .brief-dock { padding: 12px 16px 14px; }
  .brief-bubble { max-width: 90%; }
}

/* When new runs are paused, this line stops naming the subject and starts
   explaining the dead button above it. It has to look like a statement
   rather than a caption, or it reads as part of the same greyed-out thing. */
.brief-start-sub.is-paused {
  color: var(--run-ink); background: var(--run-tint);
  border: 1px solid var(--run-line); border-radius: var(--radius);
  padding: 8px 11px; opacity: 1;
}