/* App shell: bottom tab bar on phones, left sidebar from 768px. */
.app { min-height: 100vh; }
.app[data-chrome="none"] .tabbar, .app[data-chrome="none"] .sidebar, .app[data-chrome="none"] .topbar { display: none; }

.app[data-chrome="none"] .content { padding-bottom: 0; }
.content { min-width: 0; padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-lg)); }
.page { padding: var(--space-lg); max-width: 760px; margin: 0 auto; animation: ui-fade .18s ease; }
.page-wide { max-width: 1100px; }
.page-narrow { max-width: 440px; }
/* Desktop only: a bit more room. Phones/tablets keep the narrower caps above. */
@media (min-width: 900px) {
  .page { max-width: 960px; }
  .page-wide { max-width: 1280px; }
}

/* Top bar (phones only) */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(8px + var(--safe-top)) var(--space-lg) 8px;
  background: rgba(11, 14, 17, 0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.topbar .wordmark { font-size: 17px; }
.profile-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-pill); padding: 2px 2px 2px 10px; background: var(--surface-card); border: 1px solid var(--border); }
.profile-btn .hcp { font-size: 12px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }

/* Tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  background: var(--surface-card); border-top: 1px solid var(--border);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 10px; font-weight: 500; color: var(--text-tertiary); min-width: 0;
}
.nav-item svg { width: 24px; height: 24px; }
.nav-item[aria-current="page"] { color: var(--green); }
.sidebar { display: none; }

@media (min-width: 768px) {
  .tabbar, .topbar { display: none; }
  .sidebar {
    display: flex; flex-direction: column; gap: var(--space-lg);
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w); z-index: 40;
    padding: var(--space-xl) var(--space-md) var(--space-lg);
    background: rgba(22, 26, 31, 0.92); border-right: 1px solid var(--border);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .sidebar .hero-logo { width: 40px; height: 40px; border-radius: 10px; }
  .sidebar .wordmark { font-size: 16px; }
  .sidebar .side-nav { display: flex; flex-direction: column; gap: 2px; }
  .sidebar .nav-item {
    flex: none; flex-direction: row; justify-content: flex-start; gap: 12px;
    font-size: 15px; font-weight: 600; padding: 10px 12px; border-radius: var(--radius-sm);
  }
  .sidebar .nav-item:hover { background: rgba(255,255,255,.05); color: var(--text-primary); }
  .sidebar .nav-item[aria-current="page"] { background: var(--green-tint); color: var(--green); }
  .sidebar .nav-item svg { width: 20px; height: 20px; }
  .sidebar .side-profile { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--border); }
  .side-profile .who { min-width: 0; }
  .side-profile .who b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-profile .who span { font-size: 12px; color: var(--green); font-weight: 700; }
  .app:not([data-chrome="none"]) .content { margin-left: var(--sidebar-w); padding-bottom: var(--space-xxl); }
  .page { padding: var(--space-xxl); }
}