@media (min-width: 768px) {
  .device-pad .workspace { grid-template-rows: 68px minmax(0, 1fr); }
  .device-pad .app-header { padding: 14px 22px; }
  .device-pad .ask-scroll { padding: 48px 32px; }
  .device-pad .prompt-workspace { padding-top: 24px; }
  .device-pad .prompt-heading { margin-bottom: 22px; }
  .device-pad .composer-large textarea { min-height: 130px; font-size: 16px; }
  .device-pad .suggestion-list { grid-template-columns: repeat(3, 1fr); }
  .device-pad .suggestion-list button { min-height: 74px; align-items: flex-start; line-height: 1.5; }
  .device-pad .page-header, .device-pad .chat-header { padding-right: 26px; padding-left: 26px; }
  .device-pad .page-content { padding: 22px 26px; }
  .device-pad .master-layout { grid-template-columns: 330px minmax(0, 1fr); gap: 20px; }
  .device-pad .empty-panel { min-height: 420px; display: grid; place-items: center; align-content: center; padding: 30px; border: 1px solid var(--border); border-radius: var(--radius); text-align: center; background: var(--surface); }
  .device-pad .empty-panel > .icon { width: 30px; height: 30px; color: var(--muted); }
  .device-pad .empty-panel h2 { margin: 14px 0 6px; font-size: 18px; }
  .device-pad .empty-panel p { margin: 0 0 16px; color: var(--muted); font-size: 11px; }
  .device-pad .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-pad .chat-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .device-pad .inspector { display: block; padding: 18px; }
  .device-pad .inspector.is-open { position: static; }
  .device-pad .message-scroll { padding: 28px 24px; }
  .device-pad .feature-drawer { width: 370px; }
  .device-pad .sheet { top: 0; right: 0; bottom: 0; left: auto; width: 420px; max-height: none; padding: 26px; border-radius: 0; animation-name: side-sheet-in; }
  @keyframes side-sheet-in { from { transform: translateX(22px); opacity: .6; } }
  .device-pad .chart-dialog { top: 50%; right: auto; bottom: auto; left: 50%; width: min(720px, calc(100% - 80px)); height: auto; padding: 24px; transform: translate(-50%, -50%); border-radius: var(--radius); }
}

@media (max-width: 720px) {
  .prototype-toolbar { padding: 10px 12px; flex-wrap: wrap; }
  .prototype-title small, .prototype-actions > .toolbar-button:not(.toolbar-primary) { display: none; }
  .prototype-actions { margin-left: auto; }
  .prototype-stage { min-height: calc(100vh - 62px); padding: 0; }
  .device { width: 100vw; height: calc(100vh - 62px); max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .device-camera { display: none; }
  .device-phone .workspace { grid-template-rows: 62px minmax(0, 1fr); }
  .device-phone .app-header { padding-top: 13px; }
}

@media (max-width: 430px) {
  .app-header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-grid > div { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .metric-grid strong { grid-column: 1; }
  .metric-grid em { grid-column: 2; grid-row: 1 / span 2; }
}