body.creative-workspace {
    height: 100dvh;
    overflow: hidden;
}

.creative-workspace-shell {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(0, 1fr);
    flex: 1;
    width: 100%;
    min-height: 0;
}

body.creative-workspace > nav {
    max-width: none;
}

.creative-workspace-shell > main {
    grid-column: 2;
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow: auto;
}

#creative-workspace-content {
    display: block;
    min-width: 0;
}

body.creative-workspace .creative-content,
body.creative-workspace .creative-title-content {
    min-width: 0;
    max-width: none;
}

/* The rule above drops the viewport-based max-width that used to cap row width.
   Without it, the flex wrappers between the grid column and .creative-content
   keep their default min-width: auto, so they refuse to shrink below the
   min-content width of their contents. Text still wraps (min-content is one
   word), but unbreakable blocks -- code blocks and tables -- overflow the
   column. Zeroing min-width lets the flex chain shrink to the column.

   The title row (the root creative) has its own chain: .creative-row-start >
   h1.page-title > .creative-title-content. Shrinking only .creative-row-start
   would let the title's min-content width paint through the shrunken parent,
   so .page-title belongs in the same list. */
body.creative-workspace .creative-row-start,
body.creative-workspace .creative-tree-li,
body.creative-workspace .page-title,
body.creative-workspace .indent1,
body.creative-workspace .indent2,
body.creative-workspace .indent3 {
    min-width: 0;
}

.creative-workspace-tree-region {
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    background: var(--surface-section);
    border-right: var(--border-1) solid var(--border-color);
}

#creative-workspace-tree {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.creative-workspace-tree-header {
    padding: var(--space-3);
    border-bottom: var(--border-1) solid var(--border-color);
}

.creative-workspace-tree-header h2 {
    margin: 0;
    font-size: var(--text-2);
}

.creative-workspace-tree-nav {
    display: block;
    flex: 1;
    max-width: none;
    min-height: 0;
    padding: var(--space-2);
    overflow: auto;
    overscroll-behavior-y: contain;
    background: transparent;
    border: 0;
}

.creative-workspace-tree-list {
    margin: 0;
    padding: 0 0 0 var(--space-3);
    list-style: none;
}

.creative-workspace-tree-nav > .creative-workspace-tree-list {
    padding-left: 0;
}

.creative-workspace-tree-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.creative-workspace-tree-branch-toggle,
.creative-workspace-tree-branch-spacer {
    width: 1.75rem;
    min-width: 1.75rem;
}

.creative-workspace-tree-branch-toggle {
    padding: var(--space-1);
    color: var(--text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.creative-workspace-tree-link {
    display: block;
    flex: 1;
    min-width: 0;
    padding: var(--space-2);
    overflow: hidden;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--radius-2);
}

.creative-workspace-tree-link:hover,
.creative-workspace-tree-link.is-current {
    background: var(--surface-hover);
}

.creative-workspace-tree-link.is-current {
    color: var(--color-active);
    font-weight: var(--weight-6);
}

.creative-workspace-tree-status {
    padding: var(--space-3);
    color: var(--text-muted);
    text-align: center;
}

.creative-workspace-tree-toggle {
    display: none;
}

#comments-list.docked-empty {
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-align: center;
    background: transparent;
}

#comments-list.docked-empty::before {
    display: none;
}

@media (min-width: 768px) {
    .creative-workspace-shell > #comments-popup[data-docked="true"]:not([data-fullscreen="true"]) {
        display: flex;
        position: static;
        grid-column: 3;
        width: auto;
        height: auto;
        max-width: none !important;
        max-height: none;
        min-width: 0;
        min-height: 0;
        z-index: auto;
        border-width: 0 0 0 var(--border-1);
        border-color: var(--border-color);
        border-radius: 0;
        box-shadow: none;
        transition: none;
    }

    .creative-workspace-shell > #comments-popup[data-docked="true"]:not([data-fullscreen="true"]) .resize-handle {
        display: none;
    }

    .creative-workspace-shell:has(#comments-popup.docked-collapsed) {
        grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) 3rem;
    }

    #comments-popup.docked-collapsed:not([data-fullscreen="true"]) {
        padding: var(--space-2);
    }

    #comments-popup.docked-collapsed:not([data-fullscreen="true"]) > :not(.comments-popup-header),
    #comments-popup.docked-collapsed:not([data-fullscreen="true"]) .comments-popup-header > :not(.comments-popup-actions),
    #comments-popup.docked-collapsed:not([data-fullscreen="true"]) .comments-popup-actions > :not(#close-comments-btn) {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .creative-workspace-shell {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .creative-workspace-shell > main {
        grid-column: 1;
    }

    .creative-workspace-shell > #comments-popup[data-docked="true"]:not([data-fullscreen="true"]) {
        grid-column: 2;
    }

    .creative-workspace-shell:has(#comments-popup.docked-collapsed) {
        grid-template-columns: minmax(0, 1fr) 3rem;
    }
}

/* Below the three-column breakpoint the tree gives up its own column and
   becomes an off-canvas drawer with a toggle handle. Shared by the two-panel
   band and the one-panel (mobile) band so both collapse the same way — and so
   the tree stays mounted in both, preserving its expansion state. */
@media (max-width: 1279px) {
    .creative-workspace-tree-region {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: var(--layer-modal);
        width: min(300px, 80vw);
        overflow: visible;
        box-shadow: var(--shadow-3);
        transform: translateX(-100%);
        transition: transform 0.2s var(--ease-out-2);
    }

    .creative-workspace-tree-region > aside {
        visibility: hidden;
    }

    .creative-workspace-tree-region.is-open {
        transform: translateX(0);
    }

    .creative-workspace-tree-region.is-open > aside {
        visibility: visible;
    }

    .creative-workspace-tree-toggle {
        position: absolute;
        top: 5rem;
        right: -2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        color: var(--text-primary);
        background: var(--surface-section);
        border: var(--border-1) solid var(--border-color);
        border-left: 0;
        border-radius: 0 var(--radius-2) var(--radius-2) 0;
        cursor: pointer;
    }

    .creative-workspace-tree-region.is-open .creative-workspace-tree-toggle-icon {
        transform: rotate(180deg);
    }
}

@media (max-width: 767px) {
    body.creative-workspace {
        height: auto;
        overflow: visible;
    }

    /* The floating chat is rendered after the tree in the workspace shell and
       uses the modal layer. Keep the opened tree above it so its rows remain
       visible and tappable on one-panel screens. */
    .creative-workspace-tree-region {
	z-index: calc(var(--layer-modal) + 1);
    }

    .creative-workspace-shell {
        display: block;
    }

    body.creative-workspace > nav,
    .creative-workspace-shell > main {
        max-width: var(--max-width);
    }

    /* In the two-panel band the handle's default offset lands in the left
       gutter main leaves itself. One-panel main runs flush to the edge, so the
       same offset would sit on top of the breadcrumb row — park the handle in
       the nav's empty left corner instead, where it reads as the menu button
       it effectively is. */
    .creative-workspace-tree-toggle {
        top: var(--space-3);
    }
}