/* ---- SOCIAL (art/social/SOCIAL_SPEC.md 4.8): the party column and the invite card, the marks on the hero's frame (PVP, leader crown), Amigos / Ignorados / Adicionar um amigo / Grupo, the actions grid's
   world variant and the Interagir bar. The windows reuse the painted arena kit (css/arena.css: .ar-win frame, .ar-head banner, .ar-body, .ar-bar + .ar-btn, .ar-tile class tile + level badge, the list box
   look of #ar-list) and the HUD pieces (hud_plate, hud_tileframe, hud_btn, chat_input); the only new painted art is assets/ui/act_icons.png cells 9 - 11, crown.png and pvp_tag.png (art/social/slice_social.py).
   Prefixes: so- (friends / social), pm- (party member), pa- (Grupo window), pi- (invite card), ib- (interact bar). Never fr- (the talent frame owns .tn .fr), never .ucls / .uname / .pbars on a party row. */

/* ---- the hero's frame marks: pseudo-elements only (ui.js refresh() rewrites #pname's text, a child element would vanish) */
#pframe .uname { position: relative; }
#pframe.pvp .uname { padding-left: 62px; }
#pframe.pvp .uname::before { content: 'PVP'; position: absolute; left: 4px; top: 2px; width: 54px; height: 18px; box-sizing: border-box; text-align: center; font: bold 10px/18px Verdana; letter-spacing: .3px; color: #ffe14a; text-shadow: 0 1px 0 #000, 0 0 2px #000;
  border: solid transparent; border-width: 0 14px; border-image: url(../assets/ui/pvp_tag.png) 0 34 fill / 0 14px / 0 stretch; }   /* the painted crimson plate stretched as a 9-slice, the word is text */
#pframe.lead .uname::after { content: ''; position: absolute; right: 5px; top: 3px; width: 16px; height: 16px; background: url(../assets/ui/crown.png) center / contain no-repeat; }

