@layer editor {
    #stage {
        position: fixed;
        right: 4vw;
        top: 6vh;
        width: clamp(340px, 36vw, 520px);
        z-index: 5;
    }

    .editor {
        border: 2px solid;
        border-color: var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
        font-family: 'Courier New', Courier, monospace;
        font-size: 13px;
        line-height: 1.45;
        display: flex;
        flex-direction: column;
        height: 70vh;
    }

    .editor::before {
        content: '';
        position: absolute;
        inset: -25px;
        background: radial-gradient(
            ellipse at center,
            color-mix(in oklch, var(--accent) 8%, transparent),
            transparent 70%
        );
        z-index: -1;
        border-radius: 8px;
    }

    .ed-titlebar {
        background: linear-gradient(90deg, #000080, #1084D0);
        color: #fff;
        padding: 3px 4px 3px 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: Tahoma, 'Segoe UI', sans-serif;
        font-size: 11px;
        font-weight: 700;
        user-select: none;
    }

    .ed-title::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #4ade80;
        margin-right: 6px;
        vertical-align: middle;
    }

    .ed-btns { display: flex; gap: 2px; }
    .ed-btn {
        width: 16px;
        height: 14px;
        background: var(--chrome);
        border: 1px solid;
        border-color: var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        color: #000;
        cursor: default;
        line-height: 1;
    }

    .ed-menubar {
        background: var(--chrome);
        padding: 2px 6px;
        font-family: Tahoma, 'Segoe UI', sans-serif;
        font-size: 11px;
        color: #000;
        display: flex;
        gap: 12px;
        user-select: none;
        border-bottom: 1px solid var(--chrome-dark);
    }

    .ed-content {
        background: var(--ed-bg);
        border: 1px solid;
        border-color: var(--chrome-dark) var(--chrome-light) var(--chrome-light) var(--chrome-dark);
        margin: 2px;
        flex: 1;
        overflow-y: auto;
        position: relative;
    }

    .ed-content::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            oklch(0 0 0 / 0.008) 1px,
            oklch(0 0 0 / 0.008) 2px
        );
        pointer-events: none;
        z-index: 2;
    }

    .ed-line {
        display: flex;
        min-height: 1.45em;
        position: relative;
        transition: background 0.2s ease;

        &:hover {
            background: var(--highlight);
        }
    }

    .ln {
        width: 32px;
        min-width: 32px;
        text-align: right;
        padding-right: 8px;
        color: var(--syn-ln);
        background: var(--ed-gutter);
        border-right: 1px solid #ddd;
        user-select: none;
    }

    .ed-line code {
        padding-left: 8px;
        white-space: pre;
        color: var(--syn-txt);
    }

    .s-dec  { color: var(--syn-dec); }
    .s-tag  { color: var(--syn-tag); }
    .s-attr { color: var(--syn-attr); }
    .s-val  { color: var(--syn-val); }
    .s-txt  { color: var(--syn-txt); }

    .ed-prompt {
        background: var(--ed-gutter);
        border-top: 1px solid #ccc;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 2px;
        font-size: 12px;
        color: #555;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            top: -1px;
            left: 12px;
            right: 12px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
        }
    }

    .prompt-gt {
        color: var(--accent);
        font-weight: 700;
        font-size: 14px;
    }

    .prompt-text {
        color: #777;
        font-style: italic;
    }

    .prompt-cursor {
        display: inline-block;
        width: 7px;
        height: 14px;
        background: var(--syn-tag);
    }

    .ed-status {
        background: var(--chrome);
        padding: 2px 8px;
        font-family: Tahoma, 'Segoe UI', sans-serif;
        font-size: 10px;
        color: #444;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid var(--chrome-dark);
    }

    .ed-status-gen {
        color: var(--syn-val);
        font-style: italic;
    }

    .ed-status-generating {
        color: var(--syn-attr);
        font-style: italic;
    }

    .ed-status-done {
        color: var(--syn-val);
        font-style: italic;
        opacity: 0;
    }

    /* Loader bar between prompt and code streaming */
    .ed-loader {
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--accent);
    }

    .ed-loader-text {
        white-space: nowrap;
    }

    .ed-loader-bar {
        flex: 1;
        height: 3px;
        background: var(--accent);
        transform-origin: left;
        animation: loader-pulse 1s ease-in-out infinite;
    }

    @keyframes loader-pulse {
        0%, 100% { opacity: 0.3; transform: scaleX(0.3); }
        50%      { opacity: 1; transform: scaleX(1); }
    }
}