/* ВИТРИНА · ЖИВОЙ МАКЕТ ПРИЛОЖЕНИЯ (блок «your morning» на главной).
 *
 * Экран строится в настоящих 390×844 и масштабируется целиком — поэтому один и тот же
 * макет стоит и в 210 px на странице, и в полный рост в окне просмотра, не переверстываясь.
 * Все числа — размеры, цвета, скорости вращения — сняты с кода приложения (src/theme.ts,
 * src/ui/MoodRing.tsx, app/index.tsx), а не подобраны на глаз.
 */
/* `overflow:hidden` здесь не косметика: внутренняя коробка экрана — настоящие
   390×844 и только ПОКАЗАНА уменьшенной. Нетронутый бокс не должен попадать в
   прокручиваемую область страницы ни при каком прочтении спецификации. */
.bm-mock{position:relative;width:240px;height:519px;flex:0 0 auto;overflow:hidden;touch-action:pan-y}
/* ПАЛЕЦ НА МАКЕТЕ ЛИСТАЕТ СТРАНИЦУ, А НЕ ТАСКАЕТ МАКЕТ. На странице макет стоит
   уменьшенным, и возить его вбок незачем: `pan-y` запрещает горизонтальный жест
   на нём целиком, чем бы он ни был вызван. Тап по дуге при этом работает —
   настроение ставится касанием. В полный рост ограничение снимается: там макет
   ведёт себя как приложение, и кольцо крутится пальцем. */
.bm-full .bm-mock{touch-action:auto}
.bm-mock-in{position:relative;width:390px;height:844px;transform:scale(.6154);transform-origin:top left;
  background:#f4f6fa;border-radius:38px;overflow:hidden;
  box-shadow:0 16px 40px -24px rgba(12,17,23,.3),0 0 0 1px rgba(12,17,23,.05)}
/* В полный рост макет ужимается под высоту окна: 844 px влезают не везде. */
.bm-full .bm-mock{width:calc(390px * var(--k,1));height:calc(844px * var(--k,1))}
.bm-full .bm-mock-in{transform:scale(var(--k,1));box-shadow:0 30px 70px -30px rgba(12,17,23,.6)}
@media (max-width:860px){ .bm-mock{width:215px;height:465px} .bm-mock-in{transform:scale(.5513)} }

/* Шрифт — длинной записью: в сокращённой `font:` слово inherit недопустимо,
   и всё правило отбрасывалось целиком (жило как Arial 13.3). */
