/* MATWHA — estilos que Tailwind no cubre */

/* Fondo del hilo de mensajes: trama sutil al estilo WhatsApp, generada con
   gradientes para no depender de ninguna imagen externa. */
.chat-bg {
    background-color: #efeae2;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .025) 1px, transparent 1px),
        radial-gradient(circle at 70% 70%, rgba(0, 0, 0, .025) 1px, transparent 1px);
    background-size: 28px 28px, 34px 34px;
}

/* Burbujas */
.bubble {
    max-width: min(75%, 34rem);
    padding: .4rem .6rem;
    border-radius: .55rem;
    box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.bubble-in {
    background: #ffffff;
    border-top-left-radius: 0;
}

.bubble-out {
    background: #d9fdd3;
    border-top-right-radius: 0;
}

.bubble-failed {
    background: #fee2e2;
}

.bubble-text {
    font-size: .875rem;
    line-height: 1.35rem;
    white-space: pre-wrap;
}

/* Etiqueta del agente que envió el mensaje: identificación interna, no viaja
   al cliente. */
.agent-tag {
    font-size: .7rem;
    font-weight: 600;
    line-height: 1rem;
}

.meta-line {
    font-size: .65rem;
    line-height: .9rem;
    color: #667781;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    margin-top: .1rem;
}

/* Separador de día */
.day-divider span {
    background: rgba(255, 255, 255, .9);
    color: #54656f;
    font-size: .7rem;
    padding: .25rem .75rem;
    border-radius: .5rem;
    box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
}

/* Checks de estado */
.check-read {
    color: #53bdeb;
}

/* Elemento de la lista de conversaciones */
.conv-item.active {
    background: #f0f2f5;
}

/* Panel del contacto.
   Oculto por defecto y visible a partir de 1024px. Se controla desde aquí y no
   con las utilidades de Tailwind porque `lg:flex` gana siempre a `hidden` en
   pantallas grandes y el botón de cerrar no tendría efecto. */
#contact-panel {
    display: none;
}

@media (min-width: 1024px) {
    #contact-panel {
        display: flex;
    }
}

#contact-panel.panel-open {
    display: flex;
}

#contact-panel.panel-closed {
    display: none;
}

/* Zona de arrastre activa */
.drop-active {
    outline: 3px dashed #10b981;
    outline-offset: -8px;
}

/* El textarea crece con el contenido hasta el máximo de Tailwind */
#input {
    field-sizing: content;
}

/* Barra de desplazamiento discreta */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}