/* Keep the desktop chat bar; phones use the shared exploration dock. */
.chat .chat-mobile-toggle { display: none; }

@media (max-width: 720px), (pointer: coarse) {
  .halo-preview {
    --mobile-button-size: 44px;
    --mobile-joystick-size: 128px;
    --mobile-dock-gap: 6px;
    --mobile-dock-width: calc(6 * var(--mobile-button-size) + 5 * var(--mobile-dock-gap));
    --mobile-dock-left: calc((100vw - var(--mobile-dock-width)) / 2);
    --mobile-dock-bottom: calc(env(safe-area-inset-bottom) + 10px);
    --mobile-panel-bottom: calc(var(--mobile-dock-bottom) + var(--mobile-button-size) + 10px);
    --mobile-panel-height: calc(100dvh - var(--mobile-panel-bottom) - max(12px, env(safe-area-inset-top)));
    --hud-trigger-width: var(--mobile-button-size);
    --hud-trigger-height: var(--mobile-button-size);
  }

  /* Only the buttons have a backdrop filter: fixed popovers stay viewport-bound. */
  .halo-preview:not(.combat-open) .hud-actions #navigation-ui.navigation { --mobile-slot: 0; }
  .halo-preview:not(.combat-open) .hud-actions #preview-bag.backpack { --mobile-slot: 1; }
  .halo-preview:not(.combat-open) .combat3d .combat3d-launch { --mobile-slot: 2; }
  .halo-preview:not(.combat-open) #chat-mobile-toggle { --mobile-slot: 3; }
  .halo-preview:not(.combat-open) #music-toggle { --mobile-slot: 4; }
  .halo-preview:not(.combat-open) #hide-ui { --mobile-slot: 5; }

  .halo-preview:not(.combat-open) .hud-actions #navigation-ui.navigation,
  .halo-preview:not(.combat-open) .hud-actions #preview-bag.backpack,
  .halo-preview:not(.combat-open) .combat3d .combat3d-launch,
  .halo-preview:not(.combat-open) #chat-mobile-toggle,
  .halo-preview:not(.combat-open) #music-toggle,
  .halo-preview:not(.combat-open) #hide-ui {
    position: fixed;
    top: auto;
    right: auto;
    bottom: var(--mobile-dock-bottom);
    left: calc(var(--mobile-dock-left) + var(--mobile-slot) * (var(--mobile-button-size) + var(--mobile-dock-gap)));
    width: var(--mobile-button-size);
    height: var(--mobile-button-size);
    min-height: var(--mobile-button-size);
    margin: 0;
  }
  .halo-preview:not(.combat-open) .general-menu {
    position: fixed;
    top: calc(var(--vitals-top) + (var(--vitals-height) - var(--mobile-button-size)) / 2);
    left: calc(var(--edge) + var(--left-hud-width) + 10px);
    right: auto;
    bottom: auto;
    width: var(--mobile-button-size);
    height: var(--mobile-button-size);
  }

  .halo-preview:not(.combat-open) :is(.navigation-trigger,.backpack-trigger,.combat3d-launch,#chat-mobile-toggle,#music-toggle,#hide-ui,#general-menu-toggle) {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: var(--mobile-button-size);
    height: var(--mobile-button-size);
    min-height: var(--mobile-button-size);
    padding: 0;
    gap: 0;
    border: 1px solid var(--ui-glass-line);
    border-radius: 5px;
    color: #b7ccc1;
    background: var(--ui-glass-soft);
    box-shadow: inset 0 1px var(--ui-glass-highlight);
    backdrop-filter: var(--ui-glass-blur);
    -webkit-backdrop-filter: var(--ui-glass-blur);
    cursor: pointer;
    touch-action: manipulation;
  }
  .halo-preview:not(.combat-open) :is(.navigation-trigger,.backpack-trigger,.combat3d-launch,#chat-mobile-toggle,#music-toggle,#hide-ui,#general-menu-toggle):is(:hover,:focus-visible),
  .halo-preview:not(.combat-open) #chat-mobile-toggle[aria-expanded="true"] {
    color: #e6eee0;
    border-color: rgb(196 222 207 / 55%);
    background: var(--ui-glass-panel);
  }
  .halo-preview:not(.combat-open) :is(.navigation-trigger,.backpack-trigger,.combat3d-launch,#chat-mobile-toggle,#music-toggle,#hide-ui,#general-menu-toggle) svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: currentColor;
  }
  .halo-preview #chat-mobile-toggle .chat-mobile-unread {
    position: absolute;
    top: -5px;
    right: -4px;
  }
  .halo-preview #chat-mobile-toggle.has-unread { color: #f0d4a2; }

  .halo-preview:not(.combat-open) .hud-left-stack {
    left: max(14px, env(safe-area-inset-left));
    bottom: calc(var(--mobile-panel-bottom) + 2px);
    width: calc(100vw - max(14px, env(safe-area-inset-left)) - max(14px, env(safe-area-inset-right)));
    gap: 0;
  }
  .halo-preview:not(.combat-open) .hud-actions { height: 0; min-height: 0; }
  .halo-preview:not(.combat-open) .hud-left-stack .place { width: calc(100% - var(--mobile-joystick-size) - 12px); }
  .halo-preview:not(.combat-open) .hud-left-stack .place h1 { margin: 0; font-size: 18px; line-height: 1.12; letter-spacing: -.3px; }
  .halo-preview:not(.combat-open) .hud-left-stack .place .eyebrow { margin: 0 0 3px; font-size: 7px; line-height: 1.2; letter-spacing: 1.5px; }
  .halo-preview:not(.combat-open) .hud-left-stack .place .eyebrow > span:first-child { width: 16px; }
  .halo-preview:not(.combat-open) .hud-left-stack :is(.place-description,.world-status,.shield-status) { margin: 3px 0 0; font-size: 8px; line-height: 1.2; }
  .halo-preview:not(.combat-open) .hud-left-stack .status-dot { width: 3px; height: 3px; }
  .halo-preview:not(.combat-open) .mobile-movement { bottom: calc(var(--mobile-panel-bottom) + 2px); }

  .halo-preview:not(.combat-open) .hud-actions .backpack-panel,
  .halo-preview:not(.combat-open) .general-menu-panel {
    position: fixed;
    top: auto;
    right: auto;
    left: max(12px, env(safe-area-inset-left));
    bottom: var(--mobile-panel-bottom);
    width: min(352px, calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right))));
    max-height: var(--mobile-panel-height);
  }
  .halo-preview:not(.combat-open) .general-menu-panel {
    top: calc(var(--vitals-top) + var(--vitals-height) + 10px);
    bottom: auto;
    left: max(12px, env(safe-area-inset-left));
    max-height: calc(100dvh - var(--vitals-top) - var(--vitals-height) - 20px - var(--mobile-panel-bottom));
  }
  .halo-preview:not(.combat-open) .combat3d .combat3d-launch-error { bottom: var(--mobile-panel-bottom); }

  /* The button escapes this transparent container; glass sits on its own layer. */
  .halo-preview #chat-ui.chat {
    top: auto;
    bottom: var(--mobile-panel-bottom);
    left: max(12px, env(safe-area-inset-left));
    width: min(352px, calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right))));
    max-width: none;
    height: min(260px, 45dvh);
    max-height: var(--mobile-panel-height);
    border: 0;
    overflow: visible;
    isolation: isolate;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .halo-preview #chat-ui.chat::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid rgb(184 207 190 / 25%);
    border-radius: 5px;
    background: rgb(11 23 23 / 24%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    pointer-events: none;
  }
  .halo-preview #chat-ui.chat:is(:hover,.is-focused) { background: transparent; }
  .halo-preview #chat-ui.chat.is-focused::before { background: rgb(11 23 23 / 32%); }
  .halo-preview #chat-ui.chat.is-collapsed { height: 0; }
  .halo-preview #chat-ui.chat.is-collapsed::before,
  .halo-preview #chat-ui.chat.is-collapsed .chat-header { display: none; }
  .halo-preview #chat-ui .chat-panel { overflow: hidden; border-radius: 0 0 5px 5px; }
  .halo-preview #chat-ui .chat-input { font-size: 16px; }
  .halo-preview:not(.clean-view):has(#chat-ui.chat:not(.is-collapsed)) :is(.hud-left-stack .place,.mobile-movement) { visibility: hidden; pointer-events: none; }
  .halo-preview:has(#chat-ui.chat:not(.is-collapsed)) .last-transmission-reopen { top: 190px; }
}

@media (max-width: 360px) {
  .halo-preview { --mobile-button-size: 40px; --mobile-dock-gap: 2px; --mobile-joystick-size: 116px; }
  .halo-preview:not(.combat-open) .hud-left-stack .place h1 { font-size: 14px; }
}

@media (orientation: landscape) and (pointer: coarse), (orientation: landscape) and (max-width: 720px) {
  .halo-preview:not(.combat-open) .hud-left-stack .place { width: min(310px, 47vw); }
}