/* Reply UX v5 - DMFlirt style */

.reply-composer-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 4; /* above the emoji button so the × is always hit-testable */
    margin: 0 4px 8px;
    padding: 7px 44px 7px 12px;
    border-radius: 10px;
    background: rgba(168,85,247,.07);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    animation: replyPreviewIn .18s ease-out;
}

/*
 * The emoji button is absolutely centered on the whole composer field. When the
 * reply preview is inserted, the field grows and that button drifts up toward the
 * preview, overlapping the × and stealing hover — which read as the × "jittering"
 * and being hard to click. While a reply is active, pin the emoji button to the
 * input row instead so the two controls never share space.
 */
.chat-composer__field:has(.reply-composer-preview) .chat-composer__emoji-btn {
    top: auto;
    bottom: 5px;
    transform: none;
}

.chat-composer__field:has(.reply-composer-preview) .chat-composer__emoji-btn:active {
    transform: scale(.96);
}

/* reply glyph, kept compact so the preview stays one composer row tall */
.reply-composer-preview .reply-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: #c084fc;
    font-size: 16px;
    line-height: 1;
}

.reply-composer-preview > div,
.reply-composer-preview__body {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
    border-left: 3px solid #a855f7;
    border-radius: 3px;
    padding-left: 9px;
}

.reply-composer-preview .reply-author {
    display: block;
    color: #d18cff;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-composer-preview .reply-text {
    display: block;
    color: rgba(255,255,255,.6);
    font-size: 12.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-cancel {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    z-index: 1;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: #ddd;
    font-size: 17px;
    line-height: 1;
    /* Animate only paint properties — never geometry — so the hit area is rock steady. */
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.reply-cancel:hover {
    background: rgba(168,85,247,.28);
    border-color: rgba(168,85,247,.55);
    color: #fff;
}

:root[data-theme="light"] .reply-composer-preview {
    background: rgba(124,58,237,.08);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

:root[data-theme="light"] .reply-composer-preview .reply-icon {
    color: #7c3aed;
}

:root[data-theme="light"] .reply-composer-preview .reply-author {
    color: #7c3aed;
}

:root[data-theme="light"] .reply-composer-preview .reply-text {
    color: rgba(20,20,35,.6);
}

:root[data-theme="light"] .reply-cancel {
    border-color: rgba(0,0,0,.12);
    background: rgba(0,0,0,.04);
    color: #444;
}

@media (max-width: 575.98px) {
    .reply-composer-preview {
        margin: 0 0 6px;
        padding: 6px 40px 6px 10px;
    }
}

/* quote inside message — Telegram style: full-height accent bar, author line, single text line */
.msg-reply-preview {
    position: relative;
    display: block;
    width: fit-content;
    max-width: min(100%, 420px);
    margin: 0 0 6px;
    padding: 3px 10px 3px 11px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(168,85,247,.14), rgba(168,85,247,.05) 65%, transparent);
    cursor: pointer;
    transition: background .15s ease;
    overflow: hidden;
}

/* Accent bar spans the whole quote block, edge to edge (padding included). */
.msg-reply-preview::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #a855f7;
}

.msg-reply-preview:hover {
    background: linear-gradient(90deg, rgba(168,85,247,.24), rgba(168,85,247,.09) 65%, transparent);
}

.msg-reply-author {
    display: block;
    color: #d18cff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-reply-text {
    display: block;
    color: rgba(255,255,255,.6);
    font-size: 12.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-reply-author:empty {
    display: none;
}

/* own messages quote in the accent used for outgoing bubbles */
.msg--own .msg-reply-preview {
    background: linear-gradient(90deg, rgba(124,156,255,.16), rgba(124,156,255,.05) 65%, transparent);
}

.msg--own .msg-reply-preview::before {
    background: #7c9cff;
}

.msg--own .msg-reply-author {
    color: #9db4ff;
}

:root[data-theme="light"] .msg-reply-preview {
    background: linear-gradient(90deg, rgba(124,58,237,.12), rgba(124,58,237,.04) 65%, transparent);
}

:root[data-theme="light"] .msg-reply-author {
    color: #7c3aed;
}

:root[data-theme="light"] .msg-reply-text {
    color: rgba(20,20,35,.6);
}

@media (max-width: 575.98px) {
    .msg-reply-preview {
        max-width: 100%;
    }

    .msg-reply-text {
        font-size: 12px;
    }
}

/* telegram-like reply action */
.msg {
    position: relative;
}

.msg-reply-action {
    position: absolute;
    right: 54px;
    top: 50%;
    transform: translateY(-50%) scale(.9);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(20,20,30,.65);
    color: #ddd;
    opacity: 0;
    cursor: pointer;
    transition: .18s ease;
    backdrop-filter: blur(8px);
}

.msg:hover .msg-reply-action,
.msg-reply-action:focus {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.msg-reply-action:hover {
    background: rgba(168,85,247,.35);
    border-color: rgba(168,85,247,.7);
    color: #fff;
}

@keyframes replyPreviewIn {
    from {
        opacity:0;
        transform:translateY(8px);
    }
    to {
        opacity:1;
        transform:none;
    }
}