/* =============================================
   Small Helix — Mobile Enhancement Styles
   Loaded after all other CSS to override for mobile
   ============================================= */

/* ========== INDEX PAGE (Beta Landing) ========== */
@media (max-width: 640px) {
  body:not(.landing-body) {
    padding: 32px 20px !important;
    align-items: flex-start !important;
  }
  body.landing-body {
    padding: 0 !important;
    align-items: unset !important;
  }
  body:not(.landing-body) .logo {
    font-size: 24px !important;
    margin-bottom: 4px !important;
  }
  body:not(.landing-body) .tagline {
    margin-bottom: 32px !important;
  }
  body:not(.landing-body) h1 {
    font-size: 26px !important;
    margin-bottom: 6px !important;
  }
  body:not(.landing-body) .subtitle {
    font-size: 14px !important;
    margin-bottom: 32px !important;
  }
  body:not(.landing-body) .modules {
    gap: 12px !important;
  }
  body:not(.landing-body) .module-card {
    padding: 22px 16px !important;
    border-radius: 14px !important;
  }
  body:not(.landing-body) .module-card .name {
    font-size: 14px !important;
  }
  body:not(.landing-body) .back {
    margin-top: 32px !important;
  }
}

/* ========== GLOBAL ENHANCEMENTS ========== */
@media (max-width: 640px) {
  /* Increase base spacing on mobile */
  :root {
    --space-sm: 10px;
    --space-md: 20px;
    --space-lg: 24px;
    --space-xl: 36px;
  }

  .container {
    padding: 0 20px !important;
  }
}

/* ========== PROGRESS BAR (Beautified) ========== */
@media (max-width: 640px) {
  .progress-bar {
    height: 4px !important;
  }
  .progress-bar__fill {
    background: linear-gradient(90deg, #7C5CFC, #a78bfa, #c4b5fd) !important;
    border-radius: 0 2px 2px 0 !important;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
  }
  /* Subtle shimmer effect */
  .progress-bar__fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    animation: shimmer 2s infinite;
  }
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* ========== DIAGNOSE PAGE ========== */
@media (max-width: 640px) {
  /* Questionnaire container — more padding */
  .questionnaire {
    padding: 88px 20px 32px !important;
    min-height: 100vh;
  }

  /* Meta row — more breathing room */
  .questionnaire__meta {
    margin-bottom: 28px !important;
  }

  .questionnaire__module {
    font-size: 11px !important;
  }

  .questionnaire__step {
    font-size: 13px !important;
  }

  /* Question text — better sizing and spacing */
  .questionnaire__question {
    font-size: 20px !important;
    line-height: 1.45 !important;
    margin-bottom: 28px !important;
    letter-spacing: -0.2px !important;
  }

  /* Options — bigger touch targets */
  .options {
    gap: 10px !important;
  }

  .option-card {
    padding: 16px 18px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    border-radius: 12px !important;
    min-height: 52px !important; /* 44px minimum touch target + padding */
    border-width: 1.5px !important;
    gap: 14px !important;
    /* Active press feedback */
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s ease !important;
  }

  .option-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Larger indicators for touch */
  .option-card__indicator--radio {
    width: 22px !important;
    height: 22px !important;
  }

  .option-card.selected .option-card__indicator--radio::after {
    width: 9px !important;
    height: 9px !important;
  }

  .option-card__indicator--checkbox {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
  }

  .option-card.selected .option-card__indicator--checkbox::after {
    width: 7px !important;
    height: 11px !important;
  }

  /* "Other" input */
  .option-card__other-input {
    padding: 14px 16px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    margin-top: 10px !important;
    border-width: 1.5px !important;
    min-height: 48px !important;
  }

  .option-card__other-input:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.12) !important;
  }

  /* Navigation buttons — full width on mobile */
  .questionnaire__nav {
    flex-direction: column !important;
    gap: 12px !important;
    padding-top: 28px !important;
  }

  .nav-btn {
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    text-align: center !important;
    justify-content: center !important;
    min-height: 52px !important;
  }

  .nav-btn--prev {
    order: 2 !important;
  }

  .nav-btn--next {
    order: 1 !important;
  }
}

/* ========== LOADING STATE ========== */
@media (max-width: 640px) {
  .questionnaire__loading {
    min-height: 70vh !important;
    padding: 20px !important;
  }
  .loading-text {
    font-size: 17px !important;
  }
  .loading-subtext {
    font-size: 14px !important;
    max-width: 260px !important;
  }
}

/* ========== REPORT PAGE ========== */
@media (max-width: 640px) {
  .report {
    padding: 88px 20px 40px !important;
  }

  .report__header {
    margin-bottom: 28px !important;
  }

  .report__badge {
    padding: 8px 14px !important;
    font-size: 12px !important;
    margin-bottom: 20px !important;
  }

  .report__title {
    font-size: 24px !important;
    margin-bottom: 6px !important;
  }

  .report__subtitle {
    font-size: 14px !important;
  }

  .report__module-tag {
    margin-top: 14px !important;
  }

  /* Score card */
  .report__score {
    padding: 24px 20px !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;
  }

  .report__score-label {
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }

  .report__score-value {
    font-size: 48px !important;
    margin-bottom: 4px !important;
  }

  .report__score-max {
    font-size: 14px !important;
  }

  .report__score-bar {
    height: 8px !important;
    border-radius: 4px !important;
    margin-top: 20px !important;
  }

  .report__score-bar-fill {
    height: 100% !important;
    border-radius: 4px !important;
    background: linear-gradient(90deg, #7C5CFC, #a78bfa) !important;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Findings */
  .report__section {
    margin-bottom: 20px !important;
  }

  .report__section-title {
    font-size: 15px !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
  }

  .finding-card {
    padding: 18px 16px !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
  }

  .finding-card__label {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  .finding-card__text {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* Placeholder */
  .report__placeholder {
    padding: 24px 16px !important;
    font-size: 13px !important;
    border-radius: 14px !important;
    margin-top: 24px !important;
  }

  /* Back button */
  .report__back {
    margin-top: 28px !important;
  }

  .btn--ghost {
    padding: 14px 24px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
  }
}

/* ========== NAVBAR (Mobile) ========== */
@media (max-width: 640px) {
  .navbar {
    padding: 16px 20px !important;
  }
  .navbar__logo-img {
    height: 28px !important;
  }
  .navbar__logo-text {
    font-size: 16px !important;
  }
}

/* ========== SAFE AREA (Notch devices) ========== */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 640px) {
    .progress-bar {
      top: env(safe-area-inset-top) !important;
      height: calc(4px + env(safe-area-inset-top)) !important;
    }
    .navbar {
      padding-top: calc(16px + env(safe-area-inset-top)) !important;
    }
    .questionnaire {
      padding-top: calc(88px + env(safe-area-inset-top)) !important;
    }
    .report {
      padding-top: calc(88px + env(safe-area-inset-top)) !important;
    }
  }
}

/* ========== NARROW PHONE (375) ========== */
@media (max-width: 375px) {
  .chat-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 88px !important;
  }
  .chat-bubble-ai,
  .chat-bubble-user {
    font-size: 14px !important;
    padding: 11px 14px !important;
  }
  .chat-row {
    max-width: 92% !important;
  }
}