/* Dark Mage of Mossfen — parties and friends (v1.61, ui/social.js, ui/player-menu.js): the Party & Friends window, the
   requests that ask you, and the menu a right-click on another player opens. Same look as the Bag and the trade window.
   Party green for what is shared; nothing flashes. */
:root { --party: #8fe39a; --friend: #ffd27a; }

/* ---- the window (on the right, where the Bag sits) ------------------------------------------- */
#social {
  top: 12px; right: 12px; z-index: 5;
  width: min(380px, calc(100% - 24px));
  max-height: calc(100% - 100px);
  overflow-y: auto;
  padding: 10px 14px 12px;
}
#social header { align-items: center; }
.social-tabs button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.social-tabs kbd { font: 400 11px/1 var(--f-num); opacity: 0.6; }
.social-count { font: 400 12px/1 var(--f-num); letter-spacing: 0; }
.social-count:empty { display: none; }

.social-share {
  margin: 4px 0 8px; padding: 7px 10px; border-radius: 4px;
  font-size: 13.5px; line-height: 1.35; color: var(--ink-dim);
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--edge);
}
.social-share.is-on { color: var(--party); border-color: color-mix(in srgb, var(--party) 45%, transparent); background: rgba(80, 160, 90, 0.1); }
.social-share.is-off { color: var(--ink-dim); }

