index.scss

body{
    overflow-y: scroll;
}
.ProseMirror{
    outline: none;
    min-height: 204px;
    padding-bottom: 12px;
}

.progress-btn {
    background-color: #1790FF;
    border-radius: 24px;
    color: #AAB2BD;
}

.audio-player {
    width: 100%;
    height: 51px;
    background-color: #E6F7FF;
    border-radius: 51px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-start {
        height: 33px;
        width: 33px;
        background-color: white;
        border-radius: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &-center-start {
        width: 70%;
        height: 70%;
        background-color: #FF3B30;
        border-radius: 100px;
        cursor: pointer;
    }

    &-center-recording {
        width: 40%;
        height: 40%;
        background-color: #FF3B30;
        border-radius: 2px;
        cursor: pointer;
    }

    &-margin {
        margin: 10px;
    }

    &-voice {
        width: 70%;
        border-bottom: 2px dotted #1790FF;
    }

    &-timer {
        margin-right: 20px;
        color: #1790FF;
    }
}

.web {
    &-bottom-elements {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 30px;
    }

    &-button-wrap {
        cursor: pointer;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    &-button-rerecord {
        cursor: pointer;
        width: 30px;
        height: 30px;
        background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_220_1498)'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23AAB2BD'/%3E%3Cpath d='M9.16992 15.8948C9.16992 19.3059 11.918 22.0608 15.3223 22.0608C18.7334 22.0608 21.4814 19.3059 21.4814 15.8948C21.4814 12.4836 18.7676 9.76294 15.3633 9.76294C15.0557 9.76294 14.7549 9.79028 14.4951 9.84497L16.0195 8.34106C16.1494 8.19751 16.2246 8.03345 16.2246 7.82837C16.2246 7.41138 15.9033 7.06958 15.4863 7.06958C15.2744 7.06958 15.1035 7.14478 14.9668 7.29517L12.1641 10.1389C12.0137 10.2893 11.9316 10.4875 11.9316 10.6926C11.9316 10.9045 12.0068 11.0891 12.1641 11.2532L14.9668 14.0764C15.0967 14.2131 15.2744 14.2815 15.4863 14.2815C15.9033 14.2815 16.2246 13.9602 16.2246 13.5364C16.2246 13.3381 16.1494 13.1741 16.0127 13.0374L14.29 11.3284C14.6045 11.2668 14.9668 11.2395 15.3633 11.2395C17.9268 11.2395 19.957 13.2903 19.957 15.8948C19.957 18.4651 17.8994 20.5364 15.3223 20.5364C12.7588 20.5364 10.6875 18.4651 10.6875 15.8948C10.6875 15.4368 10.3867 15.1155 9.94922 15.1155C9.49121 15.1155 9.16992 15.4368 9.16992 15.8948Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_220_1498'%3E%3Crect width='30' height='30' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");

        &-text {
            margin-left: 10px;
            font-weight: 400;
            font-size: 17px;
            line-height: 20px;
            text-align: center;
            color: #AAB2BD;
        }
    }

    &-button-mute {
        cursor: pointer;
        width: 36px;
        height: 36px;
        background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.85 4.5C15.0784 4.5 12.75 6.82843 12.75 9.6V15.45C12.75 18.2216 15.0784 20.55 17.85 20.55C20.8296 20.55 23.064 18.3294 22.9512 15.51C22.9504 15.49 22.95 15.47 22.95 15.45V9.6C22.95 6.82843 20.6216 4.5 17.85 4.5ZM9.75 9.6C9.75 5.17157 13.4216 1.5 17.85 1.5C22.2784 1.5 25.95 5.17157 25.95 9.6V15.4215C26.1191 20.0862 22.3603 23.55 17.85 23.55C13.4216 23.55 9.75 19.8784 9.75 15.45V9.6ZM6 13.95C6.82843 13.95 7.5 14.6216 7.5 15.45C7.5 21.2284 12.2275 25.9308 17.9659 25.8004L18 25.8C23.634 25.8 28.35 21.2092 28.35 15.45C28.35 14.6216 29.0216 13.95 29.85 13.95C30.6784 13.95 31.35 14.6216 31.35 15.45C31.35 22.4247 26.0042 28.0538 19.35 28.7315V33C19.35 33.8284 18.6785 34.5 17.85 34.5C17.0216 34.5 16.35 33.8284 16.35 33V28.7309C9.67992 28.0296 4.5 22.3045 4.5 15.45C4.5 14.6216 5.17157 13.95 6 13.95Z' fill='%23AAB2BD'/%3E%3C/svg%3E");
    }

    &-button-unmute {
        cursor: pointer;
        width: 36px;
        height: 36px;
        background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.85 4.5C15.0784 4.5 12.75 6.82843 12.75 9.6V15.45C12.75 18.2216 15.0784 20.55 17.85 20.55C20.8296 20.55 23.064 18.3294 22.9512 15.51C22.9504 15.49 22.95 15.47 22.95 15.45V9.6C22.95 6.82843 20.6216 4.5 17.85 4.5ZM9.75 9.6C9.75 5.17157 13.4216 1.5 17.85 1.5C22.2784 1.5 25.95 5.17157 25.95 9.6V15.4215C26.1191 20.0862 22.3603 23.55 17.85 23.55C13.4216 23.55 9.75 19.8784 9.75 15.45V9.6ZM6 13.95C6.82843 13.95 7.5 14.6216 7.5 15.45C7.5 21.2284 12.2275 25.9308 17.9659 25.8004L18 25.8C23.634 25.8 28.35 21.2092 28.35 15.45C28.35 14.6216 29.0216 13.95 29.85 13.95C30.6784 13.95 31.35 14.6216 31.35 15.45C31.35 22.4247 26.0042 28.0538 19.35 28.7315V33C19.35 33.8284 18.6785 34.5 17.85 34.5C17.0216 34.5 16.35 33.8284 16.35 33V28.7309C9.67992 28.0296 4.5 22.3045 4.5 15.45C4.5 14.6216 5.17157 13.95 6 13.95Z' fill='%23AAB2BD'/%3E%3Crect y='3.12558' width='3' height='45.1821' rx='1.5' transform='rotate(-45.1148 0 3.12558)' fill='%23FF5F56'/%3E%3C/svg%3E");
    }

    &-button-spacer {
        cursor: pointer;
        width: 36px;
        height: 36px;
    }
}

.webwrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;

    &-video {
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

    &-start-border {
        border: 3px solid white;
        border-radius: 100px;
        position: absolute;
        bottom: 24px;
        height: 70px;
        width: 70px;
        padding: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 2;
    }

    &-timer {
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        font-weight: 400;
        font-size: 21px;
        line-height: 20px;
        text-align: center;
        color: #ffffff;
        z-index: 2;
    }

    &-start-center {
        width: 100%;
        height: 100%;
        background-color: #FF3B30;
        border-radius: 100px;
        border: none;
        cursor: pointer;
        z-index: 2;
    }

    &-record-center {
        width: 65%;
        height: 65%;
        background-color: #FF3B30;
        border-radius: 12px;
        border: none;
        cursor: pointer;
        z-index: 2;
    }

    &-content {
        width: 100%;
        aspect-ratio: 16 / 9;
        background-color: black;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
    }
}

//.btn {
//    &-video {
//        border-radius: 66px;
//        width: 200px;
//        height: 50px;
//        display: flex;
//        justify-content: center;
//        align-items: center;
//        cursor: pointer;
//        color: white;
//        margin: 5px;
//        margin-top: 30px;
//        border: none;
//        font-size: 17px;
//
//        &:hover {
//            -webkit-box-shadow: 4px 4px 26px 12px rgba(34, 60, 80, 0.2);
//            -moz-box-shadow: 4px 4px 26px 12px rgba(34, 60, 80, 0.2);
//            box-shadow: 4px 4px 26px 12px rgba(34, 60, 80, 0.2);
//        }
//
//        &-disabled {
//            background-color: #AAB2BD;
//        }
//
//        &-wrap {
//            display: flex;
//            flex-direction: row;
//        }
//
//        &-record {
//            background-color: #72c85f;
//        }
//
//        &-stop {
//            background-color: #EE505A;
//        }
//
//        &-mute {
//            background-color: #AAB2BD;
//        }
//    }
//}

@keyframes atma-spin {
    to { transform: rotate(360deg); }
}

.atma-editor {
    position: relative;
    border-radius: 8px;
    display: flex;
    flex-direction: column;

    &-wrap{
        margin-bottom: 20px;

        *{
            box-sizing: border-box;
        }
    }


    // ── Панель ───────────────────────────────────────────────────────────
    //
    // Геометрия из макета: кнопка 32×32, зазор внутри группы 2, поля панели 4/9.
    //
    // Отбивка между группами взята 6 + разделитель 1 + 6 вместо макетных 8+1+8.
    // Причина в ширине: макет рисовался на панель 1600 px, а в админке она 1080
    // (рамка редактора ограничена 1100). На такой ширине лишние 4 px у каждого
    // из шести разделителей — это второй ряд кнопок целиком. Один ряд важнее
    // четырёх пикселей воздуха; при желании расширить рамку редактора отбивка
    // вернётся к макетной.
    &-toolbar{
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        position: sticky;
        top: 0;
        flex-direction: row;
        align-items: center;
        border-radius: 8px 8px 0 0;
        border: 1px solid #E3E7EC;
        background-color: #ffffff;
        box-shadow: 0 -3px 0 3px #ffffff;
        padding: 4px 6px;
        z-index: var(--atma-toolbar-z-index, 10);
        gap: 2px;

        // Подпись группы решает, показываться ли ей, по ширине САМОЙ ПАНЕЛИ,
        // а не окна. В админке панель шириной 1080 при окне 1600: правило
        // по @media показало бы подпись там, где она не влезает, и панель
        // уехала бы во второй ряд.
        container-type: inline-size;

        &-g{
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 2px;

            // Группа с подписью: четыре возможности, которыми не пользовались
            // ни разу. Рамка и слово рядом делают их отдельной вещью,
            // а не продолжением ряда медиа-кнопок.
            &.has-label{
                border: 1px solid #E3E7EC;
                border-radius: 10px;
                padding: 1px 4px 1px 2px;
                margin: 0 4px;
            }

            // Подпись видна ВСЕГДА, в том числе на 1080 — целевой ширине поля
            // редактора на старых экранах.
            //
            // Здесь стояло `display: none` с показом от @container 1200px.
            // Это значило, что на экране, под который панель и делается,
            // подписи не видел никто, а вся затея с обведённой группой
            // теряла смысл. Место под подпись найдено в самом наборе кнопок
            // (см. LESSON в ToolBar.js), а не отложено до большого монитора.
            &-label{
                display: inline;
                font-size: 10px;
                font-weight: 600;
                letter-spacing: 0.06em;
                text-transform: uppercase;
                color: #6B7280;
                white-space: nowrap;
                padding: 0 6px 0 4px;
            }

            .qseparator{
                width: 1px;
                height: 20px;
                background-color: #E3E7EC;
                margin: 0 6px;
                flex-shrink: 0;
            }
        }

        &-info{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: auto;
            padding: 2px 4px;
            color: #8c8c8c;
            flex-shrink: 0;
            align-self: center;
            text-decoration: none;
            border-radius: 4px;
            transition: color 0.15s;
            background: none;
            border: none;
            cursor: pointer;
            outline: none;
            &:hover{
                color: #1790FF;
            }
        }

        // Кнопка со списком: сама выполняет главное действие группы,
        // каретка открывает остальное. Каретка отбита от иконки волосяной
        // линией и полем 4 — так сразу видно, что кнопка составная.
        &-s{
            $this: &;
            position: relative;
            display: flex;
            align-items: center;
            padding-right: 14px;
            margin-right: 0;
            border-radius: 8px;
            cursor: pointer;

            &:hover{
                background-color: #EDF1F6;

                .qicon:not(.active){
                    background-color: transparent;
                }
            }

            .qseparator{
                display: block;
                height: 8px;
            }

            // ── Список открывается ПОД кнопкой ───────────────────────────
            //
            // Здесь не было `top`, и абсолютно позиционированный список
            // вставал в своё «статическое» место — то есть по вертикальному
            // центру кнопки, потому что группа выровнена `align-items: center`.
            // У короткого списка сдвиг незаметен, а список таблицы из
            // одиннадцати пунктов уезжал НАД панелью и накрывал текст модуля.
            //
            // `max-height` со прокруткой — на случай длинного списка внизу
            // экрана: лучше прокрутить, чем показать половину за краем окна.
            &-opts{
                position: absolute;
                top: calc(100% + 6px);
                display: none;
                width: 260px;
                max-height: min(60vh, 420px);
                overflow-y: auto;
                border: 1px solid #E3E7EC;
                border-radius: 12px;
                box-shadow: 0 12px 32px 0 rgba(15, 20, 25, 0.12);
                background-color: #fff;
                padding: 6px;
                right: 42%;
                transform: translateX(50%);
                z-index: 10;

                // Пункт: иконка 20 и подпись словами. Высота 34 —
                // достаточно, чтобы попасть мышью, и не превращает список
                // из одиннадцати пунктов в простыню.
                &-item{
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    height: 34px;
                    padding: 0 10px;
                    border-radius: 8px;
                    color: #0F1419;
                    cursor: pointer;

                    .qicon-svg{
                        flex-shrink: 0;
                        color: #0F1419;
                    }

                    &:hover{
                        background-color: #EDF1F6;
                    }

                    span{
                        font-size: 13.5px;
                        line-height: 1.3;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    &.active{
                        background-color: #1790FF;
                        color: #FFFFFF;

                        .qicon-svg{
                            color: #FFFFFF;
                        }
                    }

                    &.disabled{
                        color: #B7BFC9;
                        cursor: default;

                        .qicon-svg{
                            color: #B7BFC9;
                        }

                        &:hover{
                            background-color: transparent;
                        }
                    }

                    &[data-type="h2"]{
                        span{
                            font-size: 1.5em;
                        }
                    }
                    &[data-type="h3"]{
                        span{
                            font-size: 1.17em;
                        }
                    }

                    // В списке уровень показан САМИМ размером подписи — это
                    // нагляднее любой пометки. Поэтому и значок, и буквенная
                    // подпись здесь лишние: «H2» рядом с крупным «Заголовок
                    // раздела» повторяет то, что уже видно.
                    &[data-type="h2"], &[data-type="h3"], &[data-type="h4"]{
                        font-weight: 500;
                        padding: 8px;

                        .qicon,
                        .qicon-text{
                            display: none;
                        }
                    }
                    &[data-type="paragraph"]{
                        padding: 8px;

                        .qicon,
                        .qicon-text{
                            display: none;
                        }
                    }
                }
            }

            // Каретка 10×6 и волосяная линия слева от неё: кнопка составная,
            // и это должно быть видно, а не угадываться.
            &:before{
                content: '';
                position: absolute;
                right: 14px;
                top: 50%;
                width: 1px;
                height: 16px;
                margin-top: -8px;
                background-color: #E3E7EC;
            }

            &:after{
                content: '';
                display: inline-block;
                width: 10px;
                height: 6px;
                position: absolute;
                top: 50%;
                right: 2px;
                margin-top: -3px;
                background-color: #6B7280;
                clip-path: polygon(0 0, 100% 0, 50% 100%);
                transition: transform .12s ease;
            }

            &.show{
                // Было `clip: rect(0,0,0,0)` / `clip: auto`. Свойство устарело
                // и, главное, не уживается с прокруткой внутри списка:
                // обрезка считается от исходной коробки, а не от прокрученной.
                #{$this}-opts{
                    display: block;
                }

                &:after{
                    transform: rotate(180deg);
                }
            }
        }

        // ── Кнопка панели ────────────────────────────────────────────────
        //
        // Шесть состояний из макета. Ключевая правка: наведение больше
        // не гасит иконку прозрачностью — под ней появляется подложка,
        // а сама иконка остаётся чёрной. Тускнеющая иконка читается как
        // «кнопка выключилась», а не «сюда можно нажать».
        //
        // Цветом управляет `color`: иконка — дочерний <svg> со stroke
        // currentColor (см. src/icons.js). С прежними background-image
        // это было невозможно, поэтому активное состояние и было серым.
        //
        // Размер один на все кнопки — 32×32. Раньше блок кода имел
        // width: 46px, а PPTX margin-top: 4px, потому что их картинки были
        // разной пропорции; теперь все на сетке 24×24.
        .qicon{
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border-radius: 8px;
            color: #0F1419;
            background-color: transparent;
            transition: background-color .12s ease, color .12s ease;

            .qicon-svg{
                display: block;
                pointer-events: none;
            }

            // Буквенная подпись уровня текста: T, H2, H3, H4.
            // Цвет НЕ задаётся — наследуется от кнопки, как и у svg-иконок,
            // поэтому все шесть состояний работают тем же правилом.
            .qicon-text{
                display: block;
                pointer-events: none;
                font-weight: 700;
                font-size: 13px;
                line-height: 1;
                letter-spacing: -0.02em;
                font-variant-numeric: tabular-nums;
            }

            &:hover{
                cursor: pointer;
                background-color: #EDF1F6;
            }

            &:active{
                background-color: #E2E7EE;
            }

            // Единственное состояние с цветом: форматирование применено
            // к выделению. Серым его не показать — спутается с наведением.
            &.active{
                background-color: #1790FF;
                color: #FFFFFF;

                &:hover{
                    background-color: #1790FF;
                }
            }

            &.disabled{
                color: #B7BFC9;
                background-color: transparent;
                cursor: default !important;

                &:hover{
                    background-color: transparent;
                }
            }
        }

        &-emoji{
            position: relative;
        }

        &:hover{
            z-index: 100000;
        }
    }


    // Поверхность редактирования: ТОЛЬКО рамка поля ввода и служебное для ProseMirror.
    //
    // Типографика контента отсюда УБРАНА и живёт в платформе —
    // AtmaGuru/src/React/sass/_content.scss. Причина: пакет диктовал вид вывода,
    // а платформа его отменяла (класс .fix-editor существовал только ради этого).
    // Теперь автор в редакторе и учащийся в уроке берут оформление из одного файла,
    // и WYSIWYG становится настоящим.
    //
    // Оформление контента сюда НЕ ВОЗВРАЩАТЬ. Граница описана в
    // docs/Редактор уроков и рендер контента — ТЗ.md, §3.2.
    &-content{
        border: 1px solid #ccc;
        border-top: 0;
        padding: 12px 15px;
        padding-bottom: 0;

        // ── Поле набора урока выглядит листом с полями ───────────────────────
        //
        // Текст ограничен мерой строки (`--atma-measure`, 608 px ≈ 70 знаков —
        // требование ТЗ владельца §6.2: «порядка 65–75 символов на desktop»),
        // а поле ввода шире. Пустые поля по бокам сами по себе читаются как сбой:
        // «почему в редакторе слева-справа такой отступ?» — вопрос владельца
        // 29.08.2026. Ширину не трогаем (у учащегося та же, на этом держится
        // WYSIWYG), а показываем, что это ПОЛЯ СТРАНИЦЫ: белый лист шириной
        // с колонку контента на светлой подложке.
        //
        // Только урок: в узких карточках (комментарий наставника, глоссарий)
        // лист шире содержимого не бывает, и подложка там ни к чему.
        &.atma-content--lesson {
            background: #F5F7FA;
            padding-bottom: 12px;

            // Ровно ширина колонки контента, ни пикселем меньше: по этой ширине
            // сверяется геометрия медиа с выводом (docs/stand/media-parity.js),
            // поэтому лист рисуется фоном и тенью, без padding и border.
            > .ProseMirror {
                background: #ffffff;
                border-radius: 4px;
                box-shadow: 0 0 0 1px #E3E7EC;
            }
        }

        // Пустой абзац в ProseMirror схлопывается без этого — курсор некуда поставить.
        // Правило редактирования, не оформления.
        p:after {
            content:"";
            display:inline-block;
            width:0;
        }

        // ── Служебное для ProseMirror: существует только во время правки ──────
        .selectedCell:after{
            z-index: 2;
            position: absolute;
            content: '';
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(200,200,255, 0.4);
            pointer-events: none;
        }

        .column-resize-handle{
            position: absolute;
            right: -2px;
            top: 0;
            bottom: -2px;
            width: 4px;
            background-color: #adf;
            pointer-events: none;
        }

        .resize-cursor{
            cursor: col-resize;
        }

        a[data-button-link="true"]{
            cursor: pointer;
        }

        .ProseMirror-selectednode[data-button-link="true"]{
            outline: 2px solid #1790FF;
            outline-offset: 2px;
        }
    }
    &-bubble{
        display: flex;
        flex-direction: row;
        border-radius: 8px;
        box-shadow: 0 16px 24px 0 rgba(0,0,0,0.2);
        background-color: #fff;
        padding: 8px;

        .qicon{
            width: 25px;
            height: 28px;
            background-repeat: no-repeat;
            background-position: center;
            margin-right: 2px;
            //background-color: tomato;

            &.active{
                opacity: 0.5;
            }

            &.disabled{
                opacity: 0.5;
                cursor: not-allowed !important;

                &:hover {
                    opacity: 0.5 !important;
                }
            }

            &:hover{
                cursor: pointer;
                opacity: 0.8;
            }
        }
    }

    &-modal{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        z-index: 100001;
        background-color: rgba(0, 0, 0, 0.2);

        &-box{
            display: inline-block;
            position: fixed;
            top: 50%;
            min-height: 200px;
            background: #fff;
            transform: translate(0, -50%);
            border-radius: 8px;
            max-width: 646px;
            min-width: 540px;
            padding: 48px;
            max-height: min(90dvh, 900px);
            overflow-y: auto;
            overflow-x: hidden;

            @media (max-width: 600px) {
                min-width: 0;
                width: calc(100vw - 32px);
                max-width: calc(100vw - 32px);
                left: 50%;
                transform: translate(-50%, -50%);
                padding: 24px 16px;
                max-height: calc(100dvh - 40px);
                border-radius: 12px;
            }

            &-header{
                display: block;
                text-align: left;
                font-size: 21px;
                font-weight: bold;
                margin-bottom: 35px;
            }
        }

        &-close {
            position: absolute;
            top: 0;
            right: 0;
        }

        &-action {
            width: 100%;
            padding: 24px 0 0;
            text-align: right;
        }

        input[type="text"]{
            background-color: #F5F7FA;
            font-size: 18px;
            border: none;
            padding: 19px 25px;
            border-radius: 16px;
            width: 100%;
            margin-bottom: 24px;
        }
    }

    &-field{
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;

        span{
            font-size: 13px;
            color: #4f4f4f;
        }

        &-color{
            align-items: flex-start;
        }
    }

    &-color-input{
        width: 72px;
        min-width: 72px;
        height: 36px;
        border: 1px solid #d9d9d9;
        border-radius: 8px;
        background: #fff;
        padding: 3px;
    }

    &-button-link{
        &-form{
            min-width: 420px;
        }

        &-grid{
            display: grid;
            grid-template-columns: minmax(0, 1.3fr) repeat(2, auto);
            gap: 16px;
            align-items: start;
        }

        &-preview-wrap{
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 8px;

            span{
                font-size: 13px;
                color: #4f4f4f;
            }
        }

        &-preview{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            align-self: flex-start;
            min-height: 42px;
            border-radius: 10px;
            padding: 10px 18px;
            text-decoration: none;
        }
    }

    &-uploader{
        &-drop{
            display: flex;
            width: 550px;
            height: 154px;
            background-color: #F5F7FA;
            border-radius: 16px;
            border: 2px dashed #CCD1D9;
            box-shadow: 0 0 0 1px #F5F7FA;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            &:hover{
                border-color: #adb0b6;
            }

            @media (max-width: 600px) {
                width: 100%;
                height: 120px;
            }
        }
        &-placeholder{
            display: inline-block;
            color: #656D77;
        }

        &-uitems{
            display: block;
            text-align: left;
            margin-bottom: 32px;

            &-elem{
                position: relative;
                display: inline-block;
                width: 116px;
                background-color: lightgrey;
                border-radius: 4px;
                margin-right: 16px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                aspect-ratio: 16 / 9;

                &.atma-editor-uploader-file{
                    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2213%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.712%2012.6H8.86c.17%200%20.31-.057.422-.17a.588.588%200%200%200%20.167-.43.588.588%200%200%200-.167-.43.567.567%200%200%200-.422-.17H3.713a.567.567%200%200%200-.423.17.588.588%200%200%200-.167.43c0%20.173.056.317.167.43.111.113.252.17.422.17zm0-3.4H8.86c.17%200%20.31-.057.422-.17a.588.588%200%200%200%20.167-.43.588.588%200%200%200-.167-.43A.567.567%200%200%200%208.86%208H3.713a.567.567%200%200%200-.423.17.588.588%200%200%200-.167.43c0%20.173.056.317.167.43.111.113.252.17.422.17zM1.18%2016c-.315%200-.59-.12-.825-.36A1.161%201.161%200%200%201%200%2014.8V1.2C0%20.88.118.6.354.36.589.12.864%200%201.179%200h6.6a1.164%201.164%200%200%201%20.844.36l3.595%203.66a1.214%201.214%200%200%201%20.353.86v9.92c0%20.32-.117.6-.353.84s-.51.36-.825.36H1.179zM7.68%201.2H1.18v13.6h10.214V4.92H8.27a.567.567%200%200%201-.423-.17.588.588%200%200%201-.167-.43V1.2zm-6.501%200v3.72V1.2%2014.8%201.2z%22%20fill%3D%22%231790FF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E') !important;
                    background-position: center top;
                    background-size: 30px;
                    aspect-ratio: auto;
                    width: 76px;
                    min-height: 56px;
                    background-color: transparent;
                    padding-top: 40px;
                    font-size: 11px;
                    margin-right: 30px;
                    vertical-align: top;
                }
            }

            &-del{
                display: inline-block;
                width: 20px;
                height: 20px;
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.163%209.649c.092.091.2.152.326.182.125.03.25.03.375%200a.66.66%200%200%200%20.32-.177l3.222-3.222L8.543%209.57a.7.7%200%200%200%20.32.183c.125.033.25.034.373.002a.707.707%200%200%200%20.328-.19.693.693%200%200%200%20.185-.323.753.753%200%200%200%200-.375.68.68%200%200%200-.18-.323L6.432%205.406l3.222-3.222a.655.655%200%200%200%20.18-.322.808.808%200%200%200-.003-.373.693.693%200%200%200-.51-.51.763.763%200%200%200-.373-.004.674.674%200%200%200-.32.183L5.406%204.38%202.269%201.243a.655.655%200%200%200-.323-.18.844.844%200%200%200-.375%200%20.656.656%200%200%200-.328.18.669.669%200%200%200-.186.333.807.807%200%200%200%20.003.373c.03.122.09.228.183.32L4.38%205.406%201.158%208.628a.68.68%200%200%200-.18.317.753.753%200%200%200%200%20.376.693.693%200%200%200%20.185.328z%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
                border-radius: 10px;
                background-position: center center;
                background-repeat: no-repeat;
                position: absolute;
                top: -10px;
                right: -10px;
                background-color: rgba(204,209,217,0.8);
                z-index: 1;

                &:hover{
                    background-color: #FF4E44;
                    cursor: pointer;
                }
            }



        }

        &-processing{
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            margin-bottom: 12px;
            background: #f0f7ff;
            border: 1px solid #bae0ff;
            border-radius: 8px;
            color: #1677ff;
            font-size: 14px;
        }

        &-processing-spinner{
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #bae0ff;
            border-top-color: #1677ff;
            border-radius: 50%;
            flex-shrink: 0;
            animation: atma-spin 0.8s linear infinite;
        }

        &-progress{
            display: flex;
            position: relative;
            width: 46px;
            height: 46px;
            background-color: #ffffff;
            border-radius: 23px;
            color: #1790FF;
            font-size: 13px;
            justify-content: center;
            align-items: center;

            &-wrap{
                display: flex;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(67,74,83,0.5);
                border-radius: inherit;
                justify-content: center;
                align-items: center;
            }

            //& > div{
            //    position: absolute;
            //    top: 0;
            //    left: 0;
            //    height: 100%;
            //    background-color: #1790FF;
            //    border-radius: 4px;
            //    overflow: hidden;
            //
            //
            //}
        }
    }

    &-suggest{
        margin-bottom: 20px;

        &-loading{
            color: #656D77;
            font-size: 13px;
            margin-bottom: 16px;
        }

        &-title{
            font-size: 13px;
            color: #656D77;
            margin-bottom: 10px;
        }

        // Выделение файла рисуется рамкой СНАРУЖИ плитки (`box-shadow` без
        // inset), а список прокручиваемый. `overflow-y: auto` по стандарту
        // делает `auto` и по второй оси — значит рамка у крайних плиток
        // обрезалась: сверху, снизу и по бокам. На снимке автора это видно
        // как «выделение подрезано».
        //
        // Отступ в 3 px даёт рамке место со всех сторон. Справа больше:
        // там ещё полоса прокрутки.
        &-list{
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
            gap: 10px;
            max-height: min(280px, calc(90dvh - 440px));
            overflow-y: auto;
            padding: 3px 7px 3px 3px;

            &.is-video{
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
                max-height: min(400px, calc(90dvh - 440px));
            }
        }

        &-item{
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            background-color: #e8eaed;
            border-radius: 6px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            cursor: pointer;
            box-shadow: 0 0 0 2px transparent;
            transition: box-shadow 0.2s ease;
            overflow: hidden;

            &:hover{
                box-shadow: 0 0 0 2px #adb0b6;
            }

            &.selected{
                box-shadow: 0 0 0 2px #1790FF;

                &::after{
                    content: '';
                    position: absolute;
                    top: 4px;
                    right: 4px;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background-color: #1790FF;
                    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%228%22%20height%3D%226%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%203l2%202%204-4%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
                    background-repeat: no-repeat;
                    background-position: center;
                }
            }

            &.is-audio.selected{
                box-shadow: none;

                &::after{
                    display: none;
                }
            }

            &.is-audio{
                aspect-ratio: auto;
                width: 100%;
                height: auto;
                background-image: none !important;
                background-color: #F5F7FA;
                display: flex;
                align-items: center;
                padding: 6px 8px;
                gap: 8px;
                grid-column: 1 / -1;
                cursor: default;

                &:hover{
                    box-shadow: none;
                }
            }

            &.is-file{
                aspect-ratio: auto;
                width: 100%;
                height: auto;
                background-image: none !important;
                background-color: #F5F7FA;
                display: flex;
                align-items: center;
                padding: 8px 10px;
            }

            &.is-video{
                width: 100%;
                aspect-ratio: 16 / 9;
                background-color: #000;
                background-image: none !important;
                cursor: default;

                &:hover{
                    box-shadow: 0 0 0 2px transparent;
                }

                &.selected{
                    box-shadow: 0 0 0 2px #1790FF;

                    &::after{
                        display: none;
                    }
                }
            }

            &-name{
                font-size: 11px;
                color: #434A53;
                display: none;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
            }

            &.is-audio &-name,
            &.is-file &-name{
                display: block;
            }
        }

        &-video{
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        &-select-btn{
            position: absolute;
            top: 6px;
            right: 6px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.8);
            background-color: rgba(0,0,0,0.35);
            cursor: pointer;
            padding: 0;
            transition: background-color 0.15s, border-color 0.15s;
            z-index: 1;

            &:hover{
                background-color: rgba(0,0,0,0.55);
                border-color: #fff;
            }

            .selected &{
                background-color: #1790FF;
                border-color: #1790FF;
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%228%22%20height%3D%226%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%203l2%202%204-4%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
                background-repeat: no-repeat;
                background-position: center;
            }
        }

        &-audio-btn{
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background-color: #1790FF;
            cursor: pointer;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.15s;

            &::after{
                content: '';
                display: block;
                // play triangle
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 5px 0 5px 9px;
                border-color: transparent transparent transparent #fff;
                margin-left: 2px;
            }

            &.playing::after{
                // pause bars
                width: 9px;
                height: 10px;
                border: none;
                margin-left: 0;
                background: linear-gradient(to right, #fff 0, #fff 3px, transparent 3px, transparent 6px, #fff 6px, #fff 9px);
                border-radius: 1px;
            }

            &:hover{
                background-color: #0d7ee8;
            }
        }

        .is-audio &-select-btn{
            position: static;
            flex-shrink: 0;
            margin-left: auto;
            background-color: #CCD1D9;
            border-color: #fff;

            &.selected-mark{
                background-color: #1790FF;
                border-color: #1790FF;
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%228%22%20height%3D%226%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%203l2%202%204-4%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
                background-repeat: no-repeat;
                background-position: center;
            }
        }

        &-pagination{
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
        }

        &-page-btn{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 6px;
            border: 1px solid #CCD1D9;
            background: #fff;
            cursor: pointer;
            font-size: 14px;
            color: #434A53;
            transition: background 0.15s, border-color 0.15s;
            padding: 0;
            line-height: 1;

            &:hover:not(:disabled){
                background: #F5F7FA;
                border-color: #adb0b6;
            }

            &:disabled{
                opacity: 0.35;
                cursor: default;
            }
        }

        &-page-info{
            font-size: 13px;
            color: #656D77;
            min-width: 44px;
            text-align: center;
        }
    }

    &-btn{
        font-size: 16px;
        -webkit-appearance: none;
        outline: none;
        border: none;
        background: none;
        padding: 16px 24px;
        line-height: 16px;

        &:hover{
            cursor: pointer;
            opacity: 0.7;
        }

        &[disabled]{
            opacity: 0.3 !important;
            cursor: default !important;
        }


        &.atma-editor-complete{
            background-color: #1790FF;
            border-radius: 24px;
            color: #ffffff;

            &-block {
                border-radius: 24px;
                background-color: #AAB2BD;
                cursor: not-allowed;
                color: #ffffff;
            }
        }

        &.atma-editor-cancel{

        }
    }

    &-soc-video{
        display: block;
        list-style: none;
        margin: 0 0 35px 0;
        padding: 0;
        text-align: left;

        li{
            display: inline-block;
            vertical-align: middle;
            background-position: center center;
            background-repeat: no-repeat;
            margin-right: 12px;

            &.youtube{
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2226%22%20height%3D%2218%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M24.776%202.966A3.17%203.17%200%200%200%2022.539.729C20.565.2%2012.652.2%2012.652.2S4.74.2%202.766.73A3.17%203.17%200%200%200%20.529%202.966C0%204.939%200%209.056%200%209.056s0%204.118.529%206.091a3.169%203.169%200%200%200%202.237%202.237c1.973.53%209.886.53%209.886.53s7.913%200%209.887-.53a3.169%203.169%200%200%200%202.237-2.237c.528-1.973.528-6.09.528-6.09s0-4.118-.528-6.091%22%20fill%3D%22%23FF0100%22%2F%3E%3Cpath%20fill%3D%22%23FFFFFE%22%20d%3D%22m10.122%2012.852%206.574-3.795-6.574-3.796v7.591%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                width: 26px;
                height: 18px;
            }
            &.vimeo{
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2216%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.544%203.114c-.069%201.514-1.127%203.588-3.172%206.22-2.114%202.749-3.903%204.124-5.367%204.124-.906%200-1.673-.837-2.3-2.512L3.45%206.342C2.985%204.668%202.486%203.83%201.952%203.83c-.116%200-.524.245-1.221.733L0%203.62c.767-.674%201.524-1.35%202.269-2.025C3.293.71%204.061.245%204.574.198%205.784.082%206.529.91%206.809%202.68c.302%201.912.511%203.1.628%203.566.349%201.586.733%202.378%201.152%202.378.326%200%20.815-.515%201.467-1.543.651-1.03%201-1.812%201.047-2.35.093-.887-.256-1.332-1.047-1.332-.373%200-.757.085-1.151.255.764-2.504%202.224-3.721%204.38-3.652%201.598.047%202.351%201.084%202.259%203.11%22%20fill%3D%22%231AB7EA%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
                width: 16px;
                height: 18px;
            }
            &.vk{
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M8.392.151h7.3c6.663%200%208.24%201.578%208.24%208.24v7.301c0%206.663-1.577%208.24-8.24%208.24h-7.3c-6.663%200-8.241-1.577-8.241-8.24v-7.3C.151%201.729%201.729.15%208.391.15%22%20fill%3D%22%234680C2%22%2F%3E%3Cpath%20d%3D%22M19.62%208.341c.117-.369%200-.638-.52-.638h-1.73c-.436%200-.637.235-.755.487%200%200-.89%202.148-2.131%203.541-.403.403-.587.538-.806.538-.117%200-.268-.135-.268-.504v-3.44c0-.437-.134-.638-.504-.638h-2.719c-.268%200-.436.201-.436.403%200%20.42.621.52.688%201.695v2.55c0%20.555-.1.655-.319.655-.587%200-2.014-2.165-2.87-4.632-.167-.487-.335-.671-.772-.671H4.733c-.504%200-.588.235-.588.486%200%20.454.588%202.736%202.736%205.757%201.427%202.064%203.457%203.172%205.287%203.172%201.108%200%201.242-.252%201.242-.671V14.87c0-.504.1-.587.453-.587.252%200%20.705.134%201.729%201.124%201.174%201.175%201.376%201.712%202.03%201.712h1.729c.504%200%20.739-.252.604-.739-.15-.486-.721-1.191-1.46-2.03-.403-.47-1.007-.99-1.192-1.242-.251-.336-.184-.47%200-.772-.016%200%202.098-2.988%202.317-3.995%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                width: 24px;
                height: 24px;
            }
            &.ok{
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M23.913%2012.054C23.913%2018.652%2018.565%2024%2011.967%2024S.021%2018.652.021%2012.054%205.369.108%2011.967.108s11.946%205.348%2011.946%2011.946%22%20fill%3D%22%23EE8208%22%2F%3E%3Cpath%20d%3D%22M12%207.194c.82%200%201.488.668%201.488%201.489A1.49%201.49%200%200%201%2012%2010.17a1.49%201.49%200%200%201-1.488-1.488c0-.821.668-1.489%201.488-1.489m0%205.082a3.598%203.598%200%200%200%203.594-3.593A3.598%203.598%200%200%200%2012%205.088a3.599%203.599%200%200%200-3.594%203.595A3.598%203.598%200%200%200%2012%2012.276M13.455%2015.205a6.724%206.724%200%200%200%202.09-.867c.492-.311.64-.963.33-1.456a1.052%201.052%200%200%200-1.454-.332%204.56%204.56%200%200%201-4.843%200%201.052%201.052%200%200%200-1.453.332%201.057%201.057%200%200%200%20.33%201.456c.65.409%201.357.7%202.09.867L8.532%2017.22a1.058%201.058%200%200%200%20.746%201.803c.27%200%20.54-.103.745-.31L12%2016.734l1.977%201.98c.41.413%201.078.413%201.49%200a1.056%201.056%200%200%200%200-1.493l-2.012-2.015%22%20fill%3D%22%23FFFFFE%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                width: 24px;
                height: 24px;
            }
            &.rutube{
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2246%22%20height%3D%2221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22nonzero%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.902%206H0v15h3.87v-4.88h7.414L14.667%2021H19l-3.73-4.902c1.158-.18%201.992-.608%202.502-1.282.51-.675.765-1.755.765-3.194v-1.124c0-.855-.093-1.53-.255-2.047a3.399%203.399%200%200%200-.834-1.372%203.799%203.799%200%200%200-1.437-.832C15.455%206.09%2014.76%206%2013.903%206zm-.625%206.814H3.87V9.306h9.407c.533%200%20.904.09%201.089.247.185.158.301.45.301.877v1.26c0%20.45-.116.742-.301.9-.185.157-.556.224-1.09.224zM24.758%2016.57V6H21v10.48c0%20.854.067%201.552.225%202.069.157.54.427.99.832%201.372.383.404.833.674%201.373.832.54.18%201.215.247%202.07.247h9c.833%200%201.508-.067%202.047-.247.54-.158.99-.428%201.396-.832.382-.383.652-.832.81-1.372.157-.517.247-1.215.247-2.07V6h-3.758v10.57c0%20.45-.112.742-.292.9-.18.157-.54.224-1.058.224h-7.785c-.54%200-.9-.067-1.08-.225-.18-.157-.27-.45-.27-.9z%22%20fill%3D%22%2314191E%22%2F%3E%3Cpath%20d%3D%22M42.682%205.252a2.623%202.623%200%200%200%202.619-2.626A2.623%202.623%200%200%200%2042.682%200a2.623%202.623%200%200%200-2.62%202.626%202.623%202.623%200%200%200%202.62%202.626z%22%20fill%3D%22%23F41240%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                width: 32px;
                height: 24px;
                background-size: contain;
            }
        }
    }

    //&-select-colors{
    //    ul.colors-list{
    //        display: block;
    //        margin: 0;
    //        padding: 0;
    //        max-width: 200px;
    //        letter-spacing: 0;
    //        font-size: 0;
    //        position: relative;
    //        left: -5px;
    //
    //        li{
    //            display: inline-block;
    //            vertical-align: top;
    //            height: 40px;
    //            width: 40px;
    //            margin: 10px;
    //            margin-left: 0;
    //            margin-bottom: 0;
    //            border-radius: 20px;
    //            list-style: none;
    //            letter-spacing: 0;
    //            font-size: 0;
    //
    //            &.active, &:hover{
    //                transform: scale(1.2);
    //                cursor: pointer;
    //            }
    //        }
    //    }
    //
    //    .colors-tabs{
    //        font-size: 21px;
    //        font-weight: bold;
    //        margin-bottom: 35px;
    //        text-align: left;
    //
    //        & > div{
    //            display: inline-block;
    //            margin-right: 20px;
    //            opacity: 0.3;
    //
    //            &:hover{
    //                opacity: 0.6;
    //                cursor: pointer;
    //            }
    //
    //            &.active{
    //                position: relative;
    //                opacity: 1;
    //                padding-bottom: 10px;
    //
    //                &:after{
    //                    content: "";
    //                    display: inline-block;
    //                    position: absolute;
    //                    bottom: 0;
    //                    height: 3px;
    //                    width: 100%;
    //                    left: 0;
    //                    background-color: #1790FF;
    //                }
    //            }
    //        }
    //
    //    }
    //}





    .qcolors{
        display: inline-block;
        width: 20px;
        height: 20px;
        opacity: 1;

        &:hover{
            cursor: pointer;
        }

        &.unset{
            position: relative;
            box-shadow: inset 0 0 1px 0 black;
            overflow: hidden;

            &:before{
                content: '';
                background-color: tomato;
                width: 120%;
                height: 2px;
                transform: rotate(-45deg);
                position: absolute;
                top: calc(50% - 1px);
                left: -1px;
            }
        }
    }

    .qfont-size-option{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 28px;
        border: none;
        border-radius: 6px;
        background: #f5f5f5;
        color: #1d1d1f;
        font-size: 13px;
        line-height: 1;
        padding: 0 8px;
        margin-right: 4px;

        &:hover{
            cursor: pointer;
            background: #e8e8e8;
        }

        &.active{
            background: #dcecff;
            color: #0050b3;
        }
    }

    .closeBtn {
        position: relative;
        display: flex;
        justify-content: end;
        border-radius: 50%;
        border: 1px solid rgb(217, 217, 217);
        background-color: white;
        color: #ff4d4f;
        font-size: 0.5rem;
        padding: 4px 6px;
        top: 4px;
        cursor: pointer;
        right: 4px;
        z-index: 9;
    }

    .customIframe {
        width:1280px;
        height:auto;
        aspect-ratio: 16 / 9;
        //min-height: 700px;
    }
}
.image-resizer {
    display: inline-flex;
    position: relative;
    flex-grow: 0;
    .resize-trigger {
        position: absolute;
        right: -6px;
        bottom: -9px;
        opacity: 0;
        transition: opacity .3s ease;
        color: #3259a5;
    }
    &:hover .resize-trigger {
        opacity: 1;
    }
}
/* внутри редактора */
// Таблицы без границ оформляются в платформе (_content.scss).
// Вид сворачиваемого блока (.toggle-header, .toggle-button, .toggle-body,
// .toggle-body-wrapper) переехал в платформу — AtmaGuru/src/React/sass/_content.scss.
// Здесь остаётся только то, что существует во время правки: ручка перетаскивания,
// кнопка удаления и измеритель ширины заголовка.
.toggle-block {
    &:hover .toggle-block-delete {
        opacity: 1;
    }
}

.toggle-block-delete {
    flex-shrink: 0;
    margin-left: 8px;
    background: white;
    border: 1px solid #d9d9d9;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    color: #ff4d4f;
    opacity: 0;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.toggle-header-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
}

.toggle-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 24px;
    margin-right: 4px;
    color: #bbb;
    cursor: grab;
    flex-shrink: 0;
    border-radius: 3px;
    transition: color 0.15s;

    &:active {
        cursor: grabbing;
    }

    body.toggle-dragging & {
        cursor: grabbing;
    }

    &:hover {
        color: #888;
        background: rgba(0,0,0,0.05);
    }
}

