/* ============================================================================
   LinkkWinkk — demo app shell
   Real app, not screenshots. Full viewport, no phone chrome, safe-area aware.
   Depends on ../system/linkkwinkk.css for tokens + components.
   ========================================================================== */

html,body{height:100%;overflow:hidden;background:var(--paper);overscroll-behavior:none}
body{position:fixed;inset:0;-webkit-user-select:none;user-select:none}

/* ── viewport --------------------------------------------------------- */
#app{position:fixed;inset:0;overflow:hidden;
     --safeT:env(safe-area-inset-top,0px);
     --safeB:env(safe-area-inset-bottom,0px)}

.view{position:absolute;inset:0;display:flex;flex-direction:column;
      background:var(--paper);will-change:transform,opacity;
      padding-top:var(--safeT);
      transform:translateZ(0)}
.view.dark{background:var(--teal-ink)}

/* ── transitions ------------------------------------------------------- */
/* push: incoming slides from the right, outgoing parallaxes left + dims   */
@keyframes pushIn   {from{transform:translateX(100%)}            to{transform:none}}
@keyframes pushOut  {from{transform:none}                        to{transform:translateX(-24%);filter:brightness(.82)}}
@keyframes popIn    {from{transform:translateX(-24%);filter:brightness(.82)} to{transform:none;filter:none}}
@keyframes popOut   {from{transform:none}                        to{transform:translateX(100%)}}
/* sheet: rises from the bottom                                            */
@keyframes sheetIn  {from{transform:translateY(100%)}            to{transform:none}}
@keyframes sheetOut {from{transform:none}                        to{transform:translateY(100%)}}
/* tabs: crossfade with a whisper of lift                                  */
@keyframes fadeIn   {from{opacity:0;transform:translateY(8px)}   to{opacity:1;transform:none}}
@keyframes fadeOut  {from{opacity:1}                             to{opacity:0}}

.view.push-in  {animation:pushIn   .34s cubic-bezier(.32,.72,0,1) both}
.view.push-out {animation:pushOut  .34s cubic-bezier(.32,.72,0,1) both}
.view.pop-in   {animation:popIn    .30s cubic-bezier(.32,.72,0,1) both}
.view.pop-out  {animation:popOut   .30s cubic-bezier(.32,.72,0,1) both}
.view.sheet-in {animation:sheetIn  .38s cubic-bezier(.32,.72,0,1) both}
.view.sheet-out{animation:sheetOut .30s cubic-bezier(.4,0,1,1)    both}
.view.fade-in  {animation:fadeIn   .26s var(--ease) both}
.view.fade-out {animation:fadeOut  .18s var(--ease) both}
.view.hidden{display:none}

@media (prefers-reduced-motion:reduce){
  .view[class*="-in"],.view[class*="-out"]{animation-duration:.01s}
}

/* content scrolls; chrome does not */
.vscroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.vscroll::-webkit-scrollbar{display:none}
.vpad{padding:0 var(--s5)}
.vbottom{flex:none;padding:var(--s3) var(--s5) calc(var(--s5) + var(--safeB))}
.tabs{padding-bottom:calc(var(--s3) + var(--safeB))}

/* ── splash ------------------------------------------------------------ */
#splash{position:fixed;inset:0;z-index:100;background:var(--teal-ink);
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s5);
        transition:opacity .5s var(--ease),visibility .5s}
#splash.gone{opacity:0;visibility:hidden}
.smark{position:relative;width:104px;height:64px}
.smark i{position:absolute;top:0;width:64px;height:64px;border-radius:50%;border:7px solid;display:block}
.smark i.l{left:0;border-color:var(--teal);animation:smL .7s var(--ease) both}
.smark i.r{right:0;border-color:var(--coral);animation:smR .7s var(--ease) both}
@keyframes smL{from{transform:translateX(-26px);opacity:0}to{transform:none;opacity:1}}
@keyframes smR{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
.smark b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);
  width:11px;height:11px;border-radius:50%;background:var(--on-dark);
  box-shadow:0 0 0 5px rgba(251,247,244,.14),0 0 24px 4px rgba(244,81,44,.7);
  animation:smP .45s .62s var(--pop) both}
@keyframes smP{to{transform:translate(-50%,-50%) scale(1)}}
.swd{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.02em;
     color:var(--on-dark);animation:fadeIn .5s .85s both}
