/* Timeline marker */
    .msg.system-marker {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      color: var(--text-muted);
      font-size: 11px;
      width: 75%;
      margin: 0 auto;
    }

.msg.system-marker::before,
    .msg.system-marker::after {
      content: "";
      flex: 1 1 auto;
      min-width: 12px;
      height: 1px;
      background: #555;
    }

.msg.system-marker span {
      flex: 0 0 auto;
      color: var(--text-muted);
      white-space: nowrap;
    }

/* Sender name on message bubbles */
    .msg-sender-name {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 3px;
      margin-left: 2px;
    }

.msg.assistant .msg-sender-name { color: var(--accent); }

.msg.user .msg-sender-name { color: #4a9eff; }

.bubble.jump-highlight {
      animation: jumpGlow 2.6s ease-out forwards;
    }

/* ── Character group header in chat list ── */
    .chat-group-header {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 10px; border-radius: 12px; cursor: pointer;
      transition: background 120ms; margin: 0; user-select: none;
    }

.chat-group-header:active { background: var(--surface-1); }

.chat-group-avatar {
      width: 36px; height: 36px; border-radius: 999px;
      background: var(--surface-3); flex-shrink: 0; display: flex;
      align-items: center; justify-content: center;
      color: var(--text-muted); font-weight: 600; font-size: 14px; overflow: hidden;
    }

.chat-group-avatar img { width: 100%; height: 100%; object-fit: cover; }

.chat-group-info { flex: 1; min-width: 0; }

.chat-group-name { font-size: 14px; font-weight: 600; color: var(--accent-soft); }

.chat-group-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.chat-group-chevron {
      flex-shrink: 0; transition: transform 250ms ease; opacity: 0.7;
    }

.chat-group-chevron.expanded { transform: rotate(90deg); }

.chat-group-children {
      overflow: hidden; max-height: 0;
      transition: max-height 350ms ease; padding-left: 8px;
    }

.chat-group-children.expanded { max-height: 2000px; }

.chat-group-wrapper {
      border: 2px solid #3a3a3a;
      border-radius: 14px;
      overflow: hidden;
    }

.chat-group-wrapper + .chat-group-wrapper {
      margin-top: 1px;
    }

.chat-group-wrapper .chat-row {
      margin: 4px 8px;
    }

.chat-group-wrapper .chat-row:last-child {
      margin-bottom: 6px;
    }

.chat-group-wrapper .chat-row-avatar {
      width: 41px; height: 41px;
    }

.chat-group-wrapper .chat-row-title {
      font-size: 12px;
    }

.chat-group-wrapper .chat-row-preview {
      font-size: 10px;
    }

.chat-group-wrapper .chat-row-time {
      font-size: 11px;
    }

.bubble {
        max-width: 70vw;
      }

#messages, .messages-react {
        padding: 10px;
      }

.composer {
        padding: 6px 10px;
      }
/* DM message grouping — flat-top on consecutive same-sender */



/* DM message layout fix — row-reverse for own messages */
.msg.dm-mine { flex-direction: row-reverse !important; align-items: flex-end !important; gap: 6px !important; margin-bottom: 14px; }
.msg.dm-theirs { align-items: flex-end !important; flex-direction: row !important; gap: 6px !important; margin-bottom: 14px; }
.msg-avatar-spacer { width: 26px; min-width: 26px; flex-shrink: 0; }
.dm-grouped .bubble { border-radius: 18px !important; }

/* DM invariant slots — grouping is pure CSS */
.dm-grouped .dm-avatar-slot > * { visibility: hidden; }
.msg.dm-mine.dm-grouped .dm-bubble { margin-top: 2px; }
.msg.dm-theirs.dm-grouped .dm-bubble { margin-top: 2px; }
.msg.dm-mine.dm-grouped,
.msg.dm-theirs.dm-grouped { margin-bottom: 2px; }
.dm-avatar-slot { width: 32px; flex: 0 0 32px; }
.dm-grouped .dm-msg-status { display: none !important; }

/* DM bubble overflow protection — flex child shrink + word breaking */
.dm-bubble-col {
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
}

.dm-bubble,
.bubble {
  overflow-wrap: anywhere;
}

/* DM bubble — positioned ancestor for corner reactions, suppress mobile long-press menu */
.dm-bubble {
  position: relative;
  overflow: visible;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* DM reactions — absolute corner pills (iMessage-style) */
.dm-reactions {
  position: absolute;
  bottom: -10px;
  display: flex;
  gap: 2px;
  pointer-events: auto;
  z-index: 1;
}
.dm-mine .dm-reactions  { left: -6px; }
.dm-theirs .dm-reactions { right: -6px; }

.dm-reaction-pill {
  background: var(--surface-3);
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}