:root {
    --reply-size: clamp(17px, 1.8vw, 23px);

    --reply-weight: 500;

    --reply-gap: 56px;

    --reply-align: right;
}

.switch-reply {
    position: fixed;
    box-sizing: border-box;
    top: calc(
        var(--header-offset, 35px) + var(--header-btn, 44px) +
        var(--reply-gap) + var(--safe-top, 0px)
    );
    right: calc(
        var(--header-offset, 35px) + var(--header-btn, 44px) * 3 +
        var(--safe-right, 0px)
    );
    z-index: var(--layer-note, 900);

    max-width: min(
        320px,
        calc(100vw - var(--header-offset, 35px) - var(--header-btn, 44px) * 3 - 14px)
    );

    text-align: var(--reply-align);
    font-family: var(--hand);
    font-synthesis-weight: none;
    font-size: var(--reply-size);
    font-weight: var(--reply-weight);
    line-height: 1.55;
    color: inherit;

    opacity: 0;
    transform: rotate(-4.5deg) translateY(-6px);
    transform-origin: right center;
    pointer-events: none;
    transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        color 0.6s ease;
}

.switch-reply.is-shown {
    opacity: 0.9;
    transform: rotate(-4.5deg) translateY(0);
}

.switch-arrow {
    --arrow-len: min(calc(var(--reply-gap) - 4px), 56px);

    position: absolute;
    right: -6px;
    top: calc(var(--arrow-len) * -1);
    height: var(--arrow-len);
    width: calc(var(--arrow-len) * 44 / 50);
    overflow: visible;
}

.switch-arrow-ink {
    stroke-width: 0.10em;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.55s ease;
}

.switch-reply.is-shown .switch-arrow-ink { stroke-dashoffset: 0; }

.switch-reply.is-plated .switch-words {
    padding: 2px 12px 4px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.switch-reply.is-plated.is-shown { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .switch-reply,
    .switch-reply.is-shown {
        transform: rotate(-4.5deg);
        transition: opacity 0.45s ease, color 0.6s ease;
    }

    .switch-arrow-ink,
    .switch-reply.is-shown .switch-arrow-ink {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        transition: none;
    }
}