/* ==========================================================================
   OREGONS CHAT - MÓDULO: CAJA DE TEXTO PROMINENTE CON CÁMARA (BLINDADO)
   Estilos independientes y clasificados para evitar código espagueti
   ========================================================================== */

#chat-form {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
}

/* La cápsula de texto con el secreto de Flexbox anti-desbordes */
#message-input {
    flex: 1 !important;
    min-width: 0 !important; /* ¡REGLA DE ORO! Rompe el ancho mínimo de fábrica para que jamás empuje nada hacia afuera */
    height: 54px !important;
    background-color: #383838 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 27px !important;
    padding-left: 54px !important;
    padding-right: 54px !important;
    font-size: 15px !important;
    outline: none !important;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

#message-input::placeholder {
    color: #a0a0a0 !important;
    font-size: 14px !important;
}

/* EL CLIP (📎) ENCAPSULADO A LA IZQUIERDA */
#btn-attach {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 22px !important;
    border: none !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* LA CÁMARA (📷) ENCAPSULADA A LA DERECHA */
#btn-camera {
    position: absolute !important;
    right: 82px !important; /* Regresa a su posición perfecta y armoniosa dentro de la caja */
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    border: none !important;
    z-index: 3 !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
}

/* EL BOTÓN DINÁMICO DE ACCIÓN CON MARGEN DE SEGURIDAD ESTABLE */
#btn-send {
    width: 52px !important;
    height: 52px !important;
    background-color: var(--color-naranja) !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: transform 0.1s ease !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3) !important;
    margin-right: 8px !important; /* Separación limpia, elegante y simétrica de la orilla */
}

/* Pequeños efectos de toque suave en pantalla */
#btn-attach:active,
#btn-camera:active {
    transform: translateY(-50%) scale(0.9) !important;
}
#btn-send:active {
    transform: scale(0.9) !important;
}