/* ===== Textarea Component ===== */

.ui-textarea-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ui-textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: var(--font-lineheight-body);
    background: var(--textarea-background, var(--meb-surface-input, var(--meb-surface-card)));
    color: var(--textarea-foreground, var(--meb-text-default));
    border: 1px solid var(--textarea-border, var(--meb-border-input, var(--meb-border-subtle)));
    border-radius: 6px;
    resize: vertical;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.ui-textarea::placeholder {
    color: var(--textarea-text-placeholder, var(--meb-text-muted));
}

.textarea-error {
    color: var(--textarea-border-error, var(--meb-accent-danger));
    font-size: var(--text-xs);
}

/* --- Focus state --- */

.ui-textarea:focus {
    border-color: var(--textarea-border-focus, var(--meb-border-accent));
    box-shadow: var(--focus-ring-shadow, var(--meb-button-primary-focus-shadow));
}

/* --- Variant: Default --- */

.ui-textarea-wrapper.variant-default .ui-textarea {
    background: var(--textarea-background, var(--meb-surface-input, var(--meb-surface-card)));
    border: 1px solid var(--textarea-border, var(--meb-border-input, var(--meb-border-subtle)));
}

/* --- Variant: Outlined --- */

.ui-textarea-wrapper.variant-outlined .ui-textarea {
    background: transparent;
    border: 1px solid var(--textarea-border, var(--meb-border-input, var(--meb-border-subtle)));
}

/* --- Variant: Filled --- */

.ui-textarea-wrapper.variant-filled .ui-textarea {
    background: var(--textarea-background, var(--meb-surface-input-filled));
    border: 1px solid transparent;
}

/* --- Disabled state --- */

.ui-textarea-wrapper.disabled .ui-textarea {
    opacity: 0.6;
    pointer-events: none;
    background: var(--textarea-surface-disabled, var(--meb-surface-disabled));
    color: var(--textarea-text-disabled, var(--meb-text-muted));
}

/* --- Error state --- */

.ui-textarea-wrapper.error .ui-textarea {
    border-color: var(--textarea-border-error, var(--meb-accent-danger));
}