/* ============================================================
   TEXTAREAS
   ============================================================ */

.svg-textarea,
.code-output {
    width: 100%;
    flex: 1;
    min-height: 0;
    field-sizing: content;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--color-text);
    outline: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-text-faint) transparent;
}

.svg-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}
.svg-textarea::placeholder {
    color: var(--color-text-faint);
}

/* Vista optimizada (read-only): tinte primary sutil */
.svg-textarea[data-optimized="true"] {
    background: oklch(from var(--color-primary) l c h / 0.05);
    border-color: oklch(from var(--color-primary) l c h / 0.28);
}

.code-output {
    background: oklch(from var(--color-success) l c h / 0.04);
    border-color: oklch(from var(--color-success) l c h / 0.22);
    cursor: default;
}
.code-output--empty {
    background: var(--color-surface-2);
    border-color: var(--color-border);
    color: var(--color-text-faint);
}