/* Page, phone frame and lock screen. Yelumio v2 «Горизонт · Предрассветная степь» (Dawn),
   tokens 1:1 from studio/css/dawn.css. Coral = actions, lilac = data/links, sun = mark only (≤5%). */
:root{
  --night:#171A3F; --dusk:#232861; --dusk-2:#2B2F6E; --ink:#12142E;
  --mist:#EEF0F7; --mist-2:#E2E5F1; --muted-d:#AEB3D9;
  --coral:#F2775A; --apricot:#F9A77E; --plum:#8A5687; --lilac:#8C9BE6; --lilac-2:#A9B4EE; --lilac-ink:#4B56B8; --sun:#F5C518;
  --dawn-sky:linear-gradient(180deg,#171A3F 0%,#2B2F6E 42%,#8A5687 76%,#F2775A 93%,#F9A77E 100%);
  --pliant:'Pliant','Golos Text',system-ui,sans-serif;
  --sans:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.32,1.28,.54,1);
  --s:1;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-height:100dvh;display:flex;flex-direction:column;align-items:center;overflow:hidden;
  font:500 15px/1.4 var(--sans);color:var(--mist);-webkit-font-smoothing:antialiased;
  background:var(--dawn-sky);background-color:var(--night);
}
body::before{ /* the sun sitting on the horizon behind the phone */
  content:"";position:fixed;left:50%;bottom:-34vmax;width:60vmax;height:60vmax;margin-left:-30vmax;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(249,167,126,.55) 0,rgba(242,119,90,.28) 30%,rgba(138,86,135,.12) 52%,transparent 70%);
}
body::after{ /* fine grain keeps the gradient from banding */
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* brand */
.brandbar{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:26px 20px 0;height:78px;flex:none}
.brandbar .logo{height:24px;width:auto;display:block}
.brandbar .tag{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d);
  padding:6px 10px;border:1px solid rgba(174,179,217,.24);border-radius:999px}

