/* ============================================================
   app.css — Responsive overlay on top of macos-styles.css.
   On desktop (≥900px) we let macos-styles.css drive everything
   verbatim from the v5 mockup. Below that we collapse the fake
   window chrome, hide the sidebar, and add mobile top + bottom
   bars so the same pages re-flow as a native-feeling iPhone PWA.
   ============================================================ */

/* ---------- Mobile-only chrome (top bar + bottom tabs) ---------- */

.mobile-topbar,
.mobile-tabbar { display: none; } /* hidden by default; mobile media query below shows them */

.mobile-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: calc(50px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 14px 0;
  display: flex; align-items: center; gap: 10px;
  background: rgba(10,10,11,0.88);
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  border-bottom: 1px solid var(--border);
}
.mobile-topbar .mt-brand-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 0 14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.30);
  color: #062821; font-weight: 800; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mobile-topbar .mt-name { font-weight: 600; letter-spacing: -0.3px; font-size: 16px; }
.mobile-topbar .mt-meta {
  margin-left: auto;
  font-size: 11px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.mobile-topbar .mt-refresh {
  background: transparent; border: 1px solid var(--border-2);
  color: var(--text-2);
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.mobile-topbar .mt-refresh.spinning svg { animation: spin 0.9s linear infinite; }

.mobile-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(10,10,11,0.94);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-tabbar button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 7px;
  background: transparent; border: 0;
  color: var(--text-3); cursor: pointer;
  font-size: 10.5px; font-weight: 500;
  transition: color .12s ease;
}
.mobile-tabbar button svg { width: 22px; height: 22px; }
.mobile-tabbar button.is-active { color: var(--accent); }

/* ---------- Loading + error states (used everywhere) ---------- */

.app-loading, .app-error {
  text-align: center;
  padding: 80px 28px;
  color: var(--text-3);
}
.app-loading .ring {
  width: 36px; height: 36px; margin: 0 auto 18px;
  border: 2.5px solid var(--border-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.app-error h2 { color: var(--text-2); font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.app-error p  { font-size: 13px; margin: 0; }

/* ---------- Detail modal (used for card-detail click) ---------- */

.modal-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadein .18s ease;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: fixed; z-index: 950;
  background: var(--surface);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: slideup .24s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes slideup { from { transform: translateY(100%); } to { transform: translateY(0); } }

.modal-close {
  position: sticky; top: 0;
  background: var(--surface);
  padding: 10px 12px;
  display: flex; justify-content: flex-end;
  border-bottom: 1px solid var(--border);
  z-index: 1;
}
.modal-close button {
  background: transparent; border: 0;
  color: var(--text-2);
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.modal-close button:hover { background: var(--surface-2); color: var(--text); }

.modal-body { padding: 22px 26px 36px; }
.modal-body .external-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 18px 8px 0 0;
  padding: 8px 14px; border-radius: 999px;
  background: var(--accent); color: #062821;
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: filter .15s ease;
}
.modal-body .external-link.pubmed { background: var(--blue); color: #001a30; }
.modal-body .external-link:hover { filter: brightness(1.05); }

/* ============================================================
   ============ MOBILE OVERRIDES (< 900px viewport) ============
   On phones we collapse the fake window chrome and adopt a
   simpler stacked layout. The desktop CSS still loads but is
   overridden here.
   ============================================================ */

@media (max-width: 899px) {

  /* Mobile chrome on, desktop fake-window chrome off */
  .mobile-topbar { display: flex; }
  .mobile-tabbar { display: grid; }

  body {
    padding: 0 !important;
    background: var(--bg) !important;
    /* Reserve space for the fixed top + bottom bars */
    padding-top: calc(50px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }

  /* Full-bleed window — drop the rounded card look */
  .window {
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .window::before { display: none !important; } /* kill the radial top glow */
  .titlebar { display: none !important; } /* fake mac traffic lights */

  /* Body grid → single column, no sidebar */
  .body { display: block !important; min-height: 0 !important; }
  .sidebar { display: none !important; }

  /* Detail / page padding tighter, no max-height */
  .detail { max-height: none !important; overflow: visible !important; background: transparent !important; }
  .page  { padding: 14px 14px 32px !important; max-width: none !important; }
  .page-view { display: block; }
  .page-view[hidden] { display: none !important; }

  /* Tighten the greeting */
  .greeting-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 8px 0 18px !important;
    margin-bottom: 16px !important;
  }
  .greeting-hero > div:last-child { width: 100%; display: flex; gap: 8px; }
  .summary-tile { flex: 1; min-width: 0; padding: 10px 12px !important; }
  .summary-tile .v { font-size: 19px !important; }
  .display { font-size: 24px !important; letter-spacing: -0.6px !important; }
  .greet-sub { font-size: 13px !important; }

  /* Filter bar wraps */
  .filter-bar { gap: 6px; }
  .filter-bar > span[style*="margin-left:auto"] { display: none; } /* hide "sorted by..." on mobile */

  /* Page heads stack */
  .page-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .head-actions { width: 100%; flex-wrap: wrap; }

  /* Cards: roomier text, less horizontal padding */
  .feed-card, .trial-mini, .media-card, .stanford-card { padding: 14px 16px !important; }
  .fc-title  { font-size: 15px !important; }
  .fc-summary { font-size: 13px !important; }

  /* Trial detail layouts: stack */
  .trial-big { padding: 22px 18px !important; border-radius: var(--r-lg) !important; }
  .trial-name { font-size: 26px !important; }
  .changed-grid, .trial-grid, .stanford-grid {
    grid-template-columns: 1fr !important;
  }

  /* Split list/detail — stack vertically; list above, detail below */
  .split { display: block !important; height: auto !important; }
  .col-list { border-right: 0 !important; border-bottom: 1px solid var(--border); max-height: 240px; }
  .gl-list-head { padding: 18px 16px 0 !important; }
  .gl-row { padding: 12px 16px !important; }
  .gl-detail-pad { padding: 22px 18px !important; max-width: none !important; }

  /* AI Summary: stack */
  .ai-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .ai-input-pane, .ai-result-pane { padding: 22px 18px !important; }
  .ai-title { font-size: 22px !important; }

  /* Stanford controls reflow */
  .stanford-controls { padding: 10px 0 14px !important; }
  .stanford-search-row { margin-left: 0 !important; flex: 1; }
  .stanford-search-row input { width: 100% !important; }
  .stanford-hero { flex-direction: column; gap: 12px; padding-bottom: 16px !important; margin-bottom: 14px !important; }

  /* Mark-as-read button always visible on mobile (no hover) */
  .feed-card .mark-read-btn,
  .gl-row .mark-read-btn,
  .trial-mini .mark-read-btn,
  .media-card .mark-read-btn { display: flex !important; }

  /* Detail modal becomes a bottom-sheet on mobile */
  .modal {
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%;
    max-height: 92vh;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================================
   ============ DESKTOP MODAL CENTERING (≥ 900px) =============
   ============================================================ */

@media (min-width: 900px) {
  .modal {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 700px; max-width: 92vw;
    max-height: 80vh;
    border-radius: var(--r-lg);
    border: 1px solid var(--border-2);
    box-shadow: 0 28px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
    animation: zoomin .18s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes zoomin {
    from { transform: translate(-50%, -50%) scale(0.97); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  }
}

/* No mobile-tabbar on desktop */
@media (min-width: 900px) {
  .mobile-topbar, .mobile-tabbar { display: none !important; }
}

/* ---------- Misc ---------- */

@keyframes spin { to { transform: rotate(360deg); } }