/* ИИ-Ассистент платформы Medina Edu — плавающая кнопка и окно.

   ВЕРСИЯ МОДУЛЯ: 1.33.0
   Обязана совпадать с MEL_POM_VER в medina-pomoshnik.php.
   За совпадением следит прогон test-versii.php.

   Префикс .pom- (ассистент). Ни одного своего цвета: всё из палитры
   платформы. Имена классов проверены на занятость — своих нет
   ни в одном другом наборе. */

.pom{position:fixed;right:18px;bottom:18px;z-index:9000;
font-family:"PT Sans",-apple-system,sans-serif;
/* Величины кнопки. Стоят ЗДЕСЬ, в одном правиле с положением.

   Пояснение здесь было НЕВЕРНЫМ: «второе правило перебьёт первое
   целиком». Браузер так не делает — правила одного селектора
   складываются, перебивается только повторённое свойство.

   Беда была не в браузере, а в ПРОГОНЕ: он читал первое найденное
   правило и не видел второго. Виноват был прогон, а я записал
   вину на CSS.

   Держать в одном правиле всё равно стоит — искать величину
   в двух местах никто не станет. Но причина другая, и знать
   её надо точно: неверное пояснение хуже, чем никакого. */
--pom-size:56px;--pom-znak:30px;
--pom-edge:0 0 0 6px var(--me-bubble-glow),0 0 0 1px var(--me-calm-bright),
0 8px 22px oklch(0.1 0.01 162/.6)}
.vt .pom{--pom-edge:0 0 0 6px var(--me-bubble-glow),0 8px 20px oklch(0.45 0.05 158/.22),
0 1px 3px oklch(0.45 0.05 158/.18)}

/* ── Растягивание ──────────────────────────────────────
   Уголок СЛЕВА СВЕРХУ: окно прижато к правому нижнему краю,
   и растёт оно влево и вверх. Уголок справа снизу упирался бы
   в край экрана.

   Окно должно уметь менять размер — значит фиксированную высоту
   заменяем на предел: `height` ставится скриптом, а тут только
   границы, чтобы окно не выродилось и не переросло экран. */
.pom-ugol{position:absolute;left:0;top:0;width:22px;height:22px;
cursor:nwse-resize;touch-action:none;z-index:2}
/* Две чёрточки уголком — знак, что тут тянут. Без них человек
   не догадается, что окно вообще меняет размер. */
.pom-ugol::before,.pom-ugol::after{content:"";position:absolute;
background:var(--me-border);border-radius:1px}
.pom-ugol::before{left:7px;top:7px;width:9px;height:2px}
.pom-ugol::after{left:7px;top:7px;width:2px;height:9px}
.pom-ugol:hover::before,.pom-ugol:hover::after{background:var(--me-accent)}
/* Пока тянут — без переходов: иначе окно тянется с задержкой
   и кажется вязким. */
.pom.is-size .pom-win{transition:none}
.pom.is-size{user-select:none}

/* ── Перетаскивание ──────────────────────────────────────
   Замысел владельца 30 августа 2026: кнопка стоит в правом
   нижнем углу, а там же кнопки мессенджера. Двигать её должен
   человек, а не я угадывать свободное место на каждой странице.

   `touch-action:none` обязателен: без него палец на телефоне
   прокручивает страницу вместо перетаскивания, и кнопка
   не сдвинется вовсе. */
.pom-bubble,
.pom-head{touch-action:none}
.pom-bubble{cursor:grab}
.pom-head{cursor:grab;user-select:none}
/* Пока тянут — курсор «взято» и без переходов: иначе окно
   тянется за пальцем с задержкой и кажется вязким. */
.pom.is-drag .pom-bubble,
.pom.is-drag .pom-head{cursor:grabbing}
.pom.is-drag{transition:none}
/* Пока тянут — вид «схвачено» держится всё перетаскивание,
   а не только на :active. Но БЕЗ сдвига: кружок и так едет
   за пальцем, и второй сдвиг сбивал бы его с точки захвата. */
.pom.is-drag .pom-bubble{transform:none;filter:brightness(.93)}

/* ── Бабл ────────────────────────────────────────────────
   ЗЕЛЁНЫЙ, не золотой. По брифу: «золото — отсылка прочь
   из блока, зелень — действие внутри». Окно ассистента
   открывается тут же, на этой же странице, никуда человека
   не уводит — значит зелень.

   Прежде кнопка была золотой с мягким ореолом. Ореол снят
   вместе с золотом: он держался на --me-gold-soft, а золота
   у кружка больше нет нигде, кроме кольца фокуса.

   Край держится РАЗНЫМ в двух темах, и одним box-shadow
   это не сводится:
   тёмная — светлое кольцо (падающая тень на тёмном невидима,
   кружок повисает пятном);
   светлая — падающая тень (кольцо на пергаменте выглядит
   обводкой наклейки). */
