:host {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.workspace-shell {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-rows: 56px minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--app-shell-bg, var(--mat-sys-surface));
    color: var(--mat-sys-on-surface);
}

app-workspace-shell-rail {
    grid-column: 1;
    grid-row: 1 / span 3;
    min-height: 0;
}

app-workspace-shell-header {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.workspace-body {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--app-rail-bg, var(--mat-sys-surface-container-low));

    &.single-pane {
        grid-template-columns: 1fr;
    }
}

app-workspace-shell-context-sidebar {
    min-width: 0;
    min-height: 0;
}

.workspace-now-playing {
    grid-column: 2;
    grid-row: 3;
    padding: 0;
    background: var(--app-content-bg, var(--mat-sys-surface));
}

.workspace-content {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background: var(--app-content-bg, var(--mat-sys-surface));
    border-radius: 16px 0 0 0;
    box-shadow: -4px 8px 20px var(--app-content-shadow, rgba(0, 0, 0, 0.18));
}


@media (max-width: 780px) {
    .workspace-shell {
        grid-template-columns: 56px 1fr;
        grid-template-rows: 56px 1fr auto;
    }
}

@media (max-width: 640px) {
    .workspace-shell {
        grid-template-columns: 1fr;
        grid-template-rows: 52px 56px minmax(0, 1fr) auto;
    }

    app-workspace-shell-rail {
        grid-column: 1;
        grid-row: 1;
    }

    app-workspace-shell-header {
        grid-column: 1;
        grid-row: 2;
    }

    .workspace-body {
        grid-column: 1;
        grid-row: 3;
    }

    .workspace-now-playing {
        grid-column: 1;
        grid-row: 4;
    }
}
