/* ============================================================
   SLOTLY · СТЕКЛО — второе поколение Aura (15.10.2026)
   ------------------------------------------------------------
   Подключается СРАЗУ ПОСЛЕ aura.css на страницах приложения (кабинет, приложение
   клиента, витрина). Палитра и шрифты — те же токены Aura (--a-*): этот слой меняет
   не цвета, а живость. Под стеклом плывут пятна наших цветов, касание отвечает волной,
   цифры прокручиваются, как на табло, окна смахиваются вниз.

   Порядок файлов: aura.css → glass.css (общее) → glass-client.css или glass-admin.css
   (экраны своей части). Свои правила экранов в общий файл не класть.

   Движение полное везде, включая MAX и слабые телефоны (решение владельца 15.10.2026).
   html.sg-lite ставится только тому, кто сам включил «уменьшить движение» в телефоне.
   В MAX размытие по-прежнему снимает aura.css — с ним не срабатывали касания в меню.

   Классы слоя — с приставкой sg-, чтобы не столкнуться с прежними стилями.
   ============================================================ */

:root {
  --sg-spring: cubic-bezier(.2, 1.3, .35, 1);
  --sg-soft: cubic-bezier(.25, .8, .25, 1);
  --sg-b1: var(--a-butter, #ffe3a7);
  --sg-b2: var(--a-accent, #fe4208);
  --sg-b3: #ff9a5c;
  --sg-b4: var(--a-mint, #43e592);
}

/* ---------- живые пятна под стеклом ----------
   Отдельный слой поверх неподвижной подсветки Aura (body::before). Пятна плывут сами и
   чуть тянутся за пальцем (--sg-px/--sg-py ставит glass.js). Цвет можно сменить на время —
   SlotlyGlass.tint(['#fe4208', '#ff9a5c']) — например, в цвет выбранной услуги. */
.sg-blobs {
  position: fixed; inset: -12%; z-index: 0; pointer-events: none;
  transform: translate3d(calc(var(--sg-px, 0) * 24px), calc(var(--sg-py, 0) * 24px), 0);
  transition: transform 1.4s var(--sg-soft);
}
.sg-blobs i { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; transition: background 1.2s ease; }
.sg-blobs i:nth-child(1) { width: 52vmax; height: 52vmax; left: -6%; top: -8%; background: var(--sg-b1); opacity: .75; animation: sg-d1 22s ease-in-out infinite alternate; }
.sg-blobs i:nth-child(2) { width: 36vmax; height: 36vmax; right: 0; top: 12%; background: var(--sg-b2); opacity: .32; animation: sg-d2 26s ease-in-out infinite alternate; }
.sg-blobs i:nth-child(3) { width: 42vmax; height: 42vmax; left: 14%; bottom: -4%; background: var(--sg-b3); opacity: .42; animation: sg-d1 30s ease-in-out infinite alternate-reverse; }
.sg-blobs i:nth-child(4) { width: 26vmax; height: 26vmax; right: 10%; bottom: 18%; background: var(--sg-b4); opacity: .22; animation: sg-d2 24s ease-in-out infinite alternate-reverse; }
@keyframes sg-d1 { to { transform: translate3d(8vmax, 10vmax, 0) scale(1.12); } }
@keyframes sg-d2 { to { transform: translate3d(-9vmax, -6vmax, 0) scale(.9); } }
html[data-theme="dark"] .sg-blobs i { opacity: .16; }
html[data-theme="dark"] .sg-blobs i:nth-child(2) { opacity: .24; }

/* ---------- огромная тонкая цифра ----------
   Главный предмет экрана: время записи, выручка дня, рейтинг. Одна на экран. */
.sg-huge {
  font-family: var(--a-sans) !important;
  font-weight: 200 !important;
  letter-spacing: -.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--a-ink);
}
.sg-huge small, .sg-huge .sg-unit { font-size: .45em; letter-spacing: -.02em; margin-left: .08em; }
.sg-label { font-size: 13px; color: var(--a-ink-3); }

/* Табло: каждая цифра — колонка 0–9, прокручивается к нужной (SlotlyGlass.odo) */
.sg-odo { display: inline-flex; align-items: flex-start; overflow: hidden; height: 1em; line-height: 1; vertical-align: top; font-variant-numeric: proportional-nums; }
/* Колонка не растягивается по высоте строки (align-items у .sg-odo) и режет лишнее по ширине,
   пока подстраивается под цифру, — соседние цифры не наползают. */
.sg-odo .sg-col { display: inline-flex !important; flex: none; flex-direction: column; align-items: center; overflow: hidden; transition: transform .9s var(--sg-spring), width .6s var(--sg-spring); }
.sg-odo .sg-col > span { display: block; height: 1em; width: max-content; }
.sg-odo .sg-ch { display: block; height: 1em; }
.sg-odo .sg-sp { width: .22em; }

/* ---------- облачко помощника ----------
   Совет системы человеку: «пора напомнить», «подтвердить запись?». Сначала три точки
   «печатает», потом слова проявляются по одному (SlotlyGlass.say). */
.sg-ai {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px; border-radius: 24px 24px 24px 8px;
  background: var(--a-glass); border: 1px solid var(--a-glass-line);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: var(--a-shadow);
  font-size: 14.5px; line-height: 1.45; color: var(--a-ink);
}
.sg-ai__body { flex: 1; min-width: 0; }
.sg-spark {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: conic-gradient(from 200deg, var(--a-accent), #ff9a5c, var(--a-butter), var(--a-mint), var(--a-accent));
  box-shadow: 0 0 16px rgba(254, 66, 8, .4);
  animation: sg-spin 6s linear infinite;
}
@keyframes sg-spin { to { transform: rotate(1turn); } }
.sg-ai__acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sg-typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.sg-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--a-ink-3); animation: sg-bob 1s ease-in-out infinite; }
.sg-typing i:nth-child(2) { animation-delay: .15s; }
.sg-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sg-bob { 50% { transform: translateY(-5px); opacity: .5; } }
.sg-w { display: inline-block; opacity: 0; transform: translateY(6px); filter: blur(4px); animation: sg-word .45s var(--sg-soft) forwards; }
@keyframes sg-word { to { opacity: 1; transform: none; filter: none; } }

/* ---------- касание: волна света от пальца ----------
   Элемент с классом sg-tap получает волну. Сам элемент должен держать overflow:hidden
   и не быть position:static — класс это обеспечивает. */
.sg-tap { position: relative; overflow: hidden; isolation: isolate; }
.sg-rip {
  position: absolute; z-index: 0; width: 30px; height: 30px; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%);
  animation: sg-rip .6s var(--sg-soft) forwards;
}
html[data-theme="dark"] .sg-rip { background: radial-gradient(circle, rgba(255, 160, 110, .45), rgba(255, 160, 110, 0) 70%); }
@keyframes sg-rip { to { transform: translate(-50%, -50%) scale(18); opacity: 0; } }

