/* Shared native/external/floating conversation row contract. */
.catlo-chat-shell .catlo-message-row,
.catlo-floating-history .catlo-message-row {
  align-items: end;
  display: grid;
  gap: 0 0.35rem;
  grid-template-areas: "bubble actions" "meta actions";
  grid-template-columns: minmax(0, auto) 2.25rem;
  justify-content: start;
  max-width: 100%;
  min-width: 0;
  position: relative;
  width: max-content;
}

.catlo-chat-shell .catlo-message-row--own,
.catlo-floating-history .catlo-message-row--own {
  grid-template-areas: "actions bubble" "actions meta";
  grid-template-columns: 2.25rem minmax(0, auto);
  justify-content: end;
}

.catlo-floating-history .catlo-message-row {
  max-width: 88%;
}

.catlo-message-row__bubble {
  grid-area: bubble;
  max-width: min(100%, 42rem);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.catlo-message-row__meta {
  grid-area: meta;
  min-width: 0;
}

.catlo-message-row > .catlo-message-actions {
  align-self: center;
  grid-area: actions;
  left: auto;
  margin: 0;
  opacity: 0;
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  transition: opacity 150ms ease;
}

.catlo-message-row:hover > .catlo-message-actions,
.catlo-message-row:focus-within > .catlo-message-actions,
.catlo-message-row > .catlo-message-actions[open] { opacity: 1; }

.catlo-message-row:not(.catlo-message-row--own)
  > .catlo-message-actions .catlo-message-actions__menu {
  left: auto;
  right: 0;
}

.catlo-message-row--own
  > .catlo-message-actions .catlo-message-actions__menu {
  left: 0;
  right: auto;
}

.catlo-chat-item-header,
.catlo-floating-chat__listing { min-width: 0; }

.catlo-chat-item-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.catlo-chat-item-header > span:first-child { grid-column: 1 / -1; }
.catlo-chat-item-header > strong { grid-column: 1; }
.catlo-chat-item-header > span:last-child {
  grid-column: 2;
  white-space: nowrap;
}

.catlo-chat-item-header > strong,
.catlo-floating-chat__listing > strong {
  display: -webkit-box;
  flex: 1 1 12rem;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.catlo-chat-item-header > strong { flex: none; }

@media (hover: none), (max-width: 640px) {
  .catlo-message-row > .catlo-message-actions { opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
  .catlo-message-row > .catlo-message-actions { transition: none; }
}