/* Pinned message strip — the handoff's bar under the room header. Neutral sunk
   surface with a hairline, an accent "Pinned" label, and the message text
   truncated. The whole bar links to the pinned message (scroll-to); unpinning
   lives in that message's ⋯ dropdown. */
.pinned-strip {
  display: contents;
}

.pinned-bar {
  align-items: center;
  background-color: var(--color-bg-sunk);
  border-block-end: 1px solid var(--color-border);
  color: inherit;
  display: flex;
  flex-shrink: 0;
  gap: 9px;
  padding: 8px 18px;
  text-decoration: none;

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--color-bg-hover);
    }
  }
}

.pinned-bar__label {
  color: var(--color-accent-brand);
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
}

.pinned-bar__text {
  color: var(--color-text-subtle);
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pinned-bar__chevron {
  color: var(--color-text-subtle);
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
}

/* The dropdown Pin / Unpin control is staff-only. Turbo broadcasts render the
   menu viewer-less, so gate visibility here via the `.staff` body class rather
   than Current.user in the partial. */
.message__pin-item {
  display: contents;
}

body:not(.staff) .message__pin-item {
  display: none;
}