/* Painel social (MP-1): chat e amigos, no sistema do jogo (client/design/tokens.css e components.css).
   Desktop: janela presa no canto de baixo à direita, sem tapar a cena inteira. Celular: gaveta acima da barra de
   sistemas, na largura da tela. */
.top > #btn-social { position: relative; }
.soc-badge { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; margin-left: 4px;
  font: var(--px-1) / 1 var(--font-pixel); color: var(--ink-0); background: var(--warn); border: 1px solid var(--edge); -webkit-font-smoothing: none; }
.soc-badge.dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }
.top-badge { position: absolute; top: -4px; right: -4px; margin: 0; }

.social { position: fixed; right: var(--s-3); bottom: var(--s-3); z-index: var(--z-drawer); width: min(380px, calc(100vw - 2 * var(--s-3)));
  height: min(470px, calc(100dvh - var(--top-h, 54px) - 2 * var(--s-3))); }
.social[hidden] { display: none; }
.soc-win { display: flex; flex-direction: column; height: 100%; }
.soc-win > header .sicon { color: var(--info); }
.soc-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: var(--s-1) var(--s-2) 0; }
.soc-tabs button { justify-content: center; padding: 0 4px 2px; }
.soc-tabs button[aria-selected="true"] { color: var(--ink-0); background: var(--bone); }
.soc-sub { min-height: 22px; padding: 4px var(--s-3) 0; font-size: var(--fs-xs); color: var(--text-3); display: flex; align-items: center; gap: var(--s-2); }
.soc-sub b { color: var(--text-2); }
.soc-occupants { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-sub:empty { display: none; }

.soc-log { flex: 1; min-height: 0; overflow-y: auto; margin: var(--s-2) var(--s-2) 0; padding: var(--s-1) var(--s-2); list-style: none;
  background: var(--ink-0); border: 1px solid var(--rule); overscroll-behavior: contain; }
.soc-log .msg { padding: 3px 0; font-size: var(--fs-sm); line-height: 1.4; overflow-wrap: anywhere; color: var(--text); }
.soc-log .msg time { margin-right: 6px; font: var(--px-1) var(--font-pixel); color: var(--text-3); -webkit-font-smoothing: none; }
.soc-log .msg .nick { display: inline; min-height: 0; padding: 0 2px; margin-right: 4px; font: var(--fw-bold) var(--fs-sm) var(--font-sans);
  text-transform: none; letter-spacing: 0; color: var(--info); background: transparent; border: 0; box-shadow: none; cursor: pointer; }
.soc-log .msg .nick:hover, .soc-log .msg .nick:focus-visible { color: var(--text); background: var(--ink-3); }
.soc-log .msg b.nick { color: var(--text-2); cursor: default; }
.soc-log .msg b.nick.me { color: var(--ok); }
.soc-log .msg .vip-seal { margin-right: 4px; }
.soc-log .msg.sys { color: var(--warn); }
.soc-log .msg.empty { color: var(--text-3); font-style: italic; }
.soc-log .msg.pick { padding: 2px 0; }
.soc-rival { display: inline-block; margin-right: 4px; padding: 0 3px 1px; font: var(--px-1) / 1.2 var(--font-pixel); color: var(--ink-0); background: var(--stamp); -webkit-font-smoothing: none; }

.soc-status { min-height: 0; margin: 0; padding: 0 var(--s-3); font-size: var(--fs-xs); color: var(--ok); }
.soc-status.bad { color: var(--stamp); }
.soc-status:empty { display: none; }
.soc-status:not(:empty) { padding-top: var(--s-1); }
.soc-block { margin: var(--s-2); padding: var(--s-2) var(--s-3); font-size: var(--fs-xs); color: var(--text-2); background: var(--ink-2); border: 1px dashed var(--rule-2); }
.soc-compose, .soc-add { display: flex; gap: var(--s-1); align-items: center; padding: var(--s-2); }
.soc-compose input, .soc-add input { flex: 1 1 auto; min-width: 0; }
.soc-add { flex-wrap: wrap; padding-bottom: 0; }
.soc-add input:first-child { flex-basis: 40%; }
.soc-compose[hidden], .soc-add[hidden], .soc-block[hidden], .soc-log[hidden], .soc-friends[hidden] { display: none; }
.soc-count { min-width: 24px; text-align: right; color: var(--warn); font: var(--px-1) var(--font-pixel); -webkit-font-smoothing: none; }

.soc-friends { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s-2) var(--s-2); overscroll-behavior: contain; }
.soc-sec h4 { margin: var(--s-3) 0 4px; font: var(--fw-bold) 11.5px var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 4px var(--s-2); background: var(--ink-2); border: 1px solid var(--rule); }
.fr .dot { flex: none; width: 8px; height: 8px; background: var(--led-off); border: 1px solid var(--edge); }
.fr .dot.on { background: var(--led-on); }
.fr-who { flex: 1 1 60%; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: var(--fs-sm); }
.fr-who b { overflow-wrap: anywhere; }
.fr-pres, .fr-note { flex-basis: 100%; font-size: var(--fs-xs); color: var(--text-3); }
.fr-acts { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }

.soc-menu { position: absolute; z-index: 3; display: grid; min-width: 180px; padding: var(--s-1); }
.soc-menu-h { margin: 0; padding: 2px var(--s-2) 4px; font-size: var(--fs-xs); color: var(--text-3); border-bottom: 1px solid var(--rule); }
.soc-menu button { justify-content: flex-start; text-transform: none; letter-spacing: 0; }

@media (max-width: 760px) {
  .social { left: 0; right: 0; width: auto; bottom: calc(var(--touch) + 14px + env(safe-area-inset-bottom)); height: min(70dvh, calc(100dvh - var(--top-h) - var(--touch) - 20px)); }
  .soc-tabs button, .soc-compose button, .soc-add button { min-height: var(--touch); }
  .fr-acts button { min-height: 36px; }
  .soc-compose input, .soc-add input { min-height: var(--touch); font-size: 16px; } /* 16 px: o iOS não dá zoom no campo */
}