/* =========================================================================
   Слой 3D-персонажа «Скаут» — точка входа в ассистента (вариант 12).
   Разметка слоя — index.html между #topLayer и #overlays, логика — js/mascot.js.

   Z-план клона (css/app.css): контент .app и его пуш-экраны — до ~35,
   .statusbar 40, .toplayer 45, .overlays (шиты) 50, .device__homebar 60,
   .toasts 70. Персонаж живёт под шитами (canvas 38, пак 39); на время чата
   mascot.js вешает .mascot-above на .device__screen и поднимает его над
   скримом и шторкой (55/56). Спрятанный peek — 21, под аппбаром и таббаром.
   ========================================================================= */

#mascotGl{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:38;pointer-events:none;
}
#mascotPuck{
  position:absolute;left:0;top:0;
  width:134px;height:134px;border-radius:50%;
  z-index:39;cursor:grab;touch-action:none;
  pointer-events:none;
}
#mascotPuck.ready{pointer-events:auto}
#mascotPuck.grabbing{cursor:grabbing}

.mascot-above #mascotGl{z-index:55}
.mascot-above #mascotPuck{z-index:56}

/* ---- спрятанный Скаут: макушка выглядывает из-за нижнего меню ---- */
#mascotPeek{
  /* z ниже .bottomnav/.appbar (20): макушка действительно ЗА меню,
     наружу торчат только 2px над таббаром 88px (bottom:86) */
  position:absolute;right:6px;bottom:86px;z-index:19;
  cursor:pointer;opacity:0;pointer-events:none;
  transform:translateY(10px);
  transition:opacity .3s ease, transform .45s cubic-bezier(.3,1.5,.4,1);
}
#mascotPeek.show{opacity:1;pointer-events:auto;transform:none}
#mascotPeek:hover{transform:translateY(-3px)}
#mascotPeek .pe{
  transform-box:fill-box;transform-origin:center;
  animation:pkBlink 4.8s infinite;
  filter:drop-shadow(0 0 3px rgba(90,230,255,.85));
}
#mascotPeek .pe.d2{animation-delay:.9s;animation-duration:5.6s}
@keyframes pkBlink{
  0%, 91%, 100%{transform:scaleY(1)}
  93.5%{transform:scaleY(.08)}
  96%{transform:scaleY(1)}
}

#mascotFallback{
  position:absolute;inset:0;z-index:75;
  display:none;align-items:center;justify-content:center;text-align:center;
  padding:40px;color:var(--text600);font-size:14px;line-height:1.5;
  background:rgba(244,247,242,.92);
}
#mascotFallback.show{display:flex}

/* =========================================================================
   Панель настроек персонажа — демо-инструмент вне экрана телефона
   (аналог #astPanel: не часть приложения, живёт в правом верхнем углу).
   ========================================================================= */
#mascotGear{
  position:fixed;top:20px;right:20px;z-index:210;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:#57705f;font-size:20px;
  box-shadow:0 10px 26px -10px rgba(30,60,40,.35);
  transition:transform .3s cubic-bezier(.3,1.4,.4,1);
}
#mascotGear:hover{transform:rotate(40deg) scale(1.06)}
#mascotPanel{
  position:fixed;top:20px;right:20px;z-index:209;
  width:300px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:22px;padding:18px 18px 14px;
  box-shadow:0 24px 60px -20px rgba(30,60,40,.35);
  transform:translateX(calc(100% + 40px));
  transition:transform .45s cubic-bezier(.3,1.2,.35,1);
  color:#22303f;
}
#mascotPanel.open{transform:translateX(0)}
#mascotPanel h2{
  font-size:15px;font-weight:800;margin:0 0 2px;
  display:flex;justify-content:space-between;align-items:center;
}
#mascotPanelClose{
  border:0;background:#eef2ec;width:28px;height:28px;border-radius:50%;
  color:#7a8a80;cursor:pointer;font-size:13px;font-family:inherit;
}
#mascotPanel .opt{margin-top:14px}
#mascotPanel .opt label{
  display:flex;justify-content:space-between;
  font-size:13px;font-weight:700;color:#42504a;margin-bottom:7px;
}
#mascotPanel .opt label output{color:#57b31c;font-weight:700}
#mascotPanel input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:none;
}
#mascotPanel input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:3px;background:linear-gradient(90deg,#cfe8b6,#e6ede4);
}
#mascotPanel input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:2.5px solid #6cc521;margin-top:-7px;
  box-shadow:0 3px 8px rgba(60,120,30,.3);cursor:pointer;
}
#mascotPanel .swatches{display:flex;gap:9px;flex-wrap:wrap}
#mascotPanel .sw{
  width:34px;height:34px;border-radius:50%;cursor:pointer;border:0;
  outline:3px solid transparent;outline-offset:2px;
  transition:transform .18s, outline-color .18s;
}
#mascotPanel .sw:hover{transform:scale(1.12)}
#mascotPanel .sw.on{outline-color:#6cc521}
#mascotPanel .cust{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  font-size:12.5px;color:#64716a;font-weight:600;
}
#mascotPanel .cust input[type=color]{
  width:34px;height:26px;border:0;padding:0;background:none;cursor:pointer;
  border-radius:6px;overflow:hidden;
}
#mascotPanel .row-t{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:13px;font-size:13.5px;font-weight:600;color:#42504a;
}
#mascotPanel .tgl{position:relative;width:44px;height:26px;flex:none}
#mascotPanel .tgl input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;z-index:2;margin:0}
#mascotPanel .tgl i{
  position:absolute;inset:0;border-radius:14px;background:#dde4dd;
  transition:background .25s;
}
#mascotPanel .tgl i::after{
  content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);
  transition:transform .25s cubic-bezier(.3,1.4,.4,1);
}
#mascotPanel .tgl input:checked + i{background:#6cc521}
#mascotPanel .tgl input:checked + i::after{transform:translateX(18px)}
#mascotReset{
  margin-top:16px;width:100%;border:1.5px solid #e0e7de;background:#fff;
  color:#7a8a80;font-family:inherit;font-size:13px;font-weight:700;
  border-radius:12px;padding:9px;cursor:pointer;
}
#mascotReset:hover{background:#f6f9f4}

@media (prefers-reduced-motion: reduce){
  #mascotGear{transition:none}
  #mascotGear:hover{transform:none}
  #mascotPanel{transition:transform .1s linear}
  #mascotPanel .sw{transition:none}
  #mascotPanel .tgl i, #mascotPanel .tgl i::after{transition:none}
}