.swd em{font-style:normal;color:var(--coral)}
.sbarline{width:150px;height:3px;border-radius:2px;background:rgba(251,247,244,.16);
     overflow:hidden;position:relative;animation:fadeIn .4s 1s both}
.sbarline i{position:absolute;inset:0;width:38%;border-radius:2px;background:var(--coral);
     animation:travel 1.15s var(--ease) infinite}
@keyframes travel{0%{left:-38%}100%{left:100%}}

/* ── real inputs ------------------------------------------------------- */
.inp{width:100%;min-height:44px;border:none;outline:none;background:transparent;
     font-family:var(--body);font-size:var(--t-l);font-weight:600;color:var(--ink);
     -webkit-user-select:text;user-select:text}
.inp::placeholder{color:var(--faint);font-weight:500}
.field.live{cursor:text;transition:box-shadow .2s var(--ease)}
.field.live:focus-within{box-shadow:inset 0 0 0 2px var(--teal)}
.field.live.bad{box-shadow:inset 0 0 0 2px var(--danger)}
.prefix{font-size:var(--t-l);font-weight:600;color:var(--muted);flex:none;margin-right:var(--s2)}

.otpwrap{position:relative}
.otpwrap input{position:absolute;inset:0;opacity:0;font-size:16px;
  -webkit-user-select:text;user-select:text}
.otp i{transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.otp i.fill{box-shadow:inset 0 0 0 2px var(--teal);transform:translateY(-2px)}
.otp i.bad{box-shadow:inset 0 0 0 2px var(--danger);color:var(--danger);animation:shake .4s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.caret{display:inline-block;width:2px;height:26px;background:var(--teal);
  animation:blink 1s steps(2) infinite;vertical-align:middle}
@keyframes blink{50%{opacity:0}}

/* composer input */
.composer .inp{min-height:48px}

/* ── toast ------------------------------------------------------------- */
#toast{position:fixed;left:50%;bottom:calc(96px + var(--safeB));transform:translate(-50%,14px);
  background:var(--teal-ink);color:var(--on-dark);border-radius:var(--rp);
  padding:11px 18px;font-size:var(--t-s);font-weight:600;z-index:90;
  opacity:0;pointer-events:none;transition:opacity .26s var(--ease),transform .26s var(--ease);
  box-shadow:var(--e2);max-width:88vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast b{color:var(--coral)}

/* ── press feedback ---------------------------------------------------- */
.btn,.act,.chip,.pick,.tab,.iconbtn,.row,.card,.conv,.srow,.metc{
  -webkit-tap-highlight-color:transparent}
.btn:active,.act:active,.chip:active{transform:scale(.97)}
.pick:active,.row:active,.card.tapme:active{transform:scale(.99)}
.btn,.act,.chip,.pick,.row,.card.tapme{transition:transform .12s var(--ease),
  background .18s var(--ease),box-shadow .18s var(--ease)}

/* ── wink stage (live, not a screenshot) -------------------------------- */
.winkstage{position:relative;width:230px;height:150px;margin:0 auto var(--s5)}
.wring{position:absolute;top:0;width:150px;height:150px;border-radius:50%;border:15px solid}
.wring.you{left:0;border-color:var(--teal)}
.wring.them{right:0;border-color:var(--coral)}
.wring .fc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:96px;height:96px;border-radius:50%;overflow:hidden}
.wspark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);
  width:17px;height:17px;border-radius:50%;background:var(--on-dark);z-index:3;
  box-shadow:0 0 0 7px rgba(251,247,244,.14),0 0 34px 6px rgba(244,81,44,.75)}
