@layer components {
  /* Integration message: the agent's tile and badge shapes, a neutral badge, the level as a left bar. */
  .message--webhook { --level: transparent; }
  .message--level { box-shadow: inset 3px 0 0 var(--level); margin-block: 2px; }
  .level-info { --level: var(--jx-accent); }
  .level-success { --level: var(--jx-ok); }
  .level-warning { --level: var(--jx-wait); }
  .level-danger { --level: var(--jx-no); }
  /* In a notice conversation the quoted original reads as a card, with the level as its left bar. */
  .message--webhook-notice blockquote {
    margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-inline-start: 3px solid var(--level);
    border-radius: var(--radius-md); background: var(--surface);
  }
  .message--webhook-notice blockquote > :first-child { margin-top: 0; }
  .message--webhook-notice blockquote > :last-child { margin-bottom: 0; }
  .message-badge {
    padding: 1px 5px; border-radius: 4px; background: var(--muted); color: var(--muted-foreground); font-weight: 700;
  }
  .message-username { color: var(--muted-foreground); }
  .message-level { display: inline-flex; align-items: center; gap: 3px; align-self: center; font-weight: 600; }
  .level-warning .message-level { color: var(--jx-wait); }
  .level-danger .message-level { color: var(--jx-no); }
}