/*
 * rte_mobile.css - extras for the editor's built-in mobile toolbar.
 *
 * The editor already auto-swaps between `rte-toolbar-desktop` and
 * `rte-toolbar-mobile` based on `config.maxWidthForMobile`, and adds
 * `rte-mobile` / `rte-desktop` to its outer container. These rules layer on:
 *
 * - 44x44 tap targets.
 * - A sticky, horizontally scrolling toolbar.
 * - Bottom-sheet mounting for dropdowns, popups, dialogs, and review drawers.
 * - 16px content font to suppress iOS auto-zoom.
 *
 * Rules stay scoped to the editor's `.rte-mobile` class and narrow-viewport /
 * coarse-pointer media queries, so desktop layouts are unchanged.
 */

@media (max-width: 768px), (pointer: coarse) {

    .richtexteditor.rte-mobile rte-toolbar.rte-toolbar-mobile {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap !important;
        gap: 2px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: none;
        position: sticky;
        top: 0;
        z-index: 5;
        padding: 2px 4px;
        background: #fff;
        background-clip: padding-box;
    }

    .richtexteditor.rte-mobile rte-toolbar.rte-toolbar-mobile::-webkit-scrollbar {
        display: none;
    }

    .richtexteditor.rte-mobile rte-toolbar.rte-toolbar-mobile rte-toolbar-group {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        min-width: 0;
    }

    /* 2026-07-02 mobile toolbar polish. Keep tap targets large, but make the
       visual chrome tighter and make SVG sizing win over runtime inline styles. */
    .richtexteditor.rte-mobile rte-toolbar-button,
    .richtexteditor.rte-mobile rte-toolbar-splitbutton,
    .richtexteditor.rte-mobile rte-toolbar-dropdown,
    .richtexteditor.rte-mobile rte-toolbar-arrowbutton {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        width: auto;
        height: auto;
        padding: 10px;
        border-radius: 8px;
        color: var(--rte-icon-color, #5f6368);
        background-clip: padding-box;
        transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
    }

    .richtexteditor.rte-mobile rte-toolbar-splitbutton-direct,
    .richtexteditor.rte-mobile rte-toolbar-splitbutton-dropdown {
        display: inline-flex;
        align-items: center;
        align-self: stretch;
        justify-content: center;
        min-height: 24px;
    }

    .richtexteditor.rte-mobile rte-toolbar-button svg,
    .richtexteditor.rte-mobile rte-toolbar-splitbutton svg,
    .richtexteditor.rte-mobile rte-toolbar-dropdown svg,
    .richtexteditor.rte-mobile rte-toolbar-arrowbutton svg {
        display: block !important;
        flex: 0 0 auto;
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        align-self: center !important;
        color: currentColor;
        pointer-events: none;
    }

    .richtexteditor.rte-mobile rte-toolbar-button:active,
    .richtexteditor.rte-mobile rte-toolbar-splitbutton:active,
    .richtexteditor.rte-mobile rte-toolbar-dropdown:active,
    .richtexteditor.rte-mobile rte-toolbar-arrowbutton:active {
        color: #1559d6;
        background-color: #f3f8ff;
        border-color: rgba(37,99,235,.14);
    }

    .richtexteditor.rte-mobile rte-toolbar-button.rte-command-active,
    .richtexteditor.rte-mobile rte-toolbar-splitbutton.rte-command-active,
    .richtexteditor.rte-mobile rte-toolbar-dropdown.rte-command-active,
    .richtexteditor.rte-mobile rte-toolbar-arrowbutton.rte-command-active {
        color: #1559d6;
        fill: currentColor;
        background-color: #edf6ff;
        border-color: rgba(37,99,235,.22);
        box-shadow: inset 0 0 0 1px rgba(37,99,235,.12);
    }

    .richtexteditor.rte-mobile rte-toolbar-button:focus-visible,
    .richtexteditor.rte-mobile rte-toolbar-splitbutton:focus-visible,
    .richtexteditor.rte-mobile rte-toolbar-dropdown:focus-visible,
    .richtexteditor.rte-mobile rte-toolbar-arrowbutton:focus-visible {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37,99,235,.18);
        background-color: #eef4ff;
    }

    .richtexteditor.rte-mobile rte-dropdown-panel,
    .richtexteditor.rte-mobile rte-popup {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        box-sizing: border-box;
        width: 100vw;
        max-height: min(60vh, calc(100vh - 24px));
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border: 1px solid #e2e8f0;
        border-bottom: none;
        background: #fff;
        background-clip: padding-box;
        box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.12);
        padding: 10px 8px 22px;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 2147483647;
    }

    .richtexteditor.rte-mobile rte-floattoolbar,
    .richtexteditor.rte-mobile rte-floatparagraph {
        display: none !important;
    }

    .richtexteditor.rte-mobile ~ .aitoolkit-dialog,
    body.rte-mobile .aitoolkit-dialog {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
    }

    .richtexteditor.rte-mobile ~ .aitoolkit-review-drawer,
    body.rte-mobile .aitoolkit-review-drawer,
    .richtexteditor.rte-mobile ~ .comments-sidebar,
    body.rte-mobile .comments-sidebar {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        box-sizing: border-box;
        width: auto !important;
        max-height: min(55vh, calc(100vh - 24px));
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-top: 1px solid #e2e8f0;
        background-clip: padding-box;
        overflow: hidden;
    }

    .richtexteditor.rte-mobile iframe,
    .richtexteditor.rte-mobile .rte-editable {
        font-size: 16px;
    }

    .rte-dark.richtexteditor.rte-mobile rte-toolbar.rte-toolbar-mobile {
        background: var(--rte-surface-raised, #1e293b);
    }

    .rte-dark.richtexteditor.rte-mobile rte-toolbar-button,
    .rte-dark.richtexteditor.rte-mobile rte-toolbar-splitbutton,
    .rte-dark.richtexteditor.rte-mobile rte-toolbar-dropdown,
    .rte-dark.richtexteditor.rte-mobile rte-toolbar-arrowbutton {
        color: var(--rte-icon-color, #cbd5e1);
    }

    .rte-dark.richtexteditor.rte-mobile rte-toolbar-button.rte-command-active,
    .rte-dark.richtexteditor.rte-mobile rte-toolbar-splitbutton.rte-command-active,
    .rte-dark.richtexteditor.rte-mobile rte-toolbar-dropdown.rte-command-active,
    .rte-dark.richtexteditor.rte-mobile rte-toolbar-arrowbutton.rte-command-active {
        color: #bfdbfe;
        background-color: #1e3a5f;
        border-color: rgba(96,165,250,.46);
        box-shadow: inset 0 0 0 1px rgba(96,165,250,.24);
    }

    @media (prefers-color-scheme: dark) {
        .richtexteditor.rte-mobile:not(.rte-light) rte-toolbar.rte-toolbar-mobile {
            background: var(--rte-surface-raised, #1e293b);
        }

        .richtexteditor.rte-mobile:not(.rte-light) rte-toolbar-button,
        .richtexteditor.rte-mobile:not(.rte-light) rte-toolbar-splitbutton,
        .richtexteditor.rte-mobile:not(.rte-light) rte-toolbar-dropdown,
        .richtexteditor.rte-mobile:not(.rte-light) rte-toolbar-arrowbutton {
            color: var(--rte-icon-color, #cbd5e1);
        }

        .richtexteditor.rte-mobile:not(.rte-light) rte-toolbar-button.rte-command-active,
        .richtexteditor.rte-mobile:not(.rte-light) rte-toolbar-splitbutton.rte-command-active,
        .richtexteditor.rte-mobile:not(.rte-light) rte-toolbar-dropdown.rte-command-active,
        .richtexteditor.rte-mobile:not(.rte-light) rte-toolbar-arrowbutton.rte-command-active {
            color: #bfdbfe;
            background-color: #1e3a5f;
            border-color: rgba(96,165,250,.46);
            box-shadow: inset 0 0 0 1px rgba(96,165,250,.24);
        }
    }
}

.rte-force-mobile .richtexteditor rte-toolbar.rte-toolbar-mobile {
    display: flex !important;
}

.rte-force-mobile .richtexteditor rte-toolbar.rte-toolbar-desktop {
    display: none !important;
}