/* Halo Command Center UI v1
   One layout for both themes: compact rail, contact list, focused chat window.
   Visual-only layer; existing chat, transfer, call, translation, and storage logic stays unchanged. */

html[data-theme="dark"] body.social-authenticated {
  --cc-canvas: #15181d;
  --cc-shell: #1b2026;
  --cc-panel: #20252c;
  --cc-panel-deep: #191e24;
  --cc-panel-raised: #282f37;
  --cc-line: #303842;
  --cc-line-strong: #3d4854;
  --cc-text: #f1f4f7;
  --cc-muted: #9da7b3;
  --cc-faint: #707b88;
  --cc-accent: #16b8e6;
  --cc-accent-strong: #08a3d1;
  --cc-accent-soft: #123945;
  --cc-incoming: #2a3038;
  --cc-outgoing: #075d78;
  --cc-input: #252c34;
  --cc-shadow: 0 18px 48px rgba(0,0,0,.26);
  background: var(--cc-canvas) !important;
}

html[data-theme="light"] body.social-authenticated {
  --cc-canvas: #f3f2ef;
  --cc-shell: #faf9f6;
  --cc-panel: #ffffff;
  --cc-panel-deep: #f5f6f7;
  --cc-panel-raised: #eef1f4;
  --cc-line: #d9dee4;
  --cc-line-strong: #c6ced7;
  --cc-text: #20262d;
  --cc-muted: #6d7782;
  --cc-faint: #8b949e;
  --cc-accent: #16a9dc;
  --cc-accent-strong: #0b94c5;
  --cc-accent-soft: #e0f4fb;
  --cc-incoming: #eef1f4;
  --cc-outgoing: #d9f2fa;
  --cc-input: #f4f6f8;
  --cc-shadow: 0 18px 48px rgba(48,62,78,.12);
  background: var(--cc-canvas) !important;
}