.pom-bubble{width:var(--pom-size);height:var(--pom-size);
border-radius:50%;border:0;padding:0;position:relative;
display:flex;align-items:center;justify-content:center;
background:var(--me-bubble);box-shadow:var(--pom-edge);
transition:transform .14s ease,filter .14s ease}
.pom-bubble:hover{filter:brightness(1.07);transform:translateY(-2px)}
.pom-bubble:active{filter:brightness(.93);transform:translateY(1px)}
/* Единственное золото у кружка — и оно про клавиатуру,
   а не про ассистента. */
.pom-bubble:focus-visible{outline:none;
box-shadow:var(--pom-edge),0 0 0 3px var(--me-accent)}
/* Знак диалога: один замкнутый контур, внутри пусто. Кегль тот же,
   что у мима Муаллима — знаки нарисованы как пара и должны быть
   одного ОПТИЧЕСКОГО веса. Обводка 1.75, а не 2.1: контур легче
   залитой буквы, при большей толщине он перевешивает мим. */
.pom-bubble svg{width:var(--pom-znak);height:var(--pom-znak);
stroke:var(--me-bubble-ink);stroke-width:1.75;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.pom.is-open .pom-bubble{display:none}

/* ── Пилюля ───────────────────────────────────────────────
   ДО первого разговора кнопка — не кружок, а пилюля с именем.
   Замысел дизайнера, принятый владельцем 30 августа 2026:
   безымянный кружок не нажимают, имя нужно ОДИН РАЗ, а место
   на телефоне нужно ВСЕГДА.

   Свернулась — навсегда: открыл окно или прокрутил страницу.
   Не «на пять секунд и вылезает снова».

   Одна кнопка, меняющая ширину, а не две разные: подмена узла
   сорвала бы перетаскивание и фокус с клавиатуры. */
.pom{--pom-pill-w:auto}
.pom-pill{display:none;flex-direction:column;align-items:flex-start;
gap:1px;padding-right:4px;white-space:nowrap}
.pom-pill b{font:700 13.5px "PT Sans",sans-serif;color:var(--me-bubble-ink)}
.pom-pill i{font:400 11.5px "PT Sans",sans-serif;font-style:normal;
color:var(--me-bubble-ink);opacity:.82}

.pom.is-pill .pom-bubble{width:auto;border-radius:999px;
padding:0 18px 0 14px;gap:11px;
/* Ширину не задаём числом: имя правится в админке, и 168px
   обрезали бы длинное. Пусть считает содержимое. */
justify-content:flex-start}
.pom.is-pill .pom-pill{display:flex}
/* Насечка на пилюле не нужна: она метит середину кружка,
   а на широкой кнопке висит над буквами. */
.pom.is-pill .pom-grip{display:none}

/* ── Насечка захвата ─────────────────────────────────────
   Три точки у верхнего края — единственное, что говорит
   «меня можно двигать», ДО того как человек попробует.
   На компьютере об этом же говорит курсор, на телефоне
   курсора нет и не будет.

   pointer-events:none обязателен: иначе точки перехватывают
   нажатие, и кнопка через них не открывается. */
.pom-grip{position:absolute;top:calc(var(--pom-size) * .17);left:50%;
transform:translateX(-50%);display:flex;gap:3px;
pointer-events:none;opacity:.55}
.pom-grip i{width:3px;height:3px;border-radius:50%;
background:var(--me-bubble-ink);display:block}

/* ── Окно ──────────────────────────────────────────────── */
.pom-win{width:370px;max-width:calc(100vw - 28px);height:min(560px,calc(100vh - 90px));
display:flex;flex-direction:column;overflow:hidden;
background:var(--me-surface);border:1px solid var(--me-border-soft);
border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.45);
/* Границы растягивания. Стоят ЗДЕСЬ, в одном правиле с шириной,
   чтобы не искать их в двух местах. Ширина и высота выше —
   НАЧАЛЬНЫЕ, скрипт их меняет. */
position:relative;min-width:290px;min-height:320px}
.pom-win[hidden]{display:none}

.pom-head{display:flex;align-items:center;gap:10px;padding:14px 16px;
border-bottom:1px solid var(--me-border-soft);background:var(--me-bar)}
.pom-head b{font:700 15px "PT Serif",Georgia,serif;color:var(--me-text)}
.pom-gap{flex:1}
.pom-x{border:0;background:transparent;color:var(--me-faint);cursor:pointer;
font-size:24px;line-height:1;padding:0 4px}
.pom-x:hover{color:var(--me-text)}

