/**
 * CRM - Bandeja de conversaciones
 * Layout full-height: sin scroll en ventana, solo el chat tiene scroll.
 */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap");

/* Scroll mínimo: solo cuando no cabe en pantalla (p. ej. pantallas pequeñas) */
.content-wrapper.xoey-crm-conversations-content {
    overflow-y: auto;
}

/* Contenedor flex: intenta ocupar el viewport; si no cabe, permite scroll */
.xoey-crm-conversations-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 200px);
}

.xoey-crm-conversations-page nav[aria-label="breadcrumb"] {
    flex-shrink: 0;
}

.xoey-crm-conversations-page .xoey-crm-conversations-header {
    flex-shrink: 0;
}

.xoey-crm-conversations-page .xoey-crm-conversations-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.xoey-crm-conversations-page .xoey-crm-conversations-card .card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.xoey-crm-conversations-page .xoey-crm-conversations-card .card .row {
    flex: 1;
    min-height: 0;
}

.xoey-crm-conversations-page .xoey-crm-conversations-card .card .row > [class*="col-"] {
    min-height: 0;
}

/* Columna del chat: limita altura para que el scroll sea interno */
.xoey-crm-conversations-page .xoey-crm-chat-column {
    overflow: hidden;
}

/* Área de mensajes del chat: scroll interno + fuente mono compacta */
.xoey-crm-conversations-page .xoey-crm-chat-messages {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-family: ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Liberation Mono", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.35;
}

/* Burbujas de mensaje: mismo estilo compacto */
.xoey-crm-conversations-page .xoey-crm-chat-messages .rounded.px-3.py-2 {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Negrita visible en monoespaciada: peso explícito + fondo sutil */
.xoey-crm-conversations-page .xoey-crm-chat-messages strong {
    font-weight: 800;
}
.xoey-crm-conversations-page .xoey-crm-chat-messages .bg-primary strong {
    background: rgba(255, 255, 255, 0.2);
    padding: 0 2px;
    border-radius: 2px;
}
.xoey-crm-conversations-page .xoey-crm-chat-messages .bg-body-secondary strong {
    background: rgba(0, 0, 0, 0.08);
    padding: 0 2px;
    border-radius: 2px;
}

/* Separador de fecha entre mensajes (estilo WhatsApp) */
.xoey-crm-date-separator {
    flex-shrink: 0;
}
.xoey-crm-date-separator-label {
    font-size: 0.7rem;
    color: var(--bs-secondary-color, #6c757d);
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 500;
}

/* Menú de acciones por conversación: scroll interno y por encima del chat activo */
.xoey-crm-dropdown-acciones .dropdown-menu,
.xoey-crm-dropdown-menu-acciones {
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1100 !important;
}

/* Efecto de mensaje nuevo (envío o recepción): breve animación de aparición */
.xoey-crm-conversations-page .xoey-crm-msg-row.xoey-crm-msg-new .rounded.px-3.py-2 {
    animation: xoey-crm-msg-new 0.5s ease;
}
@keyframes xoey-crm-msg-new {
    0% {
        opacity: 0.6;
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Menú de reacciones: emojis en horizontal, compacto tipo WhatsApp */
.xoey-crm-reaction-menu {
    min-width: auto !important;
}
.xoey-crm-reaction-menu-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
}
.xoey-crm-reaction-menu .xoey-crm-msg-reaction-btn {
    font-size: 1.25rem;
    line-height: 1;
    padding: 2px 6px;
    min-width: auto;
}

/* Responder y Reaccionar: misma fila, ocultos por defecto, visibles al hover; en touch siempre visibles */
.xoey-crm-msg-actions {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.xoey-crm-msg-row:hover .xoey-crm-msg-actions,
.xoey-crm-msg-row:has(.dropdown.show) .xoey-crm-msg-actions {
    opacity: 1;
}
@media (hover: none) {
    .xoey-crm-msg-actions {
        opacity: 1;
    }
}
/* Dropdown de reacción inline para no forzar nueva línea */
.xoey-crm-msg-actions .dropdown {
    display: inline-flex;
}
.xoey-crm-msg-actions .dropdown-toggle {
    white-space: nowrap;
}

/* Reacciones ya asignadas al mensaje: siempre visible al costado cuando tienen contenido */
.xoey-crm-msg-row .xoey-crm-msg-reactions {
    font-size: 1.15em;
    line-height: 1.2;
    display: inline-block;
    min-width: 1.5em;
    flex-shrink: 0;
}

/* Mensaje citado (reply): borde lateral + texto compacto */
.xoey-crm-msg-quoted {
    font-size: 0.75rem;
    line-height: 1.3;
}
.xoey-crm-msg-quoted-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Cuando un dropdown está abierto, el contenedor de la lista no recorta el menú */
#xoey-crm-offcanvas-conversaciones.xoey-crm-dropdown-open #xoey-crm-conv-list {
    overflow: visible;
}

/* Ítem cuyo menú está abierto: por encima del chat activo (clase añadida por JS) */
#xoey-crm-conv-list .xoey-crm-conv-item.xoey-crm-conv-item-menu-open {
    position: relative;
    z-index: 1050;
}

/* Lista de conversaciones: altura mínima base; si hay etiquetas el ítem crece solo (dinámico) */
#xoey-crm-conv-list.xoey-crm-conv-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
#xoey-crm-conv-list .xoey-crm-conv-item {
    flex: 0 0 auto;
    min-height: 5.5rem;
}
.xoey-crm-conv-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: visible;
}
.xoey-crm-conv-preview {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
    min-height: 1.3em;
    flex-shrink: 0;
}
.xoey-crm-conv-badges {
    flex-shrink: 0;
    min-height: 0;
    margin-top: 0.2rem;
    flex-wrap: wrap;
    align-content: flex-start;
}
.xoey-crm-conv-badges .badge {
    font-size: 0.65rem;
}

