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, отбивка
    // между группами 8 + разделитель 1 + 8, поля панели 4/9. На 1600 px
    // сорок кнопок укладываются в один ряд высотой 42.
    &-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 9px;
        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;
            }

            &-label{
                display: none;
                font-size: 10px;
                font-weight: 600;
                letter-spacing: 0.06em;
                text-transform: uppercase;
                color: #6B7280;
                white-space: nowrap;
                padding: 0 8px 0 6px;

                // Подпись занимает 96 px и появляется только там, где панель
                // и без неё укладывается в один ряд. Браузер без поддержки
                // @container подпись просто не покажет — деградация мягкая,
                // группу всё равно видно по рамке.
                @container (min-width: 1200px){
                    display: inline;
                }
            }

            .qseparator{
                width: 1px;
                height: 20px;
                background-color: #E3E7EC;
                margin: 0 8px;
                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;
            }

            &-opts{
                position: absolute;
                clip: rect(0,0,0,0);
                width: 260px;
                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;
                        }
                    }

                    &[data-type="h2"], &[data-type="h3"], &[data-type="h4"]{
                        font-weight: 500;
                        padding: 8px;

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

                        .qicon{
                            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{
                #{$this}-opts{
                    clip: auto;
                }

                &: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;
            }

            &: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;

        // Пустой абзац в 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;
        }

        &-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-right: 4px;

            &.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;
}