/*
 * Ticket — the support-desk thread view. The opener is a plain article; the
 * reply thread reuses .comment / .list / .composer wholesale (see comment.css),
 * so this file only holds what's genuinely ticket-specific: the opener block
 * and the inbound/outbound lean on the reuse rows.
 *
 * Structure (BEM): .ticket__opener; reply rows are
 * .list__item.comment.comment--inbound | .comment--outbound (comment.css).
 */
@layer components {
  /* The opener — the customer's (or agent's) first message, set apart from the
     header above and the reply thread below. */
  .ticket__opener {
    padding-block-end: var(--u-pad);
    margin-block-end: var(--u-pad);
    border-block-end: var(--border-size-1) solid var(--line);
  }

  /* Reply thread: inbound/outbound messages read as distinct cards, so space
     them apart instead of the flush, hairline-divided rows .list uses for
     summaries (only ticket replies carry a direction modifier). */
  .comment--inbound,
  .comment--outbound {
    border-block-start: none;
    margin-block-start: var(--u-pad);
  }

  /* Context panel: the customer's other recent tickets, set between the header
     and the opener. Bullet-less list, one compact row per ticket. */
  .ticket__related {
    margin-block-end: var(--u-pad);
    padding-block-end: var(--u-pad);
    border-block-end: var(--border-size-1) solid var(--line);
  }
  .ticket__related-heading {
    margin: 0 0 calc(var(--u-pad) / 2);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-6);
  }
  .ticket__related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: calc(var(--u-pad) / 4);
  }
  .ticket__related-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--u-pad) / 2);
    font-size: var(--font-size-0);
  }
  .ticket__related-link { font-weight: var(--font-weight-6); }

  /* Quoted history from an inbound reply, folded into a native <details> — the
     browser handles the toggle, this is only cosmetics on the summary. */
  .comment__body details { margin-block-start: var(--u-pad); }
  .comment__body summary {
    cursor: pointer;
    color: var(--ink-muted);
    font-size: var(--font-size-0);
    user-select: none;
  }
}