/* Same B geometry in both themes. No glass filters, gradients, or animated layout effects. */
html[data-theme="dark"], html[data-theme="light"] { background: var(--cc-canvas) !important; }
body.social-authenticated {
  overflow: hidden !important;
  background: var(--cc-canvas) !important;
  color: var(--cc-text) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
body.social-authenticated::before,
body.social-authenticated::after,
body.social-authenticated .ambient,
body.social-authenticated .orb,
body.social-authenticated .grid { display: none !important; }
body.social-authenticated .app-shell {
  width: min(1280px, calc(100% - 32px)) !important;
  height: calc(100vh - 32px) !important;
  min-height: 620px !important;
  max-height: calc(100vh - 40px) !important;
  margin: 16px auto !important;
  padding: 0 14px 14px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid var(--cc-line-strong) !important;
  border-radius: 12px !important;
  background: var(--cc-shell) !important;
  box-shadow: var(--cc-shadow) !important;
}
body.social-authenticated .footer { display: none !important; }
body.social-authenticated .topbar {
  height: 62px !important;
  min-height: 62px !important;
  padding: 0 8px !important;
  border-bottom: 1px solid var(--cc-line) !important;
  background: var(--cc-shell) !important;
  box-shadow: none !important;
}
body.social-authenticated .wordmark { color: var(--cc-text) !important; font-size: 17px !important; font-weight: 760 !important; }
body.social-authenticated .logo-mark {
  width: 30px !important; height: 30px !important; border-radius: 8px !important;
  background: var(--cc-accent) !important; box-shadow: none !important;
}
body.social-authenticated .topbar-actions { gap: 8px !important; }
body.social-authenticated .header-language,
body.social-authenticated .header-profile-button,
body.social-authenticated .logout-button {
  min-height: 34px !important; border: 1px solid var(--cc-line) !important;
  border-radius: 8px !important; background: var(--cc-panel) !important;
  color: var(--cc-text) !important; box-shadow: none !important;
}
body.social-authenticated .header-profile-button { padding: 4px 10px !important; }
body.social-authenticated .header-language select { color: var(--cc-text) !important; }

body.social-authenticated .social-shell {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  gap: 12px !important;
  height: calc(100% - 62px) !important;
  min-height: 0 !important;
  padding: 10px 0 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
body.social-authenticated .social-rail {
  position: static !important;
  width: 64px !important; height: 100% !important; min-height: 0 !important;
  display: flex !important; align-items: center !important;
  padding: 10px 7px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 12px !important;
  background: var(--cc-panel) !important;
  box-shadow: none !important; backdrop-filter: none !important;
}
body.social-authenticated .social-rail-brand { display: none !important; }
body.social-authenticated .social-nav { display: grid !important; width: 100% !important; gap: 8px !important; margin: 0 !important; }
body.social-authenticated .social-nav { flex: 1 1 auto !important; align-content: center !important; justify-items: center !important; }
body.social-authenticated .social-nav-button {
  display: grid !important; width: 100% !important; min-height: 54px !important;
  place-items: center !important; gap: 3px !important; padding: 7px 2px !important;
  border: 1px solid transparent !important; border-radius: 10px !important;
  background: transparent !important; color: var(--cc-muted) !important;
}
body.social-authenticated .social-nav-button:hover { background: var(--cc-panel-raised) !important; color: var(--cc-text) !important; }
body.social-authenticated .social-nav-button.is-active { background: var(--cc-accent-soft) !important; border-color: var(--cc-accent) !important; color: var(--cc-accent) !important; box-shadow: none !important; }
body.social-authenticated .social-nav-button .nav-icon { width: 24px !important; height: 24px !important; display: grid !important; place-items: center !important; }
body.social-authenticated .social-nav-button .nav-icon svg { width: 19px !important; height: 19px !important; }
body.social-authenticated .social-nav-button b { font-size: 8px !important; font-weight: 650 !important; }
body.social-authenticated .social-rail-security { margin-top: auto !important; padding: 8px 0 0 !important; border: 0 !important; color: var(--cc-faint) !important; }
body.social-authenticated .social-rail-security b { font-size: 7px !important; }
body.social-authenticated .social-rail-security small { display: none !important; }

body.social-authenticated .social-main { min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; }
body.social-authenticated .social-main-header {
  display: flex !important; min-height: 76px !important; height: 76px !important;
  align-items: center !important; padding: 0 4px 10px !important;
  border-bottom: 1px solid var(--cc-line) !important; background: transparent !important; box-shadow: none !important;
}
body.social-authenticated .social-main-header h1 { margin: 0 !important; color: var(--cc-text) !important; font-size: 30px !important; line-height: 1 !important; letter-spacing: -.04em !important; }
body.social-authenticated .social-main-header .overline { margin: 0 0 6px !important; color: var(--cc-accent) !important; font-size: 9px !important; letter-spacing: .17em !important; }
body.social-authenticated .social-header-actions { gap: 8px !important; }
body.social-authenticated .halo-theme-toggle {
  width: 40px !important; height: 40px !important; border: 1px solid var(--cc-line) !important;
  border-radius: 9px !important; background: var(--cc-panel) !important; color: var(--cc-text) !important; box-shadow: none !important;
}
body.social-authenticated .social-accent-button { min-height: 40px !important; padding: 8px 13px !important; border: 0 !important; border-radius: 8px !important; background: var(--cc-accent) !important; color: #062531 !important; box-shadow: none !important; font-size: 10px !important; }

body.social-authenticated .social-view[data-social-panel="chats"] { height: calc(100% - 76px) !important; min-height: 0 !important; padding: 12px 0 0 !important; overflow: hidden !important; }
body.social-authenticated .social-dashboard-grid {
  display: grid !important; grid-template-columns: 254px minmax(0, 1fr) !important; gap: 0 !important;
  height: 100% !important; min-height: 0 !important; overflow: hidden !important;
  border: 1px solid var(--cc-line) !important; border-radius: 12px !important; background: var(--cc-panel-deep) !important;
}
body.social-authenticated .social-contacts-card {
  min-width: 0 !important; min-height: 0 !important; height: 100% !important; padding: 16px 12px !important;
  overflow: hidden !important; border: 0 !important; border-right: 1px solid var(--cc-line) !important; border-radius: 0 !important;
  background: var(--cc-panel) !important; box-shadow: none !important; backdrop-filter: none !important;
}
body.social-authenticated .social-card-head { gap: 8px !important; }
body.social-authenticated .social-card h2 { color: var(--cc-text) !important; font-size: 16px !important; }
body.social-authenticated .social-card-head p { color: var(--cc-muted) !important; font-size: 9px !important; line-height: 1.45 !important; }
body.social-authenticated .social-count { width: 29px !important; height: 29px !important; border: 1px solid var(--cc-line) !important; border-radius: 8px !important; background: var(--cc-panel-raised) !important; color: var(--cc-accent) !important; }
body.social-authenticated .social-search { height: 37px !important; margin: 14px 0 10px !important; padding: 0 9px !important; border: 1px solid var(--cc-line) !important; border-radius: 8px !important; background: var(--cc-input) !important; color: var(--cc-faint) !important; }
body.social-authenticated .social-search input { min-height: 35px !important; color: var(--cc-text) !important; font-size: 10px !important; }
body.social-authenticated .social-contact-list { gap: 5px !important; overflow: auto !important; }
body.social-authenticated .social-contact {
  display: grid !important; grid-template-columns: 34px minmax(0, 1fr) !important; gap: 9px !important;
  min-height: 54px !important; padding: 8px !important; border: 1px solid transparent !important; border-radius: 8px !important;
  background: transparent !important; color: var(--cc-text) !important; box-shadow: none !important; transform: none !important;
}
body.social-authenticated .social-contact:hover,
body.social-authenticated .social-contact.is-active { border-color: var(--cc-line) !important; background: var(--cc-panel-raised) !important; }
body.social-authenticated .social-contact.is-active { box-shadow: inset 3px 0 var(--cc-accent) !important; }
body.social-authenticated .social-contact-avatar { width: 34px !important; height: 34px !important; border: 0 !important; border-radius: 8px !important; background: var(--cc-accent-soft) !important; color: var(--cc-accent) !important; box-shadow: none !important; }
body.social-authenticated .social-contact-identity strong { color: var(--cc-text) !important; font-size: 10px !important; }
body.social-authenticated .social-contact-identity small,
body.social-authenticated .social-contact-identity p { color: var(--cc-muted) !important; font-size: 8px !important; }
body.social-authenticated .social-contact-actions { display: none !important; }
body.social-authenticated .social-empty { min-height: 230px !important; padding: 14px !important; }
body.social-authenticated .social-empty-orbit { width: 54px !important; height: 54px !important; margin-bottom: 12px !important; }
body.social-authenticated .social-empty h3 { font-size: 14px !important; }
body.social-authenticated .social-empty p { font-size: 9px !important; }
body.social-authenticated .social-side-stack { display: grid !important; min-width: 0 !important; padding: 0 !important; background: var(--cc-panel-deep) !important; }
body.social-authenticated .halo-chat-welcome { align-self: end !important; padding: 22px !important; border-top: 1px solid var(--cc-line) !important; background: var(--cc-panel) !important; }

/* Open conversation: the chat pane is the primary surface, like B. */
body.social-authenticated .social-dashboard-grid.direct-chat-open { grid-template-columns: 254px minmax(0, 1fr) !important; }
body.social-authenticated .social-dashboard-grid.direct-chat-open > .social-side-stack { display: none !important; }
body.social-authenticated .social-dashboard-grid.direct-chat-open .social-contacts-card { display: block !important; }
body.social-authenticated .direct-chat-card:not([hidden]) {
  display: grid !important; grid-template-rows: 68px 25px minmax(0,1fr) auto !important;
  width: auto !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important;
  border: 0 !important; border-radius: 0 !important; background: var(--cc-panel-deep) !important; color: var(--cc-text) !important;
  box-shadow: none !important; backdrop-filter: none !important;
}
body.social-authenticated .direct-chat-header {
  display: grid !important; grid-template-columns: 40px minmax(0,1fr) auto !important; align-items: center !important; gap: 11px !important;
  min-width: 0 !important; height: 68px !important; padding: 10px 14px !important;
  border-bottom: 1px solid var(--cc-line) !important; background: var(--cc-panel) !important;
}
body.social-authenticated .direct-chat-header > button#direct-chat-back { display: none !important; }
body.social-authenticated .direct-chat-header .social-contact-avatar { width: 38px !important; height: 38px !important; border-radius: 50% !important; }
body.social-authenticated .direct-chat-header h2 { margin: 0 0 3px !important; color: var(--cc-text) !important; font-size: 15px !important; }
body.social-authenticated .direct-chat-header p { margin: 0 !important; color: var(--cc-muted) !important; font-size: 8px !important; }
body.social-authenticated .direct-chat-header > div:not(.direct-chat-actions) { min-width: 0 !important; }
body.social-authenticated .direct-chat-actions { display: flex !important; align-items: center !important; justify-self: end !important; gap: 8px !important; }
body.social-authenticated .direct-chat-actions button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  min-width: 38px !important; min-height: 38px !important; padding: 7px 10px !important;
  border: 1px solid var(--cc-line) !important; border-radius: 8px !important; background: var(--cc-panel-raised) !important; color: var(--cc-text) !important; box-shadow: none !important;
}
body.social-authenticated .direct-chat-actions button:hover { border-color: var(--cc-accent) !important; color: var(--cc-accent) !important; }
body.social-authenticated .direct-chat-actions button svg { width: 17px !important; height: 17px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
body.social-authenticated .direct-chat-actions #direct-chat-audio-call { min-width: 92px !important; border: 0 !important; background: var(--cc-accent) !important; color: #062532 !important; font-weight: 750 !important; }
body.social-authenticated .direct-chat-actions #direct-chat-video-call { min-width: 38px !important; }
body.social-authenticated .direct-chat-actions #direct-chat-delete { order: 3 !important; }
body.social-authenticated .social-contact-avatar.has-image,
body.social-authenticated .direct-chat-header .social-contact-avatar.has-image {
  overflow: hidden !important;
  background: var(--cc-panel-raised) !important;
}
body.social-authenticated .social-contact-avatar .avatar-image,
body.social-authenticated .direct-chat-header .avatar-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}
body.social-authenticated .direct-chat-notice { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 25px !important; padding: 4px 10px !important; overflow: hidden !important; border-bottom: 1px solid var(--cc-line) !important; background: var(--cc-accent-soft) !important; color: var(--cc-muted) !important; font-size: 7px !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
body.social-authenticated .direct-chat-messages { display: flex !important; min-height: 0 !important; flex-direction: column !important; gap: 10px !important; overflow: auto !important; padding: 20px 18px !important; background: var(--cc-panel-deep) !important; }
body.social-authenticated .direct-chat-empty { min-height: 100% !important; color: var(--cc-muted) !important; }
body.social-authenticated .direct-chat-empty > span { width: 48px !important; height: 48px !important; margin-bottom: 10px !important; border: 1px solid var(--cc-line) !important; border-radius: 14px !important; background: var(--cc-accent-soft) !important; color: var(--cc-accent) !important; }
body.social-authenticated .direct-chat-empty h3 { color: var(--cc-text) !important; font-size: 14px !important; }
body.social-authenticated .direct-chat-empty p { color: var(--cc-muted) !important; font-size: 9px !important; }
body.social-authenticated .direct-chat-message {
  width: fit-content !important; max-width: min(72%, 500px) !important; padding: 9px 11px !important;
  border: 1px solid var(--cc-line) !important; border-radius: 11px 11px 11px 3px !important; background: var(--cc-incoming) !important; color: var(--cc-text) !important; box-shadow: none !important;
}
body.social-authenticated .direct-chat-message.outgoing { align-self: flex-end !important; border-color: transparent !important; border-radius: 11px 11px 3px 11px !important; background: var(--cc-outgoing) !important; color: #f1fbff !important; }
html[data-theme="light"] body.social-authenticated .direct-chat-message.outgoing { color: #123847 !important; }
html[data-theme="light"] body.social-authenticated .direct-chat-message.outgoing time { color: #4e7380 !important; }
body.social-authenticated .direct-chat-message p { margin: 0 !important; font-size: 11px !important; line-height: 1.45 !important; }
body.social-authenticated .direct-chat-message time { margin-top: 5px !important; color: var(--cc-faint) !important; font-size: 7px !important; }
body.social-authenticated .direct-chat-message.outgoing time { color: rgba(238,251,255,.64) !important; }
body.social-authenticated .direct-chat-message .translated { border-top-color: rgba(255,255,255,.14) !important; color: #b7efff !important; }
body.social-authenticated .direct-chat-form {
  display: grid !important; gap: 0 !important; padding: 12px 14px 14px !important;
  border-top: 1px solid var(--cc-line) !important; background: var(--cc-panel) !important;
}
body.social-authenticated .direct-chat-form > div {
  display: flex !important; align-items: center !important; gap: 6px !important; min-height: 48px !important;
  padding: 5px !important; border: 1px solid var(--cc-line-strong) !important; border-radius: 9px !important; background: var(--cc-input) !important;
}
body.social-authenticated .direct-chat-form > div > input[type="text"],
body.social-authenticated #direct-chat-input { order: 10 !important; min-width: 0 !important; flex: 1 1 auto !important; min-height: 36px !important; padding: 8px 9px !important; border: 0 !important; outline: 0 !important; background: transparent !important; color: var(--cc-text) !important; font-size: 10px !important; box-shadow: none !important; }
body.social-authenticated #direct-chat-input::placeholder { color: var(--cc-muted) !important; }
body.social-authenticated .direct-chat-form > div > button,
body.social-authenticated .direct-chat-form > div > .halo-chat-tool,
body.social-authenticated #halo-file-button { order: 1 !important; flex: 0 0 34px !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: var(--cc-muted) !important; box-shadow: none !important; }
body.social-authenticated .direct-chat-form > div > button:hover,
body.social-authenticated .direct-chat-form > div > .halo-chat-tool:hover,
body.social-authenticated #halo-file-button:hover { background: var(--cc-panel-raised) !important; color: var(--cc-accent) !important; transform: none !important; }
body.social-authenticated #direct-chat-send { order: 20 !important; flex-basis: 36px !important; width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; border: 0 !important; border-radius: 50% !important; background: var(--cc-accent) !important; color: #062532 !important; font-size: 18px !important; }
body.social-authenticated #direct-chat-send { font-size: 0 !important; }
body.social-authenticated #direct-chat-send::before { content: none !important; }
body.social-authenticated #direct-chat-send > span { display: block !important; color: #062532 !important; font: 900 18px/1 Arial, sans-serif !important; }
body.social-authenticated .direct-chat-translate { display: none !important; }

/* Transfer and audio controls use the same compact B surface. */
body.social-authenticated .halo-transfer-tray { max-height: 125px !important; padding: 7px 12px !important; border-top: 1px solid var(--cc-line) !important; background: var(--cc-panel) !important; }
body.social-authenticated .halo-transfer { padding: 7px !important; border: 1px solid var(--cc-line) !important; border-radius: 8px !important; background: var(--cc-panel-raised) !important; }
body.social-authenticated .halo-transfer button,
body.social-authenticated .halo-transfer a,
body.social-authenticated .halo-chat-image > div button,
body.social-authenticated .halo-audio-actions button,
body.social-authenticated .halo-audio-actions a,
body.social-authenticated .halo-message-actions button { border-color: var(--cc-line) !important; border-radius: 6px !important; background: transparent !important; color: var(--cc-text) !important; }
body.social-authenticated .halo-chat-image img,
body.social-authenticated .halo-chat-video video { background: var(--cc-shell) !important; border-radius: 8px !important; }
body.social-authenticated .halo-audio-note { background: var(--cc-incoming) !important; }
body.social-authenticated .halo-audio-note.outgoing { background: var(--cc-outgoing) !important; }

@media (max-width: 820px) and (min-width: 681px) {
  body.social-authenticated .app-shell { width: calc(100% - 24px) !important; margin: 12px auto !important; height: calc(100vh - 24px) !important; max-height: calc(100vh - 24px) !important; }
  body.social-authenticated .social-shell { grid-template-columns: 58px minmax(0,1fr) !important; gap: 8px !important; }
  body.social-authenticated .social-rail { width: 58px !important; }
  body.social-authenticated .social-dashboard-grid,
  body.social-authenticated .social-dashboard-grid.direct-chat-open { grid-template-columns: 210px minmax(0,1fr) !important; }
  body.social-authenticated .direct-chat-actions #direct-chat-audio-call span { display: none !important; }
  body.social-authenticated .direct-chat-actions #direct-chat-audio-call { min-width: 38px !important; padding: 7px !important; }
}
@media (max-width: 680px) {
  body.social-authenticated .app-shell { width: 100% !important; height: 100vh !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 10px 74px !important; border: 0 !important; border-radius: 0 !important; }
  body.social-authenticated .topbar { height: 56px !important; min-height: 56px !important; }
  body.social-authenticated .social-shell { display: block !important; height: calc(100% - 56px) !important; padding: 8px 0 0 !important; overflow: visible !important; }
  body.social-authenticated .social-rail { position: fixed !important; z-index: 120 !important; right: 8px !important; bottom: 8px !important; left: 8px !important; width: auto !important; height: 58px !important; padding: 4px !important; border-radius: 10px !important; }
  body.social-authenticated .social-nav { grid-template-columns: repeat(5, 1fr) !important; gap: 2px !important; }
  body.social-authenticated .social-nav-button { min-height: 48px !important; }
  body.social-authenticated .social-view[data-social-panel="chats"] { height: calc(100% - 64px) !important; padding-top: 8px !important; }
  body.social-authenticated .social-main-header { height: 64px !important; min-height: 64px !important; }
  body.social-authenticated .social-main-header h1 { font-size: 24px !important; }
  body.social-authenticated .social-dashboard-grid,
  body.social-authenticated .social-dashboard-grid.direct-chat-open { display: block !important; height: 100% !important; border-radius: 10px !important; }
  body.social-authenticated .social-dashboard-grid.direct-chat-open .social-contacts-card { display: none !important; }
  body.social-authenticated .direct-chat-card:not([hidden]) { position: relative !important; height: 100% !important; border-radius: 0 !important; }
  body.social-authenticated .direct-chat-header { grid-template-columns: 38px 38px minmax(0,1fr) auto !important; }
  body.social-authenticated .direct-chat-header > button#direct-chat-back { display: grid !important; place-items: center !important; border: 1px solid var(--cc-line) !important; border-radius: 7px !important; background: transparent !important; color: var(--cc-text) !important; }
  body.social-authenticated .direct-chat-actions #direct-chat-audio-call span { display: none !important; }
  body.social-authenticated .direct-chat-actions #direct-chat-audio-call { min-width: 38px !important; padding: 7px !important; }
  body.social-authenticated .direct-chat-message { max-width: 82% !important; }
  body.social-authenticated .social-dashboard-grid:not(.direct-chat-open) .social-contacts-card { height: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.social-authenticated *, body.social-authenticated *::before, body.social-authenticated *::after { animation: none !important; transition: none !important; }
}

/* V35: bottom glass dock and clickable contact profile avatars. */
body.social-authenticated .app-shell {
  position: relative !important;
  padding-bottom: 88px !important;
}
body.social-authenticated .social-shell {
  display: block !important;
  height: calc(100% - 62px) !important;
  min-height: 0 !important;
  padding: 10px 0 80px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
body.social-authenticated .social-main {
  width: 100% !important;
  height: 100% !important;
}
body.social-authenticated .social-rail {
  position: absolute !important;
  z-index: 120 !important;
  top: auto !important;
  right: auto !important;
  bottom: 14px !important;
  left: 50% !important;
  width: auto !important;
  height: 66px !important;
  min-height: 0 !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 8px 10px !important;
  border: 1px solid color-mix(in srgb, var(--cc-line-strong) 88%, transparent) !important;
  border-radius: 22px !important;
  background: color-mix(in srgb, var(--cc-panel) 82%, transparent) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.08) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}
body.social-authenticated .social-rail-brand,
body.social-authenticated .social-rail-security { display: none !important; }
body.social-authenticated .social-nav {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  gap: 6px !important;
  margin: 0 !important;
}
body.social-authenticated .social-nav-button {
  display: grid !important;
  width: auto !important;
  min-width: 64px !important;
  min-height: 48px !important;
  height: 48px !important;
  place-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  padding: 5px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--cc-muted) !important;
}
body.social-authenticated .social-nav-button:hover {
  background: color-mix(in srgb, var(--cc-accent) 10%, transparent) !important;
  color: var(--cc-text) !important;
}
body.social-authenticated .social-nav-button.is-active {
  border-color: color-mix(in srgb, var(--cc-accent) 65%, transparent) !important;
  background: var(--cc-accent-soft) !important;
  color: var(--cc-accent) !important;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--cc-accent) 18%, transparent) !important;
}
body.social-authenticated .social-nav-button .nav-icon {
  width: 22px !important;
  height: 22px !important;
}
body.social-authenticated .social-nav-button .nav-icon svg {
  width: 18px !important;
  height: 18px !important;
}
body.social-authenticated .social-nav-button b {
  display: block !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}
body.social-authenticated .social-contact-avatar,
body.social-authenticated #direct-chat-avatar,
body.social-authenticated [data-contact-avatar] {
  cursor: pointer !important;
}
body.social-authenticated .halo-contact-details-dialog {
  z-index: 300 !important;
  width: min(420px, calc(100% - 28px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--cc-line-strong) !important;
  border-radius: 18px !important;
  background: var(--cc-panel) !important;
  color: var(--cc-text) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.34) !important;
}
body.social-authenticated .halo-contact-details-dialog::backdrop {
  background: rgba(5,8,13,.58) !important;
  backdrop-filter: blur(5px) !important;
}
body.social-authenticated .halo-contact-details-card {
  padding: 24px !important;
  background: var(--cc-panel) !important;
}
body.social-authenticated .halo-contact-details-close {
  top: 14px !important;
  right: 14px !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 9px !important;
  background: var(--cc-panel-raised) !important;
  color: var(--cc-text) !important;
}
body.social-authenticated .halo-contact-details-hero {
  align-items: center !important;
  padding: 2px 40px 18px 0 !important;
  border-bottom-color: var(--cc-line) !important;
}
body.social-authenticated .halo-contact-details-avatar {
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 64px !important;
  overflow: hidden !important;
  border: 1px solid var(--cc-line-strong) !important;
  border-radius: 16px !important;
  background: var(--cc-accent-soft) !important;
  color: var(--cc-accent) !important;
  box-shadow: none !important;
}
body.social-authenticated .halo-contact-details-avatar .avatar-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}
body.social-authenticated .halo-contact-details-hero h2 { color: var(--cc-text) !important; }
body.social-authenticated .halo-contact-details-hero p,
body.social-authenticated .halo-contact-detail-row b { color: var(--cc-muted) !important; }
body.social-authenticated .halo-contact-detail-row span { color: var(--cc-text) !important; }
body.social-authenticated .halo-contact-details-actions button {
  min-height: 42px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 9px !important;
  background: var(--cc-panel-raised) !important;
  color: var(--cc-text) !important;
}
body.social-authenticated .halo-contact-details-actions button.primary {
  border-color: transparent !important;
  background: var(--cc-accent) !important;
  color: #062532 !important;
  box-shadow: none !important;
}

@media (max-width: 680px) {
  body.social-authenticated .app-shell { padding-bottom: 88px !important; }
  body.social-authenticated .social-shell { height: calc(100% - 56px) !important; padding: 8px 0 78px !important; }
  body.social-authenticated .social-rail {
    position: fixed !important;
    right: auto !important;
    bottom: 12px !important;
    left: 50% !important;
    width: max-content !important;
    max-width: calc(100vw - 20px) !important;
    height: 62px !important;
    padding: 7px !important;
    border-radius: 20px !important;
  }
  body.social-authenticated .social-nav { gap: 3px !important; max-width: 100% !important; }
  body.social-authenticated .social-nav-button { min-width: 52px !important; height: 46px !important; min-height: 46px !important; padding: 5px 7px !important; }
  body.social-authenticated .social-nav-button b { font-size: 7px !important; }
}

/* Cascade guard: legacy #social-shell display rules must not restore the side rail grid. */
body.social-authenticated #social-shell.social-shell {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
}
body.social-authenticated #social-shell.social-shell > .social-main {
  display: block !important;
  width: 100% !important;
  grid-column: auto !important;
}
body.social-authenticated .social-dashboard-grid {
  width: 100% !important;
}
body.social-authenticated #direct-chat-card:not([hidden]) {
  display: grid !important;
  grid-column: auto !important;
}

body.social-authenticated .social-nav {
  flex-direction: row !important;
  width: max-content !important;
  height: 48px !important;
}

/* V36: full-width glass workspace, larger typography, and visible dock labels. */
html[data-theme="dark"] body.social-authenticated {
  --cc-canvas: #101419;
  --cc-shell: rgba(25,30,37,.72);
  --cc-panel: rgba(32,38,46,.70);
  --cc-panel-deep: rgba(20,25,31,.76);
  --cc-panel-raised: rgba(51,59,69,.66);
  --cc-line: transparent;
  --cc-line-strong: rgba(255,255,255,.10);
  --cc-text: #f4f6f8;
  --cc-muted: #aab4bf;
  --cc-faint: #7f8a96;
  --cc-accent: #20c4ed;
  --cc-accent-soft: rgba(32,196,237,.13);
  --cc-incoming: rgba(57,66,77,.72);
  --cc-outgoing: #086b88;
  --cc-input: rgba(43,51,61,.72);
  --cc-shadow: 0 22px 70px rgba(0,0,0,.30);
  background: var(--cc-canvas) !important;
}
html[data-theme="light"] body.social-authenticated {
  --cc-canvas: #efede7;
  --cc-shell: rgba(255,253,249,.74);
  --cc-panel: rgba(255,255,255,.66);
  --cc-panel-deep: rgba(248,247,243,.76);
  --cc-panel-raised: rgba(238,237,233,.82);
  --cc-line: transparent;
  --cc-line-strong: rgba(92,86,75,.16);
  --cc-text: #26272b;
  --cc-muted: #707178;
  --cc-faint: #93949a;
  --cc-accent: #13a9da;
  --cc-accent-soft: rgba(19,169,218,.12);
  --cc-incoming: rgba(239,240,239,.84);
  --cc-outgoing: #d4f0f7;
  --cc-input: rgba(255,255,255,.72);
  --cc-shadow: 0 22px 70px rgba(69,62,49,.14);
  background: var(--cc-canvas) !important;
}
html[data-theme="dark"], html[data-theme="light"] { background: var(--cc-canvas) !important; }
body.social-authenticated {
  font-family: "Avenir Next", "Segoe UI Variable", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  letter-spacing: .004em !important;
}
body.social-authenticated .app-shell {
  width: calc(100% - 24px) !important;
  max-width: none !important;
  height: calc(100vh - 24px) !important;
  max-height: calc(100vh - 24px) !important;
  margin: 12px auto !important;
  border: 0 !important;
  background: var(--cc-shell) !important;
  box-shadow: var(--cc-shadow) !important;
  backdrop-filter: blur(24px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
}
body.social-authenticated .topbar,
body.social-authenticated .social-main-header {
  border-bottom: 0 !important;
  background: transparent !important;
}
body.social-authenticated .social-main-header h1 { font-size: 38px !important; letter-spacing: -.045em !important; }
body.social-authenticated .social-main-header .overline { font-size: 10px !important; }
body.social-authenticated .social-dashboard-grid {
  border: 0 !important;
  border-radius: 18px !important;
  background: var(--cc-panel-deep) !important;
  box-shadow: 0 12px 38px rgba(0,0,0,.08) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
}
body.social-authenticated .social-contacts-card {
  border-right: 0 !important;
  background: color-mix(in srgb, var(--cc-panel) 88%, transparent) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
}
body.social-authenticated .social-card-head h2,
body.social-authenticated .social-card h2 { font-size: 18px !important; }
body.social-authenticated .social-card-head p { font-size: 11px !important; }
body.social-authenticated .social-contact { min-height: 62px !important; padding: 10px !important; border-color: transparent !important; }
body.social-authenticated .social-contact-identity strong { font-size: 13px !important; }
body.social-authenticated .social-contact-identity small,
body.social-authenticated .social-contact-identity p { font-size: 10px !important; }
body.social-authenticated .direct-chat-card:not([hidden]) { background: color-mix(in srgb, var(--cc-panel-deep) 92%, transparent) !important; }
body.social-authenticated .direct-chat-header { height: 78px !important; border-bottom: 0 !important; background: color-mix(in srgb, var(--cc-panel) 82%, transparent) !important; backdrop-filter: blur(18px) saturate(125%) !important; -webkit-backdrop-filter: blur(18px) saturate(125%) !important; }
body.social-authenticated .direct-chat-header h2 { font-size: 17px !important; }
body.social-authenticated .direct-chat-header p { font-size: 10px !important; }
body.social-authenticated .direct-chat-notice { border-bottom: 0 !important; font-size: 8px !important; opacity: .86 !important; }
body.social-authenticated .direct-chat-messages { padding: 28px !important; background: transparent !important; }
body.social-authenticated .direct-chat-message { padding: 12px 14px !important; border-color: transparent !important; border-radius: 14px 14px 14px 5px !important; }
body.social-authenticated .direct-chat-message.outgoing { border-radius: 14px 14px 5px 14px !important; }
body.social-authenticated .direct-chat-message p { font-size: 14px !important; line-height: 1.5 !important; }
body.social-authenticated .direct-chat-message time { font-size: 8px !important; }
body.social-authenticated .direct-chat-form { border-top: 0 !important; background: transparent !important; padding: 14px 18px 18px !important; }
body.social-authenticated .direct-chat-form > div { min-height: 56px !important; padding: 7px !important; border: 1px solid var(--cc-line-strong) !important; border-radius: 16px !important; background: color-mix(in srgb, var(--cc-input) 82%, transparent) !important; box-shadow: 0 10px 28px rgba(0,0,0,.08) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; }
body.social-authenticated #direct-chat-input { min-height: 42px !important; font-size: 13px !important; }
body.social-authenticated .direct-chat-form > div > button,
body.social-authenticated .direct-chat-form > div > .halo-chat-tool,
body.social-authenticated #halo-file-button { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; font-size: 13px !important; }
body.social-authenticated #direct-chat-send { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; }
body.social-authenticated #direct-chat-send > span { font-size: 20px !important; }
body.social-authenticated .direct-chat-actions button { min-height: 42px !important; }
body.social-authenticated .halo-transfer-tray { border-top: 0 !important; background: transparent !important; }
body.social-authenticated .social-nav-button { min-width: 78px !important; height: 54px !important; min-height: 54px !important; padding: 6px 10px !important; }
body.social-authenticated #social-shell .social-nav-button b { display: block !important; visibility: visible !important; height: auto !important; max-width: 100% !important; overflow: visible !important; color: currentColor !important; font-size: 10px !important; line-height: 1 !important; font-weight: 700 !important; white-space: nowrap !important; }
body.social-authenticated .social-nav-button .nav-icon svg { width: 20px !important; height: 20px !important; }
body.social-authenticated .social-rail {
  height: 76px !important;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in srgb, var(--cc-line-strong) 80%, transparent) !important;
  border-radius: 25px !important;
  background: color-mix(in srgb, var(--cc-panel) 78%, transparent) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.10) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}
body.social-authenticated .social-nav { height: 56px !important; gap: 8px !important; }
body.social-authenticated .social-nav-button.is-active { box-shadow: 0 7px 18px color-mix(in srgb, var(--cc-accent) 22%, transparent) !important; }

@media (max-width: 680px) {
  body.social-authenticated .app-shell { width: 100% !important; height: 100vh !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; }
  body.social-authenticated .social-main-header h1 { font-size: 30px !important; }
  body.social-authenticated .social-nav-button { min-width: 52px !important; height: 48px !important; min-height: 48px !important; padding: 5px 6px !important; }
  body.social-authenticated #social-shell .social-nav-button b { font-size: 7px !important; }
  body.social-authenticated .social-rail { height: 70px !important; padding: 8px 6px !important; border-radius: 22px !important; }
  body.social-authenticated .social-nav { height: 52px !important; gap: 2px !important; }
}

body.social-authenticated #social-shell .social-nav-button {
  grid-template-columns: 1fr !important;
  grid-template-rows: 22px auto !important;
  justify-items: center !important;
  align-items: center !important;
}
body.social-authenticated #social-shell .social-nav-button b {
  opacity: 1 !important;
  transform: none !important;
  position: static !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
}

