/* CHAT SII · designer mockup adoption · 2026-05-09 */
#panel-chatbot .chat-wrapper {
  max-width: 1080px !important;
  margin: 24px auto !important;
  background: white !important;
  border: 1px solid #dde4ef !important;
  border-radius: 12px!important;
  box-shadow: 0 1px 4px rgba(15,33,71,0.05), 0 4px 14px rgba(15,33,71,0.06) !important;
  overflow: hidden !important;
}
#panel-chatbot .chat-header-top {
  padding: 12px 18px 8px !important;
  border-bottom: 1px solid #eef2f8 !important;
}
#panel-chatbot .chat-header-top h2 {
  font-family: var(--font, var(--oc-font-sans)) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #0f1f3d !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
#panel-chatbot .chat-nuevo-btn {
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 12px!important;
}
#panel-chatbot .chat-header-controls { display: none !important; }
#panel-chatbot .chat-speed-row {
  background: #f7f9fc !important;
  border-bottom: 1px solid #dde4ef !important;
  padding: 10px 14px !important;
}
#panel-chatbot #chat-conversacion {
  padding: 28px !important;
  min-height: 380px !important;
  max-height: 540px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
#panel-chatbot .chat-bubble--ai, #panel-chatbot .chat-bubble.bot,
#panel-chatbot .burbuja-bot, #panel-chatbot .chat-msg.ai {
  background: #f7f9fc !important;
  border: 1px solid #dde4ef !important;
  font-family: var(--font-serif, var(--oc-font-serif)) !important;
  font-size: 15px !important;
  color: #16181d !important;
  border-radius: 12px!important;
  padding: 14px 16px !important;
  max-width: 85% !important;
  align-self: flex-start !important;
}
#panel-chatbot .chat-bubble--user, #panel-chatbot .chat-bubble.user,
#panel-chatbot .burbuja-user, #panel-chatbot .chat-msg.user {
  background: #0f2147 !important;
  color: white !important;
  border-radius: 12px!important;
  padding: 14px 16px !important;
  max-width: 85% !important;
  align-self: flex-end !important;
  font-family: var(--font, var(--oc-font-sans)) !important;
  font-size: 14.5px !important;
}
#panel-chatbot .chat-input-area {
  background: #f7f9fc !important;
  border-top: 1px solid #dde4ef !important;
  padding: 16px 22px !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-end !important;
}
#panel-chatbot textarea#chat-input {
  flex: 1 !important;
  min-height: 60px !important;
  max-height: 200px !important;
  padding: 14px 16px !important;
  border: 1px solid #c2cddf !important;
  border-radius: 12px!important;
  font-family: var(--font, var(--oc-font-sans)) !important;
  font-size: 15px !important;
  resize: vertical !important;
  background: white !important;
}
#panel-chatbot textarea#chat-input:focus {
  outline: none !important;
  border-color: #1d3878 !important;
  box-shadow: 0 0 0 3px rgba(29,56,120,0.12) !important;
}
#panel-chatbot button#chat-enviar {
  padding: 14px 22px !important;
  background: #0f2147 !important;
  color: white !important;
  border: 0 !important;
  border-radius: 12px!important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}
#panel-chatbot button#chat-enviar:hover { background: #15295a !important; }
#panel-chatbot button#chat-enviar { color: #ffffff !important; }
#panel-chatbot button#chat-enviar svg { color: #ffffff !important; stroke: #ffffff !important; width: 22px !important; height: 22px !important; }
#panel-chatbot button#chat-enviar svg * { stroke: #ffffff !important; }

.nv-chat-suggestions-row {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 14px 22px 8px !important;
  align-items: center !important;
  background: white !important;
  border-top: 1px solid #eef2f8 !important;
}
.nv-chat-suggestions-row > span:first-child {
  font-size: 12.5px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  margin-right: 4px !important;
}
.nv-chat-sug {
  background: white !important;
  border: 1px solid #c2cddf !important;
  border-radius: 999px!important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  color: #1b2740 !important;
  cursor: pointer !important;
  font-family: var(--font, var(--oc-font-sans)) !important;
  transition: background .15s, border-color .15s, color .15s !important;
}
.nv-chat-sug:hover {
  background: #eef2f8 !important;
  border-color: #1d3878 !important;
  color: #0f2147 !important;
}
@media (max-width: 720px) {
  #panel-chatbot .chat-wrapper { max-width: 100% !important; margin: 12px auto !important; border-radius: 12px!important; }
  #panel-chatbot #chat-conversacion { min-height: 240px !important; padding: 16px !important; }
  #panel-chatbot textarea#chat-input { min-height: 56px !important; font-size: 15px !important; padding: 12px 14px !important; }
  #panel-chatbot .chat-input-area { padding: 12px 14px !important; }
  #panel-chatbot button#chat-enviar { padding: 12px 16px !important; font-size: 13.5px !important; }
  .nv-chat-suggestions-row { padding: 10px 14px 4px !important; gap: 6px !important; }
  .nv-chat-sug { font-size: 12px !important; padding: 5px 12px !important; }
}