/* -- friends and parties -------------------------------------------------------
 * The friends sheet, the party bar and a party offer's card (friends/,
 * party-bar.mjs). The Friends button and its count are in styles.css with
 * the other bar buttons. */

.friend-group { margin-bottom: 1.25rem; }
.friend-group h4 {
  margin: 0 0 .5rem;
  color: var(--muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem;
  border-radius: 12px;
  background: var(--bg-lift-2);
  margin-bottom: .35rem;
}
.friend-row.away { opacity: .62; }
.friend-name { font-weight: 600; }
/* flex:1 here would split growth with the sibling .spacer 50/50 instead of
   letting .spacer alone push the trailing buttons to the edge, the way the
   old bare name span behaved. */
.friend-row .friend-text {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.friend-playing {
  font-size: .76rem;
  color: var(--good, #2fd4a7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dot { width: 9px; height: 9px; border-radius: 50%; background: #4b5468; }
.dot.on { background: var(--good, #2fd4a7); box-shadow: 0 0 8px #2fd4a7; }

.find-results { margin-top: .5rem; }

/* -- the party bar --------------------------------------------------------- */

/* A stack of faces on the left edge, a little above the middle. It was a wide
   strip along the bottom centre, which is where games keep their ability bars
   and shops. Folded it is one avatar wide; `.open` adds the names and the
   buttons. The chat window (bottom left, z 45) opens over it, not under. See
   public/shell/party-bar.mjs. */
.partybar {
  position: fixed;
  left: 0;
  top: 40%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: .3rem;
  max-width: min(15rem, calc(100vw - 1rem));
  padding: .35rem;
  background: color-mix(in srgb, var(--bg-lift) 88%, transparent);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 14px 14px 0;
  box-shadow: 8px 0 30px rgb(0 0 0 / .35);
  z-index: 30;
}
.partybar.shown { display: flex; }
.partybar.open { background: var(--bg-lift); }
.party-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-width: 0;
  min-height: 0;
  padding: .15rem .25rem;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  font-size: .75rem;
  cursor: pointer;
}
.party-toggle:hover { color: var(--text); background: var(--bg-lift-2); }
.partybar.open .party-toggle { justify-content: space-between; padding: .15rem .4rem; }
.party-label { white-space: nowrap; }
.party-caret { font-size: .95rem; line-height: 1; }
.party-member {
  position: relative;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem;
  background: var(--bg-lift-2);
  border-radius: 999px;
  font-size: .88rem;
}
.partybar.open .party-member { padding-right: .55rem; }
/* The face is sized here and not by a house rule: there is none, and a
   player's uploaded picture would otherwise arrive at its own size. */
.partybar .profile-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tile, var(--accent)) 28%, transparent);
  border: 1px solid var(--tile, var(--accent));
  overflow: hidden;
}
.partybar .profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.party-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.party-member.pending { opacity: .6; }
.party-member em { font-style: normal; color: var(--muted); font-size: .75rem; }
.party-member .crown { font-size: .8rem; }
.partybar.open .party-member .kick { margin-left: auto; }
.party-leave { margin-top: .1rem; }
/* Folded: faces only. The crown rides the leader's shoulder so the stack still
   says whose party it is. */
.partybar:not(.open) .party-name,
.partybar:not(.open) .party-member em,
.partybar:not(.open) .kick,
.partybar:not(.open) .party-leave { display: none; }
.partybar:not(.open) .party-member .crown {
  position: absolute;
  top: -.35rem;
  right: -.3rem;
  font-size: .7rem;
  pointer-events: none;
}
.kick {
  background: none;
  border: 0;
  color: var(--muted);
  padding: 0 .1rem;
  font-size: .8rem;
  cursor: pointer;
}
.kick:hover { color: var(--danger); }

/* -- party offers ---------------------------------------------------------- */

/* The card an offer shows on a desktop (friends/offers.mjs). Not drawn on a
   phone: see the end of this file. */
.invite {
  position: fixed;
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 2.5rem);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  background: var(--bg-lift);
  border: 1px solid var(--accent);
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 40;
  animation: rise .25s ease;
}
.invite-actions { display: flex; gap: .4rem; }
.invite .primary { margin: 0; width: auto; }

/* A row's buttons keep their own size: the house's primary button is a
   full-width form button, which in a row pushed Join (and Accept, and Add)
   down and squeezed the name to "wants…". */
.friend-row button { white-space: nowrap; }
.friend-row button.primary { width: auto; margin: 0; }

/* In the sheet, the party and the offers say who and what in grey: green is
   for who is playing what. What an offer is wraps rather than being cut off. */
.party-group .friend-playing, .offers-group .friend-playing { color: var(--muted); }
.offers-group .friend-playing { white-space: normal; }
.party-group .crown { font-size: .9rem; }
.party-group .party-leave { margin-top: .15rem; }
.offers-group .friend-row { border: 1px solid var(--accent); }

/* -- on a phone ----------------------------------------------------------------
 * The query is chat.mjs PHONE_CHAT, written out; keep every copy alike
 * (scripts/shell/notices-phone-check compares them). There nothing waits for
 * an answer over a game: the party bar sat on Warlock's arrows, Delve's
 * buttons and Tower Defense's Quit, and an offer's card on the thumb
 * buttons in the bottom corner (or, moved to the top, on a game's tabs and
 * pause button). Both live under the Friends button in the bar instead, which
 * wears the party's colour while there is one and nudges while an offer
 * waits; the sheet it opens holds the party and the offers. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-height: 540px) {
  .partybar.shown, .notices > .invite { display: none; }
  .friends-button.in-party { border-color: var(--accent); }
  .friends-button.has-offers { border-color: var(--danger); animation: nudge 1.8s ease-in-out infinite; }
}