/*
 * Reference-matched interactions:
 * - independently spreading exchange arrows;
 * - two-link Premium Exchanger operator launcher;
 * - graceful fallback hiding after TriChat is ready.
 */

.onek-terminal__swap-arrow,
.onek-operator-widget {
    display: none;
}

@media (max-width: 720px) {
    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap {
        position: relative;
        overflow: visible;
        background: transparent !important;
        filter: none !important;
        transform: none !important;
        transition: none;
    }

    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:hover,
    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:focus-visible,
    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:active {
        background: transparent !important;
        filter: none !important;
        transform: none !important;
    }

    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap-arrow {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 39px;
        height: 40px;
        fill: #5d87b9;
        pointer-events: none;
        transform: translate(-50%, -50%);
        transition: left .3s ease, fill .3s ease;
    }

    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:hover .onek-terminal__swap-arrow,
    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:focus-visible .onek-terminal__swap-arrow {
        fill: #257add;
    }

    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:hover .onek-terminal__swap-arrow--right,
    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:focus-visible .onek-terminal__swap-arrow--right {
        left: calc(50% + 5px);
    }

    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:hover .onek-terminal__swap-arrow--left,
    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:focus-visible .onek-terminal__swap-arrow--left {
        left: calc(50% - 5px);
    }
}

html.onek-trichat-ready .onek-float-btn--chat {
    display: none !important;
}

/* Keep the third-party chat typography isolated from the 1K page rhythm. */
#trichat-root {
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

#trichat-root * {
    font-family: inherit !important;
}

button.onek-float-btn {
    padding: 0;
    border: 0;
    appearance: none;
    cursor: pointer;
}

.onek-floating-actions--global .onek-operator-widget {
    position: absolute;
    bottom: 28px;
    left: 22px;
    z-index: 3;
    display: block;
    width: 60px;
    height: 60px;
    pointer-events: auto;
}

@media (max-width: 720px) {
    .onek-floating-actions--global .onek-operator-widget {
        bottom: 16px;
        left: 16px;
    }

    body.onek-landing-page .onek-float-btn--telegram {
        display: none !important;
    }

    body.onek-landing-page .onek-operator-widget {
        position: absolute;
        right: 16px;
        bottom: 84px;
        left: auto;
        z-index: 14;
        display: block;
        width: 60px;
        height: 60px;
        pointer-events: auto;
    }

    .onek-operator-widget__toggle {
        position: relative;
        z-index: 3;
        display: grid;
        width: 60px;
        height: 60px;
        box-sizing: border-box;
        place-items: center;
        overflow: hidden;
        border: 3px solid #f5ba1e;
        border-radius: 50%;
        background: #f5ba1e;
        box-shadow: none;
        cursor: pointer;
        transition: background-color .2s ease, transform .2s ease;
    }

    .onek-operator-widget__toggle:hover,
    .onek-operator-widget__toggle:focus-visible {
        transform: none;
    }

    .onek-operator-widget__toggle img {
        position: absolute;
        object-fit: contain;
        transition: opacity .16s ease, transform .2s ease;
    }

    .onek-operator-widget__open-icon {
        width: 40px;
        height: 36px;
    }

    .onek-operator-widget__close-icon {
        width: 24px;
        height: 24px;
        opacity: 0;
        transform: scale(.65) rotate(-45deg);
    }

    .onek-operator-widget__items {
        position: absolute;
        z-index: 2;
        inset: 0;
        pointer-events: none;
    }

    .onek-operator-widget__item {
        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        width: 44px;
        height: 30px;
        align-items: center;
        justify-content: flex-end;
        color: #fff;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(.45);
        transition: transform .2s ease;
    }

    .onek-operator-widget__item:nth-child(2) {
        transition-duration: .25s;
        transition-delay: .2s;
    }

    .onek-operator-widget__item img {
        display: block;
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        border-radius: 50%;
        object-fit: contain;
        box-shadow: none;
    }

    .onek-operator-widget__item span {
        position: absolute;
        top: 50%;
        right: 44px;
        left: auto;
        width: max-content;
        max-width: 190px;
        padding: 3px;
        border-radius: 3px;
        background: #000;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%);
        transition: opacity .2s ease;
    }

    .onek-operator-widget.is-open .onek-operator-widget__toggle {
        background: #fff;
    }

    .onek-operator-widget.is-open .onek-operator-widget__open-icon {
        opacity: 0;
        transform: scale(.65) rotate(45deg);
    }

    .onek-operator-widget.is-open .onek-operator-widget__close-icon {
        opacity: 1;
        transform: scale(1) rotate(0);
    }

    .onek-operator-widget.is-open .onek-operator-widget__item {
        pointer-events: auto;
    }

    .onek-operator-widget.is-open .onek-operator-widget__item:nth-child(1) {
        transform: translate(-50%, -205%) scale(1);
    }

    .onek-operator-widget.is-open .onek-operator-widget__item:nth-child(2) {
        transform: translate(-50%, -315%) scale(1);
    }

    .onek-operator-widget.is-open .onek-operator-widget__item span {
        opacity: 1;
        transition-delay: .6s;
    }
}

