/* ──────────────────────────────────────────────────────────
   Friends feature styles — /friends page, profile action button,
   account popover badge, invite-accept landing page.
   ────────────────────────────────────────────────────────── */

/* ── /friends full screen ─────────────────────────────── */
/* Override the global `.screen` flex-centering (see stats.css /
   CLAUDE.md for the pattern). Top-anchored flex-column keeps the
   header pinned to the top regardless of body height.
   flex-direction: column is required here because #screen-friends
   has multiple direct children (header / search / tabs / body);
   containers with a single child wrapper don't need it.
   align-items: stretch (the default) is left implicit so children
   span full width and their own max-width: 720px + margin: 0 auto
   rules can centre them. */
#screen-friends {
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  padding: clamp(12px, 3vw, 32px);
  box-sizing: border-box;
}

.friends-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
}

.friends-back {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.friends-back:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.friends-title {
  font-family: var(--font-pixel);
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--text);
  margin: 0;
}

.friends-tabs {
  display: flex;
  gap: clamp(0px, 0.5vw, 4px);
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0;
  /* Horizontal scroll is a fallback — the fluid tab sizing above
     should fit all four tabs on any viewport ≥ ~360px. Kept in case
     future tabs push past that. */
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
}
.friends-tabs::-webkit-scrollbar { height: 4px; }
.friends-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.friends-tab {
  font-family: var(--font-pixel);
  /* Fluid sizing: 8px at 360px viewport, 10px at 720px+. clamp keeps
     the Press Start 2P label legible on desktop without letting it
     overflow the four-tab row on phones. */
  font-size: clamp(8px, 2.2vw, 10px);
  letter-spacing: 0.5px;
  padding: 8px clamp(6px, 2vw, 14px);
  background: transparent;
  color: var(--text-dim);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.friends-tab:hover {
  color: var(--text);
}
.friends-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Numeric pill appended to the tab label when a count is relevant
   (e.g. Pending gets a friend-request count from the notifications
   poller). Hidden when empty via the .hidden utility. */
.friends-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 8px;
  background: var(--accent);
  color: #08110d;
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 1;
  vertical-align: middle;
}
.friends-tab-badge.hidden { display: none; }

.friends-body {
  max-width: 720px;
  margin: 0 auto;
}

.friends-subhead {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin: 20px 0 10px;
}
.friends-subhead:first-child { margin-top: 0; }

/* Soft contextual helper at the top of a tab. Less heavy than a
   subhead — one line of grey, no border. */
.friends-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 12px;
  font-family: var(--font-mono);
  line-height: 1.4;
}

.friends-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease;
  min-width: 0;
}
.friend-row:hover { border-color: var(--text-dim); }

/* Ensure the left chip can shrink so the button stays inline on
   narrow viewports (instead of the chip pushing the action button
   onto its own line and doubling the row height). */
.friend-row-link { min-width: 0; }

.friend-row-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.friend-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface2);
  object-fit: cover;
  flex-shrink: 0;
}
.friend-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 14px;
  color: var(--text-dim);
  text-transform: uppercase;
}

.friend-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.friend-row-name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-row-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Optional third line in a friend row — used for play-invite
   messages so the room code line stays untouched. Italic + even
   dimmer keeps it visually secondary. */
.friend-row-message {
  font-style: italic;
  opacity: 0.75;
  max-width: 100%;
}

.friend-presence-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  opacity: 0.5;
  flex-shrink: 0;
}
.friend-presence-dot.online {
  background: var(--accent);
  opacity: 1;
  box-shadow: 0 0 8px var(--accent);
  /* Gentle pulse to signal "live now". */
  animation: friend-pulse 1.8s ease-in-out infinite;
}
@keyframes friend-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.75; }
}

.friend-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

/* "Played before" signal — a compact pill that slots between the
   user text and the action buttons. Shown on Search results and on
   the dedicated "Played with" tab. Count is optional; absence of
   count still renders just the icon. */
.friend-row-played {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 229, 160, 0.08);
  border: 1px solid rgba(0, 229, 160, 0.25);
  white-space: nowrap;
  flex-shrink: 0;
}
.friend-row-played-icon { font-size: 11px; }

.friend-row-mutual {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #7ec8e3;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(126, 200, 227, 0.08);
  border: 1px solid rgba(126, 200, 227, 0.25);
  white-space: nowrap;
  flex-shrink: 0;
}
.friend-row-mutual-icon { font-size: 11px; }