/* ── Лента ──────────────────────────────────────────────── */
.pom-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;
flex-direction:column;gap:10px;scrollbar-width:thin;
scrollbar-color:var(--me-border) var(--me-bar)}
.pom-body::-webkit-scrollbar{width:8px}
.pom-body::-webkit-scrollbar-track{background:var(--me-bar)}
.pom-body::-webkit-scrollbar-thumb{background:var(--me-border);border-radius:8px}

/* Разметка в ответе. Жирный и курсив — своим весом, а не цветом:
   цвет уже занят смыслом (зелёный — действие, золото — метка). */
.pom-msg b{font-weight:700}
.pom-msg i{font-style:italic}
.pom-msg code{font:400 13px/1.4 ui-monospace,monospace;
background:var(--me-bg);padding:1px 5px;border-radius:4px}
/* Пункт списка: отступ и точка. Своим блоком, чтобы строки
   не слипались. */
.pom-li{display:block;padding-left:14px;position:relative;margin:3px 0}
.pom-li::before{content:"·";position:absolute;left:3px;color:var(--me-accent)}
.pom-msg{max-width:88%;padding:10px 13px;border-radius:13px;
font:400 14px/1.6 "PT Sans",sans-serif;white-space:pre-wrap;
overflow-wrap:anywhere;text-wrap:pretty}
/* Ответ ассистента — слева, на подложке вложенного блока.
   Свой вопрос — справа, зелёным: так же, как в мессенджере. */
.pom-bot{align-self:flex-start;background:var(--me-bg);color:var(--me-text);
border:1px solid var(--me-border-soft);border-bottom-left-radius:5px}
.pom-me{align-self:flex-end;background:var(--me-calm-soft);color:var(--me-on-calm);
border:1px solid var(--me-primary);border-bottom-right-radius:5px}

/* Ожидание ответа: три точки, а не крутящееся колесо. Колесо
   обещает быстро, а ответ идёт секунды три-четыре. */
.pom-wait{align-self:flex-start;display:flex;gap:5px;padding:13px}
.pom-wait i{width:7px;height:7px;border-radius:50%;background:var(--me-faint);
animation:pomDot 1.1s infinite}
.pom-wait i:nth-child(2){animation-delay:.16s}
.pom-wait i:nth-child(3){animation-delay:.32s}
@keyframes pomDot{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pom-wait i{animation:none;opacity:.6}}

/* ── Отказ ──────────────────────────────────────────────── */
.pom-note{margin:0 16px 8px;padding:9px 12px;border-radius:9px;
background:var(--me-urgent-soft);border:1px solid var(--me-urgent);
color:var(--me-urgent);font:400 12.5px/1.5 "PT Sans",sans-serif}
.pom-note[hidden]{display:none}

/* ── Поле вопроса ───────────────────────────────────────── */
.pom-ask{display:flex;gap:8px;align-items:flex-end;padding:12px 14px;
border-top:1px solid var(--me-border-soft)}
.pom-ask textarea{flex:1;min-height:40px;max-height:120px;resize:none;
padding:10px 12px;border-radius:11px;background:var(--me-bg);
border:1px solid var(--me-border);color:var(--me-text);
font:400 14px/1.5 "PT Sans",sans-serif}
.pom-ask textarea:focus{outline:none;border-color:var(--me-primary)}
.pom-ask textarea::placeholder{color:var(--me-faint)}

/* Кнопка отправки — зелёная: действие ВНУТРИ окна, не увод прочь. */
.pom-send{flex:none;width:40px;height:40px;border-radius:11px;border:0;
cursor:pointer;display:flex;align-items:center;justify-content:center;
background:var(--me-primary);transition:.14s}
.pom-send svg{stroke:var(--me-primary-ink)}
.pom-send:hover{background:var(--me-calm-bright)}
.pom-send:disabled{opacity:.5;cursor:not-allowed}
.pom-send:focus-visible{outline:none;box-shadow:0 0 0 2px var(--me-calm-soft)}

/* ── Сноска ─────────────────────────────────────────────── */
.pom-foot{margin:0;padding:0 16px 13px;color:var(--me-faint);
font:400 11.5px/1.5 "PT Sans",sans-serif;text-wrap:pretty}

/* ── Телефон ────────────────────────────────────────────
   Окно во весь экран: на 390px рамка по краям съедает строку,
   а разговор и так узкий. */
@media (max-width:560px){
  .pom{right:12px;bottom:12px;left:12px;
  /* На телефоне палец толще, а места меньше: 60 берётся уверенно.
     На компе курсор точный, и лишние точки только спорят
     с кнопками страницы. Нижняя граница 44px не нарушена. */
  --pom-size:60px;--pom-znak:32px}
  .pom-bubble{margin-left:auto}
  .pom-win{width:auto;height:min(72vh,540px)}
  .pom-msg{max-width:92%}
}