@media(max-width:600px){
  .ai-app{ max-width:100%; }
  .ai-header{ padding:12px 16px; }
  .ai-conversation{ padding:14px 14px 0; }
  .ai-suggestions{ padding:8px 14px; }
  .ai-composer{ padding:10px 14px max(16px, env(safe-area-inset-bottom)); }

  /* Compact message bubbles */
  .message{ font-size:14px; padding:11px 14px; max-width:85%; }

  /* Card body styling */
  .card-title{ font-size:14px; }
  .card-price{ font-size:18px; }

  /* Bigger touch targets */
  .card-cart-btn{ padding:12px; font-size:13px; }
  .card-view-btn{ padding:12px; font-size:13px; }
  .ai-chip{ padding:7px 12px; font-size:12px; }

  /* Skeleton mobile */
  .product-skeleton{ flex-direction:column; }
  .skeleton-img{ width:100%; min-height:200px; }
}

@media(max-width:400px){
  .ai-header-name{ font-size:14px; }
}

/* =========================================
   IPHONE SAFE AREA FIX
========================================= */
html, body{ height:100%; overflow:hidden; }
body{ padding-bottom:env(safe-area-inset-bottom); }

.ai-app{ height:100dvh; min-height:100dvh; display:flex; flex-direction:column; overflow:hidden; background:#050505; }

.ai-conversation{ flex:1; overflow-y:auto; min-height:0; padding:20px 14px 180px; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }

.ai-suggestions{ position:fixed; left:0; right:0; bottom:88px; z-index:998; display:flex; gap:8px; overflow-x:auto; padding:10px 14px; background:linear-gradient(to top,#050505,rgba(5,5,5,.96),transparent); }

.ai-composer{ position:fixed; left:0; right:0; bottom:0; z-index:999; background:#050505; padding:12px 14px calc(env(safe-area-inset-bottom) + 12px); border-top:1px solid rgba(255,255,255,.06); backdrop-filter:blur(18px); }

.ai-composer-wrap{ display:flex; align-items:center; gap:10px; background:#101010; border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:12px 14px; }

.ai-input{ flex:1; background:none; border:none; outline:none; color:white; font-size:16px; }

.ai-send{ width:44px; height:44px; border:none; border-radius:14px; background:linear-gradient(135deg,#44f1cf,#2dd4b4); color:black; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.variant-group-options{ display:flex; gap:10px; flex-wrap:wrap; padding-bottom:8px; }

.stone-swatch-label{ font-size:10px; line-height:1.2; text-align:center; max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.metal-swatch-label{ font-size:10px; }

/* =========================================
   PRODUCT CARD - UNIFIED FINAL OVERRIDE
========================================= */
@media(max-width:600px){
  .product-card{
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  .card-image-col{
    width:100% !important;
    min-width:100% !important;
    height:220px !important;
    max-height:220px !important;
    background:#fff !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    overflow:hidden !important;
  }
  .card-image{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    display:block !important;
    padding:8px !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .card-body{
    width:100% !important;
    min-width:0 !important;
    padding:14px !important;
    background:#0c0c0c !important;
    position:relative !important;
    z-index:2 !important;
  }
}

/* =========================================
   AI GENERATED IMAGE SIZE
========================================= */
.ai-generated-wrap{
  max-width:180px !important;
  width:180px !important;
  margin:0 auto !important;
}
.ai-compare-img,
.ai-result-img,
.creator-img,
.ai-generated-wrap img,
.ai-result img{
  max-width:180px !important;
  max-height:180px !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  margin:0 auto !important;
  display:block !important;
}
@media(max-width:600px){
  .ai-generated-wrap{ max-width:150px !important; width:150px !important; }
  .ai-compare-img,
  .ai-result-img,
  .creator-img,
  .ai-generated-wrap img,
  .ai-result img{
    max-width:150px !important;
    max-height:150px !important;
  }
}