/* ── Message bubble ───────────────────────── */
.msg-group { margin: 4px 0; }
.msg-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin: 1px 0;
}
.msg-row.out  { justify-content: flex-end; }
.msg-row.in   { flex-direction: row; }

.msg-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-bottom: 2px;
}
.msg-row.first-in .msg-avatar  { visibility: visible; }
.msg-row:not(.first-in) .msg-avatar { visibility: hidden; }

.bubble {
    max-width: var(--bubble-max-w);
    padding: 7px 12px 6px;
    border-radius: var(--radius-lg);
    position: relative;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.msg-row.out  .bubble {
    background: var(--bg-bubble-out);
    color: var(--text-bubble-out);
    border-bottom-right-radius: 4px;
}
.msg-row.in   .bubble {
    background: var(--bg-bubble-in);
    color: var(--text-bubble-in);
    border-bottom-left-radius: 4px;
    box-shadow: var(--shadow-sm);
}
.bubble.internal {
    background: var(--bg-internal-note);
    border: 1px dashed var(--color-warning);
    font-style: italic;
}
.bubble.deleted { opacity: .55; font-style: italic; }

/* ── Sender name (admin view, group chats) ── */
.bubble .sender-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 2px;
    display: none;
}
.msg-row.in.first-in .bubble .sender-name { display: block; }

/* ── Message text ─────────────────────────── */
.bubble .msg-body { font-size: 14.5px; line-height: 1.48; }

/* ── Meta (time + status) ─────────────────── */
.bubble .msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-top: 3px;
}
.bubble .msg-time { font-size: 11px; color: var(--text-muted); }
.bubble .msg-status { font-size: 13px; color: var(--text-muted); line-height: 1; }
.bubble .msg-status.read { color: var(--color-primary); }
.bubble .edited-tag { font-size: 11px; color: var(--text-muted); font-style: italic; }

/* ── Scroll-to highlight flash ───────────────── */
@keyframes msg-highlight-pulse {
    0%   { background: transparent; }
    25%  { background: rgba(74, 144, 226, 0.18); }
    75%  { background: rgba(74, 144, 226, 0.18); }
    100% { background: transparent; }
}
.msg-row.msg-highlight { animation: msg-highlight-pulse 1.4s ease; border-radius: var(--radius-sm); }

/* ── Reply preview inside bubble ─────────────── */
.reply-quote {
    background: rgba(0,0,0,.06);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    margin-bottom: 6px;
    cursor: pointer;
}
.reply-quote .rq-name { font-size: 12px; font-weight: 600; color: var(--color-primary); }
.reply-quote .rq-text {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Reactions strip ──────────────────────── */
.reactions-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.reaction-pill {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    padding: 2px 7px;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
    display: flex; align-items: center; gap: 3px;
}
.reaction-pill:hover { border-color: var(--color-primary); background: #f0f4ff; }
.reaction-pill.mine { background: #e3f0ff; border-color: var(--color-primary); }
.reaction-pill.mine .r-count { color: var(--color-primary); font-weight: 600; }
.reaction-pill .r-count { font-size: 11px; color: var(--text-secondary); }

/* ── Attachment inside bubble ─────────────── */
.attach-img {
    max-width: 260px;
    max-height: 300px;
    width: auto;
    height: auto;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: block;
    margin: 4px 0;
}
.attach-file {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,.06);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    cursor: pointer;
    margin: 4px 0;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}
.attach-file:hover { background: rgba(0,0,0,.1); }
.attach-file .file-icon { font-size: 24px; flex-shrink: 0; }
.attach-file .file-meta { flex: 1; min-width: 0; }
.attach-file .file-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.attach-file .file-size { font-size: 11px; color: var(--text-muted); }
.attach-file .dl-icon { font-size: 16px; color: var(--text-muted); flex-shrink: 0; }

/* Audio player */
.attach-audio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
.attach-audio audio { max-width: 220px; height: 36px; }
.attach-dl-btn {
    color: var(--text-muted);
    font-size: 16px;
    text-decoration: none;
    padding: 4px;
    border-radius: 50%;
    transition: var(--transition);
}
.attach-dl-btn:hover { color: var(--color-primary); background: rgba(0,0,0,.06); }

/* ── System event ─────────────────────────── */
.msg-event {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}
.msg-event::before, .msg-event::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0,0,0,.1);
}
.msg-event span {
    font-size: 12px;
    color: var(--text-muted);
    background: rgba(255,255,255,.65);
    border-radius: var(--radius-full);
    padding: 2px 10px;
    white-space: nowrap;
}

/* ── Unread separator ─────────────────────── */
.unread-separator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}
.unread-separator::before, .unread-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-accent);
}
.unread-separator span {
    font-size: 12px;
    color: var(--color-accent);
    font-weight: 600;
    white-space: nowrap;
}

/* Hover action strip */
.msg-actions {
    display: none;
    position: absolute;
    top: -16px;
    right: 4px;
    gap: 2px;
    background: #fff;
    border-radius: var(--radius-full);
    padding: 3px 6px;
    box-shadow: var(--shadow-sm);
}
.msg-row:hover .msg-actions { display: flex; }
.msg-row.out .msg-actions { right: auto; left: 4px; }
.msg-action-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    color: var(--text-secondary);
    transition: var(--transition);
}
.msg-action-btn:hover { background: var(--bg-app); color: var(--text-primary); }