/* ==========================================================================
   QuranPro hub — AI assistant chatbot widget (static, no backend).
   Floating button sits ABOVE the WhatsApp widget FAB (bottom-right stack).
   Classes are prefixed cb- to avoid collisions with the qw- WhatsApp widget.
   ========================================================================== */
.cb-fab {
  position: fixed; right: 22px; bottom: 100px; z-index: 9991;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #0a6e4f, #0e9a6e); color: #fff; font-size: 26px;
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(10, 110, 79, 0.45);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cb-fab:hover { transform: scale(1.08); }
.cb-fab:active { transform: scale(0.95); }
.cb-badge {
  position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px;
  border-radius: 999px; background: #e11d48; color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
  padding: 0 5px; border: 2px solid #fff;
}
.cb-panel {
  position: fixed; right: 20px; bottom: 168px; z-index: 9991;
  width: min(350px, calc(100vw - 32px)); max-height: min(480px, calc(100dvh - 200px));
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  display: flex; flex-direction: column;
  transform: translateY(20px) scale(0.96); opacity: 0; pointer-events: none;
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
}
.cb-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.cb-head {
  background: linear-gradient(135deg, #0a6e4f, #0e9a6e); color: #fff;
  padding: 16px; display: flex; align-items: center; gap: 12px;
}
.cb-av {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.16);
  display: grid; place-items: center; font-size: 22px;
}
.cb-head b { display: block; font-size: 15.5px; }
.cb-head small { color: #cdeeda; font-size: 12px; }
.cb-close {
  margin-left: auto; width: 40px; height: 40px; border-radius: 10px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 18px;
  display: grid; place-items: center;
}
.cb-body {
  padding: 16px; overflow-y: auto; flex: 1; min-height: 120px;
  display: flex; flex-direction: column; gap: 10px; background: #f4f7f5;
}
.cb-msg {
  max-width: 88%; background: #fff; border-radius: 4px 14px 14px 14px;
  padding: 11px 13px; font-size: 14.5px; line-height: 1.55; color: #1a1a1a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  animation: cb-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cb-msg.user {
  align-self: flex-end; background: #0a6e4f; color: #fff;
  border-radius: 14px 4px 14px 14px;
}
.cb-msg a { color: #0a6e4f; font-weight: 600; }
.cb-msg.user a { color: #ffe9a8; }
@keyframes cb-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cb-wa-btn {
  display: inline-block; margin-top: 10px; background: #25d366; color: #fff !important;
  font-weight: 700; padding: 10px 18px; border-radius: 999px; text-decoration: none; font-size: 14px;
}
.cb-quick {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px;
  background: #fff; border-top: 1px solid #eee;
}
.cb-quick button {
  min-height: 40px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid #0a6e4f; background: #fff; color: #0a6e4f;
  font-size: 13px; font-weight: 600; transition: all 0.25s;
}
.cb-quick button:hover { background: #0a6e4f; color: #fff; }
.cb-foot { display: flex; gap: 8px; padding: 10px; background: #f0f0f0; align-items: center; }
.cb-input {
  flex: 1; min-height: 46px; border: 0; border-radius: 999px; padding: 10px 16px;
  font-size: 14.5px; background: #fff; color: #1a1a1a; outline: none;
  box-shadow: inset 0 0 0 1px #ddd;
}
.cb-input:focus { box-shadow: inset 0 0 0 2px #0a6e4f; }
.cb-send {
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; flex: 0 0 auto;
  background: #0a6e4f; color: #fff; font-size: 20px; display: grid; place-items: center;
  transition: transform 0.25s;
}
.cb-send:hover { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .cb-msg { animation: none; } }