/* KARE Online — general enquiry assistant (public landing page).
 *
 * Purely a front-end FAQ widget: no backend, no login, no ticket system —
 * see assets/js/site-chatbot.js for the static knowledge base it renders.
 *
 * Depends on the color variables from assets/css/style.v2.css (--navy,
 * --gold, --blue-accent, etc.), which every page loading this already
 * includes.
 */

.ss-chatbot {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  /* The panel keeps its full box in this flex column even while closed
     (only opacity/transform change, so its close animation can run), which
     inflates this wrapper's clickable area far past the visible 60px
     launcher circle. Without this, that invisible area sits on top of
     real page content and swallows clicks meant for it. Re-enabled below
     on the two children that should actually be clickable. */
  pointer-events: none;
}

.ss-chat-launcher {
  position: relative;
  pointer-events: auto;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--blue-accent) 100%);
  color: var(--gold-light);
  box-shadow: 0 12px 28px rgba(20, 16, 58, .35), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  flex-shrink: 0;
}

.ss-chat-launcher:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(20, 16, 58, .4), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}

.ss-chat-launcher-icon,
.ss-chat-launcher-close {
  position: absolute;
  font-size: 1.35rem;
  transition: opacity .2s ease, transform .2s ease;
}

.ss-chat-launcher-close {
  opacity: 0;
  transform: scale(.6) rotate(-45deg);
}

.ss-chat-launcher.is-open .ss-chat-launcher-icon {
  opacity: 0;
  transform: scale(.6) rotate(45deg);
}

.ss-chat-launcher.is-open .ss-chat-launcher-close {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.ss-chat-panel {
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(20, 16, 58, .28), 0 2px 8px rgba(20, 16, 58, .08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(.97);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.ss-chat-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ss-chat-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--blue-accent) 100%);
  overflow: hidden;
  flex-shrink: 0;
}

.ss-chat-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% -20%, rgba(244, 123, 32, .35) 0%, transparent 50%);
  pointer-events: none;
}

.ss-chat-header-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.ss-chat-header-text {
  position: relative;
  flex: 1;
  min-width: 0;
}

.ss-chat-header-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  color: #fff;
  line-height: 1.2;
}

.ss-chat-header-sub {
  font-size: .74rem;
  color: rgba(255, 255, 255, .6);
  margin-top: 2px;
}

.ss-chat-close {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: none;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  flex-shrink: 0;
  transition: background .15s ease;
}

.ss-chat-close:hover {
  background: rgba(255, 255, 255, .2);
}

.ss-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f4f5f9;
}

.ss-chat-msg {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: .86rem;
  line-height: 1.55;
}

.ss-chat-msg-bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #eae7f2;
  color: #2c2a45;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 6px rgba(30, 26, 77, .04);
}

.ss-chat-msg-bot ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.ss-chat-msg-bot table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: .78rem;
}

.ss-chat-msg-bot table th,
.ss-chat-msg-bot table td {
  padding: 5px 6px;
  border-bottom: 1px solid #eae7f2;
  text-align: left;
}

.ss-chat-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-accent) 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ss-chat-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  margin-right: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--navy-soft);
  color: var(--navy);
  font-weight: 500;
  font-size: .78rem;
  text-decoration: none;
}

.ss-chat-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 13px 16px;
}

.ss-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b7b4c9;
  animation: ssChatTyping 1s infinite ease-in-out;
}

.ss-chat-typing span:nth-child(2) { animation-delay: .15s; }
.ss-chat-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes ssChatTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.ss-chat-footer {
  flex-shrink: 0;
  padding: 12px 14px;
  border-top: 1px solid #eef0f5;
  background: #fff;
}

.ss-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ss-chat-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #d9d5ec;
  background: #fff;
  color: var(--navy);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ss-chat-chip:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: translateY(-1px);
}

/* Type-to-search row */
.ss-chat-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ss-chat-search input {
  flex: 1;
  border: 1px solid #d9d5ec;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: .84rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ss-chat-search input:focus {
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 3px rgba(46, 49, 146, .12);
}

.ss-chat-search button {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-accent) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
}

.ss-chat-search button:hover {
  transform: scale(1.08);
}

@media (max-width: 480px) {
  .ss-chatbot {
    right: 24px;
    bottom: 24px;
  }

  /* The panel is taken out of the parent flex column entirely and
     pinned to the viewport as its own near-fullscreen sheet, instead of
     stacking above the launcher inside .ss-chatbot's flex box. That old
     layout reserved space for the launcher below a tall panel, which on
     short mobile viewports pushed the panel's top off-screen while
     leaving a gap at the bottom that let page content, the scroll-to-top
     button and the Quick Enquiry tab show through underneath it. */
  .ss-chat-panel {
    position: fixed;
    top: 16px;
    left: 12px;
    right: 12px;
    bottom: 16px;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
  }

  /* Closing happens via the header's own close button on mobile — the
     FAB would otherwise float over the panel's bottom-right corner once
     the panel is repositioned above. */
  .ss-chat-launcher.is-open {
    display: none;
  }
}