/* ============================================================
   CUSTOM LAYOUT: Sidebar izquierda → Top Navigation Bar
   Chatwoot v4.13.0
   ============================================================ */

/* 1. Dashboard wrapper: column en lugar de row */
div.flex.flex-grow.overflow-hidden.text-n-slate-12 {
  flex-direction: column !important;
}

/* 2. Sidebar <aside>: transformar en barra horizontal top */
aside.bg-n-background.pb-px {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  flex-direction: row !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-bottom: 1px solid rgb(var(--n-weak)) !important;
}

/* 3. Primera section (logo + search + compose): fila horizontal */
aside.bg-n-background.pb-px > section:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 8px !important;
  gap: 6px !important;
}

/* 4. Ambos divs dentro de la primera section: alineados horizontalmente */
aside.bg-n-background.pb-px > section:first-child > div {
  flex-direction: row !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 5. Nav: fila horizontal. overflow VISIBLE (no auto) — si fuera auto en X,
      CSS fuerza el recorte también en Y y el dropdown de las tabs (que baja
      bajo la barra de 52px) se cortaría. Con visible, el dropdown escapa. */
aside.bg-n-background.pb-px > nav {
  display: flex !important;
  flex-direction: row !important;
  overflow: visible !important;
  height: 100% !important;
  flex-grow: 1 !important;
  padding: 0 !important;
  gap: 0 !important;
  align-items: center !important;
}

/* 6. Nav UL: horizontal */
aside.bg-n-background.pb-px > nav > ul {
  flex-direction: row !important;
  height: 100% !important;
  align-items: center !important;
  gap: 2px !important;
}

/* 7. Section final (profile): horizontal derecha */
aside.bg-n-background.pb-px > section:last-of-type {
  flex-direction: row !important;
  height: 100% !important;
  width: auto !important;
  flex-shrink: 0 !important;
  border-top: 0 !important;
  border-left: 1px solid rgb(var(--n-weak)) !important;
  padding: 0 8px !important;
  gap: 4px !important;
  justify-content: center !important;
  box-shadow: none !important;
}

/* 8. Ocultar gradiente de scroll vertical y resize handle */
aside.bg-n-background.pb-px .pointer-events-none.absolute,
aside.bg-n-background.pb-px .cursor-col-resize {
  display: none !important;
}

/* 9. Área principal: ajustar altura */
main.flex.flex-1.min-h-0 {
  height: calc(100vh - 52px) !important;
  max-height: calc(100vh - 52px) !important;
}

/* 10. Menú del avatar (SidebarProfileMenu / DropdownBody):
      original abre hacia ARRIBA (bottom-12). En top-nav lo abrimos
      hacia ABAJO. NO usamos position:fixed porque eso forzaba un
      stacking context interno al aside que terminaba atrapando al
      dropdown. Lo dejamos absolute y elevamos su z-index a un valor
      muy alto. */
aside.bg-n-background.pb-px div.absolute.bottom-12 {
  bottom: auto !important;
  top: calc(100% + 0.5rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  left: auto !important;
  right: 0 !important;
  z-index: 2147483647 !important;
}

/* 11. CLAVE — el <aside> debe pintarse POR ENCIMA del área de chat.
      Le damos un z-index alto (50) y lo convertimos en stacking context
      que queda arriba del panel de contacto (z-40) y del chat. Así TODO
      lo que sale del aside —el menú de las tabs (#13) y el del avatar
      (#10)— se pinta encima del chat. Con z-auto, en cambio, esos
      dropdowns quedaban atrapados DETRÁS del chat (que la regla #12
      aísla en su propio stacking context). 50 > 40 → el aside gana.
      Quitamos transform/filter/etc. para no crear contextos extra. */
aside.bg-n-background.pb-px {
  z-index: 50 !important;
  transform: none !important;
  translate: none !important;
  filter: none !important;
  perspective: none !important;
}

/* 12. Defensa: encerrar la vista de conversación en su propio stacking
      context con isolation:isolate. Cualquier z-index interno queda
      atrapado adentro; el bloque entero vale z-auto desde fuera. */
section.flex.w-full.h-full.min-w-0 {
  isolation: isolate !important;
}

/* 13. Menús de las tabs (grupos expandidos: "Conversaciones", "Contactos"…).
      En la barra horizontal, los hijos de cada grupo (<ul.sidebar-group-children>,
      display:grid) no tienen altura de contenido y se ESTIRAN a ~400px, quedando
      como una caja vacía sin fondo encima de las conversaciones.
      Aquí los convertimos en un dropdown flotante anclado bajo la tab: alto según
      contenido, con fondo sólido, borde y sombra. */
aside.bg-n-background.pb-px > nav > ul > li {
  position: relative !important;
}

/* Por defecto ocultamos los hijos inline. Algunos grupos muestran su hijo
   ACTIVO aunque NO estén expandidos (v-show por hasActiveChild); en top-nav
   eso aparecía como un fragmento suelto flotando (ej. "Todas las
   conversaciones" al abrir otra tab). */
aside.bg-n-background.pb-px > nav > ul > li > .sidebar-group-children {
  display: none !important;
}

/* Mostramos el menú como dropdown flotante SOLO al pasar el mouse por la tab
   (HOVER). NO lo mostramos por estar "expandido": Chatwoot auto-expande el grupo
   activo al cargar la página (para indicar dónde estás), y eso hacía que el menú
   de "Conversaciones" se abriera solo en cada recarga. Con hover puro, eso ya no
   pasa.
   Variables REALES del tema: n-solid-2 → --solid-2 (#fff), n-weak → --border-weak.
   (Antes usé --n-background/--n-weak inexistentes → menú transparente.) */
aside.bg-n-background.pb-px > nav > ul > li:hover > .sidebar-group-children {
  display: grid !important;
  position: absolute !important;
  /* top:100% (sin gap) para que el dropdown toque la barra y no se pierda el
     hover al mover el mouse de la tab al menú. */
  top: 100% !important;
  left: 0 !important;
  height: auto !important;
  align-content: start !important;
  min-width: 240px !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  background-color: rgb(var(--solid-2, 255 255 255)) !important;
  border: 1px solid rgb(var(--border-weak, 234 234 234)) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  padding: 6px !important;
  gap: 2px !important;
  z-index: 2147483646 !important;
}

/* En HOVER el grupo no está "expandido" en Vue, así que sus items internos
   están ocultos con v-show (inline display:none). Los forzamos visibles para
   que el menú aparezca COMPLETO al pasar el mouse — sin tocar el estado de Vue
   (por eso NO navega). Los <li> son items/inboxes; los <div> son cabeceras de
   subgrupo (Equipos, Canales), que son flex. */
aside.bg-n-background.pb-px
  > nav
  > ul
  > li:hover
  > .sidebar-group-children
  li[style*='display: none'] {
  display: list-item !important;
}

aside.bg-n-background.pb-px
  > nav
  > ul
  > li:hover
  > .sidebar-group-children
  div[style*='display: none'] {
  display: flex !important;
}

/* 15. Atributo "Imagen" (imagen_ml, tipo link → URL de foto de ML).
      En el panel "Información de la conversación" (.conversation--details),
      ocultamos el texto de la URL y mostramos la foto embebida. La <img> la
      inyecta custom.js justo después del <a> del atributo. Limitado a
      .conversation--details para no afectar links de imágenes en mensajes. */
.conversation--details a[href*='mlstatic.com']:not(.cw-product-img-link) {
  display: none !important;
}

.conversation--details .cw-product-img-link {
  display: inline-block !important;
  margin-top: 2px !important;
}

.conversation--details .cw-product-img {
  max-width: 100% !important;
  max-height: 220px !important;
  height: auto !important;
  display: block !important;
  border-radius: 8px !important;
  object-fit: contain !important;
}

/* 16. "Producto" como hipervínculo a la publicación (lo inyecta custom.js).
      La fila "Link ML" se oculta desde JS. */
.conversation--details .cw-producto-link {
  color: #2563eb !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  cursor: pointer !important;
  word-break: break-word !important;
}

.conversation--details .cw-producto-link:hover {
  color: #1d4ed8 !important;
}

/* 17. Botones de las opciones de ML (action_guide), inyectados por custom.js */
.cw-ag-btnbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 8px 0 4px !important;
}

.cw-ag-btn {
  font-size: 13px !important;
  line-height: 1.2 !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgb(var(--border-weak, 234 234 234)) !important;
  background: rgb(var(--solid-2, 255 255 255)) !important;
  color: #2563eb !important;
  cursor: pointer !important;
  font-weight: 600 !important;
}

.cw-ag-btn:hover {
  background: #eff6ff !important;
}

.cw-ag-btn:disabled {
  opacity: 0.6 !important;
  cursor: default !important;
}