/* === ESTILOS UNIFICADOS DE BURBUJAS - estyle2.css === */

/* --- Fuente general del chat --- */
.chat-container {
    font-family: system-ui, -apple-system, sans-serif;
}

/* --- Estilo base de cada mensaje--- */
.message {
    display: flex;
    align-items: flex-start;               /* Alinea elementos al inicio vertical */
    margin: 8px 0;                          /* Espacio vertical entre mensajes */
    animation: fadeIn 0.3s ease;      /* Animación suave al aparecer */
}

/* --- Mensajes del dueño (tus mensajes) --- */
.message.outgoing {
    justify-content: flex-end;   /* Alinea TODO el mensaje al borde derecho */
}

/* --- Círculo del avatar en mensajes del dueño --- */
.message.outgoing .initial-circle {
    margin-left: 5px;           /* Espacio entre burbuja y círculo */
}

/* --- Mensajes de otros usuarios --- */
.message.incoming {
    justify-content: flex-start; /* Alinea TODO el mensaje al borde izquierdo */
}

/* --- Círculo del avatar en mensajes de otros --- */
.message.incoming .initial-circle {
    margin-right: 5px;          /* Espacio entre círculo y burbuja */
}

/* --- Estilo del círculo del avatar (¡UN SOLO ESTILO PARA TODOS!) --- */
.initial-circle {
    width: 50px;                       /* Ancho del círculo */
    height: 50px;                     /* Alto del círculo */
    border-radius: 50%;            /* Lo hace perfectamente redondo */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e0e0e0;    /* Fondo gris claro cuando no hay avatar */
    flex-shrink: 0;                        /* Evita que se encoja en pantallas pequeñas */
    overflow: hidden;                   /* Recorta contenido que se salga del círculo */
    font-weight: bold;                   /* Letra inicial en negrita */
    color: #555;                          /* Color de la letra inicial */
    border: 2px solid #fff;            /* ✅ ¡BORDE AGREGADO! Color gris medio, 2px de grosor */
    cursor: pointer;
}

/* --- Estilo de la imagen dentro del círculo del avatar --- */
.initial-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para llenar el círculo sin deformarla */
}

/* === BURBUJA BASE === */
.bubble {
    max-width: 70%;                                     /* Ancho máximo (70% del contenedor padre) */
    padding: 0px 8px;                                   /* Espacio interior: arriba/abajo V/s izquierda/derecha */
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);     /* Sombra sutil */
    word-break: break-word;                           /* Evita que palabras largas rompan el diseño */
}

/* === BURBUJA OTROS USUARIOS === */
.bubble.incoming {
    background: #ffffff;                                /* Fondo blanco */
    border: 1px solid #e0e0e0;                      /* Borde gris claro */
    text-align: left;                                       /* Texto alineado a la izquierda */
    border-radius: 0px 10px 10px 10px;        /* redondeado: superior-izquierda = 0 (pegado al círculo) */
}

/* === TRIÁNGULO SUPERIOR IZQUIERDO (para mensajes de otros) === */
.bubble.incoming::before {
    content: '';
    position: absolute;
    top: 0;                     /* 🔑 Alineado al borde SUPERIOR */
    left: -8px;                 /* Ajusta según el margen del círculo */
    width: 0;
    height: 0;
    border-top: 0 solid transparent;           /* 🔑 Borde superior = 0 */
    border-bottom: 12px solid transparent;     /* Altura del triángulo */
    border-right: 8px solid #ffffff;           /* Ancho del triángulo + color de fondo */
    z-index: 1;
}

/* === BORDE DEL TRIÁNGULO (opcional) === */
.bubble.incoming::after {
    content: '';
    position: absolute;
    top: -1px;                  /* 🔑 Alineado al borde superior (con 1px de compensación por el borde) */
    left: -9px;                 /* 1px más a la izquierda para cubrir el borde */
    width: 0;
    height: 0;
    border-top: 0 solid transparent;           /* 🔑 Borde superior = 0 */
    border-bottom: 13px solid transparent;     /* 1px más alto para cubrir el borde */
    border-right: 9px solid #e0e0e0;           /* Color del borde de la burbuja */
    z-index: 0;
}

/* === BURBUJA DUEÑO DE CHAT === */
.bubble.outgoing {
    background: #dcf8c6;                         /* Fondo verde claro estilo WhatsApp */
    border: 1px solid #b2f0a0;                  /* Borde verde más claro */
    text-align: right;                                 /* Texto alineado a la derecha */
    border-radius: 10px 0px 10px 10px;    /* redondeado: superior-derecha = 0 (pegado al círculo) */
}

/* === TRIÁNGULO SUPERIOR DERECHO (para mensajes del dueño) === */
.bubble.outgoing::before {
    content: '';
    position: absolute;
    top: 0;                     /* 🔑 Alineado al borde SUPERIOR */
    right: -8px;                /* Ajusta según el margen del círculo */
    width: 0;
    height: 0;
    border-top: 0 solid transparent;           /* 🔑 Borde superior = 0 */
    border-bottom: 12px solid transparent;     /* Altura del triángulo */
    border-left: 8px solid #dcf8c6;            /* Ancho del triángulo + color de fondo */
    z-index: 1;
}

