/* Infin8 World comms UI: community chat popup (world-chat.js) and proximity voice
   (world-voice.js). Shared by every 3D World game. Each game themes it through its own
   tokens: IceFishin's --if-* frost/steel/brass palette is picked up automatically, and any
   game can override the --wc-* tokens on its page root. */
.world-comms {
  --wc-glass: var(--if-glass-strong, rgba(10, 16, 24, .92));
  --wc-glass-soft: var(--if-glass, rgba(12, 20, 28, .78));
  --wc-line: var(--if-line, rgba(170, 200, 220, .22));
  --wc-line-strong: var(--if-line-strong, rgba(180, 215, 235, .5));
  --wc-ink: var(--if-ink, #081117);
  --wc-text: var(--if-snow, #eef5f8);
  --wc-muted: var(--if-steel, #9fb1b9);
  --wc-accent: var(--if-frost, #9fd8ee);
  --wc-accent-bright: var(--if-frost-bright, #d4f1fb);
  --wc-brass: var(--if-brass, #c9a86a);
  --wc-warn: var(--if-amber, #e3a857);
  --wc-danger: var(--if-danger, #d9674f);
  --wc-ok: var(--if-ok, #8fc9a4);
  --wc-radius: var(--if-radius, 12px);
  --wc-shadow: var(--if-shadow, 0 10px 28px rgba(0, 0, 0, .32));
  position: absolute; inset: 0; z-index: 12; pointer-events: none;
  font: inherit; color: var(--wc-text);
}
.world-comms * { box-sizing: border-box; }
.world-comms [hidden] { display: none !important; }

/* Dock: chat + voice buttons on the right edge, clear of the HUD bar and the touch controls. */
.wc-dock { position: absolute; right: 12px; top: 96px; display: grid; gap: 8px; pointer-events: auto; }
.wc-dock-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--wc-line-strong); background: linear-gradient(180deg, rgba(20, 36, 46, .88), var(--wc-glass));
  color: var(--wc-accent-bright); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: var(--wc-shadow), inset 0 1px 0 rgba(212, 241, 251, .1); cursor: pointer; touch-action: manipulation;
}
.wc-dock-button svg { width: 18px; height: 18px; flex: none; }
.wc-dock-button:hover, .wc-dock-button:focus-visible { border-color: var(--wc-accent-bright); outline: none; }
.wc-dock-button[aria-expanded="true"] { border-color: var(--wc-brass); color: var(--wc-brass); }
.wc-dock-button[data-voice="on"] { border-color: var(--wc-ok); color: var(--wc-ok); }
.wc-dock-button[data-voice="live"] { border-color: var(--wc-ok); color: var(--wc-ink); background: linear-gradient(180deg, #b6e3c4, var(--wc-ok)); }
.wc-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--wc-warn); color: #1a1006; font-size: .64rem; font-weight: 900; line-height: 18px; letter-spacing: 0; text-align: center;
}

/* Panels */
.wc-panel {
  position: absolute; right: 70px; top: 96px; width: min(340px, calc(100% - 94px)); max-height: min(430px, calc(100% - 200px));
  display: flex; flex-direction: column; pointer-events: auto;
  border: 1px solid var(--wc-line); border-radius: var(--wc-radius);
  background: linear-gradient(180deg, rgba(14, 28, 37, .9), var(--wc-glass));
  box-shadow: var(--wc-shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wc-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--wc-line); }
.wc-title { display: grid; gap: 1px; min-width: 0; flex: 1; }
.wc-title span { color: var(--wc-accent); font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.wc-title strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-icon-button {
  flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--wc-line); background: transparent;
  color: var(--wc-text); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.wc-icon-button:hover, .wc-icon-button:focus-visible { border-color: var(--wc-accent); outline: none; }

.wc-log { list-style: none; margin: 0; padding: 8px 12px; overflow-y: auto; flex: 1; min-height: 90px; display: grid; align-content: start; gap: 5px; overscroll-behavior: contain; }
.wc-row { font-size: .84rem; line-height: 1.35; overflow-wrap: anywhere; }
.wc-row .wc-name {
  display: inline; margin: 0 6px 0 0; padding: 0; border: 0; background: none; color: var(--wc-accent-bright);
  font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline dotted transparent;
}
.wc-row .wc-name:hover, .wc-row .wc-name:focus-visible { text-decoration-color: currentColor; outline: none; }
.wc-row.is-self .wc-name { color: var(--wc-brass); cursor: default; }
.wc-row.is-system { color: var(--wc-muted); font-size: .76rem; padding-left: 8px; box-shadow: inset 2px 0 0 var(--wc-line-strong); }
.wc-row.is-system.rarity-rare { box-shadow: inset 2px 0 0 var(--wc-accent); }
.wc-row.is-system.rarity-epic, .wc-row.is-system.rarity-legendary { box-shadow: inset 2px 0 0 var(--wc-brass); color: var(--wc-text); }
.wc-empty { color: var(--wc-muted); font-size: .8rem; }

.wc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--wc-line); font-size: .8rem; }
.wc-actions strong { flex: 1 1 100%; color: var(--wc-accent-bright); }
.wc-chip {
  min-height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--wc-line-strong); background: rgba(255, 255, 255, .03);
  color: var(--wc-text); font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer;
}
.wc-chip:hover, .wc-chip:focus-visible { border-color: var(--wc-accent); outline: none; }
.wc-chip[aria-pressed="true"] { border-color: var(--wc-brass); color: var(--wc-brass); }
.wc-chip.is-danger { border-color: rgba(217, 103, 79, .6); color: #f0a896; }

.wc-notice { margin: 0; padding: 0 12px; min-height: 0; color: var(--wc-warn); font-size: .74rem; }
.wc-notice:not(:empty) { padding: 6px 12px; }
.wc-form { display: flex; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--wc-line); }
.wc-input {
  flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--wc-line-strong);
  background: rgba(4, 10, 14, .55); color: var(--wc-text); font: inherit; font-size: 16px; /* 16px: no iOS zoom on focus */
}
.wc-input:focus { outline: none; border-color: var(--wc-accent-bright); box-shadow: 0 0 0 2px rgba(159, 216, 238, .18); }
.wc-send {
  min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--wc-accent); cursor: pointer;
  background: linear-gradient(90deg, var(--wc-accent), var(--wc-accent-bright)); color: var(--wc-ink); font: inherit; font-weight: 900; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
}
.wc-send:disabled, .wc-input:disabled { opacity: .5; cursor: not-allowed; }
.wc-guest { margin: 0; padding: 8px 12px 12px; border-top: 1px solid var(--wc-line); color: var(--wc-muted); font-size: .8rem; }
.wc-guest a { color: var(--wc-accent-bright); font-weight: 800; }
.wc-hint { color: var(--wc-muted); font-size: .66rem; padding: 0 12px 8px; margin: -4px 0 0; }

/* Voice panel */
.wv-body { display: grid; gap: 10px; padding: 10px 12px 12px; overflow-y: auto; }
.wv-status { margin: 0; font-size: .8rem; color: var(--wc-muted); }
.wv-status[data-tone="ok"] { color: var(--wc-ok); }
.wv-status[data-tone="warn"] { color: var(--wc-warn); }
.wv-row { display: flex; flex-wrap: wrap; gap: 6px; }
.wv-power { width: 100%; }
.wv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wv-peer { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.wv-peer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-peer-dist { color: var(--wc-muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.wv-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(159, 177, 185, .35); flex: none; }
.wv-dot.is-speaking { background: var(--wc-ok); box-shadow: 0 0 0 3px rgba(143, 201, 164, .25); }
.wv-dot.is-connecting { background: var(--wc-warn); }
.wv-meter { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.wv-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--wc-ok), var(--wc-accent-bright)); transition: width .08s linear; }

/* Push-to-talk touch button: above the right-hand touch controls. */
.wv-ptt {
  position: absolute; right: 12px; bottom: 200px; width: 72px; height: 72px; border-radius: 50%; pointer-events: auto;
  border: 2px solid var(--wc-ok); background: radial-gradient(circle at 40% 35%, rgba(58, 92, 72, .95), rgba(14, 28, 22, .92));
  color: var(--wc-text); font: inherit; font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: var(--wc-shadow); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.wv-ptt[data-live="true"] { background: radial-gradient(circle at 40% 35%, #c8f0d4, var(--wc-ok)); color: var(--wc-ink); }

/* Speaking indicator on the game's floating name tags (.world-tag). */
.world-tag.is-speaking { box-shadow: 0 0 0 2px var(--if-ok, #8fc9a4), 0 0 14px rgba(143, 201, 164, .55); }
.world-tag.is-speaking::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--if-ok, #8fc9a4); vertical-align: 1px; }

@media (max-width: 640px) {
  .wc-dock { top: 118px; right: 8px; }
  .wc-dock-button { min-width: 44px; padding: 0; }
  .wc-dock-button .wc-label { display: none; }
  .wc-panel { left: 8px; right: 8px; top: 64px; width: auto; max-height: calc(100% - 250px); min-height: 220px; }
  .wv-ptt { right: 8px; bottom: 188px; width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) { .wv-meter i { transition: none; } }