/* ===== Responsive / mobile adaptation ===== */

@media (max-width: 860px) {
  :root { --topbar-h:34px; }

  /* dock becomes a bottom bar */
  #dock {
    top:auto; bottom:0; left:0; right:0; width:auto; height:64px;
    flex-direction:row; padding:0 6px 3px; border-right:none; border-top:1px solid rgba(255,255,255,.08);
  }
  #dock.hidden-dock { transform:translateY(100%); }
  .dock-icon { width:50px; height:50px; }
  .dock-icon img, .dock-icon > .app-svg { width:42px; height:42px; }
  .dock-icon .running-dots { left:50%; top:auto; bottom:0; transform:translateX(-50%); flex-direction:row; }
  .dock-sep { width:1px; height:30px; margin:0 4px; }
  #dock-reveal-strip { display:none !important; }

  /* windows open maximized-ish */
  .window { border-radius:10px; }

  /* topbar condenses */
  #topbar { font-size:12.5px; }
  #topbar .tb-btn { padding:0 8px; }

  /* overview */
  #ov-ws-strip { right:8px; gap:8px; transform:translateY(-50%) scale(.82); transform-origin:right center; }
  #app-grid { padding:46px 18px 40px; }
  .ag-page { grid-template-columns:repeat(var(--ag-cols,4), minmax(78px,96px)); grid-auto-rows:100px; }
  .ag-item img, .ag-item > svg.app-svg { width:54px; height:54px; }

  /* app-sidebars collapse to horizontal chips or hidden with back button */
  .naut-side, .settings-side { position:absolute; z-index:20; inset:0 auto 0 0; box-shadow:6px 0 24px rgba(0,0,0,.25); transform:translateX(-105%); transition:transform .2s ease; width:230px; }
  .naut-side.open, .settings-side.open { transform:none; }
  .panel-back-btn, .side-open-btn { display:inline-flex !important; }
  .settings-panel { padding:16px 16px 40px; }
  .res-grid { grid-template-columns:1fr; }
  .welcome-tips { grid-template-columns:1fr; }
  .about-grid { font-size:13px; gap:6px 14px; }

  /* quick settings full width sheet */
  #qs-pop { left:8px !important; right:8px !important; width:auto !important; }
  #calendar-pop { left:8px !important; right:8px !important; width:auto !important; }

  .lock-time { font-size:72px; }
  .detail-hero { flex-direction:column; }
  .appear-cards { flex-wrap:wrap; }
}

@media (max-width: 560px) {
  .ag-page { --ag-cols:4; }
  #ov-search-icon { display:none; }
  #ov-search { padding-left:18px; }
}