/* Bottom-right, stacked directly above the back-to-top button (.theme-option, WhatsApp removed).
   That group is fluid: bottom = 80px+15f, one ~40px button, where f=(100vw-320)/1600.
   Its top sits at 110px+25f, so we track the same formula (+16px clearance) to clear it at every width. */
.bb-bot { position: fixed; right: calc(10px + 15 * (100vw - 320px) / 1600); left: auto; bottom: calc(126px + 25 * (100vw - 320px) / 1600); z-index: 1050; }
.bb-bot-launcher { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #e53935; color: #fff; font-size: 22px; box-shadow: 0 4px 12px rgba(0,0,0,.25); cursor: pointer; }
/* Attention pulse to draw first-time visitors' eyes; removed once the bot is opened. */
.bb-bot-launcher.bb-pulse { animation: bb-pulse 2s ease-out infinite; }
@keyframes bb-pulse {
  0%   { box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 0 0 rgba(229,57,53,.55); }
  70%  { box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 0 18px rgba(229,57,53,0); }
  100% { box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 0 0 rgba(229,57,53,0); }
}
@media (prefers-reduced-motion: reduce) { .bb-bot-launcher.bb-pulse { animation: none; } }
/* Greeting bubble that pops up beside the launcher a few seconds after load. */
.bb-bot-nudge { position: absolute; right: 68px; bottom: 4px; width: max-content; max-width: 220px; background: #fff; color: #222; font-size: 13px; line-height: 1.35; padding: 10px 12px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.18); cursor: pointer; }
.bb-bot-nudge::after { content: ''; position: absolute; right: -5px; bottom: 16px; width: 11px; height: 11px; background: #fff; transform: rotate(45deg); }
.bb-bot-nudge-text { display: block; padding-right: 14px; }
.bb-bot-nudge-close { position: absolute; top: 1px; right: 5px; background: none; border: 0; font-size: 15px; line-height: 1; color: #999; cursor: pointer; }
/* When the panel opens, the launcher is hidden (JS toggles it), so the panel can anchor to the
   bottom-right corner and rise; z-index 1050 keeps it above the WhatsApp group while open. */
.bb-bot-panel { position: fixed; right: 20px; left: auto; bottom: 24px; width: 340px; max-width: calc(100vw - 40px); height: 460px; max-height: calc(100vh - 48px); background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; }
.bb-bot-header { background: #e53935; color: #fff; padding: 12px 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.bb-bot-close { background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.bb-bot-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; }
.bb-bot-msg { max-width: 82%; border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.35; white-space: pre-line; word-break: break-word; }
.bb-bot-msg.bb-from-bot { align-self: flex-start; background: #f1f1f1; color: #222; border-bottom-left-radius: 4px; }
.bb-bot-msg.bb-from-user { align-self: flex-end; background: #e53935; color: #fff; border-bottom-right-radius: 4px; }
.bb-bot-msg.bb-from-bot a { color: #0a58ca; text-decoration: underline; }
.bb-bot-msg.bb-from-user a { color: #fff; text-decoration: underline; }
.bb-bot-actions { padding: 0 12px 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.bb-bot-actions button, .bb-bot-actions a { font-size: 13px; border: 1px solid #e53935; color: #e53935; background: #fff; border-radius: 16px; padding: 5px 12px; cursor: pointer; text-decoration: none; }
.bb-bot-actions a.bb-bot-deeplink { background: #e53935; color: #fff; }
.bb-bot-input { display: flex; border-top: 1px solid #eee; }
.bb-bot-input input { flex: 1; border: 0; padding: 10px; font-size: 14px; }
.bb-bot-input button { border: 0; background: #e53935; color: #fff; padding: 0 14px; cursor: pointer; }