/* Пружинящее нажатие для крупных карточек и кнопок */
.sg-press { transition: transform .35s var(--sg-spring); }
.sg-press:active { transform: scale(.97); }

/* ---------- выбор заливает карточку от точки касания ----------
   На карточке выбора (услуга, мастер): класс sg-fill и цвет --sg-c1/--sg-c2 (по умолчанию
   оранжевый → персик). Выбранной считается [aria-pressed="true"], [aria-selected="true"]
   или класс is-selected / selected / active. Точку касания ставит glass.js (--sg-rx/--sg-ry). */
.sg-fill { position: relative; overflow: hidden; isolation: isolate; }
.sg-fill::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(120deg, var(--sg-c1, rgba(254, 66, 8, .30)), var(--sg-c2, rgba(255, 227, 167, .65)));
  clip-path: circle(0 at var(--sg-rx, 50%) var(--sg-ry, 50%));
  transition: clip-path .6s var(--sg-soft);
}
.sg-fill[aria-pressed="true"]::after, .sg-fill[aria-selected="true"]::after,
.sg-fill.is-selected::after, .sg-fill.selected::after, .sg-fill.active::after {
  clip-path: circle(150% at var(--sg-rx, 50%) var(--sg-ry, 50%));
}

/* ---------- переезжающая плашка выбора ----------
   В группе вкладок/сегментов: SlotlyGlass.glide(group, '[aria-selected="true"]') сама
   добавит .sg-glide и будет двигать её к выбранной кнопке. Кнопки группы — поверх. */
/* :where — нулевая сила: хозяину, который уже fixed/absolute (нижняя панель), положение не ломаем. */
:where(.sg-glide-host) { position: relative; isolation: isolate; }
.sg-glide {
  position: absolute; z-index: -1; pointer-events: none; border-radius: 999px;
  background: var(--a-ink);
  transition: left .55s var(--sg-spring), top .55s var(--sg-spring), width .55s var(--sg-spring), height .55s var(--sg-spring), opacity .2s;
}

/* ---------- появление ----------
   sg-rise — проявиться снизу (задержка --sg-i × 50 мс); sg-pop — выпрыгнуть. */
.sg-rise { opacity: 0; animation: sg-word .55s var(--sg-soft) forwards; animation-delay: calc(var(--sg-i, 0) * 50ms); }
.sg-pop { opacity: 0; animation: sg-pop .45s var(--sg-spring) forwards; animation-delay: calc(var(--sg-i, 0) * 25ms); }
@keyframes sg-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.sg-bloom { animation: sg-bloom .8s var(--sg-spring) both; transform-origin: 50% 100%; }
@keyframes sg-bloom { from { transform: scale(.4) translateY(120px); opacity: 0; } }

/* Полоса-заполнение (загрузка мастеров, прогресс): ширину ставит glass.js из data-sg-w */
.sg-bar { height: 10px; border-radius: 999px; background: var(--a-hair); overflow: hidden; }
.sg-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--a-accent), #ff9a5c); transition: width 1.2s var(--sg-spring); }

