/* Task surfaces slide in from the right. MudDialog owns focus trapping and results. */
.mud-dialog-container:has(> .side-panel) {
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
}

.mud-dialog.side-panel {
    position: relative;
    width: min(680px, 100vw);
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    animation: side-panel-enter 180ms ease-out both;
}

.mud-dialog.side-panel.side-panel-wide {
    width: min(840px, 100vw);
}

.side-panel .side-panel-title {
    flex-shrink: 0;
    padding: calc(20px + env(safe-area-inset-top)) 76px 20px 24px;
    border-bottom: 1px solid var(--mud-palette-divider);
    overflow-wrap: anywhere;
}

/* MudFocusTrap wraps content/actions. Allow only the body to scroll. */
.side-panel > .mud-focus-trap,
.side-panel > .mud-focus-trap > .mud-focus-trap-child-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.side-panel .side-panel-content {
    /* The close button belongs to the trap but is anchored to the panel header. */
    position: static;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 24px;
    overflow-wrap: anywhere;
}

.side-panel .side-panel-close {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    z-index: 1;
}

.side-panel .side-panel-actions {
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

.side-panel .side-panel-actions:empty {
    display: none;
}

.side-panel .side-panel-actions .mud-button {
    min-height: 44px;
}

@keyframes side-panel-enter {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@media (max-width: 959.98px) {
    .mud-dialog.side-panel,
    .mud-dialog.side-panel.side-panel-wide {
        width: 100vw;
    }

    .side-panel .side-panel-title {
        padding-left: max(16px, env(safe-area-inset-left));
    }

    .side-panel .side-panel-content {
        padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
    }

    .side-panel .side-panel-actions {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

@media (prefers-reduced-motion: reduce) {
    .mud-dialog.side-panel { animation: none; }
}