:root {
  --apraxa-webchat-normal-width: 420px;
  --apraxa-webchat-normal-height: 680px;
  --apraxa-webchat-large-width: 1200px;
  --apraxa-webchat-large-height: 950px;
  --apraxa-webchat-safe-margin: 32px;
}

/*
  Cognigy Webchat: Textfarben in Carousel/Gallery-Titeln.
*/
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-carousel-template-frame-title,
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-carousel-template-title,
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-gallery-template-title {
  color: #000000 !important;
  background: rgba(255, 255, 255, 0.85) !important;
}

/*
  APRAXA Webchat-Größensteuerung.

  Normalmodus:
  - begrenzte Standardgröße
  - viewport-sicher

  Large-Modus:
  - großer Chat
  - zentriert
  - auf kleineren Viewports begrenzt
*/
body.apraxa-webchat-large [data-cognigy-webchat-root] [data-cognigy-webchat],
body.apraxa-webchat-large [data-cognigy-webchat-root] .webchat,
body.apraxa-webchat-large [data-cognigy-webchat-root] .webchat-root,
body.apraxa-webchat-large [data-cognigy-webchat-root] .webchat-frame {
  width: min(var(--apraxa-webchat-large-width), calc(100vw - var(--apraxa-webchat-safe-margin))) !important;
  height: min(var(--apraxa-webchat-large-height), calc(100dvh - var(--apraxa-webchat-safe-margin))) !important;
  max-width: calc(100vw - var(--apraxa-webchat-safe-margin)) !important;
  max-height: calc(100dvh - var(--apraxa-webchat-safe-margin)) !important;

  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

body.apraxa-webchat-large [data-cognigy-webchat-root] iframe {
  max-width: calc(100vw - var(--apraxa-webchat-safe-margin)) !important;
  max-height: calc(100dvh - var(--apraxa-webchat-safe-margin)) !important;
}

body.apraxa-webchat-normal [data-cognigy-webchat-root] [data-cognigy-webchat],
body.apraxa-webchat-normal [data-cognigy-webchat-root] .webchat,
body.apraxa-webchat-normal [data-cognigy-webchat-root] .webchat-root,
body.apraxa-webchat-normal [data-cognigy-webchat-root] .webchat-frame {
  width: min(var(--apraxa-webchat-normal-width), calc(100vw - var(--apraxa-webchat-safe-margin))) !important;
  height: min(var(--apraxa-webchat-normal-height), calc(100dvh - var(--apraxa-webchat-safe-margin))) !important;
  max-width: calc(100vw - var(--apraxa-webchat-safe-margin)) !important;
  max-height: calc(100dvh - var(--apraxa-webchat-safe-margin)) !important;
}

body.apraxa-webchat-normal [data-cognigy-webchat-root] iframe {
  max-width: calc(100vw - var(--apraxa-webchat-safe-margin)) !important;
  max-height: calc(100dvh - var(--apraxa-webchat-safe-margin)) !important;
}

/*
  Mobile: Large-Modus wird Fullscreen.
*/
@media (max-width: 760px) {
  body.apraxa-webchat-large [data-cognigy-webchat-root] [data-cognigy-webchat],
  body.apraxa-webchat-large [data-cognigy-webchat-root] .webchat,
  body.apraxa-webchat-large [data-cognigy-webchat-root] .webchat-root,
  body.apraxa-webchat-large [data-cognigy-webchat-root] .webchat-frame {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;

    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    border-radius: 0 !important;
  }

  body.apraxa-webchat-large [data-cognigy-webchat-root] iframe {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}