body.social-authenticated #social-shell .social-nav-button b {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* V37: floating chat header/composer docks and compact action menus. */
body.social-authenticated .topbar {
  margin: 8px 8px 0 !important;
  min-height: 58px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--cc-panel) 72%, transparent) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .08), inset 0 1px rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}

body.social-authenticated .direct-chat-card:not([hidden]) {
  grid-template-rows: auto 25px minmax(0, 1fr) auto !important;
  background: transparent !important;
}

body.social-authenticated .direct-chat-header {
  height: 70px !important;
  min-height: 70px !important;
  margin: 10px 12px 0 !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: color-mix(in srgb, var(--cc-panel) 76%, transparent) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08), inset 0 1px rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}

body.social-authenticated .direct-chat-notice {
  width: min(760px, calc(100% - 24px)) !important;
  margin: 0 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: translateX(var(--cc-chat-dock-shift)) !important;
  border-radius: 0 0 14px 14px !important;
}

body.social-authenticated .direct-chat-form {
  min-height: 82px !important;
  padding: 8px 0 18px !important;
  border: 0 !important;
  background: transparent !important;
}

body.social-authenticated .direct-chat-form > div {
  width: min(760px, calc(100% - 24px)) !important;
  min-height: 58px !important;
  margin: 0 auto !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 29px !important;
  background: color-mix(in srgb, var(--cc-input) 80%, transparent) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .12), inset 0 1px rgba(255, 255, 255, .09) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}

body.social-authenticated #direct-chat-input {
  min-height: 42px !important;
  padding-inline: 10px !important;
  font-size: 14px !important;
}

body.social-authenticated .direct-chat-message {
  position: relative !important;
}

body.social-authenticated .direct-chat-messages {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
  padding-left: max(18px, calc((100% - 760px) / 2 + var(--cc-chat-dock-shift))) !important;
  padding-right: max(18px, calc((100% - 760px) / 2 - var(--cc-chat-dock-shift))) !important;
}

body.social-authenticated .halo-chat-image > strong,
body.social-authenticated .halo-chat-video > strong {
  display: none !important;
}

body.social-authenticated .halo-message-menu {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 7;
  display: flex;
  align-self: flex-end;
  margin: 0;
}

body.social-authenticated .halo-message-menu-toggle {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--cc-muted);
  background: transparent;
  font: 700 14px/1 "Avenir Next", "Segoe UI Variable", system-ui, sans-serif;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}

body.social-authenticated .halo-message-menu-toggle:hover,
body.social-authenticated .halo-message-menu.is-open .halo-message-menu-toggle {
  color: var(--cc-text);
  background: color-mix(in srgb, var(--cc-accent) 12%, transparent);
  transform: translateY(-1px);
}

body.social-authenticated .halo-message-menu-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.social-authenticated .halo-message-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  bottom: auto;
  display: none;
  min-width: 154px;
  padding: 6px;
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--cc-panel) 94%, transparent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .10);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

body.social-authenticated .halo-message-menu.opens-down .halo-message-menu-list {
  top: calc(100% + 7px);
  bottom: auto;
}

body.social-authenticated .halo-message-menu.is-open .halo-message-menu-list {
  display: grid;
  gap: 2px;
}

body.social-authenticated .halo-message-menu-list button,
body.social-authenticated .halo-message-menu-list a {
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  color: var(--cc-text);
  background: transparent;
  font: 600 12px/1.2 "Avenir Next", "Segoe UI Variable", system-ui, sans-serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

body.social-authenticated .halo-message-menu-list button:hover,
body.social-authenticated .halo-message-menu-list a:hover {
  background: color-mix(in srgb, var(--cc-accent) 16%, var(--cc-input));
}

body.social-authenticated .halo-message-menu-list .is-danger {
  color: var(--cc-danger, #ee8580);
}

body.social-authenticated .halo-chat-image .halo-message-menu,
body.social-authenticated .halo-chat-video .halo-message-menu {
  position: absolute;
  top: 8px;
  right: 8px;
}

body.social-authenticated .halo-audio-details .halo-message-menu {
  position: absolute;
  top: 0;
  right: 0;
}

body.social-authenticated .halo-transfer-buttons .halo-message-menu {
  align-self: center;
}

body.social-authenticated .halo-audio-note,
body.social-authenticated .halo-chat-image,
body.social-authenticated .halo-chat-video {
  padding-right: 40px !important;
}

/* V39: give the glass system a softer, more dimensional canvas. */
html[data-theme="dark"] body.social-authenticated {
  isolation: isolate;
  background:
    radial-gradient(720px 420px at 14% 12%, rgba(31, 105, 184, .17), transparent 70%),
    radial-gradient(640px 420px at 86% 14%, rgba(91, 63, 190, .16), transparent 72%),
    radial-gradient(760px 520px at 50% 100%, rgba(12, 121, 148, .12), transparent 72%),
    #080c14 !important;
}

html[data-theme="light"] body.social-authenticated {
  isolation: isolate;
  background:
    radial-gradient(720px 420px at 10% 8%, rgba(121, 189, 244, .20), transparent 70%),
    radial-gradient(680px 460px at 88% 16%, rgba(173, 156, 238, .18), transparent 72%),
    radial-gradient(760px 520px at 52% 100%, rgba(96, 207, 206, .14), transparent 72%),
    #f4f2ed !important;
}

body.social-authenticated .app-shell {
  background: transparent !important;
}

@media (max-width: 680px) {
  body.social-authenticated .topbar {
    margin: 6px 6px 0 !important;
    border-radius: 20px !important;
  }
  body.social-authenticated .direct-chat-header {
    margin: 8px 8px 0 !important;
    border-radius: 22px !important;
  }
  body.social-authenticated .direct-chat-form > div {
    width: calc(100% - 16px) !important;
  }
}

/* V43: one-line network heading and a taller conversation surface. */
body.social-authenticated .social-main-header {
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 4px !important;
}

body.social-authenticated .social-main-header > div:first-child {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

body.social-authenticated .social-main-header .overline {
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

body.social-authenticated .social-main-header h1 {
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

body.social-authenticated .social-view[data-social-panel="chats"] {
  height: calc(100% - 58px) !important;
  min-height: 0 !important;
  padding-top: 0 !important;
}

body.social-authenticated .social-dashboard-grid {
  height: 100% !important;
}

@media (max-width: 680px) {
  body.social-authenticated .social-main-header {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
  }
  body.social-authenticated .social-main-header > div:first-child {
    gap: 8px !important;
  }
  body.social-authenticated .social-main-header .overline {
    display: block !important;
    font-size: 8px !important;
  }
  body.social-authenticated .social-main-header h1 {
    font-size: 24px !important;
  }
  body.social-authenticated .social-view[data-social-panel="chats"] {
    height: calc(100% - 52px) !important;
    min-height: 640px !important;
  }
}

/* V42: taller content start, five equal composer tools, and animated emoji/mic. */
body.social-authenticated .social-view[data-social-panel="chats"] {
  padding-top: 0 !important;
}

body.social-authenticated .direct-chat-notice {
  font-size: 7px !important;
  letter-spacing: .01em !important;
}

body.social-authenticated .direct-chat-form > div {
  display: grid !important;
  grid-template-columns: repeat(5, 42px) minmax(0, 1fr) 42px 42px !important;
  align-items: center !important;
  gap: 8px !important;
}

body.social-authenticated .direct-chat-form > div > .halo-chat-tool,
body.social-authenticated .direct-chat-form > div > #halo-file-button,
body.social-authenticated .direct-chat-form > div > #halo-audio-note-button {
  order: 0 !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--cc-panel-raised) 82%, transparent) !important;
  color: var(--cc-text) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08) !important;
}

body.social-authenticated .direct-chat-form > div > #direct-chat-input {
  grid-column: 6 !important;
  order: 0 !important;
}

body.social-authenticated .direct-chat-form > div > #direct-chat-send {
  grid-column: 7 !important;
  order: 0 !important;
}

body.social-authenticated .direct-chat-form > div > #halo-audio-note-button {
  position: relative !important;
  grid-column: 8 !important;
  order: 0 !important;
  cursor: pointer !important;
}

body.social-authenticated .direct-chat-form > div > #halo-audio-note-button:hover,
body.social-authenticated .direct-chat-form > div > .halo-chat-tool:hover,
body.social-authenticated .direct-chat-form > div > #halo-file-button:hover {
  transform: translateY(-1px) !important;
  background: color-mix(in srgb, var(--cc-accent) 15%, var(--cc-panel-raised)) !important;
  color: var(--cc-accent) !important;
}

body.social-authenticated #halo-audio-note-button.is-recording {
  color: #fff !important;
  background: linear-gradient(145deg, #f06d93, #8b5cf6 58%, #3bc7df) !important;
  box-shadow: 0 0 0 0 rgba(240, 109, 147, .46), 0 9px 24px rgba(139, 92, 246, .30) !important;
  animation: halo-mic-breathe 1.35s ease-in-out infinite !important;
}

body.social-authenticated #halo-audio-note-button.is-recording::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(240, 109, 147, .65);
  border-radius: 17px;
  pointer-events: none;
  animation: halo-mic-ring 1.35s ease-out infinite;
}

body.social-authenticated #halo-audio-note-button.is-recording svg {
  animation: halo-mic-bounce .75s ease-in-out infinite alternate;
}

body.social-authenticated .halo-audio-timer {
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: currentColor;
  font: 700 7px/1 "Avenir Next", "Segoe UI Variable", system-ui, sans-serif;
}

body.social-authenticated .halo-emoji-message {
  min-width: 72px !important;
  padding: 14px 30px 12px 14px !important;
}

body.social-authenticated .halo-emoji-message .halo-emoji-text {
  color: var(--cc-text) !important;
  font-size: 44px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  animation: halo-emoji-pop .48s cubic-bezier(.2, 1.6, .35, 1) both, halo-emoji-float 2.8s ease-in-out .48s infinite;
  transform-origin: 50% 75%;
}

body.social-authenticated .halo-emoji-message time {
  margin-top: 8px !important;
  font-size: 7px !important;
}

@keyframes halo-mic-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@keyframes halo-mic-ring {
  0% { opacity: .8; transform: scale(.92); }
  70%, 100% { opacity: 0; transform: scale(1.24); }
}

@keyframes halo-mic-bounce {
  from { transform: translateY(1px) scale(.94); }
  to { transform: translateY(-1px) scale(1.05); }
}

@keyframes halo-emoji-pop {
  0% { opacity: 0; transform: scale(.35) rotate(-10deg); }
  70% { opacity: 1; transform: scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes halo-emoji-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-3px) rotate(1deg); }
}

@media (max-width: 680px) {
  body.social-authenticated .direct-chat-form > div {
    grid-template-columns: repeat(5, 34px) minmax(0, 1fr) 34px 34px !important;
    gap: 5px !important;
  }
  body.social-authenticated .direct-chat-form > div > .halo-chat-tool,
  body.social-authenticated .direct-chat-form > div > #halo-file-button,
  body.social-authenticated .direct-chat-form > div > #halo-audio-note-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
  }
  body.social-authenticated .halo-emoji-message .halo-emoji-text {
    font-size: 36px !important;
  }
}

/* V38: separate conversation tiles and align the chat docks on one visual axis. */
body.social-authenticated .social-dashboard-grid.direct-chat-open {
  --cc-chat-dock-shift: -120px;
  grid-template-columns: 254px minmax(0, 1fr) !important;
  gap: 14px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.social-authenticated .social-dashboard-grid.direct-chat-open .social-contacts-card {
  border: 0 !important;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--cc-panel) 82%, transparent) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .09), inset 0 1px rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
}

body.social-authenticated .direct-chat-card:not([hidden]) {
  width: 100% !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--cc-panel-deep) 86%, transparent) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .10), inset 0 1px rgba(255, 255, 255, .07) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
}

body.social-authenticated .direct-chat-header,
body.social-authenticated .direct-chat-form > div {
  width: min(760px, calc(100% - 24px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: translateX(var(--cc-chat-dock-shift)) !important;
}

body.social-authenticated .direct-chat-header {
  margin-top: 10px !important;
}

body.social-authenticated .direct-chat-form > div {
  margin-bottom: 0 !important;
}

body.social-authenticated .halo-contact-details-avatar {
  cursor: zoom-in !important;
}

body.social-authenticated .halo-contact-details-avatar:focus-visible {
  outline: 2px solid var(--cc-accent) !important;
  outline-offset: 3px !important;
}

@media (max-width: 1100px) {
  body.social-authenticated .social-dashboard-grid.direct-chat-open {
    --cc-chat-dock-shift: -92px;
  }
}

@media (max-width: 680px) {
  body.social-authenticated .social-dashboard-grid.direct-chat-open {
    --cc-chat-dock-shift: 0px;
    display: block !important;
    gap: 0 !important;
  }
  body.social-authenticated .direct-chat-card:not([hidden]) {
    border-radius: 22px !important;
  }
  body.social-authenticated .direct-chat-header,
  body.social-authenticated .direct-chat-notice,
  body.social-authenticated .direct-chat-form > div {
    width: calc(100% - 16px) !important;
    transform: none !important;
  }
  body.social-authenticated .direct-chat-messages {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* V41: compact top controls, contact-side invite, and taller small-screen chat. */
body.social-authenticated .topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.social-authenticated .topbar-actions .header-language,
body.social-authenticated .topbar-actions #halo-theme-toggle,
body.social-authenticated .topbar-actions .header-profile-button,
body.social-authenticated .topbar-actions .account-menu,
body.social-authenticated .topbar-actions .logout-button {
  box-sizing: border-box !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 12px !important;
}

body.social-authenticated .topbar-actions .header-language {
  display: block !important;
  overflow: hidden !important;
}

body.social-authenticated .topbar-actions .header-language select {
  width: 100% !important;
  height: 100% !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 10px !important;
}

body.social-authenticated .topbar-actions .halo-theme-toggle,
body.social-authenticated .topbar-actions .header-profile-button,
body.social-authenticated .topbar-actions .logout-button {
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid var(--cc-line) !important;
  background: color-mix(in srgb, var(--cc-panel) 76%, transparent) !important;
  color: var(--cc-text) !important;
  box-shadow: none !important;
}

body.social-authenticated .topbar-actions .halo-theme-toggle svg {
  width: 17px !important;
  height: 17px !important;
}

body.social-authenticated .topbar-actions .header-profile-button .header-profile-label {
  display: none !important;
}

body.social-authenticated .topbar-actions .header-profile-avatar {
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  border-radius: 9px !important;
}

body.social-authenticated .topbar-actions .account-menu {
  display: contents !important;
}

body.social-authenticated .topbar-actions .logout-button {
  font-size: 0 !important;
  cursor: pointer !important;
}

body.social-authenticated .topbar-actions .logout-button::before {
  content: "↪";
  font-size: 18px;
  line-height: 1;
}

body.social-authenticated .social-header-actions {
  display: none !important;
}

body.social-authenticated .social-contact-head-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}

body.social-authenticated .social-contact-head-actions .social-new-invite {
  display: grid !important;
  width: 29px !important;
  min-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--cc-accent) !important;
  color: #062531 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body.social-authenticated .social-contact-head-actions .social-new-invite:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

@media (max-width: 680px) {
  body.social-authenticated .topbar-actions {
    gap: 6px !important;
  }
  body.social-authenticated .topbar-actions .header-language,
  body.social-authenticated .topbar-actions #halo-theme-toggle,
  body.social-authenticated .topbar-actions .header-profile-button,
  body.social-authenticated .topbar-actions .account-menu,
  body.social-authenticated .topbar-actions .logout-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
  }
  body.social-authenticated .topbar-actions .header-language select {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 9px !important;
  }
  body.social-authenticated .topbar-actions .header-profile-avatar {
    width: 23px !important;
    height: 23px !important;
  }
  body.social-authenticated .social-view[data-social-panel="chats"] {
    height: calc(100% - 48px) !important;
    min-height: 640px !important;
    padding-bottom: 86px !important;
    box-sizing: border-box !important;
  }
  body.social-authenticated .social-dashboard-grid,
  body.social-authenticated .social-dashboard-grid.direct-chat-open,
  body.social-authenticated .direct-chat-card:not([hidden]) {
    min-height: 640px !important;
  }
  body.social-authenticated .social-dashboard-grid,
  body.social-authenticated .social-dashboard-grid.direct-chat-open {
    height: calc(100% - 86px) !important;
  }
}

/* V44: make the global bar the only top header and let the conversation
   surface start immediately beneath it. */
body.social-authenticated .topbar {
  height: 68px !important;
  min-height: 68px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  padding: 0 12px 10px !important;
}

body.social-authenticated .topbar .wordmark,
body.social-authenticated .topbar .topbar-actions {
  align-self: flex-end !important;
}

body.social-authenticated .social-main-header {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

body.social-authenticated .social-shell {
  height: calc(100% - 68px) !important;
  min-height: 0 !important;
  padding: 0 0 80px !important;
}

body.social-authenticated .social-main,
body.social-authenticated .social-view[data-social-panel="chats"],
body.social-authenticated .social-dashboard-grid {
  height: 100% !important;
  min-height: 0 !important;
}

body.social-authenticated .social-view[data-social-panel="chats"] {
  padding-top: 0 !important;
}

@media (max-width: 680px) {
  body.social-authenticated .topbar {
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 4px 8px !important;
  }

  body.social-authenticated .social-shell {
    height: calc(100% - 60px) !important;
    padding: 0 0 86px !important;
  }

  body.social-authenticated .social-view[data-social-panel="chats"] {
    height: 100% !important;
    min-height: 640px !important;
    padding-top: 0 !important;
  }

  body.social-authenticated .social-dashboard-grid,
  body.social-authenticated .social-dashboard-grid.direct-chat-open,
  body.social-authenticated .direct-chat-card:not([hidden]) {
    height: 100% !important;
    min-height: 640px !important;
  }
}

/* V45: bottom utility bar, larger typography, working chat-size preference,
   and message menus that always layer above following bubbles. */
body.social-authenticated .app-shell {
  position: relative !important;
}

body.social-authenticated .topbar {
  position: absolute !important;
  z-index: 130 !important;
  right: 24px !important;
  bottom: 14px !important;
  left: 24px !important;
  width: auto !important;
  height: 54px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid color-mix(in srgb, var(--cc-line-strong) 88%, transparent) !important;
  border-radius: 20px !important;
  background: color-mix(in srgb, var(--cc-panel) 76%, transparent) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}

body.social-authenticated .social-shell {
  height: 100% !important;
  min-height: 0 !important;
  padding-top: 0 !important;
}

body.social-authenticated .social-view[data-social-panel="chats"],
body.social-authenticated .social-dashboard-grid {
  height: 100% !important;
  min-height: 0 !important;
}

body.social-authenticated {
  font-size: 15px !important;
}

body.social-authenticated .wordmark {
  font-size: 18px !important;
}

body.social-authenticated .social-card h2,
body.social-authenticated .social-card-head h2 {
  font-size: 20px !important;
}

body.social-authenticated .social-contact-identity strong {
  font-size: 14px !important;
}

body.social-authenticated .social-contact-identity small,
body.social-authenticated .social-contact-identity p {
  font-size: 11px !important;
}

body.social-authenticated .direct-chat-header h2 {
  font-size: 20px !important;
}

body.social-authenticated .direct-chat-header p {
  font-size: 11px !important;
}

body.social-authenticated .direct-chat-notice {
  font-size: 8px !important;
}

body.social-authenticated .direct-chat-message p,
body.social-authenticated .direct-chat-form input[type="text"],
body.social-authenticated #direct-chat-input {
  font-family: var(--halo-chat-font, "Avenir Next", "Segoe UI Variable", system-ui, sans-serif) !important;
  font-size: var(--halo-chat-size, 15px) !important;
}

body.social-authenticated .direct-chat-message time {
  font-size: 9px !important;
}

body.social-authenticated .direct-chat-form > div > .halo-chat-tool,
body.social-authenticated .direct-chat-form > div > #halo-file-button {
  font-size: 14px !important;
}

body.social-authenticated .social-nav-button b {
  font-size: 10px !important;
}

body.social-authenticated .direct-chat-message {
  overflow: visible !important;
  isolation: auto !important;
}

body.social-authenticated .direct-chat-message:has(.halo-message-menu.is-open) {
  z-index: 1000 !important;
}

body.social-authenticated .halo-message-menu {
  z-index: 1001 !important;
}

body.social-authenticated .halo-message-menu-list {
  z-index: 1002 !important;
}

@media (max-width: 680px) {
  body.social-authenticated .topbar {
    right: 10px !important;
    bottom: 72px !important;
    left: 10px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 10px !important;
    border-radius: 18px !important;
  }

  body.social-authenticated .social-shell {
    height: 100% !important;
    padding-bottom: 86px !important;
  }

  body.social-authenticated .social-nav-button b {
    font-size: 8px !important;
  }

  body.social-authenticated .direct-chat-header h2 {
    font-size: 18px !important;
  }

  body.social-authenticated .direct-chat-message p,
  body.social-authenticated .direct-chat-form input[type="text"],
  body.social-authenticated #direct-chat-input {
    font-size: var(--halo-chat-size, 15px) !important;
  }
}

