/* Mobile layout: scope app rules so the Sample Rooms renderer keeps its geometry. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 999px) {
  .app-shell > .app { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .app main { padding: 20px clamp(16px, 4vw, 24px) 28px; }
  .app .brand, .app .topbar { padding: 12px max(16px, env(safe-area-inset-left)); }
  .app .topbar > div { min-width: 0; }
  .app h1 { font-size: clamp(26px, 6.8vw, 34px); line-height: 1.18; overflow-wrap: break-word; }
  .app .lead { font-size: 15px; line-height: 1.55; }
  .app .primary { min-height: 48px; line-height: 1.35; white-space: normal; min-width: 0; }
  .app .primary svg { flex-shrink: 0; }
  .app .actions { gap: 10px; }
  .app .actions .primary { margin-block: 0; }
  .app .icon-btn { width: 44px; height: 44px; flex-shrink: 0; }
  .app .field-label input, .app .field-label select, .app .field-label textarea { font-size: 16px; min-width: 0; }
  .app .bottom-nav { min-height: 64px; padding: 4px max(8px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-bottom)); }
  .app .bottom-nav button { flex: 1; min-width: 0; min-height: 52px; font-size: 12px; gap: 4px; }
  .app .photo-wrap { border-radius: 16px; }
  .app .info-card, .app .notice, .app .credit-box { overflow-wrap: anywhere; }
  .app .product-strip { margin-inline: calc(-1 * clamp(16px, 4vw, 24px)); }
  .app .strip-head { padding-inline: clamp(16px, 4vw, 24px); }
  .app .strip-hint { margin-inline: clamp(16px, 4vw, 24px); }
  .app .strip-track { padding-inline: clamp(16px, 4vw, 24px); scroll-padding-inline: clamp(16px, 4vw, 24px); }
  .app .strip-card { flex-basis: clamp(128px, 34vw, 156px); }
  .app .ai-studio { padding: 16px clamp(16px, 4vw, 24px) 28px; }
  .app .studio-save-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .app .studio-save-actions button { font-size: 14px; min-height: 48px; padding: 10px 12px; white-space: normal; line-height: 1.35; }
  .app .studio-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app .studio-model summary { min-height: 68px; padding: 12px; font-size: 20px; gap: 10px; }
  .app .studio-model summary strong { min-width: 0; overflow-wrap: break-word; }
  .app .studio-model summary .model-photo-crop { width: 52px; height: 56px; }
  .app .studio-option strong { font-size: 16px; }
  .app .studio-hint { font-size: 14px; margin-block: 8px 12px; }
  .app .studio-image .photo-wrap > img { max-height: 34svh; }
  .app .studio-image { top: env(safe-area-inset-top); }
  .app .studio-modal > section { max-width: 100%; max-height: calc(100dvh - 32px); padding: 16px; }
}
@media (max-width: 359px) {
  .app .two-inputs, .app .studio-options { grid-template-columns: minmax(0, 1fr); }
  .app .two-actions { flex-direction: column; }
  .app .two-actions .primary { width: 100%; }
}
@media (max-height: 500px) and (max-width: 999px) {
  .app .brand, .app .topbar { padding-block: 8px; }
  .app .bottom-nav { min-height: 56px; }
  .app .bottom-nav button { min-height: 44px; }
  .app .studio-image .photo-wrap > img { max-height: 28svh; }
  .app .center { padding-top: 24px; }
}

/* Sample Rooms: full preview initially; smaller pinned preview while choosing options. */
@media (max-width: 999px) {
  body.vs-sample-rooms { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .vs-sample-rooms main { padding: 16px max(16px, env(safe-area-inset-left)); }
  .vs-sample-rooms .preview-column { top: env(safe-area-inset-top); padding-block: 6px; }
  .vs-sample-rooms .preview-column .scene { width: min(100%, calc(46svh * var(--scene-ratio, 1.5))) !important; }
  .vs-sample-rooms .preview-column .scene canvas { max-height: 46svh !important; }
  .vs-sample-rooms .preview-column.preview-compact .scene { width: min(100%, calc(clamp(110px, 28svh, 220px) * var(--scene-ratio, 1.5))) !important; }
  .vs-sample-rooms .preview-column.preview-compact .scene canvas { max-height: clamp(110px, 28svh, 220px) !important; }
  html:has(.vs-sample-rooms) { scroll-padding-top: calc(clamp(110px, 28svh, 220px) + 24px); }
  .vs-sample-rooms .sample-save-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vs-sample-rooms .sample-save-actions button { min-width: 0; min-height: 48px; padding: 10px 12px; font-size: 14px; line-height: 1.35; white-space: normal; }
  .vs-sample-rooms .sample-save-bottom { grid-template-columns: minmax(0, 1fr); }
  .vs-sample-rooms .sample-save-bottom button { width: 100%; }
  .vs-sample-rooms .controls, .vs-sample-rooms .fit-card { padding: 14px; }
  .vs-sample-rooms .room-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-sample-rooms .room-chip { min-height: 56px; padding: 10px; gap: 8px; }
  .vs-sample-rooms .visual-picker summary { min-width: 0; gap: 8px; }
  .vs-sample-rooms .visual-picker summary > span { min-width: 0; overflow-wrap: break-word; }
  .vs-sample-rooms #product-select-trigger { padding: 12px; }
  .vs-sample-rooms #product-select-label { font-size: 17px; }
  .vs-sample-rooms input, .vs-sample-rooms select { font-size: 16px; }
  .vs-sample-rooms .buttons { flex-wrap: wrap; }
  .vs-sample-rooms .buttons button { min-width: 0; padding: 10px 8px; font-size: 14px; }
  .vs-sample-rooms .app-nav { min-height: 64px; padding: 4px 8px max(4px, env(safe-area-inset-bottom)); }
  .vs-sample-rooms .app-nav a { flex: 1; min-width: 0; min-height: 52px; font-size: 12px; }
  .vs-sample-rooms dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 16px; }
  .vs-sample-rooms #expanded-preview { max-width: none; max-height: none; padding: 0; }
}
@media (max-height: 500px) and (max-width: 999px) {
  .vs-sample-rooms .preview-column .scene { width: min(100%, calc(34svh * var(--scene-ratio, 1.5))) !important; }
  .vs-sample-rooms .preview-column .scene canvas { max-height: 34svh !important; }
  .vs-sample-rooms .preview-column.preview-compact .scene { width: min(100%, calc(26svh * var(--scene-ratio, 1.5))) !important; }
  .vs-sample-rooms .preview-column.preview-compact .scene canvas { max-height: 26svh !important; }
  html:has(.vs-sample-rooms) { scroll-padding-top: calc(26svh + 24px); }
  .vs-sample-rooms .app-nav { min-height: 56px; }
  .vs-sample-rooms .app-nav a { min-height: 44px; }
}