/* stage + phone */
.stage{position:relative;z-index:1;flex:1;display:grid;place-items:center;width:100%;padding:12px 16px 24px}
.phone{
  position:relative;width:414px;height:868px;padding:12px;border-radius:64px;zoom:var(--s);
  background:linear-gradient(145deg,#3E4275,#12142E 40%,#2B2F6E 70%,#0D0F26);
  box-shadow:
    inset 0 0 0 1.5px rgba(238,240,247,.16),inset 0 0 0 6px #0D0F26,
    0 60px 120px -30px rgba(18,20,46,.85),0 30px 70px -30px rgba(242,119,90,.35);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
  animation:rise .9s var(--ease) both;
}
.phone[data-state=locked]{cursor:pointer}
.phone[data-state=locked]:hover{transform:translateY(-6px)}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98)}}
.island{position:absolute;top:23px;left:50%;width:122px;height:35px;margin-left:-61px;border-radius:20px;background:#000;z-index:30}
.screen{position:relative;width:100%;height:100%;border-radius:52px;overflow:hidden;background:var(--night);isolation:isolate}
.homebar{position:absolute;bottom:20px;left:50%;width:136px;height:5px;margin-left:-68px;border-radius:3px;background:rgba(238,240,247,.7);z-index:30;pointer-events:none}

.statusbar{position:absolute;top:0;left:0;right:0;height:54px;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:4px 34px 0 44px;font:600 16px/1 var(--sans);color:#fff;pointer-events:none}
.sb-icons{display:flex;align-items:center;gap:6px}
.sb-icons svg{fill:#fff}
.batt{width:26px;height:12px;border:1.5px solid rgba(255,255,255,.55);border-radius:4px;padding:1.5px;position:relative}
.batt::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;border-radius:0 1px 1px 0;background:rgba(255,255,255,.55)}
.batt i{display:block;height:100%;width:78%;background:#fff;border-radius:1.5px}

/* lock screen: dawn sky with the sun on the horizon */
.lock{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;padding:70px 16px 44px;overflow:hidden;
  background:var(--dawn-sky);
  transition:transform .7s cubic-bezier(.7,0,.2,1),opacity .5s ease .2s}
.lock-glow{position:absolute;left:50%;bottom:172px;width:560px;height:560px;margin-left:-280px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(249,167,126,.7) 0,rgba(242,119,90,.35) 22%,rgba(138,86,135,.14) 45%,transparent 66%);
  transform:translateY(50%);animation:breathe 6s ease-in-out infinite}
.lock-glow::after{ /* the sun: brand mark colour, tiny share of the screen */
  content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:var(--sun);
  clip-path:inset(0 0 50% 0)}
.lock::after{ /* horizon line */
  content:"";position:absolute;left:0;right:0;bottom:172px;height:1px;background:rgba(238,240,247,.35);pointer-events:none}
@keyframes breathe{50%{opacity:.85}}
.lock-head{position:relative;text-align:center}
.lock-brand{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px}
.lock-brand img{height:14px;width:auto;opacity:.92}
.lock-brand em{font:600 10px/1 var(--sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d)}
.lock-date{font:500 18px/1 var(--sans);color:var(--mist);opacity:.92}
.lock-time{font:700 88px/1.05 var(--pliant);letter-spacing:0;font-stretch:100%;color:var(--mist);margin-top:6px;font-variant-numeric:tabular-nums}
.notes{position:relative;width:100%;margin-top:30px;display:flex;flex-direction:column;gap:8px}
.note{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:22px;text-align:left;
  background:rgba(23,26,63,.55);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:inset 0 0 0 .5px rgba(174,179,217,.22);
  animation:noteIn .7s var(--spring) both}
@keyframes noteIn{from{opacity:0;transform:translateY(-18px) scale(.96)}}
.note .ava{width:38px;height:38px}
.note-b{flex:1;min-width:0}
.note-t{display:flex;justify-content:space-between;gap:8px;font:600 14px/1.2 var(--sans)}
.note-t small{font-weight:500;color:var(--muted-d);font-size:12.5px}
.note-x{font-size:14px;line-height:1.3;color:var(--mist);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.unlock{position:relative;z-index:1;margin-top:auto;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:14px;
  font:600 15px/1 var(--sans);padding:10px 20px}
.unlock span:last-child{
  background:linear-gradient(90deg,rgba(18,20,46,.8) 0%,rgba(18,20,46,.8) 40%,#12142E 50%,rgba(18,20,46,.8) 60%,rgba(18,20,46,.8) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 2.6s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.unlock-bar{width:44px;height:44px;border-radius:50%;background:rgba(18,20,46,.1);box-shadow:inset 0 0 0 1.5px rgba(18,20,46,.35);
  display:grid;place-items:center;animation:nudge 2.6s var(--ease) infinite}
.unlock-bar::before{content:"";width:9px;height:9px;border-left:2.4px solid var(--ink);border-top:2.4px solid var(--ink);transform:translateY(2px) rotate(45deg)}
@keyframes nudge{0%,60%,100%{transform:none}30%{transform:translateY(-6px)}}
.phone[data-state=open] .lock{transform:translateY(-102%);opacity:0;pointer-events:none}

/* phones and narrow screens: the device itself becomes the phone (not in embed — there the iframe is narrow on desktop too) */
@media (max-width:520px),(max-height:560px) and (max-width:900px){
  html:not(.embed) body{background:var(--night)}
  html:not(.embed) body::before,html:not(.embed) body::after,html:not(.embed) .brandbar{display:none}
  html:not(.embed) .stage{padding:0}
  html:not(.embed) .phone{position:fixed;inset:0;width:auto;height:auto;padding:0;border-radius:0;zoom:1;background:var(--night);box-shadow:none;animation:none}
  html:not(.embed) .phone[data-state=locked]:hover{transform:none}
  html:not(.embed) .island,html:not(.embed) .homebar,html:not(.embed) .statusbar{display:none}
  html:not(.embed) .screen{border-radius:0}
  html:not(.embed) .lock{padding-top:calc(env(safe-area-inset-top) + 40px);padding-bottom:calc(env(safe-area-inset-bottom) + 28px)}
  html:not(.embed) .lock-time{font-size:80px}
}

/* embed=1: the framed phone alone on a transparent page, scaled by app.js to the iframe; the site hero is the backdrop */
.embed,.embed body{background:none}
.embed body{min-height:0}
.embed body::before,.embed body::after,.embed .brandbar{display:none}
.embed .stage{padding:6px 4px 40px}
/* a slightly smaller device than the standalone page, so the frame scales it down less and the chat stays readable */
.embed .phone{width:376px;height:790px;box-shadow:
  inset 0 0 0 1.5px rgba(238,240,247,.16),inset 0 0 0 6px #0D0F26,
  0 20px 28px -16px rgba(18,20,46,.8),0 12px 24px -14px rgba(242,119,90,.35)}
/* clip, not hidden: focusing the input must not scroll the screen sideways (the closed chat view waits off-screen to the right) */
.embed .screen{overflow:clip}
/* narrower device: keep «7 мин назад» on one line */
.embed .note-t small{flex:none;white-space:nowrap}
/* let a scroll that reaches the end of the list/chat carry on to the page — the phone must never trap page scroll */
.embed .rows,.embed .wall{overscroll-behavior:auto}
/* iOS zooms the page into any field rendered under 16px: undo the phone scale for the input there (iOS only — Android doesn't zoom) */
.embed .field,.embed .field textarea{min-width:0}
@supports (-webkit-touch-callout:none){
  .embed .field textarea{font-size:calc(16px / var(--s));line-height:calc(20px / var(--s));max-height:calc(104px / var(--s));padding:calc(8px / var(--s)) 12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}