/* The stage is designed at 1440 x 900 and scaled to fit the window. */
:root { color-scheme: dark; }
html, body { margin: 0; height: 100%; background: #01020a; overflow: hidden; }
/* the body is pinned to the screen: on a phone the stage's unscaled width (wider than the screen) would
   otherwise widen the page, and the browser would zoom out and crop it */
body { position: fixed; inset: 0; }
body { font-family: Inter, system-ui, sans-serif; color: #eef0fb; }
#stage { position: absolute; left: 50%; top: 50%; width: var(--stage-w, 1440px); height: 900px; transform-origin: 0 0; overflow: hidden; background: #01020a; }
.layer { position: absolute; left: 0; top: 0; width: var(--stage-w, 1440px); height: 900px; }
.layer.screen { mix-blend-mode: screen; }
.layer.passthrough, #net { pointer-events: none; }
.hidden { opacity: 0; }
#start { transition: opacity .4s ease; }
button { font: inherit; }
[hidden] { display: none !important; }

@keyframes ellis-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes ellis-pulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes ellis-in-a { 0% { transform: scaleY(.012) scaleX(0); opacity: 0 } 22% { transform: scaleY(.012) scaleX(.03); opacity: 1; filter: brightness(3) } 58% { transform: scaleY(.012) scaleX(1); opacity: 1; filter: brightness(2.4) } 100% { transform: none; opacity: 1; filter: none } }
@keyframes ellis-collapse { 0% { transform: none; opacity: 1 } 38% { transform: scaleY(.012); opacity: 1; filter: brightness(2.4) } 74% { transform: scaleY(.012) scaleX(.03); opacity: 1; filter: brightness(3) } 100% { transform: scaleY(.012) scaleX(0); opacity: 0 } }
@keyframes ellis-rise { from { opacity: 0; transform: translateY(10px); filter: blur(4px) } to { opacity: 1; transform: none; filter: none } }
@keyframes ellis-node { 0%, 100% { box-shadow: 0 0 8px var(--c) } 50% { box-shadow: 0 0 18px var(--c) } }
@keyframes ellis-sweep { from { background-position: -160px 0 } to { background-position: 520px 0 } }
@keyframes ellis-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 8px var(--glow), inset 0 0 0 1px rgba(255,255,255,.3) } 50% { transform: scale(1.02); box-shadow: 0 0 16px var(--glow), inset 0 0 0 1px rgba(255,255,255,.45) } }
@keyframes ellis-meet-in { from { opacity: 0; filter: blur(8px); letter-spacing: .3em } to { opacity: 1; filter: none } }
.stagger > * { animation: ellis-rise .5s cubic-bezier(.2,.8,.2,1) both }
.stagger > *:nth-child(2) { animation-delay: .05s } .stagger > *:nth-child(3) { animation-delay: .1s } .stagger > *:nth-child(4) { animation-delay: .15s } .stagger > *:nth-child(5) { animation-delay: .2s } .stagger > *:nth-child(6) { animation-delay: .25s } .stagger > *:nth-child(7) { animation-delay: .3s } .stagger > *:nth-child(8) { animation-delay: .35s }

