/* ==========================================================================
   AI CHATBOT WIDGET — bottom-right launcher + panel.
   Brand accent (--wschat-h/-s/-l + --wschat-text) is set inline per-site by
   inc-footer.php from the real business_info.brand_color (see
   ws5ParseBrandColorHsl()/ws5ContrastTextColorForHsl() in ws5-helpers.php) —
   this file only ever reads those custom properties, never a hardcoded
   color, so it stays correct for every site. Neutral chrome (panel/bubble
   backgrounds, borders, text) follows the same body.dark-theme toggle the
   rest of the site uses, independently of the brand accent — same "text
   always fixed, never derived from brand" principle as style.css.
   ========================================================================== */

#ws5-chatbot-root {
  --wschat-brand: hsl(var(--wschat-h), var(--wschat-s), var(--wschat-l));

  --wschat-bg-panel:   #ffffff;
  --wschat-bg-header:  #ffffff;
  --wschat-bg-ai-bubble: #f1f5f9;
  --wschat-text-main:  #0f172a;
  --wschat-text-muted: #64748b;
  --wschat-border:     #e2e8f0;
  --wschat-shadow:     0 12px 32px rgba(15, 23, 42, 0.18);

  position: fixed;
  z-index: 9999;
  right: 20px;
  bottom: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.dark-theme #ws5-chatbot-root {
  --wschat-bg-panel:   #1e293b;
  --wschat-bg-header:  #1e293b;
  --wschat-bg-ai-bubble: #273548;
  --wschat-text-main:  #f8fafc;
  --wschat-text-muted: #94a3b8;
  --wschat-border:     #334155;
  --wschat-shadow:     0 12px 32px rgba(0, 0, 0, 0.45);
}

#ws5-chatbot-root * {
  box-sizing: border-box;
}

/* ── Launcher button ───────────────────────────────────────────────────── */
.ws5chat-launcher {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: var(--wschat-brand);
  color: var(--wschat-text);
  box-shadow: var(--wschat-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.ws5chat-launcher:hover { transform: scale(1.06); }
.ws5chat-launcher:focus-visible { outline: 2px solid var(--wschat-brand); outline-offset: 3px; }
.ws5chat-launcher svg { width: 26px; height: 26px; }
.ws5chat-launcher .ws5chat-icon-close { display: none; }
#ws5-chatbot-root.ws5chat-open .ws5chat-icon-chat { display: none; }
#ws5-chatbot-root.ws5chat-open .ws5chat-icon-close { display: block; }

/* ── Panel ──────────────────────────────────────────────────────────────── */
.ws5chat-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  right: 0;
  bottom: 76px;
  width: 380px;
  height: 600px;
  max-height: 75vh;
  background: var(--wschat-bg-panel);
  border-radius: 16px;
  box-shadow: var(--wschat-shadow);
  overflow: hidden;
}
#ws5-chatbot-root.ws5chat-open .ws5chat-panel { display: flex; }

.ws5chat-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  background: var(--wschat-bg-header);
  border-bottom: 1px solid var(--wschat-border);
}
.ws5chat-header-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--wschat-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws5chat-header-sub {
  font-size: 12px;
  color: var(--wschat-text-muted);
}
.ws5chat-close-btn {
  flex: none;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--wschat-text-muted);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws5chat-close-btn:hover { background: var(--wschat-bg-ai-bubble); }

.ws5chat-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ws5chat-body deep-chat {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: none;
  /* The <deep-chat> host itself (a normal light-DOM element, unlike its
     shadow-rendered content) defaults to a plain white background — this
     is the one deep-chat rule that's safe to set from outside, and it's
     what keeps the panel from showing a white slab in dark mode before the
     shadow content underneath (styled via auxiliaryStyle) paints over it. */
  background: var(--wschat-bg-panel);
}

.ws5chat-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wschat-text-muted);
  font-size: 13px;
}

/* ── Persistent "View full calendar" bar — always visible, never inside
   the scrolling message area (see the AI chatbot widget plan). ─────────── */
.ws5chat-calendar-bar {
  flex: none;
  border-top: 1px solid var(--wschat-border);
  padding: 10px 16px;
  text-align: center;
}
.ws5chat-calendar-bar a {
  color: var(--wschat-brand);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.ws5chat-calendar-bar a:hover { text-decoration: underline; }

/* Quick-pick slot styling (.wschat-qp-*, rendered inside deep-chat's
   introMessage html) lives in chatbot-widget.js's auxiliaryStyle string,
   NOT here — introMessage content renders inside deep-chat's shadow root,
   which this light-DOM stylesheet cannot reach. Only auxiliaryStyle's CSS
   is injected into that shadow root. */

/* ── Responsive: full-screen overlay below ~640px ─────────────────────── */
@media (max-width: 640px) {
  #ws5-chatbot-root { right: 16px; bottom: 16px; }
  .ws5chat-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}