/*
 * Floating chatbot widget (site-root composition siteChatbotComposition).
 * Colours and spacing come from tokens.css; transparency uses rgba().
 * The chat header lives inside the client's iframe, so the widget has none.
 */

.padis-chatbot {
  position: fixed;
  bottom: 1rem;
  z-index: 50; /* above header (30/40) and operational messages (31), below overlays (100) */
}

.padis-chatbot--right { right: 1rem; }
.padis-chatbot--left { left: 1rem; }

.padis-chatbot--w-sm { --padis-chatbot-width: 320px; }
.padis-chatbot--w-md { --padis-chatbot-width: 380px; }
.padis-chatbot--w-lg { --padis-chatbot-width: 440px; }

.padis-chatbot--h-sm { --padis-chatbot-height: 480px; }
.padis-chatbot--h-md { --padis-chatbot-height: 560px; }
.padis-chatbot--h-lg { --padis-chatbot-height: 640px; }

/* Round trigger, shown only while minimised. */
.padis-chatbot__trigger,
.padis-chatbot__minimise {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.padis-chatbot__trigger {
  width: 3rem;
  height: 3rem;
  background: var(--padis-color-primary);
  color: var(--padis-color-on-primary);
  border: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.padis-chatbot__trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.padis-chatbot__trigger:focus-visible,
.padis-chatbot__minimise:focus-visible {
  outline: 3px solid var(--padis-color-primary);
  outline-offset: 2px;
}

.padis-chatbot[data-state="open"] .padis-chatbot__trigger {
  opacity: 0;
  transform: scale(0.8);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out, visibility 0s linear 0.15s;
}

/* Container holds only the iframe and the floating minimise button. It is
   anchored to the widget corner so it grows out of (and back into) the trigger. */
.padis-chatbot__body {
  position: absolute;
  bottom: 0;
  width: var(--padis-chatbot-width, 380px);
  height: var(--padis-chatbot-height, 560px);
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  background: var(--padis-color-surface-opaque);
  border-radius: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.padis-chatbot--right .padis-chatbot__body {
  right: 0;
  transform-origin: bottom right;
}

.padis-chatbot--left .padis-chatbot__body {
  left: 0;
  transform-origin: bottom left;
}

.padis-chatbot[data-state="minimised"] .padis-chatbot__body {
  opacity: 0;
  transform: scale(0.9);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0s linear 0.2s;
}

.padis-chatbot__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.padis-chatbot__minimise {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  background: rgba(255, 255, 255, 0.7);
  color: #1d1d2b;
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.15s ease;
}

.padis-chatbot__minimise:hover {
  background: rgba(255, 255, 255, 0.95);
}

/* Mobile: open = full screen (same 48rem breakpoint as site.css). The body stays
   fixed full screen in both states so it only fades, never shrinks mid-animation. */
@media (max-width: 48rem) {
  .padis-chatbot__body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }

  .padis-chatbot[data-state="minimised"] .padis-chatbot__body {
    transform: none;
  }

  .padis-chatbot[data-state="open"] .padis-chatbot__minimise {
    width: 2.75rem;
    height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .padis-chatbot__trigger,
  .padis-chatbot__body,
  .padis-chatbot[data-state="open"] .padis-chatbot__trigger,
  .padis-chatbot[data-state="minimised"] .padis-chatbot__body {
    transition: none;
  }
}

@media print {
  .padis-chatbot {
    display: none;
  }
}