/* apps-catalog/_core/imm-scene-ui.css — общий вид элементов любой метавселенной в стиле FolioApp:
 *   • кнопка «Автотур» (#tourBtn),
 *   • название медиафайла при наведении (#tip) и подпись к нему (#capTip).
 * Подключается из shell.php для иммерсивных страниц, поэтому действует на ВСЕ метавселенные (текущую и новые):
 * сцене достаточно иметь элементы с этими id и переключать классы on / flip / up и переменные --tx / --ty.
 * Правила написаны с повышенной специфичностью, чтобы перекрывать прежние стили сцены (konstrukt.css) без его правки.
 * Цвета и шрифты те же, что у кнопок шапки (imm-tools.css): тёмное стекло, тонкая белая рамка, Inter, коралловый акцент.
 * Кнопку «Автотур» на телефоне оформляет панель touch-controls.js (класс fa-touch-tour), её стили здесь не трогаются. */

/* ---------- кнопка «Автотур» ---------- */
/* Нижняя линия: водяной знак «folio APP» (рисуется внутри сцены), кнопка «Автотур» и подпись «Сделано в FolioApp»
 * (режим white label, imm-wl.css) стоят на одной линии по нижнему краю. Значение подобрано по нижнему краю надписи
 * водяного знака; если нужно сдвинуть всю линию, меняйте только эту переменную. */
:root{--fa-imm-bottom:31px}
@media (max-width:700px){:root{--fa-imm-bottom:30px}}

/* ВАЖНО: размер водяного знака «folio APP» (_core/demo-guard.js) = 4 × высота (offsetHeight) этой кнопки в момент
 * загрузки сцены. Раньше в этот момент у кнопки был только текстовый «каркас» высотой 32 px, и знак выглядел
 * компактно. Поэтому рабочий блок кнопки держим высотой 32 px (--fa-wm-h), а видимую «таблетку» высотой 50 px рисуем
 * псевдоэлементом ::after: на экране кнопка крупная, а водяной знак остаётся прежнего размера.
 * Меняя --fa-wm-h, вы меняете размер водяного знака. */
:root{--fa-wm-h:32px}

/* Правила действуют ТОЛЬКО на компьютере: на телефоне панель touch-controls.js переносит кнопку в свой ряд и добавляет
 * ей класс fa-touch-tour, а её вид задаёт сама панель. Поэтому всё оформление через :not(.fa-touch-tour). */
body.fa-immersive #tourBtn{z-index:20}   /* как и раньше, на всех устройствах */
body.fa-immersive #tourBtn:not(.fa-touch-tour){
  position:fixed;right:max(22px,env(safe-area-inset-right,0px));
  bottom:calc(var(--fa-imm-bottom,31px) + 9px);          /* «таблетка» выходит за блок вниз на 9 px: её нижний край = нижняя линия */
  display:inline-flex;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;
  height:var(--fa-wm-h,32px);margin:0;padding:0 26px;
  border:0;border-radius:0;background:none;box-shadow:none;color:#fff;
  font:700 14.5px/1 'Inter',Arial,sans-serif;font-stretch:100%;letter-spacing:.02em;text-transform:none;white-space:nowrap;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease}
/* видимая «таблетка» 50 px: тёмное стекло и тонкая белая рамка */
body.fa-immersive #tourBtn:not(.fa-touch-tour)::after{
  content:'';position:absolute;left:0;right:0;top:50%;height:50px;transform:translateY(-50%);z-index:-1;box-sizing:border-box;
  border:1.5px solid rgba(255,255,255,.55);border-radius:999px;
  background:rgba(20,21,26,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s ease,border-color .2s ease}
/* значок: «играть» до запуска, «стоп» во время автотура (текст кнопки ставит сцена) */
body.fa-immersive #tourBtn:not(.fa-touch-tour)::before{content:'';flex:none;width:9px;height:10px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
body.fa-immersive #tourBtn:not(.fa-touch-tour).active::before{width:9px;height:9px;clip-path:none;border-radius:2px}
@media (hover:hover){
  body.fa-immersive #tourBtn:not(.fa-touch-tour):hover{background:none;color:#fff}
  body.fa-immersive #tourBtn:not(.fa-touch-tour):hover::after{background:var(--fa-coral,#FF4D6D);border-color:var(--fa-coral,#FF4D6D)}
}
body.fa-immersive #tourBtn:not(.fa-touch-tour).active{background:none;color:#fff;box-shadow:none}
body.fa-immersive #tourBtn:not(.fa-touch-tour).active::after{background:var(--fa-coral,#FF4D6D);border-color:var(--fa-coral,#FF4D6D)}
body.fa-immersive #tourBtn:not(.fa-touch-tour):active{transform:scale(.97)}
body.fa-immersive #tourBtn:not(.fa-touch-tour):focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:999px}

/* ---------- название файла при наведении (#tip) ---------- */
body.fa-immersive #tip{
  position:fixed;left:50%;top:calc(50% + 26px);transform:translateX(-50%);z-index:15;display:none;
  box-sizing:border-box;max-width:min(320px,calc(100vw - 24px));padding:7px 14px;margin:0;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;
  background:rgba(20,21,26,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;
  font:600 12.5px/1.3 'Inter',Arial,sans-serif;font-stretch:100%;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
body.fa-immersive #tip.on{display:block}
/* в режиме курсора подсказка следует за мышью */
body.fa-immersive:not(.walking) #tip.on{left:var(--tx,50%);top:var(--ty,50%);transform:translate(14px,14px)}

/* ---------- подпись к работе (#capTip) ---------- */
body.fa-immersive #capTip{
  position:fixed;left:50%;top:calc(50% + 62px);transform:translateX(-50%);z-index:15;display:none;
  box-sizing:border-box;max-width:min(360px,80vw);padding:10px 14px;margin:0;
  background:var(--fa-surface,#fff);color:var(--fa-ink,#14151A);
  border:1px solid var(--fa-border,#E7E8F0);border-radius:14px;box-shadow:0 12px 32px -12px rgba(20,21,26,.45);
  font:500 13.5px/1.45 'Inter',Arial,sans-serif;font-stretch:100%;
  white-space:pre-wrap;word-break:break-word;pointer-events:none}
body.fa-immersive #capTip.on{display:block}
body.fa-immersive:not(.walking) #capTip.on{left:var(--tx,50%);top:var(--ty,50%);transform:translate(14px,52px)}
body.fa-immersive:not(.walking) #capTip.on.flip{transform:translate(calc(-100% - 14px),52px)}
body.fa-immersive:not(.walking) #capTip.on.up{transform:translate(14px,calc(-100% - 14px))}
body.fa-immersive:not(.walking) #capTip.on.flip.up{transform:translate(calc(-100% - 14px),calc(-100% - 14px))}