/* chat.css: the panel half of the suite's first chat (spec §6, §10).
   Companion to templates/partials/chat.html and static/chat.js, and
   like both of them it names nothing about Calls: every value here is an
   --rst-* token the theme already defines, so a second app that adopts
   these three files gets its own theme's colours, spacing and radii
   without touching a line.

   .chat is given a display of its own, and the UA's display: none for
   the hidden attribute loses to any author rule that sets display on
   the same element — so the panel carries its own [hidden] rule, the
   convention calls.css states at the top of itself. */
.chat[hidden] {
  display: none;
}

.chat {
  display: flex;
  flex-direction: column;
  gap: var(--rst-sp-2);
  border: 1px solid var(--rst-line);
  border-radius: var(--rst-radius);
  padding: var(--rst-sp-3);
  margin-block-end: var(--rst-sp-4);
}

.chat-title {
  margin: 0;
  font-size: var(--rst-fs-base);
  color: var(--rst-text-muted);
}

/* A window on the conversation, not the whole page: the log scrolls
   inside its own box so the controls under it stay reachable however
   long the call runs. */
.chat-log {
  list-style: none;
  margin: 0;
  padding: 0;
  max-block-size: 16rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--rst-sp-1);
}

.chat-line {
  line-height: 1.5;
  /* A message is other people's text: it wraps, including a single
     unbroken run of characters, rather than widening the panel. */
  overflow-wrap: anywhere;
}

.chat-name {
  font-weight: 600;
}

.chat-time {
  color: var(--rst-text-faint);
  font-size: var(--rst-fs-xs);
  font-variant-numeric: tabular-nums;
}

/* Your own line is marked by weight and by the name already on it,
   never by colour alone: the name is the whole signal and this is a
   second cue on top of it. */
.chat-line-self .chat-name {
  font-weight: 700;
}

.chat-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--rst-sp-2);
  margin: 0;
}

.chat-label {
  flex: 1 0 100%;
  color: var(--rst-text-muted);
  font-size: var(--rst-fs-sm);
  margin-block-end: -0.2rem;
}

/* The control grows and the button keeps its own width; rst-input's
   width: 100% is what makes the flex basis behave, so the textarea gets
   a min-inline-size rather than relying on the intrinsic one. */
.chat-form textarea {
  flex: 1 1 12rem;
  min-inline-size: 8rem;
  min-height: 3rem;
}

.chat-form button {
  flex: 0 0 auto;
}

/* The two sentences the panel can say. They are sentences, which is the
   point: colour carries nothing here that the words do not. */
.chat-status {
  flex: 1 0 100%;
  margin: 0;
  min-height: 1.2em;
  color: var(--rst-text);
  font-size: var(--rst-fs-sm);
  font-weight: 600;
}