/* IdeaNodo v1.1.1 - Fix visual chat/admin */
html, body {
  max-width: 100%;
}

body {
  overflow-x: hidden !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Evita que textos largos generen scroll horizontal */
.chat-message,
.chat-bubble,
.message-bubble,
.chat-msg,
.admin-chat-message,
.user-chat-message,
[id*="chat"],
[class*="chat"],
[class*="Chat"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Panel flotante del usuario: siempre dentro de pantalla */
.chat-widget,
.chat-floating,
.chat-panel,
.chat-box,
.chat-window,
#chatWidget,
#chatPanel,
#chatBox,
[id*="chatPanel"],
[class*="chat-panel"],
[class*="chatPanel"],
[class*="chat-box"],
[class*="chatBox"] {
  max-width: calc(100vw - 24px) !important;
  overflow-x: hidden !important;
}

/* Variantes comunes para el panel flotante */
.chat-panel,
.chat-window,
#chatPanel,
#chatBox,
[class*="chat-panel"],
[class*="chatPanel"],
[class*="chat-window"],
[class*="chatWindow"] {
  position: fixed !important;
  right: 14px !important;
  bottom: 82px !important;
  width: min(420px, calc(100vw - 28px)) !important;
  height: min(660px, calc(100vh - 120px)) !important;
  max-height: calc(100vh - 120px) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 99999 !important;
  border-radius: 24px !important;
}

/* Área de mensajes con scroll propio, no scroll raro de toda la página */
.chat-messages,
.messages,
#chatMessages,
#adminChatMessages,
[class*="chat-messages"],
[class*="chatMessages"],
[class*="messages"] {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
  scroll-behavior: smooth;
}

/* Burbuja: no se sale hacia la derecha */
.chat-message,
.chat-bubble,
.message-bubble,
[class*="bubble"],
[class*="message"] {
  max-width: min(82%, 760px) !important;
  white-space: pre-wrap !important;
}

/* Compositor del chat del usuario */
.chat-input,
.chat-composer,
.chat-form,
#chatForm,
[class*="chat-input"],
[class*="chatInput"],
[class*="composer"] {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.chat-input textarea,
.chat-composer textarea,
.chat-form textarea,
#chatForm textarea,
[class*="chat"] textarea {
  max-width: 100% !important;
  min-width: 0 !important;
  resize: none !important;
  overflow-wrap: anywhere !important;
}

.chat-input button,
.chat-composer button,
.chat-form button,
#chatForm button,
[class*="chat"] button {
  flex-shrink: 0 !important;
}

/* Página admin de chat: dos columnas dentro de pantalla */
.admin-chat-layout,
.chat-admin-layout,
.admin-chat-grid,
.chat-grid,
#adminChatLayout,
[id*="chatLayout"],
[class*="chat-layout"],
[class*="chatLayout"] {
  display: grid !important;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr) !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.admin-chat-main,
.chat-main,
.chat-detail,
#chatDetail,
[id*="chatDetail"],
[class*="chat-main"],
[class*="chat-detail"],
[class*="chatDetail"] {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: calc(100vh - 260px) !important;
  min-height: 520px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.admin-chat-list,
.chat-list,
#chatList,
[id*="chatList"],
[class*="chat-list"],
[class*="chatList"] {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Admin: zona mensajes visible sin bajar toda la página */
.admin-chat-messages,
.chat-thread,
#chatThread,
[id*="chatThread"],
[class*="chat-thread"],
[class*="chatThread"] {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
  padding: 18px !important;
}

/* Admin: respuesta fija abajo dentro del panel */
.admin-chat-reply,
.chat-reply,
.reply-box,
#replyBox,
[id*="reply"],
[class*="chat-reply"],
[class*="reply"] {
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  background: #fff !important;
  z-index: 5 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 14px !important;
  border-top: 1px solid rgba(15,23,42,.08) !important;
}

.admin-chat-reply textarea,
.chat-reply textarea,
.reply-box textarea,
#replyBox textarea,
[id*="reply"] textarea,
[class*="reply"] textarea {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 58px !important;
  max-height: 130px !important;
  resize: vertical !important;
}

.admin-chat-reply button,
.chat-reply button,
.reply-box button,
#replyBox button,
[id*="reply"] button,
[class*="reply"] button {
  min-width: 86px !important;
  max-width: 120px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  white-space: nowrap !important;
}

/* Mensajes del admin alineados, pero sin salirse */
.admin-chat-message.mine,
.chat-message.mine,
.message.mine,
[class*="mine"] {
  margin-left: auto !important;
}

@media (max-width: 900px) {
  .admin-chat-layout,
  .chat-admin-layout,
  .admin-chat-grid,
  .chat-grid,
  #adminChatLayout,
  [id*="chatLayout"],
  [class*="chat-layout"],
  [class*="chatLayout"] {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }

  .admin-chat-main,
  .chat-main,
  .chat-detail,
  #chatDetail,
  [id*="chatDetail"],
  [class*="chat-main"],
  [class*="chat-detail"],
  [class*="chatDetail"] {
    height: calc(100vh - 180px) !important;
  }
}

@media (max-width: 520px) {
  .chat-panel,
  .chat-window,
  #chatPanel,
  #chatBox,
  [class*="chat-panel"],
  [class*="chatPanel"],
  [class*="chat-window"],
  [class*="chatWindow"] {
    right: 8px !important;
    bottom: 76px !important;
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 94px) !important;
    max-height: calc(100vh - 94px) !important;
    border-radius: 18px !important;
  }
}