.code-input,
.code-output {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background-color: var(--surface);
    padding: 0.875rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-code);
}

.code-input {
    resize: none;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.code-output {
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.code-editor {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    align-items: stretch;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background-color: var(--surface);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.code-editor:focus-within {
    border-color: var(--indigo-400);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--indigo-500) 15%, transparent);
}

.line-numbers {
    flex: 0 0 auto;
    overflow: hidden;
    min-height: 0;
    align-self: stretch;
    min-width: 3.5rem;
    max-height: 100%;
    padding: 0.875rem 0;
    background-color: var(--surface-muted);
    border-right: 1px solid var(--border);
    user-select: none;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
}

.line-number-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.25rem;
    min-height: calc(0.8125rem * 1.6);
    padding: 0 0.5rem 0 0.375rem;
}

.line-fold,
.line-fold-spacer {
    flex-shrink: 0;
    width: 1rem;
    height: calc(0.8125rem * 1.6);
}

.line-fold {
    padding: 0;
    border: none;
    border-radius: 0.2rem;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.5625rem;
    line-height: calc(0.8125rem * 1.6);
    cursor: pointer;
}

.line-fold:hover {
    background: var(--slate-200);
    color: var(--text-primary);
}

.line-num {
    min-width: 1.25rem;
    text-align: right;
}

.line-number {
    padding: 0 0.625rem 0 0.5rem;
    min-height: calc(0.8125rem * 1.6);
}

.code-panel {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.code-scroll {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Read-only output: outer container scrolls */
.code-editor:not(.is-editable) .code-scroll {
    overflow: auto;
}

/* Editable input: textarea scrolls natively */
.code-editor.is-editable .code-scroll {
    overflow: hidden;
}

.code-editor.is-editable .code-scroll > .code-display {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    pointer-events: none;
}

.code-editor.is-editable .code-input-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0.875rem 1rem;
    border: none;
    border-radius: 0;
    resize: none;
    outline: none;
    background: transparent;
    color: transparent;
    caret-color: var(--caret-color);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
    box-sizing: border-box;
}

.code-scroll-content {
    position: relative;
    min-height: 100%;
}

.code-scroll::-webkit-scrollbar {
    width: 0.625rem;
    height: 0.625rem;
}

.code-scroll::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background-color: var(--slate-300);
}

.code-scroll::-webkit-scrollbar-track {
    background-color: transparent;
}

.code-display {
    padding: 0.875rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-code);
    white-space: pre-wrap;
    word-break: break-word;
}

.code-editor .code-scroll-content > .code-display {
    pointer-events: none;
}

.code-scroll-content .code-input-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0.875rem 1rem;
    border: none;
    border-radius: 0;
    resize: none;
    outline: none;
    background: transparent;
    color: transparent;
    caret-color: var(--caret-color);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
    box-sizing: border-box;
}

.code-line {
    min-height: calc(0.8125rem * 1.6);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.code-editor .code-display.code-output {
    min-height: 100%;
    overflow: visible;
}

.code-editor .code-input,
.code-editor .code-output {
    border: none;
    border-radius: 0;
    background-color: transparent;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.code-editor .code-input:focus {
    border-color: transparent;
    box-shadow: none;
}

.code-input:focus {
    border-color: var(--indigo-400);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--indigo-500) 15%, transparent);
}

/* JSON panel */
.json-panel {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background-color: var(--surface);
    overflow: hidden;
}

.json-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--primary-700);
    background-color: var(--primary);
    flex-shrink: 0;
}

.json-panel-header-start {
    display: flex;
    align-items: center;
    min-width: 0;
}

.json-panel-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
}

.json-panel-header .diff-col-stats {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 0.375rem;
    background-color: rgb(255 255 255 / 0.15);
    color: #ffffff;
}

.json-panel-header .diff-stat-count {
    color: rgb(255 255 255 / 0.9);
}

.json-panel-header .diff-stat-value {
    color: #ffffff;
}

.json-panel-header .json-panel-icon-btn {
    border-color: rgb(255 255 255 / 0.35);
    background: rgb(255 255 255 / 0.12);
    color: #ffffff;
    box-shadow: none;
}

.json-panel-header .json-panel-icon-btn:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--primary);
}

.json-panel--output .json-panel-header {
    border-bottom-color: var(--emerald-700);
    background-color: var(--emerald-600);
}

.json-panel--output .json-panel-header .json-panel-icon-btn:hover {
    color: var(--emerald-600);
}

.json-panel-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
}

.json-panel-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--btn-blue-border);
    border-radius: 0.375rem;
    background: var(--card-bg);
    color: var(--primary);
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.json-panel-icon-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.json-panel .code-editor,
.json-panel > .code-input,
.json-panel > .code-output {
    flex: 1 1 0;
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.json-panel .code-editor:focus-within {
    box-shadow: none;
}

.json-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.25rem;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--border);
    background-color: var(--surface-muted);
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.json-panel-footer--wrap-only {
    justify-content: flex-start;
}

.json-panel-footer-totals {
    margin-left: auto;
}

.json-panel-footer-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-width: 0;
}

.json-panel-footer-divider {
    opacity: 0.5;
}

.json-panel-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.json-panel-wrap input {
    width: 0.875rem;
    height: 0.875rem;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.json-panel--output .json-panel-wrap input {
    accent-color: var(--emerald-600);
}

.code-editor.is-no-wrap .code-input-overlay,
.code-editor.is-no-wrap .code-display,
.code-editor.is-no-wrap .code-line {
    white-space: pre;
    word-break: normal;
}

.code-editor.is-no-wrap .code-input-overlay {
    overflow-x: auto;
    overflow-y: auto;
}

.code-editor.is-no-wrap:not(.is-editable) .code-scroll {
    overflow-x: auto;
}

.code-editor.is-editable .code-input-overlay::-webkit-scrollbar {
    width: 0.625rem;
    height: 0.625rem;
}

.code-editor.is-editable .code-input-overlay::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background-color: var(--slate-300);
}

.code-editor.is-editable .code-input-overlay::-webkit-scrollbar-track {
    background-color: transparent;
}