footer#html-footer .ctxm
{
    visibility: hidden;
}

#ctxm-lb
{
    position: fixed;
    inset: 0;
    background-color: var(--dialog-background-fade);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 108;
    transition: opacity 180ms ease, visibility 180ms;
}

body.ctxm #ctxm-lb:not([hidden])
{
    opacity: 0.55;
    visibility: visible;
    pointer-events: auto;
}

.ctxm-highlight
{
    position: fixed;
    background-color: var(--dialog-background-highlight);
    border-radius: 2px;
    pointer-events: none;
    z-index: 108;
    display: none;
}

body.ctxm .ctxm-highlight
{
    display: block;
}

#ctxm-menu
{
    position: fixed;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: max-content;
    min-width: min(200px, var(--ctxm-width, 100vw));
    max-width: var(--ctxm-width, calc(100vw - 24px));
    max-height: var(--ctxm-height, calc(100dvh - 24px));
    padding: 6px;
    background-color: var(--dialog-background-normal);
    color: var(--dialog-color-normal);
    border: 1px solid var(--dialog-border-normal);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgb(0 0 0 / 18%);
    outline: none;
    z-index: 109;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    touch-action: manipulation;
}

body.ctxm #ctxm-menu
{
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#ctxm-menu > .ctxm-content
{
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: 6px;
}

/* Input pickers use one scrollable content area; short screens retain scrolling. */
#ctxm-menu > .ctxm-content:has(.datetime, .w-keypad, .color-picker, .filepath-picker, .rich-image-picker, .rich-format-menu, .directory)
{
    scrollbar-width: none;
}

#ctxm-menu > .ctxm-content:has(.datetime, .w-keypad, .color-picker, .filepath-picker, .rich-image-picker, .rich-format-menu, .directory)::-webkit-scrollbar
{
    display: none;
}

#ctxm-menu:has(.color-picker, .filepath-picker, .rich-image-picker)
{
    /* Some picker callers set overflow:auto inline; avoid a second scroll owner. */
    overflow: hidden !important;
}

#ctxm-menu .filepath-children
{
    max-height: none;
    overflow: visible;
}

#ctxm-menu > .ctxm-close
{
    flex: 0 0 auto;
    align-self: flex-end;
    min-width: 64px;
    min-height: 40px;
    margin: 6px 0 0;
    padding: 0 12px;
    border: 1px solid var(--dialog-border-highlight);
    border-radius: 7px;
    background-color: var(--dialog-background-highlight);
    color: var(--dialog-color-normal);
    font: inherit;
    cursor: pointer;
    transition: background-color 140ms ease;
}

#ctxm-menu > .ctxm-close[hidden]
{
    display: none;
}

#ctxm-menu :focus-visible
{
    outline: 2px solid var(--dialog-border-highlight);
    outline-offset: -2px;
}

#ctxm-menu > .ctxm-close:hover
{
    background-color: var(--dialog-background-normal);
}

@media (max-width: 767px)
{
    #ctxm-menu
    {
        width: var(--ctxm-width, 100vw);
        border-radius: 14px 14px 0 0;
        padding: 8px 8px max(8px, env(safe-area-inset-bottom));
        transform: translateY(12px);
    }

    #ctxm-menu > .ctxm-close
    {
        align-self: stretch;
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce)
{
    #ctxm-menu, #ctxm-lb, #ctxm-menu > .ctxm-close
    {
        transition: none;
        transform: none;
    }
}