/* === BORDE DEL TRIÁNGULO (opcional) === */
.bubble.outgoing::after {
    content: '';
    position: absolute;
    top: -1px;                  /* 🔑 Alineado al borde superior */
    right: -9px;                /* 1px más a la derecha */
    width: 0;
    height: 0;
    border-top: 0 solid transparent;           /* 🔑 Borde superior = 0 */
    border-bottom: 13px solid transparent;     /* Altura del borde */
    border-left: 9px solid #b2f0a0;            /* Color del borde de la burbuja */
    z-index: 0;
}


/* --- Estilo del nombre del remitente (arriba del mensaje) --- */
.sender-name {
    font-size: 14px;             /* Tamaño de letra */
    font-weight: bold;           /* Negrita */
    margin-top: 4px;          /* Espacio debajo del nombre */
    margin-bottom: 4px;          /* Espacio debajo del nombre */
    opacity: 0.8;                /* Transparencia (1 = totalmente visible) */
    color: #333;                 /* Color de texto */
    text-transform: lowercase !important;

}

/* --- Estilo del texto del mensaje --- */
.message-text {
    font-size: 15px;             /* Tamaño de letra */
    line-height: 1.4;            /* Espacio entre líneas */
    color: #222;                 /* Color de texto */
}

/* --- Estilo de la hora (debajo del mensaje) --- */
.message-time {
    font-size: 10px;             /* Tamaño pequeño */
    margin-top: 1px;             /* Espacio arriba de la hora */
    opacity: 0.7;                /* Semitransparente */
    display: block;              /* Se muestra como bloque (no inline) */
}

/* --- Alineación de la hora en mensajes de otros --- */
.message.incoming .message-time {
    text-align: right;            /* Hora alineada a la izquierda */
}

/* --- Alineación de la hora en tus mensajes --- */
.message.outgoing .message-time {
    text-align: right;           /* Hora alineada a la derecha */
}

/* === Estilo de imágenes dentro de las burbujas === */
.bubble img {
  width: 180px;
  height: 50px;
  border-radius: 5px;
  border: 1px solid #E0E0E0; /* Gris claro */
  object-fit: cover;
  object-position: center center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* --- Estilo de mensajes temporales (mientras se envían) --- */
.mensaje-nuevo .bubble {
    /*opacity: 0.7;                 Burbuja semitransparente */
    filter: grayscale(0.2);      /* Ligeramente en escala de grises */
}

/* --- Oculta la hora en mensajes temporales --- */
.mensaje-nuevo .message-time {
    /*display: none;                No se muestra la hora */
}

/* --- Animación de aparición de mensajes --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px); /* Empieza 10px más abajo */
    }
    to {
        opacity: 1;
        transform: translateY(0);    /* Termina en su posición normal */
    }
}

/* --- Estilos para pantallas pequeñas (celulares) --- */
@media (max-width: 768px) {
    .bubble {
        max-width: 85%;          /* Burbujas más anchas en móviles */
    }
}


/* === BOTONES DE MODERACIÓN === */
/*
.botones-moderar {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.btn-eliminar {
    background: red;
    color: black;
    border: 1px solid #111;  
    border-radius: 50%;
    padding: 2px;
    font-size: 14px;
    cursor: pointer;
}
.btn-ocultar {
    background: green;
    color: black;
    border: 1px solid #111;  
    border-radius: 50%;
    padding: 2px;
    font-size: 14px;
    cursor: pointer;
}
.btn-reportar {
    background: yellow;
    color: black;
    border: 1px solid #111;  
    border-radius: 50%;
    padding: 2px;
    font-size: 14px;
    cursor: pointer;
}
*/


/* === TICKET COMPACTO (DOS PALOMITAS JUNTAS) === */
.ticket-single {
    color: #007bfc;           /* Azul estilo WhatsApp */
    font-weight: bold;
    font-size: 1.0em;
    margin-left: 0px;         /* Espacio entre hora y tickets */
    letter-spacing: -4px;     /* ✅ ¡JUNTA LOS DOS ✔! */
}




/* Burbuja con ancho mínimo */
.bubble.incoming {
    min-width: 100px !important; /* Ancho mínimo para evitar desorden */
}

/* Botones ARRIBA - LIGERAMENTE DERECHA */
.botones-arriba {
    position: absolute;
    top: -0px;
    right: 0px;
    display: flex;
    gap: 2px;
    z-index: 10;
}

/* Botones ABAJO - LIGERAMENTE IZQUIERDA */
.botones-abajo {
    position: absolute;
    bottom: -8px;
    left: 0px;
    display: flex;
    gap: 2px;
    z-index: 10;
}

/* Botones con colores de la burbuja */
.botones-abajo button,
.botones-arriba button {
    border: 0px solid #e0e0e0 !important; /* Mismo borde que la burbuja */
    background: #ffffff !important; /* Mismo fondo blanco que la burbuja */
    padding: 0px 3px !important;
    border-radius: 5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 1px !important;
    font-size: 12px !important;
    min-height: 22px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.0) !important; /* Misma sombra */
}

/* Contadores */
.contador-reportes,
.contador-me-gusta {
    font-size: 12px !important;
    font-weight: bold !important;
    display: inline-block !important;
    color: #666 !important; /* Color discreto */
}