/* ============================================================
   RESPONSIVE — Mobile layout (<=860px)
   ============================================================ */

@media (max-width: 860px) {
  body { overflow: hidden; }

  .system-bar {
    height: auto;
    min-height: 56px;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 9px 12px;
  }

  .system-center {
    justify-content: flex-start;
    order: 3;
  }

  .system-right {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .dock { display: none; }

  .workspace {
    inset: 0;
    top: 110px;
    left: 0;
    display: grid;
    grid-template-rows: auto 1fr;
  }

  .mobile-tabs {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(28,80,160,0.22);
    background: linear-gradient(180deg, rgba(200,225,255,0.82), rgba(166,204,248,0.75));
    backdrop-filter: blur(10px);
  }

  .mobile-tabs button {
    white-space: nowrap;
    border: 1px solid rgba(28,80,160,0.26);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #d6e8fb);
    color: #1a3d6a;
    padding: 6px 12px;
    font-size: 0.78rem;
    transition: background 120ms ease;
  }

  .mobile-tabs button.active {
    background: linear-gradient(180deg, #c8dcff, #a8c8f8);
    border-color: rgba(30,93,191,0.52);
    color: #0f2050;
  }

  .window {
    inset: 46px 8px 8px 8px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    transform: none !important;
    border-radius: 10px;
  }

  .window:not(.mobile-active) { display: none; }

  .window-titlebar { cursor: default; }

  .window-tools  { display: none; }
  .dock-preview  { display: none; }
  .resize-handle { display: none; }

  .app-layout { grid-template-columns: 1fr; }

  .sidebar, .inspector {
    border: 0;
    border-bottom: 1px solid var(--line);
    max-height: 180px;
  }

  .metric-grid, .project-grid { grid-template-columns: 1fr; }

  .shortcuts dl { grid-template-columns: 1fr; }
}

/* ============================================================
   SHORT VIEWPORT — Hide dock app icons when height is tight.
   Only the SN start button remains; the start menu has everything.
   ============================================================ */

@media (max-height: 680px) {
  .dock-item-wrap {
    display: none;
  }

  /* Give the dock logo area a bit more breathing room */
  .dock-logo-wrap {
    margin-bottom: 0;
  }

  /* Ensure the dock itself doesn't try to scroll */
  .dock {
    overflow: hidden;
  }

  /* On short screens, open start menu downward from the SN button
     instead of upward — prevents it from clipping above the viewport */
  .start-menu {
    bottom: auto;
    top: 8px;
    max-height: calc(100svh - 16px);
    transform-origin: top left;
  }

  .start-menu[hidden] {
    transform: translateY(-12px);
  }
}