/**
 * PersoNailit — product panel (phones). Every visible rule hangs from
 * .is-docked, set by product-panel.js only in the phone layout:
 *
 *   .is-docked     fixed at the bottom, with the bar on top
 *   .is-minimized  only the bar shows (--pi-dock-hide)
 *   .is-entering   start of the slide-up
 *   .is-dragging / .is-still  no transition
 *   .is-gliding    just landed / lifted off
 */

/* The core's look in the box's own colors and spacing. */
.personailit-box.personailit-panel {
    --pi-panel-accent: var(--pi-accent);
    --pi-panel-radius: var(--pi-radius);
    --pi-panel-pad: var(--pi-box-padding);
    --pi-panel-surface: var(--pi-surface);
    --pi-panel-border: var(--pi-border);
    --pi-panel-ink: var(--pi-ink);
    --pi-panel-ink-soft: var(--pi-ink-soft);
}

.personailit-box:not(.is-docked) > .personailit-panel-head {
    display: none;
}

/* --- Docked --------------------------------------------------------------- */

.personailit-box.is-docked {
    position: fixed;
    right: auto;
    bottom: var(--pi-dock-bottom, 0px); /* above the on-screen keyboard */
    left: var(--pi-dock-left, 0);
    z-index: 9990;
    width: var(--pi-dock-width, 100%);
    max-height: var(--pi-dock-max, 40vh);
    margin: 0;
    padding-top: 0;
    padding-bottom: calc(var(--pi-box-padding) + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 0;
    border-radius: var(--pi-radius) var(--pi-radius) 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.16);
    transform: translateY(0);
    transition: transform var(--pi-panel-motion) var(--pi-panel-ease);
    -webkit-overflow-scrolling: touch;
}

.personailit-box.is-docked.is-minimized {
    overflow: hidden;
    transform: translateY(var(--pi-dock-hide, 0px));
}

.personailit-box.is-docked.is-entering {
    transform: translateY(100%);
    transition: none;
}

.personailit-box.is-docked.is-dragging,
.personailit-box.personailit-box.is-still {
    transition: none;
}

/* Landing / lifting off. */
.personailit-box.is-gliding {
    transition: transform 0.32s var(--pi-panel-ease), box-shadow 0.32s ease;
}

.personailit-box.is-gliding > .personailit-title,
.personailit-box.is-docked.is-gliding .personailit-panel-bar {
    animation: personailit-dock-fade 0.32s ease both;
}

@keyframes personailit-dock-fade {
    from {
        opacity: 0;
    }
}

/* The bar replaces the box's own title and stripe. */
.personailit-box.is-docked::before,
.personailit-box.is-docked > .personailit-title {
    display: none;
}

/* --- The bar opens / minimizes the panel --------------------------------- */

.personailit-box.is-docked > .personailit-panel-head {
    cursor: pointer;
    touch-action: none; /* dragging the bar moves the panel, not the page */
}

.personailit-box.is-docked > .personailit-panel-head:focus {
    outline: none;
}

.personailit-box.is-docked > .personailit-panel-head:focus-visible {
    outline: 2px solid var(--pi-accent);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .personailit-box.is-docked,
    .personailit-box.is-gliding {
        transition: none;
    }

    .personailit-box.is-gliding > .personailit-title,
    .personailit-box.is-docked.is-gliding .personailit-panel-bar {
        animation: none;
    }
}