/* Оболочка приложений телефона и общий набор элементов (шапка, список, карточка, переключатель, тост, полоска «домой»).
   Только токены из :root (site.css). Приложение подключает свой файл assets/css/apps/<id>.css и пользуется классами отсюда. */
:root{--home-h:26px;--r-card:18px;--glass:rgba(7,8,12,.55)}
.screen.app{background:var(--bg);color:var(--ink);padding-top:env(safe-area-inset-top,0px)}
.app-head{position:relative;z-index:2;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:52px;padding:0 6px;border-bottom:1px solid var(--line);background:var(--bg)}
.app-head h1{font:600 15px/1 var(--display);text-transform:uppercase;letter-spacing:.1em;text-align:center;color:var(--ink)}
.app-back{display:inline-flex;align-items:center;gap:0;min-width:44px;min-height:44px;padding:0 10px 0 2px;justify-self:start;border-radius:12px;color:var(--screen);font:500 15px/1 var(--sans)}
.app-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app-back:active{opacity:.6}
#chat .app-back span{display:none}      /* в шапке чата — только шеврон: место нужно имени */
.app-slot{justify-self:end;min-width:44px;display:flex;justify-content:flex-end}
.app-body{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px calc(var(--home-h) + 16px);scrollbar-width:none}
.app-body::-webkit-scrollbar{display:none}
.phone:has(>.bar[aria-hidden=false]) .app-body{padding-bottom:calc(var(--bar-h) + 16px)}
.app-empty{color:var(--muted);text-align:center;padding:48px 16px}
/* списки и карточки */
.list{border-radius:var(--r-card);background:color-mix(in srgb,var(--screen) 6%,transparent);border:1px solid var(--line);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);color:var(--ink)}
.row:last-child{border-bottom:0}button.row:active,a.row:active{background:color-mix(in srgb,var(--screen) 12%,transparent)}
.row .t{flex:1;min-width:0}.row .t b{display:block;font-weight:500;font-size:15px}.row .t small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.row .end{flex:none;color:var(--muted);font:400 12px var(--mono)}
.card{border-radius:var(--r-card);background:color-mix(in srgb,var(--screen) 6%,transparent);border:1px solid var(--line);padding:16px}
.h2{font:600 13px/1 var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:22px 4px 10px}.h2:first-child{margin-top:0}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--screen) 45%,transparent);color:var(--ink);font:500 14px/1 var(--sans)}
.pill.primary{background:var(--ice);color:var(--void);border-color:var(--ice)}.pill:active{transform:scale(.97)}
.seg{display:flex;gap:4px;padding:3px;border-radius:12px;background:color-mix(in srgb,var(--screen) 8%,transparent)}
.seg button{flex:1;min-height:36px;border-radius:9px;font:500 13px var(--sans);color:var(--muted)}.seg button[aria-pressed=true],.seg button.on{background:color-mix(in srgb,var(--screen) 22%,transparent);color:var(--ink)}
/* значки рабочего стола: лёгкий оттенок приложения (--g) */
.ico{background:linear-gradient(160deg,color-mix(in srgb,var(--g,var(--ice)) 16%,transparent),rgba(7,8,12,.62))}
.ico svg{color:color-mix(in srgb,var(--g,var(--ice)) 55%,var(--ice))}
.app .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* полоска «домой» (на всех экранах, кроме блокировки и рабочего стола) */
#homeBar{position:absolute;z-index:30;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:rgba(234,244,250,.8);cursor:pointer}
#homeBar::before{content:'';position:absolute;inset:-18px -30px}
#homeBar:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
/* тост: короткое сообщение внизу над полоской */
.toast{position:absolute;z-index:40;left:50%;bottom:calc(var(--home-h) + 56px);max-width:calc(100% - 48px);padding:10px 16px;border-radius:14px;background:rgba(20,26,36,.92);border:1px solid var(--line);color:var(--ice);font:400 13px/1.35 var(--sans);text-align:center;transform:translate(-50%,8px);opacity:0;transition:opacity .22s,transform .22s var(--ease);pointer-events:none}
.toast.in{opacity:1;transform:translate(-50%,0)}
/* кнопки блокировки: фонарик и камера */
button.lk-btn{cursor:pointer}button.lk-btn:active{transform:scale(.94)}
.lk-btn[aria-pressed=true]{background:var(--ice);color:var(--void)}
#lock::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(120% 70% at 50% 0,rgba(234,244,250,.55),rgba(234,244,250,.12) 55%,transparent 80%)}
#lock.torch::after{opacity:1}
/* экран приложения носит класс .app — он не должен наследовать правила значка рабочего стола (.app) */
.screen.app{position:absolute;align-items:stretch;gap:0;font-size:16px;line-height:1.45;text-shadow:none;color:var(--ink)}
/* телефон нельзя прокрутить программно (scrollIntoView по вынесенным за край элементам, например панели плеера) */
.phone{overflow:clip}
/* плашка согласия не закрывает низ приложений */
.phone:has(>.cookie:not([hidden])) .app-body{padding-bottom:max(calc(var(--bar-h) + 16px),calc(var(--ck-b) + var(--ck-h,0px) + 16px))}
/* полоска «домой» не должна перекрывать ползунок плеера: панель выше на 12 px, зона нажатия полоски уже */
:root{--bar-h:calc(96px + env(safe-area-inset-bottom,0px))}
.bar{padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
#homeBar::before{inset:-8px -30px}
/* превью кружка — картинка под видео (poster у video не везде рисуется); исчезает, когда в видео пошли кадры */
.circle .cp{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);border-radius:50%;object-fit:cover}
.circle video{z-index:1}.circle.vid .cp{opacity:0}
/* у сообщения-кружка нет пузыря ни ночью, ни днём (тема рассвета красит .msg.krita — перекрываем) */
html.dawn-mix .msg.krita.circlemsg,html.dawn .msg.krita.circlemsg,html .msg.krita.circlemsg{background:none}
/* углы телефона: скругление держит clip-path (overflow:clip + transform дочерних слоёв в переходах на долю секунды давали острые углы) */
@media (min-width:821px){.phone{clip-path:inset(0 round 40px)}}
/* повтор после сбоя загрузки: приложение (shell.js) и данные альбома на рабочем столе/в чате (app.js) */
.load-retry,.load-err{min-height:44px;margin:8px auto 0;padding:0 20px;display:block}
.load-err{position:relative;z-index:3;width:calc(100% - 32px);border-radius:var(--r-card);border:1px solid color-mix(in srgb,var(--low) 55%,transparent);background:color-mix(in srgb,var(--low) 12%,var(--void));color:var(--ice);font:500 14px/1.3 var(--sans);text-align:center;cursor:pointer}
.load-err:disabled{opacity:.6}
/* контейнеры, куда os.js переводит фокус при смене экрана (tabindex=-1): не кнопки, кольца не нужно */
.screen [tabindex="-1"]:focus,.screen h1:focus{outline:none}