/* ============================================================
   Модалка продукта (.pl-modal*) — ЕДИНСТВЕННЫЙ источник базового вида.
   Подключает partials/confirm_modal.html, а его — partials/form_guard.html,
   то есть почти каждая страница сайта. Поэтому здесь только токены
   tokens.css (--pl-*), без алиасов ui.css (--ui-*): страница может жить
   без ui.css (например, /admin/research-robot), и окно обязано выглядеть
   так же. Портальный вид (.platform …) докрашивает это в platform.css.
   Раньше эти правила жили в ui.css, и на страницах без него подтверждение
   откатывалось на серое окно браузера (слово владельца 30.09).
   ============================================================ */
.pl-modal-overlay { position: fixed; inset: 0; z-index: 2147483600; display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; background: color-mix(in srgb, var(--pl-sys-surface-immersive) 66%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s ease; }
.pl-modal-overlay.open { display: flex; opacity: 1; }
/* Вопрос всегда поверх всего, включая окно черновиков заявок (тот же предел
   z-index; окно кладётся последним в body — значит, выше). */
#pl-confirm-overlay { z-index: 2147483647; }
.pl-modal { width: 100%; max-width: 420px; box-sizing: border-box; background: var(--pl-bg-1); border: 1px solid var(--pl-line-2); border-radius: var(--pl-sys-radius-panel); box-shadow: var(--pl-sys-shadow-overlay); overflow: hidden; transform: translateY(10px) scale(.985); transition: transform .2s cubic-bezier(.2,.8,.2,1); font-family: var(--pl-font-ui); color: var(--pl-text-0); }
.pl-modal-overlay.open .pl-modal { transform: none; }
.pl-modal-body { display: flex; gap: 14px; padding: 24px 24px 18px; align-items: flex-start; }
.pl-modal-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--pl-glass-2); color: var(--pl-accent-bright); }
.pl-modal-icon svg { width: 22px; height: 22px; }
.pl-modal-icon.danger { color: var(--pl-state-failed-text); background: color-mix(in srgb, var(--pl-state-failed-text) 12%, transparent); }
/* pre-line: переносы строк в тексте вопроса (\n) видны как абзацы. */
.pl-modal-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--pl-text-0); padding-top: 6px; white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty; }
.pl-modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 0 24px 22px; }

/* Кнопки окна свои: страница может не грузить кит кнопок ui.css. */
.pl-modal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 10px 18px; border-radius: var(--pl-sys-radius-control); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; border: 1px solid var(--pl-line-2); background: var(--pl-glass); color: var(--pl-text-0); transition: background var(--pl-sys-motion-state), border-color var(--pl-sys-motion-state), transform var(--pl-sys-motion-state); }
.pl-modal-btn:hover { background: var(--pl-glass-2); border-color: var(--pl-sys-line-strong); }
.pl-modal-btn:active { transform: translateY(1px); }
.pl-modal-btn:focus-visible { outline: none; box-shadow: var(--pl-sys-focus-ring); }
/* Основная: тушь на зелёной заливке (тот же приём и контраст, что у .ui-btn). */
.pl-modal-ok { font-weight: 700; border-color: transparent; background: var(--pl-sys-accent-fill); color: var(--pl-sys-on-accent); }
.pl-modal-ok:hover { background: var(--pl-sys-accent-fill-hover); border-color: transparent; }
/* Опасное действие — красная заливка. Цвет текста задан явно: тушь на
   тёмно-красном дала бы 2.6:1. */
.pl-modal-ok.danger { background: linear-gradient(135deg, var(--pl-sys-doc-red-dot), var(--pl-sys-doc-red-ink)); color: var(--pl-sys-tint); }
.pl-modal-ok.danger:hover { background: linear-gradient(135deg, var(--pl-sys-doc-red-dot), var(--pl-sys-error)); }

/* Светлая тема. Сайт в целом тёмный, светлую держат только экраны с
   переключателем (data-theme="light" на <html>, пример — робот исследований).
   Окно следует теме страницы теми же ролями «на светлом» из tokens.css. */
[data-theme="light"] .pl-modal-overlay { background: color-mix(in srgb, var(--pl-sys-text-on-light) 30%, transparent); }
[data-theme="light"] .pl-modal { background: var(--pl-sys-surface-card); border-color: var(--pl-sys-border-on-light); color: var(--pl-sys-text-on-light); }
[data-theme="light"] .pl-modal-text { color: var(--pl-sys-text-on-light); }
[data-theme="light"] .pl-modal-icon { background: color-mix(in srgb, var(--pl-sys-accent) 12%, transparent); color: var(--pl-sys-accent); }
[data-theme="light"] .pl-modal-icon.danger { color: var(--pl-sys-doc-red-ink); background: color-mix(in srgb, var(--pl-sys-doc-red-ink) 10%, transparent); }
[data-theme="light"] .pl-modal-btn:not(.pl-modal-ok) { background: transparent; border-color: color-mix(in srgb, var(--pl-sys-text-on-light) 18%, transparent); color: var(--pl-sys-text-on-light); }
[data-theme="light"] .pl-modal-btn:not(.pl-modal-ok):hover { background: color-mix(in srgb, var(--pl-sys-text-on-light) 6%, transparent); border-color: color-mix(in srgb, var(--pl-sys-text-on-light) 28%, transparent); }

@media (max-width: 520px) {
  .pl-modal-overlay { align-items: flex-end; padding: 0; }
  .pl-modal { max-width: none; border-radius: var(--pl-sys-radius-panel) var(--pl-sys-radius-panel) 0 0; }
  .pl-modal-body { padding: 20px 20px 16px; }
  .pl-modal-actions { flex-direction: column-reverse; padding: 0 20px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .pl-modal-actions .pl-modal-btn { width: 100%; min-height: 44px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-modal-overlay, .pl-modal { transition: none; }
}