.message-bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: min(86%, 520px);
  gap: 5px;
}
.message-bubble-wrap.mine { align-items: flex-end; margin-left: auto; }
.message-bubble-wrap:not(.mine) { align-items: flex-start; }
.message-bubble-wrap .bubble {
  max-width: 100%;
  cursor: pointer;
}
.message-bubble-wrap .bubble:focus-visible {
  outline: 2px solid var(--accent, #8b5cf6);
  outline-offset: 3px;
}
.message-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 15px;
  color: var(--muted);
  font-size: 11px;
}
.message-meta .read-mark { color: var(--purple, #8b5cf6); font-weight: 700; }
.message-pinned {
  color: var(--purple, #8b5cf6);
  font-size: 11px;
  font-weight: 700;
}
.message-actions {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}
.message-bubble-wrap.message-actions-open .message-actions { display: flex; }
.message-action {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: var(--panel);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.message-action:hover,
.message-action:focus-visible { color: var(--text); background: var(--panel-2); }
.message-action.danger:hover,
.message-action.danger:focus-visible { color: #ff7e8e; border-color: rgba(255,126,142,.45); }
.message-deleted { color: var(--muted); font-style: italic; }
.message-draft-preview { position: relative; }
.message-draft-remove { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff; background: rgba(15,15,22,.78); cursor: pointer; }
.message-draft-remove .ui-icon { width: 16px; height: 16px; }
.message-draft-remove:focus-visible { outline: 2px solid var(--accent, #8b5cf6); outline-offset: 2px; }
@media (max-width: 760px) {
  .message-bubble-wrap { max-width: 92%; }
  .message-actions { gap: 7px; }
  .message-action { min-height: 40px; padding-inline: 12px; }
}
