/* Barra de desplazamiento personalizada */
.chat-container::-webkit-scrollbar {
    width: 6px;
}
.chat-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.chat-container::-webkit-scrollbar-thumb {
    background: #c5c5c5;
    border-radius: 10px;
}
.chat-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Animaciones suaves */
.mensaje {
    opacity: 0;
    transform: translateY(10px);
    animation: aparecer 0.3s ease forwards;
}

@keyframes aparecer {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación de escritura */
.indicador-escribiendo {
    display: inline-flex;
    align-items: center;
}
.punto-escribiendo {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #9ca3af;
    margin: 0 2px;
    animation: animacionEscribiendo 1.4s infinite ease-in-out;
}
.punto-escribiendo:nth-child(1) {
    animation-delay: 0s;
}
.punto-escribiendo:nth-child(2) {
    animation-delay: 0.2s;
}
.punto-escribiendo:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes animacionEscribiendo {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-5px);
    }
}

/* Decoración mexicana sutil */
.header-border {
    border-bottom: 6px solid;
    border-image: linear-gradient(to right,
        #006847 0%,   /* green start */
        #006847 33.33%, /* green end */
        #ffffff 33.33%, /* white start */
        #ffffff 66.66%, /* white end */
        #ce1126 66.66%,  /* red start */
        #ce1126 100%     /* red end */
    ) 1;
}

.hidden-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}