/* V46: remove the utility-bar edge line and standardize every native select
   and its option list as a dark, high-contrast menu. */
body.social-authenticated .topbar {
  border: 0 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18) !important;
}

body.social-authenticated select,
body.social-authenticated select option,
body.social-authenticated select optgroup {
  color: #ffffff !important;
  background-color: #080d16 !important;
  color-scheme: dark !important;
}

body.social-authenticated select {
  border-color: rgba(255, 255, 255, .18) !important;
}

body.social-authenticated select:focus {
  border-color: var(--cc-accent) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-accent) 18%, transparent) !important;
}

/* V47: keep the utility content below the navigation dock without leaving a
   blocking glass layer across the bottom of the page. */
body.social-authenticated .topbar {
  z-index: 110 !important;
  pointer-events: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.social-authenticated .topbar .wordmark,
body.social-authenticated .topbar .topbar-actions,
body.social-authenticated .topbar .topbar-actions * {
  pointer-events: auto !important;
}

body.social-authenticated .social-rail {
  z-index: 140 !important;
}

body.social-authenticated .halo-games {
  min-height: 100% !important;
  padding: 28px !important;
  box-sizing: border-box !important;
}

body.social-authenticated .halo-tic-tac-toe {
  width: min(680px, 100%) !important;
  margin: auto !important;
  padding: 28px !important;
  border: 1px solid color-mix(in srgb, var(--cc-line-strong) 80%, transparent) !important;
  border-radius: 28px !important;
  background: color-mix(in srgb, var(--cc-panel) 78%, transparent) !important;
  color: var(--cc-text) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

body.social-authenticated .halo-game-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

body.social-authenticated .halo-game-head h2 {
  margin: 4px 0 6px !important;
  color: var(--cc-text) !important;
  font-size: 28px !important;
}

body.social-authenticated .halo-game-head p:last-child {
  margin: 0 !important;
  color: var(--cc-muted) !important;
  font-size: 13px !important;
}

body.social-authenticated .halo-tic-tac-toe .halo-game-icon {
  flex: 0 0 54px !important;
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  background: var(--cc-accent-soft) !important;
  color: var(--cc-accent) !important;
  font-size: 25px !important;
}

body.social-authenticated .halo-game-lobby {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

body.social-authenticated .halo-game-lobby label {
  display: grid !important;
  gap: 7px !important;
  color: var(--cc-muted) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

body.social-authenticated .halo-game-lobby select {
  min-height: 44px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: #080d16 !important;
}

body.social-authenticated .halo-game-lobby .social-accent-button {
  min-height: 44px !important;
  white-space: nowrap !important;
}

body.social-authenticated .halo-game-status {
  min-height: 22px !important;
  margin: 15px 0 8px !important;
  color: var(--cc-muted) !important;
  font-size: 12px !important;
}

body.social-authenticated .halo-game-status[data-tone="error"] { color: #ff9b9b !important; }
body.social-authenticated .halo-game-status[data-tone="success"] { color: #6ff0bd !important; }
body.social-authenticated .halo-game-status[data-tone="draw"] { color: var(--cc-accent) !important; }

body.social-authenticated .halo-game-board {
  display: grid !important;
  width: min(330px, 100%) !important;
  aspect-ratio: 1 !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 9px !important;
  margin: 18px auto !important;
}

body.social-authenticated .halo-game-board button {
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  place-items: center !important;
  border: 1px solid var(--cc-line-strong) !important;
  border-radius: 17px !important;
  background: color-mix(in srgb, var(--cc-panel-raised) 80%, transparent) !important;
  color: var(--cc-accent) !important;
  font: 850 38px/1 "Avenir Next", "Segoe UI Variable", system-ui, sans-serif !important;
  cursor: pointer !important;
  transition: transform .16s ease, background .16s ease, border-color .16s ease !important;
}

body.social-authenticated .halo-game-board button:not(:disabled):hover {
  border-color: var(--cc-accent) !important;
  background: color-mix(in srgb, var(--cc-accent-soft) 78%, var(--cc-panel-raised)) !important;
  transform: translateY(-2px) !important;
}

body.social-authenticated .halo-game-board button[data-value="O"] { color: #a9a0ff !important; }

body.social-authenticated .halo-game-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 9px !important;
}

body.social-authenticated .halo-game-dialog {
  width: min(420px, calc(100% - 28px)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cc-text) !important;
}

body.social-authenticated .halo-game-dialog::backdrop {
  background: rgba(2, 7, 18, .72) !important;
  backdrop-filter: blur(12px) !important;
}

body.social-authenticated .halo-game-dialog-card {
  position: relative !important;
  padding: 26px !important;
  border: 1px solid var(--cc-line-strong) !important;
  border-radius: 24px !important;
  background: var(--cc-panel) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42) !important;
}

body.social-authenticated .halo-game-dialog-card h2 {
  margin: 7px 0 !important;
  color: var(--cc-text) !important;
  font-size: 22px !important;
}

body.social-authenticated .halo-game-dialog-card > p:not(.overline) {
  margin: 0 !important;
  color: var(--cc-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body.social-authenticated .halo-game-dialog-close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 10px !important;
  background: var(--cc-panel-raised) !important;
  color: var(--cc-text) !important;
  cursor: pointer !important;
}

body.social-authenticated .halo-game-dialog-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
  margin-top: 22px !important;
}

@media (max-width: 680px) {
  body.social-authenticated .halo-games {
    padding: 14px !important;
  }

  body.social-authenticated .halo-tic-tac-toe {
    padding: 20px !important;
    border-radius: 22px !important;
  }

  body.social-authenticated .halo-game-head h2 {
    font-size: 23px !important;
  }

  body.social-authenticated .halo-game-lobby {
    grid-template-columns: 1fr !important;
  }

  body.social-authenticated .halo-game-lobby .social-accent-button {
    width: 100% !important;
  }
}

/* V48: multi-game workspace with a continuing encrypted chat column. */
body.social-authenticated .halo-games-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: 16px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 18px !important;
  box-sizing: border-box !important;
}

body.social-authenticated .halo-games {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: auto !important;
}

body.social-authenticated .halo-games-title {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 14px !important;
}

body.social-authenticated .halo-games-title h2 {
  margin: 4px 0 5px !important;
  color: var(--cc-text) !important;
  font-size: 26px !important;
}

body.social-authenticated .halo-games-title p:last-child {
  margin: 0 !important;
  color: var(--cc-muted) !important;
  font-size: 12px !important;
}

body.social-authenticated .halo-games-title .halo-game-icon {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  border-radius: 16px !important;
  background: var(--cc-accent-soft) !important;
  color: var(--cc-accent) !important;
  font-size: 22px !important;
}

body.social-authenticated .halo-game-tabs {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  padding: 5px !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--cc-panel) 70%, transparent) !important;
}

body.social-authenticated .halo-game-tabs button {
  flex: 1 1 0 !important;
  min-height: 38px !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--cc-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body.social-authenticated .halo-game-tabs button.is-active {
  background: var(--cc-accent-soft) !important;
  color: var(--cc-accent) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .10) !important;
}

body.social-authenticated .halo-game-panel {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 1px solid color-mix(in srgb, var(--cc-line-strong) 80%, transparent) !important;
  border-radius: 25px !important;
  background: color-mix(in srgb, var(--cc-panel) 78%, transparent) !important;
  color: var(--cc-text) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .07) !important;
}

body.social-authenticated .halo-game-panel h3 {
  margin: 0 0 6px !important;
  color: var(--cc-text) !important;
  font-size: 22px !important;
}

body.social-authenticated .halo-game-panel > p:not(.halo-game-status) {
  margin: 0 !important;
  color: var(--cc-muted) !important;
  font-size: 12px !important;
}

body.social-authenticated .halo-game-chat {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 16px !important;
  border: 1px solid color-mix(in srgb, var(--cc-line-strong) 75%, transparent) !important;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--cc-panel) 60%, transparent) !important;
  color: var(--cc-text) !important;
}

body.social-authenticated .halo-game-chat > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 2px 2px 13px !important;
}

body.social-authenticated .halo-game-chat > header h3 {
  margin: 3px 0 0 !important;
  font-size: 18px !important;
}

body.social-authenticated .halo-game-chat > header > span {
  color: var(--cc-accent) !important;
  font-size: 22px !important;
}

body.social-authenticated #halo-game-chat-empty {
  align-self: center !important;
  margin: 18px !important;
  color: var(--cc-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

body.social-authenticated #halo-game-chat-mount {
  display: grid !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.social-authenticated #halo-game-chat-mount .direct-chat-card:not([hidden]) {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 18px !important;
}

body.social-authenticated #halo-game-chat-mount .direct-chat-header {
  margin: 0 !important;
  min-height: 62px !important;
  height: 62px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
}

body.social-authenticated #halo-game-chat-mount .direct-chat-header h2 { font-size: 14px !important; }
body.social-authenticated #halo-game-chat-mount .direct-chat-header p { font-size: 9px !important; }
body.social-authenticated #halo-game-chat-mount .direct-chat-messages { padding: 12px !important; }
body.social-authenticated #halo-game-chat-mount .direct-chat-form { padding: 8px !important; }
body.social-authenticated #halo-game-chat-mount .direct-chat-form > div { grid-template-columns: repeat(5, 34px) minmax(0, 1fr) 38px 38px !important; gap: 4px !important; }

body.social-authenticated .halo-tanks-arena {
  margin-top: 16px !important;
  padding: 12px !important;
  border-radius: 20px !important;
  background: #08121f !important;
}

body.social-authenticated .halo-tank-hud {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: #b8c9df !important;
  font: 800 10px/1.2 "Avenir Next", system-ui, sans-serif !important;
}

body.social-authenticated .halo-tanks-field {
  position: relative !important;
  height: 230px !important;
  margin: 12px 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(93, 199, 241, .22) !important;
  border-radius: 17px !important;
  background: radial-gradient(circle at 50% 10%, rgba(52, 126, 181, .26), transparent 40%), linear-gradient(180deg, #11263d, #0b1421) !important;
}

body.social-authenticated .halo-tanks-field::before,
body.social-authenticated .halo-tanks-field::after {
  position: absolute !important;
  content: "" !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: rgba(126, 220, 255, .13) !important;
}
body.social-authenticated .halo-tanks-field::before { top: 33% !important; }
body.social-authenticated .halo-tanks-field::after { top: 66% !important; }

body.social-authenticated .halo-tank-cover {
  position: absolute !important;
  bottom: 25px !important;
  width: 46px !important;
  height: 76px !important;
  border: 1px solid #83d4b7 !important;
  border-radius: 16px 16px 7px 7px !important;
  background: linear-gradient(160deg, #397d73, #163d44) !important;
  box-shadow: 0 0 22px rgba(91, 220, 186, .14) !important;
  transform: translateX(-50%) !important;
}
body.social-authenticated .halo-tank-cover.cover-a { left: 42% !important; }
body.social-authenticated .halo-tank-cover.cover-b { left: 67% !important; }
body.social-authenticated .halo-tank {
  position: absolute !important;
  bottom: 28px !important;
  z-index: 3 !important;
  display: grid !important;
  width: 35px !important;
  height: 25px !important;
  place-items: center !important;
  border: 1px solid #b6ebff !important;
  border-radius: 8px !important;
  background: #20afd4 !important;
  color: #062331 !important;
  font-size: 23px !important;
  transform: translateX(-50%) !important;
  transition: left .18s ease !important;
}
body.social-authenticated .halo-tank.cover-self { left: 16% !important; }
body.social-authenticated .halo-tank.cover-opponent { left: 84% !important; background: #9b89ff !important; }
body.social-authenticated .halo-tank-crosshair { position: absolute !important; top: 42% !important; left: 50% !important; color: rgba(126, 220, 255, .55) !important; font-size: 28px !important; transform: translate(-50%, -50%) !important; }
body.social-authenticated .halo-tanks-controls { display: flex !important; justify-content: center !important; gap: 8px !important; }
body.social-authenticated .halo-tanks-controls button { min-width: 50px !important; min-height: 36px !important; padding: 6px 10px !important; border: 1px solid var(--cc-line) !important; border-radius: 10px !important; background: var(--cc-panel-raised) !important; color: var(--cc-text) !important; font-weight: 800 !important; cursor: pointer !important; }
body.social-authenticated .halo-tanks-controls button[data-tank-action="shoot"] { background: var(--cc-accent) !important; color: #062331 !important; }

body.social-authenticated .halo-chess-board {
  display: grid !important;
  width: min(420px, 100%) !important;
  aspect-ratio: 1 !important;
  grid-template-columns: repeat(8, 1fr) !important;
  margin: 18px auto 0 !important;
  overflow: hidden !important;
  border: 6px solid #1a2c45 !important;
  border-radius: 15px !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .24) !important;
}
body.social-authenticated .halo-chess-board button {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: clamp(19px, 4vw, 34px) !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
body.social-authenticated .halo-chess-board button.is-light { background: #d9c9a6 !important; color: #233249 !important; }
body.social-authenticated .halo-chess-board button.is-dark { background: #55718a !important; color: #f4e9ca !important; }
body.social-authenticated .halo-chess-board button.is-selected { outline: 3px solid #68def2 !important; outline-offset: -3px !important; }

@media (max-width: 900px) {
  body.social-authenticated .halo-games-layout { grid-template-columns: minmax(0, 1fr) !important; overflow: auto !important; }
  body.social-authenticated .halo-game-chat { min-height: 430px !important; }
}

@media (max-width: 680px) {
  body.social-authenticated .halo-games-layout { padding: 10px !important; gap: 10px !important; }
  body.social-authenticated .halo-game-tabs button { font-size: 9px !important; padding-inline: 5px !important; }
  body.social-authenticated .halo-game-panel { padding: 17px !important; }
  body.social-authenticated .halo-game-chat { min-height: 410px !important; padding: 10px !important; }
}

/* V49: reply context, forwarded labels, and secure forwarding dialog. */
body.social-authenticated [hidden] {
  display: none !important;
}

body.social-authenticated .direct-chat-form {
  position: relative !important;
}

body.social-authenticated .halo-reply-preview {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: min(760px, calc(100% - 24px)) !important;
  min-height: 42px !important;
  margin: 0 auto 7px !important;
  padding: 8px 10px 8px 13px !important;
  border-left: 3px solid var(--cc-accent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--cc-accent-soft) 70%, var(--cc-panel)) !important;
  color: var(--cc-text) !important;
}

body.social-authenticated .direct-chat-form > .halo-reply-preview {
  min-height: 42px !important;
  border: 0 !important;
  border-left: 3px solid var(--cc-accent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--cc-accent-soft) 70%, var(--cc-panel)) !important;
  box-shadow: none !important;
}

body.social-authenticated .halo-reply-preview > div {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
}

body.social-authenticated .halo-reply-preview b {
  color: var(--cc-accent) !important;
  font-size: 10px !important;
}

body.social-authenticated .halo-reply-preview span {
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--cc-muted) !important;
  font-size: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.social-authenticated .halo-reply-preview button {
  display: grid !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--cc-panel-raised) !important;
  color: var(--cc-text) !important;
  cursor: pointer !important;
}

body.social-authenticated .halo-message-reply {
  display: grid !important;
  gap: 3px !important;
  max-width: min(360px, 100%) !important;
  margin: 0 0 7px !important;
  padding: 7px 9px !important;
  border-left: 3px solid var(--cc-accent) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--cc-accent-soft) 70%, transparent) !important;
}

body.social-authenticated .halo-message-reply b {
  color: var(--cc-accent) !important;
  font-size: 9px !important;
}

body.social-authenticated .halo-message-reply span {
  overflow: hidden !important;
  color: var(--cc-muted) !important;
  font-size: 10px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.social-authenticated .halo-forwarded-label {
  display: block !important;
  margin-bottom: 5px !important;
  color: var(--cc-accent) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

body.social-authenticated .halo-forward-dialog {
  width: min(420px, calc(100% - 28px)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cc-text) !important;
}

body.social-authenticated .halo-forward-dialog::backdrop {
  background: rgba(2, 7, 18, .72) !important;
  backdrop-filter: blur(12px) !important;
}

body.social-authenticated .halo-forward-card {
  position: relative !important;
  display: grid !important;
  gap: 10px !important;
  padding: 26px !important;
  border: 1px solid var(--cc-line-strong) !important;
  border-radius: 24px !important;
  background: var(--cc-panel) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42) !important;
}

body.social-authenticated .halo-forward-card h2 {
  margin: 2px 0 !important;
  color: var(--cc-text) !important;
  font-size: 22px !important;
}

body.social-authenticated .halo-forward-card > p:not(.overline) {
  margin: 0 0 8px !important;
  color: var(--cc-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body.social-authenticated .halo-forward-card label {
  display: grid !important;
  gap: 7px !important;
  color: var(--cc-muted) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

body.social-authenticated .halo-forward-card select {
  min-height: 44px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
}

body.social-authenticated .halo-forward-close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 10px !important;
  background: var(--cc-panel-raised) !important;
  color: var(--cc-text) !important;
  cursor: pointer !important;
}

body.social-authenticated .halo-forward-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
  margin-top: 10px !important;
}

/* V54: games lobby is icon-only; each game opens in a separate two-tile workspace. */
body.social-authenticated .halo-games-layout {
  display: block !important;
  padding: 18px !important;
}
body.social-authenticated .halo-games {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  overflow: auto !important;
}
body.social-authenticated .halo-game-tabs {
  display: flex !important;
  width: fit-content !important;
  margin: 24px auto !important;
  padding: 10px !important;
  gap: 12px !important;
  border: 1px solid color-mix(in srgb, var(--cc-line-strong) 80%, transparent) !important;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--cc-panel) 68%, transparent) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.18) !important;
}
body.social-authenticated .halo-game-tabs button {
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 20px !important;
  background: transparent !important;
  color: var(--cc-muted) !important;
  font-size: 32px !important;
  line-height: 1 !important;
}
body.social-authenticated .halo-game-tabs button:hover,
body.social-authenticated .halo-game-tabs button.is-active {
  border-color: var(--cc-accent) !important;
  background: var(--cc-accent-soft) !important;
  color: var(--cc-accent) !important;
  transform: translateY(-2px) !important;
}
body.social-authenticated .halo-games > .halo-game-panel,
body.social-authenticated .halo-games-layout > .halo-game-chat {
  display: none !important;
}
body.social-authenticated .halo-game-window {
  width: min(1120px, calc(100vw - 34px)) !important;
  height: min(760px, calc(100vh - 34px)) !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--cc-line-strong) !important;
  border-radius: 28px !important;
  background: var(--cc-panel-deep) !important;
  color: var(--cc-text) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.48) !important;
}
body.social-authenticated .halo-game-window::backdrop {
  background: rgba(3, 7, 16, .72) !important;
  backdrop-filter: blur(12px) !important;
}
body.social-authenticated .halo-game-window-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 76px !important;
  padding: 14px 18px !important;
  background: color-mix(in srgb, var(--cc-panel) 78%, transparent) !important;
}
body.social-authenticated .halo-game-window-head .overline { margin: 0 0 3px !important; }
body.social-authenticated .halo-game-window-head h2 { margin: 0 !important; font-size: 22px !important; }
body.social-authenticated .halo-game-window-head > button {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 12px !important;
  background: var(--cc-panel-raised) !important;
  color: var(--cc-text) !important;
  font-size: 22px !important;
  cursor: pointer !important;
}
body.social-authenticated .halo-game-window-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr) !important;
  gap: 14px !important;
  height: calc(100% - 76px) !important;
  min-height: 0 !important;
  padding: 14px !important;
}
body.social-authenticated .halo-game-window-board,
body.social-authenticated .halo-game-window-chat {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 22px !important;
  background: color-mix(in srgb, var(--cc-panel) 64%, transparent) !important;
}
body.social-authenticated .halo-game-window-board {
  overflow: auto !important;
  padding: 18px !important;
}
body.social-authenticated .halo-game-window-board > .halo-game-panel {
  display: block !important;
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.social-authenticated .halo-game-window-chat {
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) !important;
}
body.social-authenticated .halo-game-window-chat > .halo-game-chat {
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  padding: 14px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
}
body.social-authenticated #halo-game-window .direct-chat-translate,
body.social-authenticated #halo-game-window #halo-translate-button {
  display: flex !important;
}
body.social-authenticated #halo-game-window #halo-translate-button { display: grid !important; }
@media (max-width: 760px) {
  body.social-authenticated .halo-game-window { width: calc(100vw - 18px) !important; height: calc(100vh - 18px) !important; border-radius: 20px !important; }
  body.social-authenticated .halo-game-window-grid { grid-template-columns: 1fr !important; grid-template-rows: minmax(300px, 1fr) minmax(300px, 1fr) !important; overflow: auto !important; }
  body.social-authenticated .halo-game-tabs button { flex-basis: 60px !important; width: 60px !important; height: 60px !important; min-height: 60px !important; font-size: 27px !important; }
}

