/* Mobile responsive — gateway browser mode */

/* Tablets and phones */
@media (max-width: 768px) {
  .titlebar { height: 44px; min-height: 44px; }
  .titlebar-left { padding-left: 4px; gap: 2px; }
  .titlebar-btn { width: 36px; height: 36px; }
  .tab-bar { font-size: 13px; }
  .tab { max-width: 140px; padding: 0 8px; }

  /* Sidebar: full-width overlay */
  .sidebar {
    position: absolute !important;
    left: 0; top: 44px; bottom: 0;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    z-index: 200;
  }
  .sidebar.hidden { width: 0 !important; min-width: 0 !important; display: none; }

  /* Dashboard: full-width overlay */
  .dashboard {
    position: absolute !important;
    left: 0; top: 44px; bottom: 0;
    width: 100% !important;
    min-width: 100% !important;
    z-index: 200;
  }

  /* File browser: full-width overlay */
  .right-panel {
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    top: 0 !important; bottom: 0 !important;
    width: 100% !important;
    z-index: 150;
  }

  /* Splitter hidden on mobile */
  .splitter-handle { display: none; }

  /* Instance selector compact */
  .instance-selector select { max-width: 120px; font-size: 12px; }

  /* Gateway login */
  .gateway-login-box { width: 90%; max-width: 320px; padding: 24px; }

  /* Modals: wider on mobile */
  .modal { width: 95%; max-width: 400px; }
}

/* Small phones */
@media (max-width: 480px) {
  .titlebar-left { padding-left: 2px; }
  .tab { max-width: 100px; font-size: 12px; }
  .panel-toggle { font-size: 10px; padding: 2px 6px; }
  .sidebar-header { padding: 4px 8px; }
  .session-item { padding: 6px 8px; }
}

/* Touch devices */
@media (pointer: coarse) {
  /* Larger touch targets */
  .session-item { min-height: 44px; padding: 8px 12px; }
  .fb-row { min-height: 44px; }
  .tab { min-height: 36px; }
  .titlebar-btn { min-width: 40px; min-height: 40px; }
  .ctx-item { min-height: 40px; padding: 8px 16px; }

  /* Modifier keys bar */
  .modkeys-bar { display: flex !important; }
}

/* Modifier keys bar (hidden by default, shown on touch) */
.modkeys-bar {
  display: none;
  background: var(--surface);
  border-top: 1px solid var(--border-1);
  padding: 4px 8px;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.modkeys-bar button {
  background: var(--bg);
  color: var(--text-2);
  border: 1px solid var(--border-1);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  min-width: 36px;
  text-align: center;
}
.modkeys-bar button:active { background: var(--accent); color: #fff; }
.modkeys-bar button.sticky { background: var(--accent); color: #fff; }