#buttonContainer {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 0px;
    z-index: 0;
}
.actionButton {
    width: 50px;
    height: 50px;
    cursor: pointer;
}

/* ── Collapsible action menu (mobile) ─────────────────────────────────
   On phones (.mobile = max-width:500px) the bottom-left action buttons fold
   behind a single "+" so they don't sit under the bottom-center point-cloud
   tray. Tapping the "+" fans the row out to the right, over the tray. On
   desktop the toggle is hidden and the row (#actionButtons) is always shown.
   The AppMap map-toggle is pinned into #actionButtons too, so it folds in
   with the rest. */
#actionButtons {
    display: flex;
    gap: 0;
}
#actionMenuToggle {
    display: none;
}
#actionMenuToggle svg {
    transition: transform 0.2s ease;
}
.mobile #actionMenuToggle {
    display: flex;
}
.mobile #buttonContainer #actionButtons {
    display: none;
}
.mobile #buttonContainer.expanded #actionButtons {
    display: flex;
}
/* While open, lift the whole cluster above the tray (z-index 1000). */
.mobile #buttonContainer.expanded {
    z-index: 1001;
}
/* "+" rotates into a "×" close affordance when the menu is open. */
#buttonContainer.expanded #actionMenuToggle svg {
    transform: rotate(45deg);
}

/* Hidden until index-single-res.js confirms the device has orientation
   sensors (inline display:flex). */
#toggleDeviceOrientation {
    display: none;
}
#toggleDeviceOrientation img {
    width: 34px;
    margin: 8px;
}
#toggleDeviceOrientation .disable {
    display: none;
}
#toggleDeviceOrientation.enabled .disable {
    display: block;
}
#toggleDeviceOrientation.enabled .enable {
    display: none;
}