/* Self-hosted fonts (latin) — keeps the app fully offline */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/fraunces-300.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/fraunces-italic-400.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/hanken-300.woff2") format("woff2")}

:root{
  /* dawn (default — Android) */
  --ink:#3c4954; --ink-soft:#46535e; --soft:#8a98a3; --wind-rgb:74,92,106; --line:78,96,110;
  --sky:
    radial-gradient(120% 80% at 50% 18%, #fbf3ec 0%, rgba(251,243,236,0) 55%),
    radial-gradient(140% 70% at 50% 108%, #c5d8e6 0%, rgba(197,216,230,0) 60%),
    linear-gradient(176deg, #dfeaf1 0%, #eef1ec 46%, #f6efe9 100%);
  --presence:radial-gradient(circle,rgba(255,253,249,.92),rgba(243,236,228,.22) 52%,rgba(243,236,228,0) 72%);
  --grain-blend:soft-light; --grain-op:.5;
  --serif:"Fraunces",Georgia,serif; --sans:"Hanken Grotesk",ui-sans-serif,-apple-system,sans-serif;
}
/* dusk (iOS + web) */
[data-platform="ios"], [data-mode="meeting"]{
  --ink:#f1f4f8; --ink-soft:#e9eef3; --soft:#94a3b1; --wind-rgb:200,216,232; --line:160,180,200;
  --sky:
    radial-gradient(80% 50% at 50% 38%, rgba(180,200,220,.16), rgba(180,200,220,0) 60%),
    radial-gradient(120% 60% at 50% 112%, #3a4a52 0%, rgba(58,74,82,0) 55%),
    linear-gradient(178deg,#161e2a 0%,#212c3a 48%,#2b2630 100%);
  --presence:radial-gradient(circle,rgba(228,238,248,.9),rgba(150,178,205,.28) 55%,rgba(150,178,205,0) 74%);
  --grain-blend:overlay; --grain-op:.34;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink-soft);overflow:hidden;background:var(--sky);
  -webkit-tap-highlight-color:transparent;user-select:none}

#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.bloom{position:fixed;left:50%;top:34%;width:560px;height:560px;transform:translate(-50%,-50%);z-index:1;
  pointer-events:none;filter:blur(2px);transition:opacity 1.2s,top 1.4s;
  background:radial-gradient(circle,rgba(255,252,247,.6),rgba(255,252,247,0) 62%)}
[data-platform="ios"] .bloom,[data-mode="meeting"] .bloom{background:radial-gradient(circle,rgba(190,212,235,.28),rgba(190,212,235,0) 62%)}
.grain{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>")}

#app{position:relative;z-index:3;height:100%;display:grid;place-items:center;padding:env(safe-area-inset-top) 1.5rem env(safe-area-inset-bottom)}
.screen{display:none;flex-direction:column;align-items:center;text-align:center}
.screen.is-active{display:flex}

/* ---------- OS chrome (phones only) ---------- */
#chrome{display:none}
[data-mode="call"] #chrome{display:block}
.statusbar{position:fixed;top:0;left:0;right:0;height:30px;z-index:6;display:flex;align-items:center;
  justify-content:space-between;padding:0 22px;font-size:.76rem;font-weight:400;color:var(--ink);opacity:.7}
.cutout{position:fixed;z-index:6;left:50%;transform:translateX(-50%);background:#000}
[data-skin="ios-island"] .cutout{top:11px;width:118px;height:34px;border-radius:20px}
[data-skin="ios-notch"] .cutout{top:0;width:164px;height:30px;border-radius:0 0 18px 18px}
[data-skin="ios-se"] .cutout{display:none}
[data-platform="android"] .cutout{top:9px;width:10px;height:10px;border-radius:50%}        /* punch-hole */
[data-skin="oneui"] .cutout{top:11px}
[data-skin="ios-se"] .statusbar{font-weight:600}

/* ---------- Idle (shared) ---------- */
.eyebrow{font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--soft);margin-bottom:1.1rem;
  opacity:0;animation:rise 1.6s .15s cubic-bezier(.2,.7,.2,1) forwards}
.wordmark{font-family:var(--serif);font-weight:300;font-size:clamp(2.3rem,11vw,3rem);line-height:1.05;color:var(--ink);
  opacity:0;animation:rise 1.6s .3s cubic-bezier(.2,.7,.2,1) forwards}
.wordmark em{font-style:italic;font-weight:400}
.idle-orb{margin:2.2rem 0;width:170px;height:170px;border-radius:50%;background:var(--presence);
  box-shadow:0 14px 50px rgba(120,150,170,.22);animation:swell 6s ease-in-out infinite}
[data-platform="ios"] .idle-orb,[data-mode="meeting"] .idle-orb{box-shadow:0 0 70px rgba(160,195,225,.32)}
.lead{font-family:var(--serif);font-weight:300;font-style:italic;font-size:1.15rem;color:var(--soft);
  opacity:0;animation:rise 1.6s .7s cubic-bezier(.2,.7,.2,1) forwards}
.fine{display:inline-block;font-size:.7rem;font-weight:300;letter-spacing:.15em;text-transform:uppercase;color:var(--soft);margin-top:.7rem;
  text-decoration:none;border-bottom:1px solid rgba(var(--line),.25);padding-bottom:2px;
  opacity:0;animation:rise 1.6s 1s cubic-bezier(.2,.7,.2,1) forwards}
.fine:hover{color:var(--ink)}
footer{position:fixed;left:0;right:0;bottom:calc(1.1rem + env(safe-area-inset-bottom));text-align:center;z-index:5}

/* Call button — skinned per platform */
.call{position:relative;margin-top:2.6rem;cursor:pointer;color:var(--ink);font-family:var(--sans);
  opacity:0;animation:rise 1.6s 1.3s cubic-bezier(.2,.7,.2,1) forwards;transition:transform .3s,background .4s}
.call:active{transform:scale(.97)}
/* material: dark circular FAB with phone glyph */
[data-skin="material"] .call,[data-skin="pixel"] .call,[data-skin="oneui"] .call{
  width:74px;height:74px;border-radius:50%;font-size:0;background:#42535f;color:#fff;
  box-shadow:0 10px 30px rgba(50,70,85,.4)}
[data-skin="material"] .call::before,[data-skin="pixel"] .call::before,[data-skin="oneui"] .call::before,
[data-platform="ios"] .call::before{
  content:"";position:absolute;inset:0;background:center/30px no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/></svg>")}
/* pixel: Material You wide tonal pill */
[data-skin="pixel"] .call{width:200px;height:64px;border-radius:999px;background:#3f5b6b}
/* oneui: large soft circle */
[data-skin="oneui"] .call{width:84px;height:84px;background:#4a5a66}
/* ios: frosted glass circle */
[data-platform="ios"] .call{width:78px;height:78px;border-radius:50%;font-size:0;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(16px);
  box-shadow:0 0 40px rgba(190,215,240,.25)}
[data-platform="ios"] .call::before{filter:none}
/* fallback / web idle: airy outlined pill with the word "Call" */
/* ask-whom overlay (shown on Call, all skins) */
.ask{position:fixed;inset:0;z-index:20;display:none;place-items:center;
  background:rgba(8,12,18,.55);backdrop-filter:blur(10px)}
.ask.is-open{display:grid}
#ask>div{display:flex;flex-direction:column;align-items:center;gap:1.6rem;padding:2.4rem;text-align:center}
.ask-q{font-family:var(--serif);font-weight:300;font-size:1.3rem;color:var(--ink)}
.who{width:min(80vw,320px);text-align:center;background:transparent;color:var(--ink);
  font-family:var(--serif);font-weight:300;font-size:1.15rem;border:0;border-bottom:1px solid rgba(var(--line),.45);
  padding:.5rem .2rem;outline:none;transition:border-color .3s}
.who::placeholder{color:var(--soft);opacity:.6;font-style:italic}
.who:focus{border-color:rgba(var(--line),.9)}
.ask-go{margin-top:.2rem;cursor:pointer;color:var(--ink);font-family:var(--sans);font-weight:300;font-size:.9rem;
  letter-spacing:.22em;text-transform:uppercase;padding:.9rem 2.2rem;border:1px solid rgba(var(--line),.4);
  border-radius:999px;background:rgba(255,255,255,.06);transition:background .25s}
.ask-go:hover{background:rgba(255,255,255,.13)}

/* who-you-called label, shown in-call */
.callee{position:absolute;top:9%;font-family:var(--serif);font-weight:300;font-size:1.4rem;color:var(--ink);letter-spacing:.02em}

/* optional in-call photo: fills the avatar, hides the silhouette. Call keeps running. */
.vc-avatar.has-photo,.presence.has-photo{background-size:cover;background-position:center}
.vc-avatar.has-photo svg{display:none}

[data-mode="meeting"] .call{padding:1.1rem 0;width:200px;font-weight:300;font-size:1rem;letter-spacing:.32em;
  text-transform:uppercase;border:1px solid rgba(var(--line),.4);border-radius:999px;background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);margin-top:2.4rem}

/* ---------- In-call (phones) ---------- */
#call-screen{position:absolute;inset:0;justify-content:center}
.presence{position:absolute;left:50%;top:46%;width:300px;height:300px;transform:translate(-50%,-50%) scale(.9);
  z-index:-1;border-radius:50%;opacity:0;background:var(--presence);transition:opacity 1.4s}
#call-screen.is-active .presence{opacity:1}
/* Ringing: gentle pulse on the 3s ringback cadence (chime = first third) */
.is-ringing .presence{animation:ring-pulse 3s ease-in-out infinite}
.is-ringing .vc-avatar{animation:ring-pulse-a 3s ease-in-out infinite}
@keyframes ring-pulse{0%,40%,100%{transform:translate(-50%,-50%) scale(.9)}18%{transform:translate(-50%,-50%) scale(.99)}}
@keyframes ring-pulse-a{0%,40%,100%{transform:scale(1)}18%{transform:scale(1.06)}}
/* Dialing vs connected: while ringing the avatar is dim behind expanding sonar
   rings and only End is offered; on connect the rings stop, the avatar wakes,
   and the rest of the controls fade in. */
.is-ringing .vc-avatar,#call-screen.is-ringing .presence{opacity:.55}
.vc-avatar{position:relative;transition:opacity .8s}
.vc-avatar::before{content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid rgba(var(--line),.55);opacity:0;pointer-events:none}
.is-ringing .vc-avatar::before{animation:sonar 3s ease-out infinite}
@keyframes sonar{0%{transform:scale(1);opacity:.8}60%{transform:scale(1.65);opacity:0}100%{opacity:0}}
.is-ringing .vbtn:not(.end),.is-ringing .controls .btn:not(.end){opacity:0;pointer-events:none}
.vbtn,.controls .btn{transition:opacity .6s,background .3s,color .3s,transform .3s}
.hint{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.05rem;color:var(--soft);
  position:absolute;top:14%;opacity:0;animation:fadein 2.4s 1s forwards}
.controls{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 3rem);left:0;right:0;display:flex;
  justify-content:center;align-items:center;gap:1.4rem;z-index:5}
.btn{cursor:pointer;border-radius:999px;backdrop-filter:blur(8px);transition:transform .3s,background .3s,color .3s;
  font-family:var(--sans);font-weight:300;letter-spacing:.22em;text-transform:uppercase;font-size:.8rem}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px}
.btn.end{color:var(--ink);padding:1.05rem 2.4rem;background:rgba(127,140,152,.16);border:1px solid rgba(var(--line),.4)}
.mute{width:58px;height:58px;display:grid;place-items:center;color:var(--soft);background:transparent;border:1px solid rgba(138,152,163,.4)}
.mute[aria-pressed="true"]{background:rgba(138,152,163,.18);color:var(--ink)}

/* ---------- In-meeting (web / blank video-call UI) ---------- */
#meeting-screen{position:absolute;inset:0;justify-content:center;align-items:center;gap:1.4rem;padding:0}
.vc-stage{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.4rem}
.vc-avatar{width:140px;height:140px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:2px solid rgba(var(--line),.4);color:var(--soft);
  box-shadow:0 0 90px rgba(160,195,225,.25);transform:scale(.95)}
.vc-avatar svg{width:74px;height:74px}
.vc-name{font-family:var(--serif);font-weight:300;font-size:1.2rem;color:var(--ink);letter-spacing:.03em}
.vc-status{font-family:var(--serif);font-style:italic;font-weight:300;font-size:.95rem;color:var(--soft);min-height:1.3em}
.vc-bar{display:flex;justify-content:center;gap:1.1rem;padding:1.6rem;width:100%}
.vbtn{width:54px;height:54px;display:grid;place-items:center;cursor:pointer;border:0;border-radius:50%;
  color:var(--ink);background:rgba(255,255,255,.09);transition:.2s}
.vbtn svg{width:24px;height:24px}
.vbtn:hover{background:rgba(255,255,255,.16)}
.vbtn[aria-pressed="true"]{background:rgba(150,170,190,.3)}
.vbtn.end{background:#d65a5a;color:#fff}.vbtn.end:hover{background:#c44b4b}

/* ---------- Ending (shared) ---------- */
.msg{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.5rem;color:var(--soft);animation:breathe 5s ease-in-out forwards}

@keyframes rise{from{opacity:0;transform:translateY(10px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes swell{0%,100%{transform:scale(.96);opacity:.9}50%{transform:scale(1.05);opacity:1}}
@keyframes fadein{to{opacity:.85}}
@keyframes breathe{0%{opacity:0;letter-spacing:.16em;filter:blur(4px)}35%{opacity:.9;letter-spacing:.01em;filter:none}80%{opacity:.9}100%{opacity:.75}}
@media (prefers-reduced-motion:reduce){
  .eyebrow,.wordmark,.lead,.fine,.call,.hint,.msg{animation-duration:.01ms;animation-delay:0ms;opacity:1}
  .idle-presence,.swell,.is-ringing .presence,.is-ringing .vc-avatar,.is-ringing .vc-avatar::before{animation:none}
}