/* Mmory's screens, redrawn in HTML from the SwiftUI source, for the v3 prototypes.
   Every string inside a .screen is one the app renders (UniverseState, ComposerView,
   MemoryValues/DateLabels, ReminderScheduler); only the memory content is ours.
   Proportions: AppStoreAssets/RawScreenshots (1320×2868 = 402×874 pt). 1cqw = 4.02 pt.
   State is data-state on .screen; screen.js adds the motion with GSAP. */

.phone {
  position: relative; width: var(--pw, 300px); aspect-ratio: 1320 / 2868; flex: none;
  border-radius: calc(var(--pw, 300px) * 0.155); padding: calc(var(--pw, 300px) * 0.028);
  background: #0b0b0c; border: 1px solid rgba(237, 235, 230, 0.16);
  box-shadow: 0 0 0 1px #000, 0 40px 120px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.phone > .screen { display: block; width: 100%; height: 100%; border-radius: calc(var(--pw, 300px) * 0.13); }

.screen {
  position: relative; overflow: hidden; container-type: inline-size; color: var(--text);
  font-family: var(--sys); text-align: left; background: #000 url(img/stars.svg) center / 140% auto;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
.screen * { box-sizing: border-box; }

/* status bar (clean: no charging bolt) */
.screen .sb { position: absolute; inset: 0 0 auto; height: 12cqw; display: flex; align-items: center; justify-content: space-between; padding: 2.4cqw 9cqw 0 13cqw; font-weight: 600; font-size: 4.6cqw; letter-spacing: -0.01em; z-index: 6; color: var(--ivory); }
.screen .sb svg { height: 3.6cqw; width: auto; fill: currentColor; }
.screen .sb .icons { display: flex; gap: 1.6cqw; align-items: center; }

/* top bar: + · mmory (or the recording timer) · profile ring */
.screen .bar { position: absolute; top: 15cqw; left: 5cqw; right: 5cqw; height: 9cqw; display: flex; align-items: center; justify-content: center; z-index: 3; }
.screen .bar .plus, .screen .bar .ring { position: absolute; width: 8.4cqw; height: 8.4cqw; border-radius: 50%; border: 1px solid rgba(237,235,230,.22); background: rgba(237,235,230,.06); display: grid; place-items: center; }
.screen .bar .plus { left: 0; font-size: 6cqw; font-weight: 300; line-height: 1; padding-bottom: .5cqw; }
.screen .bar .ring { right: 0; }
.screen .bar .ring::after { content: ""; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--soft); }
.screen .bar .word { font-size: 4.3cqw; font-weight: 500; color: var(--soft); letter-spacing: -0.01em; }
.screen .bar .rec { display: none; width: 100%; justify-content: space-between; align-items: center; padding: 0 17cqw 0 22cqw; font-size: 4.3cqw; font-variant-numeric: tabular-nums; color: var(--soft); }
.screen .bar .rec svg { width: 7cqw; fill: var(--ivory); }

/* the black hole: the app's own BlackHoleMark, feathered into the sky */
.screen .hole { position: absolute; left: 50%; top: 45.5%; width: 72%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 1; will-change: transform; }
.screen .hole img { width: 100%; height: 100%; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.screen .hole::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(150,155,190,.10), transparent 70%); z-index: -1; }
.screen .hole .glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(237,219,184,.35), rgba(237,219,184,0) 70%); opacity: 0; }

