/* ============================================================
 * 05-composer-buttons.css
 * Attach / Emoji / Send
 * ============================================================ */

#attachBtn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 9999px !important;
}
#attachBtn svg,
#attachBtn i {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2.5 !important;
    stroke-linecap: square !important;
    stroke-linejoin: miter !important;
}

/* Emoji: to, sát mép — lướt phải + ẩn khi Send hiện */
#emojiBtn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    margin-right: 2px !important;
    padding: 0 !important;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1;
    transform: translateX(0) scale(1);
    overflow: hidden;
    pointer-events: auto;
    transition:
        opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        min-width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        margin 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
#emojiBtn svg,
#emojiBtn i {
    width: 21px !important;
    height: 21px !important;
    stroke-width: 2 !important;
    flex-shrink: 0;
}

/* Có chữ → emoji lướt sang phải rồi núp */
#composerShell:has(#sendBtn.is-visible) #emojiBtn {
    opacity: 0;
    transform: translateX(18px) scale(0.45);
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    pointer-events: none;
}

#composerShell {
    padding-right: 4px !important;
    gap: 2px !important;
}

/* Send: ẩn khi trống, mọc từ phải → trái khi có chữ */
#sendBtn {
    width: 0 !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 9999px !important;
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    position: relative;
    left: 0;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.5);
    overflow: hidden;
    pointer-events: none;
    border: none !important;
    transition:
        opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        min-width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        margin-left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        left 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
#sendBtn.is-visible {
    opacity: 1;
    transform: scale(1);
    width: 36px !important;
    min-width: 36px !important;
    margin-left: 5px !important;
    pointer-events: auto;
}
#sendBtn svg,
#sendBtn i,
#sendIcon {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.5 !important;
    stroke-linecap: square !important;
    stroke-linejoin: miter !important;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    #sendBtn,
    #emojiBtn {
        transition-duration: 0.01ms !important;
    }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}