/* Styles for the live Supabase-backed feed (assets/feed.js).
   Builds on the existing card styles in index.html. */

.card-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

/* Media + depth profile carousel */
.card-carousel {
  position: relative;
  background: #0d1248;
}
.media-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.media-track::-webkit-scrollbar { display: none; }
.media-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(135deg, #6d8ba3 0%, #3d5a75 100%);
}
.media-slide img,
.media-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-carousel.chart-only .media-slide { aspect-ratio: 360 / 280; }
.media-slide.profile-slide { aspect-ratio: 4 / 5; background: #071a35; }
.card-carousel.chart-only .media-slide.profile-slide { aspect-ratio: 360 / 280; }
.profile-svg { width: 100%; height: 100%; display: block; }
.profile-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  letter-spacing: 0.5px;
}
.profile-slide .chart-pill.top-right small { display: block; }

/* Read-only social */
a.reaction-add { text-decoration: none; cursor: pointer; opacity: 0.8; }
a.reaction-add:hover { opacity: 1; }
.footer-action.live-action {
  opacity: 1;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-secondary);
}
.footer-action.live-action:hover { background: var(--card-bg); color: var(--navy); }
.count-badge {
  background: #eef1f7;
  color: var(--navy);
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 4px;
  font-weight: 700;
  font-size: 10px;
}

.dive-site-link { color: inherit; text-decoration: none; }
.dive-site-link:hover { text-decoration: underline; }

/* Feed states */
.feed-message {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-secondary);
  font-size: 15px;
}
.feed-message a { color: var(--navy); font-weight: 700; }
.load-more {
  display: block;
  margin: 12px auto 40px;
  padding: 12px 28px;
  border-radius: 100px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.load-more:hover { opacity: 0.92; }
.load-more:disabled { opacity: 0.6; cursor: default; }

.stats-row[hidden], .feed-message[hidden], .load-more[hidden], .single-back[hidden],
.filter-tabs[hidden], .filter-pills[hidden], .feed-header[hidden] { display: none !important; }

/* Single dive page */
.single-back {
  display: inline-block;
  margin: 0 0 16px;
  color: var(--navy);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.single-back:hover { text-decoration: underline; }
body.single-dive .feed-columns { column-count: 1; max-width: 520px; margin: 0 auto; }

/* Anonymous commenter avatar: whale */
.comment-avatar.anon-avatar {
  background: #0d1248 url('/assets/Whale.png') center / cover no-repeat;
}

/* "Anon diver" hover window for privacy-opted-out commenters */
.anon-handle {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: 1px dotted currentColor;
  outline: none;
}
.anon-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 220px;
  background: var(--navy);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 20;
}
.anon-handle:hover .anon-tip,
.anon-handle:focus .anon-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}