/* FlowTest Mobile Responsive Styles */
@media (max-width: 768px) {
  /* Nav */
  .nav { padding: 0 16px; height: 48px; flex-wrap: wrap; }
  .nav-links { gap: 2px; margin-left: 16px; overflow-x: auto; flex-wrap: nowrap; }
  .nav-link { padding: 6px 10px; font-size: 11px; white-space: nowrap; }
  .nav-logo { font-size: 14px; }
  .nav-logo svg { width: 22px; height: 22px; }
  .nav-badge, .nav-right { display: none; }

  /* Homepage */
  .hero { padding: 24px 16px !important; }
  .hero h1 { font-size: 22px !important; }
  .stats { flex-direction: column; gap: 8px !important; padding: 0 16px !important; }
  .stat { padding: 12px !important; }
  .cards { grid-template-columns: 1fr !important; padding: 0 16px !important; gap: 12px !important; }
  .card { padding: 16px !important; }

  /* Container pages */
  .container { padding: 16px !important; }

  /* Summary bar */
  .summary-bar { flex-direction: row; flex-wrap: wrap; gap: 8px !important; }
  .summary-card { flex: 1 1 45%; min-width: 120px; padding: 12px !important; }
  .summary-value { font-size: 20px !important; }

  /* Tables */
  .exec-table { font-size: 11px; }
  .exec-table th, .exec-table td { padding: 6px 8px !important; }
  .exec-table .time-col { font-size: 10px; }

  /* Panels */
  .sim-panel, .tools-panel, .config-panel { width: 100% !important; position: fixed; right: 0; top: 48px; bottom: 0; z-index: 50; }

  /* Toolbar */
  .toolbar { flex-wrap: wrap; }

  /* Docs layout */
  .layout { flex-direction: column !important; }
  .doc-sidebar { width: 100% !important; height: auto !important; position: static !important; border-right: none !important; border-bottom: 1px solid #e8e8e8; padding: 12px !important; display: flex; flex-wrap: wrap; gap: 4px; }
  .doc-sidebar h3 { width: 100%; margin: 8px 0 4px !important; }
  .doc-sidebar a { display: inline-block; padding: 4px 8px !important; font-size: 11px !important; }
  .doc-content { padding: 16px !important; }
  .doc-content table { font-size: 11px; }
  .doc-content table td, .doc-content table th { padding: 4px 6px !important; }

  /* Validator layout */
  .layout:not(.doc-layout) { flex-direction: column !important; }
  .left, .right { width: 100% !important; }

  /* Test suites */
  .suite-header { flex-wrap: wrap; gap: 8px; }
  .test-row { padding: 8px 12px !important; flex-wrap: wrap; }
  .test-expected, .test-actual { font-size: 9px !important; }

  /* History */
  .filter-bar { flex-direction: column; gap: 8px !important; }
  .diff-container { grid-template-columns: 1fr !important; }

  /* AI Chat */
  .ai-chat-panel { width: 100% !important; height: 60vh !important; }

  /* Score box */
  .score-value { font-size: 36px !important; }

  /* Search results */
  #search-results { left: 0 !important; right: 0 !important; }
}

@media (max-width: 480px) {
  .nav-links { display: none; }
  .summary-card { flex: 1 1 100%; }
  .exec-table .ops-col, .exec-table .duration-col { display: none; }
}