input:focus,
textarea:focus {
    outline: none;
}

.world_archive {
    display: flex;
    flex-direction: row;
}

.center_box {
    display: flex;
    justify-content: center;
    align-content: flex-start;
    gap: 20px;

    width: 70%;
}

.archive_text {
    top: 15px;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 20px;
}

.left_box {
    width: 400px;
    max-width: 500px;
    position: sticky;
    height: 100vh;
}

.right_box {
    width: auto;
    min-width: 250px;
    max-width: 20%;
    height: calc(100vh - 110px);
    min-height: 560px;
    overflow-y: auto;
}

.message_text {
    position: fixed;
    overflow: visible;
    width: 60%;
    bottom: 20px;
    align-content: center;
    display: flex;
    flex-direction: row;
}

::selection {
    background: white;
    color: black;
}

/* textarea */


/* focus */

.style_text_input:focus {
    outline: none;
    /* stop inner animations */
    background-image: none;
    animation:
        inputPulse 3.5s ease-in-out infinite;
    box-shadow:
        inset 0 0 0 0.3px rgba(255, 255, 255, 0.5),
        0 0 18px rgba(255, 255, 255, 0.08),
        0 0 34px rgba(180, 220, 255, 0.04);

}

/* stop placeholder animation */

.style_text_input:focus::placeholder {
    animation: none;
    opacity: 0.75;
}

/* pulse */

@keyframes inputPulse {
    0% {
        box-shadow:
            inset 0 0 0 0.3px rgba(255, 255, 255, 0.18),
            0 0 8px rgba(255, 255, 255, 0.015);
    }

    50% {
        box-shadow:
            inset 0 0 0 0.3px rgba(255, 255, 255, 0.42),
            0 0 18px rgba(255, 255, 255, 0.06),
            0 0 30px rgba(180, 220, 255, 0.03);
    }

    100% {
        box-shadow:
            inset 0 0 0 0.3px rgba(255, 255, 255, 0.18),
            0 0 8px rgba(255, 255, 255, 0.015);
    }

}

/* scanline */

@keyframes scanlineMove {
    0% {
        background-position:
            0% -200%;
    }

    100% {
        background-position:
            0% 200%;
    }
}

/* placeholder */

@keyframes placeholderPulse {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.65;
    }

    100% {
        opacity: 0.3;
    }
}

.liked {
    box-shadow: inset 0 0 0 0.3px lime;
}

.form_transaction {
    display: flex;
    flex-direction: column;
    width: 10%;
}



/* scanline */
.button_send_message::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 50%,
            transparent 100%);
    background-size:
        100% 200%;
    animation:
        scanlineMove 6s linear infinite;
    pointer-events: none;
}

/* shimmer */
.button_send_message::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 80%;
    height: 100%;
    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent);
    transform: skewX(-20deg);
    animation:
        sendSweep 7s linear infinite;
    pointer-events: none;
}

/* hover */
.button_send_message:hover {
    background: white;
    color: black;
    cursor: pointer;
    box-shadow:
        inset 0 0 0 0.3px rgba(255, 255, 255, 0.7),
        0 0 20px rgba(255, 255, 255, 0.12);
}

/* click */
.button_send_message:active {
    transform: scale(0.985);
}



/* scanline */
.price_message::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.04) 50%,
            transparent 100%);
    background-size:
        100% 200%;
    animation:
        scanlineMove 8s linear infinite;
    pointer-events: none;
}

/* pulse */
@keyframes controlPulse {
    0% {
        box-shadow:
            inset 0 0 0 0.3px rgba(255, 255, 255, 0.18),
            0 0 8px rgba(255, 255, 255, 0.015);
    }

    50% {
        box-shadow:
            inset 0 0 0 0.3px rgba(255, 255, 255, 0.42),
            0 0 18px rgba(255, 255, 255, 0.06),
            0 0 30px rgba(180, 220, 255, 0.03);
    }

    100% {
        box-shadow:
            inset 0 0 0 0.3px rgba(255, 255, 255, 0.18),
            0 0 8px rgba(255, 255, 255, 0.015);
    }
}

/* scanline */
@keyframes scanlineMove {
    0% {
        background-position:
            0% -200%;
    }

    100% {
        background-position:
            0% 200%;
    }
}

/* shimmer */

@keyframes sendSweep {
    0% {
        left: -150%;
    }

    100% {
        left: 220%;
    }
}

