/* Soft ring, matching the monogram avatars' 15%-alpha ring — a solid black
   ring reads too heavy on the square shape */
.avatar > img {
  box-shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.15);
}

.account-logo > img {
  box-shadow:
    rgb(255, 255, 255) 0px 0px 0px 0px,
    rgb(0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px !important;
}

/* The floating action bar reveals as a unit on hover, keyboard focus within
   the row, or while one of its popups is open. Visibility (inherited) is what
   hides it — an opacity-only reveal would leave invisible floating buttons
   hit-testable over the previous row. */
@media (hover: hover) and (pointer: fine) {
  .message__meta .message__actions {
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease-out, visibility 150ms;
    visibility: hidden;
  }

  .message:is(:hover, :focus-within, :has([open], :popover-open)) .message__meta .message__actions {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  /* Flat rows tint as a unit while the pointer is on them */
  .message:not(.message--mentioned):is(:hover, :focus-within) {
    background-color: var(--color-bg-hover);
  }
}

/* Touch keeps the picker, Reply and overflow in the meta row at tap size. */
@media (hover: none) and (pointer: coarse) {
  .message__heading {
    flex-wrap: wrap;
  }

  .message__meta .message__action-btn {
    align-items: center;
    justify-content: center;
    min-block-size: 40px;
    min-inline-size: 40px;
  }

  .message__quick-reactions,
  .message__reply-label {
    display: none;
  }

  .message__options-btn {
    opacity: 1;
  }
}