.toggle-header-measurer {
    visibility: hidden;
    white-space: pre;
    position: absolute;
    top: 0;
    left: 0;
    font: inherit;
    padding: 0;
    border: 0;
}



.toggle-block {
    position: relative;
}


@media (max-width: 768px) {
    .ProseMirror,
    .atma-editor-content {
        // Ограничиваем враппер шириной контейнера, не трогая float и width
        div[data-image-wrapper] {
            max-width: 100% !important;
        }

        // Картинка масштабируется пропорционально внутри враппера
        div[data-image-wrapper] img {
            max-width: 100% !important;
            height: auto !important;
        }
    }
}

.atma-editor-emoji-popover{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 344px;
    padding: 12px;
    border: 1px solid #d9d9d9;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
    z-index: 30;

    &-search{
        margin-bottom: 10px;
    }

    &-tabs{
        display: flex;
        align-items: center;
        gap: 4px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #f0f0f0;
        overflow-x: auto;
    }

    &-title{
        font-size: 12px;
        line-height: 16px;
        color: #8c8c8c;
        margin-bottom: 8px;
    }
}

.atma-editor-emoji-search{
    width: 100%;
    height: 36px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    outline: none;

    &:focus{
        border-color: #1790FF;
        box-shadow: 0 0 0 2px rgba(23, 144, 255, 0.12);
    }
}

