/* =============================================
   Responsive — Mobile breakpoints
   ALL values from variables.css tokens.
   ============================================= */


/* ===========================================
   Tablet / narrow desktop (<=900px)
   Sidebar collapses to hamburger menu
   =========================================== */
@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }

  /* Sidebar becomes an overlay drawer */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    z-index: calc(var(--z-sidebar) + 10);
  }

  .sidebar.open { transform: translateX(0); }

  /* Backdrop behind sidebar */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: calc(var(--z-sidebar) + 5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
  }

  .sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Show hamburger */
  .hamburger { display: block; }

  /* Stats go 2-up */
  .stat-grid { grid-template-columns: 1fr 1fr; }

  /* Tighten header */
  .header { padding: 0 var(--space-md); }

  /* Shrink CLI input */
  .cli-input {
    min-width: 120px;
    padding-right: var(--space-md);
  }

  /* Settings panel goes full-width */
  .settings-panel { width: 100%; }

  /* Table adjustments */
  .data-table {
    margin: 0 var(--space-sm) var(--space-sm);
    font-size: var(--text-xs);
  }

  /* Chat bubbles wider on mobile */
  .msg { max-width: 90%; }

  /* Reduce panel minimums */
  .lead-panel  { min-height: 180px; }
  .agent-panel { min-height: 180px; }

  /* Stack skill cards */
  .skill-card { grid-template-columns: 1fr; }

  .skill-actions {
    flex-direction: row;
    align-items: center;
  }

  /* Wrap memory controls */
  .memory-controls { flex-wrap: wrap; }

  .memory-meta {
    flex-direction: column;
    gap: var(--space-xs);
  }
}


/* ===========================================
   Phone (<=600px)
   Stats go single column, hide non-essentials
   =========================================== */
@media (max-width: 600px) {
  .stat-grid { grid-template-columns: 1fr; }

  /* Hide version badge and toolbar buttons */
  .header-version,
  .cli-btn { display: none; }

  /* Shrink CLI further */
  .cli-input { min-width: 80px; }
}