.social-hud {
  --social-vvh: 100dvh;
  position: fixed;
  z-index: 72;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(68px, calc(env(safe-area-inset-bottom) + 56px));
  width: min(354px, calc(100vw - 28px));
  color: var(--hud-ivory, #f5ead4);
  font: 600 12px/1.35 Manrope, Arial, sans-serif;
  pointer-events: none;
}

.social-hud *, .social-hud *::before, .social-hud *::after { box-sizing: border-box; }
.social-hud [hidden] { display: none !important; }
.social-hud audio { display: none; }

.social-hud button,
.social-hud input {
  font: inherit;
}

.social-hud button {
  color: var(--hud-ivory, #f5ead4);
  cursor: pointer;
}

.social-hud button:focus-visible,
.social-hud input:focus-visible {
  outline: 2px solid var(--hud-cyan, #63eaff);
  outline-offset: 2px;
}

.social-hud button:disabled { cursor: default; opacity: .48; }

.social-bubble {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--hud-brass, #b99255);
  border-radius: 21px 21px 21px 7px;
  background: radial-gradient(circle at 50% 28%, #17536c, #071722 75%);
  box-shadow: var(--hud-shadow, 0 9px 24px #000a);
  color: var(--hud-cyan, #63eaff);
  font-family: 'Tideglass Bangers', Impact, sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  pointer-events: auto;
  transform: rotate(-2deg);
  transition: transform 130ms ease, border-color 130ms ease;
}

.social-bubble:hover { border-color: var(--hud-brass-hi, #f0d39a); transform: rotate(0deg) scale(1.04); }
.social-bubble__live { color:#fff4e8; font-size:12px; letter-spacing:.12em; text-shadow:0 1px 2px #4a100c; }
.social-bubble.is-talking { border-color:#ffd0bf; background:radial-gradient(circle at 50% 25%, #f06b57, #7c241e 76%); box-shadow:0 0 0 2px rgba(240,107,87,.22),0 9px 24px #000a; animation:social-live-pulse 1s ease-in-out infinite; }
.social-unread { position:absolute; top:-8px; right:-7px; min-width:21px; height:21px; padding:2px 5px; border:2px solid #071722; border-radius:50%; background:#f06b57; color:#fff; font:800 10px/13px Manrope,Arial,sans-serif; }

.social-panel {
  width: 100%;
  max-height: min(520px, calc(var(--social-vvh) - 98px));
  margin-bottom: 8px;
  overflow: hidden;
  border: 2px solid var(--hud-brass, #b99255);
  border-radius: 17px 17px 17px 7px;
  background: var(--hud-panel, linear-gradient(180deg, rgba(10,37,54,.97), rgba(5,20,32,.98)));
  box-shadow: var(--hud-shadow, 0 12px 28px #000b);
  pointer-events: auto;
}

.social-panel__header { display:flex; align-items:center; gap:8px; min-height:38px; padding:6px 7px 6px 12px; border-bottom:1px solid rgba(99,234,255,.24); background:linear-gradient(90deg,rgba(99,234,255,.1),transparent); }
.social-panel__title { margin-right:auto; color:var(--hud-brass-hi,#f0d39a); font-family:'Tideglass Bangers',Impact,sans-serif; font-size:16px; letter-spacing:.08em; }
.social-connection { padding:2px 6px; border:1px solid rgba(185,203,208,.35); border-radius:8px; color:var(--hud-muted,#b9cbd0); font-size:8px; letter-spacing:.09em; }
.social-connection.is-online { border-color:rgba(99,234,255,.5); color:var(--hud-cyan,#63eaff); }
.social-close { width:30px; height:30px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--hud-muted,#b9cbd0); font-size:21px; line-height:1; }
.social-close:hover { background:rgba(99,234,255,.12); color:#fff; }
.social-mute-all { min-height:25px; padding:3px 6px; border:1px solid rgba(240,139,119,.64); border-radius:8px; background:rgba(85,31,27,.58); color:#ffd3c9!important; font-size:8px!important; letter-spacing:.04em; white-space:nowrap; }
.social-mute-all[aria-pressed=true] { border-color:#ffd3c9; background:#9e332a; color:#fff!important; }
.social-copy { margin:0; padding:6px 12px; color:var(--hud-muted,#b9cbd0); font-size:9px; font-weight:500; }
.social-muted { display:flex; gap:4px; padding:0 9px 5px; overflow-x:auto; }
.social-muted__chip { flex:none; min-height:23px; padding:2px 7px; border:1px solid rgba(240,139,119,.5); border-radius:10px; background:rgba(85,31,27,.55); color:#ffd3c9!important; font-size:8px!important; letter-spacing:.04em; }
.social-muted__all { flex:none; padding:4px 2px; color:#ffd3c9; font-size:8px; letter-spacing:.06em; }

.social-messages { display:flex; flex-direction:column; gap:5px; height:186px; margin:0; padding:5px 9px 8px; overflow:auto; overscroll-behavior:contain; list-style:none; scrollbar-color:#457078 transparent; }
.social-message { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:3px 6px; align-items:baseline; padding:4px 5px; border-left:2px solid rgba(99,234,255,.22); background:rgba(1,12,19,.27); overflow-wrap:anywhere; }
.social-message__name { max-width:92px; overflow:hidden; color:var(--hud-cyan,#63eaff); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.social-message__text { min-width:0; color:var(--hud-ivory,#f5ead4); font-size:12px; font-weight:500; white-space:pre-wrap; }
.social-message__mute,.social-message__retry { min-height:22px; padding:2px 5px; border:1px solid rgba(185,146,85,.45); border-radius:8px; background:rgba(9,34,53,.9); color:var(--hud-muted,#b9cbd0)!important; font-size:8px!important; text-transform:uppercase; }
.social-message__status { grid-column:2; color:var(--hud-muted,#b9cbd0); font-size:9px; font-weight:500; }
.social-message__status.is-rejected,.social-message__status.is-timeout { color:#ffb29f; }
.social-history-note { padding:3px 5px; color:var(--hud-muted,#b9cbd0); font-size:9px; font-style:italic; text-align:center; }
.social-notice { margin:0 9px 5px; padding:5px 7px; border:1px solid rgba(240,107,87,.55); border-radius:5px; background:rgba(88,27,23,.6); color:#ffd3c9; font-size:10px; }

.social-composer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px; padding:7px 9px; border-top:1px solid rgba(185,146,85,.45); }
.social-composer__input { width:100%; min-height:36px; max-height:68px; resize:none; padding:8px 9px 14px; border:1px solid rgba(185,146,85,.6); border-radius:8px; background:#061722; color:#fff; line-height:1.25; }
.social-composer__input::placeholder { color:#89a5aa; }
.social-composer__count { position:absolute; align-self:end; margin:0 0 3px 8px; color:#789197; font-size:8px; pointer-events:none; }
.social-send { min-width:58px; padding:0 8px; border:1px solid var(--hud-brass,#b99255); border-radius:8px; background:#123e55; color:var(--hud-cyan,#63eaff)!important; font-size:10px!important; letter-spacing:.08em; }

.social-voice { display:flex; align-items:center; flex-wrap:wrap; gap:5px; padding:7px 9px 8px; border-top:1px solid rgba(99,234,255,.2); background:rgba(2,13,21,.36); }
.social-voice__status { margin-right:auto; color:var(--hud-muted,#b9cbd0); font-size:9px; letter-spacing:.08em; }
.social-voice button { min-height:28px; padding:4px 7px; border:1px solid rgba(185,146,85,.58); border-radius:10px; background:#0b2c3d; font-size:8px; letter-spacing:.05em; }
.social-voice__join { color:var(--hud-cyan,#63eaff)!important; }
.social-voice__open[aria-pressed=true],.social-hud.is-live .social-voice__mic { border-color:#ff8b77; background:#872f27; color:#fff!important; box-shadow:0 0 10px rgba(240,107,87,.4); }
.social-voice__privacy { flex-basis:100%; margin:2px 0 0; color:var(--hud-muted,#b9cbd0); font-size:8px; font-weight:500; line-height:1.35; }
.social-voice__hear { flex-basis:100%; border-color:var(--hud-cyan,#63eaff)!important; color:var(--hud-cyan,#63eaff)!important; }
.social-voice__peers { display:flex; flex-basis:100%; gap:4px; overflow-x:auto; }
.social-voice__peer[aria-pressed=true] { border-color:#ff8b77; color:#ffd3c9; }


/* Chat is a HUD feed. Only the single-line composer opens with Enter. */
.social-hud { width:min(390px,calc(100vw - 28px)); }
.social-dock { display:flex; gap:6px; align-items:center; margin-top:5px; width:max-content; pointer-events:auto; }
.social-bubble,.social-voice-access,.social-mic-access { display:grid; place-items:center; width:auto; height:30px; min-height:30px; padding:0 9px; border:1px solid #b9925577; border-radius:5px; background:#071722b8; box-shadow:none; transform:none; font:600 10px Manrope,Arial,sans-serif; letter-spacing:.02em; }
.social-bubble:hover { transform:none; }
.social-bubble.is-talking { animation:none; background:#071722b8; border-color:#b9925577; box-shadow:none; }
.social-bubble__label { display:block!important; }
.social-bubble__live,.social-unread { display:none!important; }
.social-mic-access.is-live { background:#872f27; border-color:#ff9b89; color:white; }
.social-panel { margin-bottom:8px; border-width:1px; border-radius:8px; max-height:min(320px,calc(var(--social-vvh) - 180px)); overflow:auto; }
.social-close { display:grid; place-items:center; }
.social-messages { display:block; height:auto; max-height:126px; padding:0 2px; overflow:hidden; text-shadow:0 1px 3px #000,0 0 6px #000; }
.social-hud.is-open .social-messages { overflow:auto; pointer-events:auto; }
.social-message { display:block; margin:3px 0; padding:0; border:0; background:none; font-size:13px; line-height:1.4; }
.social-message__name { display:inline; max-width:none; font-size:12px; color:#8be7ff; }
.social-message__name::after { content:': '; }
.social-message__text { display:inline; font-size:13px; font-weight:600; }
.social-message__mute { display:none; }
.social-hud.is-open .social-message:hover .social-message__mute,.social-hud.is-open .social-message:focus-within .social-message__mute { display:inline-block; margin-left:6px; }
.social-message__status { margin-left:6px; }
.social-message__retry { margin-left:6px; pointer-events:auto; }
.social-composer { margin-top:6px; padding:4px; gap:4px; border:1px solid #b99255aa; border-radius:6px; background:#061722ed; pointer-events:auto; }
.social-composer__input { min-height:32px; height:32px; max-height:none; padding:5px 8px; border:0; border-radius:3px; font-size:13px; }
.social-composer__count { display:none; }
.social-send { min-width:54px; border-radius:4px; }
.social-notice { margin:4px 0; }
@media (pointer:coarse), (max-width:700px) {
  .social-hud { bottom:max(118px,calc(env(safe-area-inset-bottom) + 112px)); left:max(8px,env(safe-area-inset-left)); width:min(350px,calc(100vw - 16px)); }
  .social-dock { display:flex; gap:6px; width:max-content; }
  .social-bubble,.social-voice-access,.social-mic-access { position:relative; flex:0 0 44px; width:44px; height:44px; min-height:44px; min-width:44px; padding:0; border-radius:50%; font-size:0; background:#071722d9; }
  .social-bubble__label { display:none!important; }
  .social-messages { max-height:88px; }
  .social-message,.social-message__text { font-size:12px; }
  .social-hud .social-composer__input { height:48px; min-height:48px; font-size:16px; }
  .social-send,.social-close,.social-mute-all,.social-voice button { min-height:48px; }
  .social-close { width:48px; height:48px; }
  .social-voice button { font-size:10px; }
  .social-voice__mic { display:none!important; }
  .social-panel { max-height:calc(var(--social-vvh) - 250px); }
  .social-hud.is-compact-portrait { bottom:max(118px,calc(env(safe-area-inset-bottom) + 112px)); }
  .social-hud.is-compact-portrait .social-messages { max-height:48px; }
}
@media (max-height:560px) and (min-width:600px) and (pointer:coarse) {
  .social-hud { bottom:max(10px,env(safe-area-inset-bottom)); left:calc(max(8px,env(safe-area-inset-left)) + 112px); width:min(350px,calc(100vw - 360px)); }
  .social-dock { display:flex; width:max-content; }

  .social-messages { max-height:60px; }
  .social-panel { max-height:calc(var(--social-vvh) - 190px); }
}
@media (prefers-reduced-motion:reduce) { .social-bubble { transition:none; animation:none; } }

/* Mobile social contract: one 44px row, direct mic toggle, unread chat badge.
   Keep voice privacy/participants inside the user-opened panel. */
@media (pointer:coarse), (max-width:700px) {
  .social-hud:not(.is-open) .social-messages,
  .social-hud[data-social-mode="voice"] .social-messages { display:none; }
  .social-hud.is-open[data-social-mode="chat"] .social-messages {
    padding:6px 9px; border-radius:8px; background:#061722df;
    max-height:min(100px,20dvh); overflow:auto;
  }
  body.playing #prototype-notice:has(#net-badge.online) { display:none; }
  .social-hud .social-dock button { font-size:0; }
  .social-dock button::before {
    content:""; display:block; width:21px; height:21px; background:currentColor;
    mask:var(--social-icon) center / contain no-repeat;
    -webkit-mask:var(--social-icon) center / contain no-repeat;
  }
  .social-dock button[aria-expanded="true"] { border-color:#8be7ff; color:#8be7ff; background:#123145; }
  .social-bubble { --social-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.5%208.5%200%200%201-8.5%208.5H4l-2%202V11.5a9.5%209.5%200%200%201%2019%200Z%22%2F%3E%3Cpath%20d%3D%22M7%209h9M7%2013h6%22%2F%3E%3C%2Fsvg%3E"); }
  .social-voice-access { --social-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2014v-3a8%208%200%200%201%2016%200v3%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%228%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%228%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
  .social-mic-access { --social-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%2212%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2010v2a7%207%200%200%200%2014%200v-2M12%2019v3M8%2022h8%22%2F%3E%3C%2Fsvg%3E"); color:#b4c6d0; }
  .social-mic-access:not(.is-live)::after {
    content:""; position:absolute; width:25px; height:2px; border-radius:2px;
    transform:rotate(-45deg); background:currentColor; box-shadow:0 0 0 2px #071722;
  }
  .social-mic-access.is-live { color:white; box-shadow:0 0 0 2px #ff9b8955; }
  .social-hud.is-voice-connected .social-voice-access { color:#8be7ff; border-color:#8be7ff; }
  .social-hud.is-voice-busy .social-mic-access { border-style:dashed; color:#efd294; }
  .social-unread:not([hidden]) {
    display:grid!important; place-items:center; position:absolute; right:-4px; top:-5px;
    min-width:19px; height:19px; padding:0 4px; border-radius:10px;
    background:#e9c078; color:#102332; font:800 10px/1 Arial,sans-serif;
  }
  .social-panel { max-height:max(132px,calc(var(--social-vvh) - 192px)); }
  .social-notice { max-width:280px; padding:4px 7px; border-radius:6px; background:#061722ed; font-size:11px; }
}

/* Voice has exactly three primary actions; participant mute lives in TAB. */
.social-hud .social-panel { width:min(100%,320px); }
.social-voice--simple { display:grid; grid-template-columns:1.35fr 1fr .8fr; gap:7px; padding:10px; }
.social-hud .social-voice--simple button { min-height:44px; padding:7px 6px; font-size:12px; line-height:1.2; border-radius:7px; }
.social-voice--simple .social-voice__status { grid-column:1/-1; text-align:center; font-size:11px; padding:2px 0; }
.social-voice--simple .social-voice__privacy { grid-column:1/-1; text-align:center; font-size:10px; }
.social-voice__mute[aria-pressed=true] { border-color:#ff9b89; background:#682c29; color:#ffe8de!important; }
.social-hud .social-panel__header { min-height:40px; padding:2px 7px 2px 12px; }
.social-hud .social-panel__header .social-close { min-width:44px; width:44px; height:44px; font-size:22px; }