/* V85: the old game route is intentionally replaced by a clean rebuild surface. */
body.social-authenticated .halo-games-rebuild {
  display: grid !important;
  width: min(720px, 100%) !important;
  min-height: min(460px, calc(100vh - 210px)) !important;
  margin: auto !important;
  padding: clamp(34px, 7vw, 72px) clamp(22px, 6vw, 64px) !important;
  place-items: center !important;
  align-content: center !important;
  text-align: center !important;
  border: 1px solid color-mix(in srgb, var(--cc-line-strong) 74%, transparent) !important;
  border-radius: 30px !important;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--cc-accent) 16%, transparent), transparent 48%), color-mix(in srgb, var(--cc-panel) 62%, transparent) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .08) !important;
}
body.social-authenticated .halo-games-rebuild-icon {
  display: grid !important;
  width: 72px !important;
  height: 72px !important;
  margin-bottom: 20px !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 46%, var(--cc-line)) !important;
  border-radius: 23px !important;
  background: var(--cc-accent-soft) !important;
  color: var(--cc-accent) !important;
  font-size: 32px !important;
  box-shadow: 0 16px 38px color-mix(in srgb, var(--cc-accent) 18%, transparent) !important;
}
body.social-authenticated .halo-games-rebuild .overline {
  margin: 0 0 8px !important;
  color: var(--cc-accent) !important;
}
body.social-authenticated .halo-games-rebuild h2 {
  margin: 0 !important;
  color: var(--cc-text) !important;
  font-size: clamp(22px, 4vw, 32px) !important;
  letter-spacing: -.04em !important;
}
body.social-authenticated .halo-games-rebuild > p:not(.overline) {
  max-width: 510px !important;
  margin: 12px auto 0 !important;
  color: var(--cc-muted) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}
body.social-authenticated .halo-games-rebuild-plan {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 24px !important;
}
body.social-authenticated .halo-games-rebuild-plan span {
  padding: 8px 11px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--cc-panel-raised) 72%, transparent) !important;
  color: var(--cc-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] body.social-authenticated .halo-games-rebuild {
  background: color-mix(in srgb, #fff 78%, transparent) !important;
}

/* V84: reusable HTML multiplayer game workspace shell. */
body.social-authenticated .halo-game-tabs button {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  font-family: Manrope, system-ui, sans-serif !important;
}
body.social-authenticated .halo-game-tabs button span {
  pointer-events: none !important;
}
body.social-authenticated .halo-game-tabs button::after {
  content: attr(data-players) "P" !important;
  position: absolute !important;
  right: 7px !important;
  bottom: 6px !important;
  min-width: 18px !important;
  padding: 2px 4px !important;
  border: 1px solid color-mix(in srgb, var(--cc-line-strong) 75%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--cc-panel-deep) 82%, transparent) !important;
  color: var(--cc-muted) !important;
  font-size: 7px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}
body.social-authenticated .halo-game-tabs button.is-active::after,
body.social-authenticated .halo-game-tabs button:hover::after {
  color: var(--cc-accent) !important;
}
body.social-authenticated .halo-game-window-head > div {
  min-width: 0 !important;
}
body.social-authenticated .halo-game-window-head h2 {
  letter-spacing: -.03em !important;
}
body.social-authenticated .halo-game-window-head [data-game-window-meta] {
  margin: 5px 0 0 !important;
  color: var(--cc-muted) !important;
  font-size: 10px !important;
}
body.social-authenticated .halo-game-window-board .halo-game-lobby {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  padding: 10px !important;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 25%, var(--cc-line)) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--cc-panel-deep) 88%, transparent) !important;
  backdrop-filter: blur(16px) !important;
}
body.social-authenticated .halo-game-window-board .halo-game-lobby select {
  min-width: 0 !important;
}
body.social-authenticated .halo-game-window-chat {
  min-height: 0 !important;
}
@media (max-width: 760px) {
  body.social-authenticated .halo-game-window-board .halo-game-lobby {
    position: static !important;
  }
  body.social-authenticated .halo-game-window-head [data-game-window-meta] {
    font-size: 9px !important;
  }
}


/* V68: tighten the bottom dock gap and allow the complete profile view to scroll. */
body.social-authenticated .social-shell {
  box-sizing:border-box !important;
  padding-bottom:14px !important;
}
body.social-authenticated .social-rail {
  bottom:6px !important;
}
body.social-authenticated .social-view[data-social-panel="chats"] {
  padding-bottom:0 !important;
}
body.social-authenticated .social-view[data-social-panel="profile"] {
  min-height:0 !important;
  max-height:100% !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:0 8px 110px !important;
  box-sizing:border-box !important;
  scrollbar-width:thin !important;
  scrollbar-color:color-mix(in srgb,var(--cc-accent) 60%,transparent) transparent !important;
}
body.social-authenticated .social-view[data-social-panel="profile"] .social-profile-grid,
body.social-authenticated .social-view[data-social-panel="profile"] > .halo-profile-logout {
  flex-shrink:0 !important;
}
body.social-authenticated .halo-message-reply { position:relative !important; }
body.social-authenticated .halo-reply-thumbnail {
  display:block !important;
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
  margin-top:5px !important;
  border-radius:10px !important;
  object-fit:cover !important;
  border:1px solid color-mix(in srgb,var(--cc-accent) 32%,transparent) !important;
}
body.social-authenticated .halo-forward-contact {
  min-height:116px !important;
  padding:8px !important;
  border-radius:12px !important;
}
@media(max-width:680px) {
  body.social-authenticated .social-shell { padding-bottom:10px !important; }
  body.social-authenticated .social-rail { bottom:4px !important; }
  body.social-authenticated .social-view[data-social-panel="profile"] { padding:0 4px 100px !important; }
}


/* V69: checkbox contact picker, compact media, and dock-aligned utility controls. */
body.social-authenticated .halo-forward-contacts {
  display:grid !important;
  gap:6px !important;
  max-height:260px !important;
  overflow:auto !important;
  padding:2px !important;
}
body.social-authenticated .halo-forward-contact-option {
  display:grid !important;
  grid-template-columns:18px 34px minmax(0,1fr) !important;
  align-items:center !important;
  gap:9px !important;
  min-height:50px !important;
  padding:7px 9px !important;
  border:1px solid var(--cc-line) !important;
  border-radius:12px !important;
  background:var(--cc-panel-raised) !important;
  cursor:pointer !important;
}
body.social-authenticated .halo-forward-contact-option:has(input:checked) {
  border-color:var(--cc-accent) !important;
  background:color-mix(in srgb,var(--cc-accent) 12%,var(--cc-panel-raised)) !important;
}
body.social-authenticated .halo-forward-contact-option input { accent-color:var(--cc-accent) !important; }
body.social-authenticated .halo-forward-contact-option .social-contact-avatar {
  width:34px !important; height:34px !important; min-width:34px !important; border-radius:10px !important;
}
body.social-authenticated .halo-forward-contact-identity { display:grid !important; min-width:0 !important; gap:2px !important; }
body.social-authenticated .halo-forward-contact-identity b,
body.social-authenticated .halo-forward-contact-identity small { overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
body.social-authenticated .halo-forward-contact-identity b { color:var(--cc-text) !important; font-size:11px !important; }
body.social-authenticated .halo-forward-contact-identity small { color:var(--cc-muted) !important; font-size:9px !important; }
body.social-authenticated .halo-chat-image,
body.social-authenticated .halo-chat-video { max-width:min(52%,280px) !important; }
body.social-authenticated .halo-chat-image img,
body.social-authenticated .halo-chat-video video {
  width:100% !important; max-width:260px !important; max-height:170px !important; aspect-ratio:auto !important; object-fit:contain !important;
}
body.social-authenticated .halo-chat-video video { aspect-ratio:16 / 9 !important; }
body.social-authenticated .halo-audio-play {
  width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; border-radius:50% !important;
}
body.social-authenticated .topbar {
  bottom:76px !important;
  height:44px !important;
  min-height:44px !important;
  align-items:flex-start !important;
  padding:0 16px !important;
}
body.social-authenticated .topbar .wordmark,
body.social-authenticated .topbar .topbar-actions { align-self:flex-start !important; }
@media(max-width:680px) {
  body.social-authenticated .topbar { bottom:72px !important; height:42px !important; min-height:42px !important; padding:0 8px !important; }
  body.social-authenticated .halo-chat-image,
  body.social-authenticated .halo-chat-video { max-width:70% !important; }
  body.social-authenticated .halo-chat-image img,
  body.social-authenticated .halo-chat-video video { max-width:220px !important; max-height:145px !important; }
}

/* V70: align the utility bar with the bottom dock and keep all native
   selectors readable in both themes. */
body.social-authenticated .topbar {
  bottom: 12px !important;
  height: 76px !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 0 28px !important;
  align-items: center !important;
  pointer-events: none !important;
  border-radius: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.social-authenticated .topbar .wordmark,
body.social-authenticated .topbar .topbar-actions {
  align-self: center !important;
  pointer-events: auto !important;
}
body.social-authenticated .topbar .wordmark {
  font-size: 18px !important;
  font-weight: 800 !important;
}
body.social-authenticated .topbar .logo-mark {
  width: 32px !important;
  height: 32px !important;
}
body.social-authenticated .topbar-actions {
  align-items: center !important;
  gap: 8px !important;
}
body.social-authenticated .topbar-actions > .header-language {
  display: block !important;
  flex: 0 0 76px !important;
  width: 76px !important;
  min-width: 76px !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}
body.social-authenticated .topbar-actions > .header-language select {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 8px !important;
  color: var(--cc-text) !important;
  background: var(--cc-panel-raised) !important;
  text-align: center !important;
}
body.social-authenticated .topbar-actions > .header-language select option,
body.social-authenticated select option {
  color: #fff !important;
  background: #0b1220 !important;
}
body.social-authenticated .topbar-actions > #halo-theme-toggle,
body.social-authenticated .topbar-actions > #header-profile-button,
body.social-authenticated .topbar-actions > #account-menu,
body.social-authenticated .topbar-actions > #account-menu #logout-button {
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
}
body.social-authenticated .topbar-actions > #header-profile-button:not([hidden]) {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 98px !important;
  gap: 7px !important;
  padding: 5px 12px 5px 7px !important;
}
body.social-authenticated .topbar-actions .header-profile-label {
  display: inline !important;
  visibility: visible !important;
  color: var(--cc-text) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}
body.social-authenticated .topbar-actions > #account-menu:not([hidden]) {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
}
body.social-authenticated .topbar-actions > #account-menu #logout-button {
  display: inline-flex !important;
  width: auto !important;
  min-width: 82px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
  visibility: visible !important;
}
body.social-authenticated .topbar-actions > #account-menu #logout-button::before {
  content: none !important;
}
body.social-authenticated .halo-forward-dialog {
  position: fixed !important;
  inset: 0 !important;
  z-index: 500 !important;
  margin: auto !important;
  padding: 18px !important;
  align-items: center !important;
  justify-content: center !important;
  background: color-mix(in srgb, #020611 62%, transparent) !important;
}
body.social-authenticated .halo-forward-dialog[open] {
  display: flex !important;
}
body.social-authenticated .halo-forward-card {
  width: min(420px, calc(100vw - 36px)) !important;
  max-height: min(620px, calc(100vh - 36px)) !important;
  overflow: auto !important;
  background: color-mix(in srgb, var(--cc-panel) 94%, #050914) !important;
  color: var(--cc-text) !important;
}
body.social-authenticated .halo-game-lobby select {
  color: #fff !important;
  background: #0b1220 !important;
  border-color: color-mix(in srgb, var(--cc-accent) 32%, var(--cc-line)) !important;
}
body.social-authenticated .halo-game-lobby select option {
  color: #fff !important;
  background: #0b1220 !important;
}
#direct-chat-last-seen {
  color: var(--cc-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}
.direct-chat-header p {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px !important;
}
@media (max-width: 680px) {
  body.social-authenticated .topbar {
    bottom: 8px !important;
    height: 70px !important;
    min-height: 70px !important;
    padding: 0 12px !important;
  }
  body.social-authenticated .topbar .wordmark { font-size: 16px !important; }
  body.social-authenticated .topbar .logo-mark { width: 30px !important; height: 30px !important; }
  body.social-authenticated .topbar-actions > .header-language {
    flex-basis: 64px !important;
    width: 64px !important;
    min-width: 64px !important;
  }
  body.social-authenticated .topbar-actions > #header-profile-button:not([hidden]) {
    min-width: 44px !important;
    padding: 5px !important;
  }
  body.social-authenticated .topbar-actions .header-profile-label,
  body.social-authenticated .topbar-actions > #account-menu #logout-button {
    font-size: 10px !important;
  }
}

