/*
 * 3PWeb lead quiz — responsive containment repair
 *
 * Applied as a small, versioned layer so the active quiz bundle and its CRM
 * contract remain untouched. The dialog becomes the sole scroll container on
 * compact touch screens; long strategic-answer fields can never be clipped by
 * the card's desktop overflow rule or by the iOS browser chrome.
 */

@media (max-width: 939px) {
  .pwq-dialog[open] {
    display: block;
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .pwq-card {
    display: block;
    width: 100%;
    min-height: 100%;
    height: auto;
    overflow: visible;
  }

  .pwq-content {
    min-height: 100%;
    overflow: visible;
    padding-top: max(1.1rem, env(safe-area-inset-top));
    padding-right: max(1.1rem, env(safe-area-inset-right));
    padding-bottom: max(1.35rem, env(safe-area-inset-bottom));
    padding-left: max(1.1rem, env(safe-area-inset-left));
  }

  .pwq-content form {
    display: block;
    min-height: auto;
  }

  .pwq-step {
    min-height: 0;
    padding-bottom: 1rem;
  }
}

@media (max-width: 679px) {
  body.pwq-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .pwq-card {
    min-height: 100svh;
    min-height: 100dvh;
    border-radius: 0;
  }

  .pwq-aside {
    display: none;
  }

  .pwq-voice-field {
    display: flex;
    flex-direction: column;
    gap: .65rem;
  }

  .pwq-voice-field textarea {
    width: 100%;
    min-height: 8.5rem;
    padding: .9rem;
    padding-bottom: .9rem;
  }

  .pwq-voice-button {
    position: static;
    align-self: flex-end;
    min-height: 2.7rem;
    max-width: 100%;
    padding-inline: .95rem;
    white-space: normal;
    text-align: center;
  }

  .pwq-voice-help {
    display: block;
    margin-top: .15rem;
  }

  .pwq-actions {
    bottom: 0;
    padding-bottom: max(.9rem, env(safe-area-inset-bottom));
  }
}

@media (max-width: 374px) {
  .pwq-content {
    padding-inline: .9rem;
  }

  .pwq-header {
    gap: .65rem;
  }

  .pwq-voice-button {
    align-self: stretch;
    justify-content: center;
  }
}