/* ============================================================
 * 06-message-action-menu.css
 * Menu 3 chấm, Reply quote, word-wrap bubble, highlight/shake.
 * ============================================================ */

.msg-bubble-pressable { transition: transform .12s ease, opacity .12s ease; }
.msg-bubble-pressable.is-pressing { transform: scale(0.97); opacity: 0.85; }

.msg-action-menu {
    position: fixed;
    z-index: 200;
    min-width: 200px;
    border-radius: 16px;
    padding: 6px;
    box-shadow: 0 16px 48px rgba(0,0,0,.35);
    background-color: var(--elevated2);
    border: 1px solid var(--transparent-border);
}
.msg-action-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    transition: background-color .12s ease;
    text-align: left;
}
.msg-action-item:hover { background-color: var(--surface); }
.msg-action-item.danger { color: #ef4444; }
.msg-action-item .msg-action-icon { width: 15px; height: 15px; opacity: .75; flex-shrink: 0; }

/* Reply quote: gọn, không kéo bubble dài vô duyên */
.msg-reply-quote {
    border-left: 3px solid var(--transparent-border);
    background-color: rgba(127,127,127,0.12);
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color .12s ease;
    width: fit-content;
    max-width: 11rem;
    min-width: 0;
    overflow: hidden;
}
.msg-reply-quote:hover { background-color: rgba(127,127,127,0.2); }
.msg-reply-quote .msg-reply-preview {
    display: block;
    width: fit-content;
    max-width: 10.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bubble: ôm nội dung (oke → bubble nhỏ), tin dài vẫn wrap */
#messageFeed .msg-bubble-pressable {
    max-width: 100%;
    min-width: 0;
    width: fit-content;
}
#messageFeed .rounded-bubble {
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
}

.msg-highlight-flash {
    animation: msg-highlight-flash 1.1s ease;
}
@keyframes msg-highlight-flash {
    0% { background-color: rgba(16,185,129,0.25); }
    100% { background-color: transparent; }
}

.msg-reply-shake {
    animation: msg-reply-shake 0.55s ease;
}
@keyframes msg-reply-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

.msg-removing {
    opacity: 0 !important;
    transition: opacity 0.28s ease !important;
    pointer-events: none !important;
}