/* Cuando una burbuja-bot contiene sugerencias, expandir el bubble al ancho útil. */
#subpanel-chat-tta .burbuja-bot:has(ul.sugerencia-lista),
#panel-chatbot .burbuja-bot:has(ul.sugerencia-lista) {
  max-width: 92% !important;
  width: 92% !important;
  align-self: stretch !important;
}
/* Lista de sugerencias usa todo el ancho del bubble. */
#subpanel-chat-tta .sugerencia-lista,
#panel-chatbot .sugerencia-lista {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
}
/* Items: pill cuadrado lleno ancho, con hover suave. */
#subpanel-chat-tta .sugerencia-item,
#panel-chatbot .sugerencia-item {
  display: block !important;
  width: 100% !important;
  padding: 9px 14px !important;
  background: #ffffff !important;
  border: 1px solid #d8dde6 !important;
  border-radius: 12px!important;
  font-size: 13.5px !important;
  color: #2a3550 !important;
  cursor: pointer !important;
  transition: background-color .12s, border-color .12s !important;
  font-family: var(--font, var(--oc-font-sans)) !important;
}
#subpanel-chat-tta .sugerencia-item:hover,
#panel-chatbot .sugerencia-item:hover {
  background: #eef2f8 !important;
  border-color: #1d3878 !important;
  color: #0f2147 !important;
}
.sugerencia-item-loading {
  display: block !important;
  padding: 8px 12px !important;
  color: #8b99b0 !important;
  font-style: italic !important;
}