/*
 * support-chat.css — Eyeen support agent widget
 *
 * Visual styling reuses the existing .chatbot-* classes from
 * css/custom-ripple.css (Vuexy theme). This file is intentionally tiny
 * — only namespace/scope overrides go here, nothing fundamental.
 */

#support-chat-container {
  position: fixed;
  z-index: 999998; /* one less than debug chatbot in case both ever coexist */
  /* The container shrink-wraps the (relative-positioned) chat panel, so its
   * box stays 420px wide even when the panel is closed/invisible. A plain
   * div with default pointer-events would silently intercept clicks on page
   * content beneath it (e.g. POS wizard branch cards). Keep the wrapper
   * click-transparent and re-enable pointer events only on the real widgets. */
  pointer-events: none;
}
#support-chat-toggle,
#support-chat-panel.is-open {
  pointer-events: auto;
}

/* The widget container is just a positioned wrapper; our toggle and panel
 * already get fixed-positioning from .chatbot-toggle / .chatbot-panel. */

/* When the support chat panel is open, lift it above .chatbot-toggle's
 * fixed positioning context */
#support-chat-panel.is-open {
  z-index: 999998;
}

/* Make sure the message list scrolls cleanly */
#support-chat-list {
  display: flex;
  flex-direction: column;
}

/* Mobile: panel takes most of the viewport, just like .chatbot-panel does */
@media (max-width: 480px) {
  #support-chat-panel {
    width: calc(100vw - 24px) !important;
    height: calc(100vh - 96px) !important;
  }
}

/* End-chat feedback modal. Shown when the user clicks the panel close
 * button. Asks for 👍 / 👎 + free-text feedback before tearing down
 * the chat session, so we capture user intent on intentional close. */
.chatbot-feedback-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}
.chatbot-feedback-modal {
  background: var(--bs-body-bg, #fff);
  border-radius: 8px;
  padding: 24px;
  width: 360px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.chatbot-feedback-modal [data-rating].active {
  border-width: 2px;
  font-weight: 600;
}
.chatbot-feedback-overlay[dir="rtl"] .chatbot-feedback-modal {
  text-align: right;
}

/* Hide the floating bubble on the dedicated /ai page (chat-in-chat avoidance).
   Toggle id is support-chat-toggle (not eyeen-chat-toggle). */
body.page-ai-chat #support-chat-toggle,
body.page-ai-chat #support-chat-panel {
  display: none !important;
}