/* Estilos propios sobre Bootstrap 5, principalmente para el hilo de conversación del ticket */

/* Ancho máximo del contenido de página (barra de navegación y <main>, ambos
   usan .container-fluid en app/Views/layouts/main.php): sin esto, en monitores
   anchos el contenido se estira de borde a borde con apenas ~12px de gutter
   por defecto de Bootstrap. Se limita el ancho y se agranda el padding lateral
   para dar márgenes visibles, sin perder el espacio ancho que necesitan las
   tablas de tickets/reportes en pantallas normales. */
.container-fluid {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1200px) {
    .container-fluid {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.chat-thread {
    max-height: 60vh;
    overflow-y: auto;
}

.chat-bubble {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
}

.chat-bubble__meta {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.chat-bubble__body {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Mensajes del cliente/solicitante: alineados a la izquierda */
.chat-bubble--client {
    background-color: #e9ecef;
    margin-right: auto;
}

/* Mensajes del agente/admin: alineados a la derecha */
.chat-bubble--agent {
    background-color: #cfe2ff;
    margin-left: auto;
}

/* Notas internas: solo visibles para agentes/admin */
.chat-bubble--note {
    background-color: #fff3cd;
    border: 1px dashed #ffca2c;
    margin-left: auto;
}

/* Miniatura de un adjunto imagen dentro de una respuesta de ticket (ver
   TicketController::downloadAttachment() para el streaming inline y
   ticket-conversation.js para el modal de tamaño completo al hacer clic). */
.attachment-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: zoom-in;
}

/* Indicador de presencia ("en línea"): ver App\Helpers\Presence, basado en heartbeat, no en
   una conexión persistente real. Verde = heartbeat reciente; blanco = sin actividad reciente. */
.presence-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    border: 1px solid #adb5bd;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.presence-dot--online {
    background-color: #28a745;
    border-color: #1e7e34;
}

.presence-dot--offline {
    background-color: #ffffff;
}

/* Avatares (ver App\Helpers\Avatar): foto subida o círculo con inicial. */
.avatar-img,
.avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    object-fit: cover;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}

.avatar-sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
}

.avatar-md {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
}

.avatar-lg {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.75rem;
}

/* Botón flotante de chat (rol Usuario, ver assets/js/chat-widget.js) */
.chat-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: #25d366;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
    z-index: 1050;
    cursor: pointer;
}

.chat-fab__badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    background-color: #dc3545;
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    min-width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
}

.chat-panel {
    position: fixed;
    right: 1.5rem;
    bottom: 5.5rem;
    width: 20rem;
    max-width: calc(100vw - 3rem);
    height: 28rem;
    max-height: calc(100vh - 8rem);
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1050;
}

.chat-panel__header {
    background-color: #075e54;
    color: #fff;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.chat-panel__body {
    flex: 1 1 auto;
    max-height: none;
    padding: 0.75rem;
    background-color: #ece5dd;
}

.chat-panel__footer {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    border-top: 1px solid #dee2e6;
}

/* Lista de "conversaciones anteriores" del widget (assets/js/chat-widget.js) */
.chat-panel__history {
    max-height: 10rem;
    overflow-y: auto;
    border-bottom: 1px solid #dee2e6;
    background-color: #fff;
}

.chat-history-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-bottom: 1px solid #f1f1f1;
}

.chat-history-item:hover {
    background-color: #f8f9fa;
}

.chat-history-back {
    display: block;
    width: 100%;
    text-align: center;
    border: none;
    background: none;
    color: #075e54;
    font-size: 0.8rem;
    padding: 0.4rem;
    margin-bottom: 0.5rem;
    text-decoration: underline;
}

/* Divisor "conversación resuelta" dentro del hilo del widget */
.chat-divider {
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0.75rem 0;
}

.chat-panel__footer input {
    flex: 1 1 auto;
}

/* Ticks de lectura estilo WhatsApp: gris = enviado, azul = leído. */
.chat-tick {
    letter-spacing: -0.2em;
    margin-left: 0.15rem;
    color: #9e9e9e;
}

.chat-tick--read {
    color: #34b7f1;
}

/* Lista de contactos de la página /chat */
.chat-contact-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chat-contact-row__info {
    flex: 1 1 auto;
    min-width: 0;
}

.chat-contact-row__name {
    font-weight: 600;
}

.chat-contact-row__preview {
    font-size: 0.85rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Conversación ya resuelta: sigue en la lista para revisar el historial, pero
   atenuada para distinguirla de las conversaciones activas. */
.chat-contact-row--closed {
    opacity: 0.6;
}

.chat-unread-badge {
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    min-width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}