.social-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.soc-row {
  display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 4px;
  background: rgba(0, 0, 0, 0.22); border: 1px solid transparent;
}
.soc-row:hover { border-color: var(--edge); }
.soc-dot { width: 8px; height: 8px; border-radius: 50%; background: #4a4f47; box-shadow: 0 0 0 1px #000; }
.soc-row.is-here .soc-dot { background: var(--party); box-shadow: 0 0 0 1px #000, 0 0 6px color-mix(in srgb, var(--party) 55%, transparent); }
.soc-row.is-online .soc-dot { background: #6fb3ff; }
.soc-row.is-offline { opacity: 0.78; }
.soc-main { min-width: 0; display: grid; gap: 2px; }
.soc-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; font: 700 15px/1.15 var(--f-display); letter-spacing: 0.03em; }
.soc-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-name small { font: 500 11px/1 var(--f-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.soc-crown { font-style: normal; color: var(--exp); font-size: 13px; }
.soc-row.is-me .soc-name b { color: #ffe9a8; }
.soc-sub { font-size: 12.5px; line-height: 1.3; color: var(--ink-faint); overflow-wrap: anywhere; }
.soc-row.is-here .soc-sub, .soc-row.is-online .soc-sub { color: var(--ink-dim); }
.soc-hp { --c: var(--hp); height: 5px; margin-top: 2px; }
.soc-btns { display: flex; gap: 4px; }
.soc-btn {
  padding: 5px 8px; border-radius: 4px; cursor: pointer;
  font: 700 12px/1 var(--f-display); letter-spacing: 0.04em; color: var(--ink);
  background: rgba(243, 214, 138, 0.08); border: 1px solid var(--edge);
}
.soc-btn:hover, .soc-btn:focus-visible { border-color: var(--edge-strong); background: rgba(243, 214, 138, 0.16); outline: none; }
.soc-btn.is-quiet { color: var(--ink-faint); background: transparent; }
.soc-btn.is-confirming { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }

.social-add { display: flex; gap: 6px; margin: 10px 0 0; }
.social-pane[data-pane="friends"] .social-add { margin: 4px 0 8px; }
.social-add input {
  flex: 1 1 auto; min-width: 0; padding: 7px 9px; border-radius: 4px;
  font: 500 14px/1.2 var(--f-body); color: var(--ink);
  background: #0b0f0c; border: 1px solid var(--edge); -webkit-user-select: text; user-select: text;
}
.social-add input:focus { outline: none; border-color: var(--edge-strong); }
.social-add .sk-upgrade { padding: 7px 12px; }
.social-leave { display: block; }
.friend-note { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-faint); }

/* ---- the requests (top middle, under a trade's when both show) -------------------------------- */
#social-ask {
  top: 72px; left: 50%; transform: translateX(-50%); z-index: 7;
  width: min(340px, calc(100% - 24px));
  padding: 10px 14px 12px; display: grid; gap: 12px;
}
body:has(#trade-ask:not([hidden])) #social-ask { top: 168px; }
#social-ask p { margin: 0 0 8px; font-size: 15px; }
#social-ask p b { color: #ffe9a8; }
.ask-row + .ask-row:not([hidden]) { padding-top: 10px; border-top: 1px solid var(--edge); }

/* ---- right-click on another player ----------------------------------------------------------- */
#player-menu {
  position: fixed; z-index: 8; display: grid; gap: 2px;
  width: 224px; padding: 0 0 6px; overflow: hidden;
  background: rgba(17, 23, 19, 0.95);
}
.pm-head {
  display: grid; gap: 3px; padding: 10px 12px 9px; margin-bottom: 4px;
  background: linear-gradient(rgba(243, 214, 138, 0.1), transparent); border-bottom: 1px solid var(--edge);
}
.pm-name { font: 700 17px/1.1 var(--f-display); letter-spacing: 0.03em; color: #ffe9a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-meta { font: 500 13px/1 var(--f-display); letter-spacing: 0.04em; color: var(--ink-dim); }
.pm-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.pm-tag {
  padding: 2px 7px; border-radius: 10px; font: 700 11px/1.3 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid currentColor; background: rgba(0, 0, 0, 0.3);
}
.pm-tag.is-friend { color: var(--friend); }
.pm-tag.is-party { color: var(--party); }
.pm-item {
  display: flex; align-items: center; gap: 10px; margin: 0 6px; padding: 7px 8px; border-radius: 4px;
  border: 1px solid transparent; background: none; cursor: pointer; text-align: left;
  font: 700 14.5px/1.15 var(--f-display); letter-spacing: 0.03em; color: var(--ink);
}
.pm-item svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--edge-strong); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pm-item span { display: grid; gap: 2px; }
.pm-item small { font: 500 12px/1.2 var(--f-body); letter-spacing: 0; color: var(--ink-faint); }
.pm-item:hover:not(:disabled), .pm-item:focus-visible { background: rgba(243, 214, 138, 0.1); border-color: var(--edge); outline: none; }
.pm-item:hover:not(:disabled) svg, .pm-item:focus-visible svg { stroke: #f3d68a; }
.pm-item:disabled { cursor: default; color: var(--ink-faint); }
.pm-item:disabled svg { stroke: var(--ink-faint); opacity: 0.6; }
.pm-item.is-quiet { color: var(--ink-dim); }
.pm-item[data-act="invite"] svg { stroke: var(--party); }
.pm-item[data-act="friend"] svg { stroke: var(--friend); }
.pm-item:disabled[data-act] svg { stroke: var(--ink-faint); }

/* ---- in the world ---------------------------------------------------------------------------- */
#scene.is-over-player { cursor: context-menu; }                /* another player under the pointer: right-click for more */
.unit-player.is-party .unit-name { color: var(--party); }      /* your party's names over their heads */
.unit-player.is-hovered .unit-name { text-shadow: 0 0 6px rgba(255, 233, 168, 0.7), 0 1px 2px #000; }
#log .tone-party { color: var(--party); }                       /* what your party says (/p) */
.bar-btn#social-btn.has-party { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--party) 70%, transparent); }
body.social-open #help, body.social-open #quest-track { visibility: hidden; }

@media (max-width: 760px) {
  #social { top: 12px; bottom: 84px; max-height: none; }
  #social-ask { top: 150px; }
  body:has(#trade-ask:not([hidden])) #social-ask { top: 246px; }
}
@media (max-width: 420px) {
  #social-btn { display: none; }                               /* the key bar is full: Party & Friends is in the menu (≡) */
}