/* PSP Chatbot — launcher + greeting bubble + panel.

   Everything is scoped under .psp-chat-root and the load-bearing layout/color
   properties are marked !important. This is deliberate: host themes apply broad
   global <button> styling (position, background, padding, hover fills) that
   otherwise leaks into our launcher/peek/close buttons — dropping the launcher
   into normal flow (pushing the footer), repainting it on hover, and shifting
   the close glyph. Two-class specificity + !important on the resistant
   properties is the pattern that reliably beats a theme.

   PSP brand: green #7B913B (launcher), deep gray #484D56 (panel header), near-
   black #1E2123 (greeting bubble), Poppins (headers) / Open Sans (body). Colors
   are hardcoded so the widget stays on-brand regardless of the host theme. */

.psp-chat-root .psp-chat-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Launcher: filled PSP-green rounded square, white bubble glyph --- */
.psp-chat-root .psp-chat-launcher {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  left: auto !important;
  top: auto !important;
  z-index: 99998;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 44px;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 16px !important;
  background: #7B913B !important;        /* PSP green */
  color: #ffffff !important;             /* drives the white icon */
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20);
  transition: background 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  text-transform: none;
}

/* Deepen the green on hover (keep the white glyph legible); theme button:hover
   often tries to recolor — pin it. */
.psp-chat-root .psp-chat-launcher:hover {
  background: #647730 !important;        /* darker PSP green */
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.psp-chat-root .psp-chat-launcher:focus-visible {
  outline: 3px solid #1E2123 !important;
  outline-offset: 3px;
}

.psp-chat-root .psp-chat-launcher__icon,
.psp-chat-root .psp-chat-launcher svg {
  display: block;
  width: 30px;
  height: 30px;
}

/* --- Greeting bubble ("Hi! How can I help you?") above the launcher --- */
.psp-chat-root .psp-chat-peek {
  position: fixed !important;
  right: 20px !important;
  bottom: 92px !important;
  left: auto !important;
  top: auto !important;
  z-index: 99997;
  max-width: min(260px, calc(100vw - 40px));
  margin: 0 !important;
  padding: 12px 16px !important;
  border: none !important;
  border-radius: 16px !important;
  background: #1E2123 !important;        /* near-black, white text reads ~15:1 */
  color: #ffffff !important;
  font-family: var(--wp--preset--font-family--open-sans, "Open Sans", system-ui, sans-serif);
  font-size: 1rem !important;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  -webkit-appearance: none;
  appearance: none;
  text-transform: none;
}

.psp-chat-root .psp-chat-peek[hidden] {
  display: none !important;
}

.psp-chat-root .psp-chat-peek:hover {
  background: #2A2D30 !important;
  color: #ffffff !important;
}

.psp-chat-root .psp-chat-peek:focus-visible {
  outline: 3px solid #1E2123 !important;
  outline-offset: 2px;
}

/* --- Panel --- */
.psp-chat-root .psp-chat-panel {
  position: fixed !important;
  right: 20px !important;
  bottom: 88px !important;
  left: auto !important;
  z-index: 99999;
  display: flex !important;
  flex-direction: column !important;
  width: 380px;
  max-width: calc(100vw - 40px);
  height: min(620px, 80vh);
  background: #ffffff !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.psp-chat-root .psp-chat-panel[hidden] {
  display: none !important;
}

.psp-chat-root .psp-chat-panel__bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 0 0 auto;
  padding: 10px 8px 10px 16px !important;
  background: #484D56 !important;        /* PSP deep gray — white title passes contrast */
  color: #ffffff !important;
  font-family: var(--wp--preset--font-family--poppins, "Poppins", system-ui, sans-serif);
}

.psp-chat-root .psp-chat-panel__title {
  margin: 0 !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: #ffffff !important;
}

.psp-chat-root .psp-chat-panel__close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
  line-height: 1 !important;
  cursor: pointer;
  border-radius: 8px !important;
  -webkit-appearance: none;
  appearance: none;
}

.psp-chat-root .psp-chat-panel__close:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

.psp-chat-root .psp-chat-panel__close:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px;
}

.psp-chat-root .psp-chat-panel__close-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.psp-chat-root .psp-chat-mount {
  flex: 1 1 auto;
  min-height: 0;
}

.psp-chat-root .psp-chat-mount > openai-chatkit {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Inline (shortcode) mode: static panel, keeps the gray header --- */
.psp-chat-root .psp-chat-panel--inline {
  position: static !important;
  width: 100%;
  max-width: 480px;
  height: 600px;
  margin: 1rem 0;
  border: 1.5px solid #484D56 !important;
}

/* --- Yield to the theme's mobile nav ---------------------------------------
   If the PSP theme's mobile menu (hamburger) opens a full-screen panel in the
   same corner as our launcher, step out of the way while it's open so we never
   cover menu items or a search field. This is keyed to the theme's own "menu
   open" state class via :has() — no JS, and the launcher returns the moment the
   menu closes. display:none also drops the chat out of the tab order while the
   menu is up. REPLACE the selector below with the PSP theme's actual open-state
   class/attribute (inspect the hamburger when the menu is open). The example
   selectors are harmless if they don't match anything. */
body:has(.mobile-nav.is-active) .psp-chat-root,
body:has(.hamburger[aria-expanded="true"]) .psp-chat-root {
  display: none !important;
}

/* --- Mobile: full-width bottom sheet --- */
@media (max-width: 480px) {
  .psp-chat-root .psp-chat-panel:not(.psp-chat-panel--inline) {
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 85vh !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .psp-chat-root .psp-chat-panel--inline {
    height: 75vh;
  }
  .psp-chat-root .psp-chat-launcher {
    right: 16px !important;
    bottom: 16px !important;
  }
  .psp-chat-root .psp-chat-peek {
    right: 16px !important;
    bottom: 84px !important;
    max-width: calc(100vw - 32px);
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .psp-chat-root .psp-chat-launcher {
    transition: none !important;
  }
}