﻿/* Widget público del chatbot */
#cb-widget, #cb-widget * { box-sizing: border-box; }
#cb-widget { position: fixed; right: 22px; bottom: 22px; z-index: 9999; font-family: 'Segoe UI', Arial, sans-serif; }

#cb-toggle {
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: #001f3f; color: #fff; font-size: 26px; box-shadow: 0 6px 18px rgba(0,0,0,.3);
  transition: transform .15s;
}
#cb-toggle:hover { transform: scale(1.06); background: #002d5c; }

#cb-panel {
  position: fixed; right: 22px; bottom: 92px; width: 360px; max-width: calc(100vw - 30px);
  height: 520px; max-height: calc(100vh - 120px); background: #fff; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.28); display: none; flex-direction: column; overflow: hidden;
}
#cb-panel.cb-open { display: flex; }

.cb-header { background: #001f3f; color: #fff; padding: 14px 16px; }
.cb-header h4 { margin: 0; font-size: 16px; font-weight: 600; }
.cb-header p { margin: 2px 0 0; font-size: 12px; opacity: .85; }

.cb-body { flex: 1; overflow-y: auto; padding: 14px; background: #f4f7fb; }

.cb-msg { display: flex; margin-bottom: 10px; }
.cb-msg.cb-user { justify-content: flex-end; }
.cb-bubble { max-width: 82%; min-width: 0; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; }
.cb-msg.cb-bot .cb-bubble { background: #e2e8f0; color: #1f2d3d; border-bottom-left-radius: 4px; }
.cb-msg.cb-user .cb-bubble { background: #001f3f; color: #fff; border-bottom-right-radius: 4px; }

.cb-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cb-chip { background: #fff; border: 1px solid #001f3f; color: #001f3f; border-radius: 16px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.cb-chip:hover { background: #001f3f; color: #fff; }

.cb-footer { display: flex; border-top: 1px solid #e2e8f0; }
.cb-footer input { flex: 1; border: none; padding: 14px; font-size: 14px; outline: none; }
.cb-footer button { border: none; background: #001f3f; color: #fff; padding: 0 20px; cursor: pointer; font-size: 16px; }
.cb-footer button:disabled { opacity: .5; cursor: default; }

.cb-typing { font-style: italic; color: #7a8794; font-size: 12.5px; }
.cb-disabled { padding: 16px; text-align: center; color: #7a8794; font-size: 13px; }


