/* EAZYFIX Klusadviseur-paneel (inc/60-klusadviseur.php). Los bestand, alleen geladen waar de chat
 * staat. Mobiel eerst: schermvullend, zodat het iOS-toetsenbord de invoerbalk niet wegduwt.
 * z-index 1050: boven de PDP-bestelbalk (1010) en de chatknop (1005), onder Bootstrap-modals (1055). */
.ez-klusadviseur {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: #fff;
}

.ez-klusadviseur[hidden] {
  display: none;
}

.ez-klusadviseur__bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 4px 16px;
  background: rgb(18, 28, 77);
  color: #fff;
}

.ez-klusadviseur__title {
  font-weight: 600;
  font-size: 1rem;
}

.ez-klusadviseur__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}

.ez-klusadviseur__close:hover,
.ez-klusadviseur__close:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.ez-klusadviseur__frame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
}

/* Achtergrond niet laten scrollen achter de schermvullende chat. */
html.ez-chat-is-open,
html.ez-chat-is-open body {
  overflow: hidden;
}

@media (min-width: 768px) {
  .ez-klusadviseur {
    inset: auto 24px 24px auto;
    width: 480px;
    height: auto;
    max-height: calc(100dvh - 48px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(18, 28, 77, 0.25);
  }

  /* De resize-berichten (480 tot 820 px) bepalen hier de hoogte; max-height van het paneel kapt af. */
  .ez-klusadviseur__frame {
    flex: 0 1 auto;
    height: 480px;
  }

  html.ez-chat-is-open,
  html.ez-chat-is-open body {
    overflow: visible;
  }
}