/* Oseyra web app: the same main screen as the Mac app. The mood colour fills the window, her ring sits in the
   middle, her name in script at the top right. The conversation runs down the left and the cursor, microphone and
   plus menu wait at the bottom right, all hidden until the pointer (or a tap) asks for them. */
@font-face{font-family:"Allura";src:url("fonts/Allura-Regular.ttf") format("truetype");font-display:swap}
:root{
  --cream:#fbf4e8;
  --mood:#ff3d8b;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.4,0,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--mood);color:var(--cream);font-family:var(--ui);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-radius:6px}
#bg{position:fixed;inset:0;background:var(--mood)}
#ring{position:fixed;inset:0;width:100%;height:100%;transition:transform .5s var(--ease),opacity .4s var(--ease)}
#app{position:fixed;inset:0}
.hide{opacity:0;pointer-events:none}
.fade{transition:opacity .35s var(--ease)}

/* her name */
.name{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(28px + env(safe-area-inset-right,0px));
  font-family:"Allura",cursive;font-size:36px;line-height:1.1;pointer-events:none}

/* status under the ring */
.caption{position:absolute;left:0;right:0;top:calc(50% + 18vmin + 44px);text-align:center;pointer-events:none;
  font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:0 24px;transition:opacity .3s,transform .5s var(--ease)}

/* conversation timeline */
.tl-zone{position:absolute;left:0;top:0;bottom:0;width:150px;z-index:2}
.tl-zone.open{width:min(var(--tlw) + 96px,660px)}
.tl{position:absolute;left:calc(16px + env(safe-area-inset-left,0px));top:16%;height:68%;width:var(--tlw);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;opacity:0;transition:opacity .35s var(--ease)}
.tl::-webkit-scrollbar{display:none}
.tl-zone.open .tl{opacity:1}
.tl-inner{min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:4px 0;position:relative}
.tl-inner::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--lw) - 1px);width:2px;background:var(--cream)}
.row{display:grid;grid-template-columns:var(--lw) var(--rw);align-items:start}
.row .you{display:flex;justify-content:flex-end;gap:8px;text-align:right;font:12px/1.45 var(--mono);opacity:.85}
.row .her{display:flex;gap:8px;font-size:14px;line-height:1.45}
.row .tick{flex:none;width:8px;height:2px;background:var(--cream);margin-top:8px}
.row .txt{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;user-select:text;overflow-wrap:anywhere}

/* cursor, microphone, plus */
.bar{position:absolute;right:0;bottom:0;width:min(700px,100%);display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:40px calc(28px + env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 16px;z-index:3}
.field{position:relative;flex:1;max-width:520px;height:46px;display:flex;align-items:center;cursor:text}
.field input{position:absolute;inset:0;width:100%;height:100%;opacity:.01;border:0;background:transparent;color:transparent;
  font-size:17px;caret-color:transparent;outline:none}
.field .shown{display:flex;align-items:center;gap:2px;min-width:0;max-width:100%;pointer-events:none}
.field .typed{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:clip;direction:rtl;unicode-bidi:plaintext}
.field .caret{flex:none;width:3px;height:24px;border-radius:1.5px;background:var(--cream);animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.icon{width:40px;height:46px;display:grid;place-items:center;flex:none}
.icon svg{width:22px;height:22px;display:block}
.mic.off{opacity:.6}
.mic.rec svg{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.15)}}

/* plus menu */
.menu{position:absolute;right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:6;
  min-width:250px;padding:6px;border-radius:14px;background:rgba(30,10,20,.42);backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 18px 50px rgba(0,0,0,.25)}
.menu button{display:flex;justify-content:space-between;gap:16px;width:100%;text-align:left;padding:9px 12px;border-radius:9px;font-size:14px}
.menu button:hover,.menu button:focus-visible{background:rgba(255,255,255,.14);outline:none}
.menu hr{border:0;border-top:1px solid rgba(255,255,255,.18);margin:5px 6px}
.menu .on::after{content:"✓"}

/* sheets: memories, journal, settings */
.scrim{position:fixed;inset:0;z-index:8;background:rgba(20,5,12,.28);display:grid;place-items:center;padding:16px}
.sheet{width:min(520px,100%);max-height:min(720px,calc(100dvh - 32px));overflow:auto;border-radius:18px;padding:22px 22px 18px;
  background:rgba(30,10,20,.5);backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);
  box-shadow:0 24px 70px rgba(0,0,0,.3)}