.bm-try{display:block;margin:12px auto 0;font-family:inherit;font-weight:700;font-size:13px;line-height:1.3;
  color:#007aff;background:none;border:0;cursor:pointer;padding:4px;text-align:center}
.bm-note{display:block;margin:3px auto 0;font-family:inherit;font-weight:400;font-size:11.5px;line-height:1.4;color:#8a94a0;max-width:268px;text-align:center}
.bm-lb{position:fixed;inset:0;background:rgba(12,17,23,.74);display:none;place-items:center;z-index:9000;padding:16px}
.bm-lb.on{display:grid}
.bm-lb-close{position:absolute;top:16px;right:16px;background:#fff;border:0;border-radius:10px;padding:9px 15px;
  font-family:inherit;font-weight:700;font-size:13px;line-height:1;color:#0c1117;cursor:pointer}

/* ── внутри телефона — типографика и палитра приложения ──────────────────── */
.ap{position:absolute;inset:0;display:flex;flex-direction:column;background:#f4f6fa;color:#0c1117;
  font:400 14px/1.4 -apple-system,"SF Pro Text",system-ui,sans-serif;text-align:left}
.ap *{box-sizing:border-box}
.ap button{font:inherit;color:inherit}

.ap .sb{display:flex;align-items:center;justify-content:space-between;padding:15px 24px 0;flex:0 0 auto}
.ap .sb .t{display:flex;align-items:center;gap:7px;font:600 16px/1 -apple-system,system-ui,sans-serif;letter-spacing:-.2px}
.ap .sb .ic{display:flex;gap:6px;align-items:center}

.ap .view{position:absolute;inset:0;top:46px;display:flex;flex-direction:column}
.ap .view[hidden]{display:none}
.ap .chatv{background:#f4f6fa;animation:bmSlide .26s cubic-bezier(.22,.8,.3,1)}
@keyframes bmSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.ap .top{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:6px 18px 0;flex:0 0 auto}
.ap .top button{background:none;border:0;padding:6px;cursor:pointer;line-height:0;border-radius:8px}
.ap .roombtn{justify-self:center;display:inline-flex;align-items:center;gap:9px;
  font:700 17px/1 -apple-system,system-ui,sans-serif;position:relative;padding:8px 6px!important}
.ap .unread{position:absolute;right:0;top:4px;width:7px;height:7px;border-radius:50%;background:#e5484d;animation:bmBreathe 3s ease-in-out infinite}
@keyframes bmBreathe{0%,100%{opacity:1}50%{opacity:.35}}

/* ЛЕНТА ЛИСТАЕТСЯ ТОЛЬКО ВВЕРХ-ВНИЗ. `overflow-y:auto` делает вторую ось `auto`
   автоматически, а свечение ручки на дуге нарисовано с `overflow:visible` и чуть
   выходит за свою коробку — этого хватает, чтобы палец таскал экран вбок на
   десяток точек. Горизонтальная ось закрыта явно; видимого не обрезается ничего. */
.ap .scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 22px 20px;scrollbar-width:none}
.ap .scroll::-webkit-scrollbar{display:none}

.ap .hello{display:flex;align-items:flex-start;gap:4px;margin-top:14px}
.ap .hello h3{font:600 38px/1.32 "Caveat","Segoe Script",cursive;color:#12324f;margin:14px 0 0;flex:1;min-width:0;letter-spacing:.2px;text-align:left}
.ap .hello h3 i{font-style:normal;color:#6480bf;display:block;margin-left:-2.3px}
.ap .ringwrap{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;width:132px}
.ap .ring-box{width:132px;height:132px;position:relative;display:grid;place-items:center;touch-action:none;cursor:grab}
.ap .ring-box:active{cursor:grabbing}
.ap .arc{position:absolute;inset:0;overflow:visible;transition:opacity .5s ease,transform .5s ease}
.ap .ringcap{font:400 15px/1.2 -apple-system,system-ui,sans-serif;color:#5c6672;margin-top:4px}

/* облака приложения: белый туман на прозрачном, красится маской */
.ap .cl{position:absolute;display:block;pointer-events:none;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.ap .spin{position:absolute;inset:0;pointer-events:none}
@keyframes bmCw{to{transform:rotate(360deg)}}
@keyframes bmPriCcw{from{transform:rotate(140deg)}to{transform:rotate(-220deg)}}
.ap .orbwrap{position:relative;width:84px;height:84px;border-radius:50%}
.ap .orb{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#eef2f8}
.ap .orb.ready{animation:bmBeat 2200ms ease-in-out infinite}
@keyframes bmBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.ap .rim{position:absolute;inset:0;border:1px solid rgba(255,255,255,.65);border-radius:50%}
.ap .check{position:absolute;inset:0;display:grid;place-items:center;font:900 23px/1 -apple-system,system-ui,sans-serif;
  color:rgba(255,255,255,.78);text-shadow:0 2px 6px rgba(20,40,80,.35);transition:opacity .5s ease,transform .5s ease}

.ap .hintrow{font:400 17px/1.3 -apple-system,system-ui,sans-serif;margin-top:16px;min-height:22px}
.ap .energy{margin-top:12px}
.ap .energy p{margin:0 0 8px;font:400 14px/1 -apple-system,system-ui,sans-serif;color:#5c6672}
.ap .chips{display:flex;gap:9px}
.ap .chips button{font:600 14px/1 -apple-system,system-ui,sans-serif;background:#fff;border:1px solid #e2e6eb;border-radius:10px;padding:10px 18px;cursor:pointer}

.ap .slots{display:flex;gap:30px;margin-top:16px}
.ap .slot{display:flex;align-items:center;gap:8px;font:600 12.5px/1 -apple-system,system-ui,sans-serif;color:#8a94a0}
.ap .slot i{width:13px;height:13px;border-radius:50%;border:2px solid #d3d9e0;display:block;flex:0 0 auto}
.ap .slot.now{color:#6480bf} .ap .slot.now i{border-color:#6480bf}
.ap .slot.done{color:#5c6672} .ap .slot.done i{border-color:transparent}

.ap .card{background:#fff;border:1px solid #e9edf2;border-radius:16px;padding:18px;margin-top:20px;box-shadow:0 1px 2px rgba(12,17,23,.035)}
.ap .kick{font:800 11.5px/1 -apple-system,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#007aff}

.ap .rings{display:flex;justify-content:space-between;padding:18px 6px 14px;gap:2px}
.ap .mx{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;background:none;border:0;cursor:pointer;padding:0}
.ap .gauge{width:74px;height:74px;position:relative}
.ap .gauge svg{transform:rotate(-90deg)}
.ap .num{position:absolute;inset:0;display:grid;place-items:center;font:800 19px/1 -apple-system,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.ap .lab{font:600 12px/1 -apple-system,system-ui,sans-serif;color:#5c6672}
.ap .dlt{font:700 12px/1 -apple-system,system-ui,sans-serif;color:#5c6672;font-variant-numeric:tabular-nums;min-height:12px}

.ap .day{position:relative;overflow:hidden;display:block;width:100%;padding:20px 16px;cursor:pointer;border:1px solid #e9edf2;text-align:left}
.ap .day .pri1{right:-42px;top:-48px;width:200px;height:200px;opacity:.42;animation:bmCw 160s linear infinite}
.ap .day .pri2{right:62px;top:-70px;width:170px;height:170px;opacity:.38;animation:bmPriCcw 240s linear infinite}
.ap .day .txt{position:relative;display:block}
.ap .day h4{font:700 16px/1.3 -apple-system,system-ui,sans-serif;margin:4px 0 0;padding-right:56px}
.ap .day .chev{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#8a94a0;line-height:0}

.ap .rh .head{display:flex;align-items:center;gap:8px}
.ap .rh h4{font:700 17px/1.2 -apple-system,system-ui,sans-serif;margin:0}
.ap .rh .pager{margin-left:auto;display:flex;gap:6px}
.ap .rh .pager i{width:6px;height:6px;border-radius:50%;background:#dfe4ec;display:block}
.ap .rh .pager i.on{background:#4a6fa5}
.ap .rh .lead{font:400 15.5px/1.45 -apple-system,system-ui,sans-serif;color:#5c6672;margin:12px 0 0}
.ap .rh .sub{font:400 14px/1.4 -apple-system,system-ui,sans-serif;color:#8a94a0;margin:8px 0 0}

.ap .flow{display:flex;flex-direction:column;align-items:center;gap:4px;padding:30px 0 16px;background:none;border:0;cursor:pointer;width:100%;
  font:400 14.5px/1.4 -apple-system,system-ui,sans-serif;color:#8a94a0}
.ap .flow svg{color:#b9c2cd}

.ap .chead{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#fff;border-bottom:1px solid #e2e6eb;flex:0 0 auto}
.ap .chead .av{width:36px;height:36px;border-radius:18px;border:2px solid #e2e6eb;background:#f3f6f9;display:grid;place-items:center;flex:0 0 auto}
.ap .chead .ttl{font:700 17px/1.2 -apple-system,system-ui,sans-serif;flex:1;min-width:0;display:flex;align-items:center;gap:5px}
.ap .feed{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px;display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
.ap .feed::-webkit-scrollbar{display:none}
.ap .disc{font:400 11px/15px -apple-system,system-ui,sans-serif;color:#8a94a0;text-align:center;max-width:92%;margin:0 auto}
.ap .begin{font:italic 400 13px/1.4 -apple-system,system-ui,sans-serif;color:#8a94a0;text-align:center;margin:0}
.ap .emptyhint{font:400 13px/1.4 -apple-system,system-ui,sans-serif;color:#8a94a0;text-align:center;margin:0}
.ap .bub{max-width:84%;padding:8px 13px;border-radius:16px;font:400 16px/22px -apple-system,system-ui,sans-serif;animation:bmPop .2s ease}
@keyframes bmPop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ap .bub.them{align-self:flex-start;background:#fff;border:1px solid #e2e6eb;box-shadow:0 1px 2px rgba(12,17,23,.05)}
.ap .bub.me{align-self:flex-end;background:#e7f0ea;border:1px solid #dce9e0}
.ap .bub .who{display:block;font:700 13px/1.3 -apple-system,system-ui,sans-serif;color:#007aff;margin-bottom:2px}
.ap .bub .meta{display:block;text-align:right;font-size:11px;color:#8a94a0;margin-top:3px}
.ap .bub .meta b{font-weight:400;letter-spacing:-1px}
.ap .typing{align-self:flex-start;background:#fff;border:1px solid #e2e6eb;border-radius:16px;padding:12px 15px;display:flex;gap:4px}
.ap .typing i{width:6px;height:6px;border-radius:50%;background:#c3cbd6;animation:bmBlink 1.2s infinite}
.ap .typing i:nth-child(2){animation-delay:.2s} .ap .typing i:nth-child(3){animation-delay:.4s}
@keyframes bmBlink{0%,60%,100%{opacity:.35}30%{opacity:1}}
.ap .comp{flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;padding:8px 12px 16px;background:#f4f6fa}
.ap .comp .plus{background:none;border:0;padding:0;cursor:pointer;color:#5c6672;line-height:0;flex:0 0 auto}
.ap .fieldwrap{flex:1;min-width:0;height:36px;border-radius:14px;background:#fff;border:1px solid #e2e6eb;box-shadow:0 0 6px rgba(12,17,23,.07);display:flex;align-items:center;padding:0 12px}
.ap .fieldwrap input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 15px/1 -apple-system,system-ui,sans-serif;color:#0c1117}
.ap .fieldwrap input::placeholder{color:rgba(138,148,160,.8)}
.ap .tools{display:flex;gap:10px;align-items:center;flex:0 0 auto;color:#5c6672}
.ap .send{width:40px;height:40px;border-radius:20px;background:#007aff;border:0;display:none;place-items:center;cursor:pointer;flex:0 0 auto}
.ap .comp.has .send{display:grid} .ap .comp.has .tools{display:none}

.ap .toast{position:absolute;left:16px;right:16px;bottom:18px;background:rgba(12,17,23,.9);color:#fff;border-radius:12px;
  padding:10px 13px;font:500 13px/1.35 -apple-system,system-ui,sans-serif;opacity:0;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease;pointer-events:none;z-index:5}
.ap .toast.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .ap .cl,.ap .orb.ready,.ap .unread,.ap .spin,.ap .chatv{animation:none}
}

/* ── СТЫКОВКА С НЫНЕШНЕЙ СЕКЦИЕЙ ГЛАВНОЙ ──────────────────────────────────
 * `.app-show-phone` в бандле Astro — это flex-строка под одну картинку. Теперь
 * рядом с телефоном стоят вход в полный рост и честная подпись, поэтому строка
 * становится колонкой. Один селектор, и он живёт здесь, а не в бандле: бандл
 * пересобирается, этот файл — нет.
 */
/* Бандл Astro грузится ПОСЛЕ этого файла, и при равном весе селектора побеждал он:
   телефон оставался в строке и со сдвигом влево на 7 %, который был нужен картинке.
   Поэтому здесь вес выше на один класс — правило переживёт и пересборку бандла. */
.app-show-grid .app-show-phone{flex-direction:column;align-items:center;justify-content:center;transform:none}