/* Friends: the incoming request prompt and the list panel.

   Deliberately warmer than party.css (amber, not blue) so a friend request is
   never mistaken for a party invite at a glance. */

.friend-invite {
  position: fixed;
  left: 50%;
  top: 96px;
  transform: translateX(-50%);
  z-index: 2147483000;
  min-width: 340px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(14, 14, 22, .97);
  border: 1px solid rgba(251, 191, 36, .38);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(251, 191, 36, .22);
  color: #eef2ff;
  font: 600 15px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
  animation: friend-invite-in 220ms ease-out;
}
@keyframes friend-invite-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.friend-invite-title { font-size: 17px; margin-bottom: 4px; }
.friend-invite-title b { color: #fbbf24; }
.friend-invite-sub { color: #9fb6c9; font-size: 12px; margin-bottom: 12px; }
.friend-invite-row { display: flex; gap: 10px; }
.friend-invite-row button {
  flex: 1;
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
  color: #fff;
}
.friend-invite-accept { background: linear-gradient(180deg, #f59e0b, #d97706); }
.friend-invite-reject { background: rgba(255, 255, 255, .12); }
.friend-invite-row button:hover { filter: brightness(1.12); }

/* The list. Right side, opposite the party roster, so both can be open at once. */
.friend-panel {
  position: fixed;
  right: 14px;
  top: 120px;
  z-index: 2147482000;
  width: 300px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: rgba(14, 14, 22, .95);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #eef2ff;
  font: 600 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  pointer-events: auto;
}
.friend-panel[hidden] { display: none; }
.friend-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: #fbbf24;
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.friend-panel-close {
  border: 0;
  border-radius: 7px;
  padding: 2px 9px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: 700 14px/1 system-ui, sans-serif;
  cursor: pointer;
}
.friend-add { display: flex; gap: 6px; margin-bottom: 8px; }
.friend-add-input {
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #eef2ff;
  font: 600 12px/1 system-ui, sans-serif;
}
.friend-add button {
  border: 0;
  border-radius: 8px;
  padding: 7px 12px;
  background: linear-gradient(180deg, #f59e0b, #d97706);
  color: #fff;
  font: 700 12px/1 system-ui, sans-serif;
  cursor: pointer;
}
.friend-section {
  margin: 8px 0 4px;
  color: #9fb6c9;
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.friend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.friend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Offline friends are dimmed rather than hidden — an empty-looking list reads as
   a bug, and you still want to remove someone who is offline. */
.friend-row:not(.is-online):not(.is-request) { opacity: .5; }
.friend-row.is-online .friend-name::before { content: "● "; color: #22c55e; font-size: 10px; }
.friend-where { color: #9fb6c9; font-size: 11px; white-space: nowrap; }
/* Actions sit on their own line: five buttons beside a name is unreadable at
   300px, and the panel must not grow wider than the play area allows. */
.friend-acts { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 0 6px; }
.friend-acts button {
  border: 0;
  border-radius: 7px;
  padding: 4px 8px;
  background: linear-gradient(180deg, #22c55e, #16a34a);
  color: #fff;
  font: 600 11px/1 system-ui, sans-serif;
  cursor: pointer;
}
.friend-acts button.is-quiet { background: rgba(255, 255, 255, .12); }
.friend-acts button:hover { filter: brightness(1.12); }
.friend-empty { color: #9fb6c9; font-size: 12px; padding: 8px 0; font-weight: 500; }

/* Consent for "Join their world". Default on — it is what makes the friends list
   a discovery surface rather than a contact list. */
.friend-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  color: #9fb6c9;
  font-size: 11px;
  font-weight: 500;
}
.friend-foot label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.friend-foot input { accent-color: #f59e0b; cursor: pointer; }

/* Party and whisper lines in the chat log, coloured apart from room chat so a
   private message is never mistaken for a public one. */
.chat-history-item.is-party .chat-history-name { color: #7dd3fc; }
.chat-history-item.is-whisper .chat-history-name { color: #f0abfc; }
.chat-history-item.is-whisper .chat-history-text { font-style: italic; }

/* On a phone the 300px panel collides with the party roster on the left. Narrow
   it and drop it below the roster rather than letting the two overlap. */
@media (max-width: 700px) {
  .friend-panel {
    width: auto;
    left: 14px;
    right: 14px;
    top: auto;
    bottom: 96px;
    max-height: 46vh;
  }
}