/* SeekQuote Web — phone-first layout (v0.1.3)
   Keep the desktop editor intact; on phones constrain every surface to the
   viewport so Safari cannot horizontally pan/crop the controls. */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    height: auto;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none;
  }

  body {
    position: relative;
    padding: 0;
  }

  #sq-app {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    min-height: 100svh;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow-x: hidden !important;
    overflow-y: visible;
  }

  /* Preview first on mobile. */
  #sq-stage {
    order: 1;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 52svh;
    min-height: 360px;
    max-height: 560px;
    flex: none;
    display: flex;
    padding: 12px 10px 8px;
    overflow: hidden !important;
    gap: 8px;
  }

  #sq-stage-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  #sq-full-canvas {
    display: block;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto;
    height: auto;
    touch-action: none;
  }

  #sq-placeholder {
    max-width: 100%;
    padding: 20px 24px;
    overflow: hidden;
  }

  #sq-placeholder p {
    font-size: 12px;
    line-height: 1.55;
  }

  #sq-slide-strip {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: center;
    gap: 8px;
    padding: 0 8px;
    overflow: hidden;
  }

  #sq-slide-list {
    min-width: 0;
    max-width: calc(100vw - 76px);
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  #sq-add-slide-btn {
    flex: 0 0 auto;
  }

  #sq-size-label {
    display: none;
  }

  /* Controls follow the preview and stay exactly viewport width. */
  #sq-panel {
    order: 2;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: auto;
    max-height: none;
    flex: none;
    overflow: hidden !important;
    border-right: 0;
    border-top: 1px solid var(--border);
  }

  #sq-header {
    position: sticky;
    top: 0;
    z-index: 30;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    padding: 9px 10px;
    background: var(--surface);
  }

  #sq-logo-text {
    min-width: 0;
    white-space: nowrap;
    font-size: 15px;
    letter-spacing: -0.5px;
  }

  .sq-version-badge {
    margin-left: 4px;
    padding: 2px 4px;
    font-size: 8px;
  }

  .sq-header-actions {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
  }

  .sq-icon-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex: 0 0 32px;
  }

  #sq-controls {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    padding: 12px 10px;
    gap: 12px;
  }

  #sq-controls > section,
  #sq-controls > section > *,
  .sq-pill-group,
  .sq-toggle-row,
  .sq-adjust-row,
  .sq-textcolor-row,
  .sq-slider-row,
  .sq-color-row {
    min-width: 0;
    max-width: 100%;
  }

  .sq-size-grid {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .sq-size-btn {
    min-width: 0;
    width: 100%;
    padding: 8px 2px;
  }

  .sq-size-btn span {
    font-size: 9px;
  }

  .sq-pill-group {
    width: 100%;
  }

  .sq-pill {
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
  }

  .sq-toggle-row {
    width: 100%;
  }

  .sq-toggle-row .sq-toggle {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
  }

  #sq-footer {
    position: sticky;
    bottom: 0;
    z-index: 25;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: var(--surface);
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  }

  /* Bottom-sheet modals work much better than centered desktop boxes. */
  .sq-modal,
  #sq-download-modal {
    max-width: 100vw;
  }

  .sq-modal {
    align-items: flex-end;
    padding: 0;
  }

  .sq-modal-card,
  .sq-modal-box {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 88svh;
    margin: 8px;
    border-radius: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .sq-generator-grid {
    grid-template-columns: 1fr !important;
  }

  input,
  textarea,
  select,
  button {
    font-size: 16px;
    max-width: 100%;
  }
}

/* Narrow phones (SE / mini class widths). */
@media (max-width: 390px) {
  #sq-stage {
    height: 48svh;
    min-height: 330px;
  }

  #sq-logo-text {
    font-size: 13px;
  }

  .sq-icon-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    flex-basis: 30px;
  }

  .sq-header-actions {
    gap: 3px;
  }

  #sq-header {
    padding-left: 8px;
    padding-right: 8px;
    column-gap: 5px;
  }
}

/* v0.1.5 — fix script generator horizontal overflow on iPhone.
   The desktop modal fields are row flex layouts; on phones they must stack. */
@media (max-width: 760px) {
  #sq-script-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    overflow: hidden !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  #sq-script-modal .sq-script-generator-box {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 90svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #sq-script-modal .sq-modal-field {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }

  #sq-script-modal .sq-modal-field > span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }

  #sq-script-modal .sq-modal-field input,
  #sq-script-modal .sq-modal-field textarea,
  #sq-script-modal .sq-modal-field select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  #sq-script-modal .sq-generator-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
  }

  #sq-script-modal #sq-generator-fields,
  #sq-script-modal .sq-script-output-wrap,
  #sq-script-modal .sq-viral-toggle,
  #sq-script-modal .sq-modal-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #sq-script-modal .sq-viral-toggle {
    padding: 12px !important;
    gap: 10px !important;
  }

  #sq-script-modal .sq-viral-toggle span {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #sq-script-modal .sq-viral-toggle strong,
  #sq-script-modal .sq-viral-toggle small {
    overflow-wrap: anywhere;
  }

  #sq-script-modal .sq-modal-actions {
    display: block !important;
  }

  #sq-script-modal .sq-modal-actions .sq-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}