/**
 * QSM Word Order — стили виджета на фронтенде.
 * Все селекторы ограничены префиксом .qsm-wo, чтобы не конфликтовать с темами.
 */

.qsm-wo {
        --qsm-wo-accent: #4f6df5;
        --qsm-wo-accent-soft: #eef1ff;
        --qsm-wo-accent-glow: rgba(79, 109, 245, 0.28);
        --qsm-wo-border: #d7dce8;
        --qsm-wo-text: #2c3247;
        --qsm-wo-muted: #7a819c;

        margin: 10px 0 16px;
        font-size: 16px;
        line-height: 1.4;
        color: var(--qsm-wo-text);
}

.qsm-wo *,
.qsm-wo *::before,
.qsm-wo *::after {
        box-sizing: border-box;
}

.qsm-wo-hint {
        margin: 0 0 12px;
        color: var(--qsm-wo-muted);
        font-size: 0.9em;
}

.qsm-wo-error {
        margin: 8px 0;
        padding: 10px 12px;
        border: 1px solid #e0b4b4;
        background: #fdf3f3;
        color: #9f3a38;
        border-radius: 6px;
        font-size: 14px;
}

/* ---------- Поле сборки предложения ---------- */

.qsm-wo-field-wrap {
        margin-bottom: 14px;
}

.qsm-wo-field-title {
        font-weight: 600;
        margin-bottom: 8px;
        font-size: 0.95em;
}

.qsm-wo-sentence {
        position: relative; /* каретка вставки позиционируется относительно поля */
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-content: flex-start;
        min-height: 64px;
        padding: 12px;
}

.qsm-wo-pool-wrap {
        /* список слов ниже поля сборки */
}

.qsm-wo-pool-title {
        font-weight: 600;
        margin-bottom: 8px;
        font-size: 0.95em;
}

/* ---------- Общий вид зон сброса ---------- */

.qsm-wo-dropzone {
        border: 2px dashed var(--qsm-wo-border);
        border-radius: 10px;
        background: #fafbfe;
        transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.qsm-wo-pool {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-content: flex-start;
        min-height: 76px;
        padding: 10px;
}

/* Подсветка зоны под указателем при перетаскивании */
.qsm-wo-dropzone.qsm-wo-over {
        border-color: var(--qsm-wo-accent);
        background: var(--qsm-wo-accent-soft);
        box-shadow: inset 0 0 0 1px var(--qsm-wo-accent);
}

/* ---------- Каретка вставки ---------- */

.qsm-wo-caret {
        position: absolute;
        display: none;
        width: 4px;
        border-radius: 2px;
        background: var(--qsm-wo-accent);
        box-shadow: 0 0 0 3px var(--qsm-wo-accent-glow);
        pointer-events: none; /* elementFromPoint не должен видеть каретку */
}

/* ---------- Слова ---------- */

.qsm-wo-word {
        display: inline-block;
        padding: 7px 14px;
        background: #ffffff;
        border: 1px solid var(--qsm-wo-border);
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(20, 26, 51, 0.08);
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        touch-action: none; /* перетаскивание пальцем без прокрутки страницы */
        transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.qsm-wo-word:hover {
        box-shadow: 0 3px 8px rgba(20, 26, 51, 0.16);
        transform: translateY(-1px);
}

.qsm-wo-word.qsm-wo-dragging {
        cursor: grabbing;
        opacity: 0.92;
        box-shadow: 0 10px 24px rgba(20, 26, 51, 0.28);
        pointer-events: none; /* чтобы elementFromPoint видел зону под словом */
}

/* Пустые зоны остаются видимыми. Класс qsm-wo-empty вешает qsm-wo.js
   (в updateAnswer): псевдокласс :empty для поля сборки не подходит, ведь
   внутри него всегда есть каретка вставки. */
.qsm-wo-sentence.qsm-wo-empty::after,
.qsm-wo-pool.qsm-wo-empty::after {
        content: attr(data-empty);
        color: #b9bfd3;
        font-size: 0.85em;
}

.qsm-wo-sentence.qsm-wo-empty::before {
        content: "···";
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        color: #c3c8d9;
        line-height: 40px;
        pointer-events: none;
}

/* ---------- Анимации перетаскивания ---------- */

/* Слово «приземляется» в поле сборки: чуть больше — сжимается — на место */
@keyframes qsm-wo-drop-pop {
        0%   { transform: scale(1.12); opacity: 0.85; }
        60%  { transform: scale(0.96); }
        100% { transform: scale(1); opacity: 1; }
}

.qsm-wo-word.qsm-wo-landed {
        animation: qsm-wo-drop-pop 0.3s ease-out;
}

/* Мягкое возвращение слова в список */
@keyframes qsm-wo-return {
        0%   { transform: scale(1.06); opacity: 0.9; }
        100% { transform: scale(1); opacity: 1; }
}

.qsm-wo-word.qsm-wo-returned {
        animation: qsm-wo-return 0.25s ease-out;
}

/* Короткая вспышка-свечение поля сборки при сбросе слова */
@keyframes qsm-wo-drop-flash {
        0%   { box-shadow: 0 0 0 6px var(--qsm-wo-accent-glow); }
        100% { box-shadow: 0 0 0 6px rgba(79, 109, 245, 0); }
}

.qsm-wo-dropzone.qsm-wo-flash {
        animation: qsm-wo-drop-flash 0.45s ease-out;
}

/* Пользователям с отключённой анимацией — без движения */
@media (prefers-reduced-motion: reduce) {
        .qsm-wo-word.qsm-wo-landed,
        .qsm-wo-word.qsm-wo-returned,
        .qsm-wo-dropzone.qsm-wo-flash {
                animation: none;
        }

        .qsm-wo-word {
                transition: none;
        }
}

/* ---------- Мобильная версия ---------- */

@media (max-width: 600px) {
        .qsm-wo-word {
                padding: 9px 16px;
                font-size: 1.05em; /* крупнее зона захвата на тач-экранах */
        }

        .qsm-wo-sentence,
        .qsm-wo-pool {
                min-height: 72px;
        }
}

/* ---------- Страница результатов: несколько допустимых вариантов ---------- */

/* Каждый допустимый вариант предложения — отдельной строкой
   (в %CORRECT_ANSWER% и письмах). */
.qsm-wo-variants .qsm-text-correct-option {
        display: block;
}

.qsm-wo-variants .qsm-wo-variant-alt {
        opacity: 0.85;
}