/* V71: restore the in-chat contact details drawer instead of a modal popup. */
body.social-authenticated #direct-chat-card { position: relative !important; overflow: hidden !important; }
body.social-authenticated .halo-contact-details-sidebar {
  position: absolute !important;
  z-index: 80 !important;
  inset: 0 0 0 auto !important;
  width: min(360px, 92%) !important;
  display: block !important;
  overflow: hidden !important;
  transform: translateX(104%) !important;
  transition: transform .24s ease !important;
  background: color-mix(in srgb, var(--cc-panel) 96%, #050914) !important;
  color: var(--cc-text) !important;
  box-shadow: -24px 0 70px rgba(0,0,0,.28), inset 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}
body.social-authenticated .halo-contact-details-sidebar[hidden] { display: block !important; visibility: hidden !important; pointer-events: none !important; }
body.social-authenticated .halo-contact-details-sidebar.is-open { transform: translateX(0) !important; visibility: visible !important; pointer-events: auto !important; }
body.social-authenticated .halo-contact-sidebar-head {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  min-height: 64px !important; padding: 14px 16px !important;
  border-bottom: 1px solid var(--cc-line) !important;
}
body.social-authenticated .halo-contact-sidebar-head .overline { margin: 0 !important; color: var(--cc-accent) !important; }
body.social-authenticated .halo-contact-details-close {
  position: static !important; display: grid !important; place-items: center !important;
  width: 40px !important; height: 40px !important; border: 0 !important;
  border-radius: 50% !important; background: var(--cc-panel-raised) !important;
  color: var(--cc-text) !important; font-size: 20px !important; cursor: pointer !important;
}
body.social-authenticated .halo-contact-sidebar-scroll {
  height: calc(100% - 64px) !important; overflow-y: auto !important;
  padding: 28px 24px 110px !important; box-sizing: border-box !important; text-align: center !important;
}
body.social-authenticated .halo-contact-details-avatar {
  display: grid !important; place-items: center !important; overflow: hidden !important;
  width: 156px !important; height: 156px !important; min-width: 156px !important;
  margin: 4px auto 18px !important; padding: 0 !important; border: 3px solid var(--cc-accent) !important;
  border-radius: 50% !important; background: var(--cc-accent-soft) !important;
  color: var(--cc-accent) !important; font-size: 34px !important; font-weight: 850 !important;
  box-shadow: 0 18px 54px color-mix(in srgb, var(--cc-accent) 24%, transparent) !important; cursor: zoom-in !important;
}
body.social-authenticated .halo-contact-details-avatar .avatar-image { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; }
body.social-authenticated .halo-contact-sidebar-scroll > h2 { margin: 0 !important; color: var(--cc-text) !important; font-size: 27px !important; }
body.social-authenticated .halo-contact-details-username { margin: 6px 0 0 !important; color: var(--cc-accent) !important; font-size: 14px !important; font-weight: 750 !important; }
body.social-authenticated .halo-contact-details-country { margin: 8px 0 26px !important; color: var(--cc-muted) !important; font-size: 14px !important; }
body.social-authenticated .halo-contact-details-body { display: grid !important; gap: 0 !important; text-align: left !important; }
body.social-authenticated .halo-contact-detail-row { grid-template-columns: 104px minmax(0,1fr) !important; min-height: 58px !important; align-items: center !important; padding: 12px 0 !important; border-bottom: 1px solid var(--cc-line) !important; }
body.social-authenticated .halo-contact-detail-row b { font-size: 10px !important; letter-spacing: .1em !important; color: var(--cc-muted) !important; text-transform: uppercase !important; }
body.social-authenticated .halo-contact-detail-row span { color: var(--cc-text) !important; font-size: 14px !important; line-height: 1.45 !important; }
body.social-authenticated .halo-contact-detail-tags { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
body.social-authenticated .halo-contact-detail-tags i { padding: 5px 8px !important; border: 1px solid var(--cc-line) !important; border-radius: 999px !important; color: var(--cc-accent) !important; font-size: 11px !important; font-style: normal !important; }
body.social-authenticated .halo-contact-details-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 26px !important; }
body.social-authenticated .halo-contact-details-actions button { min-height: 50px !important; border: 1px solid var(--cc-line) !important; border-radius: 16px !important; background: var(--cc-panel-raised) !important; color: var(--cc-text) !important; cursor: pointer !important; font-weight: 750 !important; }
body.social-authenticated .halo-contact-details-actions button.primary { border-color: transparent !important; background: var(--cc-accent) !important; color: #062532 !important; }
body.social-authenticated .halo-contact-details-actions button:first-letter { font-size: 20px !important; }
body.social-authenticated .halo-avatar-viewer { z-index: 500 !important; width: min(780px, calc(100% - 28px)) !important; max-width: 780px !important; padding: 0 !important; border: 1px solid var(--cc-line-strong) !important; border-radius: 26px !important; background: #050914 !important; color: #fff !important; box-shadow: 0 28px 100px rgba(0,0,0,.64) !important; }
body.social-authenticated .halo-avatar-viewer::backdrop { background: rgba(1,5,12,.82) !important; backdrop-filter: blur(12px) !important; }
body.social-authenticated .halo-avatar-viewer-card { position: relative !important; display: grid !important; place-items: center !important; min-height: min(680px, 78vh) !important; padding: 30px !important; }
body.social-authenticated .halo-avatar-viewer-card img { display: block !important; width: min(620px, 86vw) !important; height: min(620px, 70vh) !important; object-fit: contain !important; border-radius: 50% !important; }
body.social-authenticated .halo-avatar-viewer-close { position: absolute !important; top: 14px !important; right: 14px !important; z-index: 1 !important; display: grid !important; place-items: center !important; width: 44px !important; height: 44px !important; border: 0 !important; border-radius: 50% !important; background: var(--cc-panel-raised) !important; color: var(--cc-text) !important; font-size: 22px !important; cursor: pointer !important; }
body.social-authenticated .halo-avatar-viewer-card p { margin: 8px 0 0 !important; color: var(--cc-muted) !important; font-size: 12px !important; }
@media (max-width: 680px) {
  body.social-authenticated .halo-contact-details-sidebar { width: 100% !important; }
  body.social-authenticated .halo-contact-details-avatar { width: 128px !important; height: 128px !important; min-width: 128px !important; }
  body.social-authenticated .halo-contact-sidebar-scroll { padding-left: 18px !important; padding-right: 18px !important; }
  body.social-authenticated .halo-contact-detail-row { grid-template-columns: 92px minmax(0,1fr) !important; }
}

/* V72: restore profile identity fields and unify circular close/call controls. */
body.social-authenticated .halo-contact-details-username {
  display: block !important;
  min-height: 18px !important;
  color: var(--cc-accent) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}
body.social-authenticated .halo-contact-details-country {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 22px !important;
  color: var(--cc-muted) !important;
  font-size: 14px !important;
}
body.social-authenticated .halo-contact-details-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
}
body.social-authenticated .halo-contact-details-actions button {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 34%, var(--cc-line)) !important;
  border-radius: 50% !important;
  background: var(--cc-panel-raised) !important;
  color: var(--cc-text) !important;
  font-size: 0 !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
body.social-authenticated .halo-contact-details-actions button::before {
  display: block !important;
  font-size: 24px !important;
  line-height: 1 !important;
}
body.social-authenticated .halo-contact-details-actions button[data-contact-audio]::before { content: '☎' !important; }
body.social-authenticated .halo-contact-details-actions button[data-contact-video]::before { content: '▣' !important; }
body.social-authenticated .halo-contact-details-actions button span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
body.social-authenticated .halo-contact-details-actions button:hover {
  transform: translateY(-4px) scale(1.06) !important;
  background: color-mix(in srgb, var(--cc-accent) 18%, var(--cc-panel-raised)) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--cc-accent) 28%, transparent) !important;
}
body.social-authenticated .halo-contact-details-actions button:active { transform: scale(.94) !important; }
body.social-authenticated .halo-contact-details-actions button:focus-visible,
body.social-authenticated .halo-contact-details-close:focus-visible,
body.social-authenticated .halo-avatar-viewer-close:focus-visible {
  outline: 2px solid var(--cc-accent) !important;
  outline-offset: 3px !important;
}
@keyframes halo-call-breathe { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cc-accent) 0%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--cc-accent) 12%, transparent); } }
body.social-authenticated .halo-contact-details-actions button { animation: halo-call-breathe 2.8s ease-in-out infinite !important; }
body.social-authenticated .halo-contact-details-actions button[data-contact-video] { animation-delay: .6s !important; }

/* Close affordances stay circular across dialogs, drawers, viewers, and menus. */
body.social-authenticated button[aria-label*="Close" i],
body.social-authenticated button[title*="Close" i],
body.social-authenticated .halo-contact-details-close,
body.social-authenticated .halo-avatar-viewer-close,
body.social-authenticated .halo-forward-close,
body.social-authenticated .halo-game-dialog-close,
body.social-authenticated .sidebar-close,
body.social-authenticated .halo-image-viewer > button {
  border-radius: 50% !important;
}
body.social-authenticated button[aria-label*="Close" i],
body.social-authenticated button[title*="Close" i] {
  aspect-ratio: 1 / 1 !important;
}

/* Translation remains readable against the light glass chat surface. */
html[data-theme="light"] body.social-authenticated .direct-chat-message .translated,
html[data-theme="light"] body.social-authenticated .direct-chat-message [class*="translated"] {
  color: #164e63 !important;
  border-top-color: rgba(22, 78, 99, .18) !important;
  font-weight: 650 !important;
}
html[data-theme="light"] body.social-authenticated .direct-chat-message .halo-message-translation {
  color: #164e63 !important;
}

/* V72 global close-control consistency, including auth and call surfaces. */
button[aria-label*="Close" i],
button[title*="Close" i],
button[data-close],
.sidebar-close,
.halo-forward-close,
.halo-game-dialog-close,
.halo-image-viewer > button {
  border-radius: 50% !important;
}

/* V73: final control geometry and global Manrope typography. */
html, body, button, input, textarea, select, option, label, p, h1, h2, h3, h4, h5, h6, small, strong, b, span {
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body.social-authenticated .halo-contact-details-actions button {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  animation: halo-call-breathe 2.8s ease-in-out infinite !important;
}
body.social-authenticated .halo-contact-details-actions button[data-contact-video] { animation-delay: .6s !important; }
body.social-authenticated .halo-contact-details-close,
body.social-authenticated .halo-avatar-viewer-close {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
}
body.social-authenticated .topbar-actions > #header-profile-button:not([hidden]) {
  display: inline-flex !important;
  width: auto !important;
  min-width: 100px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 5px 12px 5px 8px !important;
  gap: 7px !important;
}
body.social-authenticated .topbar-actions #header-profile-button .header-profile-label {
  display: inline !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
  visibility: visible !important;
  color: var(--cc-text) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 750 !important;
}
/* Every close affordance uses a true circle, not a rounded rectangle. */
button[aria-label*="Close" i],
button[title*="Close" i],
button[data-close],
.sidebar-close,
.halo-forward-close,
.halo-game-dialog-close,
.halo-image-viewer > button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
}
@media (max-width: 680px) {
  body.social-authenticated .topbar-actions > #header-profile-button:not([hidden]) { min-width: 92px !important; }
}

/* V74: mobile utility dropdown stays above the navigation dock. */
.mobile-utility-toggle { display: none !important; }
@media (max-width: 680px) {
  body.social-authenticated .app-shell {
    padding-bottom: 96px !important;
  }
  body.social-authenticated .topbar {
    top: auto !important;
    right: 10px !important;
    bottom: 86px !important;
    left: auto !important;
    width: auto !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: flex-end !important;
    pointer-events: none !important;
  }
  body.social-authenticated .topbar .wordmark { display: none !important; }
  body.social-authenticated .topbar-actions {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    justify-items: stretch !important;
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    gap: 6px !important;
    border-radius: 16px !important;
    pointer-events: auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.social-authenticated .mobile-utility-toggle {
    display: grid !important;
    position: relative !important;
    z-index: 2 !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border: 1px solid var(--cc-line-strong) !important;
    border-radius: 15px !important;
    background: var(--cc-panel-raised) !important;
    color: var(--cc-text) !important;
    font-size: 25px !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }
  body.social-authenticated .topbar-actions > .header-language,
  body.social-authenticated .topbar-actions > #halo-theme-toggle,
  body.social-authenticated .topbar-actions > #header-profile-button,
  body.social-authenticated .topbar-actions > #account-menu {
    display: none !important;
  }
  body.social-authenticated .topbar-actions.is-mobile-open {
    width: min(224px, calc(100vw - 20px)) !important;
    height: auto !important;
    min-height: 46px !important;
    padding: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    background: color-mix(in srgb, var(--cc-panel) 94%, transparent) !important;
    border: 1px solid var(--cc-line-strong) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  }
  body.social-authenticated .topbar-actions.is-mobile-open .mobile-utility-toggle {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
  }
  body.social-authenticated .topbar-actions.is-mobile-open > .header-language,
  body.social-authenticated .topbar-actions.is-mobile-open > #halo-theme-toggle,
  body.social-authenticated .topbar-actions.is-mobile-open > #header-profile-button,
  body.social-authenticated .topbar-actions.is-mobile-open > #account-menu {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
  }
  body.social-authenticated .topbar-actions.is-mobile-open > .header-language select {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 13px !important;
  }
  body.social-authenticated .topbar-actions.is-mobile-open > #header-profile-button {
    gap: 5px !important;
    padding: 4px 8px !important;
  }
  body.social-authenticated .topbar-actions.is-mobile-open > #header-profile-button .header-profile-label,
  body.social-authenticated .topbar-actions.is-mobile-open > #account-menu #logout-button {
    display: inline !important;
    font-size: 10px !important;
  }
  body.social-authenticated .topbar-actions.is-mobile-open > #account-menu #logout-button {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    border-radius: 13px !important;
  }
  body.social-authenticated .social-shell,
  body.social-authenticated .social-view[data-social-panel="chats"] {
    padding-bottom: 8px !important;
  }
}

/* V75: keep the compact utility/header block at the top on small screens. */
@media (max-width: 680px) {
  body.social-authenticated .topbar,
  body.social-authenticated .topbar.is-mobile-open {
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: 8px !important;
    width: calc(100% - 16px) !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 6px !important;
    align-items: center !important;
    pointer-events: auto !important;
  }
  body.social-authenticated .topbar .wordmark {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }
  body.social-authenticated .topbar .logo-mark {
    width: 30px !important;
    height: 30px !important;
  }
  body.social-authenticated .topbar-actions,
  body.social-authenticated .topbar-actions.is-mobile-open {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    gap: 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.social-authenticated .topbar-actions .mobile-utility-toggle { display: none !important; }
  body.social-authenticated .topbar-actions > .header-language,
  body.social-authenticated .topbar-actions > #halo-theme-toggle,
  body.social-authenticated .topbar-actions > #header-profile-button,
  body.social-authenticated .topbar-actions > #account-menu,
  body.social-authenticated .topbar-actions.is-mobile-open > .header-language,
  body.social-authenticated .topbar-actions.is-mobile-open > #halo-theme-toggle,
  body.social-authenticated .topbar-actions.is-mobile-open > #header-profile-button,
  body.social-authenticated .topbar-actions.is-mobile-open > #account-menu {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 11px !important;
  }
  body.social-authenticated .topbar-actions > .header-language,
  body.social-authenticated .topbar-actions.is-mobile-open > .header-language {
    flex: 0 0 56px !important;
    width: 56px !important;
    min-width: 56px !important;
  }
  body.social-authenticated .topbar-actions > .header-language select,
  body.social-authenticated .topbar-actions.is-mobile-open > .header-language select {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 5px !important;
    border-radius: 11px !important;
    font-size: 9px !important;
  }
  body.social-authenticated .topbar-actions > #halo-theme-toggle,
  body.social-authenticated .topbar-actions.is-mobile-open > #halo-theme-toggle {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
  }
  body.social-authenticated .topbar-actions > #header-profile-button:not([hidden]),
  body.social-authenticated .topbar-actions.is-mobile-open > #header-profile-button:not([hidden]) {
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 3px 6px !important;
    gap: 4px !important;
  }
  body.social-authenticated .topbar-actions > #header-profile-button .header-profile-avatar,
  body.social-authenticated .topbar-actions.is-mobile-open > #header-profile-button .header-profile-avatar {
    width: 24px !important;
    height: 24px !important;
  }
  body.social-authenticated .topbar-actions > #header-profile-button .header-profile-label,
  body.social-authenticated .topbar-actions.is-mobile-open > #header-profile-button .header-profile-label {
    display: inline !important;
    font-size: 9px !important;
  }
  body.social-authenticated .topbar-actions > #account-menu,
  body.social-authenticated .topbar-actions.is-mobile-open > #account-menu {
    flex: 0 0 68px !important;
    width: 68px !important;
    min-width: 68px !important;
  }
  body.social-authenticated .topbar-actions > #account-menu #logout-button,
  body.social-authenticated .topbar-actions.is-mobile-open > #account-menu #logout-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 68px !important;
    min-width: 68px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 4px !important;
    border-radius: 11px !important;
    font-size: 9px !important;
  }
}

/* V76: the utility/header block is top-aligned at every viewport size. */
body.social-authenticated .topbar {
  top: 14px !important;
  right: 24px !important;
  bottom: auto !important;
  left: 24px !important;
  width: auto !important;
  height: 54px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  align-items: center !important;
}
body.social-authenticated .social-shell {
  padding-top: 68px !important;
}
@media (max-width: 680px) {
  body.social-authenticated .topbar {
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: 8px !important;
    width: calc(100% - 16px) !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 6px !important;
  }
  body.social-authenticated .social-shell {
    padding-top: 58px !important;
  }
}

/* V77: keep the utility block in normal flow above the conversation container. */
body.social-authenticated .topbar {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  z-index: 20 !important;
}
body.social-authenticated .social-shell {
  padding-top: 0 !important;
}
@media (max-width: 680px) {
  body.social-authenticated .topbar {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 6px !important;
  }
  body.social-authenticated .social-shell {
    padding-top: 0 !important;
  }
}