/* ---------- start ---------- */
.meet { position: absolute; border: none; border-radius: 50%; padding: 0; background: transparent; cursor: pointer; font-family: Sora, Inter, sans-serif; font-size: 19px; font-weight: 500; letter-spacing: .06em; color: #ece6ff; text-shadow: 0 0 14px rgba(242,166,255,.55); transition: letter-spacing .6s cubic-bezier(.2,.8,.2,1), text-shadow .6s ease, color .6s ease, opacity .5s ease, transform .5s ease; animation: ellis-meet-in 1.6s cubic-bezier(.2,.8,.2,1) 2.6s both; }
.meet:hover, .meet:focus-visible { color: #fff; text-shadow: 0 0 18px rgba(242,166,255,.9), 0 0 42px rgba(158,170,255,.6); outline: none; }   /* plus interference bursts, app.js */
#legal { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 12px; letter-spacing: .02em; color: rgba(205,210,238,.42); pointer-events: none; animation: ellis-meet-in 1.6s cubic-bezier(.2,.8,.2,1) 2.6s both; }
#stage:not(.phase-start) #legal { display: none; }
.meet.blank, .meet.blank:hover, .meet.blank:focus-visible { color: transparent; text-shadow: none; }   /* the landing: nothing on the moon */
.meet.now { animation: none; opacity: 1; }   /* appears at once after sign-in, with interference */
/* signing out: small and quiet, top right, only when signed in */
#signout { position: absolute; top: 12px; right: 40px; z-index: 45; padding: 4px 6px; border: none; background: none; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(205,210,238,.36); transition: color .3s ease; }
#signout:hover, #signout:focus-visible { color: rgba(236,230,255,.9); outline: none; }
/* the sign-in modal: an app panel beside the eclipse */
#signin { position: absolute; left: 872px; top: 46px; width: 520px; z-index: 40; }
#signin .body { height: 780px; padding: 20px 24px 16px; display: flex; flex-direction: column; gap: 12px; color: #e9ebf8; box-sizing: border-box; }
#signin .scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 6px; mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
#signin .pin { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(201,184,255,.18); }
#signin .otp { display: flex; flex-direction: column; gap: 6px; }
#signin .tester-only { display: flex; flex-direction: column; gap: 6px; }
#signin label.agree.tester-only { flex-direction: row; }
#signin .tester-only[hidden], #signin .otp[hidden] { display: none; }
#signin input[type=text] { font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #fff; }
#signin .mode { border: none; background: none; padding: 0; font: inherit; color: #9da3c6; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#signin .mode:hover, #signin .mode:focus-visible { color: #e9ebf8; outline: none; }
#signin form.owner .scroll { opacity: .45; }
#signin .head { display: flex; align-items: center; gap: 10px; }
#signin .mark { width: 9px; height: 9px; transform: rotate(45deg); background: #c9b8ff; box-shadow: 0 0 12px #c9b8ff; }
#signin .tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #c9b8ff; }
#signin .close { margin-left: auto; width: 30px; height: 30px; border: none; background: rgba(255,255,255,.06); color: #c9cde6; font-size: 16px; cursor: pointer; }
#signin .intro { margin: 0; font-size: 14px; line-height: 1.5; color: #c9cde6; }
#signin dl { margin: 0; display: grid; gap: 9px; }
#signin dt { font-size: 12.5px; font-weight: 500; color: #e9ebf8; }
#signin dd { margin: 1px 0 0; font-size: 12.5px; line-height: 1.45; color: #b9bedb; }
#signin details { font-size: 12.5px; color: #9da3c6; }
#signin summary { cursor: pointer; color: #c9cde6; }
#signin .terms p { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #a9aecd; }
#signin .terms strong { color: #d3d6ec; font-weight: 500; }
#signin .fl { font-size: 12px; color: #9da3c6; }
#signin input[type=password], #signin input[inputmode=numeric] { font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #fff; }
#signin .agree { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: #d3d6ec; }
#signin .agree input { margin-top: 3px; }
#signin .err { margin: 0; font-size: 13px; color: #ffb3a8; }
#signin .go { font: inherit; font-weight: 500; font-size: 14px; padding: 11px 16px; border-radius: 999px; border: none; background: #f2a6ff; color: #160a1c; cursor: pointer; }
#signin .go:disabled { opacity: .6; cursor: default; }
#signin footer { font-size: 11px; color: #7d83a6; text-align: center; }
.meet.gone { animation: none; opacity: 0; transform: scale(1.25); pointer-events: none; }

/* ---------- rail ---------- */
#rail { position: absolute; left: 0; top: 0; width: 440px; height: 900px; display: flex; flex-direction: column; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.75); transition: opacity 1.4s ease; }
.phase-start #rail { opacity: 0; pointer-events: none; }
#railTop { display: flex; flex-direction: column; gap: 6px; padding: 34px 36px 0 36px; transition: padding-left 1.4s ease, opacity 1.4s ease; }
#rail.hush #railTop, #rail.hush #transcript { opacity: 0; }
#rail.small #railTop { padding-left: 150px; }
.who { display: flex; align-items: center; gap: 12px; }
.who .name { font-family: Sora, Inter, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: .01em; }
.state { display: flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; background: rgba(10,12,30,.7); border: 1px solid rgba(255,255,255,.12); font-size: 12.5px; font-weight: 500; color: #dfe2f4; text-shadow: none; }
.state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc, #9eeaff); box-shadow: 0 0 10px var(--sc, #9eeaff); }
.state.thinking .dot { animation: ellis-pulse .9s ease-in-out infinite; }
.role { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8e94b8; }
#transcript { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; padding: 30px 36px 22px; transition: opacity 1.4s ease; -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 8%, #000 42%); mask-image: linear-gradient(180deg, transparent 0%, transparent 8%, #000 42%); }
.turn { display: flex; flex-direction: column; gap: 6px; }
.turn .meta { display: flex; align-items: baseline; gap: 10px; }
.turn .who2 { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #9eeaff; }
.turn.ellis .who2 { color: #f2a6ff; }
.turn .time { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6f76a0; }
.turn p { margin: 0; font-size: 16px; line-height: 1.5; color: #d3d8ee; text-wrap: pretty; }
.turn.ellis p { font-size: 17px; color: #f7f0ff; }
.turn.interim p { color: #8f97b8; font-style: italic; }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.12em; background: #f2a6ff; animation: ellis-blink .9s infinite; }
#railFoot { display: flex; align-items: center; gap: 14px; margin: 0 36px; padding: 16px 0 26px; }
.bars { display: flex; align-items: center; gap: 3px; height: 20px; }
.bars span { width: 3px; height: 3px; border-radius: 2px; background: rgba(158,234,255,.35); transition: height .08s linear; }
.bars.live span { background: #9eeaff; }
#hint { font-size: 13px; color: #9da3c6; flex: 1; }
.quiet { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(8,10,26,.6); color: #c9cde6; cursor: pointer; text-shadow: none; }
.quiet:hover { color: #fff; border-color: rgba(255,255,255,.3); }
#typed { margin: -12px 36px 22px; }
#typed input { width: 100%; box-sizing: border-box; font: inherit; font-size: 14.5px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(8,10,26,.75); color: #fff; }

/* ---------- views (Explain board) and the node panel (Galaxy board) ---------- */
#views, #nodePanel { position: absolute; inset: 0; pointer-events: none; }
#views > section, #nodePanel > div { pointer-events: auto; }
.item { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 10px 14px; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); transition: opacity .45s ease, background-color .45s ease, box-shadow .45s ease, transform .45s ease; background-color: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.item .bar { position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); opacity: 0; transition: opacity .45s ease; }
.focusing .item { opacity: .4; }
.item.on { opacity: 1; transform: translateX(4px); background-color: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 80%, transparent), inset 0 0 22px color-mix(in srgb, var(--c) 16%, transparent); background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 13%, transparent), transparent); background-size: 160px 100%; background-repeat: no-repeat; animation: ellis-sweep 2.2s linear infinite; }
.item.on .bar { opacity: 1; }
.item .nm { font-size: 14px; font-weight: 600; line-height: 1.3; color: #e9ebf8; }
.item.on .nm { color: #fff; }
.item .ds { font-size: 13px; line-height: 1.45; color: #aeb3d2; text-wrap: pretty; }
.mono { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #8e94b8; }
h2.pt { margin: 0; font-family: Sora, Inter, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; color: #f7f5ff; text-wrap: pretty; }
p.lead { margin: 0; font-size: 14.5px; line-height: 1.5; color: #c9cde6; text-wrap: pretty; }

/* ---------- the app ---------- */
#appHead { position: absolute; left: 480px; right: 40px; top: 36px; display: flex; align-items: center; gap: 16px; padding: 4px; }
.appStar { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fffaf0 0%, #ffd98a 45%, rgba(255,217,138,0) 75%); box-shadow: 0 0 18px 6px rgba(255,217,138,.3); }
.titles { display: flex; flex-direction: column; gap: 3px; }
.titles .title { font-family: Sora, Inter, sans-serif; font-size: 22px; font-weight: 600; color: #fff3dc; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.titles .sub { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #a99f86; }
#appHead .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.toggle { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(8,10,26,.72); border: 1px solid rgba(255,255,255,.12); }
.toggle button { font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: none; cursor: pointer; background: transparent; color: #d9dcf0; }
.toggle button[aria-pressed="true"] { background: #ffd98a; color: #1a1205; }
#legend { position: absolute; left: 484px; right: 44px; bottom: 30px; display: flex; align-items: center; gap: 18px; font-size: 12.5px; color: #b9bdd8; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
#legend span { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
#legend .help { margin-left: auto; color: #8e94b8; }
#resetView { white-space: nowrap; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(8,10,26,.6); color: #e6e8f6; cursor: pointer; }
#net { pointer-events: auto; cursor: grab; }
.phase-start #net, .phase-opening #net { pointer-events: none; }

/* ---------- profile view ---------- */
#profile { position: absolute; left: 480px; top: 104px; right: 40px; bottom: 30px; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-content: start; padding-right: 6px; }
#profile .card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; border-radius: 16px; background: rgba(12,14,34,.78); border: 1px solid rgba(178,170,255,.14); backdrop-filter: blur(10px); }
#profile .wide { grid-column: 1 / -1; }
#profile .row { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: #e9ebf8; }
#profile .row .k { color: #9da3c6; min-width: 150px; }
#profile .chip { flex-shrink: 0; margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor; }
#profile .chip.confirmed { color: #ffd98a; } #profile .chip.proposed { color: #f2a6ff; } #profile .chip.dismissed { color: #8e94b8; }
#profile .risk { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
#profile .risk .h { display: flex; align-items: baseline; gap: 10px; }
#profile .risk .n { font-family: Sora, Inter, sans-serif; font-size: 15.5px; font-weight: 500; color: #f3f1ff; }
#profile .prio { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
#profile .prio.critical { color: #ff8a7a; } #profile .prio.high { color: #ffb38a; } #profile .prio.medium { color: #ffd98a; } #profile .prio.low { color: #9da3c6; }
#profile .why { font-size: 13px; color: #a9aecc; line-height: 1.45; }
#profile .caps { font-size: 13.5px; color: #7fe8d6; }
#profile .actions { display: flex; gap: 10px; }
#profile .empty { color: #8f95b8; font-size: 14px; }
#profile button.export { align-self: flex-start; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: none; background: #ffd98a; color: #1a1205; cursor: pointer; }

/* ---------- feedback ---------- */
#clock { position: absolute; right: 40px; bottom: 124px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #9da3c6; }
#clock.last { color: #f2a6ff; }
.phase-start #clock, .phase-opening #clock { bottom: 80px; }
#controls { position: absolute; right: 40px; bottom: 74px; display: flex; gap: 10px; }
.phase-start #controls, .phase-opening #controls { bottom: 30px; }
#feedbackBtn { font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(242,166,255,.55); background: rgba(40,14,48,.6); color: #f6d2ff; cursor: pointer; box-shadow: 0 0 14px rgba(242,166,255,.25); }
#feedbackBtn:hover { background: rgba(60,20,70,.75); }
#pause[aria-pressed="true"] { border-color: rgba(158,234,255,.6); color: #c9f3ff; background: rgba(10,30,44,.75); }
#controls .quiet { font-size: 13px; padding: 9px 16px; }
#feedbackPanel { position: absolute; right: 40px; bottom: 124px; width: 420px; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 16px; background: rgba(12,10,30,.88); border: 1px solid rgba(242,166,255,.35); backdrop-filter: blur(10px); }
#feedbackPanel .fq { font-family: Sora, Inter, sans-serif; font-size: 16px; line-height: 1.45; color: #fbf3ff; }
#feedbackPanel textarea { font: inherit; font-size: 14.5px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #fff; resize: vertical; }
.fbtns { display: flex; gap: 8px; }
#fSend { font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: none; background: #f2a6ff; color: #160a1c; cursor: pointer; }
#notice { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); padding: 10px 16px; border-radius: 12px; background: rgba(12,10,30,.9); border: 1px solid rgba(255,255,255,.18); font-size: 14px; color: #e9ebf8; }
#black { position: absolute; inset: 0; background: #000; pointer-events: none; opacity: 0; transition: opacity 1s ease; }

/* ---------- phone: a portrait stage (layout.js). Ellis at the top, the conversation below, views as
   cards over it, the assessment as a Conversation / Profile switch; no split and no galaxy. ---------- */
.phone #galaxy, .phone #gas, .phone #net, .phone #appHead, .phone #legend, .phone #nodePanel { display: none !important; }
.phone #rail { width: var(--stage-w); height: 820px; }
.phone #railTop { padding: 22px 20px 0; }
.phone #rail.small #railTop { padding-left: 20px; }
.phone .who .name { font-size: 19px; }
.phone #transcript { margin-top: 300px; padding: 10px 20px 12px; gap: 14px; font-size: 15px; -webkit-mask-image: linear-gradient(transparent, #000 70px); mask-image: linear-gradient(transparent, #000 70px); }
.phone #railFoot { margin: 0 20px; padding: 8px 0 10px; }
.phone #typed { margin: -4px 20px 8px; }
.phone #typed input { font-size: 16px; }   /* 16px keeps iOS from zooming the page on focus */
.phone #controls { left: 12px; right: 12px; bottom: 14px; flex-wrap: wrap; justify-content: center; gap: 6px; }
.phone.phone #controls button, .phone #feedbackBtn { font-size: 12px; padding: 7px 11px; }
.phone .phase-start #controls, .phone .phase-opening #controls { bottom: 14px; }
.phone #clock { right: auto; left: 20px; top: 56px; bottom: auto; font-size: 11px; }
.phone .phase-start #clock, .phone .phase-opening #clock { bottom: auto; }
.phone #signout { right: 12px; top: 10px; }
.phone #legal { bottom: 18px; font-size: 10.5px; white-space: nowrap; }
.phone #feedbackPanel { left: 12px; right: 12px; width: auto; bottom: 70px; }
.phone #notice { left: 12px; right: 12px; transform: none; top: 60px; }
.phone #views > section { max-height: 480px; overflow-y: auto; }
.phone #signin { left: 8px; right: 8px; top: 8px; width: auto; }
.phone #signin .body { height: 884px; padding: 16px 16px 12px; }
.phone #signin input { font-size: 16px; }
.phone #profile { left: 12px; right: 12px; top: 300px; bottom: 104px; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.phone #profile .row .k { min-width: 0; flex: 0 0 42%; }
.phone.phone .show-profile #transcript, .phone.phone .view-open #transcript { visibility: hidden; }
#phoneTabs { position: absolute; left: 12px; right: 12px; top: 258px; z-index: 6; display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(12,14,34,.72); border: 1px solid rgba(255,255,255,.12); }
#phoneTabs button { flex: 1; font-size: 13px; padding: 8px 10px; border-radius: 999px; border: none; background: none; color: #b9bdd8; cursor: pointer; }
#phoneTabs button[aria-pressed="true"] { background: rgba(242,166,255,.18); color: #fbf3ff; }
#phoneTabs #tabProfile.news::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: #f2a6ff; box-shadow: 0 0 8px #f2a6ff; vertical-align: middle; }
#profile .decide { display: flex; gap: 8px; margin: -2px 0 4px; }
#profile .decide button { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,217,138,.5); background: rgba(255,217,138,.12); color: #ffe7b0; cursor: pointer; }
#profile .decide button.quiet { border-color: rgba(255,255,255,.18); background: none; color: #b9bdd8; }

/* push to talk (phones): a large round button above the controls; held = sending the microphone */
#talkBtn { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; border: 1.5px solid rgba(242,166,255,.7); background: radial-gradient(circle at 50% 40%, rgba(242,166,255,.28), rgba(40,14,48,.75)); color: #fbf3ff; font-size: 11.5px; letter-spacing: .04em; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; box-shadow: 0 0 18px rgba(242,166,255,.25); transition: transform .12s ease, box-shadow .2s ease, background .2s ease; z-index: 7; }
#talkBtn.held { transform: translateX(-50%) scale(1.08); background: radial-gradient(circle at 50% 40%, rgba(158,234,255,.45), rgba(10,30,44,.8)); border-color: #9eeaff; box-shadow: 0 0 28px rgba(158,234,255,.55); }
.phone .ptt #transcript { margin-bottom: 92px; }

.phone #signin footer { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* phone: the whole nebula, core large and centred, the bottom softened for the captions and buttons */
/* the phone's nebula is composed by phone-gas.js from Ellis's frame: once composed, the raw frame is not shown */
.phone .composed #ellis { opacity: 0 !important; }
#phoneGas { display: none; }
.phone #phoneGas { display: block; transition: opacity 1.6s ease; }
.phone .view-open #phoneGas, .phone .show-profile #phoneGas, .phone .feedback-open #phoneGas { opacity: .3; }

/* phone type sizes: the stage is scaled to the screen, so these read at roughly phone-native sizes;
   buttons are at least 44 points tall */
.phone .who .name { font-size: 25px; }
.phone .state { font-size: 14px; }
.phone .role { font-size: 12.5px; }
.phone #transcript { font-size: 19px; line-height: 1.45; }
.phone #transcript .meta, .phone #transcript time { font-size: 13px; }
.phone #hint { font-size: 16px; }
.phone #typeToggle { font-size: 16px; padding: 10px 16px; }
.phone #typed input { font-size: 18px; padding: 13px 14px; }
.phone.phone #controls button, .phone #feedbackBtn { font-size: 16px; padding: 12px 16px; min-height: 46px; }
.phone #signout { font-size: 13px; padding: 10px 8px; }
.phone #clock { font-size: 14px; }
#phoneTabs button { font-size: 16.5px; padding: 11px 12px; }
.phone #phoneTabs { top: 250px; }
.phone #notice { font-size: 16px; }
.phone #profile .row { font-size: 17px; }
.phone #profile .chip { font-size: 12.5px; }
.phone #profile .mono, .phone #profile .card > span:first-child { font-size: 13px; }
.phone #profile .risk .n { font-size: 18px; }
.phone #profile .why { font-size: 15px; }
.phone #profile .caps { font-size: 15.5px; }
.phone #profile .decide button { font-size: 16px; padding: 11px 18px; min-height: 44px; }
.phone #views .pt { font-size: 23px !important; }
.phone #views .lead { font-size: 16px !important; }
.phone #views .nm { font-size: 17px !important; }
.phone #views .ds { font-size: 15px !important; }
.phone #views .mono { font-size: 12.5px !important; }
.phone #signin .tag { font-size: 13px; }
.phone #signin .intro { font-size: 17px; }
.phone #signin dt { font-size: 16px; }
.phone #signin dd { font-size: 15.5px; }
.phone #signin details, .phone #signin .terms p { font-size: 15px; }
.phone #signin .fl { font-size: 15px; }
.phone #signin input[type=password], .phone #signin input[type=text], .phone #signin input[inputmode=numeric] { font-size: 18px; padding: 13px 14px; }
.phone #signin .agree { font-size: 15px; }
.phone #signin .agree input { width: 22px; height: 22px; }
.phone #signin .go { font-size: 18px; padding: 15px 18px; }
.phone #signin footer, .phone #signin .mode { font-size: 13px; }
.phone #signin .close { width: 44px; height: 44px; font-size: 20px; }
.phone #feedbackPanel .fq { font-size: 18px; }
.phone #feedbackPanel textarea { font-size: 17px; }
.phone #feedbackPanel button { font-size: 16px; padding: 12px 16px; }
#talkBtn { font-size: 13.5px; }
.phone #talkBtn { width: 96px; height: 96px; bottom: 132px; }
.phone #transcript { margin-top: 290px; }
.phone .ptt #transcript { margin-bottom: 110px; }
.phone .turn p { font-size: 19px; line-height: 1.45; }
.phone .turn .who2 { font-size: 15px; }
.phone .turn .time { font-size: 12.5px; }

/* phone: the controls take two rows at phone sizes, so the conversation ends above them */
.phone #rail { height: 762px; }
.phone #profile { bottom: 142px; }
.phone #views > section { max-height: 430px; }
.phone #transcript { margin-top: 270px; }

/* ---------- phone, voice first (after ChatGPT's voice mode, with Ellis as the living core):
   no transcript on screen; captions only on request; one row of round buttons; the rest in a menu ---------- */
#captions, #phoneBar, #phoneMenu { display: none; }
.phone #captions { display: block; position: absolute; left: 22px; right: 22px; bottom: 132px; max-height: 210px; overflow: hidden; text-align: center; pointer-events: none; opacity: 0; transition: opacity .4s ease; -webkit-mask-image: linear-gradient(transparent, #000 40px); mask-image: linear-gradient(transparent, #000 40px); display: flex; flex-direction: column; justify-content: flex-end; }
.phone .captions #captions { opacity: 1; }
.phone #captions p { margin: 0; font-size: 21px; line-height: 1.42; color: #f1eefe; text-shadow: 0 1px 4px rgba(0,0,0,.95), 0 0 22px rgba(0,0,0,.9); text-wrap: pretty; }
.phone #captions p.you { color: #bff2ff; }
.phone #transcript, .phone #railFoot, .phone #controls, .phone #phoneTabs { display: none !important; }
.phone #railTop { align-items: center; padding: 20px 20px 0; }
.phone .who { gap: 10px; }
.phone .role { display: none; }
.phone #signout { display: none; }
.phone #clock { left: 0; right: 0; top: 64px; text-align: center; }
.phone #typed { position: absolute; left: 18px; right: 18px; bottom: 118px; margin: 0; z-index: 8; }
.phone #phoneBar { display: flex; position: absolute; left: 0; right: 0; bottom: 26px; justify-content: center; align-items: center; gap: 16px; z-index: 8; }
.phone #phoneBar[hidden] { display: none; }
.phone #phoneBar button { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); background: rgba(22,24,48,.72); color: #e6e8f6; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent; }
.phone #phoneBar button[hidden] { display: none; }
.phone #phoneBar button[aria-pressed="true"] { background: rgba(242,166,255,.2); border-color: rgba(242,166,255,.55); color: #fbeaff; }
.phone #pbMic { width: 76px !important; height: 76px !important; background: rgba(242,166,255,.18) !important; border-color: rgba(242,166,255,.6) !important; color: #fff !important; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.phone #pbMic svg { width: 30px; height: 30px; }
.phone #pbMic .slash { display: none; }
.phone #pbMic.muted { background: rgba(60,62,90,.7) !important; border-color: rgba(255,255,255,.2) !important; color: #b9bdd8 !important; }
.phone #pbMic.muted .slash { display: inline; }
.phone #pbMic .ptt-label { display: none; position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .06em; color: #b9bdd8; }
.phone #pbMic.ptt .ptt-label { display: block; }
.phone #pbMic.ptt.held, .phone #talkBtn.held { background: rgba(158,234,255,.3) !important; border-color: #9eeaff !important; box-shadow: 0 0 26px rgba(158,234,255,.55); }
.phone #pbProfile.news::after { content: ''; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: #f2a6ff; box-shadow: 0 0 8px #f2a6ff; }
.phone #phoneMenu { display: flex; flex-direction: column; position: absolute; right: 16px; bottom: 100px; width: 250px; padding: 8px; gap: 2px; border-radius: 18px; background: rgba(14,16,36,.94); border: 1px solid rgba(255,255,255,.12); z-index: 9; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.phone #phoneMenu[hidden] { display: none; }
.phone #phoneMenu button { text-align: left; font-size: 16.5px; padding: 13px 14px; border: none; border-radius: 12px; background: none; color: #e9ebf8; cursor: pointer; }
.phone #phoneMenu button:active { background: rgba(255,255,255,.07); }
.phone #phoneMenu button.quiet { color: #9da3c6; }
.phone #phoneMenu button[hidden] { display: none; }
.phone #profile { top: 92px; bottom: 112px; }
.phone #views > section { max-height: 520px; }
.phone #feedbackPanel { bottom: 112px; }
.phone .typing #captions { bottom: 196px; }

/* phone: when a view card, the profile or the feedback panel is over Ellis, the nebula steps back so the card reads */
.phone #ellis { transition: opacity .8s ease; }
.phone .view-open #ellis, .phone .show-profile #ellis, .phone .feedback-open #ellis { opacity: .3; }

/* the button row: the microphone in the middle, two buttons each side (the profile's place is kept when it is not shown) */
.phone #phoneBar { display: grid; grid-template-columns: 58px 58px 76px 58px 58px; justify-content: center; gap: 14px; }
.phone #phoneBar[hidden] { display: none; }
.phone #phoneBar #pbProfile[hidden] { display: grid; visibility: hidden; }
.phone #phoneBar #pbCC { grid-column: 1; } .phone #phoneBar #pbType { grid-column: 2; } .phone #phoneBar #pbMic { grid-column: 3; }
.phone #phoneBar #pbProfile { grid-column: 4; } .phone #phoneBar #pbMore { grid-column: 5; }
.phone #views > section { max-height: 470px; }
.phone .typing #views > section { max-height: 360px; }