/* ── Action buttons (profile + rows) ─────────────────── */
.friend-action {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  transition: all 0.15s ease;
  line-height: 1.2;
}
.friend-action:hover {
  border-color: var(--text-dim);
  color: var(--accent);
}
.friend-action-primary {
  background: var(--accent);
  color: #08110d;
  border-color: var(--accent);
}
/* Keep the dark-on-mint contrast on hover — the generic
   .friend-action:hover rule above switches `color` to var(--accent),
   which would vanish against the primary button's accent background. */
.friend-action-primary:hover {
  box-shadow: var(--glow);
  color: #08110d;
}

.friend-action-accept {
  background: rgba(0, 229, 160, 0.12);
  color: var(--accent);
  border-color: var(--accent);
}

.friend-action-friends {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0, 229, 160, 0.08);
}

.friend-action-pending {
  color: #f0b542;
  border-color: #f0b542;
  background: rgba(240, 181, 66, 0.08);
}

.friend-action-blocked,
.friend-action-danger {
  color: #ff5478;
  border-color: #ff5478;
  background: rgba(255, 84, 120, 0.08);
}

.friend-action-secondary {
  color: var(--text-dim);
}

/* ── Promoted search bar (above the tabs) ───────────── */
/* Search is a top-level action, not a buried tab. Sits directly
   under the header and takes over the body whenever it has input.
   Clearing restores the tab bar + last-viewed tab content. */
.friends-search-bar {
  position: relative;
  display: flex;
  max-width: 720px;
  margin: 0 auto 12px;
}

.friends-search-input,
.friends-search-input-top {
  width: 100%;
  padding: 10px 38px 10px 14px;  /* right padding reserves room for ✕ */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.friends-search-input:focus,
.friends-search-input-top:focus {
  border-color: var(--accent);
}
.friends-search-input::placeholder,
.friends-search-input-top::placeholder {
  color: var(--text-dim);
  opacity: 0.5;
}

.friends-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.friends-search-clear:hover {
  color: var(--accent);
  background: var(--border);
}
.friends-search-clear.hidden { display: none; }

/* Hide the tabs while searching — the body shows results and the
   tabs would be noise. Restored on clear. */
.friends-tabs.hidden { display: none; }

.friends-search-results:empty::after {
  content: 'No matches';
  display: block;
  padding: 24px;
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.5;
  font-family: var(--font-mono);
}

/* ── Invite-by-email card (top of Friends tab) ────────── */
/* Empty-state CTA for users with no friends, and a secondary
   discovery tool when they do. Sits at the top of the body. */
.friend-email-invite-card {
  padding: clamp(10px, 2vw, 16px);
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.friend-email-invite-card .friends-subhead { margin-top: 0; }

.friend-email-invite-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
}
.friend-email-invite-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.friend-email-invite-input:focus { border-color: var(--accent); }
.friend-email-invite-input::placeholder {
  color: var(--text-dim);
  opacity: 0.5;
}

.friend-email-invite-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  min-height: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
}
.friend-email-invite-status:empty { margin-top: 0; }
.friend-email-invite-ok { color: var(--accent); }
.friend-email-invite-err { color: #ff5478; }

.friend-email-invite-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.friend-email-invite-list:empty { display: none; }

.friend-email-invite-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
}
.friend-email-invite-email {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-email-invite-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  /* On narrow viewports, let the meta row wrap underneath the email
     rather than eating the revoke button's space. */
  .friend-email-invite-row { flex-wrap: wrap; }
  .friend-email-invite-meta { flex-basis: 100%; order: 3; }
}

/* ── Profile action slot (on /u/:username) ───────────── */
.stats-profile-action-slot {
  margin-left: auto;
  display: flex;
  align-items: center;
}
.friend-action-wrap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Account-popover friends badge ────────────────────── */
.account-popover-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.account-popover-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #08110d;
  font-family: var(--font-pixel);
  font-size: 9px;
  line-height: 1;
}

/* ── Invite accept landing page ──────────────────────── */
/* Same override pattern as #screen-friends — top-anchored flex-
   column so the card sits in a sane spot on tall content, while the
   inner container's own max-width + margin: 0 auto still centres. */
#screen-invite-accept {
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  padding: clamp(12px, 3vw, 32px);
  box-sizing: border-box;
}
.invite-accept-container {
  max-width: 420px;
  margin: clamp(24px, 8vh, 64px) auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}
.invite-accept-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.invite-accept-body img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface2);
}
.invite-accept-body .invite-accept-message {
  color: var(--text-dim);
  font-size: 13px;
}

/* ── Play-invite toast ────────────────────────────────── */
.play-invite-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), var(--glow);
  max-width: 320px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: toast-in 0.25s ease-out;
}
@keyframes toast-in {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.play-invite-toast-header {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--accent);
  text-transform: uppercase;
}
.play-invite-toast-body {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
}
.play-invite-toast-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}