@layer components {
  .message-briefings { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
  .briefing-frame { display: block; max-width: 700px; container-type: inline-size; }

  .briefing {
    border: 1px solid var(--border); border-radius: 9px; background: var(--card); overflow: hidden; font-size: 13px;
  }
  /* A briefing its recipient has not acknowledged yet awaits them: amber edge. */
  .briefing--pending { border-color: var(--jx-wait); box-shadow: inset 3px 0 0 var(--jx-wait); }
  .briefing-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 12px;
    border-bottom: 1px solid var(--border);
  }
  .briefing-title { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-weight: 600; }
  .briefing-title svg { flex: none; color: var(--muted-foreground); }
  .briefing-state { background: var(--jx-ok-soft); color: var(--jx-ok); }
  .briefing-state--pending { background: var(--jx-wait-soft); color: var(--jx-wait); }
  .briefing-body {
    display: grid; grid-template-columns: minmax(88px, max-content) 1fr; gap: 5px 12px; margin: 0; padding: 8px 12px;
  }
  .briefing-body dt { color: var(--muted-foreground); }
  .briefing-body dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; text-wrap: pretty; }
  .briefing-foot {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 12px;
    border-top: 1px solid var(--border); background: var(--surface);
  }
  .briefing-foot form { margin: 0; }
  .briefing-note { flex: 1 1 200px; }

  .briefing-line {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 6px 12px;
    border: 1px dashed var(--border); border-radius: 9px; font-size: 13px;
  }
  .briefing-line-title { font-weight: 500; }
  /* Someone else's pending briefing does not wait on this reader: neutral, not amber. */
  .briefing-line .briefing-state--pending { background: var(--muted); color: var(--muted-foreground); }

  /* The briefing folds by the width of its own frame, like the action block. */
  @container (max-width: 480px) {
    .briefing-body { grid-template-columns: 1fr; gap: 2px; }
    .briefing-body dd + dt { margin-top: 6px; }
  }

  @media (max-width: 767px) {
    /* The briefing leaves the message's text column (system avatar and gap) for the whole width. */
    .briefing-frame { max-width: none; margin-inline-start: calc(-1 * (24px + 9px)); }
    .briefing { border-radius: var(--radius-lg); font-size: var(--text-body); }
    .briefing--acknowledged { border-color: var(--jx-ok); box-shadow: inset 3px 0 0 var(--jx-ok); }
    /* Acknowledging is a button across the block, at the thumb. */
    .briefing-foot { flex-direction: column; align-items: stretch; padding: 10px 12px 12px; }
    .briefing-foot form { width: 100%; }
    .briefing-foot .button { width: 100%; min-height: var(--tap); justify-content: center; }
    /* In a column, the note's flex-basis would become its height. */
    .briefing-note { flex: none; }
  }
}