::-webkit-scrollbar {
    display: none;
}

/* подпись */
.filter_label {
    font-size: 11px;
    opacity: 0.6;
}

/* =========================
   MOBILE TEXT SCALE
========================= */

@media(max-width:768px) {
    .floating_question {
        font-size: 80% !important;
        transform: scale(0.6);
    }

    .live_transmission {
        font-size: 80% !important;
    }

    .archive_intro h2 {
        font-size: 80% !important;
        padding: 0 15px;
    }

    .archive_intro p {
        font-size: 80% !important;
        padding: 0 20px;
        min-height: 15px;
    }

    #line_users_information {
        font-size: 9px;
    }

}

/* =========================
   MOBILE ADAPTATION BOX
========================= */
@media (max-width:768px) {

    /* главный контейнер */
    .world_archive {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        align-items: flex-start;
    }

    /* FILTERS слева */
    .left_box {
        width: auto;
        left: 10%;
        right: 10%;
        min-width: 0;
        height: auto;
        position: relative;
    }

    /* RANK справа (куда ты обвёл) */
    .right_box {
        width: auto;
        left: 15%;
        right: 15%;
        min-width: 0;
        height: 550px;
        /* высота примерно как фильтры */
        overflow-y: auto;
        position: relative;
    }

    .right_box::-webkit-scrollbar {
        display: none;
    }

    /* компактный рейтинг */
    .rank_table {
        width: 100%;
        font-size: 9px;
    }

    .rank_table th,
    .rank_table td {
        padding: 2px;
    }

    /* ЦЕНТР идёт ниже под ними */
    .center_box {
        width: 100%;
        order: 3;
        /* отправляем вниз */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* сообщения */
    .archive_text {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 15px;
        gap: 10px;
    }

    body {
        padding-left: 1px;
        padding-right: 1px;
    }

    .output_text_users {
        font-size: 70% !important;
        background: rgba(0, 0, 0, 0.40) !important;
        padding: 12px;
        width: 170px;
        margin: 0.1px !important;
        height: 80px;
        overflow: hidden;
    }


    .output_text_users:hover {
        transform: none;
    }

    /* фильтры чуть компактнее */
    .filter_btn,
    .filter_group button,
    .filter_group input {
        font-size: 9px;
        padding: 5px;
        width: 100%;
    }

    /* строка ввода */
    .message_text {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        min-height: 90px;
        background: transparent;
        z-index: 1000;
    }

    .style_text_input {
        min-height: 100px;
        height: 100px;
        padding: 15px;
        box-sizing: border-box;
    }


    .form_transaction {
        width: auto;
        min-width: 90px;
        flex-shrink: 0;
        min-height: 90px;
    }

    .button_send_message,
    .price_message {
        height: 49px;
    }

    /* PAY FORM MOBILE FIX */
    .confirm_message {
        width: 95%;
        left: 50%;
        transform: translateX(-50%);
        top: 60px;

        box-sizing: border-box;
    }

    .pay_form {
        width: 100%;
        padding: 15px;
    }

    #enter_name,
    #enter_email,
    #confirm_price {
        width: 100%;
        max-width: none;
    }

    .style_text_pay {
        width: 100%;
        height: 120px;
        padding: 15px;
    }

    .dop_opt {
        width: 100%;
        display: flex;
        flex-direction: column;
        /* кнопки вниз */
        gap: 8px;
    }

    #back_to_message,
    #pay_to_message,
    #paypal {
        width: 100%;
        padding: 14px;
    }

    .help_button {
        bottom: calc(env(safe-area-inset-bottom) + 120px) !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 18px !important;
    }

    .settings_button {
        bottom: calc(env(safe-area-inset-bottom) + 120px) !important;
        right: 60px !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 18px !important;
    }

    .settings_popup {
        bottom: calc(env(safe-area-inset-bottom) + 170px) !important;
        right: 15px !important;
    }
}

/*
.scan {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(transparent 0%, rgba(255, 255, 255, .02) 50%, transparent 100%);
    background-size: 100% 6px;
    animation: s 8s linear infinite
}

@keyframes s {
    from {
        transform: translateY(-100%)
    }

    to {
        transform: translateY(100%)
    }
}

Как что-то наебнется, вставить <div class="scan"></div> после <canvas id="c"></canvas>
*/