@import url("tokens.css"); /* docs/design-system: colours, type, spacing (web/tokens.css) */
@import url("sessions.css"); /* the coding-sessions board */
/* Her page on the web (design: docs/design-system, "One Vesper, three surfaces"). Everything that floats over her
is glass (--glass on --glass-line, blurred), the one primary action on a surface is ink (--action), status is a
dot with a word, and pink appears on the wordmark and the push-to-talk ring only. The page fills the browser
viewport instead of a floating desktop window. */
#close { display: none; }
body, body.dragging { cursor: default; }
body.backdrop { border-radius: 0; }
/* ---- Icons: 18px line icons drawn as masks in the text colour, so no glyph or emoji differs between apps ---- */
.ico::before, #settings-btn::before, #sessions-mute::before, .mu-next::before, .mu-stop::before, .mu-close::before, .vt-close::before, .cp-x::before {
content: ""; display: block; width: 18px; height: 18px; background: currentColor;
-webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
#settings-btn { --icon: url("data:image/svg+xml;utf8,"); }
#sessions-mute { --icon: url("data:image/svg+xml;utf8,"); }
#sessions-mute.off { --icon: url("data:image/svg+xml;utf8,"); }
.mu-next { --icon: url("data:image/svg+xml;utf8,"); }
.mu-stop { --icon: url("data:image/svg+xml;utf8,"); }
.mu-close, .vt-close, .cp-x { --icon: url("data:image/svg+xml;utf8,"); }
/* ---- Her gate: the landing's gate again while she loads (entry flow, step 5): the wordmark, one serif line, one
ink button, on the night ground. Lifted by the click that also lets her speak (boot.js). ---- */
#start {
position: fixed; inset: 0; z-index: 20; box-sizing: border-box; padding: 24px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font-sans); text-align: center;
}
#start .wordmark { height: 64px; color: var(--pink); margin-bottom: var(--space-3); }
#start .wordmark svg { display: block; height: 100%; width: auto; overflow: visible; }
#start-msg { margin: 0 0 var(--space-2); max-width: 22em; font: 400 32px/1.2 var(--font-serif); text-wrap: balance; }
#start button {
border: 0; border-radius: var(--radius-pill); min-height: var(--cta); padding: 0 28px; cursor: pointer;
background: var(--action); color: var(--on-action); font: 600 15px/1 var(--font-sans);
}
#start button:hover { filter: brightness(1.06); }
#start button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* ---- Her speech bubble (renderer/index.html draws it white for the desktop window): glass here ---- */
#bubble {
background: var(--glass); color: var(--ink); border: 1px solid var(--glass-line); border-radius: 18px;
-webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); box-shadow: var(--shadow-panel);
font: 500 16px/1.42 var(--font-sans);
}
/* ---- Shared by every floating panel (connect, settings, agent picker, Lip-sync, pairing): glass ---- */
.panel-glass, #connect, #agents, #lipsync, #settings, #talk-pairbox, #voice-toast, #talk-caption {
background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink);
-webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
}
/* the small panels' head: a title and a close */
.cp-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.cp-x { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 0; cursor: pointer; }
.cp-x:hover, .cp-x:focus-visible { color: var(--ink); background: var(--fill-hover); }
.cp-tabs { display: flex; gap: var(--space-1\.5); flex-wrap: wrap; margin-bottom: 8px; }
/* chips: fill at rest, ink when selected; the one primary in a panel (Copy, Pair, Show my setup) is ink too */
.cp-tab, .cp-copy {
border: 0; border-radius: var(--radius-pill); padding: 6px 12px; background: var(--fill); color: var(--ink);
font: 500 13px/1 var(--font-sans); cursor: pointer; text-decoration: none; display: inline-block;
}
.cp-tab:hover { background: var(--fill-hover); }
.cp-tab.on, .cp-copy { background: var(--action); color: var(--on-action); font-weight: 600; }
.cp-tab:focus-visible, .cp-copy:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* ---- Connect your agent (design: Connect Agent Panel v2, on the system's Panel) ---- */
#connect, #connect-pill { position: fixed; z-index: 15; font-size: 12.5px; cursor: default; }
#connect {
left: 12px; top: 12px; width: min(440px, calc(100vw - 24px)); box-sizing: border-box; padding: 22px 22px 18px;
max-height: calc(100vh - 24px); overflow-y: auto;
border-radius: var(--radius-xl); box-shadow: var(--shadow-panel);
font: 14px/1.4 var(--font-sans); -webkit-font-smoothing: antialiased; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
display: none; flex-direction: column; gap: 18px; user-select: text;
}
#connect.open { display: flex; }
/* the panel itself: everything below is scoped to #connect */
#connect button { font: inherit; border: 0; cursor: pointer; }
#connect .cp-head { align-items: flex-start; gap: 12px; }
.cp-headings { display: flex; flex-direction: column; gap: 4px; }
.cp-title { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.cp-status { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cp-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--quiet); }
#connect.connected .cp-status { color: var(--ink); }
#connect.connected .cp-dot { background: var(--done); }
#connect .cp-tabs { gap: 6px; margin: 0; } /* 6, not 8: all three still fit beside a scrollbar */
#connect .cp-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; border-radius: var(--radius-pill); padding: 8px 14px; font-size: 14px; font-weight: 600; }
/* this agent is connected: a badge on the chip's corner, so the chips keep their width */
#connect .cp-seen { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; background: var(--done); color: var(--on-action); box-shadow: 0 0 0 2px var(--bg); }
/* the agents' marks (logos/README.md): masks take the chip's text color; OpenAI's is an ![]()
, as provided */
.cp-logo { flex: none; width: 14px; height: 14px; }
span.cp-logo { background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.cp-logo-claude { --mark: url(logos/claude.svg); }
.cp-logo-hermes { --mark: url(logos/hermes.png); }
.cp-logo-openclaw { --mark: url(logos/openclaw.svg); }
/* "Your system": one OS toggle swaps every command */
.cp-os { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--glass-line); padding-top: 14px; }
.cp-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cp-seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--bg); }
#connect .cp-seg button { border-radius: var(--radius-pill); padding: 5px 12px; font-size: 13px; font-weight: 600; background: transparent; color: var(--muted); }
#connect .cp-seg button.on { background: var(--raised); color: var(--ink); }
/* the steps: a numbered badge (✓ once done), a title, then the how in muted copy */
.cp-body { display: flex; flex-direction: column; gap: 18px; }
.cp-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; }
.cp-badge { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--fill-hover); color: var(--ink); transition: background 0.2s, color 0.2s; }
.cp-step.done .cp-badge { background: var(--action); color: var(--on-action); }
.cp-step-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cp-step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 4px; }
.cp-step-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 16px; font-weight: 700; }
.cp-pill { font-size: 12px; font-weight: 400; color: var(--muted); background: var(--fill); border-radius: var(--radius-pill); padding: 2px 8px; }
#connect .cp-fold { flex: none; background: none; color: var(--muted); font-size: 13px; padding: 0; white-space: nowrap; }
#connect .cp-fold:hover { color: var(--ink); }
.cp-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
#connect kbd { font: inherit; background: var(--raised); border-radius: 5px; padding: 1px 6px; color: var(--ink); }
/* a command on one line, Copy inside the box */
.cp-code { display: flex; align-items: center; gap: 10px; min-width: 0; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 10px 10px 10px 14px; }
.cp-code[hidden] { display: none; }
.cp-code code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 13px var(--font-mono); color: var(--ink); }
.cp-code-prompt { align-items: flex-start; }
.cp-code textarea { flex: 1; min-width: 0; align-self: stretch; resize: vertical; border: 0; padding: 0; outline: none; background: none; color: var(--ink); font: 12px/1.4 var(--font-mono); }
#connect .cp-copy { flex: none; border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px; font-weight: 600; background: var(--action); color: var(--on-action); }
#connect .cp-copy.copied { background: var(--done); }
#connect .cp-intro { padding: 4px 0 2px; }
#connect .cp-make { margin-top: 10px; border-radius: var(--radius-md); padding: 9px 14px; font-weight: 600; background: var(--action); color: var(--on-action); }
#connect .cp-make:disabled { opacity: 0.55; cursor: default; }
#connect .cp-error { color: var(--failed); }
.cp-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
#connect .cp-link { background: none; padding: 0; color: var(--ink); text-align: left; text-decoration: underline; text-underline-offset: 3px; }
#connect .cp-link:hover { color: var(--ink); text-decoration-color: var(--ink); }
.cp-note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
@media (max-width: 520px) {
#connect { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 70vh; overflow-y: auto; padding: 18px 16px 14px; }
}
/* ---- The bottom-left row: small, quiet status pills (who talks, which agent, voice), the Status component ---- */
#connect-pill, #lipsync-pill, #talk-hint, #talk-pair {
position: fixed; z-index: 15; border: 0; border-radius: var(--radius-pill); padding: 6px 12px;
background: var(--glass); border: 1px solid var(--glass-line); color: var(--muted); font: 500 12px/1 var(--font-sans); cursor: pointer;
-webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
#connect-pill { left: 12px; bottom: 12px; } /* clear of the speech bubble at the top */
/* a dot says the state (Status): live is a done dot with ink text, trouble a needs dot, open is the ink pill */
#connect-pill::before, #lipsync-pill::before, #talk-pair::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--quiet); flex: none; }
#connect-pill.ok, #lipsync-pill.ok, #talk-pair { color: var(--ink); }
#connect-pill.ok::before, #lipsync-pill.ok::before, #talk-pair::before { background: var(--done); }
#connect-pill.warn { color: var(--needs); } /* the picked agent cannot answer (its model off, Hermes off) */
#connect-pill.warn::before { background: var(--needs); }
#connect-pill.on { background: var(--action); color: var(--on-action); border-color: var(--action); } /* the panel is open */
#connect-pill.on::before { background: var(--on-action); }
#connect-pill:hover, #lipsync-pill:hover, #talk-hint:hover, #talk-pair:hover { color: var(--ink); }
/* ---- The agent picker: opens above the "Agent: sophie ▾" pill ---- */
#agents {
position: fixed; left: 12px; bottom: 50px; z-index: 15; width: min(260px, calc(100vw - 24px)); box-sizing: border-box; padding: 12px;
max-height: calc(100vh - 70px); overflow-y: auto; border-radius: var(--radius-md);
box-shadow: var(--shadow-panel); font: 400 12.5px/1.4 var(--font-sans); display: none; cursor: default;
}
#agents.open { display: block; }
#agents .ap-group { margin: 8px 0 4px 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
#agents .ap-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; }
#agents .ap-row.pick { cursor: pointer; }
#agents .ap-row.pick:hover { background: var(--fill); }
#agents .ap-row.on { background: var(--fill-hover); }
#agents .ap-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--quiet); }
#agents .ap-dot.green { background: var(--done); }
#agents .ap-dot.red { background: var(--failed); }
#agents .ap-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#agents .ap-spin { opacity: 0.7; }
#agents .ap-setup {
margin-left: auto; border: 0; border-radius: var(--radius-pill); padding: 2px 8px; background: var(--needs); color: var(--on-action);
font: inherit; font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
#agents .ap-setup:disabled { opacity: 0.55; cursor: default; }
#agents .ap-note { display: block; margin: 0 6px 4px 21px; font-size: 11px; line-height: 1.35; color: var(--muted); }
#agents .ap-add {
display: block; width: 100%; margin-top: 8px; padding: 6px; border: 0; border-top: 1px solid var(--glass-line); background: none;
color: var(--muted); font: inherit; text-align: left; cursor: pointer;
}
#agents .ap-add:hover { color: var(--ink); }
@media (max-width: 520px) {
#agents { left: 8px; right: 8px; width: auto; bottom: 48px; }
}
/* ---- Who talks? (Vesper speaks, or My AI speaks: her lips follow the AI app's voice) ---- */
#lipsync { position: fixed; z-index: 15; font: 400 12.5px/1.4 var(--font-sans); cursor: default; }
#lipsync-pill { left: 12px; bottom: 48px; }
#lipsync {
left: 12px; bottom: 84px; width: min(340px, calc(100vw - 24px)); box-sizing: border-box; padding: 12px;
border-radius: var(--radius-md); box-shadow: var(--shadow-panel); display: none;
}
#lipsync.open { display: block; }
#lipsync p { margin: 6px 0 8px; line-height: 1.4; }
#lipsync .ls-q { color: var(--muted); margin-bottom: 6px; }
#lipsync .ls-choices { margin-bottom: 4px; }
.ls-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; line-height: 1.35; color: var(--muted); }
.ls-row .cp-copy { flex: none; }
.ls-note { color: var(--needs); }
.ls-note:empty { display: none; }
@media (max-width: 520px) {
/* The connect panel sits at the bottom here: Lip-sync waits until it's hidden. */
#connect.open ~ #lipsync-pill, #connect.open ~ #lipsync { display: none; }
#lipsync { left: 8px; right: 8px; width: auto; }
}
.ls-meter { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; margin: 4px 0 6px; }
.ls-meter .ls-fill { display: block; height: 100%; width: 0; background: var(--ink); transition: width 90ms linear; }
#lipsync-pill { overflow: hidden; }
#lipsync-pill .ls-fill { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ink); transition: width 90ms linear; }
.ls-heard { color: var(--muted); font-size: 11.5px; }
.ls-heard.warn { color: var(--needs); }
.ls-mic { width: 100%; box-sizing: border-box; margin: 2px 0 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 4px 6px; background: var(--raised); color: var(--ink); font: inherit; }
/* ---- Bottom row: the pills (left) and the settings gear (right) ---- */
#bottom-bar { position: fixed; left: 12px; bottom: 12px; z-index: 15; display: flex; gap: 6px; align-items: center; }
#bottom-bar #lipsync-pill, #bottom-bar #connect-pill, #bottom-bar #talk-hint, #bottom-bar #talk-pair {
position: relative; left: auto; bottom: auto; padding: 5px 10px; font-size: 11.5px; opacity: 0.7; transition: opacity 0.2s;
}
#bottom-bar #lipsync-pill { order: 1; }
#bottom-bar #connect-pill { order: 2; }
#bottom-bar #talk-hint { order: 3; }
#bottom-bar #talk-pair { order: 4; }
#bottom-bar [hidden] { display: none; }
#bottom-bar > :hover, #bottom-bar > :focus-visible, #bottom-bar #connect-pill.on, #bottom-bar #connect-pill.warn, #bottom-bar #connect-pill.update { opacity: 1; }
#lipsync { bottom: 46px; }
/* The agent pill becomes the update notice: not faded, so it is seen. */
#bottom-bar #connect-pill.update { color: var(--needs); }
#bottom-bar #connect-pill.update::before { background: var(--needs); }
#settings-btn {
position: fixed; right: 12px; bottom: 12px; z-index: 15; width: var(--control); height: var(--control); padding: 0;
display: grid; place-items: center; border: 1px solid var(--glass-line); border-radius: 50%; background: var(--glass); color: var(--ink);
-webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
font-size: 0; cursor: pointer; opacity: 0.7; transition: opacity 0.2s, background 0.2s;
}
#settings-btn:hover, #settings-btn:focus-visible, #settings.open ~ #settings-btn { opacity: 1; background: var(--fill-hover); }
#settings {
position: fixed; right: 12px; bottom: 56px; z-index: 15; width: min(260px, calc(100vw - 24px)); box-sizing: border-box;
padding: 12px; border-radius: var(--radius-md); box-shadow: var(--shadow-panel);
font: 400 13px/1.5 var(--font-sans); display: none; cursor: default;
}
#settings.open { display: block; }
#settings p { margin: 12px 0 4px; font: 600 12px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
#settings > p:first-child { margin-top: 0; }
.st-views { display: flex; gap: 4px; flex-wrap: wrap; }
@media (max-width: 520px) {
#connect { bottom: 48px; } /* above the bottom row */
}
/* The page fills the browser: no rounded scene corners */
#bg { border-radius: 0; }
#settings .st-sound { display: flex; align-items: center; gap: 6px; margin-top: 10px; cursor: pointer; }
#settings input[type="checkbox"] { accent-color: var(--ink); }
#settings .st-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
#settings .st-voice-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
#settings .st-account { display: block; margin-top: 14px; color: var(--ink); text-decoration: none; }
#settings .st-account:hover, #settings .st-account:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
#settings [hidden] { display: none; } /* the display rules above would otherwise beat [hidden] */
#settings .st-voice { flex: 1; min-width: 0; max-width: 100%; font: inherit; color: var(--ink); background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 4px 6px; }
/* ---- Push-to-talk (bottom centre): the voice island with the one pink control, the ring (PushToTalk) ---- */
#talk {
position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 15; box-sizing: border-box;
height: var(--island); padding: 0 6px; border-radius: var(--radius-pill);
background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow-island);
-webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
display: flex; gap: 6px; align-items: center; font: 400 12.5px/1 var(--font-sans); color: var(--ink);
}
#talk [hidden], #talk-pairbox [hidden] { display: none; }
#talk:has(> #talk-btn[hidden]) { display: none; } /* no voice bridge yet: the setup pill in the bottom row says so, no empty island */
/* the ring: pink at rest, filled while she listens, pulsing while she thinks, grey when voice is not set up */
#talk-btn {
display: inline-grid; place-items: center; width: 42px; height: var(--control); border: 0; padding: 0; background: transparent; border-radius: 50%;
color: var(--pink); font-size: 0; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
transition: transform 0.1s;
}
#talk-btn .v-ring { display: flex; justify-content: center; align-items: center; gap: 3px; width: 30px; height: 30px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 50%; transition: background-color 0.15s, color 0.15s; }
#talk-btn .v-ring span { width: 2.25px; height: 4.5px; border-radius: 1.5px; background: currentColor; }
#talk-btn .v-ring span:nth-child(2) { height: 10.5px; }
#talk-btn.on { transform: scale(1.06); }
#talk-btn.on .v-ring { background: var(--pink); color: var(--on-pink); }
#talk-btn.on .v-ring span { height: 7.5px; }
#talk-btn.on .v-ring span:nth-child(2) { height: 16.5px; }
#talk-btn[data-state="thinking"]:not(.on) .v-ring span { animation: talk-think 1s ease-in-out infinite; }
#talk-btn:disabled { cursor: default; color: var(--quiet); }
#talk-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@keyframes talk-think { 50% { opacity: 0.35; } }
/* what the ring is doing, above the island: the key at rest (on hover or focus), the state while it changes */
#talk-key {
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(360px, calc(100vw - 32px));
font: 500 11px/16px var(--font-sans); color: var(--ink); text-shadow: 0 1px 3px #000, 0 0 6px rgba(0, 0, 0, 0.6);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
#talk:hover #talk-key, #talk:focus-within #talk-key, #talk.show-key #talk-key { opacity: 1; }
#talk-hint, #talk-pair { position: relative; z-index: auto; }
#talk-caption {
position: fixed; left: 50%; bottom: 62px; transform: translateX(-50%); z-index: 14; box-sizing: border-box;
max-width: min(560px, calc(100vw - 32px)); padding: 6px 12px; border-radius: 10px;
font: 400 14px/1.35 var(--font-sans); text-align: center; pointer-events: none;
opacity: 0; transition: opacity 0.2s;
}
#talk-caption.on { opacity: 1; }
#talk-caption.partial { color: var(--muted); font-style: italic; }
#talk-pairbox {
position: fixed; left: 50%; bottom: 62px; transform: translateX(-50%); z-index: 16; box-sizing: border-box;
width: min(300px, calc(100vw - 32px)); padding: 12px; border-radius: var(--radius-md); box-shadow: var(--shadow-panel);
font: 400 12.5px/1.4 var(--font-sans); display: none; cursor: default;
}
#talk-pairbox.open { display: block; }
#talk-pairbox p { margin: 6px 0 8px; line-height: 1.4; }
.tk-pairrow { display: flex; gap: 6px; }
.tk-pairrow input {
flex: 1; min-width: 0; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 8px;
background: var(--raised); color: var(--ink); font: 16px/1.2 var(--font-mono); letter-spacing: 2px;
}
.tk-note { color: var(--needs); font-size: 11.5px; }
.tk-note:empty { display: none; }
#talk-debug {
position: fixed; right: 12px; top: 12px; z-index: 16; margin: 0; padding: 6px 8px; border-radius: 8px;
background: rgba(0, 0, 0, 0.7); color: var(--terminal); font: 11px/1.4 var(--font-mono); pointer-events: none;
}
#settings .st-unpair, #settings .st-reset { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { #talk-btn[data-state="thinking"]:not(.on) .v-ring span { animation: none; } }
/* ---- Music (its own corner, top right): the offer chip (#music-offer) above the now-playing chip ---- */
#music-corner {
position: fixed; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); z-index: 15;
display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none;
}
#music-corner > * { pointer-events: auto; }
#music-chip, #music-offer {
display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; max-width: min(260px, calc(100vw - 24px));
padding: 3px 4px 3px 11px; border-radius: var(--radius-pill); background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink);
-webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
font: 500 11.5px/1 var(--font-sans); cursor: default;
}
#music-chip[hidden], #music-offer[hidden] { display: none; }
#music-chip .mu-title, #music-offer .mu-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 4px; }
#music-chip .mu-title { color: var(--muted); }
#music-chip .mu-btn, #music-offer .mu-btn {
display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; padding: 0; background: none; color: var(--muted); font-size: 0; cursor: pointer;
}
#music-chip .mu-btn::before, #music-offer .mu-btn::before { width: 14px; height: 14px; }
#music-chip .mu-btn:hover, #music-chip .mu-btn:focus-visible, #music-offer .mu-btn:hover, #music-offer .mu-btn:focus-visible { color: var(--ink); background: var(--fill-hover); }
#music-offer .mu-play {
border: 0; border-radius: var(--radius-pill); padding: 5px 10px; background: var(--action); color: var(--on-action); font: 600 11.5px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
}
#music-offer .mu-play:hover, #music-offer .mu-play:focus-visible { filter: brightness(1.06); }
/* News about her voice (voice-toast.js): above the talk caption (two lines of it), so both can show. */
#voice-toast {
position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 16; box-sizing: border-box;
display: flex; align-items: flex-start; gap: 8px; width: max-content; max-width: min(420px, calc(100vw - 32px));
padding: 8px 8px 8px 12px; border-radius: var(--radius-md); box-shadow: var(--shadow-panel);
font: 400 13px/1.35 var(--font-sans);
}
#voice-toast[hidden] { display: none; }
#voice-toast .vt-close { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; padding: 0; background: none; color: var(--muted); font-size: 0; cursor: pointer; }
#voice-toast .vt-close::before { width: 14px; height: 14px; }
#voice-toast .vt-close:hover, #voice-toast .vt-close:focus-visible { background: var(--fill-hover); color: var(--ink); }
@media (max-width: 520px) {
/* Above the bottom row of pills here. */
#talk { bottom: 54px; }
#talk-caption, #talk-pairbox { bottom: 104px; }
#voice-toast { bottom: 160px; }
}
/* No dead ends (accounts step 7): one message, one action, over everything (Notice). */
#dead-end { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: var(--scrim); -webkit-backdrop-filter: blur(var(--blur-scrim)); backdrop-filter: blur(var(--blur-scrim)); }
#dead-end .de-card { width: min(380px, 100%); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-dialog); text-align: center; font: 15px/1.5 var(--font-sans); }
#dead-end h2 { margin: 0 0 8px; font: 400 24px/1.2 var(--font-serif); }
#dead-end p { margin: 0 0 18px; color: var(--muted); }
#dead-end button { width: 100%; min-height: 44px; border: 0; border-radius: var(--radius-md); background: var(--action); color: var(--on-action); font: 600 15px/1 var(--font-sans); cursor: pointer; }
#dead-end button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }