.messages {
  display: flex; flex-direction: column; gap: 1rem;
  overflow-y: auto;
  padding: 1.1rem;
  min-height: 0;
}

.message { max-width: 100%; font-size: 0.98rem; }
.message p { margin: 0 0 0.6em; }
.message p:last-child { margin-bottom: 0; }

.message--user {
  align-self: flex-end;
  max-width: 88%;
  padding: 0.6em 0.9em;
  border-radius: var(--radius);
  background: var(--endgrain);
}

.message--assistant { align-self: stretch; }
.message--assistant .label { display: block; margin-bottom: 0.3em; }

.message--note {
  align-self: center;
  font: 400 0.78rem/1.3 var(--mono); color: var(--ink-soft);
}

.message--failed { color: var(--mark); }

.message__images { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.message__images img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); }

.message__selection, .selection {
  display: inline-flex; align-items: center; gap: 0.4em;
  margin-bottom: 0.4em;
  padding: 0.15em 0.55em;
  border-radius: var(--radius);
  background: var(--sel-soft);
  color: var(--hardware);
  font: 500 0.75rem/1.4 var(--mono);
}

.message__revision { margin-top: 0.4rem; }

.typing::after {
  content: "▍";
  animation: blink 1s steps(2) infinite;
  color: var(--walnut);
}
@keyframes blink { 50% { opacity: 0; } }

.composer {
  display: grid; gap: 0.5rem;
  padding: 0.8rem 1.1rem 1rem;
  border-top: 1px solid var(--rule);
  background: var(--paper);

  .selection { justify-self: start; margin: 0; }
  .selection button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 0.2em; font: inherit; }
}

.composer__busy {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.5rem 1.1rem;
  border-top: 1px solid var(--rule);
  background: var(--sel-soft);
  font-size: 0.85rem; color: var(--ink-soft);

  &[hidden] { display: none; }
  form { margin: 0; }
}
.composer__busy--refused { color: var(--ink); font-weight: 500; }
.composer__busy:not([hidden]) + .composer [type=submit] { opacity: 0.5; cursor: not-allowed; }

.message__queued { font-style: italic; }

.composer__row { display: flex; gap: 0.5rem; align-items: end; }
.composer__row textarea { flex: 1; }
.composer__tools { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--ink-soft); }

.message__activity { margin-top: 0.4rem; font: 400 0.8rem/1.3 var(--mono); }

/* Locked sizes: the builder's settled dimensions, kept by the designer */
.locks, .part-sizes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem;
  padding: 0 1.1rem 0.5rem;
  &:empty { display: none; }
}

.locks__item {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.15em 0.2em 0.15em 0.55em;
  border-radius: var(--radius);
  background: var(--endgrain);
  color: var(--walnut-dark);
  font: 500 0.75rem/1.4 var(--mono);
  form { display: contents; }
}

.locks__unlock {
  border: 0; background: none; color: inherit; cursor: pointer;
  padding: 0 0.3em; font: inherit;
}

#part:empty { display: none; }

/* Several parts picked together for one message */
.selections {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  &[hidden] { display: none; }
  .selection { margin: 0; }
}
.selections__list { display: contents; }
.selections__add {
  padding: 0.15em 0.55em;
  border: 1px dashed var(--hardware); border-radius: var(--radius);
  background: none; color: var(--hardware);
  font: 500 0.75rem/1.4 var(--mono); cursor: pointer;
  &[aria-pressed="true"] { border-style: solid; background: var(--hardware); color: #fff; }
}
.selections__hint { font: 400 0.72rem/1.4 var(--mono); color: var(--ink-soft); }
.message__selections { display: flex; flex-wrap: wrap; gap: 0 0.35rem; }
.message__compare { margin-left: 0.4em; font: 400 0.78rem/1.3 var(--mono); }

/* Thumbs on a designer reply, and what was wrong when it missed */
.message__rating {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem;
  margin-top: 0.6rem;
  font: 400 0.78rem/1.3 var(--mono); color: var(--ink-soft);
}
.message__thumb {
  padding: 0.2em 0.65em;
  border: 1px solid var(--rule); border-radius: 999px;
  background: none; color: var(--ink-soft); font: inherit; cursor: pointer;
  &:hover { border-color: var(--ink); color: var(--ink); }
  &[aria-pressed=true] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
}
.message__rating-form { display: flex; gap: 0.4rem; flex-basis: 100%; }
.message__rating-form input[type=text] { flex: 1; font-size: 0.85rem; }
.message__rating-form .button { padding: 0.35em 0.8em; font-size: 0.8rem; }
.message__rating-note { flex-basis: 100%; margin: 0; font-family: var(--body); }