/* Primera fila: nombre/teléfono a la izquierda; hora, badges y tres puntos alineados arriba a la derecha */
.xoey-crm-conv-first-row {
    align-items: flex-start;
}
.xoey-crm-conv-meta {
    min-width: 5.5rem;
    align-self: flex-start;
    flex-shrink: 0;
}
.xoey-crm-conv-meta .xoey-crm-conv-hora,
.xoey-crm-conv-meta .badge,
.xoey-crm-conv-meta .dropdown {
    vertical-align: middle;
}
.xoey-crm-conv-meta .dropdown .btn {
    line-height: 1;
    padding: 0.15rem 0.25rem;
}
.xoey-crm-conv-meta .xoey-crm-badge-sin-vincular-item {
    font-size: 0.65rem;
    white-space: nowrap;
}

/* Preview del último mensaje: contraste en ítem activo (fondo claro en muchos temas) */
.xoey-crm-conv-item.active .xoey-crm-conv-preview,
.xoey-crm-conv-item.active .xoey-crm-conv-preview-active {
    color: rgba(0, 0, 0, 0.8) !important;
}

/* Hora y menú de tres puntos: visibles en ítem activo (fondo claro) */
.xoey-crm-conv-item.active .xoey-crm-conv-hora.xoey-crm-conv-meta-active,
.xoey-crm-conv-item.active .xoey-crm-conv-meta .xoey-crm-conv-hora {
    color: rgba(0, 0, 0, 0.8) !important;
}
.xoey-crm-conv-item.active .xoey-crm-conv-dropdown-toggle.xoey-crm-conv-meta-active,
.xoey-crm-conv-item.active .xoey-crm-conv-dropdown-toggle {
    color: rgba(0, 0, 0, 0.75) !important;
}
.xoey-crm-conv-item.active .xoey-crm-conv-dropdown-toggle:hover {
    color: rgba(0, 0, 0, 0.95) !important;
}

/* Enlaces en mensajes: visibles en burbuja clara y primary */
.xoey-crm-msg-link {
    text-decoration: underline;
    word-break: break-all;
}
.xoey-crm-chat-messages .bg-primary .xoey-crm-msg-link {
    color: rgba(255, 255, 255, 0.95);
}
.xoey-crm-chat-messages .bg-body-secondary .xoey-crm-msg-link {
    color: var(--bs-link-color, #0d6efd);
}

/* Imagen/sticker clickeable: abre en modal de vista previa */
.xoey-crm-image-preview-trigger {
    cursor: pointer;
    /* Evita hueco por line-height “de texto” bajo la miniatura */
    line-height: 0;
    vertical-align: bottom;
}

/*
 * Burbujas con imagen/sticker/video: ancho al contenido.
 * fit-content + hijo con d-block (hora) hacía estirar la burbuja al ancho de la fila flex;
 * max-content + flex: 0 0 auto + hora en línea corrige el “tablón” morado vacío.
 */
.xoey-crm-conversations-page .xoey-crm-chat-messages .xoey-crm-msg-bubble--media {
    flex: 0 0 auto;
    width: max-content;
    max-width: 85%;
    min-width: 0;
    box-sizing: border-box;
}

/* Miniatura: sin max-width % (evita depender del ancho ya estirado de la burbuja). img-fluid retirado en JS. */
.xoey-crm-conversations-page .xoey-crm-msg-media-thumb {
    display: block;
    max-height: 160px;
    max-width: 280px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 400px) {
    .xoey-crm-conversations-page .xoey-crm-msg-media-thumb {
        max-width: min(280px, 92vw);
    }
}

/* Columna interna: evita hora al lado de la miniatura y no estira el ancho al 100 % */
.xoey-crm-conversations-page .xoey-crm-msg-media-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    max-width: 100%;
}

