@layer components {
  /* Pinned under the conversation header; an empty frame takes no room. */
  .action-banner-frame { display: block; flex: none; }
  .action-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0;
    padding: 8px 18px; font-size: 13px; line-height: 1.45;
    border-bottom: 1px solid var(--border); background: var(--surface); color: var(--muted-foreground);
  }
  /* Amber only when something waits for this reader. */
  .action-banner--mine, .action-banner--handoff {
    background: var(--jx-wait-soft); border-bottom-color: var(--jx-wait); color: var(--foreground);
  }
  .action-banner > svg { flex: none; color: var(--jx-wait); }
  .action-banner-head { flex: none; font-weight: 600; }
  .action-banner--others .action-banner-head { font-weight: 500; color: var(--foreground); }
  .action-banner-line { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .action-banner-link { flex: none; margin-left: auto; font-weight: 600; color: var(--jx-wait); text-decoration: none; }
  /* A relay names its project channel in full: head and link wrap on a narrow screen instead of overflowing. */
  .action-banner--handoff .action-banner-head, .action-banner--handoff .action-banner-link { flex: 0 1 auto; min-width: 0; }
  .action-banner-link:hover { text-decoration: underline; }
  .action-banner-link:focus-visible { outline: 2px solid var(--jx-wait); outline-offset: 2px; border-radius: 2px; }

  @media (max-width: 767px) {
    .action-banner { padding: 8px 12px; }
    .action-banner-line { white-space: normal; }
    /* What waits for this reader: one 44 px line (plus the bottom border), « 2 actions vous attendent » and « Voir ». */
    .action-banner--mine {
      flex-wrap: nowrap; gap: 10px; min-height: calc(var(--tap) + 1px); padding-block: 0; font-size: var(--text-body);
    }
    .action-banner--mine .action-banner-line { display: none; }
    .action-banner--mine .action-banner-head { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .action-banner--mine .action-banner-link {
      align-self: stretch; display: inline-flex; align-items: center; justify-content: center;
      min-width: var(--tap); margin-right: -8px; padding-inline: 8px;
    }
  }
}