/* V78: empty-chat state uses the same middle surface and dock-safe alignment. */
body.social-authenticated .social-dashboard-grid:not(.direct-chat-open) {
  background: var(--cc-panel-deep) !important;
}
body.social-authenticated .social-dashboard-grid:not(.direct-chat-open) > .social-side-stack {
  display: grid !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 0 24px 76px !important;
  background: transparent !important;
  border: 0 !important;
}
body.social-authenticated .social-dashboard-grid:not(.direct-chat-open) .halo-chat-welcome {
  align-self: center !important;
  justify-self: center !important;
  width: min(380px, 100%) !important;
  padding: 22px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
}
html[data-theme="light"] body.social-authenticated .social-dashboard-grid:not(.direct-chat-open),
html[data-theme="light"] body.social-authenticated .social-dashboard-grid:not(.direct-chat-open) > .social-side-stack {
  background: color-mix(in srgb, var(--cc-panel) 86%, var(--cc-canvas)) !important;
}
html[data-theme="dark"] body.social-authenticated .social-dashboard-grid:not(.direct-chat-open),
html[data-theme="dark"] body.social-authenticated .social-dashboard-grid:not(.direct-chat-open) > .social-side-stack {
  background: color-mix(in srgb, var(--cc-panel-deep) 92%, var(--cc-canvas)) !important;
}
@media (max-width: 680px) {
  body.social-authenticated .social-dashboard-grid:not(.direct-chat-open) > .social-side-stack {
    min-height: 0 !important;
    padding: 18px 14px 82px !important;
  }
}

/* V79: center the empty-chat state on the full middle surface and remove the side-stack fill. */
body.social-authenticated .social-dashboard-grid:not(.direct-chat-open) > .social-side-stack,
body.social-authenticated .social-side-stack {
  background: transparent !important;
}
@media (min-width: 681px) {
  body.social-authenticated .social-dashboard-grid:not(.direct-chat-open) {
    position: relative !important;
    overflow: hidden !important;
  }
  body.social-authenticated .social-dashboard-grid:not(.direct-chat-open) > .social-contacts-card {
    position: relative !important;
    z-index: 2 !important;
  }
  body.social-authenticated .social-dashboard-grid:not(.direct-chat-open) > .social-side-stack {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    align-content: center !important;
    justify-items: center !important;
    padding: 0 0 76px !important;
    pointer-events: none !important;
  }
  body.social-authenticated .social-dashboard-grid:not(.direct-chat-open) .halo-chat-welcome {
    position: relative !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}
@media (max-width: 680px) {
  body.social-authenticated .social-dashboard-grid:not(.direct-chat-open) > .social-side-stack {
    min-height: 0 !important;
    height: auto !important;
    align-content: center !important;
    padding: 18px 14px 82px !important;
  }
}

/* V80: Guilds news cards and in-section reader. */
body.social-authenticated .halo-news-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}
body.social-authenticated .halo-news-card {
  position: relative !important;
  min-height: 310px !important;
  overflow: hidden !important;
  padding: 0 17px 17px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
body.social-authenticated .halo-news-card:hover,
body.social-authenticated .halo-news-card:focus-visible {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--cc-accent) 52%, var(--cc-line)) !important;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--cc-accent) 16%, transparent) !important;
  outline: none !important;
}
body.social-authenticated .halo-news-image {
  height: 150px !important;
  margin: 0 -17px 14px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cc-accent) 24%, var(--cc-panel-raised)), var(--cc-panel-deep)) !important;
}
body.social-authenticated .halo-news-image.is-empty::after {
  content: 'NEWS' !important;
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center !important;
  color: color-mix(in srgb, var(--cc-accent) 70%, var(--cc-muted)) !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  letter-spacing: .18em !important;
}
body.social-authenticated .halo-news-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
body.social-authenticated .halo-news-card .halo-news-tag { display: block !important; margin-bottom: 7px !important; }
body.social-authenticated .halo-news-card h3 { margin: 0 0 8px !important; font-size: 15px !important; line-height: 1.38 !important; }
body.social-authenticated .halo-news-card p { display: -webkit-box !important; overflow: hidden !important; margin: 0 !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; line-height: 1.45 !important; }
body.social-authenticated .halo-news-read {
  display: block !important;
  margin-top: 14px !important;
  color: var(--cc-accent) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}
body.social-authenticated .halo-news-reader {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: calc(100vh - 190px) !important;
  overflow: hidden !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 22px !important;
  background: var(--cc-panel-deep) !important;
}
body.social-authenticated .halo-news-reader[hidden] { display: none !important; }
body.social-authenticated .halo-news-reader > header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 70px !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--cc-line) !important;
  background: color-mix(in srgb, var(--cc-panel) 82%, transparent) !important;
}
body.social-authenticated .halo-news-reader > header > div { min-width: 0 !important; flex: 1 1 auto !important; }
body.social-authenticated .halo-news-reader > header .overline { margin: 0 0 3px !important; color: var(--cc-accent) !important; }
body.social-authenticated .halo-news-reader h2 { overflow: hidden !important; margin: 0 !important; color: var(--cc-text) !important; font-size: 16px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.social-authenticated .halo-news-reader > header button {
  display: grid !important; flex: 0 0 42px !important; place-items: center !important;
  width: 42px !important; height: 42px !important; min-height: 42px !important;
  padding: 0 !important; border: 1px solid var(--cc-line) !important; border-radius: 50% !important;
  background: var(--cc-panel-raised) !important; color: var(--cc-text) !important; cursor: pointer !important;
}
body.social-authenticated .halo-news-reader iframe {
  width: 100% !important; height: 100% !important; min-height: 560px !important;
  border: 0 !important; background: var(--cc-panel) !important;
}
html[data-theme="light"] body.social-authenticated .halo-news-reader,
html[data-theme="light"] body.social-authenticated .halo-news-reader > header,
html[data-theme="light"] body.social-authenticated .halo-news-reader iframe { background: #fff !important; }
@media (max-width: 900px) {
  body.social-authenticated .halo-news-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px) {
  body.social-authenticated .halo-news-list { grid-template-columns: 1fr !important; padding: 0 14px !important; }
  body.social-authenticated .halo-news-reader { min-height: calc(100vh - 150px) !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }
  body.social-authenticated .halo-news-reader iframe { min-height: 0 !important; }
}

/* V81: make the Guild feed independently scrollable so lower cards stay reachable. */
body.social-authenticated .social-view[data-social-panel="communities"] {
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 18px 4px 110px !important;
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in srgb, var(--cc-accent) 58%, transparent) transparent !important;
}
body.social-authenticated .social-view[data-social-panel="communities"]::-webkit-scrollbar { width: 8px !important; }
body.social-authenticated .social-view[data-social-panel="communities"]::-webkit-scrollbar-track { background: transparent !important; }
body.social-authenticated .social-view[data-social-panel="communities"]::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--cc-accent) 58%, transparent) !important;
  background-clip: padding-box !important;
}
body.social-authenticated .social-view[data-social-panel="communities"] .halo-guilds {
  min-height: 100% !important;
  padding-bottom: 26px !important;
}
body.social-authenticated .social-view[data-social-panel="communities"] .halo-news-list { padding-bottom: 28px !important; }
@media (max-width: 680px) {
  body.social-authenticated .social-view[data-social-panel="communities"] {
    height: calc(100% - 4px) !important;
    padding: 12px 0 104px !important;
  }
}

/* V86: Concept A — split glass game room with game-only text chat. */
body.social-authenticated .social-view[data-social-panel="games"] {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
}
body.social-authenticated .halo-games-a {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 14px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 16px 18px 18px !important;
  overflow: hidden !important;
}
body.social-authenticated .halo-games-a-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}
body.social-authenticated .halo-games-a-header h2 {
  margin: 4px 0 4px !important;
  color: var(--cc-text) !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  letter-spacing: -.045em !important;
}
body.social-authenticated .halo-games-a-header p:last-child {
  margin: 0 !important;
  color: var(--cc-muted) !important;
  font-size: 11px !important;
}
body.social-authenticated .halo-games-a-presence {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--cc-panel) 60%, transparent) !important;
  color: var(--cc-muted) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}
body.social-authenticated .halo-games-a-live-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #55e8ae !important;
  box-shadow: 0 0 14px #55e8ae !important;
}
body.social-authenticated .halo-games-a-catalog {
  display: flex !important;
  gap: 9px !important;
  width: 100% !important;
  overflow-x: auto !important;
  padding: 2px 2px 5px !important;
  scrollbar-width: none !important;
}
body.social-authenticated .halo-games-a-catalog::-webkit-scrollbar { display: none !important; }
body.social-authenticated .halo-games-a-catalog button {
  display: grid !important;
  flex: 0 0 132px !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  grid-template-rows: 1fr 1fr !important;
  align-items: center !important;
  column-gap: 8px !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--cc-panel) 58%, transparent) !important;
  color: var(--cc-muted) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
}
body.social-authenticated .halo-games-a-catalog button > span {
  display: grid !important;
  grid-row: 1 / 3 !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: var(--cc-accent-soft) !important;
  color: var(--cc-accent) !important;
  font-size: 17px !important;
}
body.social-authenticated .halo-games-a-catalog button b {
  overflow: hidden !important;
  color: var(--cc-text) !important;
  font-size: 10px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.social-authenticated .halo-games-a-catalog button small {
  color: var(--cc-muted) !important;
  font-size: 8px !important;
}
body.social-authenticated .halo-games-a-catalog button:hover,
body.social-authenticated .halo-games-a-catalog button.is-active {
  border-color: color-mix(in srgb, var(--cc-accent) 72%, var(--cc-line)) !important;
  background: color-mix(in srgb, var(--cc-accent-soft) 82%, var(--cc-panel)) !important;
  transform: translateY(-2px) !important;
}
body.social-authenticated .halo-games-a-workspace {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(285px, 340px) !important;
  gap: 14px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.social-authenticated .halo-games-a-board,
body.social-authenticated .halo-games-a-chat {
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--cc-panel-deep) 78%, transparent) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .06) !important;
  backdrop-filter: blur(22px) !important;
}
body.social-authenticated .halo-games-a-board {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 13px !important;
  min-height: 430px !important;
  padding: 17px !important;
  overflow: hidden !important;
}
body.social-authenticated .halo-games-a-board-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
body.social-authenticated .halo-games-a-game-title {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
}
body.social-authenticated .halo-games-a-game-icon {
  display: grid !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 45%, var(--cc-line)) !important;
  border-radius: 15px !important;
  background: var(--cc-accent-soft) !important;
  color: var(--cc-accent) !important;
  font-size: 23px !important;
}
body.social-authenticated .halo-games-a-game-title .overline { margin: 0 0 3px !important; }
body.social-authenticated .halo-games-a-game-title h3 {
  overflow: hidden !important;
  margin: 0 0 3px !important;
  color: var(--cc-text) !important;
  font-size: 18px !important;
  letter-spacing: -.03em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.social-authenticated .halo-games-a-game-title small {
  color: var(--cc-muted) !important;
  font-size: 9px !important;
}
body.social-authenticated .halo-games-a-board-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
}
body.social-authenticated .halo-games-a-contact-picker {
  display: grid !important;
  gap: 3px !important;
  min-width: 128px !important;
  color: var(--cc-muted) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}
body.social-authenticated .halo-games-a-contact-picker select {
  min-height: 35px !important;
  max-width: 150px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 10px !important;
  background: #080d16 !important;
  color: #fff !important;
  font-size: 9px !important;
}
body.social-authenticated .halo-games-a-board-actions .social-accent-button,
body.social-authenticated .halo-games-a-board-actions .social-muted-button {
  min-height: 35px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}
body.social-authenticated .halo-games-a-board-actions #halo-games-a-reset {
  min-width: 35px !important;
  padding: 0 !important;
  font-size: 17px !important;
}
body.social-authenticated .halo-games-a-pills {
  display: flex !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
}
body.social-authenticated .halo-games-a-pills span {
  padding: 6px 9px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--cc-panel-raised) 60%, transparent) !important;
  color: var(--cc-muted) !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: .05em !important;
}
body.social-authenticated .halo-games-a-pills span.is-accent {
  border-color: color-mix(in srgb, var(--cc-accent) 45%, var(--cc-line)) !important;
  background: var(--cc-accent-soft) !important;
  color: var(--cc-accent) !important;
}
body.social-authenticated .halo-games-a-stage {
  position: relative !important;
  display: grid !important;
  min-height: 0 !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 18%, var(--cc-line)) !important;
  border-radius: 20px !important;
  background: radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--cc-accent) 22%, transparent), transparent 38%), linear-gradient(145deg, color-mix(in srgb, var(--cc-accent) 12%, var(--cc-panel-deep)), var(--cc-panel-deep)) !important;
}
body.social-authenticated .halo-games-a-grid {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(color-mix(in srgb, var(--cc-accent) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--cc-accent) 9%, transparent) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  mask-image: radial-gradient(circle, #000, transparent 78%) !important;
}
body.social-authenticated .halo-games-a-stage::before,
body.social-authenticated .halo-games-a-stage::after {
  position: absolute !important;
  content: "" !important;
  width: 64% !important;
  aspect-ratio: 1.7 !important;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 18%, transparent) !important;
  border-radius: 50% !important;
  transform: rotate(-17deg) !important;
}
body.social-authenticated .halo-games-a-stage::after {
  width: 46% !important;
  border-color: color-mix(in srgb, #ad8cff 20%, transparent) !important;
  transform: rotate(18deg) !important;
}
body.social-authenticated .halo-games-a-tic {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  width: min(310px, 63%) !important;
  aspect-ratio: 1 !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 28%, var(--cc-line)) !important;
  border-radius: 21px !important;
  background: color-mix(in srgb, var(--cc-panel-deep) 88%, transparent) !important;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .28) !important;
}
body.social-authenticated .halo-games-a-tic button {
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  place-items: center !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--cc-panel-raised) 70%, transparent) !important;
  color: var(--cc-text) !important;
  font-size: clamp(22px, 4vw, 34px) !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease !important;
}
body.social-authenticated .halo-games-a-tic button[data-value="X"] { color: var(--cc-accent) !important; }
body.social-authenticated .halo-games-a-tic button[data-value="O"] { color: #ad8cff !important; }
body.social-authenticated .halo-games-a-tic button:not(:disabled):hover {
  border-color: var(--cc-accent) !important;
  background: var(--cc-accent-soft) !important;
  transform: translateY(-2px) !important;
}
body.social-authenticated .halo-games-a-coming {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  max-width: 280px !important;
  text-align: center !important;
}
body.social-authenticated .halo-games-a-coming[hidden] { display: none !important; }
body.social-authenticated .halo-games-a-coming > span {
  display: grid !important;
  width: 58px !important;
  height: 58px !important;
  place-items: center !important;
  border-radius: 18px !important;
  background: var(--cc-accent-soft) !important;
  color: var(--cc-accent) !important;
  font-size: 24px !important;
}
body.social-authenticated .halo-games-a-coming strong { color: var(--cc-text) !important; font-size: 14px !important; }
body.social-authenticated .halo-games-a-coming p { margin: 0 !important; color: var(--cc-muted) !important; font-size: 10px !important; line-height: 1.5 !important; }
body.social-authenticated .halo-games-a-board-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
body.social-authenticated .halo-games-a-board-foot > span {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: var(--cc-muted) !important;
  font-size: 9px !important;
}
body.social-authenticated .halo-games-a-board-foot i {
  flex: 0 0 7px !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #55e8ae !important;
  box-shadow: 0 0 13px #55e8ae !important;
}
body.social-authenticated .halo-games-a-board-foot strong { overflow: hidden !important; font-weight: 650 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.social-authenticated .halo-games-a-board-foot .social-muted-button { min-height: 34px !important; padding: 7px 11px !important; border-radius: 10px !important; white-space: nowrap !important; }
body.social-authenticated .halo-games-a-chat {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  padding: 16px !important;
  overflow: hidden !important;
}
body.social-authenticated .halo-games-a-chat > header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding-bottom: 13px !important;
  border-bottom: 1px solid var(--cc-line) !important;
}
body.social-authenticated .halo-games-a-chat h3 { margin: 3px 0 0 !important; color: var(--cc-text) !important; font-size: 17px !important; }
body.social-authenticated .halo-games-a-online {
  padding: 6px 8px !important;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 34%, var(--cc-line)) !important;
  border-radius: 999px !important;
  color: var(--cc-accent) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
body.social-authenticated .halo-games-a-messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 16px 2px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in srgb, var(--cc-accent) 55%, transparent) transparent !important;
}
body.social-authenticated .halo-games-a-message {
  display: grid !important;
  gap: 5px !important;
  max-width: 90% !important;
  align-self: flex-start !important;
  padding: 11px 12px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--cc-panel-raised) 72%, transparent) !important;
  color: var(--cc-text) !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}
