/* ============================================================
   FULLSCREEN EXPAND — Source panel morph
   ============================================================ */

.floating-panel[data-panel="svg-input"] {
    view-transition-name: --source-panel;
}

.floating-panel.is-expanded {
    position: fixed;
    inset: var(--space-3);
    width: auto !important;
    height: auto !important;
    max-width: none;
    max-height: none;
    z-index: 9999;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: flex;
}

.floating-panel.is-expanded .panel-body {
    flex: 1;
    min-height: 0;
    padding: var(--space-4);
}

.floating-panel.is-expanded .svg-textarea {
    field-sizing: fixed;
    flex: 1;
    min-height: 0;
}

::view-transition-old(--source-panel),
::view-transition-new(--source-panel) {
    animation: 280ms var(--ease-out) both;
}

::view-transition-old(--source-panel) {
    animation-name: vt-expand-out;
}

::view-transition-new(--source-panel) {
    animation-name: vt-expand-in;
}

@keyframes vt-expand-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.96);
    }
}

@keyframes vt-expand-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

body.is-source-expanded .panel-stack > :not(.floating-panel.is-expanded) {
    opacity: 0.3;
    pointer-events: none;
}

body.is-source-expanded .panel-divider {
    opacity: 0;
    pointer-events: none;
}

body.is-source-expanded .floating-panel.is-expanded::before {
    display: none;
}

.panel-action[data-action="expand"][aria-pressed="true"] {
    --btn-fg: var(--color-primary);

    color: var(--btn-fg);
    background: --tint(var(--btn-fg), 0.12);
}

.panel-action[data-action="expand"][aria-pressed="true"]:hover {
    color: --lighter(var(--color-primary), 0.2);
    background: --tint(var(--btn-fg), 0.22);
}