/* Modo embed Twenty: una sola conversación a ancho completo, scroll solo en mensajes. */
html.twenty-embed,
html.twenty-embed body {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html.twenty-embed #app,
html.twenty-embed #app > .flex.flex-grow,
html.twenty-embed main.flex.flex-1,
html.twenty-embed section.flex.w-full.h-full {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Barra lateral principal de Chatwoot */
html.twenty-embed aside.bg-n-background {
  display: none !important;
}

/* Lista de conversaciones: colapsar sin display:none (evita spinner colgado) */
html.twenty-embed .conversations-list-wrap {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
}

/* Panel de contacto (columna derecha) */
html.twenty-embed section.flex.w-full > div:not(.conversation-details-wrap) {
  display: none !important;
}

html.twenty-embed .conversation-details-wrap {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: none !important;
}

html.twenty-embed .conversation-details-wrap > .flex.h-full.min-h-0 {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Solo el hilo de mensajes hace scroll */
html.twenty-embed .conversation-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html.twenty-embed .message-content,
html.twenty-embed .bubble,
html.twenty-embed .text-bubble {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Extras que no aportan en embed */
html.twenty-embed #mobile-sidebar-launcher,
html.twenty-embed [id="mobile-sidebar-launcher"],
html.twenty-embed .copilot-launcher {
  display: none !important;
}

/* Composer compacto: menos alto (Responder + textarea + Enviar) */
html.twenty-embed .reply-box {
  margin-bottom: 0.25rem !important;
}

html.twenty-embed .reply-box__top {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

html.twenty-embed .reply-box .h-\[3\.25rem\] {
  height: 2.25rem !important;
  min-height: 2.25rem !important;
}

html.twenty-embed .reply-box .flex.justify-between.p-3 {
  padding: 0.375rem 0.5rem !important;
}

html.twenty-embed .resizable-editor-wrapper {
  --editor-min-height: 2.5rem !important;
  --editor-max-height: 4rem !important;
  --editor-height: 2.75rem !important;
}

html.twenty-embed .ProseMirror-woot-style,
html.twenty-embed .resizable-editor-wrapper .ProseMirror-woot-style,
html.twenty-embed .reply-box .ProseMirror {
  min-height: 2.5rem !important;
  max-height: 4rem !important;
}

html.twenty-embed .ProseMirror-menubar-wrapper {
  gap: 0.25rem !important;
}

html.twenty-embed .ProseMirror-menubar-wrapper > .ProseMirror {
  font-size: 0.875rem !important;
  line-height: 1.35 !important;
}

/* Sin placeholder del editor en embed (Chatwoot usa p.empty-node) */
html.twenty-embed .reply-box .ProseMirror p.empty-node:first-child::before,
html.twenty-embed .reply-box .ProseMirror .empty-node::before {
  content: none !important;
  display: none !important;
  height: 0 !important;
}