/* social.css — B8: menu người chơi (popup/sheet), khung tổ đội, hộp lời mời. Chỉ dùng token §2.1 (tokens.css); mọi kích
   thước rem (đã nhân --ui-scale); đích chạm cảm ứng ≥ 44 px thật; không backdrop-filter. Gốc lớp: .soc-*            */

.soc-menu .hidden, .soc-team .hidden, .soc-invite .hidden, .soc-team.hidden, .soc-invite.hidden { display: none !important; }

/* ------------------------------------------------------------ menu người chơi */
.soc-menu {
  position: fixed; z-index: var(--z-modal); box-sizing: border-box;
  min-width: 13.5rem; max-width: min(20rem, calc(100vw - 16px));
  background: var(--sf-panel); border: 1px solid var(--ln-1); border-radius: var(--r-m);
  color: var(--tx-1); font: var(--fs-md)/1.35 var(--font); pointer-events: auto; user-select: none; -webkit-user-select: none;
  contain: layout paint style; touch-action: manipulation;
  animation: soc-in var(--dur-fast) var(--ease);
}
html[data-ui="desktop"] .soc-menu { box-shadow: var(--elev-2); }
.soc-menu-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--ln-2); }
.soc-dot { flex: 0 0 auto; width: .625rem; height: .625rem; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); }
.soc-menu-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.soc-name { font: 600 var(--fs-lg)/1.3 var(--font); color: var(--ac); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-sub { font-size: var(--fs-sm); color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ✕ = kit .k-close (bí danh .soc-x) */

.soc-menu-list { display: flex; flex-direction: column; padding: var(--sp-1) 0; }
.soc-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%;
  min-height: max(28px, 2rem); padding: var(--sp-1) var(--sp-3); border: 0; background: transparent; color: var(--tx-1);
  font: inherit; text-align: left; cursor: pointer; }
.soc-item:focus-visible { outline: 2px solid var(--ac); outline-offset: -2px; }
@media (hover: hover) { .soc-item:hover { background: var(--sf-hover); } }
.soc-item:active { background: var(--sf-selected); }
.soc-item-label { white-space: nowrap; }
.soc-item-reason { font-size: var(--fs-sm); color: var(--st-warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-item.is-locked { color: var(--tx-3); cursor: default; }
.soc-item.is-locked:hover { background: transparent; }
.soc-sep { height: 1px; margin: var(--sp-1) var(--sp-3); background: var(--ln-2); }

.soc-compose { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.soc-input { box-sizing: border-box; width: 100%; min-height: 2.25rem; padding: 0 var(--sp-3); border: 1px solid var(--ln-field);
  border-radius: var(--r-s); background: var(--sf-sunken); color: var(--tx-1); font: 16px/1.2 var(--font); /* 16 px: iOS không phóng to */
  user-select: text; -webkit-user-select: text; }
.soc-input:focus { outline: none; border-color: var(--ac); }
.soc-compose-row { display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* nút = kit .k-btn (bí danh .soc-btn) — chỉ giữ bề rộng tối thiểu + biến thể chính */
.soc-btn { min-width: 5.5rem; }
.soc-primary { border-color: var(--ac-lo); color: var(--tx-on-ac); background: linear-gradient(180deg, var(--ac-hi), var(--ac-lo)); font-weight: 700; }

/* [V4 ux §5.3] cảm ứng: SIDE SHEET phải (thay bottom-sheet nửa trong suốt — cao 390 px quá thấp), 2 cột mục ≥ 44 px */
.soc-scrim { position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--sf-backdrop); pointer-events: auto; touch-action: none; }
.soc-sheet { left: auto; right: 0; top: 0; bottom: 0; transform: none; z-index: calc(var(--z-sheet) + 1);
  width: clamp(320px, 44vw, 480px); max-width: 100vw; max-height: none;
  overflow-y: auto; border-radius: 0; border-width: 0 0 0 1px; padding: var(--st) var(--sr) var(--sb) 0; box-shadow: none;
  animation: k-slide var(--dur-slow) var(--ease); }
.soc-grip { display: none; }
.soc-sheet .soc-menu-head { min-height: 56px; }
.soc-sheet .soc-x, .soc-touch .soc-x { width: max(44px, var(--tap)); height: max(44px, var(--tap)); font-size: var(--fs-xl); }
.soc-sheet .soc-menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
.soc-sheet .soc-sep { display: none; }
.soc-sheet .soc-item { min-height: 52px; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 0; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--ln-1); border-radius: var(--r-s);
  background: var(--sf-raised); font-size: var(--fs-md); }
.soc-sheet .soc-item.is-locked { border-style: dashed; background: transparent; }
.soc-sheet .soc-item:empty { display: none; }
.soc-sheet .soc-btn, .soc-touch .soc-btn { min-height: max(44px, var(--tap)); font-size: var(--fs-md); }
.soc-sheet .soc-input { min-height: max(44px, var(--tap)); }

@keyframes soc-in { from { opacity: 0; transform: translateY(-.25rem); } to { opacity: 1; transform: none; } }
@keyframes soc-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.soc-nudge { animation: soc-nudge 160ms linear; }
@media (prefers-reduced-motion: reduce) { .soc-menu, .soc-sheet, .soc-nudge { animation: none; } }

/* ------------------------------------------------------------ khung tổ đội */
.soc-team { box-sizing: border-box; width: 12.5rem; max-width: 100%; pointer-events: auto; color: var(--text);
  font: var(--fs-sm)/1.25 var(--font); contain: layout paint style; user-select: none; -webkit-user-select: none; }
.soc-team-head { display: flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-1); }
.soc-team-toggle { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-1); min-height: max(24px, 1.75rem);
  padding: 0 var(--sp-2); border: 1px solid var(--ln-1); border-radius: var(--r-s); background: var(--sf-hud);
  color: var(--ac); font: var(--fs-sm)/1.25 var(--font); cursor: pointer; }
.soc-chev { width: 0; height: 0; border-left: .3rem solid transparent; border-right: .3rem solid transparent;
  border-top: .375rem solid currentColor; transition: transform var(--dur-fast); }
.soc-team.is-collapsed .soc-chev { transform: rotate(-90deg); }
.soc-team-title { font-weight: 700; }
.soc-team-count { color: var(--tx-2); font-size: var(--fs-xs); }
.soc-team-badge { margin-left: auto; padding: 0 var(--sp-1); border-radius: var(--r-pill); background: rgba(224, 184, 98, .18);
  color: var(--ac); font-size: var(--fs-xs); white-space: nowrap; }
.soc-team-leave { flex: 0 0 auto; min-height: max(24px, 1.75rem); padding: 0 var(--sp-2); border: 1px solid var(--ln-1); border-radius: var(--r-s);
  background: var(--sf-hud); color: var(--tx-2); font: var(--fs-xs)/1.25 var(--font); cursor: pointer; white-space: nowrap; }
.soc-team-leave:focus-visible { outline: 2px solid var(--ac); outline-offset: 1px; }
@media (hover: hover) { .soc-team-leave:hover { color: var(--tx-1); border-color: var(--st-danger-fill); } }
.soc-team-leave.is-armed { color: #fff; background: var(--st-danger-fill); border-color: var(--st-danger-fill); }
.soc-team.is-collapsed .soc-team-list, .soc-team.is-collapsed .soc-team-empty { display: none; }

.soc-team-list { display: flex; flex-direction: column; gap: 2px; }
.soc-row { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 2.5rem;
  box-sizing: border-box; padding: var(--sp-1) var(--sp-2); border: 1px solid transparent; border-radius: var(--r-s);
  background: var(--sf-hud); cursor: pointer; outline: none; }
.soc-row:focus-visible { border-color: var(--ac); }
@media (hover: hover) { .soc-row:hover { border-color: var(--ln-ac); } }
.soc-row.is-target { border-color: var(--ac); }
/* ngoài tầm/ngoại tuyến: làm mờ THANH, chữ vẫn đủ tương phản (trước: opacity .62 cả dòng — chữ < 4,5:1) */
.soc-row.is-away .soc-bar { opacity: .5; }
.soc-row.is-away .soc-row-name { color: var(--tx-2); }
.soc-row-top { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.soc-crown { flex: 0 0 auto; width: .875rem; height: .6875rem; fill: var(--gold); display: none; }
.soc-row.is-leader .soc-crown { display: block; }
.soc-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rel-party-tx); }
.soc-row.is-dead .soc-row-name { color: var(--rel-dead-tx); }
.soc-row-lvl { flex: 0 0 auto; color: var(--tx-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.soc-row-status { flex: 0 0 auto; color: var(--st-warn); font-size: var(--fs-xs); white-space: nowrap; }
.soc-row-status:empty { display: none; }
.soc-bar { height: .375rem; border-radius: 2px; background: rgba(0, 0, 0, .55); overflow: hidden; }
.soc-bar.soc-mp { height: .1875rem; }
.soc-fill { width: 100%; height: 100%; transform-origin: 0 50%; transform: scaleX(1); will-change: transform; }
.soc-hp .soc-fill { background: linear-gradient(90deg, var(--hp), var(--hp-hi)); }
.soc-mp .soc-fill { background: var(--mp); }
.soc-row.is-dead .soc-hp .soc-fill { background: var(--rel-dead); }

.soc-team-empty { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2); border-radius: var(--r-s);
  background: var(--sf-hud); color: var(--tx-2); font-size: var(--fs-sm); }
.soc-team-empty b { color: var(--tx-1); font-size: var(--fs-sm); font-weight: 400; }

/* cảm ứng (tab Tổ đội trong bảng trái ≤ 200 px, cao ~120 px gồm thanh tab của B5): không đầu khung, dòng gọn, cuộn trong
   zone; "Rời đội" là dòng cuối (≥ 44 px). Dòng đồng đội 36 px: bảng không đủ cao cho 44 px × 2 dòng (đánh đổi đã ghi V2_B8) */
.soc-team.soc-touch { width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.soc-team.soc-touch .soc-team-head { display: none; }
.soc-team.soc-touch .soc-row { height: max(36px, 2.5rem); }
.soc-team.soc-touch .soc-bar.soc-mp { display: none; }
.soc-team.soc-touch .soc-team-leave { display: block; width: 100%; margin-top: 2px; min-height: max(44px, var(--tap)); font-size: var(--fs-sm); }

/* ------------------------------------------------------------ hộp lời mời */
.soc-invite { box-sizing: border-box; width: 22.5rem; max-width: calc(100vw - var(--sl) - var(--sr)); pointer-events: auto;
  padding: var(--sp-2) var(--sp-3) 0; background: var(--sf-panel); border: 1px solid var(--ac-lo); border-radius: var(--r-m);
  color: var(--tx-1); font: var(--fs-md)/1.35 var(--font); box-shadow: var(--elev-2); overflow: hidden;
  contain: layout paint style; animation: soc-in var(--dur) var(--ease); }
.soc-invite-head { display: flex; align-items: center; gap: var(--sp-2); }
.soc-invite-title { flex: 1 1 auto; color: var(--ac); font: 600 var(--fs-lg)/1.25 var(--font-title); }
.soc-invite-more { padding: 0 var(--sp-1); border-radius: var(--r-pill); background: var(--sf-raised); color: var(--tx-2); font-size: var(--fs-sm); }
.soc-invite-sec { min-width: 2.5rem; text-align: right; color: var(--tx-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.soc-invite.is-urgent .soc-invite-sec { color: var(--st-danger); }
.soc-invite-text { margin: var(--sp-1) 0 var(--sp-2); overflow-wrap: anywhere; }
.soc-invite-name { color: var(--tx-1); font-weight: 700; }
.soc-invite-sub { color: var(--tx-2); font-size: var(--fs-sm); }
.soc-invite-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-bottom: var(--sp-2); }
.soc-invite-actions .soc-btn { flex: 0 0 auto; }
.soc-invite.soc-touch .soc-invite-actions .soc-btn { flex: 1 1 0; }
.soc-invite-bar { height: 3px; margin: 0 calc(-1 * var(--sp-3)); background: rgba(0, 0, 0, .5); }
.soc-invite-fill { height: 100%; background: var(--ac); transform-origin: 0 50%; transition: transform 1s linear; }
/* [W2fix] cảm ứng: dòng tổ đội cao 44 px (đo 36); lời mời đè bảng trái ⇒ ẩn bảng trái tới khi trả lời (trước: nền trong
   để lộ tab "Nhiệm vụ" + nút "Đi tới" chồng chữ tiêu đề lời mời) */
.soc-team.soc-touch .soc-row { height: 44px; }
html.has-invite:not([data-ui="desktop"]) #hud .lpanel { visibility: hidden; }
.soc-invite.soc-touch { background: var(--sf-panel); box-shadow: none; }
/* [W2fix] desktop: hội thoại NPC mở ⇒ khung tổ đội thu về 1 dòng (main.js _w2DialogTeam, không lưu như nút gập) */
.soc-team.dlg-collapse .soc-team-list, .soc-team.dlg-collapse .soc-team-empty { display: none; }
.soc-team.dlg-collapse .soc-chev { transform: rotate(-90deg); }