/* El mt-1 del reloj sumaba al gap; en columna basta con gap */
.xoey-crm-conversations-page .xoey-crm-msg-media-stack .xoey-crm-msg-time-status,
.xoey-crm-conversations-page .xoey-crm-msg-media-stack > small {
    margin-top: 0 !important;
}

.xoey-crm-conversations-page .xoey-crm-msg-media-stack .xoey-crm-msg-time-status small.d-block {
    display: inline !important;
}

/* Estado de mensaje enviado: enviado / entregado / leído */
.xoey-crm-msg-status-icon {
    font-size: 0.9em;
    opacity: 0.85;
    vertical-align: middle;
}
.xoey-crm-msg-status-delivered {
    color: rgba(255, 255, 255, 0.8);
}
.xoey-crm-msg-status-read {
    color: #7fcfff;
}

/* Chats con responsable asignado: borde izquierdo para identificarlos sin ocupar espacio */
.xoey-crm-conv-item.xoey-crm-conv-item-asignado {
    border-inline-start: 3px solid var(--bs-primary, #0d6efd);
}

/* Header chat activo: nombre + número en una línea; borde izquierdo si no vinculado; etiquetas debajo */
.xoey-crm-header-contact {
    flex: 1 1 auto;
    min-width: 0;
}
#xoey-crm-chat-nombre-wrap {
    line-height: 1.3;
}
#xoey-crm-chat-nombre-wrap.xoey-crm-chat-sin-vincular-border {
    border-inline-start: 3px solid var(--bs-warning, #ffc107);
    padding-inline-start: 0.5rem;
}
#xoey-crm-chat-etiquetas .badge {
    font-size: 0.7rem;
}

/* Panel pedido asociado: menos padding/margin arriba y abajo */
#xoey-crm-panel-pedido {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
#xoey-crm-panel-pedido .xoey-crm-pedido-detail .card-body {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}
#xoey-crm-panel-pedido .xoey-crm-pedido-items {
    margin-top: 0.35rem;
    margin-bottom: 0;
}
#xoey-crm-panel-pedido .xoey-crm-pedido-items td,
#xoey-crm-panel-pedido .xoey-crm-pedido-items th {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}
/* Color - Talla en una sola línea (sin salto por espacio) */
#xoey-crm-panel-pedido .xoey-crm-pedido-items .xoey-crm-pedido-color-talla {
    white-space: nowrap;
}

/* Panel pedido: JetBrains Mono (tiene pesos 400/700/800 para negrita real) */
.xoey-crm-pedido-detail {
    font-family: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
    font-size: 0.8125rem;
}
/* Código del pedido más visible */
.xoey-crm-pedido-code {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.xoey-crm-pedido-detail .xoey-crm-pedido-items {
    font-size: 0.75rem;
}
/* Columna Total de la tabla de ítems: más negrita, mismo tamaño (mono) */
.xoey-crm-pedido-items td:last-child,
.xoey-crm-pedido-items th:last-child {
    font-weight: 700;
}
/* Resumen tipo factura (unidades + total al final) */
.xoey-crm-pedido-resumen {
    font-size: 0.8125rem;
}
.xoey-crm-pedido-resumen table td:last-child {
    white-space: nowrap;
}
/* Total del resumen: negrita 800 (JetBrains Mono la soporta) */
.xoey-crm-pedido-resumen .xoey-crm-total-row td {
    font-weight: 800;
    font-size: 1rem;
    color: var(--bs-body-color, #212529);
}
.xoey-crm-pedido-resumen .xoey-crm-total-row td:last-child {
    font-size: 1.05rem;
}

/* Línea separadora entre modelos/ítems en la lista del pedido */
.xoey-crm-pedido-items-sep td {
    vertical-align: middle !important;
    border: none !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}
.xoey-crm-pedido-sep-line {
    height: 0;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    margin: 0;
}

/* Filas de ítem editables: clic para abrir modal en modo edición */
.xoey-crm-pedido-item-editable {
    cursor: pointer;
}
.xoey-crm-pedido-item-editable:hover {
    background-color: rgba(13, 110, 253, 0.08);
}

/* Modal agregar producto: fuente mono como panel pedido */
#xoey-crm-modal-add-product .modal-content {
    font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", monospace;
    font-size: 0.8125rem;
}
#xoey-crm-modal-add-product .modal-title {
    font-size: 1rem;
    font-weight: 700;
}
#xoey-crm-modal-add-product .xoey-crm-modal-product-sku {
    font-size: 0.75rem;
}
#xoey-crm-modal-add-product .xoey-crm-modal-variants {
    font-size: 0.75rem;
}
#xoey-crm-modal-add-product .xoey-crm-modal-summary {
    font-size: 0.8125rem;
}

