/**
 * Penetron Web Chat — loader styles.
 *
 * Contract with assets/loader.js (Task 6): the loader JS builds and toggles
 * these exact class names / DOM hooks. Do not rename without updating the JS.
 *
 *   .penw-launcher          fixed circular button, bottom-right. JS toggles
 *                            the panel open/closed on click.
 *   .penw-launcher__icon    inline SVG/glyph inside the launcher button.
 *   .penw-opener            proactive text bubble anchored above the
 *                            launcher. JS injects text content + shows/hides.
 *   .penw-opener__close     ✕ dismiss control inside the opener bubble.
 *   .penw-opener__reply     «Відповісти» action button inside the opener
 *                            bubble; opens the panel with opener attribution.
 *   .penw-panel             fixed chat panel container (holds the iframe).
 *   .penw-panel--open       modifier JS adds/removes to show/hide the panel
 *                            (panel is display:none by default; add this
 *                            class to reveal it).
 *   .penw-panel__iframe     the <iframe> that hosts the chat SPA (dist/).
 *
 * Z-index layering: launcher + opener sit at 99998, the open panel sits
 * above them at 99999 (matches the react-calc lightbox convention of a
 * single high z-index reserved for the topmost interactive surface).
 *
 * Brand colors: primary blue #00529B, ink text #0a2540, accent orange
 * (PMS 144, #FD9A00 — same token as webinar.css --penw-orange) used for the
 * launcher's 3px left notch and the opener's left border accent.
 *
 * IMPORTANT: these elements live in the PARENT page DOM, so the site theme's
 * global button styles compete with ours. Live on shop.penetron.ua the theme
 * reset (`button { border: 1px solid #c36; ... }`) and Elementor kit
 * (`.elementor-kit-4 button { background-color: var(--e-global-color-accent) }`,
 * specificity 0,1,1) both beat a bare `.penw-*` class (0,1,0). Hence the
 * button selectors below carry the element tag AND `!important` on every
 * theme-contested property. Do not "clean this up" — it will regress.
 */

button.penw-launcher {
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 99998 !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #00529b !important;
  color: #fff !important;
  border: 0 !important;
  border-left: 3px solid #fd9a00 !important;
  box-shadow: 0 4px 16px rgba(10, 37, 64, 0.28);
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 !important;
  line-height: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

button.penw-launcher:hover,
button.penw-launcher:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(10, 37, 64, 0.34);
  background: #00529b !important;
  color: #fff !important;
}

button.penw-launcher:focus-visible {
  outline: 2px solid #fd9a00;
  outline-offset: 2px;
}

.penw-launcher__icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Opener bubble — proactive text prompt anchored above the launcher. */
.penw-opener {
  position: fixed !important;
  right: 16px;
  bottom: 88px;
  z-index: 99998 !important;
  max-width: 280px;
  background: #fff !important;
  color: #0a2540 !important;
  border: 0 !important;
  border-left: 3px solid #fd9a00 !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 24px rgba(10, 37, 64, 0.18);
  padding: 14px 34px 14px 16px !important;
  margin: 0 !important;
  font: 400 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  display: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.penw-opener--visible {
  display: block;
}

button.penw-opener__close {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #0a2540 !important;
  opacity: 0.55;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

button.penw-opener__close:hover,
button.penw-opener__close:focus-visible {
  opacity: 1;
}

button.penw-opener__reply {
  display: block !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #00529b !important;
  font: inherit !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
}

button.penw-opener__reply:hover {
  color: #003c72 !important;
  background: transparent !important;
}

button.penw-opener__reply:focus-visible {
  outline: 2px solid #fd9a00;
  outline-offset: 2px;
}

/* Chat panel — hosts the iframe. Hidden by default; JS adds --open to show. */
.penw-panel {
  display: none;
  position: fixed !important;
  right: 16px;
  bottom: 88px;
  z-index: 99999 !important;
  width: 380px;
  height: min(620px, 80vh);
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(10, 37, 64, 0.32);
  background: #fff !important;
}

.penw-panel--open {
  display: block;
}

.penw-panel__iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  background: #fff;
}

/* Full-screen sheet on small viewports. */
@media (max-width: 480px) {
  .penw-panel {
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .penw-opener {
    right: 12px;
    left: 12px;
    max-width: none;
    bottom: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .penw-launcher,
  .penw-opener,
  .penw-opener__close,
  .penw-panel {
    transition: none !important;
    animation: none !important;
  }

  .penw-launcher:hover,
  .penw-launcher:focus-visible {
    transform: none;
  }
}