.sheet h2{margin:0 0 4px;font-size:20px}
.sheet .sub{margin:0 0 16px;font-size:13px;opacity:.8}
.sheet ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sheet li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:14px;line-height:1.45}
.sheet li small{display:block;opacity:.7;font-size:12px;margin-top:2px}
.sheet .x{font-size:12px;opacity:.75;text-decoration:underline;text-underline-offset:3px;flex:none}
.sheet label{display:grid;gap:6px;margin:0 0 14px;font-size:13px}
.sheet input,.sheet select{font:inherit;font-size:16px;color:var(--cream);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  border-radius:10px;padding:9px 12px}
.sheet select option{color:#111}
.sheet .row2{display:flex;gap:10px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}
.btn{min-height:40px;padding:0 18px;border-radius:999px;border:1.5px solid var(--cream);font-weight:600;font-size:14px}
.btn.fill{background:var(--cream);color:#2a0a18}
.btn.danger{border-color:rgba(255,255,255,.6)}
.empty{opacity:.75;font-size:14px;margin:8px 0}

/* notices and confirmations */
.notice{position:absolute;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:5;width:min(560px,calc(100% - 32px));
  padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.45;background:rgba(30,10,20,.42);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.confirm{position:absolute;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:5;width:min(520px,calc(100% - 32px));
  padding:16px;border-radius:14px;background:rgba(30,10,20,.45);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.confirm p{margin:0 0 6px;font-size:14px;line-height:1.45;white-space:pre-wrap}
.confirm .title{font-weight:700}

/* pairing, offline and setup screens */
.center{position:absolute;left:50%;bottom:calc(10vh + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(440px,calc(100% - 32px));
  text-align:center;display:grid;gap:12px;justify-items:center}
.center h1{margin:0;font-size:22px;font-weight:700}
.center p{margin:0;font-size:15px;line-height:1.5;opacity:.92;text-wrap:pretty}
.center ol{text-align:left;margin:0;padding-left:1.2em;font-size:15px;line-height:1.6}
.center .small{font-size:12px;opacity:.75}

@media (max-width:760px){
  .name{font-size:30px}
  .bar{padding-left:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* settings, voice designer, teaching */
.sheet.wide{width:min(600px,100%)}
.sheet h3{margin:18px 0 6px;font-size:15px}
.sheet .pair-row{display:flex;gap:10px;align-items:center}
.sheet .pair-row select{flex:1;min-width:0}
.sheet label.check{display:flex;gap:10px;align-items:flex-start;grid-template-columns:none;font-size:14px;cursor:pointer}
.sheet label.check input{margin-top:3px;accent-color:var(--cream);width:16px;height:16px;padding:0}
.designer{margin:0 0 16px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.07)}
.designer summary{cursor:pointer;font-weight:600;font-size:14px;padding:4px 0}
.designer[open] summary{margin-bottom:10px}
.slider{display:grid;gap:2px;margin:0 0 10px;font-size:13px}
.slider div{display:flex;align-items:center;gap:10px}
.slider small{flex:none;width:72px;opacity:.75;font-size:11px}
.slider small:last-child{text-align:right}
.slider input[type=range]{flex:1;min-width:0;accent-color:var(--cream);padding:0;background:none;border:0}
.drop{border:1.5px dashed rgba(255,255,255,.45);border-radius:14px;padding:16px;margin:6px 0 10px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.drop .files{width:100%;margin:0;opacity:.85;overflow-wrap:anywhere}
.working{font-size:13px;opacity:.9;margin:6px 0}
.working::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--cream);margin-right:8px;animation:pulse 1.2s ease-in-out infinite}
.picks li{border-bottom:1px solid rgba(255,255,255,.14)}
.small{font-size:12px;opacity:.8}
.link{text-decoration:underline;text-underline-offset:3px}
.pagelang{font:inherit;font-size:14px;color:var(--cream);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:7px 10px}
.pagelang option{color:#111}
.btn[disabled]{opacity:.45;cursor:default}
[hidden]{display:none!important}

/* Connect, offline and setup screens (from Brian's sketch): the OSEYRA logo top right, the ring in the middle,
   the steps and button to its left, a short line of small print at the bottom left. Phones: ring on top, words below. */
.logo{position:absolute;top:calc(22px + env(safe-area-inset-top,0px));right:calc(28px + env(safe-area-inset-right,0px));z-index:2}
.logo{display:block;padding:6px;margin:-6px;border-radius:8px}
.logo .wm{height:18px;width:auto;display:block;color:var(--cream);transition:opacity .2s}
.logo:hover .wm{opacity:.8}
.footnote{position:absolute;left:calc(16px + env(safe-area-inset-left,0px));right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));margin:0;
  font-size:12px;opacity:.8;text-align:center}
.footnote .link{font-size:12px}
.intro #ring{top:8vh;height:38vh;inset:auto 0 auto 0}
.intro .center{top:47vh;bottom:auto;transform:translateX(-50%);max-height:44vh;overflow:auto;padding-bottom:8px}
.intro .caption{top:auto;bottom:22vh}
@media (min-width:900px){
  .intro #ring{inset:0;top:0;height:100%}
  /* the steps sit just left of the ring, centred on it */
  .intro .center{left:auto;right:calc(50% + 18vmin + 6vw);top:50%;bottom:auto;transform:translateY(-50%);width:min(360px,calc(50vw - 18vmin - 10vw));
    max-height:80vh;text-align:left;justify-items:start}
  .intro .caption{top:calc(50% + 18vmin + 44px);bottom:auto}
  .footnote{left:calc(5vw + env(safe-area-inset-left,0px));right:auto;text-align:left;max-width:40vw}
}