/* ---- the party column (a SIBLING of #pframe: body.combat #pframe pulses a red drop-shadow that would light the rows); sync() writes top = the bottom of #pframe + 8 px */
#party { position: fixed; left: 8px; top: 118px; width: 236px; z-index: 5; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#pm-rows { display: flex; flex-direction: column; gap: 6px; }
.pm { width: 118px; cursor: pointer; pointer-events: auto; }
.pm-n { display: flex; align-items: center; gap: 3px; height: 16px; overflow: hidden; white-space: nowrap; font: bold 13px/15px Verdana; color: #fff; text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000; }
.pm-n > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pm-b { height: 4px; margin-top: 1px; background: #04060c; box-shadow: 0 0 0 1px #000; } .pm-b i { display: block; height: 100%; width: 100%; transition: width .15s; }
.pm-b.hp i { background: linear-gradient(180deg, #ff8a78, #e3281f 42%, #a5130e); } .pm-b.mp i { background: linear-gradient(180deg, #7db0ff, #2563e8 45%, #17409f); }
.pm.off .pm-n, .pm.dead .pm-n { color: #9aa3ad; } .pm.dead .pm-b.hp i { width: 0; }
#party[data-kind='arena'] .pm { pointer-events: none; cursor: default; }   /* F: an arena row does nothing, so it must not catch the world click (4.4); social_ui sync() sets data-kind */
.so-crown { display: inline-block; flex: none; width: 15px; height: 15px; background: url(../assets/ui/crown.png) center / contain no-repeat; }

/* ---- the invite card: a HUD card, not a window (a .win hides the hotbar and blocks the hotkeys) */
#pinvite { display: none; box-sizing: border-box; width: 236px; padding: 8px 10px 10px; pointer-events: auto; background: linear-gradient(180deg, #172a56, #0d1836); border: 2px solid #c99a2e; border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .7); }
#pinvite.on { display: block; } #pi-txt { margin-bottom: 6px; text-align: center; font: 12px/16px Verdana; color: #fff; text-shadow: 0 1px 0 #000; }
#pi-bar { height: 6px; margin-bottom: 8px; background: #04060c; border: 1px solid #000; } #pi-fill { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #ffe14a, #c99a2e); }
#pi-btns { display: flex; justify-content: space-between; gap: 6px; } #pi-btns .ar-btn { min-width: 96px; }

/* ---- lists: the look of #ar-list (arena.css) */
#so-list, #pa-list { flex: none; height: min(330px, 52vh); overflow-y: auto; overflow-x: hidden; background: linear-gradient(180deg, #0d1a38, #091229); border: 2px solid #4a3716; border-radius: 3px; box-shadow: inset 0 0 12px rgba(0, 0, 0, .8), 0 0 0 1px #000; }
#so-list::-webkit-scrollbar, #pa-list::-webkit-scrollbar { width: 8px; }
#so-list:empty::before, #pa-list:empty::before { content: attr(data-empty); display: block; padding-top: 30px; text-align: center; font: italic 11.5px Verdana; color: #6d80a8; }
.so-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; column-gap: 9px; height: 36px; padding: 0 8px 0 6px; cursor: pointer; color: #fff; text-shadow: 0 1px 0 #000; }
.so-row:nth-child(even) { background: rgba(255, 255, 255, .045); } .so-row:hover { filter: brightness(1.18); } .so-row.sel { background: rgba(110, 140, 220, .28); }
.so-row.me { background: linear-gradient(90deg, #1d7a4b, rgba(47, 178, 106, .35)); }
.so-row .ar-tile { width: 28px; height: 28px; } .so-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: bold 13px Verdana; }
.so-row.off .so-nick { color: #9aa3ad; }                      /* the class tile is NOT dimmed (ref_friends_list.png) */
.so-row.static { cursor: default; } .so-row.static:hover { filter: none; }
#w-friends, #w-party { width: 330px; }
#pa-list { height: min(190px, 40vh); }                       /* a group has at most five members: no empty acre under them */

/* ---- the Adicionar um amigo dialog (a modal over Amigos: .win.modal is z 24, the friends window 22) */
.so-adddlg { width: 285px; } #w-addfriend { top: calc(50% + 7px); }   /* the +7 px keeps its banner clear of the Amigos banner under it now that the dialog is 11 px taller (room for the error and the badge) */
.so-abody { display: flex; flex-direction: column; padding-top: 6px; } .so-abody > * { flex: none; }   /* a column only so that #so-err can sit right under the field: the markup keeps the order of 4.1 (field, #so-sug, #so-err) */
#so-ask { margin: 2px 0 8px; text-align: center; font: 12px/16px Verdana; color: #e6ecff; text-shadow: 0 1px 0 #000; }
.so-input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 4px; font: 14px Verdana; color: #fff; background: #08122a; border: solid transparent; border-width: 13px 16px; border-image: url(../assets/ui/chat_input.png) 30 36 / 13px 16px stretch; outline: none; }
.so-input::placeholder { color: #6d80a8; }
/* the error line sits right under the field (order 1) and keeps room for TWO lines, always (a refusal such as `Jogador "Qwertyuiopasdf" não encontrado.` wraps at 237 px): a line that appears or wraps must never move anything */
#so-err { order: 1; height: 24px; margin-top: 2px; overflow: hidden; text-align: center; font: 11px/12px Verdana; color: #ff9a8a; }
/* the suggestions of the dialog: .so-row rows, smaller. The box keeps the height of SUGGEST_MAX rows (--so-sug-n = SOCIAL.SUGGEST_MAX, pinned by check_social_ui) whether it holds five, one or none, the rows top-aligned:
   the dialog is centred, so a height that follows the list moves the field, CANCELAR and OK under the cursor while the user types */
#so-sug { order: 2; --so-sug-n: 5; margin-top: 5px; padding-bottom: 4px; min-height: calc(var(--so-sug-n) * 28px + 4px); }   /* the 4 px: the last row's level badge hangs below it (without them the body scrolls) */
#so-sug .so-row { height: 28px; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 8px; background: rgba(0, 0, 0, .18); } #so-sug .so-row:nth-child(even) { background: rgba(255, 255, 255, .06); } #so-sug .so-row .ar-tile { width: 24px; height: 24px; }

/* ---- the actions grid: the on-line word in the header strip, the world variant (the world is NOT shaded: ref_actions_grid_world.png), a darker disabled tile with a dim COLOURED icon (the references) */
#pact-state { flex: none; margin-right: 4px; font: bold 10px Verdana; text-shadow: 0 1px 0 #000; } #pact-state.on { color: #7dff9a; } #pact-state.off { color: #ff9d6a; }
body:has(#w-pact.world.open) #mblock { background: none; }
.ar-pact .mgrid button:disabled, .ar-pact .mgrid button:disabled:hover { filter: saturate(.55) brightness(.5); }
.ar-pact .mgrid button .mi.act { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)); }

/* ---- Interagir (F: the structure; the numbers are D): the SAME 64 px bar turns dark chocolate with a gold line, CANCELAR on the LEFT, the painted interact icon centred above the line, NOTHING on the right
   (the knob: `body.interact #bottombar > #menu-btn { display: flex }` brings the Menu button back, `body.interact #menu-btn small { display: none }` drops only its caption) */
#ibar { display: none; }
body.interact #bottombar { background: linear-gradient(180deg, #3a3128, #1b1611); border-top-color: #c99a2e; }
body.interact #bottombar > :not(#ibar) { display: none; }
body.interact #ibar { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
#ib-cancel { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); min-width: 124px; height: 44px; font-size: 13px; pointer-events: auto; border-width: 13px; border-image: url(../assets/ui/hud_btn.png) 40 fill / 13px stretch; }
#ib-cancel:active { transform: translateY(calc(-50% + 1px)); }
#ib-icon { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 8px;
  background: radial-gradient(circle at 50% 38%, #1c2231 0, #070a12 78%); box-shadow: inset 0 0 0 2px #000, 0 2px 5px rgba(0, 0, 0, .7); pointer-events: none; }
#ib-icon::after { content: ''; position: absolute; inset: -3px; background: url(../assets/ui/hud_tileframe.png) center / 100% 100% no-repeat; pointer-events: none; }

/* ---- the trade window (M2, SOCIAL_SPEC 4.6): the painted arena kit again (.ar-win frame, .ar-head banner, .ar-btn, .ar-tile) around two columns, each six of the bag's own tiles (.slot), a gold pill and a status line.
   Prefix tr-. The bag opens BESIDE it in a pick mode (ui.js openTradeBag): the window slides left (.pair), the bag sits on the right (.trpick). Every px is D. */
#w-trade { width: 380px; }
#w-trade.pair { left: calc(50% - 175px); }
#w-bag.trpick { left: calc(50% + 184px); top: 50%; z-index: 23; }
.tr-body { display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
/* the warning plate (hud_plate, the gold-plate style of .ar-plate): the waiting line or TradeView.warn; it keeps its height when empty so nothing moves */
.tr-warn { box-sizing: border-box; flex: none; height: 24px; padding: 0 3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 11.5px/22px Verdana; color: #ff9d6a; text-shadow: 0 1px 0 #000, 0 0 2px #000;
  border: solid transparent; border-width: 0 10px; border-image: url(../assets/ui/hud_plate.png) 0 28 fill / 0 10px / 0 stretch; }
.tr-warn.wait { color: #cfdcff; } .tr-warn:empty { visibility: hidden; }
.tr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tr-col { box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 5px 6px; background: linear-gradient(180deg, #112146, #0a1431); border: 2px solid #4a3716; border-radius: 3px; box-shadow: inset 0 0 9px rgba(0, 0, 0, .6); }
.tr-col.locked { border-color: #c99a2e; box-shadow: inset 0 0 9px rgba(0, 0, 0, .6), 0 0 6px rgba(201, 154, 46, .4); }
.tr-col.accepted { border-color: #4fe07a; box-shadow: inset 0 0 9px rgba(0, 0, 0, .6), 0 0 8px rgba(79, 224, 122, .45); }
.tr-who { align-self: stretch; display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 2px 0 3px; font: bold 12px Verdana; color: #ffe14a; text-shadow: 0 1px 0 #000, 0 0 2px #000; }
.tr-who span { min-width: 0; max-height: 26px; overflow: hidden; line-height: 13px; word-break: break-word; }   /* `Oferta de NOME` wraps to two lines instead of losing the end of the name */
.tr-who .ar-tile { width: 24px; height: 24px; margin-left: 2px; }
.tr-slots { display: grid; grid-template-columns: repeat(3, 48px); grid-auto-rows: 48px; gap: 5px; }
.tr-slot.tr-empty { background: #0b101a; border-color: #3a2f18; box-shadow: inset 0 0 8px #000; cursor: default; }
.tr-slot.tr-empty:hover { border-color: #3a2f18; } .tr-slot.tr-empty.mine { cursor: pointer; } .tr-slot.tr-empty.mine:hover { border-color: #ffd76a; }
.tr-slot .mkic.sack { left: 3px; top: 3px; opacity: .28; pointer-events: none; } .tr-slot.tr-empty.mine:hover .mkic.sack { opacity: .65; }
.tr-slot.dim { opacity: .5; }
.tr-amp { position: absolute; right: 2px; top: 0; z-index: 1; font: bold 10px Verdana; color: #7dff9a; text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000; pointer-events: none; }
.tr-ench { position: absolute; left: 4px; top: 15px; z-index: 1; width: 8px; height: 8px; transform: rotate(45deg); background: linear-gradient(135deg, #e9d1ff, #9a5ae0 55%, #4a2288); border: 1px solid #1a0a33; box-shadow: 0 0 4px #b98cff; pointer-events: none; }
/* the gold pill: the market's .mkprice look; mine is an input (digits only), theirs a number */
.tr-gold { box-sizing: border-box; align-self: stretch; display: flex; align-items: center; gap: 6px; height: 32px; padding: 3px 10px 3px 5px; border: 1px solid #c9a24a; border-radius: 16px;
  background: linear-gradient(180deg, #1a2946, #0a1224); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 4px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .4); }
.tr-gold:focus-within { border-color: #ffe98a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 8px rgba(255, 210, 90, .35); }
.tr-gold .coin { width: 22px; height: 22px; margin: 0; }
.tr-gold input, .tr-gold b { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; padding: 0; margin: 0; background: none; border: none; outline: none; font: bold 15px Verdana; color: #ffd94a; text-align: right; text-shadow: 0 1px 0 #000, 0 0 6px rgba(255, 190, 40, .25); }
.tr-gold input:disabled { color: #8a7a3a; }
/* the status line of a column: Editando / Travado (padlock) / Aceitou (check) / Aguardando... (hourglass) */
.tr-stat { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 5px; height: 22px; font: bold 11px Verdana; color: #cfdcff; text-shadow: 0 1px 0 #000; white-space: nowrap; }
.tr-stat.lock { color: #ffe14a; } .tr-stat.acc { color: #7dff9a; } .tr-stat.wait { color: #ff9d6a; }
.tr-chk { flex: none; width: 18px; height: 18px; background: url(../assets/ui/check.png) center / contain no-repeat; }
#w-trade .ar-btn { min-width: 100px; padding: 0 2px 2px; }
#tr-accept.arm { color: #ffe14a; animation: trarm .5s ease-in-out infinite alternate; }
@keyframes trarm { from { filter: drop-shadow(0 0 0 rgba(255, 225, 74, 0)) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); } to { filter: drop-shadow(0 0 6px rgba(255, 225, 74, .9)) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); } }
/* the quantity box of a stack (the market's #mk-qty with the new id): a dim layer over the window, a click beside the box goes back */
#tr-qty { position: absolute; inset: 0; z-index: 5; display: none; background: rgba(0, 0, 0, .35); }
#tr-qty.open { display: block; }
#tr-qty .mkqbox { top: 96px; }
#tr-q-r { transform: scaleX(-1); }
#tr-q-n { width: 130px; padding: 6px; border: 1px solid #c9a24a; border-radius: 4px; background: #0d1422; color: #fff; font: bold 16px Verdana; text-align: center; }
/* the request card of a trade (data-kind from social_ui syncInvite): the painted Negociar cell (act_icons cell 4) before the line; the actions grid's out-of-reach hint under Negociar */
#pinvite[data-kind='trade'] #pi-txt::before { content: ''; display: inline-block; vertical-align: middle; width: 24px; height: 24px; margin: -4px 6px 0 0; background: url(../assets/ui/act_icons.png?v=2) no-repeat -96px 0 / 288px 24px; }
.ar-pact .mgrid button .ml .far { color: #ffb98a; font-size: 10px; font-weight: bold; text-shadow: 0 1px 0 #000; }   /* (the disabled tile is dimmed as a whole: the hint is a little brighter than it looks) */
/* the bag in the trade pick: what is already offered is dimmed */
#bag-grid .slot.offered .ic { opacity: .3; filter: grayscale(.6); } #bag-grid .slot.part .ic { opacity: .62; }