/**
 * Omnicanal total — layout a pantalla completa bajo header/footer.
 * Solo activo con body.cn-omnicanal-total-active (ajax_chat.js / ajax.js).
 * No afecta otras vistas del dashboard.
 *
 * Reglas clave:
 *  - Desktop: panel fijo entre header y footer, 2 columnas.
 *  - Movil/estrecho: mismo ancla al viewport, sin height:auto (evita el
 *    recorte / layout "roto" al abrir el chat completo).
 *  - body.cn-omni-chat-open (movil): muestra solo la conversacion.
 *  - body.cn-omni-ready: entrada suave al cargar el HTML.
 */
 :root {
  --cn-omni-header-h: var(--cn-header-height, 50px);
  --cn-omni-footer-h: 42px;
  --cn-omni-sidebar-w: var(--cn-sidebar-width, 240px);
  --cn-omni-sidebar-mini-w: 50px;
}

/* Sin scroll de pagina: footer CardioNet fijo abajo */
html.cn-omnicanal-total-active,
body.cn-omnicanal-total-active {
  height: 100% !important;
  overflow: hidden !important;
}

body.cn-omnicanal-total-active .wrapper {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.cn-omnicanal-total-active .content-wrapper {
  overflow: hidden !important;
  min-height: 0 !important;
  margin-top: var(--cn-omni-header-h) !important;
  padding-top: 0 !important;
  height: calc(100vh - var(--cn-omni-header-h) - var(--cn-omni-footer-h)) !important;
  max-height: calc(100vh - var(--cn-omni-header-h) - var(--cn-omni-footer-h)) !important;
  margin-bottom: 0 !important;
}

body.cn-omnicanal-total-active .content-wrapper > .content {
  padding: 0 !important;
  overflow: hidden !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

body.cn-omnicanal-total-active .content-wrapper > .content > .row {
  margin: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

body.cn-omnicanal-total-active .content-wrapper > .content > .row > .box {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  height: 100% !important;
  max-height: 100% !important;
}

body.cn-omnicanal-total-active #cuerpo {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.cn-omnicanal-total-active .main-footer {
  position: fixed !important;
  left: var(--cn-omni-sidebar-w) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 12px 15px !important;
  z-index: 830 !important;
  background: #fff !important;
  border-top: 1px solid #d2d6de !important;
}

body.cn-omnicanal-total-active.sidebar-mini.sidebar-collapse .main-footer {
  left: var(--cn-omni-sidebar-mini-w) !important;
}

@media (max-width: 767px) {
  body.cn-omnicanal-total-active .main-footer {
    left: 0 !important;
  }
}

/* Ancla al viewport: ocupa el area entre header y footer fijo, alineado al sidebar real */
body.cn-omnicanal-total-active #cn-chat-total-root {
  position: fixed !important;
  top: var(--cn-omni-header-h) !important;
  right: 0 !important;
  bottom: var(--cn-omni-footer-h) !important;
  left: var(--cn-omni-sidebar-w) !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  box-sizing: border-box !important;
  z-index: 820 !important;
  overflow: hidden !important;
  background: #eef3f8;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease;
}

body.cn-omnicanal-total-active.cn-omni-ready #cn-chat-total-root {
  opacity: 1;
  transform: translateY(0);
}

body.cn-omnicanal-total-active.sidebar-mini.sidebar-collapse #cn-chat-total-root {
  left: var(--cn-omni-sidebar-mini-w) !important;
}

/* Lista de conversaciones: scroll interno (no se rompe con el sidebar) */
body.cn-omnicanal-total-active #chat_lista {
  min-height: 0 !important;
  overflow: hidden !important;
}

body.cn-omnicanal-total-active #chat_lista .sidebar-container,
body.cn-omnicanal-total-active #chat_lista .sidebar-container > .chat-sidebar {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.cn-omnicanal-total-active #chat_conversacion_interno {
  min-height: 0 !important;
}

body.cn-omnicanal-total-active #cn-chat-total-root .cn-chat {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

body.cn-omnicanal-total-active #cn-chat-total-root.cn-chat-root {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

/* ============================================================
   MOVIL / ESTRECHO — layout limpio (estilo WhatsApp)
   Antes: height:auto + overflow:hidden del fixed = chat recortado.
   Ahora: llena el viewport; lista O conversacion, no ambas apiladas.
   ============================================================ */
@media (max-width: 768px) {
  body.cn-omnicanal-total-active #cn-chat-total-root {
    left: 0 !important;
    padding: 0 !important;
    /* En movil el footer ocupa espacio; el chat usa todo el hueco util */
    bottom: var(--cn-omni-footer-h) !important;
  }

  /* Anula reglas height:auto del CSS embebido de dashboard_chat_total.php */
  body.cn-omnicanal-total-active .content-wrapper,
  body.cn-omnicanal-total-active .cn-chat-root,
  body.cn-omnicanal-total-active #cn-chat-total-root.cn-chat-root {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.cn-omnicanal-total-active #cn-chat-total-root .cn-chat {
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  /* Lista: ocupa todo hasta que se abre una conversacion */
  body.cn-omnicanal-total-active #chat_lista {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
  }

  body.cn-omnicanal-total-active #chat_lista .sidebar-container,
  body.cn-omnicanal-total-active #chat_lista .sidebar-container > .chat-sidebar {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  /* Conversacion oculta en la vista de lista */
  body.cn-omnicanal-total-active:not(.cn-omni-chat-open) #chat_conversacion_interno {
    display: none !important;
  }

  /* Al abrir un chat: lista fuera, conversacion a pantalla completa */
  body.cn-omnicanal-total-active.cn-omni-chat-open #chat_lista {
    display: none !important;
  }

  body.cn-omnicanal-total-active.cn-omni-chat-open #chat_conversacion_interno {
    display: flex !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    animation: cnOmniChatIn .22s ease-out;
  }

  body.cn-omnicanal-total-active #chat-section,
  body.cn-omnicanal-total-active #chat-section > .row,
  body.cn-omnicanal-total-active #chat-section > .row > .col-md-12,
  body.cn-omnicanal-total-active #chat-section .box.direct-chat,
  body.cn-omnicanal-total-active #chat-section .box.direct-chat > .box-body {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
  }

  body.cn-omnicanal-total-active #chat-messages.direct-chat-messages {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Boton volver a la lista (solo movil, cuando hay chat abierto) */
  .cn-omni-back-btn {
    display: none;
  }

  body.cn-omnicanal-total-active.cn-omni-chat-open .cn-omni-back-btn {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 44px;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0 2px 0 0;
  }

  body.cn-omnicanal-total-active.cn-omni-chat-open .cn-omni-back-btn .cn-omni-back-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #38bdf8 0%, #0d8ecf 48%, #0369a1 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px rgba(3, 105, 161, .28);
  }

  body.cn-omnicanal-total-active.cn-omni-chat-open .cn-omni-back-btn .cn-omni-back-icon svg {
    width: 15px;
    height: 15px;
    display: block;
  }

  body.cn-omnicanal-total-active.cn-omni-chat-open .cn-omni-back-btn .cn-omni-back-label {
    font-size: 10px;
    font-weight: 800;
    color: #0b6fa8;
    letter-spacing: .2px;
    line-height: 1;
    padding: 0;
  }

  body.cn-omnicanal-total-active.cn-omni-chat-open .cn-omni-back-btn:hover {
    transform: translateY(-1px);
    box-shadow: none;
  }
}

@keyframes cnOmniChatIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}