/* ===== Shared Saves — Friend Profile popup (friendProfileModal.js) =====
   Reuses the shared .modal/.modal-overlay base (addEditModal.css) — this file only overrides what
   genuinely differs: no padding on .modal itself (each internal section manages its own), fixed
   440px width (a profile card, not a form), and everything below the banner. Uses the theme CSS
   variables (base.css) throughout, not literal hex, so it renders correctly in both light and dark
   mode — unlike the single-theme design draft this was built from. */

.modal.friend-profile-modal {
  width: 440px;
  padding: 0;
  overflow: hidden;
}

.friend-profile-banner {
  position: relative;
  height: 64px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  flex-shrink: 0;
}

.friend-profile-identity {
  padding: 0 20px 16px;
  position: relative;
}

.friend-profile-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--modal-bg);
  margin-top: -42px;
  display: block;
  background: var(--hover-bg);
}
.friend-profile-avatar--letter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
}

.friend-profile-id-row {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.friend-profile-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
/* Only demo friends with their own page (renderFriendPage.js) get this -- the "preview your own
   public profile" caller (profile.js) never does, since there's no page to link to. */
.friend-profile-name--linkable {
  cursor: pointer;
  transition: color 0.15s;
}
.friend-profile-name--linkable:hover {
  color: var(--primary);
}
.friend-profile-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Moved into the banner's top-right corner (same spot the removed X close button used to sit),
   per direct request -- tap-away/Escape are the only ways to close the popup now, so this is the
   banner's one remaining control.
   REAL BUG, found and fixed: the avatar's own -42px top margin (below) collapses through
   .friend-profile-identity's box (no padding-top to block it), pulling that whole section up to
   overlap the banner's bottom ~42px -- harmless at the old 96px banner height (the overlap landed
   well below the X close button), but the shorter 64px banner (per an earlier direct request)
   brought that overlap up into the kebab button's own footprint, so .friend-profile-identity
   silently intercepted clicks on it (reported live: "the three dot drop down is no longer
   working"). z-index here keeps the kebab clickable regardless of that geometric overlap, without
   touching the avatar's own deliberate straddle-the-banner positioning. */
.friend-profile-kebab-wrap {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
.friend-profile-kebab-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.friend-profile-kebab-btn:hover { background: rgba(0, 0, 0, 0.35); }

.friend-profile-menu {
  position: absolute;
  top: 40px;
  right: 0;
  width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px var(--shadow-modal);
  z-index: 20;
}
.friend-profile-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}
.friend-profile-menu-item:hover { background: var(--hover-bg); }
.friend-profile-menu-item--danger { color: #E57373; }
/* Self-dismissing tooltip (_showNotAvailableTooltip, friendProfileModal.js) -- same spot the
   kebab menu itself opens into (top: 40px; right: 0), shown after a menu item is clicked for one
   of the four not-yet-built actions. */
.friend-profile-kebab-tooltip {
  position: absolute;
  top: 40px;
  right: 0;
  width: max-content;
  max-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  box-shadow: 0 8px 24px var(--shadow-modal);
  z-index: 20;
  animation: friend-profile-kebab-tooltip-fade 1.8s ease forwards;
}
@keyframes friend-profile-kebab-tooltip-fade {
  0%, 75% { opacity: 1; }
  100% { opacity: 0; }
}
.friend-profile-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}

.friend-profile-cta-wrap { margin-top: 14px; }
.friend-profile-cta-share {
  width: 100%;
  /* Shorter than the shared .btn-primary base (9px vertical, addEditModal.css) -- scoped to just
     this button, not the shared class every other modal's buttons still use at their normal size. */
  padding: 7px 16px;
  font-size: 13px;
}

.friend-profile-tabs {
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.friend-profile-tab-bar {
  display: flex;
  padding: 0 20px;
}
.friend-profile-tab {
  padding: 12px 0;
  margin-right: 24px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
}
.friend-profile-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--primary);
}

.friend-profile-tab-body {
  padding: 12px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.friend-profile-empty {
  padding: 20px 0;
  text-align: center;
}
.friend-profile-empty p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.friend-profile-row {
  background: var(--hover-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.friend-profile-row-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.friend-profile-row-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.friend-profile-row-badge {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.friend-profile-row-text {
  min-width: 0;
  flex: 1;
}
.friend-profile-row-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.friend-profile-row-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-secondary);
}
/* Collapsed accordion rows (.friend-profile-row) hide the meta line entirely -- per direct
   request. Scoped to .friend-profile-row specifically so it doesn't touch
   .friend-profile-connection-row, which reuses the same .friend-profile-row-meta class for its
   own (always-visible, non-expandable) platform label. */
.friend-profile-row:not(.friend-profile-row--expanded) .friend-profile-row-meta {
  display: none;
}
.friend-profile-row-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.15s;
}
.friend-profile-row--expanded .friend-profile-row-chevron { transform: rotate(90deg); }

.friend-profile-role {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--hover-bg);
  color: var(--text-secondary);
}
.friend-profile-role--editor {
  background: var(--primary-bg);
  color: var(--primary);
}

.friend-profile-row-expand {
  padding: 0 12px 12px;
}
.friend-profile-open-btn { width: 100%; }

.friend-profile-connections {
  padding: 4px 20px 20px;
  border-top: 1px solid var(--border);
}
.friend-profile-connections-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Same top breathing room the removed "Connections" label used to provide between this list
     and the divider above, per direct request to drop the label itself. */
  margin-top: 16px;
}
.friend-profile-connection-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--hover-bg);
  border-radius: 10px;
  padding: 9px 12px;
}
.friend-profile-connection-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}