/* ============================================================
   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: scroll horizontal */
aside.bg-n-background.pb-px > nav {
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  overflow-y: 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> NO debe crear stacking context.
      Originalmente tiene z-40 + position relative en desktop, lo que
      crea stacking context y ATRAPA al dropdown adentro: por mucho
      z-index que le pongamos, su valor efectivo HACIA AFUERA está
      capado al z-index del aside. Forzamos z-index: auto para que
      el dropdown (z-50/altísimo) compita directamente a nivel root
      contra el panel de contacto (z-40). 50 > 40 → dropdown gana. */
aside.bg-n-background.pb-px {
  z-index: auto !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;
}