/* Sadeed — instrument surface: the transcript.
   Loaded after instrument.css; see that file for the ground and type. */

/* ---------- the transcript --------------------------------------------- */

/* Two speakers, two different objects -- not two boxes of slightly different
   grey. What the agent says is the record: a plate on the desk, anchored by a
   rule down its leading edge. What the operator says is an annotation on that
   record: lighter, inset, no plate. */

.conversation { scroll-padding-block-end: var(--space-8); }

.message { margin-block-end: var(--space-6); }
.message + .message { margin-block-start: var(--space-2); }

.message-head {
  align-items: center;
  gap: var(--space-2);
  color: var(--mineral-400);
  letter-spacing: 0.02em;
}
.message-head > span:first-of-type { color: var(--limestone-200); font-weight: 600; }
.message-head time { color: var(--mineral-400); font-variant-numeric: tabular-nums; }
.message-head img, .message-head i { border-radius: var(--radius-sm); }

.message.assistant .message-body {
  position: relative;

  border-start-start-radius: var(--radius-sm);
}

/* The rule: a machined edge on the side the text starts from. */
.message.assistant .message-body::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -1px;
  inline-size: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--emerald-500), transparent 85%);
  opacity: 0.55;
}

.message.user .message-body {
  box-shadow: none;
}

/* ---------- code inside the transcript ---------------------------------- */

/* Inline code is a value, not emphasis: it gets a chip so the eye can tell
   where it starts and ends inside an Arabic sentence. */
.message-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 5%);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.message-body .code-block code { font-size: var(--text-sm); padding: var(--space-3); background: none; box-shadow: none; }

.code-block {
  background: var(--code-surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  overflow: hidden;
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(180deg, rgb(255 255 255 / 4%), transparent);
  border-block-end: 1px solid var(--border-soft);
}

/* The language reads as an engraved label on the plate, not as content. */
.code-block-header i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mineral-400);
}

.code-copy {
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--mineral-300);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-pill);
  background: transparent;
  transition: color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.code-copy:hover { color: var(--emerald-300); border-color: var(--emerald-glow); }

.code-block code { display: block; padding: var(--space-3); line-height: 1.75; }

/* ---------- lists and turn actions -------------------------------------- */

.message-body ul { padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); }
.message-body li::marker { color: var(--emerald-500); }

/* These act on the turn above them, so they read as a footer of that turn
   rather than as three equal buttons adrift in the column. */
.message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block-start: var(--space-3);
  margin-block-start: var(--space-1);
  border-block-start: 1px solid var(--border-soft);
}
.message-actions .button {
  font-size: var(--text-xs);
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
}
.message-actions .button:disabled { opacity: 0.45; }

/* Reading surfaces stay neutral; short user messages shrink to their content. */
.message.assistant .message-body { background: transparent; border-color: transparent; box-shadow: none; padding-inline: 0; }
.message.assistant .message-body::before { content: none; }
.message .message-body { line-height: 1.7; }
.message.user .message-body { background: var(--mineral-900); border-color: var(--border-mid); }
.message { animation: none; }