.mental-map-scroll { display: contents; }
/* Compact, immediately interactive maps on mobile only. No mode-switch buttons. */
@media (max-width: 991.98px) {
    .mental-map-scroll { display: block; position: relative; height: clamp(240px, 48svh, 380px); }
    .mental-map-scroll > iframe { display: block; height: 100% !important; width: 100%; pointer-events: auto; }
}

.mental-map-expand { display: none; }
@media (max-width: 991.98px) {
    .mental-map-expand {
        display: flex; align-items: center; justify-content: center;
        position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
        padding: 0; border: 3px solid #454545; border-radius: 50%;
        background: #fff; color: #333; box-shadow: 0 2px 5px #0003;
        cursor: pointer; z-index: 2; touch-action: manipulation;
    }
    .mental-map-expand:focus-visible, .mental-map-close:focus-visible { outline: 3px solid #009fe3; outline-offset: 2px; }
}
.mental-map-dialog[open] {
    display: flex; flex-direction: column; position: fixed; inset: 0;
    width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none;
    box-sizing: border-box; margin: 0; padding: 0; border: 0; background: #fff; overflow: hidden;
}
.mental-map-dialog::backdrop { background: #fff; }
.mental-map-dialog-bar {
    display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
    min-height: 56px; padding: env(safe-area-inset-top, 0px) 16px 0;
    background: #fff; color: #173968; font: inherit; font-weight: 500;
}
.mental-map-close { border: 0; background: #eef3f7; color: #173968; border-radius: 10px; padding: 10px 14px; min-height: 44px; font: inherit; cursor: pointer; }
.mental-map-dialog-canvas { position: relative; flex: 1 1 auto; min-height: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.mental-map-dialog-canvas > iframe { display: block; width: 100%; height: 100% !important; border: 0; }