/* The conversation, and the box it is written in. */

/* The log takes the height the frame leaves it and scrolls within itself, so
   the composer stays put: a chat whose input walks down the page as the
   conversation grows is one you chase. */
.chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 62px);   /* the top bar's height */
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}

.chat-turn {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.chat-turn:last-of-type { border-bottom: none; }

/* Who is speaking, in the margin rather than as a bubble: the two sides of a
   conversation about a document read better as a transcript than as chat
   bubbles, and the answers are long. */
.chat-who {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
  padding-top: 2px;
}
.chat-you .chat-who { color: var(--text2); }
.chat-assistant .chat-who { color: var(--accent); }

.chat-text { font-size: 14px; line-height: 1.7; color: var(--text); }
.chat-text p + p { margin-top: 12px; }
.chat-you .chat-text { color: var(--text2); }
.chat-failed .chat-text { color: var(--A); }

/* A citation points at a section of the document by its path. Marked so it
   reads as a reference and not as part of the sentence. */
.chat-cite {
  font-size: 12px;
  color: var(--accent);
  white-space: nowrap;
}

/* ─── WAITING ─── */
.chat-pending .chat-text {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text3);
}
.chat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: chat-pulse 1.2s ease-in-out infinite;
}
@keyframes chat-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* ─── COMPOSER ─── */
.chat-note {
  padding: 10px 0 6px;
  font-size: 11px;
  color: var(--text3);
}
/* The field, with the send key inside it: the key is placed against the
   composer's own box, so it holds the field's bottom-right corner however far
   the field has grown under what is being typed. */
.chat-composer {
  position: relative;
  display: flex;
  padding-bottom: 16px;
}
.chat-input {
  flex: 1;
  max-height: 200px;
  /* Room at the right end for the key, so a long question runs up to it and
     not under it. */
  padding: 12px 50px 12px 14px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
}
.chat-input:focus { outline: none; border-color: var(--accent); }
.chat-input:disabled { background: var(--surface2); color: var(--text3); }

/* A key, drawn as one: square, quiet, and holding the mark alone. It brightens
   under the pointer rather than announcing itself, the field beside it being
   what the eye is meant to be on. */
.chat-send {
  position: absolute;
  right: 8px;
  bottom: 24px;          /* the composer's padding, and 8px off the field's edge */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text3);
  cursor: pointer;
  transition: all 0.15s;
}
.chat-send:hover {
  background: var(--surface3);
  border-color: var(--accent);
  color: var(--text);
}
.chat-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-send:disabled { opacity: 0.45; cursor: default; }
.chat-send:disabled:hover { background: var(--surface2); border-color: var(--border2); color: var(--text3); }

.icon-enter {
  width: 15px;
  height: 15px;
  stroke-width: 1.9;
}

/* Stands where the composer was once the session has spent its turn budget:
   the same height, so the log does not jump when it takes its place. */
.chat-spent {
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text3);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 700px) {
  /* The margin has no room; the speaker's name goes above what was said. */
  .chat-turn { grid-template-columns: 1fr; gap: 6px; }
}