/**
 * Phone panel and independent menu-side controls for every screen size.
 * Author: Rolf-Peter Blümlein. Version: 1.4.25. No site template changes.
 */
.coloring-app .paint-phone-controls[hidden],
.coloring-app .paint-menu-side[hidden],
.coloring-app .paint-phone-cursor[hidden] { display: none; }

.coloring-app[data-phone-mode="1"] .paint-phone-controls {
    display: flex;
    justify-content: flex-end;
    /* Always top RIGHT, even when the tool panel is on the left. */
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2101;
    margin: 0;
    padding: max(.5rem, env(safe-area-inset-top, 0px)) max(.5rem, env(safe-area-inset-right, 0px)) .5rem .5rem;
    width: max-content;
    transform-origin: 0 0;
    pointer-events: none;
}
.coloring-app .paint-phone-toggle {
    display: grid;
    place-items: center;
    pointer-events: auto;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid #181713;
    border-radius: .4rem;
    background: #cdaa8e;
    color: #181713;
    font-size: 1.5rem;
    cursor: pointer;
}
.coloring-app .paint-phone-toggle svg { display: block; width: 27px; height: 27px; }
.coloring-app .paint-phone-toggle:focus-visible,
.coloring-app .paint-menu-side button:focus-visible { outline: 2px solid #172033; outline-offset: 2px; }
.coloring-app[data-phone-mode="1"] .paint-workspace .paint-layout {
    grid-template-columns: minmax(0, 1fr);
}
.coloring-app[data-phone-mode="1"] .paint-workspace .paint-sidebar {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    position: fixed;
    top: max(60px, calc(env(safe-area-inset-top, 0px) + 60px));
    right: .5rem;
    left: auto;
    z-index: 2100;
    width: min(20rem, calc(100vw - 1rem));
    height: auto;
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
    box-shadow: 0 4px 20px #17203340;
    background: var(--panel, #f7f7fb);
}
.coloring-app[data-phone-mode="1"][data-menu-side="left"] .paint-workspace .paint-sidebar { justify-self: start; left: .5rem; right: auto; }
.coloring-app[data-phone-mode="1"][data-phone-menu-open="0"] .paint-sidebar { display: none; }
.coloring-app[data-phone-mode="1"] .paint-workspace .paint-tools-scroll {
    position: relative;
    top: auto;
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
}
.coloring-app[data-phone-mode="1"] .paint-workspace .paint-tools { width: auto; }
/* Touch devices keep their navigation strip on the outer side of the menu. */
.coloring-app[data-phone-mode="1"] .paint-workspace .paint-scroll-zone { display: grid; }
.coloring-app .paint-menu-side { display: grid; gap: .5rem; margin: .5rem 0 1rem; }
.coloring-app .paint-menu-side button { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 44px; padding: .4rem .65rem; border: 1px solid #8d96a5; border-radius: 8px; background: #fff; color: var(--ink, #172033); font: inherit; text-align: start; cursor: pointer; }
.coloring-app .paint-menu-side button[aria-pressed="true"] { background: var(--ink, #172033); color: #fff; }
.coloring-app .paint-menu-side button svg { flex: 0 0 27px; }
.coloring-app .tablet-controls { margin: .5rem 0; }
.coloring-app .paint-phone-cursor {
    /* Same local coordinate space and transform as the painted bitmap. */
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 36px;
    height: 48px;
    transform-origin: 0 0;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 1px 1px #fff);
}
.coloring-app[data-phone-hand="left"] .paint-phone-cursor svg { transform: scaleX(-1); }
.coloring-app .paint-phone-cursor svg { display: block; width: 36px; height: 48px; }