/**
 * @package     mod_chatbotfaq
 * @copyright   Copyright (c) 2024-2026 Altfa Technologies Sdn Bhd. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 *
 * Everything here is scoped under .mod-chatbotfaq so it can never leak into the rest of the
 * page, and it defines its own .d-none/.row/.col-* fallbacks (the markup borrows these class
 * names from Bootstrap) so the widget still shows/hides correctly on sites that don't happen to
 * load Bootstrap -- the original relied on the *site* already having Bootstrap loaded, and
 * without it `.d-none` did nothing, so the full chat panel could sit open, un-hidden, on the
 * page from first load.
 */
.mod-chatbotfaq .d-none {
  display: none !important;
}

.mod-chatbotfaq .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

.mod-chatbotfaq .col-2 {
  flex: 0 0 16.6667%;
  max-width: 16.6667%;
  padding-left: 8px;
  padding-right: 8px;
}

.mod-chatbotfaq .col-10 {
  flex: 0 0 83.3333%;
  max-width: 83.3333%;
  padding-left: 8px;
  padding-right: 8px;
}

.mod-chatbotfaq .col-12 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

.mod-chatbotfaq .px-3 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.mod-chatbotfaq .mb-1 {
  margin-bottom: 0.25rem;
}

.mod-chatbotfaq .mb-2 {
  margin-bottom: 0.5rem;
}

.mod-chatbotfaq .mb-3 {
  margin-bottom: 1rem;
}

.mod-chatbotfaq .mt-2 {
  margin-top: 0.5rem;
}

.mod-chatbotfaq .me-1 {
  margin-right: 0.25rem;
}

.mod-chatbotfaq .me-2 {
  margin-right: 0.5rem;
}

.mod-chatbotfaq .text-start {
  text-align: left;
}

.mod-chatbotfaq .text-white {
  color: #fff;
}

.mod-chatbotfaq .form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.mod-chatbotfaq .alert {
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
}

.mod-chatbotfaq .alert-primary {
  color: #084298;
  background-color: #cfe2ff;
}

.mod-chatbotfaq .alert-secondary {
  color: #41464b;
  background-color: #e2e3e5;
}

/* Widget chrome. Every rule below is scoped under a per-instance wrapper id (see tmpl/default.php)
   so publishing this module twice on one page can never have one instance's colours bleed into
   the other's. */
#faq-starting-btn {
  position: fixed;
  bottom: 30px;
  right: 16px;
  width: max-content;
  max-width: calc(100vw - 32px);
  cursor: pointer;
}

.btn-style {
  padding: 8px 10px 8px;
  border-radius: 12px;
}

.icn-style {
  padding: 0px;
  border-radius: 120px;
}

.icn-style #avatar img {
  height: 72px;
  max-height: 18vw;
  border-radius: 100px;
  background: #fff;
}

.btn-style #avatar img {
  height: 32px;
  border-radius: 100px;
  background: #fff;
}

#faq-starting-btn #avatar,
#faq-chat-bot #avatar-inner {
  float: left;
}

#faq-chat-bot #avatar-inner img {
  height: 26px;
  border-radius: 100px;
  background: #fff;
}

#faq-chat-bot .avatar-chat img {
  height: 22px;
  border-radius: 100px;
  background: #fff;
}

.faq-chat-box #faq-title {
  float: right;
  margin-left: 10px;
  line-height: 28px;
}

@keyframes chatbotfaq-appear {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.welcome-avatar {
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 14px;
}

/* The original panel used a fixed 340x566px box positioned with `right: -140px !important` plus
   a `translate(-50%, ...)` transform -- two positioning systems fighting each other, tuned to
   look right at one specific screen width. On narrower phones the maths pushes part of the
   panel off the left edge of the screen. Replaced with a single straightforward `right`/`bottom`
   offset and a width that's simply capped to the viewport, so it can never overflow sideways on
   any screen size. */
#faq-chat-bot {
  position: fixed;
  bottom: 100px;
  right: 16px;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 566px;
  max-height: calc(100vh - 140px);
  border-radius: 12px;
  z-index: 999;
  background-color: #fff;
  opacity: 0;
  animation: chatbotfaq-appear 0.25s ease forwards;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

#faq-chat-bot #bot-heading {
  padding: 8px 10px 9px;
  border-top-right-radius: 12px !important;
  border-top-left-radius: 12px !important;
  height: 42px;
}

#faq-chat-bot #heading-title {
  float: none;
  padding-left: 34px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 600;
}

.content-box {
  height: calc(100% - 42px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  font-size: 14px;
}

@keyframes chatbotfaq-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.bubbler,
.bubble {
  background-color: #ECECFB;
  color: #393939;
  border-radius: 12px;
  animation: chatbotfaq-fade-in 0.4s ease forwards;
  width: max-content;
  max-width: 100%;
  padding: 12px 14px 14px;
}

.bubble {
  min-width: 120px;
  padding: 8px 14px 10px;
}

#nama-input {
  border-radius: 12px;
  border: 1px solid #e3e3e3;
  background: #fff;
  padding-right: 40px;
}

.chat-input-box {
  position: relative;
}

#submit-btn {
  color: #d3d3d3;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.bubble-reply {
  width: max-content;
  max-width: 100%;
  min-width: 64px;
  float: right;
}

.chat-group {
  position: relative;
  margin-top: 3px;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 30px;
  aspect-ratio: 3;
  --_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
  background:
    var(--_g) 0% 50%,
    var(--_g) 50% 50%,
    var(--_g) 100% 50%;
  background-size: calc(112% / 3) 50%;
  animation: chatbotfaq-loader 1s infinite linear;
}

@keyframes chatbotfaq-loader {
  20% { background-position: 0% 0%, 50% 50%, 100% 50%; }
  40% { background-position: 0% 100%, 50% 0%, 100% 50%; }
  60% { background-position: 0% 50%, 50% 100%, 100% 0%; }
  80% { background-position: 0% 50%, 50% 50%, 100% 100%; }
}

#faq-starting-btn {
  z-index: 9999 !important;
}

.btn-theme {
  font-size: 14px;
  margin: 8px 5px 0px 0;
  padding: 6px 12px 10px;
  border-radius: 10px;
  line-height: 16px;
  font-weight: 600;
  background-color: #fff;
  text-align: left;
  cursor: pointer;
  border: 0;
}

.btn-theme:hover,
.rate-btn:hover,
#submit-btn {
  text-decoration: underline;
  cursor: pointer;
}

.rate-btn {
  font-size: 14px;
  margin: 8px 5px 0px 0;
  padding: 6px 12px 10px;
  border-radius: 10px;
  line-height: 16px;
  font-weight: 600;
  border: 0 !important;
}

.btn-yes {
  background-color: #3ae374;
}

.btn-no {
  background-color: #ffb8b8;
}

/* Very small phones (older/budget Android, iPhone SE-class widths): let the panel take
   essentially the full width instead of leaving cramped margins on both sides. */
@media (max-width: 380px) {
  #faq-chat-bot {
    right: 8px;
    left: 8px;
    width: auto;
    max-width: none;
    bottom: 90px;
    max-height: calc(100vh - 120px);
  }
}