/* ---------- нижние окна: держатель для смахивания вниз ---------- */
.sg-grip { width: 64px; height: 24px; margin: -6px auto 6px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.sg-grip::before { content: ''; width: 44px; height: 5px; border-radius: 3px; background: var(--a-ink-3); opacity: .35; }
.sg-dragging { transition: none !important; }

/* ---------- праздничные капли ---------- */
.sg-drop { --dx: 0px; --dy: 0px; position: fixed; z-index: 10050; border-radius: 50%; pointer-events: none; animation: sg-fly 1.3s var(--sg-soft) forwards; }
@keyframes sg-fly { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* ---------- смена экранов: старый уходит в размытие, новый проявляется ---------- */
::view-transition-old(root) { animation: sg-vt-out .3s var(--sg-soft) both; }
::view-transition-new(root) { animation: sg-vt-in .45s var(--sg-soft) both; }
@keyframes sg-vt-out { to { opacity: 0; filter: blur(10px); transform: scale(.98); } }
@keyframes sg-vt-in { from { opacity: 0; filter: blur(10px); transform: scale(1.02); } }

/* ---------- облегчённый режим и «меньше движения» ---------- */
html.sg-lite .sg-blobs { transform: none; transition: none; }
html.sg-lite .sg-blobs i { animation: none; filter: blur(50px); }
html.sg-lite .sg-spark { animation: none; }
/* В MAX размытие снимает aura.css (оно ломало касания в меню), а пятна и всё движение
   остаются — решение владельца 15.10.2026: полная версия везде. */
@media (prefers-reduced-motion: reduce) {
  .sg-blobs i, .sg-spark, .sg-typing i { animation: none !important; }
  .sg-rise, .sg-pop, .sg-w, .sg-bloom { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .sg-fill::after, .sg-odo .sg-col, .sg-glide, .sg-bar > i, .sg-press { transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ---------- нижняя панель разделов: таблетка с тёмной капсулой (как в образце) ----------
   Приложение клиента (.cnav, до 1023 px — шире там боковое меню) и кабинет (.atabbar,
   до 1099 px). Капсулу двигает glass.js (pillbar → .sg-glide). Подпись видна только у
   выбранного раздела, у остальных — значок; имя кнопки для диктора остаётся в подписи. */
@media (max-width: 1023px) {
  html[data-theme] .capp .cnav.sg-pill {
    left: 50% !important; right: auto !important; width: auto !important; max-width: calc(100% - 20px);
    transform: translateX(-50%);
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    justify-content: center; align-items: center; gap: 2px;
    padding: 6px !important; border-radius: 999px !important;
    border: 1px solid var(--a-glass-line) !important;
    background: var(--a-glass-strong) !important;
    box-shadow: 0 18px 44px -18px rgba(120, 48, 12, .45) !important;
  }
}
@media (max-width: 1099px) {
  html[data-theme] .atabbar.sg-pill {
    display: flex; left: 50%; right: auto; width: auto; max-width: calc(100% - 20px);
    transform: translateX(-50%);
    bottom: calc(14px + env(safe-area-inset-bottom) + var(--cookie-pad, 0px));
    justify-content: center; align-items: center; gap: 2px;
    padding: 6px; border-radius: 999px;
    box-shadow: 0 18px 44px -18px rgba(120, 48, 12, .45);
  }
}
@media (max-width: 1099px) {
  html[data-theme] nav.sg-pill > button {
    flex: none !important; flex-direction: row !important; align-items: center; justify-content: center;
    gap: 0; height: 48px; min-height: 48px; min-width: 48px;
    margin: 0 !important; padding: 0 13px !important; border-radius: 999px !important;
    background: transparent !important; color: var(--a-ink-2) !important;
    font: 700 14px/1 var(--a-sans) !important;
    transition: color .3s, gap .5s var(--sg-spring);
  }
  html[data-theme] nav.sg-pill > button i { font-size: 18px !important; transform: none !important; animation: none !important; }
  html[data-theme] nav.sg-pill > button > span[data-i18n] {
    display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
    color: inherit !important;
    transition: max-width .5s var(--sg-spring), opacity .3s;
  }
  html[data-theme] nav.sg-pill > button.on { color: var(--a-base) !important; gap: 8px; }
  html[data-theme] nav.sg-pill > button.on i { background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; }
  html[data-theme] nav.sg-pill > button.on > span[data-i18n] { max-width: 120px; opacity: 1; }
  html[data-theme] nav.sg-pill > button:active { transform: scale(.94); }
  html[data-theme] nav.sg-pill > .sg-glide { z-index: 0; background: var(--a-ink); box-shadow: 0 8px 20px -8px rgba(34, 34, 38, .5); }
  html[data-theme] nav.sg-pill > button { position: relative; z-index: 1; }
}