.thread {
  display: grid;
  gap: 1.1rem;
  margin: 1.5rem 0;
}

.entry {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  max-width: 88%;
}

/* Whoever's speaking: their photo, or their stick figure. */
.entry__speaker { flex: none; }
.entry__speaker :is(.figure, .portrait) { display: block; width: 3rem; height: 3rem; border: 2px solid var(--ink); border-radius: 50%; }

/* A cartoon speech bubble: a solid inked outline and a tail pointing down at
   the speaker. The tail is two triangles: one in ink, and a smaller one in the
   bubble's colour that hides the outline where they meet. The other side of
   the conversation speaks in white, in light and dark mode alike, so the
   outline stays dark ink. */
.entry__bubble {
  --bubble-fill: #ffffff;
  --bubble-ink: #22252d;
  --bubble-line: #22252d;
  --tail-at: 1.1rem;
  position: relative;
  min-width: 7rem;
  margin-bottom: 1.6rem;
  padding: 0.85rem 1.2rem;
  border: 2.5px solid var(--bubble-line);
  border-radius: 1.75rem;
  background: var(--bubble-fill);
  color: var(--bubble-ink);
  overflow-wrap: anywhere;
}

.entry__bubble::before,
.entry__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  clip-path: polygon(40% 0, 100% 0, 0 100%);
}

.entry__bubble::before { left: var(--tail-at); width: 26px; height: 22px; background: var(--bubble-line); }
.entry__bubble::after { left: calc(var(--tail-at) + 6px); width: 15.5px; height: 13px; margin-top: -3px; background: var(--bubble-fill); }

.entry__bubble p:last-child { margin-bottom: 0; }

.entry__byline {
  margin-bottom: 0.3rem;
  color: var(--bubble-ink);
  font: 0.8rem/1.3 var(--font-display);
  opacity: 0.8;
}

.entry__byline strong { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }

/* From "my side" of the conversation: on the right, in blue, the tail
   flipped to point at me. */
.entry--mine { flex-direction: row-reverse; justify-self: end; }
.entry--mine .entry__bubble { --bubble-fill: var(--accent); --bubble-ink: var(--on-accent); }
.entry--mine .entry__bubble::before,
.entry--mine .entry__bubble::after { left: auto; clip-path: polygon(0 0, 60% 0, 100% 100%); }
.entry--mine .entry__bubble::before { right: var(--tail-at); }
.entry--mine .entry__bubble::after { right: calc(var(--tail-at) + 6px); }

/* Team notes are sticky notes, not speech: yellow, a little crooked, never
   seen by customers. */
.entry--note { justify-self: center; max-width: 92%; align-items: center; }
.entry--note .entry__bubble {
  margin-bottom: 0;
  border: 0;
  border-radius: 4px;
  background: var(--amber);
  color: #22252d;
  box-shadow: 0 6px 12px -6px rgb(43 35 80 / 0.45);
  transform: rotate(-0.8deg);
}

.entry--note .entry__bubble::before,
.entry--note .entry__bubble::after { display: none; }

.entry--note:nth-child(even) .entry__bubble { transform: rotate(0.7deg); }

.entry--latest .entry__bubble { transform-origin: var(--tail-at) 100%; animation: pop-in 420ms cubic-bezier(.3,1.6,.6,1) 1; }
.entry--latest.entry--mine .entry__bubble { transform-origin: calc(100% - var(--tail-at)) 100%; }

@keyframes pop-in {
  from { transform: scale(0.85); opacity: 0; }
  to { opacity: 1; }
}

.composer { display: grid; gap: 0.75rem; }

.composer__tabs { display: flex; gap: 0.5rem; }

.composer__tabs label {
  padding: 0.35em 0.9em;
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  font: 600 0.9rem/1.2 var(--font-display);
  cursor: pointer;
}

.composer__tabs input { position: absolute; opacity: 0; }
.composer__tabs input:checked + label { border-color: var(--ink); background: var(--accent-pale); }
.composer__tabs input[value="note"]:checked + label { background: var(--amber); color: #22252d; }
.composer__tabs input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.composer:has(input[value="note"]:checked) .textarea { border-color: var(--amber); }

.composer__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }

.conversation-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; color: var(--ink-soft); }