@layer components {
    .content-editor {
        position: relative;
    }

    /* | EDIT INDICATOR: Shows a hint on hover/focus when not editable.
    | We check if the display element (the actual textbox) is *not* contenteditable="true"
    */
    .content-editor:hover .content-editor__display:not([contenteditable="true"])::after,
    .content-editor:focus-within .content-editor__display:not([contenteditable="true"])::after {
        content: '✍️'; /* Subtle text and icon */
        position: absolute;
        inset-inline-end: var(--pad-sm); /* Right side padding */
        inset-block-start: var(--pad-sm); /* Top padding */
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-regular);
        color: var(--color-primary); /* Use a noticeable color */
        background-color: color-mix(in srgb, var(--color-background-app) 80%, transparent); /* Slight background to stand out */
        padding: var(--pad-xs);
        border-radius: var(--radius-sm);
        pointer-events: none; /* Allows dblclick to pass through */
        opacity: 0.8;
    }

    .content-editor__display {
        width: 100%;
        font-size: var(--font-size-base);
        line-height: var(--line-height-base);
        display: block;
        min-height: calc(var(--font-size-base) * var(--line-height-tight) + var(--pad-sm) * 2); /* Consistent single-line minimum */
        box-shadow: none;
        transition: border-color 0.2s ease;
    }

    .content-editor__display.is-multi-line {
        line-height: var(--line-height-base);
        min-height: calc(var(--font-size-base) * var(--line-height-base) * 5 + var(--pad-sm) * 2); /* Mimics 5 rows */
        resize: vertical; /* Allow resizing like a standard textarea */
        overflow: auto; /* Show scrollbar if content exceeds min-height */
    }

    .content-editor__display[contenteditable="true"] {
        padding: var(--pad-sm) var(--pad-md);
        background-color: var(--color-background-app);
        border: var(--border-thickness-base) solid var(--color-border);
        border-radius: var(--radius-sm);
        border-color: var(--color-primary); /* Use primary color for focus/edit state */
        outline: none; /* Remove default browser outline */
    }

    .content-editor__display[contenteditable="false"].editable-placeholder {
        color: var(--color-foreground-secondary); /* Lighter grey text */
        font-style: italic;
        cursor: pointer; /* Hint that it's interactive */
        user-select: none;
        border-color: var(--color-border); /* Explicitly set border color back */
    }
}