/* H8 paint: existing outer backdrops cover expansion; inner bounds remain retained. */
/* H2: three HOME dialogs only. H1 home/video assets remain byte-identical.
 * Keep a retained top/canvas, not live viewport centering. Only a first unseen
 * smaller usable view may cap inner height. Keyboard restores ORIGINAL live
 * dialog layout; H1 keeps the background scroll geometry unchanged. */
html[data-d-modal-canvas-test="h2"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) {
    --d-modal-frame: var(--d-home-safe-frame);
    --d-modal-top: max(20px, var(--d-home-top));
    --d-modal-bottom: max(20px, var(--d-home-bottom));
    --d-modal-history-top: max(12px, var(--d-home-top));
    --d-modal-history-bottom: max(12px, var(--d-home-bottom));
    --d-modal-history-height: calc(var(--d-home-canvas-height) * .8);
}

html[data-d-modal-canvas-test="h2"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #auth-modal[data-profile-view="true"] {
    top: 0;
    bottom: auto;
    height: max(var(--d-home-canvas-height), 100dvh);
    align-items: flex-start;
    padding: var(--d-modal-top) max(20px, var(--d-home-right)) var(--d-modal-bottom) max(20px, var(--d-home-left));
}

html[data-d-modal-canvas-test="h2"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #auth-modal[data-profile-view="true"] .firebase-auth-container {
    max-height: max(1px, calc(var(--d-modal-frame) - var(--d-modal-top) - var(--d-modal-bottom)));
    min-height: 0;
    overflow-y: auto;
    overflow-anchor: none;
}

html[data-d-modal-canvas-test="h2"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) .learning-history-modal {
    top: 0;
    bottom: auto;
    height: max(var(--d-home-canvas-height), 100dvh);
    align-items: flex-start;
    padding: var(--d-modal-history-top) max(8px, var(--d-home-right)) var(--d-modal-history-bottom) max(8px, var(--d-home-left));
}

html[data-d-modal-canvas-test="h2"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) .learning-history-modal .modal-content {
    margin-top: 0;
    margin-bottom: 0;
    height: min(var(--d-modal-history-height), max(1px, calc(var(--d-modal-frame) - var(--d-modal-history-top) - var(--d-modal-history-bottom))));
    max-height: min(var(--d-modal-history-height), max(1px, calc(var(--d-modal-frame) - var(--d-modal-history-top) - var(--d-modal-history-bottom))));
    /* Preserve existing header/body/pager rows and their independent scroll. */
}

html[data-d-modal-canvas-test="h2"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #settings-panel {
    top: var(--d-modal-top);
    bottom: auto;
    max-height: min(calc(var(--d-home-canvas-height) * .85), max(1px, calc(var(--d-modal-frame) - var(--d-modal-top) - var(--d-modal-bottom))));
}

/* The old closed translateY(100%) assumed bottom:0. With retained top, move
 * the CLOSED panel fully below BOTH accepted and current views. The original
 * .open transform/transition, header and list scrolling stay unchanged. */
html[data-d-modal-canvas-test="h2"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #settings-panel:not(.open) {
    /* A viewport expansion can animate the old closed transform through the
     * newly exposed strip. Hide closed content immediately, not after .4s.
     * Opening still uses the original transform transition and visible state. */
    visibility: hidden;
    transform: translateY(calc(max(var(--d-home-canvas-height), 100dvh) - var(--d-modal-top) + 1px));
}

@media (max-width: 480px) {
    html[data-d-modal-canvas-test="h2"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) {
        --d-modal-history-height: calc(var(--d-home-canvas-height) * .9);
    }
}