/* Custom scrollbar */
    .custom-scrollbar::-webkit-scrollbar {
        width: 5px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(0, 168, 204, 0.3);
        border-radius: 10px;
    }

    /* 1. CONTENEDOR DEL MENSAJE */
    .msg-container {
        width: 100%;
        margin-bottom: 1.5rem;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* 2. GLOBO DEL MENSAJE COMPACTO */
    .msg-bubble {
        max-width: 80%;
        padding: 8px 12px;
        border-radius: 12px;
        font-size: 0.95rem;
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .msg-text {
        line-height: 1.35;
        white-space: pre-wrap !important;
    }

    .msg-me {
        align-items: flex-end;
    }

    .msg-me .msg-bubble {
        background: rgba(0, 168, 204, 0.1);
        border-left: 3px solid var(--color-cyan);
        border-bottom-right-radius: 2px;
    }

    .msg-other {
        align-items: flex-start;
    }

    .msg-other .msg-bubble {
        background: rgba(255, 255, 255, 0.05);
        border-left: 3px solid var(--color-silver);
        border-bottom-left-radius: 2px;
    }

    /* 3. BARRA DE REACCIONES FLOTANTE */
    .reaction-bar {
        position: absolute;
        bottom: -18px;
        background: var(--color-slate);
        border: 1px solid rgba(0, 168, 204, 0.2);
        padding: 4px 10px;
        border-radius: 20px;
        display: flex;
        gap: 8px;
        opacity: 0;
        transition: all 0.2s ease-in-out;
        z-index: 10;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        pointer-events: none;
    }

    .msg-me .reaction-bar {
        right: 10px;
    }

    .msg-other .reaction-bar {
        left: 10px;
    }

    .msg-container:hover .reaction-bar {
        opacity: 1;
        pointer-events: auto;
        bottom: -14px;
    }

    .reaction-item {
        cursor: pointer;
        display: inline-block;
        font-size: 1.1rem;
        transition: transform 0.2s ease, filter 0.2s ease;
        filter: grayscale(40%);
    }

    .reaction-item:hover {
        filter: grayscale(0%);
        transform: scale(1.4);
    }

    .badge-reaction {
        font-size: 0.7rem;
        padding: 2px 6px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.2);
    }

    /* 4. COMPONENTE EMOJI-PICKER (Estilo Code Raleem) */
    emoji-picker {
        width: 100%;
        height: 350px;
        --background: transparent;
        --border-color: rgba(255, 255, 255, 0.05);
        --indicator-color: var(--color-cyan);
        --input-border-color: rgba(0, 168, 204, 0.3);
        --input-font-color: var(--color-silver);
        --category-icon-color: var(--color-silver);
        --category-icon-active-color: var(--color-cyan);
    }