/* blusky-feed.css */
#bluskyFeed {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  max-width: 680px;
  margin: 0 auto;
  color: #0f1720;
}

.bls-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(15,23,32,0.04), 0 6px 20px rgba(15,23,32,0.04);
  border: 1px solid rgba(15,23,32,0.04);
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.bls-avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background-image: url('../img/rankless-icon-sm.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: linear-gradient(135deg,#e6edf7,#f3e8ff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #0f1720;
  font-size: 18px;
}

/* visually-hidden for screen readers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.bls-body { flex: 1 1 auto; min-width: 0; }

.bls-header { display:flex; gap:8px; align-items:baseline; margin-bottom:6px; flex-wrap:wrap; }

.bls-name { font-weight:600; line-height:1; font-size:15px; color:#0f1720; }

.bls-handle { color:#6b7280; font-size:13px; line-height:1; }

.bls-time { color:#9ca3af; font-size:13px; line-height:1; margin-left:auto; }

.bls-content { font-size:15px; line-height:1.45; color:#111827; white-space:pre-wrap; margin-bottom:8px; word-break:break-word; padding-right: 1rem; text-align: left;}

.bls-media { display:grid; gap:6px; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:8px; }

.bls-media img { width:100%; height:auto; border-radius:10px; object-fit:cover; display:block; }

.bls-link { display:inline-block; color:#2563eb; text-decoration:none; font-size:14px; margin-top:6px; margin-right: 3rem;}

.bls-empty { text-align:center; color:#6b7280; padding:18px; background:#fbfdff; border-radius:10px; border:1px solid rgba(37,99,235,0.06); }

/* responsive */
@media (max-width:420px) {
  .bls-card { padding:10px; gap:10px; }
  .bls-avatar { width:44px; height:44px; }
  .bls-name { font-size:14px; }
}