.atma-editor-emoji-tab{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    padding: 0;
    flex: 0 0 auto;
    font-size: 17px;

    &:hover{
        cursor: pointer;
        background: #f5f5f5;
    }

    &.active{
        background: #edeef0;
    }
}

.atma-editor-emoji-grid{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 2px;
}

.atma-editor-emoji-item{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: none;
    border-radius: 10px;
    background: transparent;
    padding: 0;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 24px;
    line-height: 1;

    &:hover{
        cursor: pointer;
        background: #f5f5f5;
    }
}

.atma-editor-emoji-empty{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    color: #8c8c8c;
    font-size: 13px;
}
.atma-editor-field-select {
    width: 110px
}
@media (max-width: 768px) {
    .atma-editor-button-link-form{
        min-width: 0;
    }

    .atma-editor-button-link-grid{
        grid-template-columns: 1fr 1fr;
    }

    .atma-editor-field-color{
        align-items: flex-start;
    }
    // ── Панель на телефоне ───────────────────────────────────────────────
    //
    // Кнопка вырастает до 44×44 — это требование к зоне нажатия, а не
    // к иконке: рисунок остаётся 20 px, увеличивается поле вокруг.
    //
    // Разделители не рисуются: на узкой панели они съедают место и всё равно
    // не читаются при переносе строк. Группы отбиваются двойным зазором.
    //
    // Горизонтальной прокрутки НЕТ намеренно. Скрытая справа кнопка на телефоне
    // не находится вообще: методист не знает, что там что-то есть, и не тянет.
    // Редкое уезжает в выпадающие списки, где у каждого пункта подпись словами.
    .atma-editor-toolbar{
        width: 100%;
        max-width: 100%;
        overflow-x: visible;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding: 4px 6px;
        gap: 0;

        .qicon{
            width: 44px;
            height: 44px;
        }

        &-g{
            flex-wrap: wrap;
            gap: 0;

            &:after{
                display: none;
            }

            .qseparator{
                display: none;
            }
        }

        &-s{
            padding-right: 16px;

            &:before{
                right: 16px;
            }

            &-opts{
                left: auto;
                right: 0;
                transform: none;
                width: max-content;
                max-width: calc(100vw - 24px);
                max-height: min(60vh, 360px);
                overflow-y: auto;
                z-index: 100001;
            }
        }
    }

    .atma-editor-toolbar-s-opts-item{
        max-width: 100%;

        span{
            white-space: normal;
            word-break: break-word;
        }
    }

    .atma-editor-emoji-popover{
        position: fixed;
        top: 56px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: min(70vh, 420px);
        z-index: 100002;
    }

    .atma-editor-emoji-grid{
        grid-template-columns: repeat(6, minmax(0, 1fr));
        max-height: min(52vh, 320px);
    }
}

// ─────────────────────────────────────────────────────────────────────────────
//  Подсказка у кнопки панели.
//
//  Заменяет нативный browser title: у того задержка около секунды, серый
//  системный вид и невозможность показать вторую строку. Именно он давал
//  ощущение «панель из 2003 года».
// ─────────────────────────────────────────────────────────────────────────────
.atma-editor-tip {
    max-width: 280px;

    .ant-tooltip-inner {
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 13px;
        line-height: 1.45;
    }
}

.atma-editor-tip-body {
    display: block;
}

.atma-editor-tip-title {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.atma-editor-tip-hint {
    display: block;
    opacity: 0.8;
}

// Кнопка панели должна быть доступна с клавиатуры: теперь у неё role="button"
// и tabIndex, значит нужен видимый фокус.
.qicon:focus-visible {
    outline: 2px solid #1790FF;
    outline-offset: 2px;
    border-radius: 8px;
}