.annotation-rich-text.svelte-n7aqv b,
    .annotation-rich-text.svelte-n7aqv strong {
        font-weight: 700;
    }
    .annotation-rich-text.svelte-n7aqv i,
    .annotation-rich-text.svelte-n7aqv em {
        font-style: italic;
    }
    .annotation-rich-text.svelte-n7aqv u {
        text-decoration: underline;
        -webkit-text-decoration-skip-ink: none;
                text-decoration-skip-ink: none;
        text-underline-offset: 0.15em;
    }
    .annotation-rich-text.svelte-n7aqv p {
        margin: 0;
    }

    .annotation-select-checkbox {
        -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
        margin: 0;
        border: 1.5px solid rgba(148, 163, 184, 0.7);
        border-radius: 0.25rem;
        background-color: #ffffff;
        display: inline-grid;
        place-content: center;
        vertical-align: middle;
        color: #ffffff;
    }

    .annotation-select-checkbox:checked,
    .annotation-select-checkbox:indeterminate {
        background-color: var(--select-accent, #0f766e);
        border-color: var(--select-accent, #0f766e);
        color: #ffffff;
    }

    .annotation-select-checkbox:checked::after {
        content: '';
        width: 0.28rem;
        height: 0.5rem;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg) translate(-0.5px, -1px);
    }

    .annotation-select-checkbox:indeterminate::after {
        content: '';
        width: 0.55rem;
        height: 0;
        border-top: 2px solid #ffffff;
    }

    .annotation-select-checkbox:not(:checked):not(:indeterminate) {
        background-color: #ffffff;
        border-color: rgba(148, 163, 184, 0.7);
    }

    .annotation-ref-link {
        color: var(--ref-color);
        text-decoration: none;
        border-bottom: none;
        transition: color 0.15s ease;
    }

    .annotation-ref-link:hover,
    .group:hover .annotation-ref-link {
        color: var(--ref-hover-color);
        text-decoration: none;
        border-bottom: none;
    }
    /* Dialog safe margins on mobile */
    #verse-feedback-dialog {
        margin: 1rem auto;
        max-height: calc(100dvh - 2rem);
    }
    @media (min-width: 640px) {
        #verse-feedback-dialog {
            margin: 2rem auto;
            max-height: calc(100dvh - 4rem);
        }
    }

    /* Toolbar button */
    .rte-btn.svelte-12s7goe {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 0.375rem;
        border: none;
        background: transparent;
        cursor: pointer;
        color: inherit;
        transition: background-color 0.15s;
        padding: 0;
    }
    .rte-btn.svelte-12s7goe:hover {
        background-color: rgba(0, 0, 0, 0.08);
    }
    .rte-btn-active.svelte-12s7goe {
        background-color: var(--feedback-accent, #009688);
        color: #fff;
    }
    .rte-btn-active.svelte-12s7goe:hover {
        background-color: var(--feedback-accent, #009688);
        filter: brightness(1.1);
        color: #fff;
    }
    .dark .rte-btn.svelte-12s7goe:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .dark .rte-btn-active.svelte-12s7goe {
        background-color: var(--feedback-accent, #009688);
        color: #fff;
    }
    .dark .rte-btn-active.svelte-12s7goe:hover {
        background-color: var(--feedback-accent, #009688);
        filter: brightness(1.15);
        color: #fff;
    }

    /* Toolbar — ensure popups can overflow */
    .rte-toolbar.svelte-12s7goe {
        position: relative;
        z-index: 10;
        overflow: visible;
    }

    /* Toolbar divider */
    .rte-divider.svelte-12s7goe {
        width: 1px;
        height: 1.25rem;
        background-color: rgba(0, 0, 0, 0.12);
        margin: 0 0.25rem;
    }
    .dark .rte-divider.svelte-12s7goe {
        background-color: rgba(255, 255, 255, 0.15);
    }

    /* Popup */
    .rte-popup.svelte-12s7goe {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        z-index: 100;
        min-width: 10rem;
        padding: 0.5rem;
        border-radius: 0.5rem;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background-color: var(--popup-bg, #fff);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }
    .dark .rte-popup.svelte-12s7goe {
        --popup-bg: #1e293b;
        border-color: rgba(255, 255, 255, 0.1);
    }

    /* Color grid */
    .rte-color-grid.svelte-12s7goe {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.375rem;
    }
    .rte-color-swatch.svelte-12s7goe {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 0.25rem;
        border: 2px solid transparent;
        cursor: pointer;
        transition:
            border-color 0.15s,
            transform 0.1s;
    }
    .rte-color-swatch.svelte-12s7goe:hover {
        transform: scale(1.15);
    }

    /* Font option */
    .rte-font-option.svelte-12s7goe {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0.375rem 0.625rem;
        border-radius: 0.375rem;
        border: none;
        background: transparent;
        cursor: pointer;
        color: inherit;
        font-size: 0.8125rem;
        transition: background-color 0.15s;
    }
    .rte-font-option.svelte-12s7goe:hover {
        background-color: rgba(0, 0, 0, 0.06);
    }
    .dark .rte-font-option.svelte-12s7goe:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }
    .rte-font-active.svelte-12s7goe {
        font-weight: 600;
        background-color: rgba(0, 150, 136, 0.1);
    }

    /* Font size popup — multi-column */
    .rte-fontsize-popup.svelte-12s7goe {
        min-width: 8rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.125rem;
    }
    .rte-fontsize-popup.svelte-12s7goe .rte-font-option:where(.svelte-12s7goe) {
        text-align: center;
    }

    /* List styles inside editor */
    .rte-wrapper .tiptap ul {
        list-style-type: disc;
        padding-left: 1.5rem;
        margin: 0.25rem 0;
    }
    .rte-wrapper .tiptap ol {
        list-style-type: decimal;
        padding-left: 1.5rem;
        margin: 0.25rem 0;
    }
    .rte-wrapper .tiptap li {
        margin: 0.125rem 0;
    }
    /* List markers inherit color and font from li (which now carries textStyle) */
    .rte-wrapper .tiptap li::marker {
        color: currentColor;
        font-family: inherit;
        font-size: inherit;
    }

    /* Editor wrapper — no overflow-hidden so popups can escape */
    .rte-wrapper.svelte-12s7goe {
        position: relative;
        overflow: visible;
    }

    /* Editor area — target .tiptap inside the wrapper via global */
    .rte-wrapper .tiptap {
        min-height: 7rem;
        padding: 0.75rem 1rem;
        font-size: 14px;
        line-height: 1.6;
        outline: none;
        overflow-y: auto;
        max-height: 10rem;
    }
    @media (min-width: 640px) {
        .rte-wrapper .tiptap {
            min-height: 11.2rem; /* ~8 lines at 14px/1.6 line-height */
            max-height: 16rem;
        }
    }
    .rte-wrapper .tiptap p.is-editor-empty:first-child::before {
        color: rgba(0, 0, 0, 0.35);
        content: attr(data-placeholder);
        float: left;
        height: 0;
        pointer-events: none;
    }
    .dark .rte-wrapper .tiptap p.is-editor-empty:first-child::before {
        color: rgba(255, 255, 255, 0.35);
    }

    /* Focus ring on wrapper */
    /* (unused) .rte-wrapper:has(.tiptap:focus) {
        border-color: var(--feedback-accent);
    }*/

    /* Cancel button hover */
    @media (hover: hover) {
        .feedback-cancel-btn.svelte-12s7goe:hover {
            background-color: var(--cancel-hover);
        }
    }
    .annotation-select-checkbox {
        -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
        margin: 0;
        border: 1.5px solid rgba(148, 163, 184, 0.7);
        border-radius: 0.25rem;
        background-color: #ffffff;
        display: inline-grid;
        place-content: center;
        vertical-align: middle;
        color: #ffffff;
    }

    .annotation-select-checkbox:checked,
    .annotation-select-checkbox:indeterminate {
        background-color: var(--select-accent, #0f766e);
        border-color: var(--select-accent, #0f766e);
        color: #ffffff;
    }

    .annotation-select-checkbox:checked::after {
        content: '';
        width: 0.28rem;
        height: 0.5rem;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg) translate(-0.5px, -1px);
    }

    .annotation-select-checkbox:indeterminate::after {
        content: '';
        width: 0.55rem;
        height: 0;
        border-top: 2px solid #ffffff;
    }

    .dark .annotation-select-checkbox:not(:checked):not(:indeterminate) {
        background-color: #ffffff;
        border-color: rgba(148, 163, 184, 0.7);
    }

    .annotation-ref-link {
        color: var(--ref-color);
        text-decoration: none;
        border-bottom: none;
        transition: color 0.15s ease;
    }

    .annotation-ref-link:hover,
    .group:hover .annotation-ref-link {
        color: var(--ref-hover-color);
        text-decoration: none;
        border-bottom: none;
    }
    @media (hover: hover) {
        .audio-toggle-btn.svelte-s8omyx:hover {
            background-color: var(--toggle-hover-bg) !important;
        }
    }