/* ============================================================
   Photo + Intro Screen Overrides
   ============================================================ */

/* ---- MOBILE: wider cards ---- */
@media (max-width: 899px) {
  .card {
    width: 94% !important;
    max-width: 94% !important;
    left: 3% !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
}

/* ---- DESKTOP: two-column photo screen ---- */
@media (min-width: 900px) {
  #photo-screen .card {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    position: relative;
    left: auto;
    transform: none;
    width: 90%;
  }

  #ps-left-col { flex: 1; min-width: 0; }

  #ps-right-col {
    width: 380px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
  }

  label[for="photo-input"] { display: none !important; }
}

/* ---- Continue button states ---- */
.ps-generate-disabled,
#continue-to-analysis:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

#continue-to-analysis:not(:disabled):not(.ps-generate-disabled) {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4) !important;
}

/* Limit preview image height so continue button stays visible */
#image-preview {
  max-height: 220px !important;
  object-fit: cover !important;
  width: 100% !important;
}