/* ==========================================================================
   CELLIO UX v1 — общий слой клиентского опыта для сервисных экранов
   Подключается в static/*.html (planner, groupchat, tests, trips, gooddeeds,
   poputchiki, remont, talents, card …). НЕ трогает api.py / lite.html / меню хаба.
   Всё пространство имён — префикс .cx-* и #__cellio_* (без глобальных перекрытий
   вёрстки страниц). Тема тёмная/светлая наследуется от --tg-theme-* переменных.
   Автор: Claude Code · 2026-07-04
   ========================================================================== */

:root{
  --cx-safe-top: env(safe-area-inset-top, 0px);
  --cx-safe-bottom: env(safe-area-inset-bottom, 0px);
  --cx-gold:#d4af37;
  --cx-violet:#a855f7;
  --cx-muted:#9d8bb8;
  --cx-card:rgba(255,255,255,.05);
  --cx-line:rgba(255,255,255,.10);
  --cx-radius:14px;
}

/* --- safe-area: не липнуть к «чёлке»/жестовой полосе на iPhone --------------- */
@supports (padding: max(0px)){
  body{ padding-bottom: max(0px, var(--cx-safe-bottom)); }
}

/* --- sticky nav-бар из nav_helper.js: тап-цели ≥44px + safe-area top --------- */
#__cellio_nav_bar{ padding-top: calc(10px + var(--cx-safe-top)) !important; }
#__cellio_nav_bar a{
  min-height:44px; min-width:44px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ==========================================================================
   СКЕЛЕТОН-ЛОАДЕР — вместо белого экрана / голого «Загрузка…»
   Разметка: <div class="cx-skel"><span class="cx-skel-line"></span>…</div>
   Или программно: cx.skeleton(el, n)
   ========================================================================== */
@keyframes cx-shimmer{ 0%{background-position:-320px 0} 100%{background-position:320px 0} }
.cx-skel{ display:flex; flex-direction:column; gap:12px; padding:6px 0; }
.cx-skel-card{
  border-radius:var(--cx-radius);
  border:1px solid var(--cx-line);
  padding:14px; display:flex; flex-direction:column; gap:9px;
  background:var(--cx-card);
}
.cx-skel-line,
.cx-skel-card::before,
.cx-skel-block{
  display:block; height:12px; border-radius:7px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.14) 40%,
    rgba(255,255,255,.05) 80%);
  background-size:320px 100%;
  animation:cx-shimmer 1.15s linear infinite;
}
.cx-skel-block{ height:64px; border-radius:var(--cx-radius); }
.cx-skel-line.w40{ width:40%; }
.cx-skel-line.w60{ width:60%; }
.cx-skel-line.w80{ width:80%; }
.cx-skel-line.w100{ width:100%; }
@media (prefers-reduced-motion: reduce){
  .cx-skel-line,.cx-skel-block{ animation:none; }
}

/* ==========================================================================
   ПУСТОЕ СОСТОЯНИЕ — понятный плейсхолдер + ясное следующее действие
   Программно: cx.empty(el, {icon,title,hint,ctaText,ctaHref})
   ========================================================================== */
.cx-empty{
  text-align:center; padding:34px 18px;
  color:var(--tg-theme-hint-color, var(--cx-muted));
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.cx-empty .cx-empty-ico{ font-size:40px; line-height:1; margin-bottom:12px; display:block; }
.cx-empty .cx-empty-title{
  font-size:16px; font-weight:700; margin-bottom:6px;
  color:var(--tg-theme-text-color, #eef1f6);
}
.cx-empty .cx-empty-hint{ font-size:13.5px; margin-bottom:16px; }
.cx-empty .cx-empty-cta,
.cx-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:0 20px; border-radius:12px;
  background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.35);
  color:var(--cx-violet); text-decoration:none; font-size:14px; font-weight:700;
  -webkit-tap-highlight-color:transparent;
}
.cx-empty .cx-empty-cta:active,.cx-cta:active{ transform:scale(.97); }
.cx-empty .cx-empty-cta.gold,.cx-cta.gold{
  background:rgba(212,175,55,.10); border-color:rgba(212,175,55,.35); color:var(--cx-gold);
}

/* ==========================================================================
   «ДОЛГО ГРУЗИТСЯ» — не-разрушающая страховка от белого экрана / залипшего
   спиннера (инжектит cellio_ux_v1.js). Никогда не тупик: ↻ и 🏠.
   ========================================================================== */
#__cx_stuck{
  position:fixed; left:50%; bottom:calc(16px + var(--cx-safe-bottom));
  transform:translateX(-50%);
  display:flex; gap:10px; align-items:center;
  background:rgba(10,10,20,.92); backdrop-filter:blur(8px);
  border:1px solid var(--cx-line); border-radius:14px;
  padding:10px 14px; z-index:99997; max-width:92%;
  font:13px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#cbb8e6; box-shadow:0 8px 30px rgba(0,0,0,.4);
}
#__cx_stuck b{ color:#eef1f6; font-weight:700; }
#__cx_stuck a{
  min-height:38px; display:inline-flex; align-items:center; gap:4px;
  padding:0 12px; border-radius:10px; text-decoration:none; font-weight:700;
  border:1px solid var(--cx-line);
}
#__cx_stuck a.r{ color:var(--cx-gold); border-color:rgba(212,175,55,.35); }
#__cx_stuck a.h{ color:var(--cx-violet); border-color:rgba(168,85,247,.35); }

/* --- утилити: минимальная тап-цель 44px (opt-in, .cx-tap) ------------------- */
.cx-tap{ min-height:44px; min-width:44px; }