/* ================================
   Global (dark, iOS-like)
   ================================ */
:root { color-scheme: dark; }
html, body { height: 100%; }
body {
  background:#000;
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Common layout helpers */
.wrap { max-width:1100px; margin:0 auto; padding:16px; }
.grid { display:grid; gap:14px; }
.row { display:flex; gap:10px; align-items:center; }

/* Keep long feeds single-column when desired (mirror iOS) */
.feed-1col { max-width: 700px; margin: 0 auto; }
.feed-1col.grid { display:grid; gap:14px; grid-template-columns: 1fr; }

/* Safe padding when a fixed bottom bar is present */
.with-bottom-pad { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ================================
   Top Chrome (matches ui.js: mountTopToolbar)
   ================================ */
.ba-topwrap {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #000;
  border-bottom: 1px solid #111;
  backdrop-filter: saturate(140%) blur(6px);
}
.ba-row1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 10px 2px 10px;
  max-width: 1100px;
  margin: 0 auto;
}
.ba-left { display:flex; align-items:center; gap:8px; }
.ba-center { display:flex; justify-content:center; }
.ba-right { justify-self: end; }

.ba-searchbtn {
  width:34px; height:34px; border-radius:9px;
  border:1px solid #222; background:#0f0f0f; color:#fff;
  display:grid; place-items:center; cursor:pointer;
}

.ba-logo {
  width:38px; height:38px; border-radius:8px; overflow:hidden;
  display:inline-grid; place-items:center;
  background:#111; border:1px solid #1f1f1f; padding:0; cursor:pointer;
}
.ba-logo img { width:100%; height:100%; object-fit:cover; display:block; border:0; }

.ba-row2 { padding:2px 12px 8px 12px; max-width:1100px; margin:0 auto; }
.ba-title { font-weight:700; font-size:16px; }

/* Back-compat (older header classes) — safe aliases */
.ba-header { position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid #111; background: #000; backdrop-filter: saturate(140%) blur(6px); }
.ba-header-inner { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 12px; max-width: 1100px; margin: 0 auto; }
.ba-brand { display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; }
.ba-brand-img { width:28px; height:28px; border-radius:6px; }
.ba-brand-text { font-weight: 700; letter-spacing:.2px; }
.ba-spacer { flex: 1; }
.ba-icon {
  border: 1px solid #222; background:#111; color:#fff;
  border-radius: 10px; width: 36px; height: 36px;
  display: grid; place-items: center; cursor: pointer;
}

/* ================================
   Bottom Tab Bar (matches ui.js: mountTabBar / 5 tabs)
   ================================ */
.ba-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background:#000; border-top:1px solid #111;
  display:grid; grid-template-columns: repeat(5, 1fr);
  padding:6px 8px max(8px, env(safe-area-inset-bottom));
  gap:6px;
}
.ba-tab {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 0; color:#9aa0a6; text-decoration:none; font-size:11px;
}
.ba-tab svg { width:22px; height:22px; display:block; }
.ba-tab.active { color:#fff; font-weight:600; }
.ba-tab.active svg { filter: drop-shadow(0 0 0.25rem rgba(255,255,255,.18)); }

/* Back-compat (older class name) */
.ba-has-tabbar .wrap { padding-bottom: 84px; }

/* ================================
   Buttons (lightweight)
   ================================ */
.btn {
  border:1px solid #2a2a2a; background:#121212; color:#fff;
  border-radius:999px; padding:8px 12px; cursor:pointer; text-decoration:none;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.primary { background:#1a62ff; border-color:#295cff; }
.btn.danger  { background:#7d1414; border-color:#a11e1e; }
.btn.warn    { background:#a05a00; border-color:#b96c0a; }

/* ================================
   Chips (used for Gossip tags)
   ================================ */
.chips { display:flex; gap:8px; overflow:auto; padding:6px 0; }
.chip {
  padding:6px 10px; border-radius:16px; background:#333; color:#fff;
  white-space:nowrap; border:1px solid transparent; cursor:pointer;
}
.chip.active { background:#0a5cff; border-color:#1a6bff; }

/* ================================
   Media rules
   ================================ */
/* RSS and Events thumbnails: card tiles should stay visually filled */
.rss-img { width:100%; height:180px; object-fit:cover; border-radius:12px; background:#1a1a1a; }

/* User posts in Gossip: show the entire image (no harsh crop) */
.user-post img,
.user-post video {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  background: #0b0b0b;
  border-radius: 12px;
}

/* If you prefer attribute targeting instead of a class, you can use:
#feed [data-kind="userpost"] img,
#feed [data-kind="userpost"] video { ...same as above... }
*/

/* Generic muted text helper */
.muted { color:#a5a5a5; }

/* --- Fallback: make Gossip user-post images fit even if JS still uses .rss-img --- */
.user-post .rss-img {
  width: 100%;
  height: auto !important;
  max-height: 70vh;
  object-fit: contain !important;
  background: #0b0b0b;
  border-radius: 12px;
}

/* --- No-crop image/video overrides (put LAST in styles.css) --- */
.rss-img,
.card .img,
.media-preview img,
.media-preview video {
  width: 100% !important;
  height: auto !important;                 /* beat any fixed heights */
  max-height: min(70vh, 640px) !important; /* keep it on-screen */
  object-fit: contain !important;          /* no harsh crop */
  object-position: center center !important;
  background: #0d0d0d;
  border-radius: 12px;
}

/* Some videos in gossip had inline style="height:200px" */
video.rss-img { height: auto !important; max-height: min(70vh, 640px) !important; }

/* If a card forces a fixed-height image (events list), un-force it */
.card .img { height: auto !important; }

/* Optional: keep layout tidy without cropping
   (If you want strict 16:9 boxes, comment this out) */
/*
.rss-img,
.card .img {
  aspect-ratio: auto !important;
}
*/