/* ── Socials tab: feed-item styles (post-related sizing handled by pages/home.css) ── */
@keyframes slideInPost { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:translateY(0); } }
.tab-posts .feed-item.post-new { animation:slideInPost 0.35s cubic-bezier(0.22,1,0.36,1) both; }
.tab-posts .feed-list { display:flex; flex-direction:column; gap:20px; }
.tab-posts .post-media img { max-height:380px; box-shadow:0 4px 15px rgba(0,0,0,0.3); }
.tab-posts .post-media video { max-height:380px; box-shadow:0 4px 15px rgba(0,0,0,0.3); }

/* Match feed: avatar is a perfect circle on profile too (overrides mobile.css's 10px rounded-square) */
.tab-posts .feed-item .post-avatar,
.tab-posts .feed-item .post-avatar img,
.tab-posts .feed-item .post-avatar .feed-post-avatar-img,
.tab-posts .feed-item .post-avatar .feed-post-default-avatar,
.tab-posts .feed-item .post-avatar .default-avatar {
  border-radius: 50% !important;
}
/* Make sure the image actually fills the avatar circle (no inner padding/margin causing inset) */
.tab-posts .feed-item .post-avatar { padding: 0 !important; overflow: hidden !important; }
.tab-posts .feed-item .post-avatar img,
.tab-posts .feed-item .post-avatar .feed-post-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile: match feed behavior — no header wrap, all 6 action icons visible, small buttons */
@media (max-width: 700px) {
  /* Header: no wrap. Username truncates with ellipsis. Date + flag stay inline on the right. */
  .tab-posts .feed-item .post-header { flex-wrap: nowrap !important; }
  .tab-posts .feed-item .post-header .post-meta { flex: 1 1 0 !important; min-width: 0 !important; }
  .tab-posts .feed-item .post-header .post-user { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tab-posts .feed-item .post-header .feed-header-right { margin-left: auto !important; flex-shrink: 0 !important; flex-basis: auto !important; }

  /* Action bar: override mobile.css forcing big-padded buttons + horizontal scroll. Keep feed's compact icon row. */
  .tab-posts .feed-item .post-actions.feed-actions-bar {
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
    overflow: visible !important;
    gap: 2px !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .tab-posts .feed-item .post-actions.feed-actions-bar .feed-reaction-group { gap: 4px !important; flex-shrink: 0 !important; }
  .tab-posts .feed-item .post-actions.feed-actions-bar .feed-reaction-pair { gap: 1px !important; flex-shrink: 0 !important; }
  .tab-posts .feed-item .post-actions.feed-actions-bar button {
    min-height: auto !important;
    min-width: auto !important;
    padding: 1px 2px !important;
    font-size: 13px !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
  }
  .tab-posts .feed-item .post-actions.feed-actions-bar .feed-count { font-size: 10px !important; }
  /* Last button (share) right-anchored — make sure it doesn't bleed past the post's right padding */
  .tab-posts .feed-item .post-actions.feed-actions-bar .feed-reaction-group:last-child { margin-right: 0 !important; padding-right: 0 !important; }

}

/* Hide the wide date on tiny screens; keep just the flag/edit/delete icon next to the username. */
@media (max-width: 480px) {
  .tab-posts .feed-item .post-time { display: none !important; }
}
/* @mention autocomplete dropdown */
@keyframes mentionFlash {
  0%   { background:rgba(255,105,180,0.0); box-shadow:none; border-color:rgba(255,255,255,0.08); }
  25%  { background:rgba(255,105,180,0.18); box-shadow:0 0 0 3px rgba(255,105,180,0.45); border-color:#ff69b4; }
  100% { background:rgba(255,105,180,0.0); box-shadow:none; border-color:rgba(255,255,255,0.08); }
}
.mention-flash { animation:mentionFlash 0.7s ease-out forwards !important; }
.mention-dropdown { background:#1e1e2e; border:1px solid rgba(255,105,180,0.3); border-radius:10px; max-height:240px; overflow-y:auto; min-width:230px; box-shadow:0 8px 32px rgba(0,0,0,0.75),0 0 0 1px rgba(255,255,255,0.04); padding:6px 0; }
.mention-dropdown-item { display:flex; align-items:center; gap:10px; padding:7px 12px 7px 14px; cursor:pointer; transition:background 0.12s; font-size:0.93em; color:#e2d9f3; border-left:3px solid transparent; }
.mention-dropdown-item:hover { background:rgba(255,255,255,0.06); color:#fff; border-left-color:rgba(255,255,255,0.15); }
.mention-dropdown-item.active { background:rgba(255,105,180,0.2); color:#ff69b4; border-left-color:#ff69b4; font-weight:700; }
.mention-dropdown-item.active span { color:#ff93d6; }
.mention-dropdown-item img { width:32px !important; height:32px !important; max-width:32px !important; max-height:32px !important; border-radius:50%; object-fit:cover; flex-shrink:0; display:block; }
.mention-dropdown-item .mention-avatar-placeholder { width:32px; height:32px; min-width:32px; border-radius:50%; background:linear-gradient(135deg,#ff69b4,#8b00ff); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.85em; color:#fff; flex-shrink:0; }
.mention-link { color:#bf5fff; font-weight:600; text-decoration:none; }
.mention-link:hover { text-decoration:underline; }
/* ── end Socials tab styles ── */

/* Glow effect for Most Loved Albums and Artists titles */
.glow-title {
  color: #ff00ea;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow:
    0 0 8px #ff00ea,
    0 0 16px #ff00ea,
    0 0 24px #ff00ea,
    0 0 40px #ff00ea;
}

.review-row-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.3s ease;
}

.review-row-link:hover .review-row {
  background: rgba(255, 105, 180, 0.05);
  border-color: rgba(255, 105, 180, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.1);
}

/* Activity tab header layout - flex like ratings tab */
.activity-list .activity-list-header {
  display: flex;
  align-items: center;
}

/* Activity tab middle column - type pill and date side by side */
.activity-list .score-cell {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}