body.social-authenticated .halo-games-a-message.is-outgoing { align-self: flex-end !important; border-color: transparent !important; background: color-mix(in srgb, var(--cc-accent) 68%, #07536b) !important; color: #effcff !important; }
body.social-authenticated .halo-games-a-message small { color: var(--cc-muted) !important; font-size: 8px !important; }
body.social-authenticated .halo-games-a-message.is-outgoing small { color: #b8eff8 !important; }
body.social-authenticated .halo-games-a-chat-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px !important;
  gap: 7px !important;
  padding-top: 13px !important;
  border-top: 1px solid var(--cc-line) !important;
}
body.social-authenticated .halo-games-a-chat-form input {
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 8px 11px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--cc-input) 70%, transparent) !important;
  color: var(--cc-text) !important;
  font: 10px Manrope, system-ui, sans-serif !important;
}
body.social-authenticated .halo-games-a-chat-form button {
  min-height: 40px !important;
  border-radius: 12px !important;
  background: var(--cc-accent) !important;
  color: #062331 !important;
  font-size: 18px !important;
  cursor: pointer !important;
}
html[data-theme="light"] body.social-authenticated .halo-games-a-board,
html[data-theme="light"] body.social-authenticated .halo-games-a-chat {
  background: color-mix(in srgb, #fff 76%, transparent) !important;
}
html[data-theme="light"] body.social-authenticated .halo-games-a-contact-picker select {
  background: #101725 !important;
}
@media (max-width: 940px) {
  body.social-authenticated .halo-games-a-workspace { grid-template-columns: minmax(0, 1fr) 300px !important; }
  body.social-authenticated .halo-games-a-board-actions { flex-wrap: wrap !important; }
  body.social-authenticated .halo-games-a-contact-picker { min-width: 112px !important; }
}
@media (max-width: 760px) {
  body.social-authenticated .social-view[data-social-panel="games"] { overflow-y: auto !important; }
  body.social-authenticated .halo-games-a { min-height: 100% !important; height: auto !important; padding: 12px !important; overflow: visible !important; }
  body.social-authenticated .halo-games-a-header { align-items: flex-start !important; flex-direction: column !important; gap: 9px !important; }
  body.social-authenticated .halo-games-a-presence { align-self: flex-start !important; }
  body.social-authenticated .halo-games-a-workspace { grid-template-columns: 1fr !important; overflow: visible !important; }
  body.social-authenticated .halo-games-a-board { min-height: 560px !important; }
  body.social-authenticated .halo-games-a-chat { min-height: 360px !important; }
  body.social-authenticated .halo-games-a-board-head { align-items: flex-start !important; flex-direction: column !important; }
  body.social-authenticated .halo-games-a-board-actions { width: 100% !important; justify-content: stretch !important; }
  body.social-authenticated .halo-games-a-contact-picker { flex: 1 1 140px !important; }
  body.social-authenticated .halo-games-a-contact-picker select { width: 100% !important; max-width: none !important; }
  body.social-authenticated .halo-games-a-board-actions .social-accent-button { flex: 1 1 auto !important; }
  body.social-authenticated .halo-games-a-tic { width: min(310px, 78%) !important; }
}

/* V87: reliable game invitations and a larger playable stage. */
body.social-authenticated .halo-games-a-board {
  min-height: 600px !important;
}
body.social-authenticated .halo-games-a-stage {
  min-height: 460px !important;
}
body.social-authenticated .halo-games-a-tic {
  width: min(420px, 72%) !important;
  max-width: 420px !important;
}
body.social-authenticated .halo-games-a-invite-dialog {
  width: min(430px, calc(100% - 28px)) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  color: var(--cc-text) !important;
}
body.social-authenticated .halo-games-a-invite-dialog::backdrop {
  background: rgba(2, 7, 18, .76) !important;
  backdrop-filter: blur(12px) !important;
}
body.social-authenticated .halo-games-a-invite-dialog form {
  position: relative !important;
  display: grid !important;
  gap: 9px !important;
  padding: 28px !important;
  border: 1px solid var(--cc-line-strong) !important;
  border-radius: 24px !important;
  background: var(--cc-panel) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .46) !important;
}
body.social-authenticated .halo-games-a-invite-dialog h2 {
  margin: 0 !important;
  color: var(--cc-text) !important;
  font-size: 22px !important;
}
body.social-authenticated .halo-games-a-invite-dialog form > p:not(.overline) {
  margin: 0 !important;
  color: var(--cc-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}
body.social-authenticated .halo-games-a-invite-dialog form > div {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 14px !important;
}
body.social-authenticated .halo-games-a-invite-dialog form > div button {
  min-height: 42px !important;
  border-radius: 12px !important;
}
body.social-authenticated .halo-games-a-invite-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 50% !important;
  background: var(--cc-panel-raised) !important;
  color: var(--cc-text) !important;
  cursor: pointer !important;
}
@media (max-width: 760px) {
  body.social-authenticated .halo-games-a-board {
    min-height: 620px !important;
  }
  body.social-authenticated .halo-games-a-stage {
    min-height: 480px !important;
  }
  body.social-authenticated .halo-games-a-tic {
    width: min(390px, 84%) !important;
  }
}

/* V89: keep the complete game room inside the browser viewport. */
body.social-authenticated .social-view[data-social-panel="games"] {
  overflow: hidden !important;
}
body.social-authenticated .halo-games-a {
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 10px 14px 8px !important;
  gap: 9px !important;
  overflow: hidden !important;
}
body.social-authenticated .halo-games-a-header h2 {
  font-size: clamp(20px, 2.6vw, 27px) !important;
}
body.social-authenticated .halo-games-a-header p:last-child {
  font-size: 10px !important;
}
body.social-authenticated .halo-games-a-catalog button {
  min-height: 48px !important;
}
body.social-authenticated .halo-games-a-workspace {
  height: 100% !important;
  min-height: 0 !important;
}
body.social-authenticated .halo-games-a-board {
  min-height: 0 !important;
  padding: 13px !important;
  gap: 9px !important;
}
body.social-authenticated .halo-games-a-stage {
  min-height: 0 !important;
}
body.social-authenticated .halo-games-a-tic {
  width: min(360px, 58%) !important;
  max-width: 360px !important;
}
body.social-authenticated .halo-games-a-messages {
  overflow: hidden !important;
}
@media (max-width: 760px) {
  body.social-authenticated .social-view[data-social-panel="games"] {
    height: 100% !important;
    min-height: 0 !important;
  }
  body.social-authenticated .halo-games-a {
    height: 100% !important;
    padding: 8px 10px 4px !important;
    gap: 7px !important;
  }
  body.social-authenticated .halo-games-a-header {
    gap: 5px !important;
  }
  body.social-authenticated .halo-games-a-header p:last-child {
    display: none !important;
  }
  body.social-authenticated .halo-games-a-presence {
    padding: 6px 9px !important;
    font-size: 8px !important;
  }
  body.social-authenticated .halo-games-a-catalog {
    gap: 6px !important;
    padding-bottom: 1px !important;
  }
  body.social-authenticated .halo-games-a-catalog button {
    flex-basis: 102px !important;
    min-height: 42px !important;
    padding: 6px 7px !important;
  }
  body.social-authenticated .halo-games-a-catalog button > span {
    width: 24px !important;
    height: 24px !important;
    font-size: 14px !important;
  }
  body.social-authenticated .halo-games-a-catalog button b { font-size: 8px !important; }
  body.social-authenticated .halo-games-a-catalog button small { font-size: 7px !important; }
  body.social-authenticated .halo-games-a-workspace {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) 138px !important;
    gap: 7px !important;
    overflow: hidden !important;
  }
  body.social-authenticated .halo-games-a-board {
    min-height: 0 !important;
    padding: 9px !important;
    gap: 6px !important;
    border-radius: 18px !important;
  }
  body.social-authenticated .halo-games-a-game-icon {
    flex-basis: 34px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
  }
  body.social-authenticated .halo-games-a-game-title h3 { font-size: 13px !important; }
  body.social-authenticated .halo-games-a-game-title small { font-size: 7px !important; }
  body.social-authenticated .halo-games-a-board-actions {
    gap: 4px !important;
  }
  body.social-authenticated .halo-games-a-contact-picker {
    min-width: 0 !important;
    font-size: 7px !important;
  }
  body.social-authenticated .halo-games-a-contact-picker select {
    min-height: 29px !important;
    padding: 4px 6px !important;
    font-size: 8px !important;
  }
  body.social-authenticated .halo-games-a-board-actions .social-accent-button,
  body.social-authenticated .halo-games-a-board-actions .social-muted-button {
    min-height: 29px !important;
    padding: 5px 7px !important;
    font-size: 8px !important;
  }
  body.social-authenticated .halo-games-a-pills span {
    padding: 4px 7px !important;
    font-size: 7px !important;
  }
  body.social-authenticated .halo-games-a-stage {
    min-height: 0 !important;
    border-radius: 15px !important;
  }
  body.social-authenticated .halo-games-a-tic {
    width: min(260px, 56%) !important;
    max-width: 260px !important;
    gap: 5px !important;
    padding: 6px !important;
    border-radius: 15px !important;
  }
  body.social-authenticated .halo-games-a-tic button {
    border-radius: 9px !important;
    font-size: 22px !important;
  }
  body.social-authenticated .halo-games-a-board-foot > span {
    font-size: 7px !important;
  }
  body.social-authenticated .halo-games-a-board-foot .social-muted-button {
    min-height: 26px !important;
    padding: 4px 7px !important;
    font-size: 8px !important;
  }
  body.social-authenticated .halo-games-a-chat {
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 16px !important;
  }
  body.social-authenticated .halo-games-a-chat > header {
    padding-bottom: 5px !important;
  }
  body.social-authenticated .halo-games-a-chat h3 { font-size: 11px !important; }
  body.social-authenticated .halo-games-a-messages {
    padding: 5px 2px !important;
    gap: 5px !important;
  }
  body.social-authenticated .halo-games-a-message {
    padding: 5px 7px !important;
    font-size: 8px !important;
  }
  body.social-authenticated .halo-games-a-message small { font-size: 6px !important; }
  body.social-authenticated .halo-games-a-chat-form {
    padding-top: 5px !important;
    grid-template-columns: minmax(0, 1fr) 29px !important;
    gap: 4px !important;
  }
  body.social-authenticated .halo-games-a-chat-form input,
  body.social-authenticated .halo-games-a-chat-form button {
    min-height: 28px !important;
    font-size: 8px !important;
  }
}

/* V90: HTML-game canvas presentation inspired by a standalone game launcher. */
body.social-authenticated .halo-games-a-stage {
  background: linear-gradient(180deg, #f0b773 0%, #d9a46e 43%, #a67b5d 100%) !important;
  border-color: rgba(255, 255, 255, .64) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .48), inset 0 -70px 90px rgba(52, 34, 27, .15) !important;
}
body.social-authenticated .halo-games-a-canvas {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}
body.social-authenticated .halo-games-a-grid {
  z-index: 0 !important;
  background: linear-gradient(rgba(255, 255, 255, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .11) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  opacity: .42 !important;
}
body.social-authenticated .halo-games-a-stage::before {
  z-index: 0 !important;
  width: 70% !important;
  border-color: rgba(48, 184, 227, .2) !important;
}
body.social-authenticated .halo-games-a-stage::after {
  z-index: 0 !important;
  width: 52% !important;
  border-color: rgba(145, 116, 255, .18) !important;
}
body.social-authenticated .halo-games-a-hud {
  position: absolute !important;
  z-index: 3 !important;
  top: 14px !important;
  display: grid !important;
  gap: 3px !important;
  min-width: 132px !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(255, 255, 255, .48) !important;
  border-radius: 12px !important;
  background: rgba(35, 31, 38, .78) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(63, 39, 25, .2) !important;
}
body.social-authenticated .halo-games-a-hud-left { left: 14px !important; }
body.social-authenticated .halo-games-a-hud-right { right: 14px !important; text-align: right !important; }
body.social-authenticated .halo-games-a-hud strong { font-size: 10px !important; letter-spacing: .03em !important; }
body.social-authenticated .halo-games-a-hud span { color: #c4d0df !important; font-size: 8px !important; font-weight: 750 !important; }
body.social-authenticated .halo-games-a-hud-right strong { color: #ffc744 !important; font-size: 17px !important; }
body.social-authenticated .halo-games-a-stage-title {
  position: absolute !important;
  z-index: 2 !important;
  top: 18px !important;
  left: 50% !important;
  display: grid !important;
  gap: 0 !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  text-shadow: 0 2px rgba(255, 255, 255, .4) !important;
}
body.social-authenticated .halo-games-a-stage-title span {
  color: #59616d !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
}
body.social-authenticated .halo-games-a-stage-title strong {
  color: #324255 !important;
  font-size: clamp(20px, 3vw, 34px) !important;
  letter-spacing: -.04em !important;
  text-transform: uppercase !important;
}
body.social-authenticated .halo-games-a-tic {
  z-index: 2 !important;
  width: min(360px, 42%) !important;
  max-width: 360px !important;
  border-color: rgba(255, 255, 255, .66) !important;
  background: rgba(247, 248, 245, .8) !important;
  box-shadow: 0 22px 46px rgba(83, 65, 56, .27), inset 0 1px rgba(255, 255, 255, .95) !important;
}
body.social-authenticated .halo-games-a-tic button {
  border-color: rgba(255, 255, 255, .48) !important;
  background: rgba(250, 250, 247, .5) !important;
  color: #12a9da !important;
}
body.social-authenticated .halo-games-a-tic button[data-value="O"] { color: #9976f2 !important; }
body.social-authenticated .halo-games-a-tic button:not(:disabled):hover {
  background: rgba(255, 255, 255, .78) !important;
}
body.social-authenticated .halo-games-a-coming { z-index: 2 !important; }
body.social-authenticated .halo-games-a-stage-controls {
  position: absolute !important;
  z-index: 4 !important;
  right: 14px !important;
  bottom: 11px !important;
  left: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: rgba(50, 65, 80, .76) !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: .04em !important;
}
body.social-authenticated .halo-games-a-stage-controls button {
  min-height: 27px !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(50, 65, 80, .25) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .34) !important;
  color: #324255 !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}
body.social-authenticated .halo-games-a-menu-panel {
  position: absolute !important;
  z-index: 8 !important;
  top: 50% !important;
  left: 50% !important;
  display: grid !important;
  width: min(300px, 58%) !important;
  gap: 6px !important;
  padding: 15px !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  border-radius: 17px !important;
  background: rgba(43, 38, 42, .9) !important;
  box-shadow: 0 25px 60px rgba(45, 29, 22, .34) !important;
  transform: translate(-50%, -50%) !important;
}
body.social-authenticated .halo-games-a-menu-panel[hidden] { display: none !important; }
body.social-authenticated .halo-games-a-menu-title {
  display: grid !important;
  margin: 0 5px 4px !important;
  color: #fff !important;
  text-align: center !important;
}
body.social-authenticated .halo-games-a-menu-title span { color: #8edfff !important; font-size: 10px !important; letter-spacing: .2em !important; }
body.social-authenticated .halo-games-a-menu-title strong { font-size: 22px !important; letter-spacing: -.04em !important; }
body.social-authenticated .halo-games-a-menu-panel button {
  min-height: 36px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(115, 192, 241, .34) !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, rgba(34, 45, 67, .96), rgba(16, 24, 41, .96)) !important;
  color: #eff6ff !important;
  text-align: left !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}
body.social-authenticated .halo-games-a-menu-panel button:hover {
  border-color: #55d7ff !important;
  background: linear-gradient(180deg, #28506d, #172c46) !important;
}
html[data-theme="dark"] body.social-authenticated .halo-games-a-stage {
  background: linear-gradient(180deg, #96613c 0%, #59443d 45%, #263347 100%) !important;
}
@media (max-width: 760px) {
  body.social-authenticated .halo-games-a-stage-title strong { font-size: 19px !important; }
  body.social-authenticated .halo-games-a-hud { top: 8px !important; min-width: 90px !important; padding: 6px 8px !important; }
  body.social-authenticated .halo-games-a-hud-left { left: 8px !important; }
  body.social-authenticated .halo-games-a-hud-right { right: 8px !important; }
  body.social-authenticated .halo-games-a-hud strong { font-size: 7px !important; }
  body.social-authenticated .halo-games-a-hud span { font-size: 6px !important; }
  body.social-authenticated .halo-games-a-hud-right strong { font-size: 11px !important; }
  body.social-authenticated .halo-games-a-stage-controls { right: 8px !important; bottom: 6px !important; left: 8px !important; font-size: 6px !important; }
  body.social-authenticated .halo-games-a-stage-controls button { min-height: 23px !important; font-size: 7px !important; }
  body.social-authenticated .halo-games-a-tic { width: min(260px, 47%) !important; }
}

/* V91: one large, neutral host area for the active HTML game. */
body.social-authenticated .social-view[data-social-panel="games"] {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.social-authenticated .halo-games-a {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 14px 18px 16px !important;
  gap: 10px !important;
}
body.social-authenticated .halo-games-a-catalog {
  min-height: 0 !important;
  padding: 0 2px 2px !important;
}
body.social-authenticated .halo-games-a-catalog button {
  flex-basis: 156px !important;
  min-height: 44px !important;
}
body.social-authenticated .halo-games-a-workspace {
  grid-template-columns: minmax(0, 1fr) 290px !important;
  min-height: 0 !important;
  gap: 12px !important;
}
body.social-authenticated .halo-games-a-board {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  padding: 14px !important;
  gap: 9px !important;
}
body.social-authenticated .halo-games-a-stage {
  min-height: 0 !important;
  border-radius: 16px !important;
  border-color: var(--cc-line) !important;
  background: var(--cc-panel-deep) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .04) !important;
}
body.social-authenticated .halo-games-a-stage::before,
body.social-authenticated .halo-games-a-stage::after,
body.social-authenticated .halo-games-a-canvas,
body.social-authenticated .halo-games-a-grid,
body.social-authenticated .halo-games-a-hud,
body.social-authenticated .halo-games-a-stage-title,
body.social-authenticated .halo-games-a-coming,
body.social-authenticated .halo-games-a-stage-controls,
body.social-authenticated .halo-games-a-menu-panel {
  display: none !important;
}
body.social-authenticated .halo-games-a-game-host {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  place-items: center !important;
}
body.social-authenticated .halo-games-a-tic {
  width: min(520px, 72%, calc(100% - 32px)) !important;
  max-width: 520px !important;
  padding: 12px !important;
  gap: 10px !important;
  border-color: var(--cc-line-strong) !important;
  border-radius: 20px !important;
  background: color-mix(in srgb, var(--cc-panel) 82%, transparent) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .06) !important;
}
body.social-authenticated .halo-games-a-tic button {
  border-color: var(--cc-line) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--cc-panel-raised) 76%, transparent) !important;
  font-size: clamp(28px, 4vw, 46px) !important;
}
body.social-authenticated .halo-games-a-chat {
  min-height: 0 !important;
}
@media (max-width: 760px) {
  body.social-authenticated .social-view[data-social-panel="games"] {
    overflow: hidden !important;
  }
  body.social-authenticated .halo-games-a {
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px 10px 8px !important;
    gap: 7px !important;
  }
  body.social-authenticated .halo-games-a-workspace {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) minmax(145px, 28%) !important;
    min-height: 0 !important;
    gap: 7px !important;
  }
  body.social-authenticated .halo-games-a-board,
  body.social-authenticated .halo-games-a-chat {
    min-height: 0 !important;
  }
  body.social-authenticated .halo-games-a-board {
    padding: 9px !important;
    gap: 6px !important;
  }
  body.social-authenticated .halo-games-a-tic {
    width: min(420px, 82%, calc(100% - 20px)) !important;
    padding: 8px !important;
    gap: 6px !important;
  }
  body.social-authenticated .halo-games-a-tic button {
    border-radius: 10px !important;
    font-size: clamp(22px, 8vw, 36px) !important;
  }
  body.social-authenticated .halo-games-a-chat {
    padding: 8px !important;
  }
}