/* the light a memory becomes, and the reminder tag that rides beside it */
.screen .orb { position: absolute; left: 50%; top: 45.5%; width: 2.2cqw; height: 2.2cqw; margin: -1.1cqw 0 0 -1.1cqw; border-radius: 50%; background: #fff8ea; box-shadow: 0 0 2cqw 0.8cqw rgba(237,219,184,.75), 0 0 6cqw 2cqw rgba(237,219,184,.25); opacity: 0; z-index: 2; pointer-events: none; }
.screen .tag { position: absolute; left: 50%; top: 45.5%; font-size: 3.2cqw; color: rgba(237,235,230,.8); white-space: nowrap; opacity: 0; z-index: 2; transform: translate(-50%, -50%); pointer-events: none; }

.screen .under { position: absolute; left: 8cqw; right: 8cqw; top: 59%; text-align: center; z-index: 2; }
.screen .prompt { font-size: 4.2cqw; color: var(--text); }
.screen .prompt small { display: block; margin-top: 2.4cqw; font-size: 3.1cqw; color: var(--faint); }
.screen .answer { font-size: 4.6cqw; line-height: 1.35; color: var(--text); text-wrap: balance; }
.screen .copy { display: inline-block; margin-top: 3.2cqw; padding: 1cqw 3cqw; font-size: 3cqw; border-radius: 99px; border: 1px solid rgba(237,235,230,.16); color: var(--soft); }
.screen .pointer { margin-top: 3.4cqw; font-size: 2.9cqw; color: var(--soft); }
.screen .toast { font-size: 3.4cqw; color: var(--champagne); margin-top: 3cqw; }
.screen .foot { position: absolute; bottom: 4.5%; left: 0; right: 0; text-align: center; font-size: 2.9cqw; color: var(--faint); z-index: 2; }

/* ComposerView: "Add to mmory", opened from + */
.screen .cwrap { position: absolute; inset: 0; z-index: 5; }
.screen .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 4; }
.screen .composer {
  position: absolute; left: 4cqw; top: 26cqw; width: 85.8cqw; padding: 5cqw; border-radius: 6cqw; z-index: 5;
  background: rgba(40, 40, 44, .72); border: 1px solid rgba(237,235,230,.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  transform-origin: 6% 0;
}
.screen .composer .head { display: flex; justify-content: space-between; font-size: 3.2cqw; font-weight: 500; color: var(--soft); }
.screen .composer .head span:last-child { color: var(--faint); }
.screen .composer .field { position: relative; min-height: 24cqw; margin-top: 3.5cqw; font-size: 5cqw; line-height: 1.3; color: var(--text); }
.screen .composer .field .ph { color: var(--faint); }
.screen .composer .field .caret { display: inline-block; width: .5cqw; height: 5.4cqw; margin-left: .3cqw; vertical-align: -1cqw; background: var(--champagne); }
.screen .composer textarea {
  width: 100%; min-height: 24cqw; margin: 0; padding: 0; border: 0; resize: none; background: transparent; outline: none;
  color: var(--text); caret-color: var(--champagne); font: inherit; font-size: max(16px, 5cqw); line-height: 1.3;
  -webkit-user-select: text; user-select: text;
}
.screen .composer textarea::placeholder { color: var(--faint); }
.screen .composer .foot2 { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; margin-top: 3cqw; }
.screen .composer .hint { font-size: 3cqw; line-height: 1.35; color: var(--faint); }
.screen .composer .save { flex: none; padding: 1.8cqw 4.4cqw; border-radius: 99px; font-size: 3.6cqw; font-weight: 600; background: rgba(237,235,230,.9); color: #000; border: 0; }
.screen .composer .save[disabled] { opacity: .5; }

/* A reminder going off: the Lock Screen at the time that was asked for */
.screen .lock { position: absolute; inset: 0; z-index: 5; background: #050507 url(img/stars.svg) center / 140% auto; text-align: center; }
.screen .lock .date { margin-top: 24cqw; font-size: 4.8cqw; font-weight: 600; color: rgba(237,235,230,.85); }
.screen .lock .clock { font-size: 22cqw; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: rgba(237,235,230,.92); }
.screen .note {
  position: absolute; left: 3.5cqw; right: 3.5cqw; top: 112cqw; display: grid; grid-template-columns: 9.5cqw 1fr auto; gap: 0 3cqw; align-items: center;
  padding: 3.4cqw 4cqw; border-radius: 6cqw; text-align: left;
  background: rgba(60, 60, 66, .62); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.screen .note img { grid-row: span 2; width: 9.5cqw; height: 9.5cqw; border-radius: 2.2cqw; }
.screen .note b { font-size: 3.7cqw; font-weight: 600; color: var(--ivory); }
.screen .note time { font-size: 3.2cqw; color: var(--soft); }
.screen .note span { grid-column: 2 / 4; font-size: 3.7cqw; color: var(--text); }

/* ---- States ---- */
.screen [data-show] { display: none; }
.screen[data-state="idle"] [data-show~="idle"],
.screen[data-state="listening"] [data-show~="listening"],
.screen[data-state="asking"] [data-show~="asking"],
.screen[data-state="remembering"] [data-show~="remembering"],
.screen[data-state="remembered"] [data-show~="remembered"],
.screen[data-state="reminder"] [data-show~="reminder"],
.screen[data-state="composer"] [data-show~="composer"],
.screen[data-state="thinking"] [data-show~="thinking"],
.screen[data-state="answer"] [data-show~="answer"],
.screen[data-state="notify"] [data-show~="notify"] { display: block; }
.screen[data-state="listening"] .bar .word, .screen[data-state="asking"] .bar .word { display: none; }
.screen[data-state="listening"] .bar .rec, .screen[data-state="asking"] .bar .rec { display: flex; }
.screen[data-state="notify"] .bar, .screen[data-state="notify"] .foot { display: none; }