/* mobile.css — Shared responsive rules for Research Dashboard
   Loaded by all pages. Contains only @media rules — completely inert on desktop. */

/* ── 768px: Tablet breakpoint ──────────────────────────────────── */
@media (max-width: 768px) {
  /* Prevent horizontal overflow on all pages */
  body { overflow-x: hidden; }

  /* Touch targets — 44px minimum per Apple HIG */
  button, a.btn, select, .btn, .filter-btn {
    min-height: 44px;
  }

  /* Disable hover-only UI hints — they don't work on touch */
  .copy-btn { opacity: 0.6; }

  /* Scrollable tables */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Grid single column */
  .session-grid, .grid, .cards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Physician rubric responsive */
  .rubric-dim-label {
    flex: 0 0 100px;
    font-size: 0.68rem;
  }
  .rubric-container {
    padding: 8px;
  }
  .rubric-run-btn {
    min-height: 44px;
    padding: 8px 16px;
    font-size: 0.8rem;
  }

  /* Modals as bottom sheets */
  .modal-content, .detail-modal, [class*="modal"] > div:first-child {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: calc(100dvh - 60px) !important;
    border-radius: 16px 16px 0 0 !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Cost breakdown responsive rules ──────────────────────────── */
@media (max-width: 768px) {
  .cost-summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .cost-stage-table .cost-bar-cell {
    display: none;
  }
  .cost-model-table td:nth-child(4),
  .cost-model-table th:nth-child(4) {
    display: none;
  }

  /* Failure badges — wrap on tablet */
  .failure-badge-row { flex-wrap: wrap; gap: 4px; }
  .failure-recovery-hint { max-width: 150px; }
  .failure-summary-panel { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }

  /* Session queue — tablet */
  .queue-gauges { gap: 10px; }
  .queue-gauge { min-width: 140px; }
  .queue-item { padding: 8px 10px; gap: 8px; }
  .queue-drag-handle { display: none; }
  .queue-controls { gap: 8px; }

  /* Offline banner — tablet */
  .sh-offline-banner {
    padding: 6px 12px;
    font-size: 11px;
  }
  .sh-offline-banner .sh-offline-queue {
    font-size: 10px;
  }
}

/* ── 480px: Small phone breakpoint ─────────────────────────────── */
@media (max-width: 480px) {
  /* General spacing reduction */
  body {
    font-size: 14px;
  }

  .cost-summary-cards {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cost-summary-card {
    padding: 10px;
  }
  .cost-summary-card .cost-card-value {
    font-size: 1.2rem;
  }

  /* Failure badges — compact on phone */
  .failure-badge { font-size: 0.65rem; padding: 2px 7px; }
  .failure-badge .failure-icon { font-size: 0.7rem; }
  .failure-recovery-hint { display: none; }
  .failure-retries { font-size: 0.6rem; }
  .failure-summary-panel { padding: 6px 10px; gap: 4px; }
  .failure-summary-chip { font-size: 11px; padding: 3px 8px; }
  .alert-failure-badge { font-size: 9px; padding: 1px 5px; }
  .alert-esc-badge { font-size: 9px; padding: 1px 5px; margin-left: 3px; }
  .attention-origin { flex-wrap: wrap; gap: 4px; font-size: 10px; }
  .attention-origin span[style*="max-width"] { max-width: 180px !important; }
  .attention-origin-link { font-size: 10px; }

  /* Session queue — phone */
  .queue-gauges { flex-direction: column; gap: 8px; }
  .queue-gauge { min-width: unset; padding: 8px 10px; }
  .queue-item-score { display: none; }
  .queue-item-stage { font-size: 10px; }
  .queue-item-pos { display: none; }
  .queue-controls { flex-direction: column; align-items: stretch; }
  .queue-settings-row { justify-content: space-between; }
  .queue-process-btn { width: 100%; }

  .cost-stage-table th,
  .cost-stage-table td {
    padding: 6px 8px;
    font-size: 0.8rem;
  }
  .cost-stage-table .cost-col-right:nth-child(3) {
    display: none;
  }

  /* Touch targets — 44px minimum per Apple HIG */
  button, a, select, input[type="checkbox"], input[type="radio"],
  .btn, .filter-btn, .sh-tab, .sh-mobile-nav {
    min-height: 44px;
  }

  /* Offline banner — phone */
  .sh-offline-banner {
    padding: 5px 10px;
    font-size: 11px;
    flex-wrap: wrap;
  }
  .sh-offline-banner .sh-offline-dismiss {
    min-height: auto;
  }
  .sh-offline-banner .sh-offline-queue {
    font-size: 10px;
    margin-left: 0;
    margin-top: 2px;
  }

  /* Full-width inputs and selects */
  input[type="text"], input[type="search"], input[type="email"],
  input[type="url"], input[type="number"], input[type="date"],
  textarea, select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Reduce general padding */
  .container, .page-content, .main-content, .content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Sidebar overlay mode — generic pages (convos has its own sidebar rules) */
  .sidebar:not([data-page-handled]) {
    width: 85vw !important;
    min-width: 85vw !important;
    max-width: 85vw !important;
    position: fixed !important;
    top: 48px !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-left: 0 !important;
  }
  .sidebar:not([data-page-handled]).open,
  .sidebar:not([data-page-handled]):not(.collapsed) {
    transform: translateX(0);
  }
  .sidebar:not([data-page-handled]).collapsed {
    transform: translateX(-100%) !important;
    margin-left: 0 !important;
  }

  /* Kanban: vertical column layout */
  .board {
    flex-direction: column !important;
    overflow-x: hidden !important;
    padding: 10px !important;
    gap: 10px !important;
  }
  .board .column {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .board .column.collapsed {
    min-width: 100% !important;
    width: 100% !important;
  }
  .board .column.collapsed .column-header {
    writing-mode: horizontal-tb !important;
    height: auto !important;
    width: 100% !important;
    flex-direction: row !important;
  }

  /* Cards: reduce padding */
  .card {
    padding: 10px !important;
  }
  .card-meta {
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* Grid and modal rules inherited from 768px breakpoint */

  /* Landscape: idea cards full width */
  .card-list, .ideas-grid, .idea-list {
    display: flex !important;
    flex-direction: column !important;
  }
  .card-list .card, .ideas-grid .card, .idea-list .card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Datasets toolbar wrap */
  .toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .toolbar > * {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Schedule: filter bar wrap */
  .filter-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .filter-btn {
    flex: 0 1 auto !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* Convos: sticky input area */
  .input-area, .chat-input {
    position: sticky !important;
    bottom: 0 !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--bg-primary, #0d1117) !important;
    z-index: 50 !important;
  }

  /* Convos: prevent iOS zoom on input focus (font-size >= 16px) */
  .input-textarea, .chat-input textarea, .chat-input input {
    font-size: 16px !important;
  }

  /* Schedule: horizontal scroll for timeline */
  .timeline-container, .schedule-list {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Table and body overflow rules inherited from 768px breakpoint */

  /* Header adjustments in shared-header */
  .sh-header {
    padding: 0 10px !important;
  }
  .sh-heartbeat .sh-hb-text {
    font-size: 11px !important;
  }
  .sh-title {
    font-size: 13px !important;
  }
}

/* ── 360px: Emergency overrides for iPhone SE / Galaxy A ─────── */
@media (max-width: 360px) {
  .sh-header {
    padding: 0 6px !important;
    gap: 6px !important;
  }
  .sh-title {
    font-size: 12px !important;
  }
  .sh-heartbeat {
    padding: 2px 6px !important;
  }

  .card {
    padding: 8px !important;
  }
  .card-title {
    font-size: 13px !important;
  }
  .card-summary {
    font-size: 12px !important;
  }

  .column-header {
    padding: 8px 10px !important;
  }

  .modal-content, .detail-modal, [class*="modal"] > div:first-child {
    max-height: calc(100dvh - 40px) !important;
    padding: 12px !important;
  }

  h1 { font-size: 18px !important; }
  h2 { font-size: 16px !important; }
  h3 { font-size: 14px !important; }

  /* Further reduce padding */
  .container, .page-content, .main-content, .content {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* ── Landscape: constrain modals when short ─────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .sh-header {
    height: 36px !important;
  }
  .sh-tab {
    padding: 8px 10px 6px !important;
    font-size: 12px !important;
  }

  .modal-content, .detail-modal, [class*="modal"] > div:first-child {
    max-height: calc(100dvh - 20px) !important;
    max-width: 80vw !important;
    margin: auto !important;
  }

  .sh-mobile-menu {
    top: 36px !important;
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
  }
}

/* ── Features page — mobile action buttons ─────────────────────── */
@media (max-width: 480px) {
  .feature-card {
    padding: 14px !important;
  }
  .feature-title {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  .feature-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .feature-actions {
    gap: 8px !important;
  }
  .action-btn {
    padding: 10px 16px !important;
    font-size: 14px !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
  }
  .feature-meta {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .feature-input-title,
  .feature-input-desc {
    font-size: 16px !important; /* prevent iOS zoom */
  }
  /* Log viewer */
  .log-viewer {
    font-size: 11px !important;
    max-height: 200px !important;
  }
  /* Verdict/prompt panels */
  .verdict-box, .prompt-viewer {
    font-size: 13px !important;
    padding: 12px !important;
  }
}

/* ── Alerts page — mobile ──────────────────────────────────────── */
@media (max-width: 480px) {
  .alert-card {
    padding: 12px !important;
  }
  .alert-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .alert-actions button {
    flex: 1 1 auto !important;
    min-height: 44px !important;
    justify-content: center !important;
  }
  .mute-actions {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .mute-btn {
    min-height: 44px !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .mute-rule-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .mute-rule-expiry {
    margin-left: 0 !important;
  }
  .mutes-panel {
    padding: 10px 12px !important;
  }
  .alert-esc-badge {
    font-size: 8px !important;
    padding: 1px 4px !important;
    margin-left: 2px !important;
  }
}

/* ── Community page — mobile ───────────────────────────────────── */
@media (max-width: 480px) {
  .feed-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px !important;
  }
  .feed-tabs::-webkit-scrollbar { display: none; }
  .feed-tab {
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}

/* ── Global mobile polish ──────────────────────────────────────── */
@media (max-width: 480px) {
  /* Smooth scrolling everywhere */
  * { -webkit-overflow-scrolling: touch; }

  /* Prevent text from being too small */
  .page-header p, .section-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Better spacing for page headers */
  .page-header {
    margin-bottom: 16px !important;
  }
  .page-header h1 {
    font-size: 18px !important;
  }

  /* Make select dropdowns touch-friendly */
  select {
    min-height: 44px !important;
    font-size: 16px !important; /* prevent iOS zoom */
    padding: 8px 12px !important;
  }

  /* Stat cards — horizontal scroll on very small screens */
  .stats-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding-bottom: 4px !important;
  }
  .stats-bar::-webkit-scrollbar { display: none; }
  .stat-card {
    flex-shrink: 0 !important;
    min-width: 70px !important;
  }

  /* Section headers */
  .section-header {
    font-size: 15px !important;
    padding: 12px 0 !important;
  }

  /* Better link/button tap areas */
  a, button {
    -webkit-tap-highlight-color: rgba(88, 166, 255, 0.15);
  }
}

/* ── Calendar — mobile overrides ──────────────────────────────── */
@media (max-width: 768px) {
  .cal-grid-wrapper {
    flex-direction: column !important;
  }
  .cal-detail {
    width: 100% !important;
    position: static !important;
    max-height: none !important;
  }
  .cal-day {
    min-height: 70px !important;
  }
  .cal-stats {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cal-stats::-webkit-scrollbar { display: none; }
  .cal-stat {
    flex-shrink: 0 !important;
  }
}
@media (max-width: 480px) {
  .cal-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .cal-toolbar-left {
    justify-content: center !important;
  }
  .cal-toolbar-right {
    justify-content: center !important;
  }
  .cal-month-label {
    font-size: 16px !important;
    min-width: 140px !important;
  }
  .cal-day {
    min-height: 55px !important;
    padding: 4px !important;
  }
  .cal-day-number {
    font-size: 11px !important;
  }
  .cal-event-pip {
    font-size: 8px !important;
    padding: 0 3px !important;
  }
  .cal-weekday {
    font-size: 10px !important;
  }
  .cal-legend {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ── Memory Monitor — mobile overrides ─────────────────────────── */
@media (max-width: 480px) {
  .mem-panel {
    padding: 12px 14px !important;
  }
  .mem-gauges {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .mem-panel-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px;
  }
  .mem-oom-event {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }
  .mem-oom-session {
    flex-wrap: wrap;
    gap: 4px !important;
  }
  .mem-meta {
    flex-direction: column;
    gap: 4px !important;
  }
}

/* ── Analytics — mobile overrides ─────────────────────────────── */
@media (max-width: 768px) {
  .prescreen-finding-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .prescreen-panel {
    padding: 8px 10px;
  }
  .chart-grid {
    grid-template-columns: 1fr !important;
  }
  .chart-panel.full-width {
    grid-column: auto;
  }
  .funnel-label {
    width: 70px !important;
    font-size: 11px !important;
  }
  .controls-bar {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .stats-bar {
    gap: 8px !important;
  }
  .stat-card {
    min-width: 70px !important;
    padding: 8px 10px !important;
  }
  .stat-value {
    font-size: 20px !important;
  }
  .chart-panel {
    padding: 14px !important;
  }
  .heatmap-legend {
    flex-wrap: wrap;
  }
  .funnel-label {
    width: 55px !important;
    font-size: 10px !important;
  }
  .funnel-count {
    font-size: 10px !important;
  }
}

/* ── Heartbeat timeline — mobile ──────────────────────────────── */
@media (max-width: 768px) {
  .hb-timeline-stats {
    display: none !important;
  }
  .hb-detail-popup {
    left: 8px !important;
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
    min-width: auto !important;
  }
  .hb-detail-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  .hb-timeline-section {
    border-radius: 8px !important;
  }
  .hb-timeline-header {
    padding: 10px 12px !important;
  }
  .hb-strip {
    height: 28px !important;
  }
  .hb-seg {
    min-width: 1.5px !important;
  }
  .hb-legend {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .hb-day-label-row {
    font-size: 9px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Export button mobile ── */
@media (max-width: 768px) {
  .sh-export-btn {
    padding: 5px 10px;
    font-size: 11px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .sh-export-menu {
    min-width: 120px;
  }
  .sh-export-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ── Diff Viewer — Tablet ── */
@media (max-width: 768px) {
  .diff-container {
    flex-direction: column;
    height: auto;
  }
  .revision-panel {
    width: 100% !important;
    min-width: 0;
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid var(--border-primary);
  }
  .diff-panes {
    flex-direction: column;
  }
  .diff-pane + .diff-pane {
    border-left: none;
    border-top: 1px solid var(--border-primary);
  }
  .diff-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }
  .diff-toolbar .project-title {
    max-width: 200px;
  }
  .diff-stats {
    margin-left: 0;
    width: 100%;
  }
}

/* ── Cost Estimate — Mobile ── */
@media (max-width: 768px) {
  .cost-estimate-bar {
    gap: 4px;
  }
  .cost-badge {
    font-size: 9px;
    padding: 2px 5px;
  }
  .cost-confirm-modal {
    padding: 16px 20px;
  }
  .cost-confirm-modal .cost-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
}

/* ── Diff Viewer — Phone ── */
@media (max-width: 480px) {
  .revision-panel {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 85vw !important;
    height: 100vh;
    max-height: 100vh;
    z-index: 100;
    box-shadow: 4px 0 16px rgba(0,0,0,0.4);
  }
  .revision-panel.mobile-visible {
    display: block;
  }
  .panel-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .diff-toolbar .separator {
    display: none;
  }
  .diff-toolbar label {
    font-size: 0.7rem;
  }
  .diff-toolbar select {
    font-size: 0.75rem;
    padding: 4px 6px;
    min-height: 44px;
  }
  .view-toggle button {
    min-height: 44px;
    padding: 5px 10px;
  }
  .diff-panes:not(.unified) {
    flex-direction: column;
  }
  .diff-panes:not(.unified) .diff-pane + .diff-pane {
    border-left: none;
    border-top: 1px solid var(--border-primary);
  }
  .diff-line-num {
    width: 36px;
    font-size: 0.6rem;
  }
  .diff-line-content {
    padding: 0 6px;
    font-size: 0.65rem;
  }
}

/* ── Critique convergence chart — mobile ──────────────────────── */
@media (max-width: 768px) {
  .convergence-chart-container {
    padding: 8px;
    margin: 6px 0 10px 0;
  }
  .convergence-chart-header {
    flex-direction: column;
    gap: 4px;
  }
  .convergence-chart-legend {
    gap: 6px;
  }
  .convergence-legend-item {
    font-size: 0.6rem;
  }
  .convergence-early-exit-badge {
    font-size: 0.65rem;
    padding: 4px 8px;
  }
  .convergence-threshold-bar {
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .convergence-chart-container {
    padding: 6px;
  }
  .convergence-chart-legend {
    gap: 4px;
  }
  .convergence-plateau-badge {
    font-size: 0.6rem;
    padding: 2px 6px;
  }
  .convergence-early-exit-badge {
    font-size: 0.6rem;
    padding: 3px 6px;
  }
  .convergence-threshold-bar {
    font-size: 0.6rem;
    gap: 4px;
  }
}

/* ── Mobile Control Panel (/mobile) ──────────────────── */
@media (max-width: 360px) {
  .summary-row { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .summary-stat { padding: 8px; }
  .summary-stat-value { font-size: 18px; }
  .session-title { font-size: 13px; }
  .session-card-inner { padding: 10px 12px; }
  .alert-card-inner { padding: 10px 12px; }
  .top-bar-title { font-size: 15px; }
}

/* ── Submission Package Modal — Mobile ───────────────────────── */
@media (max-width: 768px) {
  .submission-pkg-content {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: calc(100dvh - 60px) !important;
    border-radius: 16px 16px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .pkg-stats {
    gap: 8px !important;
  }
  .pkg-stat {
    min-width: 60px !important;
    padding: 8px 10px !important;
  }
  .pkg-stat-value {
    font-size: 1.1rem !important;
  }
  .btn-submission-pkg {
    font-size: 0.68rem !important;
    padding: 4px 8px !important;
    min-height: 44px;
  }
  .pkg-artifacts li {
    flex-direction: column;
    gap: 2px;
  }
}

@media (max-width: 480px) {
  .pkg-stats {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .pkg-stat {
    flex: 1 1 40%;
  }
  .submission-pkg-content {
    padding: 16px !important;
  }
}

/* ── Method Network Mobile ── */
@media (max-width: 768px) {
  .method-network-panel {
    margin: 0 10px 12px;
  }
  .mn-canvas-wrap {
    height: 280px;
  }
  .mn-toolbar {
    gap: 4px;
  }
  .mn-toolbar select, .mn-toolbar input {
    font-size: 11px;
    padding: 3px 6px;
  }
  .mn-suggest-card .mn-suggest-methods {
    gap: 3px;
  }
}
@media (max-width: 480px) {
  .mn-canvas-wrap {
    height: 220px;
  }
  .mn-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .mn-legend {
    gap: 4px;
  }
  .mn-legend-item {
    font-size: 9px;
  }
}

/* ── arXiv search page mobile rules ──────────────────────────── */
@media (max-width: 768px) {
  .search-row {
    flex-direction: column;
  }
  .search-row .btn-primary {
    width: 100%;
    min-height: 44px;
  }
  .filters-row {
    gap: 8px;
  }
  .filter-select {
    flex: 1;
    min-width: 0;
    min-height: 44px;
  }
  .paper-card {
    padding: 14px 16px;
  }
  .paper-actions {
    gap: 6px;
  }
  .paper-actions .btn-sm {
    min-height: 36px;
  }
  .modal-content {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    max-height: calc(100dvh - 60px) !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0;
  }
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .view-tabs {
    width: 100%;
  }
  .view-tab {
    flex: 1;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .paper-title {
    font-size: 0.95rem;
  }
  .paper-meta {
    font-size: 0.75rem;
  }
  .paper-authors {
    font-size: 0.8rem;
  }
  .category-badge {
    font-size: 0.65rem;
  }
  .stat-pill {
    font-size: 0.72rem;
    padding: 3px 10px;
  }
  .recent-searches {
    gap: 4px;
  }
  .recent-chip {
    font-size: 0.72rem;
    padding: 3px 10px;
  }
}

/* Dependency impact map — mobile */
@media (max-width: 768px) {
  .dep-map-stats {
    display: none;
  }
  .dep-row {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
  }
  .dep-job-name {
    min-width: unset;
    font-size: 12px;
    flex: 1;
  }
  .dep-arrow {
    display: none;
  }
  .dep-targets {
    width: 100%;
    order: 3;
    padding-left: 18px;
  }
  .dep-critical-badge {
    order: 2;
  }
  .dep-session-count {
    order: 4;
    width: 100%;
    padding-left: 18px;
  }
  .dep-legend {
    flex-wrap: wrap;
    gap: 8px;
  }
  .dep-impact-session {
    flex-wrap: wrap;
    gap: 4px;
  }
  .dep-impact-session-name {
    width: 100%;
  }
  /* Upstream warning in session cards */
  .upstream-warning {
    font-size: 0.68rem;
    padding: 3px 8px;
  }
  /* Rollback modal mobile */
  .rollback-modal {
    width: 95%;
    max-height: 80vh;
  }
  .rollback-modal-body {
    padding: 12px 14px;
  }
  .rollback-stage-item {
    padding: 8px 10px;
  }
  .btn-rollback {
    font-size: 0.65rem;
    padding: 2px 8px;
  }
}

/* ── Analytics bottleneck heatmap mobile ── */
@media (max-width: 768px) {
  .bottleneck-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }
  .bottleneck-cell {
    width: 44px;
    height: 32px;
    font-size: 10px;
  }
  .bottleneck-table th.row-header {
    font-size: 10px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bottleneck-filter-bar {
    flex-wrap: wrap;
  }
  .bottleneck-sessions .session-name {
    max-width: 50%;
  }
}
@media (max-width: 480px) {
  .bottleneck-cell {
    width: 36px;
    height: 28px;
    font-size: 9px;
  }
  .bottleneck-table th {
    font-size: 9px;
  }
}

/* ──────────────────────────────────────────────────────────────────
   GLOBAL MOBILE HARDENING (added 2026-04-22)
   Cross-cutting fixes for index/kanban/landscape/home/telegram/reproduce.
   Designed to be conservative — uses :where() to avoid bumping specificity
   and hover-aware queries so it doesn't degrade desktop pointer UX.
   ────────────────────────────────────────────────────────────────── */

/* Safe-area aware viewport vars (always-on, no media query needed) */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Touch-only fallbacks: when device has no fine pointer, surface
   hover-revealed action UI permanently so it's reachable. We only flip
   common patterns; page-specific selectors stay overridable. */
@media (hover: none) and (pointer: coarse) {
  :where(.card-actions, .session-actions, .row-actions, .hover-actions) {
    opacity: 1 !important;
    height: auto !important;
    visibility: visible !important;
    transform: none !important;
  }
  /* Kill -webkit-tap-highlight grey flash; replace with subtle ring */
  :where(button, a, [role="button"], .chip, .btn) {
    -webkit-tap-highlight-color: rgba(88,166,255,0.15);
  }
  :where(button, a, [role="button"], .chip, .btn):active {
    opacity: 0.85;
  }
}

/* ── 768px: enforce minimum 44px touch targets on common controls ── */
@media (max-width: 768px) {
  :where(button, a.btn, .btn, .chip, .filter-btn, .action-btn,
         .card-btn, .deck-btn, .icon-btn, .sidebar-row,
         input[type="checkbox"] + label, [role="button"]) {
    min-height: 44px;
  }
  /* Buttons that hold only an icon need width too */
  :where(.icon-btn, .modal-close, .close-btn, button.icon) {
    min-width: 44px;
  }
  /* Inputs — comfortable typing target */
  :where(input[type="text"], input[type="search"], input[type="email"],
         input[type="number"], input[type="password"], textarea, select) {
    min-height: 40px;
    font-size: 16px; /* prevents iOS Safari auto-zoom on focus */
  }
  /* Modals / overlays: never wider than viewport, leave breathing room
     for safe-area insets. The earlier bottom-sheet rule already handles
     centered modals; this adds horizontal safety for any pre-existing
     fixed-width modal content that escaped the bottom-sheet pattern. */
  :where(.modal-content, .detail-modal, dialog) {
    max-width: 100vw !important;
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }
}

/* ── 480px: phone tightening ─────────────────────────────────────── */
@media (max-width: 480px) {
  /* Generic content padding: compress sides to gain real estate */
  :where(.container, main.container) {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }
  /* Multi-column grids that often forget to collapse */
  :where(.cards-grid, .session-grid, .grid, .triGrid,
         .summary-row, .kpi-row, .metrics-grid, .deck-grid,
         .cost-detail-grid, .cost-summary-cards) {
    grid-template-columns: 1fr !important;
  }
  /* Filter chip rows wrap and stay tappable */
  :where(.filter-bar, .chip-row) {
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Fixed bottom bars: respect safe area + give breathing space */
  :where(.footer-bar, .sticky-footer, .bottom-bar, .cmd-input-bar) {
    padding-bottom: calc(8px + var(--safe-bottom));
  }
  /* Chat-style bubbles should fill the line on phones */
  :where(.cmd-bubble, .msg-bubble, .chat-bubble) {
    max-width: 92% !important;
  }
}

/* ── 375px: emergency breakpoint (iPhone SE / mini, fold portrait) ── */
@media (max-width: 375px) {
  body { font-size: 13px; }
  :where(.container, main.container) {
    padding-left: 8px;
    padding-right: 8px;
  }
  :where(h1) { font-size: 20px; }
  :where(h2) { font-size: 17px; }
  /* Summary card density */
  :where(.summary-card) {
    min-width: 0 !important;
    padding: 10px 8px !important;
    flex: 1 1 calc(50% - 6px) !important;
  }
  :where(.summary-card .count) { font-size: 18px !important; }
  :where(.summary-card .label) { font-size: 10px !important; }
  /* Tables that haven't been retrofitted into cards: at least let them scroll */
  :where(table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Modals fill the screen completely, anchored to bottom for thumb reach */
  :where(.modal-content, .detail-modal) {
    border-radius: 12px 12px 0 0 !important;
  }
}

/* ── Reproduce page mobile (per-page card layout) ─────────────────── */
@media (max-width: 480px) {
  /* Reproduce table → card layout; rows too dense at 375-480px */
  body[data-page="reproduce"] :where(.table-wrap table) {
    display: block;
  }
  body[data-page="reproduce"] :where(.table-wrap thead) { display: none; }
  body[data-page="reproduce"] :where(.table-wrap tbody) { display: block; }
  body[data-page="reproduce"] :where(.table-wrap tbody tr) {
    display: block;
    padding: 8px;
    border-bottom: 1px solid var(--border-primary);
  }
  body[data-page="reproduce"] :where(.table-wrap tbody td) {
    display: block;
    padding: 4px 8px;
    border: none;
  }
  body[data-page="reproduce"] :where(.metrics-row td) {
    padding: 0 8px 8px 8px;
  }
}

/* ── Landscape (ideas) page: 3-col → 1-col below 768px ───────────── */
@media (max-width: 1100px) and (min-width: 769px) {
  body[data-page="landscape"] .triGrid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  body[data-page="landscape"] .triGrid {
    grid-template-columns: 1fr !important;
  }
  body[data-page="landscape"] .footer-bar {
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: calc(8px + var(--safe-bottom));
  }
}

/* ── Telegram page: chat reflow ──────────────────────────────────── */
@media (max-width: 480px) {
  body[data-page="telegram"] :where(.msg-row) {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  body[data-page="telegram"] :where(.msg-type, .msg-project) {
    display: inline-block;
    margin-right: 6px;
  }
  body[data-page="telegram"] :where(.topics) {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    margin: 0 -8px;
    padding: 0 8px;
  }
  body[data-page="telegram"] :where(.topics .topic) {
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
}

/* ── Kanban page: workspace tree + chat density ──────────────────── */
@media (max-width: 768px) {
  body[data-page="kanban"] :where(.ws-tree-row) {
    padding: 10px 8px !important;
    min-height: 44px;
  }
  body[data-page="kanban"] :where(.cmd-bubble) {
    max-width: 88% !important;
  }
  body[data-page="kanban"] :where(.modal) {
    max-width: 100vw !important;
  }
}

/* ── Home page: card-action and snooze-menu touch fixes ──────────── */
@media (hover: none) and (pointer: coarse) {
  body[data-page="home"] :where(.card-btn, .deck-btn, .sidebar-row, .snooze-btn) {
    opacity: 1 !important;
  }
  body[data-page="home"] :where(.deck-snooze-menu) {
    /* Always render at full opacity, gated by aria-expanded instead of :hover */
    transition: none;
  }
}
@media (max-width: 480px) {
  body[data-page="home"] :where(.card, .deck) {
    padding: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-04-22: Phone-first sweep across projects/kanban/ideas/home/telegram
   Goals: no horizontal overflow on 375px viewports, ≥44px touch targets,
   safe-area handling for iPhone, hover-only patterns get focus-visible
   alternatives, multi-column grids reflow in time for narrow screens.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Universal: respect iPhone safe area on any sticky/fixed bottom bar ── */
@media (max-width: 768px) {
  :where(.toast, .snackbar, [class*="fixed-bottom"], [class*="bottom-bar"]) {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
  /* Keep tap targets large on every page */
  :where(button, .btn, .chip, .tab, [role="button"], [role="tab"]) {
    min-height: 36px;
  }
}

/* ── Touch-device hover replacement (covers home + index card actions) ── */
@media (hover: none) and (pointer: coarse) {
  body[data-page="home"] :where(.card-actions, .card-btn, .deck-btn, .snooze-btn) {
    opacity: 1 !important;
    height: auto !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body[data-page="index"] :where(.session-actions, .session-btn, .row-actions) {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ── Index (Projects): fine-tune the existing 768px stack at 430px ── */
@media (max-width: 430px) {
  body[data-page="index"] :where(.sessions-list) {
    max-height: 42vh !important;
  }
  body[data-page="index"] :where(.detail-panel) {
    min-height: auto !important;
  }
  body[data-page="index"] :where(.session) {
    padding: 12px 14px !important;
  }
  body[data-page="index"] :where(.session-stats) {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  body[data-page="index"] :where(.btn) {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  /* Modals: never exceed viewport, scroll inside */
  body[data-page="index"] :where(.status-modal, .modal, .modal-content) {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 64px) !important;
    overflow-y: auto !important;
  }
}

/* ── Kanban: collapse 4-column board, soften sticky header overlap ── */
@media (max-width: 768px) {
  body[data-page="kanban"] #commentary-board {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  body[data-page="kanban"] :where(.ms-table) thead th {
    top: 48px !important;            /* offset under shared-header */
  }
  body[data-page="kanban"] :where(.ms-table) :where(td, th) {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
  body[data-page="kanban"] :where(.cb-body, .modal) {
    max-height: calc(100dvh - 80px) !important;
    overflow-y: auto !important;
  }
}
@media (max-width: 430px) {
  body[data-page="kanban"] #commentary-board {
    grid-template-columns: 1fr !important;
  }
  body[data-page="kanban"] :where(.column) {
    min-height: 120px !important;
  }
}

/* ── Landscape (/ideas): no rule existed below 700px → add 430px tightening ── */
@media (max-width: 480px) {
  body[data-page="landscape"] :where(.content) {
    padding: 12px !important;
  }
  body[data-page="landscape"] :where(.form-row, .filter-row) {
    flex-direction: column !important;
    gap: 8px !important;
  }
  body[data-page="landscape"] :where(input, select, textarea, .filter-select) {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 16px !important; /* prevents iOS auto-zoom on focus */
  }
  body[data-page="landscape"] :where(.funnel-modal) {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 16px 18px !important;
    max-height: calc(100dvh - 48px) !important;
  }
  body[data-page="landscape"] :where(.funnel-step) {
    gap: 8px !important;
  }
  body[data-page="landscape"] :where(.provenance-flow) {
    flex-direction: column !important;
    overflow-x: visible !important;
  }
  body[data-page="landscape"] :where(.curator-card) {
    margin: 0 12px 10px !important;
    padding: 8px 12px !important;
  }
  body[data-page="landscape"] :where(.curator-btn) {
    margin-left: 0 !important;
    margin-top: 6px !important;
  }
}

/* ── Home: card actions, sidebar collapse, modal padding, toast safety ── */
@media (max-width: 768px) {
  body[data-page="home"] :where(.modal-overlay) {
    padding: max(56px, calc(48px + env(safe-area-inset-top))) 12px 12px !important;
  }
  body[data-page="home"] :where(.modal, .modal-content) {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 80px) !important;
    overflow-y: auto !important;
  }
  body[data-page="home"] :where(.toast) {
    bottom: max(20px, calc(16px + env(safe-area-inset-bottom))) !important;
    left: 12px !important; right: 12px !important;
    width: auto !important; max-width: none !important;
  }
}
@media (max-width: 430px) {
  body[data-page="home"] {
    --sidebar-w: 0px;
  }
  body[data-page="home"] :where(.sidebar) {
    /* Hidden by default on tiny screens; rely on hamburger from shared-header */
    display: none !important;
  }
  body[data-page="home"] :where(.main, .content) {
    padding: 10px !important;
  }
  body[data-page="home"] :where(.card-actions) {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ── Telegram: tab strip overflow, message grid, bubble width, topic chips ── */
@media (max-width: 480px) {
  body[data-page="telegram"] :where(.view-tabs) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: thin;
  }
  body[data-page="telegram"] :where(.view-tab) {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  body[data-page="telegram"] :where(.cmd-bubble) {
    max-width: min(280px, 78vw) !important;
  }
  body[data-page="telegram"] :where(.cmd-chat) {
    padding: 12px 8px !important;
  }
  body[data-page="telegram"] :where(.topics-grid) {
    gap: 4px !important;
  }
  body[data-page="telegram"] :where(.topic-card) {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  body[data-page="telegram"] :where(.delivery-cards) {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 430px) {
  body[data-page="telegram"] :where(.msg-row) {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  body[data-page="telegram"] :where(.msg-row .msg-time) {
    font-size: 10px !important;
    color: var(--text-muted);
  }
}

/* ── Reproduce: filter bar + summary card overflow on phones ── */
@media (max-width: 480px) {
  body[data-page="reproduce"] :where(.summary-row) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  body[data-page="reproduce"] :where(.summary-card) {
    padding: 10px 12px !important;
  }
  body[data-page="reproduce"] :where(.filter-bar) {
    gap: 6px !important;
  }
  body[data-page="reproduce"] :where(.filter-bar input[type="text"]) {
    width: 100% !important;
    font-size: 16px !important; /* avoid iOS auto-zoom */
  }
  body[data-page="reproduce"] :where(.metrics-grid) {
    grid-template-columns: 1fr !important;
  }
  body[data-page="reproduce"] :where(thead th, tbody td) {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}