@media (min-width: 721px) {
    .onek-floating-actions--global .onek-operator-widget {
        bottom: 28px;
        left: 22px;
    }

    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap {
        position: relative;
        overflow: visible;
        background: transparent !important;
        filter: none !important;
        transform: none !important;
        transition: none;
    }

    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:hover,
    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:focus-visible,
    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:active {
        background: transparent !important;
        filter: none !important;
        transform: none !important;
    }

    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap-arrow {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 39px;
        height: 40px;
        fill: #5d87b9;
        pointer-events: none;
        transform: translate(-50%, -50%);
        transition: left .3s ease, fill .3s ease;
    }

    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:hover .onek-terminal__swap-arrow,
    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:focus-visible .onek-terminal__swap-arrow {
        fill: #257add;
    }

    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:hover .onek-terminal__swap-arrow--right,
    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:focus-visible .onek-terminal__swap-arrow--right {
        left: calc(50% + 5px);
    }

    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:hover .onek-terminal__swap-arrow--left,
    body.onek-landing-page .onek-terminal--exchange .onek-terminal__swap:focus-visible .onek-terminal__swap-arrow--left {
        left: calc(50% - 5px);
    }

    body.onek-landing-page .onek-float-btn--telegram {
        display: none !important;
    }

    body.onek-landing-page .onek-operator-widget {
        position: absolute;
        bottom: 16px;
        left: 16px;
        z-index: 3;
        display: block;
        width: 60px;
        height: 60px;
        pointer-events: auto;
    }

    .onek-operator-widget__toggle {
        position: relative;
        z-index: 3;
        display: grid;
        width: 60px;
        height: 60px;
        box-sizing: border-box;
        place-items: center;
        overflow: hidden;
        border: 3px solid #f5ba1e;
        border-radius: 50%;
        background: #f5ba1e;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
        cursor: pointer;
        transition: background-color .2s ease, transform .2s ease;
    }

    .onek-operator-widget__toggle:hover,
    .onek-operator-widget__toggle:focus-visible {
        transform: scale(1.04);
    }

    .onek-operator-widget__toggle img {
        position: absolute;
        width: 36px;
        height: 36px;
        object-fit: contain;
        transition: opacity .16s ease, transform .2s ease;
    }

    .onek-operator-widget__close-icon {
        opacity: 0;
        transform: scale(.65) rotate(-45deg);
    }

    .onek-operator-widget__items {
        position: absolute;
        z-index: 2;
        inset: 0;
        pointer-events: none;
    }

    .onek-operator-widget__item {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 44px;
        height: 44px;
        color: #fff;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(.45);
        transition: transform .2s ease;
    }

    .onek-operator-widget__item:nth-child(2) {
        transition-duration: .25s;
        transition-delay: .2s;
    }

    .onek-operator-widget__item img {
        display: block;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: contain;
        box-shadow: 0 5px 14px rgba(0, 0, 0, .22);
    }

    .onek-operator-widget__item span {
        position: absolute;
        top: 50%;
        left: calc(100% + 7px);
        width: max-content;
        max-width: 190px;
        padding: 3px 6px;
        border-radius: 3px;
        background: #000;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.15;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%);
        transition: opacity .2s ease;
    }

    .onek-operator-widget.is-open .onek-operator-widget__toggle {
        background: #fff;
    }

    .onek-operator-widget.is-open .onek-operator-widget__open-icon {
        opacity: 0;
        transform: scale(.65) rotate(45deg);
    }

    .onek-operator-widget.is-open .onek-operator-widget__close-icon {
        opacity: 1;
        transform: scale(1) rotate(0);
    }

    .onek-operator-widget.is-open .onek-operator-widget__item {
        pointer-events: auto;
    }

    .onek-operator-widget.is-open .onek-operator-widget__item:nth-child(1) {
        transform: translate(-50%, -205%) scale(1);
    }

    .onek-operator-widget.is-open .onek-operator-widget__item:nth-child(2) {
        transform: translate(-50%, -315%) scale(1);
    }

    .onek-operator-widget.is-open .onek-operator-widget__item span {
        opacity: 1;
        transition-delay: .6s;
    }
}

/* Keep the operator launcher anchored to the viewport, like the chat launcher. */
html body.onek-body .onek-floating-actions .onek-operator-widget {
    position: fixed;
    left: max(16px, env(safe-area-inset-left, 0px));
    right: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 1280px) {
    html body.onek-body.onek-landing-page .onek-floating-actions .onek-operator-widget {
        left: auto;
        right: max(16px, env(safe-area-inset-right, 0px));
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    }
}

/* Mobile idle state keeps a tappable tab at the viewport edge. */
@media (max-width: 720px) {
    html body.onek-body .onek-floating-actions .onek-operator-widget {
        left: auto;
        right: max(16px, env(safe-area-inset-right, 0px));
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
        transition: transform .25s ease;
    }
    html body.onek-body .onek-floating-actions .onek-operator-widget.is-peeking {
        transform: translateX(calc(100% + max(16px, env(safe-area-inset-right, 0px)) - 24px));
    }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    html body.onek-body .onek-floating-actions .onek-operator-widget {
        transition: none;
    }
}