/* PixelDesk · shell.css — оболочка нового интерфейса: скелет загрузки (вместо мигания экрана входа), полоса связи,
   скелет экрана, пока грузится его модуль. Только то, чего нет в kit.css (префикс lg- — как в макете входа, pd-shell-). */
#pd-boot[hidden],#pd-app[hidden],#pd-auth[hidden]{display:none!important}

/* Скелет оболочки при проверке сессии (макет login.html, состояние «session») */
.lg-shell{position:fixed;inset:0;z-index:2;display:grid;grid-template-columns:var(--pd-sb-w) 1fr;background:var(--pd-page)}
/* №5: сайдбар скелета — плотная плавающая карточка (стекло появится с оболочкой), шаг сетки — как у ленты */
.lg-shell__sb{margin:10px 0 10px 10px;padding:12px 8px 8px;border-radius:14px;border:1px solid var(--pd-line);background:var(--pd-surface-2)}
.lg-shell__sb .pd-logo{padding:7px 8px 16px}
.lg-shell__sb .pd-skel--line{height:12px;margin:14px 10px 0}
.lg-shell__m{position:relative;padding:14px 28px 0 24px}
/* та же неподвижная точечная сетка, что у оболочки (.pd-dots): узлы в тех же местах — при показе приложения фон не «прыгает» */
.lg-shell__m{background:radial-gradient(circle at 1px 1px,var(--pd-dot-c) .72px,rgba(186,208,248,0) 1.2px) var(--pd-dot-x) var(--pd-dot-y)/var(--pd-dot-step) var(--pd-dot-step)}
.lg-shell__hd{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.lg-shell__hd>.pd-skel{width:36px;height:36px;border-radius:10px}
.lg-shell__t{flex:1;display:flex;align-items:center;gap:12px}
.lg-shell__t .pd-skel:first-child{width:120px;height:18px}
.lg-shell__t .pd-skel+.pd-skel{width:200px;margin-top:0}
.lg-shell__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px 14px}
/* карточка «Открываем PixelDesk» — только если проверка идёт дольше 0.4 с (на быстром входе не мелькает) */
.lg-shell__c{position:fixed;left:calc(50% + var(--pd-sb-w) / 2);top:50%;white-space:nowrap;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 24px;border-radius:14px;background:var(--pd-raised);box-shadow:var(--pd-sh-3);animation:pd-fade .2s .4s both}
.lg-shell__c b{font-size:var(--pd-fs-4);font-weight:800}
.lg-shell__c small{font-size:var(--pd-fs-2);font-weight:600;color:var(--pd-muted)}
.lg-shell__mh{display:none}

/* Полоса «нет связи / связь вернулась» — над экраном, не перекрывает шапку телефона */
.pd-shell-banner{position:sticky;top:0;z-index:var(--pd-z-header);margin:-12px 0 16px}
.pd-shell-banner:empty{display:none}
.pd-shell-banner .pd-banner{box-shadow:inset 0 0 0 1px var(--pd-border),inset 3px 0 0 rgb(var(--pd-t)),0 12px 30px rgba(0,0,0,.35);background:var(--pd-surface-2)}

/* Скелет экрана, пока грузится его модуль (pages/<id>.js) */
.pd-shell-skel{padding-top:8px}
.pd-shell-skel>.pd-skel--line{height:18px;margin-bottom:24px}
.pd-shell-skel__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px 14px}

@media (max-width:860px){
  .lg-shell{grid-template-columns:1fr}
  .lg-shell__sb{display:none}
  .lg-shell__m{padding:0 16px;background:none}   /* на телефоне сетки нет (g5) */
  .lg-shell__mh{display:flex;align-items:center;gap:10px;height:56px;margin:0 -16px 16px;padding:0 12px 0 16px;border-bottom:1px solid var(--pd-line);background:var(--pd-surface-2)}
  .lg-shell__grid,.pd-shell-skel__grid{grid-template-columns:repeat(2,1fr);gap:16px 12px}
  .lg-shell__c{left:50%}
  .pd-shell-banner{top:calc(56px + env(safe-area-inset-top));margin:0 0 12px}
}

/* Экран со своей шапкой телефона (PD.pages.<id>.ownMhdr — AI Чат): общая шапка оболочки на нём не нужна */
@media (max-width:860px){ html.pd-own-mhdr .pd-mhdr{display:none} }