/* Плавающее окно Ауры (static/js/floatwin.js, разработчик 02.10.2026) и гармошка на <details>.
   Свой файл, а не app.css: общий app.css правят несколько сессий сразу. Подключён в templates/base.html
   на всех страницах. Цвета — токены app.css (--surface, --border, --ink…): тёмная тема — сама. */

/* ===== Окно ===== */
/* z-index ставит скрипт (стопка 90–115): над шапкой Ауры (70), под модальными окнами (120), меню (140) и, пока
   окно открыто, под всплывающим страницы (118, в конце файла) */
.fw{position:fixed; z-index:90; display:flex; flex-direction:column; min-width:0; min-height:0;
  background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); border-radius:14px;
  box-shadow:0 2px 6px rgba(25,27,46,.08), 0 18px 48px rgba(25,27,46,.22); overflow:hidden}
[data-theme="dark"] .fw{box-shadow:0 2px 6px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.55)}
.fw:focus{outline:none}
.fw:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fw.is-top{border-color:color-mix(in srgb, var(--accent) 45%, var(--border-strong))}
/* шапка — ручка перетаскивания: touch-action:none — палец тащит окно, а не прокручивает страницу */
.fw-head{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:8px 8px 8px 14px; cursor:move;
  touch-action:none; user-select:none; -webkit-user-select:none; border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--accent) 6%, var(--surface))}
.fw.is-moving .fw-head{cursor:grabbing}
.fw-title{flex:1 1 auto; min-width:0; margin:0; font-size:14px; font-weight:700; letter-spacing:.1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fw-close{flex:0 0 auto; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:8px; background:none; color:var(--muted); font:inherit; font-size:20px; line-height:1;
  cursor:pointer}
.fw-close:hover{background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger)}
.fw-close:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.fw-body{flex:1 1 auto; min-height:0; overflow:auto; padding:12px 6px 8px 14px; margin:0 8px 8px 0;
  position:relative; z-index:3}
/* пока тянут — под окном не выделяется текст и не ловятся клики видео/ссылок */
.fw.is-moving .fw-body{pointer-events:none; user-select:none; -webkit-user-select:none}

/* ручки размера: правый край, нижний край и уголок справа снизу.
   ⚠️ Ручки — в полосах 8 px справа и снизу ВНЕ .fw-body (margin у тела), а тело лежит над ними (z-index 3 >
   2): полоса прокрутки тела (классическая, ~15 px в Windows/Linux) целиком тянется как прокрутка, а не как
   размер окна; уголок, зашедший под тело, ловит только свою часть в полосах. */
.fw-grip{position:absolute; touch-action:none; z-index:2}
.fw-grip-e{top:44px; right:0; bottom:16px; width:8px; cursor:ew-resize}
.fw-grip-s{left:0; right:16px; bottom:0; height:8px; cursor:ns-resize}
.fw-grip-se{right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize;
  background:linear-gradient(135deg, transparent 0 55%, var(--border-strong) 55% 62%, transparent 62% 72%,
    var(--border-strong) 72% 79%, transparent 79%)}

/* ===== Гармошка (.acc): полосы-заголовки друг под другом, клик раскрывает содержимое вниз ===== */
/* На <details>/<summary>: без скрипта, с клавиатуры (Enter/пробел на заголовке) — сама. */
.acc{display:flex; flex-direction:column; gap:8px}
.acc-item{border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden}
.acc-item[open]{border-color:var(--border-strong)}
.acc-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px;
  font-weight:700; font-size:13.5px; cursor:pointer; list-style:none; user-select:none;
  background:color-mix(in srgb, var(--accent) 5%, var(--surface))}
.acc-head::-webkit-details-marker{display:none}
.acc-head::after{content:""; flex:0 0 auto; width:0; height:0; border-left:5px solid transparent;
  border-right:5px solid transparent; border-top:6px solid var(--muted); transition:transform .15s ease}
.acc-item[open] > .acc-head::after{transform:rotate(180deg)}
.acc-head:hover{background:color-mix(in srgb, var(--accent) 10%, var(--surface))}
.acc-head:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.acc-body{padding:12px 14px 14px; border-top:1px solid var(--border); font-size:13.5px; line-height:1.5}
.acc-body > :first-child{margin-top:0}
.acc-body > :last-child{margin-bottom:0}

/* видео в окне: по ширине окна, высота ограничена — вертикальное 720×1280 целиком влезает (contain) */
.fw-video{display:block; width:100%; max-height:62vh; object-fit:contain; background:#000; border-radius:8px}

/* ===== Всплывающее страницы — над плавающими окнами ===== */
/* Окно немодальное: под ним работают со страницей, и её всплывающее (календарь .dp-pop — 80, комбо .combo-pop
   и выпадающие .dd-menu — 60, app.css) не должно открываться ПОД окном (стопка окон 90–115, floatwin.js
   Z_BASE). Пока окно открыто (body:has(> .fw) — окна живут прямо в body), всплывающее поднимается до 118:
   над окнами, под модальными окнами (.modal-backdrop 120) и меню по правому клику (.ctx-menu 140). Шапка
   (.topbar 70) и сайдбар (sticky; на узком экране fixed 55) — свои слои: меню внутри них не выше самих них,
   поэтому слой целиком поднимается, только пока в нём раскрыт выпадающий список (<details class="dd" open>).
   Без открытого окна ничего не меняется. */
body:has(> .fw) .dp-pop,
body:has(> .fw) .combo-pop,
body:has(> .fw) .dd-menu,
body:has(> .fw) .side-dd .dd-menu{z-index:118}
body:has(> .fw) .topbar:has(.dd[open]),
body:has(> .fw) .sidebar:has(.dd[open]){z-index:118}