/* Modal agregar producto: input-group compacto (− input +) y Disp con reserva */
.xoey-crm-qty-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.xoey-crm-qty-input-group {
    width: auto;
    flex-shrink: 0;
    flex-wrap: nowrap;
    max-width: 100%;
}
.xoey-crm-qty-input-group .btn {
    padding: 0.15rem 0.35rem;
    min-width: 1.6rem;
    font-size: 0.75rem;
}
.xoey-crm-qty-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    min-width: 2.25rem;
    min-height: calc(1.5em + 0.3rem);
    padding: 0 0.2rem;
    font-size: 0.75rem;
    font-family: inherit;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #ced4da);
    border-left: 0;
    border-right: 0;
    color: var(--bs-body-color);
}
#xoey-crm-modal-add-product .xoey-crm-modal-variants td:has(.xoey-crm-qty-cell) {
    text-align: center;
    vertical-align: middle;
}
.xoey-crm-qty-input-group .btn:first-of-type {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.xoey-crm-qty-input-group .form-control {
    border-radius: 0;
}
.xoey-crm-qty-input-group .btn:last-of-type {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Colores amigables: disponible (verde), reserva (naranja) */
#xoey-crm-modal-add-product .xoey-crm-disp {
    display: block;
    font-size: 0.7rem;
    line-height: 1.3;
}
#xoey-crm-modal-add-product .xoey-crm-disp-available {
    color: var(--bs-success, #198754);
    font-weight: 500;
}
#xoey-crm-modal-add-product .xoey-crm-disp-available.xoey-crm-disp-available--zero {
    color: var(--bs-danger, #dc3545);
}
#xoey-crm-modal-add-product .xoey-crm-disp-reserve {
    color: var(--bs-warning, #fd7e14);
    font-weight: 500;
}

/* Dropzone y preview de medios CRM */
.xoey-crm-dropzone {
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.xoey-crm-dropzone:hover {
    background-color: rgba(13, 110, 253, 0.05);
}
.xoey-crm-dropzone.border-primary {
    background-color: rgba(13, 110, 253, 0.08);
}
.xoey-crm-media-preview-item {
    flex-shrink: 0;
}

/* Campo de texto para enviar mensaje: textarea para respetar saltos de línea (mensajes rápidos) */
.xoey-crm-send-textarea {
    min-height: 2.5rem;
    max-height: 8rem;
    resize: none;
}
.xoey-crm-send-textarea:focus {
    box-shadow: none;
}

/* Configuración: vista previa de mensaje rápido (formato WhatsApp) */
.xoey-crm-mensaje-preview {
    min-height: 4rem;
    word-break: break-word;
}
.xoey-crm-mensaje-preview .xoey-crm-mono {
    font-family: ui-monospace, monospace;
    font-size: 0.9em;
    padding: 0.1em 0.3em;
    border-radius: 0.2rem;
    background: rgba(0, 0, 0, 0.06);
}

.xoey-crm-emoji-btn,
.xoey-crm-emoji-btn-edit {
    min-width: 2.25rem;
    font-size: 1.15em;
    line-height: 1.2;
    padding: 0.2rem 0.35rem;
}

/* Botón emoji en el chat: mismo aspecto que imagen/adjuntos, agrupado */
.input-group #xoey-crm-emoji-dropdown {
    display: flex;
    align-items: stretch;
}
.input-group #xoey-crm-emoji-dropdown > .btn {
    border-radius: 0;
    margin-left: -1px;
    border-left-width: 0;
}
.input-group #xoey-crm-emoji-dropdown > .btn:hover {
    border-left-width: 0;
    z-index: 2;
}
.input-group #xoey-crm-emoji-dropdown > .btn:focus {
    border-left-width: 0;
    z-index: 3;
}
.input-group > .btn:first-of-type {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .btn:nth-of-type(2) {
    border-radius: 0;
}
.xoey-crm-emoji-picker-list .xoey-crm-emoji-picker-btn {
    min-width: 2rem;
    font-size: 1.1em;
    padding: 0.2rem 0.3rem;
}

.xoey-crm-mensaje-rapido-item .xoey-crm-mensaje-rapido-texto {
    white-space: pre-wrap;
    word-break: break-word;
}
.xoey-crm-mensaje-rapido-item .xoey-crm-mensaje-rapido-texto .xoey-crm-mono {
    font-family: ui-monospace, monospace;
    font-size: 0.9em;
    padding: 0.1em 0.3em;
    border-radius: 0.2rem;
    background: rgba(0, 0, 0, 0.06);
}

/* Modal notas internas: reutiliza .timeline.card-timeline del proyecto; solo wrapper con scroll */
.xoey-crm-notas-timeline-wrap {
    max-height: 22rem;
    overflow-y: auto;
}