.view.playing .wring.you {animation:slideL .8s var(--ease) both}
.view.playing .wring.them{animation:slideR .8s var(--ease) both}
.view.playing .wspark    {animation:smP .5s .78s var(--pop) both}
.view.playing .wfade     {animation:fadeIn .55s 1s both}
@keyframes slideL{from{transform:translateX(-46px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideR{from{transform:translateX(46px);opacity:0}to{transform:none;opacity:1}}

/* map line draw-in */
.view.playing .ln.draw{stroke-dasharray:520;stroke-dashoffset:520;
  animation:draw 1.1s var(--ease) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.view.playing .newnode{animation:smP .5s .75s var(--pop) both}

/* typing indicator */
.typing{display:inline-flex;gap:4px;align-items:center;padding:var(--s3) var(--s4)}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--faint);animation:bob 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}

/* chat */
.thread{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s3);
  padding:var(--s4) var(--s5) var(--s3);overflow-y:auto}
.bub{max-width:78%;padding:var(--s3) var(--s4);border-radius:var(--r3);
  font-size:var(--t-m);line-height:1.45;animation:fadeIn .3s var(--ease) both}
.bub.me{align-self:flex-end;background:var(--teal-deep);color:#fff;border-bottom-right-radius:6px}
.bub.them{align-self:flex-start;background:var(--sheet);box-shadow:var(--e1);border-bottom-left-radius:6px}
.bub.sug{align-self:flex-start;background:transparent;box-shadow:inset 0 0 0 1px var(--line);
  border-style:dashed;color:var(--teal-deep);font-weight:600;cursor:pointer}
.daysep{align-self:center;font-size:var(--t-xs);font-weight:700;color:var(--muted);
  background:var(--sunk);padding:4px 12px;border-radius:var(--rp)}
.composer{flex:none;display:flex;gap:var(--s2);align-items:center;
  padding:var(--s3) var(--s5) calc(var(--s4) + var(--safeB))}
.composer .box{flex:1;min-height:48px;border-radius:var(--rp);background:var(--sheet);
  box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:center;padding:0 var(--s4)}
.composer .snd{width:48px;height:48px;border-radius:50%;background:var(--teal);
  display:grid;place-items:center;flex:none}
.composer .snd svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}

/* met rail + conversations (from decks) */
.met{display:flex;gap:var(--s3);overflow-x:auto;padding:0 var(--s5) var(--s2)}
.met::-webkit-scrollbar{display:none}
.metc{flex:none;width:104px;background:var(--sheet);border-radius:var(--r3);
      box-shadow:var(--e1);padding:var(--s3);text-align:center}
.conv{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s5)}
.conv + .conv{box-shadow:inset 0 1px 0 var(--line)}
.unread{width:9px;height:9px;border-radius:50%;background:var(--coral);flex:none}
.pick{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);
      background:var(--sheet);border-radius:var(--r3);box-shadow:var(--e1)}
.pick.on{background:var(--teal-tint);box-shadow:inset 0 0 0 2px var(--teal)}
.pick .ic{width:44px;height:44px;border-radius:var(--r2);background:var(--sunk);
      display:grid;place-items:center;flex:none;color:var(--teal-deep)}
.pick.on .ic{background:var(--teal);color:#fff}
.radio{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line);
      flex:none;margin-top:2px;display:grid;place-items:center}
.pick.on .radio{background:var(--teal);box-shadow:none}
.radio svg{width:14px;height:14px;stroke:#fff;stroke-width:3;fill:none;opacity:0}
.pick.on .radio svg{opacity:1}
.srow{display:flex;gap:var(--s3);align-items:center;padding:var(--s4) 0}
.srow + .srow{box-shadow:inset 0 1px 0 var(--line)}
.sic{width:44px;height:44px;border-radius:var(--r2);display:grid;place-items:center;flex:none}
.stars{display:flex;gap:var(--s2);justify-content:center}
.stars button{width:48px;height:48px;display:grid;place-items:center}
.stars svg{width:36px;height:36px;stroke:var(--teal);stroke-width:1.6;fill:none;
  transition:fill .18s var(--ease),transform .18s var(--pop)}
.stars button.on svg{fill:var(--teal);transform:scale(1.08)}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
   stroke-linecap:round;stroke-linejoin:round}

/* floating screen index */
#idxBtn{position:fixed;right:14px;bottom:calc(88px + var(--safeB,0px));width:46px;height:46px;
  border-radius:50%;border:none;background:rgba(11,59,59,.9);color:#FBF7F4;font-size:19px;
  z-index:80;box-shadow:var(--e2);display:grid;place-items:center;backdrop-filter:blur(8px)}
#idxBtn:active{transform:scale(.93)}

/* install prompt */
#installBtn{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + var(--safeB,0px));
  z-index:95;border:none;border-radius:var(--rp);background:var(--coral-deep);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:15px;padding:14px 26px;
  box-shadow:0 8px 28px rgba(244,81,44,.4);animation:fadeIn .4s var(--ease) both}
#installBtn[hidden]{display:none}
#installBtn:active{transform:translateX(-50%) scale(.96)}

/* menu clearance — nothing should sit under the floating index button */
.view .vscroll > :last-child{scroll-margin-bottom:64px}
.view .vscroll{padding-bottom:var(--s6)}
.view .empty{padding-bottom:var(--s7)}