
/* GoPet AI v5.2 — MOBILE ONLY. Desktop remains untouched. */
@media (max-width: 620px) {
  .page-shell{
    padding:10px 10px 26px !important;
  }

  .topbar{
    padding:2px 2px 12px !important;
  }

  .top-pill{
    display:none !important;
  }

  .brand-orb{
    width:38px !important;
    height:38px !important;
    border-radius:12px !important;
  }

  .brand-orb span{
    border-radius:11px !important;
    font-size:17px !important;
  }

  .brand-copy{
    font-size:19px !important;
  }

  .hero{
    grid-template-columns:1fr !important;
    min-height:0 !important;
    padding:24px 17px 178px !important;
    border-radius:22px !important;
  }

  .eyebrow{
    margin-bottom:12px !important;
    font-size:12px !important;
  }

  h1{
    max-width:100% !important;
    margin-bottom:15px !important;
    font-size:clamp(34px,9.7vw,42px) !important;
    line-height:1.01 !important;
    letter-spacing:-.045em !important;
  }

  .hero-copy > p{
    font-size:14.5px !important;
    line-height:1.48 !important;
  }

  .hero-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    margin-top:19px !important;
  }

  .hero-primary{
    min-width:0 !important;
    min-height:46px !important;
    padding:11px 13px !important;
    justify-content:space-between !important;
    gap:8px !important;
    font-size:12.5px !important;
  }

  .hero-primary span{
    font-size:17px !important;
  }

  .hero-stat{
    gap:5px !important;
  }

  .hero-stat strong{
    font-size:24px !important;
  }

  .hero-stat span{
    max-width:58px !important;
    font-size:10.5px !important;
    line-height:1.12 !important;
  }

  .trust-row{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    margin-top:17px !important;
  }

  .trust-row span{
    min-width:0 !important;
    min-height:46px !important;
    padding:7px 6px !important;
    gap:5px !important;
    align-items:flex-start !important;
    border-radius:10px !important;
    font-size:9.4px !important;
    line-height:1.2 !important;
  }

  .trust-row b{
    flex:0 0 auto !important;
    font-size:8.5px !important;
  }

  .hero-visual{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:182px !important;
    min-height:0 !important;
  }

  .hero-image-frame{
    width:405px !important;
    right:-61px !important;
    bottom:-60px !important;
  }

  .chip-a{
    left:4% !important;
    top:24% !important;
  }

  .chip-b{
    right:3% !important;
    bottom:13% !important;
  }

  .float-chip{
    padding:6px 8px !important;
    font-size:8px !important;
  }

  .layout{
    grid-template-columns:1fr !important;
    gap:13px !important;
    margin-top:13px !important;
  }

  .card{
    border-radius:20px !important;
  }

  .profile-card,
  .chat-card{
    padding:17px !important;
  }

  .profile-card{
    position:static !important;
  }

  .section-top{
    gap:9px !important;
  }

  .step-badge{
    width:32px !important;
    height:32px !important;
    border-radius:10px !important;
  }

  .section-kicker,
  .mini-kicker{
    font-size:11.5px !important;
  }

  .section-top h2,
  .chat-head h2{
    font-size:20px !important;
    line-height:1.14 !important;
  }

  .intro-copy{
    margin:13px 0 15px !important;
    font-size:13px !important;
    line-height:1.48 !important;
  }

  .profile-progress{
    margin-bottom:15px !important;
    padding:10px 11px !important;
  }

  .species-grid{
    gap:6px !important;
    margin-bottom:13px !important;
  }

  .species{
    min-height:62px !important;
    padding:7px 4px !important;
    border-radius:12px !important;
  }

  .species-icon{
    font-size:18px !important;
  }

  .species > span:last-child{
    font-size:11.5px !important;
  }

  .form-grid{
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
  }

  .form-grid .full{
    grid-column:1/-1 !important;
  }

  label{
    gap:5px !important;
    font-size:12px !important;
  }

  input,
  select,
  textarea{
    min-width:0 !important;
    padding:10px 11px !important;
    border-radius:11px !important;
    font-size:16px !important;
  }

  .privacy-note{
    margin-top:12px !important;
    padding:9px 10px !important;
  }

  .profile-art{
    height:68px !important;
    margin:13px -17px -17px !important;
  }

  .profile-art img{
    height:150px !important;
    transform:translateY(-38px) !important;
  }

  .chat-card{
    min-height:0 !important;
  }

  .chat-head{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:9px !important;
  }

  .chat-head > .section-top{
    min-width:0 !important;
    flex:1 1 auto !important;
  }

  .quota{
    flex:0 0 auto !important;
    max-width:108px !important;
    margin-top:0 !important;
    padding:7px 8px !important;
    text-align:center !important;
    font-size:10px !important;
    line-height:1.15 !important;
  }

  .ai-status-line{
    gap:6px !important;
    flex-wrap:wrap !important;
    font-size:10.5px !important;
  }

  .profile-lock{
    grid-template-columns:auto minmax(0,1fr) !important;
    gap:9px !important;
    padding:12px !important;
  }

  .profile-lock > a{
    grid-column:1/-1 !important;
    min-height:42px !important;
    display:grid !important;
    place-items:center !important;
    text-align:center !important;
  }

  .suggestions{
    gap:6px !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
  }

  .suggestions::-webkit-scrollbar{
    display:none !important;
  }

  .suggestions button{
    flex:0 0 auto !important;
    min-height:40px !important;
    white-space:nowrap !important;
    font-size:10.5px !important;
  }

  .messages{
    height:280px !important;
  }

  .bubble{
    max-width:92% !important;
    font-size:13.5px !important;
    line-height:1.48 !important;
  }

  .composer{
    border-radius:15px !important;
  }

  .composer textarea{
    min-height:70px !important;
  }

  .send-btn{
    min-height:43px !important;
  }

  .medical-note{
    font-size:10.5px !important;
    line-height:1.38 !important;
  }

  .access-gate{
    grid-template-columns:1fr !important;
  }

  .access-gate form{
    grid-template-columns:1fr !important;
  }

  .access-art{
    display:none !important;
  }

  footer{
    justify-content:center !important;
    flex-wrap:wrap !important;
    text-align:center !important;
    font-size:10.5px !important;
  }

  .thinking-bubble{
    min-width:0 !important;
    max-width:92% !important;
  }
}

@media (max-width: 360px) {
  .hero{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  h1{
    font-size:33px !important;
  }

  .hero-actions{
    grid-template-columns:1fr !important;
  }

  .hero-stat{
    justify-content:center !important;
  }

  .trust-row{
    grid-template-columns:1fr 1fr !important;
  }

  .trust-row span:last-child{
    grid-column:1/-1 !important;
  }

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

  .form-grid .full{
    grid-column:auto !important;
  }
}
