/* Human / Machine view toggle and the machine view it opens.
   Markup and behaviour: resources/views/components/client/v26/parts/view-mode-toggle.blade.php.
   Copied verbatim to public/app-assets/css/v26 by webpack.mix.js; linked just before the toggle
   markup, and the toggle script waits for it, so neither is drawn unstyled.

   The machine view is monospace on purpose: it shows the page the way an agent reads it,
   not a v26 text style. Same system mono stack the sale-calendar coupon code uses. */

/* Liquid glass, cut from the same sheet as the bottom tab bar (navigation.blade.php):
   white at 80% over a blur, the 0.6px grey hairline, the bar's shadow, and the bar's
   bg-10 capsule under the chosen item, which here slides between the two labels. The
   toggle keeps its place and its look in both views; the machine view opens beneath it
   and beneath the bottom bar. */
#rm-view-toggle {
    position: fixed;
    left: 50%;
    bottom: var(--rm-vt-bottom, calc(16px + env(safe-area-inset-bottom)));
    z-index: 99;
    /* Stays visible while view-mode-boot keeps the body hidden. */
    visibility: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    border-radius: 9999px;
    border: 0.616px solid rgba(229, 231, 235, 0.6);
    background: var(--color-background-transparent-white-80, rgba(255, 255, 255, 0.8));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 15px -3px rgba(16, 24, 40, 0.05),
        0 4px 6px -4px rgba(16, 24, 40, 0.05);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    transform: translateX(-50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#rm-view-toggle[hidden] {
    display: none;
}

/* The capsule under the chosen side. Both columns are equal, so it moves by its own width. */
#rm-view-toggle::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 9999px;
    background: var(--color-background-bg-10, #f5f8fa);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: transform 0.42s cubic-bezier(0.34, 1.32, 0.64, 1);
}

#rm-view-toggle[data-mode="machine"]::before {
    transform: translateX(100%);
}

/* Out of the way while something else owns the bottom of the screen. */
#rm-view-toggle[data-yield="true"] {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
}

#rm-view-toggle button {
    position: relative;
    z-index: 1;
    height: 30px;
    padding: 0 16px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: #6f6f6f;
    font-family: var(--font-sans-serif, "Poppins", sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.15s ease;
}

#rm-view-toggle button:hover,
#rm-view-toggle button[aria-checked="true"] {
    color: #161616;
}

#rm-view-toggle button:active {
    transform: scale(0.96);
}

#rm-view-toggle button:focus-visible {
    outline: 2px solid #161616;
    outline-offset: 1px;
}

/* Machine view: the toggle, the bottom bar and the Aeris dock keep their places above the
   view, so the frame of the screen stays put and only the page changes. Layer order, top
   down: toggle (…003) > Aeris dock (…002) > bottom bar (…001) > #rm-machine-view (…000). */
html.rm-machine-open #rm-view-toggle {
    z-index: 2147483003;
}

html.rm-machine-open #client-v26-bottom-bar {
    z-index: 2147483001;
}

html.rm-machine-open #client-v26-aeris-dock {
    z-index: 2147483002;
}

#rm-machine-view {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    visibility: visible;
    background: #111111;
    color: rgba(255, 255, 255, 0.86);
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.7;
    animation: rm-machine-in 0.18s ease-out;
}

@keyframes rm-machine-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

#rm-machine-view .rm-mv-page {
    box-sizing: border-box;
    max-width: 760px;
    margin: 0 auto;
    padding: calc(40px + env(safe-area-inset-top)) 24px var(--rm-mv-bottom, calc(96px + env(safe-area-inset-bottom)));
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 100%;
}

#rm-machine-view .rm-mv-line {
    min-height: 1.7em;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#rm-machine-view .rm-mv-h {
    color: #ffffff;
    font-weight: 600;
}

#rm-machine-view .rm-mv-quote,
#rm-machine-view .rm-mv-code {
    color: rgba(255, 255, 255, 0.6);
}

#rm-machine-view a {
    color: #ffffff;
    text-decoration: none;
}

#rm-machine-view a:hover .rm-mv-label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

#rm-machine-view .rm-mv-url {
    color: rgba(255, 255, 255, 0.42);
}

#rm-machine-view .rm-mv-copy {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
}

#rm-machine-view .rm-mv-copy:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

#rm-machine-view .rm-mv-copy:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

#rm-machine-view .rm-mv-copy svg {
    width: 16px;
    height: 16px;
}

#rm-machine-view .rm-mv-copy .rm-mv-done,
#rm-machine-view .rm-mv-copy[data-copied="true"] .rm-mv-idle {
    display: none;
}

#rm-machine-view .rm-mv-copy[data-copied="true"] .rm-mv-done {
    display: block;
}

html.rm-machine-open,
html.rm-machine-open body {
    overflow: hidden;
}

@media (max-width: 1023px) {
    #rm-machine-view {
        font-size: 12px;
    }

    #rm-machine-view .rm-mv-page {
        padding-left: 16px;
        padding-right: 56px;
        border: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #rm-view-toggle,
    #rm-view-toggle::before,
    #rm-view-toggle button {
        transition: none;
    }

    #rm-machine-view {
        animation: none;
    }
}