/* ============================================
   Component: Agents
   View: agents/index.html.erb
   Stimulus: none
   ============================================ */
/* The Agents page (#557): the line under its heading saying what an agent answers, the question boxes (Question form,
   below), the line a role that may ask no agent reads, then the person's chats, one to a row, each its title as a
   link, then its agent and when its last message was. */
.agents-intro {
  max-width: 40rem;
  margin-bottom: var(--spacing-lg);
}

.agents-none {
  max-width: 40rem;
  color: var(--color-muted);
}

.agent-chats {
  max-width: 40rem;
  margin-top: var(--spacing-xl);
}

.agent-chat-list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  list-style: none;
}

.agent-chat-item {
  display: grid;
  gap: 0;
  padding: var(--spacing-sm) var(--spacing-md);
}

.agent-chat-item + .agent-chat-item { border-top: 1px solid var(--color-border); }

/* A chat's title, alone in its row's first line, is at least the tap target's height (PHONE-01). */
.agent-chat-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--color-link);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.agent-chat-about {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

/* ============================================
   Component: Question form
   Partials: agents/_ask.html.erb, agents/chats/_form.html.erb
   Stimulus: none
   ============================================ */
/* A question's form, an agent's box on the Agents page and a chat's form for its next question: its field, the
   label above its text area, a refused question's words under it, then the button, and under an agent's box its
   hint. Narrower than the page, as a form is. */
.agent-form {
  display: grid;
  gap: var(--spacing-sm);
  max-width: 40rem;
  margin-bottom: var(--spacing-lg);
}

.agent-form .field {
  display: grid;
  gap: var(--spacing-xs);
}

.agent-form .field label {
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: 600;
}

.agent-form .field textarea {
  width: 100%;
  padding: var(--spacing-sm);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  resize: vertical;
}

/* A refused question's words, on the alert's background: why it wasn't asked. */
.agent-form .field .agent-form-refusal {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius);
  background: var(--color-alert-bg);
  color: var(--color-text);
}

.agent-form .actions [type="submit"] {
  min-height: var(--tap-target);
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 0;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--font-size-md);
  cursor: pointer;
}

.agent-form .actions [type="submit"]:disabled { cursor: progress; }

/* An agent's box's hint: that asking starts a new chat, kept under Your chats. */
.agent-form .agent-form-hint {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

/* ============================================
   Component: Chat
   View: agents/chats/show.html.erb
   Stimulus: agent-chat (agent_chat_controller.js)
   ============================================ */
/* A chat's page: its links, back to the Agents page and to a new chat, then the agent's title, its messages, one
   beneath another, and its form. Its parts are spaced by their margins, in the page's flow: the stream's element
   before them is empty, and takes no room there. */
.agent-chat { max-width: 48rem; }

.agent-chat-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.agent-chat-links .back-link { margin-bottom: 0; }

.agent-chat-new {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--color-link);
  font-weight: 600;
}

.agent-messages {
  display: grid;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

/* ============================================
   Component: Message
   Partials: agents/messages/_message.html.erb, agents/messages/_progress.html.erb
   Stimulus: agent-chat (a working reply is its pending target)
   ============================================ */
/* One message, its own frame's content: who wrote it and when, then its words. A question is on the accent's light
   background, edged in the accent, and a reply on the surface, edged in the border's colour, and each but a failed
   reply names its author in words: a failed reply's first line reads "No answer", and doesn't name its agent. The
   accent's edge keeps a question apart in dark too, where the accent's light background is close to the surface's.
   On a wide screen a question sits to the right and a reply to the left. */
.agent-message {
  display: grid;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}

.agent-message.is-person {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

/* A failed reply is the app's notice, not the agent's message: on the alert's background, as a refused question's
   words are, with its danger edge beside its words. */
.agent-message.is-failed {
  border-left: 4px solid var(--color-danger);
  background: var(--color-alert-bg);
}

.agent-message-from {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

/* A question's first line, and a failed reply's on the alert's background, where the muted colour is under AA's
   4.5:1 in light. */
.agent-message.is-person .agent-message-from,
.agent-message.is-failed .agent-message-from { color: var(--color-text); }

/* A working reply's progress, each step's words in place of the last. */
.agent-message-progress {
  color: var(--color-muted);
  font-style: italic;
}

/* "In the tab's own words": an answer the check fell back on (D-126). */
.agent-message-kind {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.agent-message-words {
  display: grid;
  gap: var(--spacing-sm);
  overflow-wrap: anywhere;
}

/* An unanswered reply's words, a link to the tab they name. */
.agent-message-tab { color: var(--color-link); }

@media (min-width: 600px) {
  .agent-message.is-person { margin-left: var(--spacing-xl); }
  .agent-message.is-agent { margin-right: var(--spacing-xl); }
}