/* ═══════════════════════════════════════════════════════════════════════
LiveLink Live — application stylesheet.
A port of the QML surfaces, not a reinterpretation. Where a value looks
arbitrary it was copied from the QML and the source file is named in a
comment, so the two can be diffed when either moves.
═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
/* ── UI locale ─────────────────────────────────────────────────────────
The gate js/core/i18n.js arms in and js/app.js clears after the
string pass, so a Korean user never sees a frame of English. It is only
ever armed when the locale is NOT English — an English page needs no pass,
and gating it would mean a blank screen if the scripts failed to arrive. */
html.i18n-pending body { visibility: hidden; }
/* Korean breaks at any character by default, which puts half a word on the
next line of every button and card in the app. `keep-all` moves the break
to the spaces between eojeol, which is where a Korean reader expects it —
and `overflow-wrap` is the escape hatch for the one string that is longer
than its box (a URL, a long display name) so keep-all cannot overflow it. */
html:lang(ko) {
word-break: keep-all;
overflow-wrap: anywhere;
}
body {
background: var(--window-bg);
color: var(--text-primary);
font-family: var(--font-stack);
font-size: var(--type-body);
line-height: 1.35;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
overscroll-behavior: none;
}
button, input { font: inherit; color: inherit; }
canvas { display: block; }
/* Han and Nastaliq cannot be selected by unicode-range, because the whole
point is that several fonts claim the same codepoints and only the language
says which drawing is right. So these are the one place a font is chosen by
`lang` instead: the transcript rows and subtitle cards carry the code of the
text they hold, and js/fonts.js links the matching sheet the first time one
appears. `|=` matches the tag and any region suffix — zh-Hans-CN too.
Order matters in the fallback: the Han family first, then "LL Sans" for the
Latin and punctuation mixed into the same line, then the system stack.
The `i` flag matters: `lang` is not one of the attributes CSS matches
case-insensitively by default, and the script subtag is conventionally
capitalised, so `zh-Hant` would slip past a bare `[lang|="zh-hant"]`.
The Traditional rule follows the Simplified one deliberately — `|="zh"`
matches zh-Hant as well, and equal specificity means the later rule wins. */
[lang|="zh" i] { font-family: "LL Han SC", var(--font-stack); }
[lang|="zh-hant" i] { font-family: "LL Han TC", var(--font-stack); }
[lang|="ja" i] { font-family: "LL Han JP", var(--font-stack); }
[lang|="ur" i] { font-family: "LL Urdu", var(--font-stack); }
/* Korean is not in that list. Modern Hangul lives in "LL Sans" and is already
loaded, so ordinary Korean needs no override; this only adds the Hanja
family behind it, for the occasional 漢字 in a name or a headline. */
[lang|="ko" i] { font-family: "LL Sans", "LL Han KO", var(--font-stack); }
/* Qt's ScrollView draws a thin, unobtrusive bar. Match it rather than
letting each platform impose its own. */
.page-scroll, .sheet-list, .log-text, .login-scroll, .transcript-scroll,
.popup-layer {
scrollbar-width: thin;
scrollbar-color: #33415f transparent;
}
.page-scroll::-webkit-scrollbar,
.sheet-list::-webkit-scrollbar,
.log-text::-webkit-scrollbar,
.login-scroll::-webkit-scrollbar,
.popup-layer::-webkit-scrollbar,
.transcript-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.page-scroll::-webkit-scrollbar-thumb,
.sheet-list::-webkit-scrollbar-thumb,
.log-text::-webkit-scrollbar-thumb,
.login-scroll::-webkit-scrollbar-thumb,
.popup-layer::-webkit-scrollbar-thumb,
.transcript-scroll::-webkit-scrollbar-thumb {
background: #33415f; border-radius: 4px;
}
.page-scroll::-webkit-scrollbar-track { background: transparent; }
.screen { position: fixed; inset: 0; display: none; }
.screen.is-active { display: block; }
/* D210 — js/core/invite-gate.js: a browser opening an invite never sees the
login landing, not even for the first paint; showScreen() lifts this. */
html.invite-pending #login-screen { display: none; }
[hidden] { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════════
THE RAISED-SURFACE RECIPE (VISUAL_STYLE.md § "standard raised-surface")
1. a dark rounded rectangle shifted down 5 px → ::before
2. the main face with a static gradient → ::after
3. a one-pixel top highlight → a background layer on
that same ::after, so
no extra element is
needed per control
4. content translated down with the face while pressed
Per-control variation is by custom property, so every control shares one
implementation of the depth model instead of re-deriving it.
═══════════════════════════════════════════════════════════════════════ */
.lift {
--lift-radius: var(--radius-standard);
--lift-g0: #35445f;
--lift-g1: #253149;
--lift-g2: #161d30;
--lift-mid: 50%;
--lift-border: #7183a4;
--lift-border-width: 1px;
--lift-highlight: rgba(255, 255, 255, 0.27);
--lift-inset: 24px; /* highlight is narrower than the face */
--lift-opacity: 1;
position: relative;
display: block;
border: 0;
padding: 0;
background: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* The dark offset base — the part that stays put while the face sinks. */
.lift::before {
content: "";
position: absolute;
inset: var(--face-reveal) 0 0 0;
border-radius: var(--lift-radius);
background: var(--offset-base);
}
.lift::after {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: calc(100% - var(--face-reveal));
border-radius: var(--lift-radius);
border: var(--lift-border-width) solid var(--lift-border);
opacity: var(--lift-opacity);
background-image:
linear-gradient(var(--lift-highlight), var(--lift-highlight)),
linear-gradient(180deg,
var(--lift-g0) 0%, var(--lift-g1) var(--lift-mid), var(--lift-g2) 100%);
background-repeat: no-repeat;
background-position: center 1px, 0 0;
background-size: calc(100% - var(--lift-inset)) 1px, 100% 100%;
transition: transform var(--press-duration) var(--ease-out),
border-color var(--hover-duration) var(--ease-out);
}
.lift > * {
position: relative;
z-index: 1;
transition: transform var(--press-duration) var(--ease-out);
}
/* "On press, move the face down by 2–3 px … Do not move the control's
layout bounds." */
.lift:active:not(:disabled)::after,
.lift:active:not(:disabled) > * { transform: translateY(var(--press-offset)); }
/* "Keyboard focus: persistent 2 px focus ring, not just a colour shift." */
.lift:focus-visible { outline: none; }
.lift:focus-visible::after {
border-color: var(--accent-focus);
border-width: 2px;
}
.lift:disabled { cursor: default; }
.lift:disabled::after { opacity: 0.58; }
/* ═══════════════════════════════════════════════════════════════════════
LOGIN LANDING (qml/LoginLanding.qml)
═══════════════════════════════════════════════════════════════════════ */
#login-screen, #join-screen { overflow: hidden; }
/* Behind both landings, outside either, so switching does not restart the
shader or re-seed the starfield. Earlier in the DOM than the screens, so
their content paints over it without needing a stacking context. */
.landing-backdrop {
position: fixed; inset: 0; display: none;
background: var(--login-base);
}
.landing-backdrop.is-active { display: block; }
.login-base { position: absolute; inset: 0; background: var(--login-base); }
.login-ambient{ position: absolute; inset: 0; width: 100%; height: 100%; }
.login-stars { position: absolute; inset: 0; pointer-events: none; }
.star {
position: absolute;
background: #dcecff;
border-radius: 50%;
opacity: 0.30;
animation: star-twinkle var(--twinkle) ease-in-out infinite alternate;
}
@keyframes star-twinkle { from { opacity: 0.30; } to { opacity: 1; } }
/* The QML lays a top-and-bottom darkening gradient over the shader so the
wordmark and the card edges keep their contrast wherever the waves are. */
.login-vignette {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.094) 0%, /* #18000000 */
rgba(0, 0, 0, 0) 50%,
rgba(2, 4, 13, 0.369) 100%); /* #5e02040d */
}
.login-scroll {
position: absolute; inset: 0;
overflow-y: auto; overflow-x: hidden;
/* The shader backdrop behind this deliberately keeps running under the
insets — only the content is pulled in. */
padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
-webkit-overflow-scrolling: touch;
}
.login-content {
position: relative;
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 40px;
}
/* The QML anchors this to the top of the scroll content rather than putting
it in the column, so it does not push the hero down; `heroColumn.y` is
measured from the content top, not from below the brand. */
.brand-row {
position: absolute; top: 26px; left: 50%;
transform: translateX(-50%);
display: flex; align-items: center; gap: 10px;
}
.brand-word {
font-size: 12px; font-weight: 600; letter-spacing: 2.2px;
color: #dce5f7;
}
/* ── Partner mark ──────────────────────────────────────────────────────
Craftive, between the orb and the app-language switch.
It is this element, not the switch, that now carries `margin-top: auto`:
the column is min-height:100%, and two flex items with auto top margins
*split* the free space between them, which would have floated the logo
halfway up the empty half of the landing. One claim on the free space,
and the mark and the switch travel down to the bottom padding as a pair.
Native artwork is 281x101 with alpha, drawn here at a third of that.
`height` leads and the width follows, so the pair keeps the height it was
laid out at whatever the artwork's aspect turns out to be — and the
width/height attributes on the reserve the box before it decodes,
so nothing under it jumps. Full opacity and no filter: a partner's mark
is not ours to tint. */
.partner-mark {
display: block;
margin-top: auto;
height: 34px; width: auto;
}
@media (max-height: 589px) { .partner-mark { height: 26px; } }
/* ── The app-language switch ───────────────────────────────────────────
Two segments over one setting, in three placements: cornered on the login
landing, inline at the top of the join card, and full width in Settings.
Only the placement differs — the segments themselves are one rule, so the
control reads as the same control wherever somebody meets it. */
.locale-switch {
display: inline-flex;
padding: 2px;
border-radius: 999px;
background: rgba(12, 19, 35, 0.55);
border: 1px solid rgba(117, 141, 180, 0.28);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* Foot of the login column, where an auto top margin used to put it — the
column is min-height:100%, so something down here has to eat whatever the
hero left over for the footer to ride the bottom padding however tall the
screen is. That job moved up one element to .partner-mark, which now
precedes the switch, and this is the gap between the two. Still no
absolute positioning, so nothing can end up under the wordmark. */
.locale-switch.is-footer { margin-top: 14px; }
.locale-switch.is-inline { align-self: flex-end; }
/* Settings: flags instead of names, riding the end of the heading rather than
spanning a row of its own. The names are what make the control legible on a
landing that has no heading — here the heading does that job, so the
segments can shrink to the one thing a two-state switch needs to show. */
.locale-switch.is-compact { flex: 0 0 auto; }
.locale-switch.is-compact .locale-option {
display: flex; align-items: center;
padding: 5px 10px;
}
/* Same treatment as the picker's region flags, at two-thirds the height: a
16 px flag keeps the segment the height two words gave it. The inactive one
is dulled because the pill alone is a quiet cue, and with the words gone it
was the only one left. */
.locale-flag {
display: block; height: 16px; width: auto;
border-radius: 2px;
opacity: 0.45; filter: grayscale(0.55);
transition: opacity var(--press-duration) var(--ease-out),
filter var(--press-duration) var(--ease-out);
}
.locale-option.is-current .locale-flag { opacity: 1; filter: none; }
.locale-option {
padding: 6px 13px;
border: 0; border-radius: 999px;
background: transparent;
color: var(--text-secondary);
font-size: 12.5px; font-weight: 600;
cursor: pointer;
transition: background-color var(--press-duration) var(--ease-out),
color var(--press-duration) var(--ease-out);
}
.locale-option.is-current {
background: rgba(117, 141, 180, 0.34);
color: var(--text-primary);
}
/* The switch lives on two shader-backed landings where a focus ring drawn in
the accent would disappear into the background. */
.locale-option:focus-visible {
outline: 2px solid var(--text-primary);
outline-offset: -2px;
}
.hero {
/* LoginLanding.qml: y = max(104, contentHeight * 0.19), and the pieces
the orb-centring arithmetic below needs to subtract. */
--hero-top: max(104px, 19vh);
--wordmark-height: 65px;
--descriptor-height: 13px;
--hero-gap: 16px;
width: min(470px, calc(100% - 52px));
margin-top: var(--hero-top);
display: flex; flex-direction: column; align-items: center;
gap: var(--hero-gap);
}
/* `shortViewport` (height < 590) drops the hero to a fixed 40 px and tightens
the column, exactly as the QML ternaries do. */
@media (max-height: 589px) {
.brand-row { top: 10px; }
.hero { --hero-top: 40px; --hero-gap: 8px; }
}
.wordmark { display: flex; align-items: center; gap: 11px; }
.wordmark-text {
font-size: 54px; font-weight: 700; letter-spacing: -1.3px;
/* Qt sizes a Text item by font metrics (ascent + descent, ~1.2em), not by
the glyph box, so `line-height: 1` made the hero 11 px short and pulled
everything below it up. --wordmark-height tracks this. */
color: var(--ink); line-height: 1.2;
}
.wordmark-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 72px; height: 34px; border-radius: 10px;
background: linear-gradient(90deg, var(--coral) 0%, #a77cff 100%);
color: #090914; font-size: 14px; font-weight: 700; letter-spacing: 1.2px;
}
.hero-descriptor {
font-size: 11px; font-weight: 600; letter-spacing: 2.4px;
color: var(--aqua); text-align: center;
}
/* ── The orb ── */
.voice-mark {
position: relative;
width: 141px; height: 141px;
margin-top: 15px;
transition: transform 150ms var(--ease-out);
}
/* `centerLoginVertically` (height >= 620) puts the orb on the vertical centre
of the viewport. QML has to reach that with a computed Layout.topMargin
because ColumnLayout cannot centre one child; the same arithmetic works
here, and keeps the busy card and rejoin button in flow underneath.
topMargin = viewportH/2 - heroY - orbRadius - wordmark - descriptor - 2*gap */
@media (min-height: 620px) {
.voice-mark {
margin-top: max(8px, calc(50vh - var(--hero-top) - 70.5px
- var(--wordmark-height) - var(--descriptor-height)
- var(--hero-gap) * 2));
}
}
.voice-mark:hover { transform: scale(1.045); }
.voice-mark:active { transform: scale(0.95); }
.pulse-ring {
position: absolute; inset: 0;
border-radius: 50%;
border: 1px solid #5ed7c7;
opacity: 0;
animation: orb-pulse 2700ms linear infinite;
pointer-events: none;
}
.pulse-ring[data-ring="1"] { border-color: #8f76ed; animation-delay: 900ms; }
@keyframes orb-pulse {
0% { transform: scale(0.76); opacity: 0; }
12.9% { opacity: 0.42; }
66.6% { transform: scale(1.34); opacity: 0; }
100% { transform: scale(1.34); opacity: 0; }
}
.orb {
position: absolute; inset: 12px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
border: 1px solid rgba(125, 167, 199, 0.392); /* #647da7c7 */
background: rgba(20, 32, 59, 0.722); /* #b814203b */
cursor: pointer;
padding: 0;
transition: border-color var(--hover-duration) var(--ease-out);
}
.orb:hover:not(:disabled) { border-color: #a9fff4; border-width: 2px; }
.orb:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 3px; }
/* Storage-blocked is the one state that disables a visible orb (busy hides
the whole voice mark instead), and a disabled control has to look like
one: this button glowing invitingly while ignoring taps read as "the app
is broken", with the actual reason sitting unread in the notice below. */
.orb:disabled { cursor: default; opacity: 0.48; }
.orb-inner {
position: absolute; inset: 9px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: linear-gradient(90deg,
rgba(97, 234, 209, 0.831) 0%, /* #d461ead1 */
rgba(146, 119, 255, 0.816) 100%);/* #d09277ff */
}
.orb-label { color: #07101e; font-size: 20px; font-weight: 700; }
/* Whose credential the Continue orb would resume. */
.landing-account { margin: 0; font-size: 14px; color: var(--muted-ink); }
/* ── Busy / status cards on the landing ── */
.busy-card {
width: 100%; max-width: 390px;
border-radius: var(--radius-standard);
background: rgba(17, 27, 50, 0.659); /* #a8111b32 */
border: 1px solid rgba(95, 113, 150, 0.251); /* #405f7196 */
padding: 14px;
text-align: center;
}
.busy-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 9px; }
.busy-dots i {
width: 7px; height: 7px; border-radius: 4px;
background: var(--aqua); opacity: 0.35;
animation: busy-dot 1040ms ease-in-out infinite;
}
.busy-dots i:nth-child(2) { background: var(--violet); animation-delay: 150ms; }
.busy-dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes busy-dot {
0%, 100% { opacity: 0.3; }
31% { opacity: 1; }
71% { opacity: 0.3; }
}
.busy-text { margin: 0; font-size: 13px; color: var(--muted-ink); }
.rejoin-button {
width: 100%; max-width: 390px; height: 50px;
border-radius: 16px;
background: #184f48;
border: 1px solid rgba(88, 222, 200, 0.533); /* #8858dec8 */
color: #eafff9; font-size: 15px; font-weight: 700;
cursor: pointer;
}
.rejoin-button:active { background: #1f6f64; }
.status-notice {
width: 100%; max-width: 390px;
border-radius: 12px;
background: rgba(23, 35, 59, 0.451); /* #7317233b */
border: 1px solid rgba(93, 113, 144, 0.275); /* #465d7190 */
padding: 10px;
}
.status-notice p {
margin: 0; font-size: 12px; color: var(--muted-ink); text-align: center;
}
.status-notice.is-warning p { color: #ffc177; }
/* The iOS Home Screen hint — the status-notice look with a dismissal. The ×
is the one control, sized for a thumb (the hint exists only on phones). */
.a2hs-hint {
width: 100%; max-width: 390px;
display: flex; align-items: center; gap: 4px;
border-radius: 12px;
background: rgba(23, 35, 59, 0.451);
border: 1px solid rgba(93, 113, 144, 0.275);
padding: 4px 4px 4px 12px;
}
.a2hs-hint p {
margin: 0; font-size: 12px; color: var(--muted-ink);
text-align: left; flex: 1;
}
.a2hs-dismiss {
flex: none; width: 40px; height: 40px;
border: 0; border-radius: 10px; background: transparent;
color: var(--muted-ink); font-size: 18px; line-height: 1;
cursor: pointer;
}
.a2hs-dismiss:hover { background: rgba(93, 113, 144, 0.2); }
/* ── Terminal guest overlay (Main.qml, z: 12) ──
A room ending is allowed to interrupt Transcript and QR: otherwise their
full-screen layers hide the one event the reader cannot infer from text
that simply stops arriving. The confirm dialog remains the topmost modal. */
.guest-exit {
position: fixed; inset: 0; z-index: 68;
display: flex; align-items: center; justify-content: center;
background: rgba(5, 9, 22, 0.902); /* #e6050916 */
padding: 24px;
}
.guest-exit[hidden] { display: none; }
/* D210 — a Counter tablet's ending is terminal: the login screen behind it
is covered, not dimmed, and there is no OK to reach it. */
.guest-exit.is-terminal { background: var(--window-bg); }
.guest-exit-card {
display: flex; flex-direction: column; align-items: center;
gap: 14px; width: 100%; max-width: 380px; text-align: center;
}
.guest-exit-title {
margin: 0; font-size: 22px; font-weight: 700; color: var(--primary-ink);
}
.guest-exit-message {
margin: 0; font-size: 14px; color: var(--muted-ink);
}
.guest-exit .rejoin-button { max-width: 200px; height: 46px; }
.guest-exit-ok {
width: 200px; height: 44px;
border-radius: 14px;
background: transparent;
border: 1px solid #3a4a63;
color: var(--muted-ink); font-size: 14px;
cursor: pointer;
}
.guest-exit-ok:active { background: #1a2230; }
/* Landing content is hidden outright while the popup owns the surface.
The locale switch belongs in that list and was missed when it was added:
D048 emptied the landing so nothing competed with the card and nothing
focusable sat behind it, and the switch is both. Now that the card is tall
enough to reach the foot of the column (D057), it also showed *through* the
card's 93% background, which is how the omission surfaced. Switching
language mid-sign-in costs a tap on the close button; reading the form
through a ghost of the footer was worse. The partner mark is in the list
for the same reason, and because a logo showing through a sign-in card is
the one place a partner's mark should never appear. */
#login-screen.form-open .brand-row,
#login-screen.form-open #login-locale,
#login-screen.form-open .partner-mark,
#login-screen.form-open .hero { visibility: hidden; }
/* ── Credential popup (D048) ── */
/* Fixed, not absolute: the layer lives at body level now (the guest review
state opens it over the workspace), so it anchors to the viewport rather
than to a screen that may be display:none.
And it scrolls. `interactive-widget=resizes-content` (index.html) has the
on-screen keyboard shrink the viewport instead of covering it, so on a
phone this layer is routinely shorter than the card inside it — a provider
button, two fields, submit and the create-an-account line do not fit in
what a keyboard leaves. Whatever does not fit has to be reachable, and the
create-an-account line is last in the card and first to go.
Which is why the card is in normal flow with `auto` side margins rather
than absolutely centred: an in-flow child's margin box counts as
scrollable overflow, an out-of-flow one's is clipped and unreachable. The
gutters moved to the layer so the full width answers a drag, and the
backdrop turned fixed so the dimming stays put while the card moves under
it. --viewport-height is how iOS, which ignores interactive-widget, is
told the same thing (see app.js). */
.popup-layer {
position: fixed;
top: var(--viewport-offset, 0px); left: 0; right: 0;
height: var(--viewport-height, 100%);
z-index: 30;
padding: 0 22px;
overflow-y: auto;
overscroll-behavior: contain;
}
.popup-backdrop {
position: fixed; inset: 0;
background: rgba(4, 10, 24, 0.702); /* #b3040a18 */
}
.login-popup {
position: relative;
margin: 26px auto;
width: min(370px, 100%);
border-radius: var(--radius-modal);
background: rgba(9, 19, 38, 0.929); /* #ed091326 */
border: 1px solid rgba(117, 141, 180, 0.396); /* #65758db4 */
padding: 21px;
display: flex; flex-direction: column; gap: 13px;
overflow: hidden;
animation: popup-in var(--state-duration) var(--ease-out);
}
@keyframes popup-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
/* The aqua→violet hairline across the top edge of the card. */
.popup-accent {
position: absolute; top: 1px; left: 1px; right: 1px; height: 2px;
border-radius: 1px;
background: linear-gradient(90deg,
rgba(97, 234, 209, 0) 0%,
var(--aqua) 28%,
var(--violet) 72%,
rgba(146, 119, 255, 0) 100%);
}
.popup-header { display: flex; align-items: center; gap: 8px; }
.popup-title { flex: 1; margin: 0; font-size: var(--type-card); font-weight: 600; color: var(--ink); }
.icon-button {
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
border: 0; border-radius: 11px;
background: transparent; cursor: pointer;
transition: background var(--hover-duration) var(--ease-out);
}
.icon-button:hover { background: rgba(59, 73, 103, 0.133); }
.icon-button:active { background: rgba(64, 95, 119, 0.2); }
.icon-button:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }
/* ── Text fields ──
QML draws a 1 px coloured ring by stacking two rectangles; the focus
colour differs per field (aqua for username, violet for password). */
.field {
position: relative;
border-radius: 16px;
padding: 1px;
background: rgba(81, 104, 134, 0.251); /* #40516886 */
transition: background var(--hover-duration) var(--ease-out);
}
.field:focus-within { background: var(--aqua); }
.field[data-field="password"]:focus-within { background: var(--violet); }
.text-field {
display: block;
width: 100%; height: 52px;
border: 0; border-radius: 15px;
background: rgba(16, 27, 50, 0.902); /* #e6101b32 */
color: var(--ink);
font-size: var(--type-body);
padding: 0 16px 0 50px;
outline: none;
}
.field[data-field="password"] .text-field { padding-right: 56px; }
.text-field::placeholder { color: #7f90b1; }
.text-field::selection { background: var(--violet); color: #07101e; }
/* The little person / padlock marks, built from boxes exactly as the QML
builds them from Rectangles. */
.field-glyph {
position: absolute; left: 16px; top: 50%;
width: 20px; height: 20px;
transform: translateY(-50%);
z-index: 2; pointer-events: none;
}
.field-glyph i { position: absolute; display: block; background: #8495b5; }
.glyph-head {
left: 50%; top: 0; width: 7px; height: 7px;
margin-left: -3.5px; border-radius: 50%;
}
.glyph-shoulders {
left: 50%; bottom: 0; width: 16px; height: 8px;
margin-left: -8px; border-radius: 4px;
background: transparent !important; border: 1px solid #8495b5;
}
.glyph-shackle {
left: 50%; top: 2px; width: 11px; height: 10px;
margin-left: -5.5px; border-radius: 5px;
background: transparent !important; border: 1px solid #8495b5;
}
.glyph-body {
left: 50%; bottom: 0; width: 17px; height: 12px;
margin-left: -8.5px; border-radius: 4px;
}
.glyph-body::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 3px; height: 5px; margin: -2.5px 0 0 -1.5px;
border-radius: 1.5px; background: #101b32;
}
.field:focus-within .glyph-head,
.field:focus-within .glyph-body { background: var(--aqua); }
.field:focus-within .glyph-shoulders,
.field:focus-within .glyph-shackle { border-color: var(--aqua); }
.field[data-field="password"]:focus-within .glyph-body { background: var(--violet); }
.field[data-field="password"]:focus-within .glyph-shackle { border-color: var(--violet); }
.reveal {
position: absolute; right: 7px; top: 50%;
width: 44px; height: 44px;
transform: translateY(-50%);
z-index: 3;
}
.login-status {
border-radius: 11px;
background: rgba(23, 35, 59, 0.333); /* #5517233b */
border: 1px solid rgba(81, 104, 134, 0.251);
padding: 8px;
}
.login-status.is-error {
background: rgba(255, 159, 112, 0.196); /* #32ff9f70 */
border-color: rgba(255, 193, 119, 0.467); /* #77ffc177 */
}
.login-status p {
margin: 0; font-size: 12px; line-height: 1.2;
color: var(--muted-ink); text-align: center;
}
.login-status.is-error p { color: #ffd09b; }
.submit-button {
position: relative;
height: 54px;
border: 0; border-radius: 16px;
background: linear-gradient(90deg, var(--aqua) 0%, var(--violet) 100%);
color: #07101e; font-size: var(--type-body); font-weight: 700;
cursor: pointer;
transition: transform 120ms var(--ease-out), opacity var(--hover-duration);
}
/* The inner 1 px white rim the QML draws inside the gradient. */
.submit-button::after {
content: ""; position: absolute; inset: 1px;
border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.333);
pointer-events: none;
}
.submit-button:hover:not(:disabled) { transform: scale(1.008); }
.submit-button:active:not(:disabled) { transform: scale(0.985); }
.submit-button:disabled { opacity: 0.48; color: #71809a; cursor: default; }
/* Sign in ⇄ create an account, and the way back off the promo-code step. */
.popup-switch {
margin: 0; text-align: center;
font-size: 12.5px; line-height: 1.45; color: var(--muted-ink);
}
.linkish {
border: 0; background: none; padding: 0 0 0 4px;
font: inherit; color: var(--aqua); cursor: pointer;
text-decoration: underline; text-underline-offset: 2px;
}
.linkish:hover { color: #fff; }
.linkish:disabled { opacity: 0.48; cursor: default; text-decoration: none; }
/* Grouping wrappers only, so each step can be shown or hidden as a unit.
`display: contents` keeps their children as direct flex items of the form,
which is what preserves the gap between the username and password fields. */
#credential-fields, #promo-fields, #provider-block { display: contents; }
#credential-fields[hidden], #promo-fields[hidden],
#provider-block[hidden] { display: none; }
.enrollment-removed {
border: 1px solid rgba(255, 181, 71, 0.38);
border-radius: 12px;
background: rgba(255, 181, 71, 0.08);
color: var(--muted-ink);
font-size: 13px;
line-height: 1.55;
padding: 13px 14px;
}
.enrollment-removed[hidden] { display: none; }
/* ── Federated sign-in ──────────────────────────────────────────────────
The provider buttons are the one part of this UI we do not get to design.
Each provider publishes a button specification — mark, wording, minimum
size, permitted colourways — and following it is a condition of using the
API, checked at review. So these deliberately do NOT inherit the app's
gradient-and-glow language: they are the vendor's dark colourway, sized to
the vendor's metrics, sitting inside our card.
What is ours is the stacking and the divider. Buttons are full width and
identical to each other so no provider reads as the endorsed one. */
#provider-buttons { display: flex; flex-direction: column; gap: 9px; }
.provider-button {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; height: 44px; padding: 0 12px;
border-radius: 12px; cursor: pointer;
font-size: 14px; font-weight: 600; letter-spacing: 0.1px;
transition: filter var(--hover-duration), transform 120ms var(--ease-out);
}
.provider-button:hover:not(:disabled) { filter: brightness(1.14); }
.provider-button:active:not(:disabled) { transform: scale(0.985); }
.provider-button:disabled { opacity: 0.48; cursor: default; }
.provider-button svg { flex: none; }
/* Google's dark colourway: #131314 surface, #8E918F rule, #E3E3E3 label —
the variant intended for a dark UI, rather than a recolour of the light one. */
.provider-button[data-provider="google"] {
background: #131314; border: 1px solid #8e918f; color: #e3e3e3;
}
/* Named for what it is rather than styled as a heading: it separates two ways
of doing the same thing, so it must not read as a section break. */
.popup-or {
display: flex; align-items: center; gap: 10px;
font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.09em;
color: var(--muted-ink);
}
.popup-or::before, .popup-or::after {
content: ""; flex: 1 1 auto; height: 1px;
background: rgba(117, 141, 180, 0.34);
}
/* Which provider this person used last time. The single cheapest fix for the
commonest federated-login support ticket: signing up with one provider,
returning through another, and arriving at an empty second account. */
.provider-button .provider-hint {
font-size: 11px; font-weight: 500; opacity: 0.62;
}
/* A promo code is read off a slide or a phone screen and typed once — worth
the monospace and the letter spacing that make a transcription error
visible while it is being made. */
#promo-code {
font-family: ui-monospace, "SF Mono", Consolas, monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#promo-code::placeholder { letter-spacing: normal; text-transform: none; }
@media (max-height: 589px) {
.voice-mark { width: 87px; height: 87px; }
.orb { inset: 8px; } .orb-inner { inset: 6px; }
.orb-label { font-size: 15px; }
.wordmark-text { font-size: 40px; }
.wordmark-badge { width: 58px; height: 27px; font-size: 11px; }
.hero { margin-top: 40px; gap: 8px; }
.brand-row { margin-top: 10px; }
/* This one now also fires with the keyboard up, which is the moment the
card most needs to be compact. */
.login-popup { margin: 14px auto; padding: 16px; gap: 10px; }
.text-field, .submit-button { height: 48px; }
}
@media (max-width: 419px) {
.hero { width: calc(100% - 30px); gap: 13px; }
.wordmark-text { font-size: 43px; }
.wordmark-badge { width: 61px; height: 29px; font-size: 12px; }
.hero-descriptor { font-size: 10px; letter-spacing: 1.8px; }
/* Narrower gutters, on the layer: the card is `min(370px, 100%)` of
whatever the layer leaves it. */
.popup-layer { padding: 0 12px; }
}
/* The partner mark belongs in the step-down above with the rest of the hero:
a fixed 34 px is 7% of a 1280 px window but 24% of a 412 px phone, so
leaving it out did not keep it the same size — it kept it the same number
of pixels while everything beside it shrank.
Phone portrait only, and that is what the min-height is for. The
short-viewport size (26 px, up beside .partner-mark) is written earlier in
the file, so on a window that is both narrow and short it would lose the
cascade to this rule and undo the compaction the height is asking for.
The two conditions are made disjoint instead of left to fight. */
@media (max-width: 419px) and (min-height: 590px) {
.partner-mark { height: 33px; }
}
/* ═══════════════════════════════════════════════════════════════════════
WORKSPACE CHROME (qml/Main.qml, qml/AppTabButton.qml)
═══════════════════════════════════════════════════════════════════════ */
/* `.screen` hides by default and `.screen.is-active` reveals. An id selector
out-specifies both, so the flex layout has to hang off the active state --
otherwise the workspace paints over the login landing permanently. */
#workspace { background: var(--window-bg); }
#workspace.is-active { display: flex; flex-direction: column; }
/* The header holds the tab bar, so it is what sits under a status bar or a
landscape notch. Grow the box by the top inset rather than only padding
it: the tabs are centred in their own height, and padding alone would
push them off-centre by however tall the notch is. The background stays
full-bleed either way, which is the point of covering the viewport. */
.app-header {
position: relative;
flex: 0 0 calc(66px + var(--safe-top));
background: var(--header-bg);
padding: calc(2px + var(--safe-top)) calc(5px + var(--safe-right))
2px calc(5px + var(--safe-left));
z-index: 2;
}
/* The 2 px horizontal gradient rule under the header. */
.app-header::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: linear-gradient(90deg, #26344e 0%, #52617d 50%, #26344e 100%);
}
@media (max-height: 499px) { .app-header { flex-basis: 60px; } }
.tab-bar { display: flex; gap: 2px; height: 100%; }
.tab {
position: relative;
flex: 1 1 0; min-width: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px;
border: 0; background: none; cursor: pointer;
padding: 0 2px;
-webkit-tap-highlight-color: transparent;
}
.tab:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: -2px; border-radius: 8px; }
.tab-label {
font-size: var(--type-tab); font-weight: 500; color: var(--tab-idle);
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tab[aria-selected="true"] .tab-label { color: var(--tab-selected); font-weight: 600; }
/* The selected tab is lit from behind rather than underlined (D106). The
underline was a second badge for a state the icon and the label already
carry in colour, and it spent the bottom 5 px of a header that wanted to
be shorter. A glow says the same thing in the space the tab already
occupies.
The accents live here as channels rather than as `var(--accent-solo)`,
because the glow needs three alphas of one hue and `rgb(… / …)` is the
portable way to get them — color-mix is not on every iOS this app still
meets. Behind the content (`z-index: -1`) but still above the header's
own background: a negative-z child paints after its stacking context's
background, and .app-header is that context. */
.tab[data-accent="solo"] { --tab-glow: 255 111 145; } /* --accent-solo */
.tab[data-accent="multi"] { --tab-glow: 88 222 200; } /* --accent-multi */
.tab[data-accent="account"] { --tab-glow: 255 179 107; } /* --accent-account */
.tab::before {
content: ""; position: absolute; z-index: -1;
inset: 1px 3px;
border-radius: 13px;
background: radial-gradient(50% 74% at 50% 48%,
rgb(var(--tab-glow) / 26%) 0%,
rgb(var(--tab-glow) / 10%) 56%,
rgb(var(--tab-glow) / 0%) 78%);
opacity: 0;
transform: scale(0.88);
transition: opacity 170ms var(--ease-out), transform 170ms var(--ease-out);
}
.tab[aria-selected="true"]::before { opacity: 1; transform: none; }
.page-stack { position: relative; flex: 1 1 auto; min-height: 0; }
.page { position: absolute; inset: 0; display: none; }
.page.is-active { display: block; }
/* Each page owns a vertical gradient; they are what makes the tabs feel
like different rooms rather than one scrolling document. The hub blends
the two session families; the mode pages keep their family's room so
the old Solo/Multi identities survive as accents (D076). */
.page-hub { background: linear-gradient(180deg, #1c1428 0%, #121a2c 46%, #0c1624 100%); }
.page-solo { background: linear-gradient(180deg, #1c1428 0%, #11182b 42%, #0d1322 100%); }
.page-multi { background: linear-gradient(180deg, #10252c 0%, #0d1a26 48%, #0b1421 100%); }
.page-transcript { background: linear-gradient(180deg, #151a2c 0%, #0d1424 100%); }
.page-account { background: linear-gradient(180deg, #271b25 0%, #191620 48%, #11131d 100%); }
.page-scroll {
position: absolute; inset: 0;
overflow-y: auto; overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.page-column {
/* --page-gutter is the page padding plus both safe-area insets; see
css/tokens.css for why the insets are spent here and not on an
ancestor. */
width: min(760px, calc(100% - var(--page-gutter)));
margin: 0 auto;
/* The home indicator sits over the last row of a scrolled page. */
padding: var(--page-padding) 0 calc(var(--page-padding) + var(--safe-bottom));
display: flex; flex-direction: column;
}
/* ═══════════════════════════════════════════════════════════════════════
LANGUAGE PAIR (LanguageRoleLabel.qml, LanguagePicker.qml, SoloPage.qml)
═══════════════════════════════════════════════════════════════════════ */
.language-row {
display: flex; align-items: flex-start; gap: var(--row-spacing);
}
/* Multi's single row moved below the connect panel, where it needs the gap it
used to get for free as the first thing on the page. */
.page-multi .language-row { margin-top: 12px; }
/* D237 — sized by its words, never narrower than the old fixed slot:
Korean's 말할 언어 was cut to 말할 … in the 88 px slot at every width.
The picker beside it takes what is left. */
.role-label {
flex: 0 0 auto;
display: flex; align-items: center; gap: 9px;
height: 48px;
min-width: var(--role-label-width);
max-width: 45%;
}
.role-label span {
font-size: var(--type-body); font-weight: 600;
color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.language-picker {
--lift-radius: 17px;
--lift-g0: #364563; --lift-g1: #25324c; --lift-g2: #151c30;
--lift-mid: 48%;
--lift-border: #586b8a;
flex: 1 1 auto; min-width: 0;
height: 52px;
display: flex; align-items: center;
padding: 0 var(--field-pad-right) 0 var(--field-pad-left);
gap: var(--chevron-spacing);
}
.language-picker:hover:not(:disabled)::after { border-color: rgba(255, 142, 170, 0.47); }
.picker-value {
flex: 1 1 auto; min-width: 0;
text-align: left;
font-size: var(--type-value); font-weight: 500;
color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.language-picker:disabled .picker-value { color: var(--text-disabled); }
/* D107 — the swap moved off the seam between the two language rows and onto
the status card above them, where the sentence it answers already is
("speak, then tap Listen"). On the seam it was a 44 px control floating in
a 10 px gap, which read as decoration between two rows rather than as the
act that reverses them; on the card it is the card's one control, and the
pair it acts on is still the next thing down the page.
Square rather than the seam's full label-column width: it now sits beside
a line of text that owns the width, and a wide button there would read as
the card's primary act instead of its modifier. */
/* D117 removed the direction swap: the four keys declare the direction, so
there is nothing left to reverse. `.swap-button` went with it. */
/* ═══════════════════════════════════════════════════════════════════════
SESSION AUDIO CONTROLS (qml/SessionAudioControls.qml)
═══════════════════════════════════════════════════════════════════════ */
.session-controls { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; }
/* D122 moves Solo's waveform and server orbit into the mode header, where
they remain visible in every half. The transport keeps its established
height when it appears; there is no longer an empty instrument row to
balance against it. */
.session-controls.is-solo .advanced-transport {
min-height: 92px;
justify-content: center;
}
.action-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: start;
gap: var(--column-spacing);
height: 58px;
}
/* A 2-way room is a call, not a mixing console. Its timing and peer activity
are already legible in the card above, so Mute gets the full thumb-width
row and the three instrument dials disappear. Group keeps the full cluster;
Solo relocates its two relevant instruments into the header. */
.session-controls.is-duo .action-row {
grid-template-columns: minmax(0, 1fr);
height: 54px;
}
.session-controls.is-duo .capture-button { height: 54px; }
.session-controls.is-duo .indicator-cluster,
.session-controls.is-duo .buffer-readout { display: none; }
/* Post-session review: the room is gone, so the capture button, the VAD
meter and the peer indicator are promises the page can no longer keep.
The transport below stays — it serves the retained message. */
.session-controls.is-review .action-row { display: none; }
/* `display: grid` above outranks the UA stylesheet's `[hidden]` — the same
trap `.clear-button` and `.mode-row` both fall into. */
.action-row[hidden] { display: none; }
/* Solo between sessions (D055): same reasoning as `.is-review` above, one
stage earlier. There is no microphone to meter and no session to stop, but
the clip the last session left is still worth replaying and saving. */
.session-controls.is-idle .action-row { display: none; }
.capture-button, .clear-button {
height: 58px;
display: flex; align-items: center; justify-content: center;
}
/* Solo hides Clear outright (D055), and the `display: flex` just above
outranks the UA stylesheet's `[hidden]` rule — so the attribute on its own
would leave the button sitting there. Same trap, same fix, as
`.mode-row[hidden]` further down. */
.clear-button[hidden] { display: none; }
/* The resting face: no microphone yet, or one that is still coming up. It
used to wear a plum border a shade off the alarm colour, which on the
waiting screen — where this button is disabled and is the only control on
the page — read as a warning about a microphone that had not been asked
for yet. Now that pink means "the microphone is shut", neutral is the only
honest thing for "there is no microphone". */
.capture-button {
--lift-g0: #333f57; --lift-g1: #242e44; --lift-g2: #161d2e;
--lift-mid: 52%;
--lift-border: #5d6b86;
--lift-border-width: 1.5px;
--lift-highlight: rgba(255, 255, 255, 0.196);
}
/* A live, well-behaved microphone. Deliberately quiet: this is the normal
condition of every running session, and for most of a conversation it is
the state the button is in. It reads as "on" through an accent ring and a
lit glyph rather than through a filled alarm colour, so the loudest thing
on the page can go back to being whatever the user is meant to do next. */
.capture-button.is-live {
--lift-g0: #3d5566; --lift-g1: #26384a; --lift-g2: #141d2c;
--lift-border: var(--accent-multi);
--lift-highlight: rgba(255, 255, 255, 0.302);
}
/* The microphone is shut — muted, or faulted so nothing is leaving the
device. This is the one state worth shouting, because the person it
affects is usually still talking. */
.capture-button.is-alert {
--lift-g0: #ff89a4; --lift-g1: #ef5279; --lift-g2: #bd244d;
--lift-border: rgba(255, 255, 255, 0.753);
--lift-highlight: rgba(255, 255, 255, 0.565);
}
.capture-button[hidden] { display: none; }
.capture-icon[hidden] { display: none; }
.clear-button {
--lift-g0: #3a4965; --lift-g1: #27334d; --lift-g2: #161d30;
--lift-border: #7185a5;
--lift-border-width: 1.5px;
--lift-highlight: rgba(255, 255, 255, 0.259);
}
.clear-button:disabled { --lift-border: #4b5871; --lift-highlight: rgba(255,255,255,0.125); }
.button-inner { display: flex; align-items: center; gap: 9px; }
.button-label { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.capture-button.is-alert .button-label { color: #fff7fa; }
.capture-button:disabled .button-label,
.clear-button:disabled .button-label { color: #697189; }
@media (max-width: 520px) { .button-label { font-size: 14px; } .button-inner { gap: 5px; } }
/* Record dot → stop square. */
.record-glyph {
width: 23px; height: 23px;
display: flex; align-items: center; justify-content: center;
}
.record-glyph i {
display: block; width: 17px; height: 17px;
background: var(--accent-solo);
border: 2px solid rgba(255, 255, 255, 0.376);
border-radius: 50%;
transition: border-radius var(--state-duration) var(--ease-out),
background var(--state-duration) var(--ease-out);
}
/* Solo only. The button now sits on the calm `is-live` face, so the stop
square carries the colour instead of the whole pill — the shape still says
"stop", the page no longer shouts it. */
.capture-button.is-live .record-glyph i {
border-radius: 3px; background: var(--accent-solo);
border-color: rgba(255, 255, 255, 0.502);
}
.capture-button:disabled .record-glyph i { background: #697189; }
/* ── Indicator cluster: VAD, peer turn, buffering ── */
.indicator-cluster { display: flex; }
.indicator { width: 48px; height: 58px; display: flex; align-items: center; justify-content: center; }
/* Recessed, where every button on this row is raised. These are meters, not
controls — the VAD waveform, the peer's turn, the buffering orbit — and as
flat discs beside a lifted Stop button they read as empty holes waiting for
something rather than as instruments showing something. Sinking them makes
"you cannot press this" a property of the drawing instead of a fact you
discover by trying. */
/* Sinking them was not enough on a phone: at 42 px they matched the transport
circles one row down almost exactly, so "same size, same shape, one row
apart" said *button* louder than the inset shadow said meter. They are
smaller and dimmer than any control on the page now, which is the size
difference an instrument is allowed to have. */
.indicator { width: 40px; }
.indicator-disc {
position: relative;
width: 34px; height: 34px; border-radius: 50%;
background: #0a0f1b;
border: 1px solid #1e2739;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
display: flex; align-items: center; justify-content: center;
transition: border-color var(--hover-duration) var(--ease-out);
}
.indicator.is-active .indicator-disc { border-color: var(--accent-utility); }
/* One box drives every number below it. The Solo header draws this same
orbit larger (D143), and a second hand-computed set of coordinates is a
second chance to put 120° in the wrong place — so the radius is kept as
the QML's 8.5-in-25 ratio and the dots are placed off it. The literals
these calc()s replace are reproduced exactly at the default size. */
.orbit {
--orbit-size: 25px;
--orbit-dot: 5px;
--orbit-lead: 6px;
--orbit-r: calc(var(--orbit-size) * 0.34);
--orbit-c: calc(var(--orbit-size) / 2);
position: relative;
width: var(--orbit-size); height: var(--orbit-size);
}
.orbit.is-spinning { animation: orbit-spin 880ms linear infinite; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.orbit i {
position: absolute; border-radius: 50%;
width: var(--orbit-dot); height: var(--orbit-dot);
background: var(--text-secondary); opacity: 0.34;
}
.orbit.is-spinning i { background: var(--accent-utility); }
/* Three dots on that radius at 0°/120°/240° — the positions the QML
Repeater computes (cos 120° = -0.5, sin 120° = 0.866). */
.orbit i:nth-child(1) {
width: var(--orbit-lead); height: var(--orbit-lead);
left: calc(var(--orbit-c) + var(--orbit-r) - var(--orbit-lead) / 2);
top: calc(var(--orbit-c) - var(--orbit-lead) / 2);
}
.orbit i:nth-child(2) {
left: calc(var(--orbit-c) - var(--orbit-r) * 0.5 - var(--orbit-dot) / 2);
top: calc(var(--orbit-c) + var(--orbit-r) * 0.866 - var(--orbit-dot) / 2);
}
.orbit i:nth-child(3) {
left: calc(var(--orbit-c) - var(--orbit-r) * 0.5 - var(--orbit-dot) / 2);
top: calc(var(--orbit-c) - var(--orbit-r) * 0.866 - var(--orbit-dot) / 2);
}
.orbit.is-spinning i:nth-child(1) { opacity: 1; }
.orbit.is-spinning i:nth-child(2) { opacity: 0.78; }
.orbit.is-spinning i:nth-child(3) { opacity: 0.56; }
/* ── PeerActivityIndicator.qml ──────────────────────────────────────────
D039's turn-taking cue. Two glyphs sharing one disc: a speaker that
pulses while they are talking, and messenger-style composing dots while
their words are being translated. The distinction is the feature — the
listener learns a reply is coming seconds before any audio arrives — so
collapsing both into one "busy" state would lose it. */
.peer-indicator .indicator-disc { position: relative; }
.peer-indicator.is-active .indicator-disc {
border-color: var(--accent-peer);
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5),
0 0 0 3px rgba(126, 167, 255, 0.14),
0 0 16px rgba(126, 167, 255, 0.32);
}
.peer-speaker {
/* Drawn dim at rest rather than removed: the slot must not collapse and
reflow the cluster every time the peer stops talking. */
opacity: 0.4;
transition: opacity 120ms var(--ease-out);
}
.peer-indicator.is-speaking .peer-speaker {
opacity: 1;
animation: peer-speak 860ms ease-in-out infinite;
}
.peer-indicator.is-translating .peer-speaker { display: none; }
@keyframes peer-speak {
50% { transform: scale(1.12); }
}
.typing-dots { display: none; gap: 4px; }
.peer-indicator.is-translating .typing-dots { display: flex; }
.typing-dots i {
width: 6px; height: 6px; border-radius: 3px;
background: var(--accent-peer);
opacity: 0.25;
/* One fixed-length cycle per dot with a staggered lead-in, so the wave
travels left to right and never drifts out of phase — three
independent loops of different lengths would. */
animation: typing-dot 1470ms ease-in-out infinite;
}
.typing-dots i:nth-child(2) { animation-delay: 170ms; }
.typing-dots i:nth-child(3) { animation-delay: 340ms; }
@keyframes typing-dot {
0% { opacity: 0.25; }
16% { opacity: 1; }
33% { opacity: 0.25; }
100% { opacity: 0.25; }
}
/* ── Multi conversation cue ─────────────────────────────────────────────
D039's first version asked a tiny peer instrument to carry the whole
conversational handoff. On a phone that reduced the most important state
in Multi to three 6 px dots.
This card is the primary cue: phase name, instruction, live caption and
local delivery feedback. The colour changes reinforce the words but never
carry meaning alone. "Ready" is permission, not ownership — the room
remains full duplex. */
/* ═══ The 2-way status widget (D164) ═══════════════════════════════════
`.mode-status` does the frame — height, padding, radius, hairline, the
14/600 text, and the `is-restarting` / `is-caution` / `is-error` states
every mode page shares. What is left here is only what a call has and a
one-phone page does not.
Gone with the redesign: a 44 px signal disc drawing animated bars, dots
and a tick; a breathing radial glow behind the card; and a border, a
background gradient and a left rail all re-tinted per phase. It was a
second visual language for the job the other three pages did plainly, and
the one card in the app a user had to learn twice.
What survives of the per-phase colour is a 3 px rail, because the phase is
real information and losing it entirely would cost the glance that told a
speaker "still translating" from across the table. Everything else about
the card now looks the same on every page. */
.turn-cue {
--turn-color: var(--accent-peer);
--turn-rgb: 126, 167, 255;
/* The rows below the frame — caption, clip status, delay lesson — wrap
onto full-width lines of their own rather than squeezing beside the
icon. `.mode-status` is a flex row; this is the one thing it needs
adding for a surface that sometimes carries more than two lines. */
flex-wrap: wrap;
/* `.session-controls` supplies the gap to the microphone button; the
card's own page margin would double it. */
margin-bottom: 0;
box-shadow: inset 3px 0 0 var(--turn-color);
transition: box-shadow var(--state-duration) var(--ease-out);
}
.turn-cue[hidden] { display: none; }
.turn-cue[data-phase="translating"] {
--turn-color: var(--accent-settings);
--turn-rgb: 167, 139, 250;
}
.turn-cue[data-phase="playing"] {
--turn-color: #8bd8ff;
--turn-rgb: 139, 216, 255;
}
.turn-cue[data-phase="ready"] {
--turn-color: var(--accent-multi);
--turn-rgb: 88, 222, 200;
}
.turn-cue[data-phase="mic-off"],
.turn-cue[data-phase="mic-blocked"] {
--turn-color: var(--warning);
--turn-rgb: 255, 179, 107;
}
.turn-cue[data-phase="mic-starting"],
.turn-cue[data-phase="reconnecting"],
.turn-cue[data-phase="waiting"],
.turn-cue[data-phase="ending"] {
--turn-color: var(--text-secondary);
--turn-rgb: 174, 185, 214;
}
.turn-cue[data-phase="self-speaking"],
.turn-cue[data-phase="self-sending"],
.turn-cue[data-phase="self-delivered"] {
--turn-color: var(--accent-multi);
--turn-rgb: 88, 222, 200;
}
.turn-cue[data-phase="overlap"] {
--turn-color: var(--warning);
--turn-rgb: 255, 179, 107;
}
.turn-cue[data-phase="mic-fault"],
.turn-cue[data-phase="media-down"] {
--turn-color: #ffb6c2;
--turn-rgb: 255, 182, 194;
}
/* The card's own state classes outrank the phase rail: an unreadable
microphone and a dead one are both about to be acted on, and the rail
arguing with the border was the sort of detail that makes a warning look
decorative. */
.turn-cue.is-caution { --turn-color: var(--warning); }
.turn-cue.is-error { --turn-color: #ff6f91; }
/* A `` in a card that already sets 14/600: without this it renders a
step heavier than Solo's line, which is the whole thing this redesign was
trying to stop doing. */
.turn-cue-title { font-weight: 600; }
/* Captions and delivery feedback stay inside the surface that explains their
timing. Full-width rows under the frame, so a long translated script uses
the whole phone rather than the column beside the icon. (D165 took the
one-time delay lesson out of this stack: see js/core/settings.js.) */
.turn-cue-transcript,
.turn-cue-status {
flex: 1 0 100%;
min-width: 0;
}
.turn-cue-transcript {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 1px;
padding: 9px 10px;
border: 1px solid rgba(var(--turn-rgb), 0.24);
border-radius: 10px;
background: rgba(5, 12, 22, 0.36);
}
.turn-cue-transcript[hidden],
.turn-cue-status[hidden] { display: none; }
.turn-cue-transcript.is-live { border-color: rgba(var(--turn-rgb), 0.58); }
/* D237 — your own words (what the model heard) read a step quieter than
the other person's: they are a check, not the conversation. */
.turn-cue-transcript.is-own .turn-cue-transcript-text {
color: var(--text-secondary);
}
.turn-cue-transcript-who {
color: var(--turn-color);
font-size: 10.5px;
line-height: 1.2;
font-weight: 750;
}
.turn-cue-transcript-text {
color: var(--text-primary);
font-size: 14px;
line-height: 1.4;
overflow-wrap: anywhere;
}
.turn-cue-status {
color: var(--text-secondary);
font-size: 10.5px;
line-height: 1.3;
}
.turn-cue-status.is-error { color: #ffb6c2; font-weight: 700; }
@media (max-width: 399px) {
.turn-cue { gap: 8px; padding: 9px 10px; }
}
/* ── Transport row ── */
/* ── The take-turns person cards (D121, refining D118's columns) ────────
Each person owns a separate surface. The previous design put both columns
inside one recessed well; the four raised faces then competed with that
well, the picker faces, and the centre divider, and at phone width the
result looked like one dense 2×4 keypad. Two quiet cards keep the hand-off
model but make the ownership boundary do the grouping work.
Action faces use `.lift` through its variables. Do not paint a second
gradient on the button itself: `.lift::after` is the visible face, and a
second face underneath it is what made the older button graphic muddy. */
.turn-desk {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 10px 0;
}
.turn-desk[hidden] { display: none; }
.turn-column {
--person-rgb: 255, 111, 145;
position: relative;
display: flex; flex-direction: column; gap: 9px;
min-width: 0;
padding: 10px;
border: 1px solid rgba(var(--person-rgb), 0.24);
border-radius: 20px;
background:
linear-gradient(145deg, rgba(var(--person-rgb), 0.08), transparent 42%),
linear-gradient(180deg, #1b2236 0%, #12192b 100%);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.turn-column[data-turn-side="b"] { --person-rgb: 126, 167, 255; }
.turn-column::before {
content: "";
position: absolute; left: 16px; right: 16px; top: 0; height: 1px;
background: rgba(var(--person-rgb), 0.44);
}
.turn-person-head {
min-width: 0;
display: flex; align-items: center; gap: 8px;
}
.turn-person-marker {
flex: 0 0 auto;
width: 25px; height: 25px;
display: grid; place-items: center;
border-radius: 50%;
border: 1px solid rgba(var(--person-rgb), 0.62);
background: rgba(var(--person-rgb), 0.13);
color: rgb(var(--person-rgb));
font-size: 12px; font-weight: 800;
}
.turn-person {
font-size: 13px; font-weight: 700;
color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.turn-column .language-picker {
height: 48px;
padding: 0 10px 0 12px;
--lift-radius: 14px;
--lift-g0: #303b54;
--lift-g1: #222c42;
--lift-g2: #151c2d;
--lift-border: rgba(var(--person-rgb), 0.42);
}
.turn-column .picker-value { font-size: 15px; }
.turn-key-stack {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.turn-key {
min-height: 62px;
padding: 0 10px;
display: flex; align-items: center; justify-content: center; gap: 8px;
color: var(--text-secondary);
--lift-radius: 14px;
--lift-g0: #2b354c;
--lift-g1: #1e283c;
--lift-g2: #131a2a;
--lift-border: #465674;
--lift-highlight: rgba(255, 255, 255, 0.18);
--lift-inset: 18px;
}
.turn-key-icon {
flex: 0 0 auto;
width: 27px; height: 28px;
display: grid; place-items: center;
}
.turn-key canvas { display: block; }
.turn-key:disabled { color: #66728c; }
.turn-key:disabled .turn-key-icon { opacity: 0.58; }
.turn-key-verb {
font-size: 15px; font-weight: 700;
min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.turn-key.is-selected {
color: var(--text-primary);
}
.turn-key.is-selected[data-turn-role="speak"] {
--lift-g0: #814155;
--lift-g1: #5d2d40;
--lift-g2: #391c2a;
--lift-border: rgba(255, 111, 145, 0.78);
--lift-highlight: rgba(255, 255, 255, 0.25);
}
.turn-key.is-selected[data-turn-role="listen"] {
--lift-g0: #2c6b62;
--lift-g1: #1d5049;
--lift-g2: #11332f;
--lift-border: rgba(88, 222, 200, 0.78);
--lift-highlight: rgba(255, 255, 255, 0.25);
}
/* Server-confirmed and unplayed. The dot is the whole visual treatment: a
pill and a tinted button face crowded the compact two-column controls.
The button's accessible name still announces "New audio". */
.turn-key-new {
position: absolute;
top: 10px; right: 11px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent-utility);
box-shadow: 0 0 0 3px rgba(88, 222, 200, 0.12),
0 0 10px rgba(88, 222, 200, 0.44);
}
.turn-key-new[hidden] { display: none; }
@media (max-width: 399px) {
.turn-desk { gap: 7px; }
.turn-column { gap: 8px; padding: 8px; border-radius: 18px; }
.turn-person-head { gap: 6px; }
.turn-person-marker { width: 23px; height: 23px; }
.turn-column .language-picker { padding-left: 9px; padding-right: 7px; }
.turn-column .picker-value { font-size: 14px; }
.turn-key { min-height: 60px; gap: 6px; padding: 0 7px; }
.turn-key-icon { width: 25px; height: 27px; }
.turn-key-verb { font-size: 14px; }
.turn-key-new { top: 8px; right: 8px; }
}
@media (min-width: 600px) {
.turn-key-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.transport-row { display: flex; align-items: center; gap: 8px; }
.transport-spacer { flex: 1 1 auto; }
/* D118 — Solo runs the bar *inside* the transport row, in the gap between
Replay and Save, so playback is one row instead of two. The row is the
whole of that mode's transport and it was 52 px of buttons with a 58 px
bar under it; on a phone that second row is what pushed the tail below the
fold. The bar keeps its own height off the row so the circles stay on one
optical centre line, and `.seek-row` is left in the template for Multi,
whose expanded playback tools are a deliberately separate block. */
.transport-row > .seek-bar { height: 52px; }
.seek-row[hidden] { display: none; }
.advanced-transport {
display: flex;
flex-direction: column;
gap: 5px;
}
.advanced-transport[hidden] { display: none; }
/* Multi's default playback shape mirrors a phone call: one useful shortcut,
then an explicitly secondary way into the complete retained-audio tools. */
.multi-replay-row {
display: flex;
align-items: center;
gap: 9px;
}
.multi-replay-row[hidden] { display: none; }
.replay-last-button,
.replay-tools-button {
min-height: 46px;
border-radius: 13px;
color: var(--text-primary);
font-family: inherit;
font-weight: 700;
}
.replay-last-button {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
--lift-g0: #37665f;
--lift-g1: #234b46;
--lift-g2: #132d2b;
--lift-border: rgba(88, 222, 200, 0.66);
}
.replay-last-button canvas { flex: 0 0 auto; }
.replay-tools-button {
flex: 0 0 auto;
min-width: 106px;
padding: 0 13px;
border: 0;
background: none;
color: var(--text-secondary);
cursor: pointer;
--lift-g0: #2d3a50;
--lift-g1: #202a3d;
--lift-g2: #151d2d;
--lift-border: #4d607c;
--lift-radius: 13px;
}
.replay-last-button:disabled,
.replay-tools-button:disabled { opacity: 0.46; cursor: default; }
@media (max-width: 399px) {
.multi-replay-row { gap: 7px; }
.replay-last-button { gap: 5px; font-size: 13px; }
.replay-tools-button { min-width: 92px; padding: 0 9px; font-size: 11px; }
}
/* Clear lives on the transport row rather than in the action row — it acts
on the retained buffer, and that is what this row is about — but at the
far right end, as far from Play as the row allows. 52 px, not the action
row's 58, so its face lines up with the circular media faces beside it.
The word is the whole control now, so the padding is what gives it its
size: 18 px a side puts a ~70 px button around a ~34 px word, which reads
as deliberately wider than the 50 px circles beside it rather than
accidentally different. It no longer sheds anything at phone widths — a
label that disappears on the commonest screen there is was never really
the label — and at 390 px the row still leaves a ~65 px spacer, which is
plainly a gap between two groups rather than an uneven gutter. */
.transport-row .clear-button {
flex: 0 0 auto;
height: 52px;
padding: 0 18px;
margin-left: 4px;
}
@media (max-width: 420px) {
.transport-row { gap: 7px; }
.transport-row .clear-button { padding: 0 15px; margin-left: 0; }
}
/* SoloMediaButton is a circle with no dark base: the face itself carries
the offset, so ::before is suppressed. */
/* Square, so the face is a circle. The face takes `calc(100% - 6px)` in both
axes, which off a 50×52 box gave 44×46 — a two-pixel egg under
`border-radius: 50%`, small enough to pass a diff and visible as
irregularity on the row the eye spends most of its time on. The height is
the number that cannot move (46 of face, plus the 5 px of dark base the
reveal leaves below it, as `.lift` does), so the width follows it. */
.media-button {
position: relative;
width: 52px; height: 52px; min-width: 52px;
border: 0; background: none; padding: 0; cursor: pointer;
flex: 0 0 auto;
-webkit-tap-highlight-color: transparent;
}
.media-face {
position: absolute; left: 3px; top: 1px;
width: calc(100% - 6px); height: calc(100% - 6px);
border-radius: 50%;
border: 1.5px solid #7085a4;
background: linear-gradient(180deg, #35445e 0%, #202c42 52%, #111827 100%);
transition: transform var(--press-duration) var(--ease-out);
}
.media-face::after {
content: ""; position: absolute; inset: 3px;
border-radius: 50%; border: 1px solid rgba(79, 99, 128, 0.157);
}
.media-button.is-emphasized .media-face {
border-color: rgba(255, 255, 255, 0.69);
background: linear-gradient(180deg, #82ead7 0%, var(--accent-utility) 52%, #32aa96 100%);
}
.media-button.is-emphasized .media-face::after { border-color: rgba(255, 255, 255, 0.22); }
.media-button canvas {
position: absolute; left: 50%; top: 50%;
margin: -14px 0 0 -12px;
transition: transform var(--press-duration) var(--ease-out);
}
.media-button:active:not(:disabled) .media-face,
.media-button:active:not(:disabled) canvas { transform: translateY(var(--press-offset)); }
.media-button:disabled { cursor: default; }
.media-button:disabled .media-face { opacity: 0.58; }
.media-button:focus-visible { outline: none; }
.media-button:focus-visible .media-face { border-color: var(--text-primary); border-width: 2px; }
/* ── Seek bar (qml/SoloMediaSeekBar.qml) ── */
.seek-row { display: flex; align-items: center; gap: 8px; }
.seek-bar {
flex: 1 1 auto; min-width: 0;
position: relative; height: 58px;
display: flex; align-items: center;
cursor: pointer;
border: 0; background: none; padding: 0;
/* Unconditional, not only while .is-dragging: the class lands after the
first pointermove, and by then the browser may already have claimed
the gesture for a page scroll and cancelled the drag. */
touch-action: none;
}
/* SoloMediaSeekBar.qml: an 11 px track on a 13 px box, so a dark base shows
below it — the same offset-base idea as every other raised surface here.
The inner 2 px rule near the top is the track's own highlight. */
.seek-track {
position: relative;
width: 100%; height: 11px; border-radius: 5.5px;
background: #090f18;
border: 1px solid #343c54;
box-shadow: 0 4px 0 -2px rgba(0, 0, 0, 0.659); /* #a8000000 */
}
.seek-track::before {
content: "";
position: absolute; left: 2px; right: 2px; top: 1px;
height: 2px; border-radius: 1px;
background: rgba(37, 49, 69, 0.086); /* #16253145 */
}
/* Once there is buffered audio the track picks up the utility accent. */
.seek-bar.has-buffer .seek-track { border-color: #28564f; }
.seek-bar.has-buffer .seek-track::before {
background: rgba(77, 141, 130, 0.188); /* #304d8d82 */
}
.seek-fill {
position: absolute; left: 0; top: 0; bottom: 0;
width: 0;
border-radius: 4px;
background: var(--accent-utility);
transition: width 120ms linear;
}
.seek-bar.is-replay .seek-fill { background: var(--accent-solo); }
/* The QML handle is `visible: mode !== 0 && boundedDuration > 0`, so at rest
there is no knob at all — the empty track is just a track. */
.seek-knob {
position: absolute; top: 50%; left: 0;
width: 14px; height: 14px; margin: -7px 0 0 -7px;
border-radius: 50%;
background: #eaf0ff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
transition: left 120ms linear;
display: none;
}
.seek-bar.has-buffer .seek-knob { display: block; }
.seek-bar:disabled { cursor: default; opacity: 0.5; }
/* The knob follows the finger directly during a drag; the 120 ms ease that
smooths playback progress would lag behind it. */
.seek-bar.is-dragging .seek-knob { transition: none; transform: scale(1.12); }
/* D023's drag tooltip. Committing on release means nothing moves while the
finger is down, so without a readout the drag looks broken. */
.seek-tip {
position: absolute; left: 50%; bottom: 100%;
transform: translateX(-50%);
margin-bottom: 9px; padding: 5px 9px;
border-radius: 9px;
background: #f7f8ff;
border: 1px solid var(--accent-solo);
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
color: #171222;
white-space: nowrap;
display: none;
}
.seek-bar.is-dragging .seek-tip { display: block; }
/* Now the action row's third cell, where Clear used to be. Right-aligned
rather than centred in its 1fr column: it reads as a readout hung off the
row's edge, and centring it would leave it floating mid-gap. The face
reveal is subtracted from the height so it sits on the buttons' optical
centre line, not 2.5 px below it. */
.buffer-readout {
justify-self: end;
height: calc(58px - var(--face-reveal));
display: flex; flex-direction: column;
align-items: flex-end; justify-content: center;
padding-right: 2px;
}
.buffer-readout[hidden] { display: none; }
.buffer-caption {
font-size: 9px; font-weight: 800; letter-spacing: 0.09em;
line-height: 1.1;
color: var(--text-secondary); opacity: 0.72;
text-transform: uppercase; white-space: nowrap;
}
.buffer-caption:empty { display: none; }
.buffer-duration {
min-width: 44px;
display: flex; align-items: center; justify-content: flex-end;
font-family: var(--font-mono); font-size: 15px; font-weight: 700;
color: var(--text-secondary);
}
.buffer-duration.has-audio { color: var(--text-primary); }
/* Riding the present, in follow-along's version of this readout (D056). The
accent is the same one the seek fill and the transport wear, so "LIVE" and
a full bar are visibly the same statement; a lag figure stays in the plain
readout colour, because being a few seconds behind is the normal condition
of this mode and not a warning. */
.buffer-duration.is-live { color: var(--accent-utility); }
/* The last 10 s before the retention cap trims the clip's head — the same
amber the warning notification wears, one step short of the error pink. */
.buffer-duration.is-near-cap { color: #ffd09b; }
/* ═══════════════════════════════════════════════════════════════════════
TRANSCRIPT PANEL (ExpandableTranscriptPanel.qml, TranscriptHistoryView.qml)
═══════════════════════════════════════════════════════════════════════ */
/* The panel's own fill is #0b101e on both pages; `cardColor` (#121b2c on
Solo, #11242d on Multi) is the turn cards alone, which is why they read as
raised against it. */
.transcript-panel {
margin-top: 12px;
border-radius: 18px;
background: #0b101e;
border: 1px solid #26344f;
overflow: hidden;
}
/* ExpandableTranscriptPanel.qml uses the same header recipe as the Connect
panel: the collapsed blue-grey gradient, the open teal one, a 1 px top
highlight inset 28 px, and (open) an 18 px flat strip plus a hairline rule
where the body starts. */
.transcript-header {
display: flex; align-items: center; gap: 11px;
width: 100%; height: 54px;
padding: 0 var(--panel-padding);
border: 0; cursor: pointer;
border-radius: 18px;
-webkit-tap-highlight-color: transparent;
background-repeat: no-repeat;
background-image:
linear-gradient(rgba(255, 255, 255, 0.227), rgba(255, 255, 255, 0.227)),
linear-gradient(180deg, #35445f 0%, #253149 50%, #161d30 100%);
background-position: center 1px, 0 0;
background-size: calc(100% - 28px) 1px, 100% 100%;
}
.transcript-panel.is-open .transcript-header {
background-image:
linear-gradient(rgba(255, 255, 255, 0.396), rgba(255, 255, 255, 0.396)),
linear-gradient(rgba(111, 127, 139, 0.263), rgba(111, 127, 139, 0.263)),
linear-gradient(#142c2a, #142c2a),
linear-gradient(180deg, #355c58 0%, #254641 50%, #142c2a 100%);
background-position: center 1px, 0 100%, 0 100%, 0 0;
background-size:
calc(100% - 28px) 1px, 100% 1px, 100% 18px, 100% 100%;
}
.transcript-header:active > * { transform: translateY(3px); }
.transcript-header > * { transition: transform 90ms var(--ease-out); }
.transcript-doc { flex: 0 0 auto; }
.transcript-title {
flex: 1; text-align: left;
font-size: 16px; font-weight: 700; color: var(--text-primary);
}
.transcript-chevron {
flex: 0 0 auto;
transition: transform 170ms var(--ease-out);
}
.transcript-panel.is-open .transcript-chevron { transform: rotate(180deg); }
/* ── TranscriptHistoryView.qml ──────────────────────────────────────────
The panel body: a header (title, storage line, count pill), the Show
filter row, the actions toolbar, then the list. Every value below is the
QML's own. `--transcript-accent` carries the page tint so Solo's pink and
Multi's teal drive the same rules. */
.transcript-body { padding: 0 var(--panel-padding) var(--panel-padding); }
/* `center`, not `flex-start`: with the "Transcript history" title gone the
text side is one 11 px line, and top-aligning it against a 30 px pill left
the line hanging off the pill's shoulder. */
.transcript-head {
display: flex; align-items: center; gap: 10px;
padding-top: 12px;
border-top: 1px solid color-mix(in srgb, var(--transcript-accent) 32%, transparent);
}
.transcript-head-text { flex: 1 1 auto; min-width: 0; }
.transcript-storage {
margin: 2px 0 0;
font-size: 11px; color: #8f9bb5;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.transcript-count {
flex: 0 0 auto;
padding: 5px 10px; border-radius: 999px;
font-weight: 700;
color: var(--transcript-accent);
background: color-mix(in srgb, var(--transcript-accent) 16%, transparent);
}
.transcript-filters, .transcript-actions {
display: flex; align-items: center; gap: 5px;
margin-top: 10px;
}
.transcript-filters-label, .transcript-actions-label {
font-size: 11px; color: #8f9bb5;
}
.transcript-actions-label {
flex: 1 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* FilterButton: the shared lift, but with its own three-stop face and a
selection state that swaps both the gradient and the border. */
.filter-button {
position: relative;
flex: 1 1 0; min-width: 0; height: 36px;
border: 0; background: none; padding: 0;
color: var(--text-primary); font-size: 12px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.filter-button::before {
content: ""; position: absolute; inset: 0 0 3px 0;
border-radius: 11px;
border: 1px solid #465572;
background: linear-gradient(180deg, #34425c 0%, #222e45 52%, #141b2c 100%);
transition: transform var(--press-duration) var(--ease-out);
}
.filter-button > span { position: relative; }
.filter-button:active::before,
.filter-button:active > span { transform: translateY(var(--press-offset)); }
.filter-button.is-selected::before {
border-width: 1.5px;
border-color: var(--filter-accent, var(--transcript-accent));
background: linear-gradient(180deg, #42625f 0%, #294b47 52%, #17322f 100%);
}
.toolbar-button {
flex: 0 0 auto;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border: 1px solid #3a4a63; border-radius: 12px;
background: #1a2230;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.toolbar-button:active { transform: translateY(2px); }
.toolbar-button:disabled { opacity: 0.45; cursor: default; transform: none; }
.transcript-action-message {
margin: 8px 0 0;
text-align: center; font-size: 12px;
color: var(--transcript-accent);
}
.transcript-scroll {
max-height: 0;
overflow-y: auto;
transition: max-height var(--state-duration) var(--ease-out);
}
.transcript-panel.is-open .transcript-scroll { max-height: 420px; }
.transcript-empty {
padding: 26px var(--panel-padding);
text-align: center;
}
.transcript-empty-title {
margin: 0;
font-size: 14px; font-weight: 700; color: #d9e2f4;
}
/* The panel can open before the fonts its stored rows are written in have
arrived, and an empty panel reads as a bug rather than as a wait. Same busy
dots the connecting screen uses, tinted with the panel's own accent. */
.transcript-loading { padding: 24px var(--panel-padding); text-align: center; }
.transcript-loading .busy-dots i { background: var(--transcript-accent); }
.transcript-list {
display: flex; flex-direction: column; gap: 9px;
margin: 0; padding: 10px 0 4px; list-style: none;
}
.session-head { margin: 7px 0 0; }
.session-title { margin: 0; font-size: 15px; font-weight: 700; }
.session-pair { margin: 2px 0 0; font-size: 11px; color: #8f9bb5; }
/* "For frequently repeated transcript rows … omit RectangularShadow and use
only the offset base, face gradient, and hairline." No blur per row. */
.turn {
padding: 10px;
border-radius: 12px;
background: var(--transcript-card, #151c30);
}
.turn.is-incomplete { border: 1px solid #ffca6b; }
/* One line: speaker, state, languages, time, and the actions toggle. The
speaker no longer takes the slack — the languages do — because a name is a
fixed short string and a language pair is the part that has to be allowed
to run out of room and ellipsis rather than push the clock off the row. */
.turn-meta {
display: flex; align-items: baseline; gap: 8px;
font-size: 11px; color: #8f9bb5;
margin-bottom: 6px;
}
.turn-speaker {
flex: 0 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 14px; font-weight: 700; color: var(--text-primary);
}
.turn-langs {
flex: 1 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.turn-time { flex: 0 0 auto; }
.turn-flag { font-size: 10px; font-weight: 700; color: #ffca6b; }
.turn-label { font-size: 10px; font-weight: 700; color: #8f9bb5; margin-bottom: 3px; }
.turn-label.is-translation { color: var(--transcript-accent); }
.turn-source { font-size: 15px; color: var(--text-primary); margin: 0; }
/* In the compact both-languages view the original demotes to a lead-in. */
.turn.has-both .turn-source { font-size: 15px; color: #bdc7dc; }
.turn-rule { height: 1px; margin: 6px 0; background: #2a344d; }
.turn-target { font-size: 15px; color: var(--text-primary); margin: 0; }
.turn-source[dir="rtl"], .turn-target[dir="rtl"] { text-align: right; }
/* ── the full layout (the phone sheet) ──────────────────────────────────
All that separates the two now is the card's own generosity. The meta line
used to be sheet-only, on the grounds that the in-page panel had no width
for a speaker row plus two caption lines — but there are no caption lines
any more, and the one line that replaced all three is also where a row's
Copy and Share live, so hiding it inline would have put them out of reach
on every desktop. */
.transcript-sheet .turn { padding: 14px; border-radius: 17px; }
/* ── per-message actions ────────────────────────────────────────────────
The whole card is the tap target; ⋯ is that target made visible and
focusable. 30 px rather than the toolbar's 44: it repeats on every row,
and the row itself is the generous hit area. */
.turn-more {
flex: 0 0 auto;
width: 30px; height: 24px; margin: -4px -4px -4px 0;
display: flex; align-items: center; justify-content: center;
border: 0; border-radius: 8px; background: none;
color: #8f9bb5; font-size: 15px; line-height: 1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.turn.is-selected .turn-more { color: var(--transcript-accent); }
/* Outside the card, not on its edge: an incomplete turn already carries a
1 px amber border there, and an inset selection ring landed exactly on it
and mixed into a third colour that meant neither thing. The 9 px row gap
has room for it. */
.turn.is-selected {
outline: 1px solid color-mix(in srgb, var(--transcript-accent) 55%, transparent);
outline-offset: 2px;
}
.turn-actions {
display: flex; gap: 6px;
margin-top: 9px; padding-top: 8px;
border-top: 1px solid #2a344d;
}
.turn-action {
flex: 1 1 0;
height: 34px; border-radius: 10px;
border: 1px solid #3a4a63; background: #1a2230;
color: var(--text-primary); font-size: 12px; font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.turn-action:active { transform: translateY(2px); }
/* A draft is a turn being spoken right now (§3.6). Dashed rather than solid
so it never reads as a finished record, and it carries no timestamp —
the one it would get is the moment it started, which is not when it
happened. */
.turn.is-draft {
border: 1px dashed color-mix(in srgb, var(--transcript-accent) 55%, transparent);
background: color-mix(in srgb, var(--transcript-card, #151c30) 88%, #ffffff);
}
.turn-flag.is-live { color: var(--transcript-accent); }
/* D015's session grouping, which the Qt build declared and never rendered. */
.session-head:not(:first-child) { margin-top: 9px; }
/* ═══════════════════════════════════════════════════════════════════════
TRANSCRIPT SHEET (ExpandableTranscriptPanel.qml's transcriptPopup)
Below 600 px the panel's body is re-parented in here. Nesting a scrolling
list inside a scrolling page is the actual problem — on a phone the two
fight for every touch — so the sheet takes the whole viewport and there is
only one scroller again.
═══════════════════════════════════════════════════════════════════════ */
/* The shell is shared with the connect sheet: same geometry, same insets,
same header bar. Only the body differs, and each sheet styles its own. */
.full-sheet {
position: fixed; inset: 0;
z-index: 60;
display: flex; flex-direction: column;
background: linear-gradient(180deg, #17243a 0%, #0b1020 100%);
/* Covers the whole viewport, so it owns all four insets: the keyboard is
never up in here, but the status bar, the home indicator and — turned
sideways — the notch all are. */
padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.full-sheet[hidden] { display: none; }
/* The page underneath must not scroll behind a modal sheet. */
body.has-sheet #workspace { overflow: hidden; }
/* ── Swipe left to close (js/app.js bindSwipeToClose) ──────────────────────
`pan-y` is the whole contract: the browser keeps vertical panning, which is
the sheet's own scrolling, and leaves horizontal to the listener. Without
it a downward flick that drifts sideways would be both a scroll and a
drag. Only the connect sheet is bound; the declaration lives with it. */
.connect-sheet { touch-action: pan-y; }
/* Under the finger there is no transition — the sheet has to be exactly where
the touch is. It comes back, or leaves, on a released one. */
.full-sheet { transition: transform 170ms var(--ease-out); }
/* No transition under the finger, and no text selection under a mouse doing
the same drag. */
.full-sheet.is-swiping {
transition: none;
-webkit-user-select: none; user-select: none;
}
/* Leaving accelerates rather than settling: the finger has already decided,
and OutCubic on the way out reads as the sheet hesitating. */
.full-sheet.is-leaving { transition: transform 170ms cubic-bezier(0.4, 0, 1, 1); }
.full-sheet-header {
flex: 0 0 auto;
display: flex; align-items: center;
height: 60px;
padding-left: var(--panel-padding);
background: #11192a;
border-bottom: 1px solid #465572;
}
.full-sheet-title {
flex: 1 1 auto; min-width: 0; margin: 0;
font-size: 19px; font-weight: 700; color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.full-sheet-close {
flex: 0 0 52px; height: 52px;
background: none; border: 0; cursor: pointer;
font-size: 25px; line-height: 1; color: var(--text-secondary);
}
.full-sheet-close:active { color: var(--transcript-accent, #5dd6c0); }
/* The transcript owns the viewport on a phone, but it does not own the call.
This fixed-height strip keeps the covered conversation state visible and
leaves the list below as the sheet's one vertical scroller. */
.transcript-live-strip {
flex: 0 0 auto;
display: flex; align-items: stretch; gap: 8px;
margin: 10px 12px 0;
}
.transcript-live-strip[hidden] { display: none; }
.transcript-live-return,
.transcript-live-mute,
.transcript-live-action {
min-height: 60px;
border: 1px solid rgba(88, 222, 200, 0.42);
border-radius: 15px;
background: linear-gradient(180deg, #17373a 0%, #10292d 100%);
color: var(--text-primary);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.transcript-live-return {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; gap: 9px;
padding: 8px 9px 8px 10px;
text-align: left;
}
.transcript-live-return:active,
.transcript-live-mute:active,
.transcript-live-action:active {
background: #1b4648;
transform: translateY(1px);
}
.transcript-live-signal {
position: relative;
flex: 0 0 34px; width: 34px; height: 34px;
display: grid; place-items: center;
border-radius: 50%;
background: rgba(88, 222, 200, 0.12);
}
.transcript-live-signal i {
position: absolute; right: 0; bottom: 1px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--transcript-live-accent, var(--accent-multi));
box-shadow: 0 0 0 2px #10292d;
}
.transcript-live-copy {
flex: 1 1 auto; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.transcript-live-copy strong,
.transcript-live-copy > span {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.transcript-live-copy strong { font-size: 13px; line-height: 1.25; }
.transcript-live-copy > span {
color: #aebdd0; font-size: 11px; line-height: 1.25;
}
.transcript-live-chevron {
flex: 0 0 auto;
color: var(--accent-multi); font-size: 25px; line-height: 1;
}
.transcript-live-mute,
.transcript-live-action {
flex: 0 0 66px;
display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 2px;
padding: 5px;
}
.transcript-live-mute {
color: #ffd8e2;
border-color: rgba(255, 111, 145, 0.48);
background: linear-gradient(180deg, #42243a 0%, #2e1a2b 100%);
}
/* Follow Along's Back-10 / Skip-to-live pair keeps the strip's teal shell:
neither is destructive, and the pink coat is mute's alone. */
.transcript-live-action { color: var(--text-primary); }
.transcript-live-action:disabled {
opacity: 0.45; cursor: default; transform: none; background: none;
}
.transcript-live-mute[hidden],
.transcript-live-action[hidden] { display: none; }
.transcript-live-mute span,
.transcript-live-action span {
max-width: 58px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 10px; font-weight: 700;
}
.transcript-live-mute.is-muted {
color: #fff7fa;
background: linear-gradient(180deg, #81334f 0%, #59253c 100%);
}
/* A reader who scrolls away from the tail keeps their place. This appears
above the list rather than inside it, so the arriving row cannot push its
own recovery control off screen. */
.transcript-new-message {
position: absolute;
z-index: 2;
right: calc(var(--safe-right) + 18px);
bottom: calc(var(--safe-bottom) + 16px);
min-height: 42px;
display: inline-flex; align-items: center; gap: 7px;
padding: 0 15px;
border: 1px solid rgba(88, 222, 200, 0.62);
border-radius: 999px;
background: #173b3b;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
color: #eafffb;
font-size: 12px; font-weight: 750;
cursor: pointer;
}
.transcript-new-message[hidden] { display: none; }
.transcript-new-message:active {
background: #215452;
transform: translateY(1px);
}
/* The invite sheet is an interruption to the live conversation, not a new
destination. A conventional, labelled back affordance makes that
relationship obvious and keeps the way back within an easy 48 px target. */
.connect-sheet .full-sheet-header {
height: 68px;
padding: 8px 14px 8px 10px;
gap: 12px;
}
.connect-sheet-return {
flex: 0 0 auto;
min-width: 92px; min-height: 48px;
padding: 0 15px 0 11px;
display: inline-flex; align-items: center; justify-content: center;
gap: 7px;
border: 1px solid rgba(88, 222, 200, 0.48);
border-radius: 15px;
background: rgba(88, 222, 200, 0.12);
color: var(--accent-multi);
font: inherit; font-size: 15px; font-weight: 750;
letter-spacing: 0.01em;
cursor: pointer;
}
.connect-sheet-return:active {
background: rgba(88, 222, 200, 0.24);
transform: translateY(1px);
}
.connect-sheet-return-icon {
flex: 0 0 22px;
transform: rotate(90deg);
}
.full-sheet-body {
flex: 1 1 auto; min-height: 0;
display: flex; flex-direction: column;
padding: 12px;
}
/* The panel's own collapse animation and height cap do not apply in here:
the sheet *is* the expanded state, and it gets the whole viewport. */
.transcript-sheet-body .transcript-scroll {
flex: 1 1 auto; min-height: 0;
max-height: none;
transition: none;
}
.transcript-sheet-body .transcript-body { padding-bottom: 0; }
/* ═══════════════════════════════════════════════════════════════════════
MULTI — connect panel and incoming subtitle
═══════════════════════════════════════════════════════════════════════ */
/* ExpandableConnectPanel.qml. The QML draws the outline as a separate rect
stacked above everything (z: 10) so it stays crisp over the header
gradient; a border on the container plus a clipped header does the same. */
/* The guest-review card (the last survivor of the idle stages D076
retired — the start paths live on the Speak hub now). */
.multi-idle {
margin-top: 10px;
display: flex; flex-direction: column; gap: 12px;
}
.multi-idle[hidden] { display: none; }
.multi-idle .primary-button { width: 100%; }
.page-multi.is-multi-idle .page-column > #multi-language-row {
margin-top: 0;
margin-bottom: 2px;
}
/* The one Solo page serves both entrances (D076): `.is-follow` swaps the
Speak/Listen device pair for the Speaker/Listen-in people pair — and
takes the swap seam with it, because handing the phone over is a
turn-based act (the follow swap is chooseLanguage's ordinary edit). */
.page-solo:not(.is-follow) [data-solo-lane="follow"] { display: none; }
.page-solo.is-follow [data-solo-lane="turns"] { display: none; }
/* D231 — the hands-free lane hides both of the others; they hide it. */
.page-solo.is-converse [data-solo-lane="turns"],
.page-solo.is-converse [data-solo-lane="follow"] { display: none; }
.page-solo:not(.is-converse) [data-solo-lane="converse"] { display: none; }
/* D234 — the lane fills the page and the conversation takes whatever
height is left, so the key row sits on the bottom edge of any phone:
the feed's own cap (52vh, D231) measured the viewport with the
browser's bars retracted, ignored the rows around it, and on a phone
pushed the keys below the fold. The status card leaves the view
(screen readers keep its live line; the header's microphone is its
face), and so do the other lanes' header instruments, which never
light in this one.
D235 — and the page itself is not a scroll view (Denis: the
conversation is, the page is not): on a screen too short for the lane
the conversation gives up height, never the keys, and a phone on its
side tightens the rows around it (the short-screen block below). */
.page-solo.is-converse .page-scroll { overflow: hidden; }
.page-solo.is-converse .page-column { height: 100%; }
.page-solo.is-converse .mode-head-activity { display: none; }
.page-solo.is-converse #solo-recent { display: none; }
.page-solo.is-converse #solo-status {
position: absolute; width: 1px; height: 1px; min-height: 0;
padding: 0; margin: -1px; border: 0;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
/* ── Take Turns, hands free (D231) ──
Two people at the top, the conversation in the middle, one key at the
bottom. The bubbles borrow the group feed's shape at phone width; a
Person A bubble sits left in A's tint, a Person B bubble right in B's,
so a glance says whose words they are without reading the name. */
.converse-desk {
display: flex; flex-direction: column; gap: 10px;
flex: 1 1 0; min-height: 0; margin: 6px 0 0;
}
.converse-people {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.converse-person {
--person-rgb: 255, 111, 145;
display: flex; align-items: center; gap: 8px; min-width: 0;
}
.converse-person[data-converse-side="b"] { --person-rgb: 88, 222, 200; }
.converse-person .language-picker { flex: 1 1 auto; min-width: 0; }
.converse-feed {
list-style: none; margin: 0; padding: 10px;
display: flex; flex-direction: column; gap: 8px;
flex: 1 1 0; min-height: 0; overflow-y: auto;
/* D235 — a fling past either end stays in the conversation. */
overscroll-behavior-y: contain;
border: 1px solid var(--hairline);
border-radius: var(--radius-standard, 14px);
background: rgba(13, 20, 36, 0.45);
}
.converse-empty {
margin: auto; padding: 18px 8px; text-align: center;
color: var(--text-secondary); font-size: var(--type-body);
}
/* D234 — the conversation's last line when it ended on its own; alone
in an empty feed it takes the placeholder's place. */
.converse-sys {
align-self: center; max-width: 92%;
padding: 4px 10px; text-align: center;
color: var(--text-secondary); font-size: var(--type-caption, 12px);
}
.converse-sys.is-error { color: #ffd5df; }
.converse-sys[hidden] { display: none; }
.converse-empty[hidden] + .converse-sys { margin: auto; font-size: var(--type-body); }
.converse-msg {
--person-rgb: 255, 111, 145;
position: relative;
align-self: flex-start;
max-width: 88%;
padding: 8px 11px 7px;
border: 1px solid rgba(var(--person-rgb), 0.28);
border-radius: 16px 16px 16px 5px;
background: rgba(var(--person-rgb), 0.08);
cursor: default;
}
.converse-msg.is-b {
--person-rgb: 88, 222, 200;
align-self: flex-end;
border-radius: 16px 16px 5px 16px;
}
.converse-msg.is-replayable { cursor: pointer; }
.converse-msg.is-playing {
box-shadow: 0 0 0 2px rgba(var(--person-rgb), 0.55);
/* D236 — a tap on the message being read skips it. */
cursor: pointer;
}
/* D234 — a message still being heard belongs to nobody yet: full width
and grey until the gateway settles whose it is, then it moves to that
side in that person's tint. The live translation (D233) reads inside
it. No bubble carries a name: the side and the tint say whose. */
.converse-msg.is-pending {
--person-rgb: 174, 185, 214;
align-self: stretch;
max-width: none;
border-radius: 14px;
}
.converse-msg-text {
color: var(--text-primary); font-size: var(--type-body);
white-space: pre-wrap; overflow-wrap: anywhere;
}
.converse-msg.is-listening .converse-msg-text,
.converse-msg.is-translating .converse-msg-text { color: var(--text-secondary); }
.converse-msg-translation {
margin-top: 4px; padding-top: 4px;
border-top: 1px solid rgba(var(--person-rgb), 0.22);
color: var(--text-primary); font-size: var(--type-body);
white-space: pre-wrap; overflow-wrap: anywhere;
}
.converse-msg-note {
margin-top: 3px; font-size: var(--type-caption, 12px);
color: var(--text-secondary); font-style: italic;
}
.converse-msg.is-lost .converse-msg-note,
.converse-msg.is-untranslated .converse-msg-note { color: #ffb6c2; font-style: normal; }
/* D233 — the translation of the message so far reads as provisional
until the message ends; the minute's card sits over the conversation,
in the speaker's tint, large enough to read from across the table. */
.converse-msg-translation.is-partial { color: var(--text-secondary); }
.converse-stage {
position: relative; min-width: 0;
flex: 1 1 0; min-height: 0;
display: flex; flex-direction: column;
}
.converse-wait {
--person-rgb: 255, 111, 145;
position: absolute; inset: 10px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; padding: 16px; text-align: center;
border: 2px solid rgba(var(--person-rgb), 0.75);
border-radius: var(--radius-standard, 14px);
background: rgba(13, 20, 36, 0.93);
}
.converse-wait[data-converse-side="b"] { --person-rgb: 88, 222, 200; }
.converse-wait[hidden] { display: none; }
.converse-wait-text {
color: #fff; font-size: clamp(26px, 7vw, 34px); font-weight: 700;
line-height: 1.15; overflow-wrap: anywhere;
}
.converse-wait-count {
color: rgba(var(--person-rgb), 0.95);
font-size: clamp(32px, 10vw, 48px); font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums;
}
.converse-bar {
display: grid; grid-template-columns: auto 1fr 1.6fr; gap: 10px; align-items: stretch;
}
.converse-pause {
display: flex; align-items: center; gap: 4px;
padding: 0 4px;
border: 1px solid var(--hairline); border-radius: 14px;
background: rgba(13, 20, 36, 0.55);
}
.converse-pause button {
width: 34px; height: 34px; padding: 0;
border: 0; border-radius: 12px; background: transparent;
color: var(--text-primary); font-size: 20px; line-height: 1;
}
.converse-pause button:disabled { color: var(--text-secondary); opacity: 0.55; }
.converse-pause-value {
min-width: 44px; text-align: center;
font-size: var(--type-caption, 12px); color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
.converse-key {
min-height: 62px; padding: 0 10px;
display: flex; align-items: center; justify-content: center; gap: 8px;
color: var(--text-secondary);
--lift-radius: 14px;
--lift-g0: #2b354c;
--lift-g1: #202a3f;
font-size: var(--type-body); font-weight: 600;
}
.converse-key:disabled { opacity: 0.55; }
.converse-main { color: var(--text-primary); }
.converse-main[data-converse-action="done"],
.converse-main[data-converse-action="start"] {
--lift-g0: #ff6f91; --lift-g1: #d9466e; color: #fff;
}
/* D234 — Done is pink only while there is a message to end (somebody
talking, the microphone open); otherwise it wears the grey of the keys
beside it, so the pink key is always the one worth tapping. */
.converse-main[data-converse-action="done"]:disabled {
--lift-g0: #2b354c; --lift-g1: #202a3f;
color: var(--text-disabled); opacity: 1;
}
/* D236 — Skip while the phone reads aloud, in the blue of its voice
(the screen's edge and the header's ring wear it too). */
.converse-main[data-converse-action="skip"] {
--lift-g0: #7ac9ff; --lift-g1: #4aa3e0; color: #0b1826;
}
.converse-mute[aria-pressed="true"] { color: #ffb6c2; }
.converse-key-verb { white-space: nowrap; }
.converse-key-icon { display: inline-flex; }
.converse-key-icon canvas { display: block; }
/* D235 — a screen this short (a phone on its side) keeps the whole lane
in view without a page scroll: the page's margins, the header's gap,
the pickers and the keys tighten so the conversation keeps a strip
between them, and the minute's card lies along the conversation
instead of standing up in it. */
@media (max-height: 500px) {
.page-solo.is-converse .page-column {
padding-top: 8px; padding-bottom: calc(8px + var(--safe-bottom));
}
.page-solo.is-converse .mode-head { margin-bottom: 4px; }
.converse-desk { margin-top: 0; gap: 8px; }
.converse-person .language-picker { height: 44px; }
.converse-key { min-height: 48px; }
.converse-wait { inset: 0; flex-direction: row; gap: 14px; padding: 4px 14px; }
.converse-wait-text { font-size: 22px; }
.converse-wait-count { font-size: 28px; }
}
/* D236 — a narrow phone keeps the whole key row on the screen, whatever
its words (Korean's Skip is four syllables; a muted Mute says two
words in Korean): the pause control, the keys' padding and the row's
gaps tighten, and Mute's label may take two lines. The −/+ keep their
34 px. */
@media (max-width: 374px) {
.converse-bar { gap: 6px; }
.converse-pause { padding: 0 2px; gap: 2px; }
.converse-pause-value { min-width: 32px; }
.converse-key { padding: 0 6px; gap: 5px; }
.converse-mute .converse-key-verb {
white-space: normal; word-break: keep-all; text-align: center;
line-height: 1.15;
}
}
/* D234 — the lane's microphone, in the header's centre: a disc in the
header buttons' idiom holding one glyph. Pink with two rings rippling
out while the phone listens, and a glow that swells with the voice it
hears (`--mic-level`, from the level feed) — nothing else on the row
moves, so motion there means an open microphone. Grey in a blue ring
while the phone talks and the microphone is paused; amber and struck
through when muted; struck through in pink when the microphone or the
gateway ended the conversation. A tap mutes and unmutes. */
.converse-mic {
--mic-rgb: 135, 148, 175;
--mic-level: 0;
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 48px; height: 48px;
padding: 0; border: 0; background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.converse-mic:disabled { cursor: default; }
.converse-mic > span {
position: absolute; inset: 3px;
border-radius: 50%;
pointer-events: none;
}
.converse-mic-disc {
display: grid; place-items: center;
background: rgba(13, 20, 36, 0.55);
border: 1px solid var(--hairline, #2a3550);
transition: border-color var(--hover-duration) var(--ease-out),
transform 120ms var(--ease-out);
}
.converse-mic:active:not(:disabled) .converse-mic-disc { transform: scale(0.94); }
.converse-mic:focus-visible { outline: none; }
.converse-mic:focus-visible .converse-mic-disc {
outline: 2px solid var(--accent-utility); outline-offset: 2px;
}
.converse-mic-ring { opacity: 0; border: 2px solid rgba(var(--mic-rgb), 0.65); }
.converse-mic-glow {
background: radial-gradient(closest-side, rgba(var(--mic-rgb), 0.6),
rgba(var(--mic-rgb), 0));
opacity: calc(var(--mic-level) * 1.2);
transform: scale(calc(1 + var(--mic-level) * 0.6));
transition: opacity 100ms linear, transform 100ms linear;
}
.converse-mic[data-converse-mic="listening"] { --mic-rgb: 255, 111, 145; }
.converse-mic[data-converse-mic="listening"] .converse-mic-disc,
.converse-mic[data-converse-mic="error"] .converse-mic-disc {
border-color: rgba(255, 111, 145, 0.75);
}
.converse-mic[data-converse-mic="listening"] .converse-mic-ring {
animation: converse-mic-ripple 2.4s ease-out infinite;
}
.converse-mic[data-converse-mic="listening"] .converse-mic-ring + .converse-mic-ring {
animation-delay: 1.2s;
}
@keyframes converse-mic-ripple {
from { transform: scale(1); opacity: 0.85; }
to { transform: scale(1.5); opacity: 0; }
}
.converse-mic[data-converse-mic="connecting"] canvas {
animation: converse-mic-breathe 1.4s ease-in-out infinite alternate;
}
@keyframes converse-mic-breathe { from { opacity: 0.35; } to { opacity: 1; } }
.converse-mic[data-converse-mic="paused"] .converse-mic-disc {
border-color: rgba(122, 201, 255, 0.8);
}
.converse-mic[data-converse-mic="muted"] .converse-mic-disc {
border-color: rgba(255, 179, 107, 0.8);
}
/* D236 — while the phone reads a translation aloud its microphone is
closed, so a word said over the voice is never heard: the edge of the
whole screen glows in the voice's blue until the microphone opens
again, on whichever tab is showing. It is the Service Counter's page
edge (the frame, the guest turn's weight and slow pulse) in the colour
the Counter gives reading aloud; the Counter's green says "speak now",
the opposite. It takes no tap: Skip is the key, and the bubble being
read.
D237 — a 2-way call wears the same edge while the other person's
translation plays and the microphone is ducked under it (only while
the microphone is live: a muted one has nothing to lose). */
#workspace.is-duo-voice::after,
#workspace.is-converse-voice::after {
content: "";
position: absolute;
z-index: 30;
inset: max(3px, var(--safe-top)) max(3px, var(--safe-right))
max(3px, var(--safe-bottom)) max(3px, var(--safe-left));
border: 5px solid #7ac9ff;
border-radius: 16px;
box-shadow: inset 0 0 28px rgba(122, 201, 255, 0.32),
0 0 18px rgba(122, 201, 255, 0.5);
pointer-events: none;
animation: converse-voice-glow 1500ms ease-in-out infinite alternate;
}
@keyframes converse-voice-glow {
from { opacity: 0.66; box-shadow: inset 0 0 18px rgba(122, 201, 255, 0.24), 0 0 10px rgba(122, 201, 255, 0.36); }
to { opacity: 1; box-shadow: inset 0 0 34px rgba(122, 201, 255, 0.42), 0 0 22px rgba(122, 201, 255, 0.58); }
}
@media (prefers-reduced-motion: reduce) {
#workspace.is-converse-voice::after { animation: none; }
}
@media (forced-colors: active) {
#workspace.is-converse-voice::after { border-color: Highlight; box-shadow: none; }
}
/* D237: the 2-way edge keeps both promises too. */
@media (prefers-reduced-motion: reduce) {
#workspace.is-duo-voice::after { animation: none; }
}
@media (forced-colors: active) {
#workspace.is-duo-voice::after { border-color: Highlight; box-shadow: none; }
}
.connect-panel[hidden] { display: none; }
.connect-panel {
position: relative;
margin-top: 4px;
border-radius: 18px;
background: transparent;
border: 1px solid rgba(92, 113, 141, 0.667); /* #5c718daa */
overflow: hidden;
}
.connect-panel.is-open {
border-width: 1.5px;
border-color: rgba(93, 214, 192, 0.545); /* #8b5dd6c0 */
}
/* The header is the standard raised surface, but with its own two gradients:
a blue-grey one when collapsed and a teal one when open, plus the 1 px top
highlight inset 28 px, and (open only) an 18 px flat strip along the bottom
so the header squares off where the body begins. */
/* The gradient is on the row, not on the toggle: the End button shares the
header now, and a background that stopped where the toggle stops would cut
the raised surface off two thirds of the way across. */
.connect-head {
display: flex; align-items: center;
height: 54px;
border-radius: 18px;
background-repeat: no-repeat;
background-image:
linear-gradient(rgba(255, 255, 255, 0.227), rgba(255, 255, 255, 0.227)),
linear-gradient(180deg, #35445f 0%, #253149 50%, #161d30 100%);
background-position: center 1px, 0 0;
background-size: calc(100% - 28px) 1px, 100% 100%;
}
.connect-panel.is-open .connect-head {
background-image:
linear-gradient(rgba(255, 255, 255, 0.396), rgba(255, 255, 255, 0.396)),
linear-gradient(#142c2a, #142c2a),
linear-gradient(180deg, #355c58 0%, #254641 50%, #142c2a 100%);
background-position: center 1px, 0 100%, 0 0;
background-size: calc(100% - 28px) 1px, 100% 18px, 100% 100%;
}
.connect-toggle {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; gap: 11px;
height: 100%;
padding: 0 8px 0 var(--panel-padding);
border: 0; cursor: pointer;
background: none;
}
/* `pressOffset`: the content translates, the background does not. */
.connect-toggle:active > * { transform: translateY(3px); }
.connect-toggle > * { transition: transform 90ms var(--ease-out); }
/* Reads as a pill so it is unmistakably the action, not a third status word
sitting beside the two above it. */
.connect-cta {
flex: 0 0 auto;
padding: 5px 11px;
border-radius: 999px;
border: 1px solid rgba(88, 222, 200, 0.45);
background: rgba(88, 222, 200, 0.13);
color: var(--accent-multi);
font-size: 13px; font-weight: 700; white-space: nowrap;
}
.connect-cta[hidden] { display: none; }
.connect-panel.is-open .connect-cta { opacity: 0; }
/* A guest's header: it still names the room and still carries the way out,
it just does not open. Losing the press animation and the chevron is what
stops it looking like it should. */
.connect-toggle.is-static { cursor: default; }
.connect-toggle.is-static:active > * { transform: none; }
.connect-toggle.is-static .connect-chevron { visibility: hidden; }
/* The one destructive control in the header, so it is the one thing in it
that is not on the disclosure's press animation — a glyph that sinks with
the row beside it reads as part of the row.
It used to be grey until pressed, on the argument that an always-red × on
a live session reads as an error state. It does not: red here is the same
thing it is on the microphone button two rows down — this ends something —
and grey made the only way out of a conversation the quietest mark in the
panel. It is now the header's one coloured glyph, on its own tinted
ground, at 38 px rather than 26. */
.connect-end {
flex: 0 0 auto;
width: 52px; height: 44px;
margin-right: 8px;
display: flex; align-items: center; justify-content: center;
/* A chip inset from the edge, where there used to be a hairline rule
against the panel's own corner. The rule was there to say where the row
stops being a disclosure; a tinted, separated shape says it louder, and
it does not have to be talked out of the 18 px radius the head curves
away with. */
border: 1px solid rgba(255, 255, 255, 0.48); border-radius: 14px;
background: linear-gradient(180deg, #ef5c80 0%, #c52d55 100%);
box-shadow: 0 4px 0 #761a36, inset 0 1px rgba(255, 255, 255, 0.3);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform var(--press-duration) var(--ease-out),
filter var(--state-duration) var(--ease-out);
}
.connect-end canvas { display: block; }
.connect-end:active {
transform: translateY(3px);
box-shadow: 0 1px 0 #761a36, inset 0 1px rgba(255, 255, 255, 0.2);
}
.connect-end:focus-visible { outline: 2px solid #fff2f5; outline-offset: 2px; }
.connect-end[hidden] { display: none; }
.connect-dish { flex: 0 0 auto; }
.connect-heading {
flex: 1; min-width: 0;
display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
}
.connect-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.connect-status {
font-size: 11px; color: var(--text-secondary);
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.connect-chevron {
flex: 0 0 auto;
transition: transform 170ms var(--ease-out);
}
.connect-panel.is-open .connect-chevron { transform: rotate(180deg); }
.connect-body {
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height 220ms var(--ease-out), opacity 150ms linear;
}
.connect-panel.is-open .connect-body { max-height: 620px; opacity: 1; }
/* Inside the sheet the panel is no longer an ancestor, so the `is-open` rule
above cannot reach the body and it would sit collapsed at zero height. The
sheet *is* the open state: no cap, no fade, no animation to sit through. */
.connect-sheet-body .connect-body {
max-height: none; opacity: 1; overflow-y: auto;
transition: none;
}
.connect-sheet { --transcript-accent: var(--accent-multi); }
/* The QR wants the room the sheet just bought it, and the way out belongs at
the bottom of the scroll rather than floating over it. */
.connect-sheet-body .connect-waiting,
.connect-sheet-body .connect-live { gap: 16px; }
.connect-sheet-body .qr-card { width: min(320px, 74vw); margin: 0 auto; }
.connect-sheet-body .connect-copy { font-size: 12px; }
/* Ending the session is not the next step after Copy link; it is the opposite
of everything above it. Inline, the panel border did the separating. */
.connect-sheet-body .connect-body > .primary-button {
margin-top: 20px;
border-top: 0;
}
.connect-waiting, .connect-live {
padding: 12px;
display: flex; flex-direction: column; gap: 12px;
}
.connect-copy { margin: 0; font-size: 11px; color: var(--text-secondary); }
.connect-copy.center { text-align: center; }
/* `sessionActionButton`: a flat teal fill with a bright border, not a
gradient — it darkens rather than scales on press. */
.primary-button {
height: 46px; border-radius: 14px;
background: #184f48;
border: 1px solid rgba(88, 222, 200, 0.533); /* #8858dec8 */
color: var(--text-primary); font-size: 15px; font-weight: 700;
cursor: pointer;
transition: background-color var(--press-duration) var(--ease-out);
}
.primary-button:active { background: #1f6f64; }
.primary-button:disabled { background: #1a2230; cursor: default; }
/* Hosting flips it to the destructive "End conversation" colours. */
/* Scoped to the body rather than the panel: it is the body that carries the
button, and the body is re-parented into the sheet below 600 px. */
.connect-body.is-live .primary-button,
.connect-body.is-waiting .primary-button {
background: #4a2438;
border-color: rgba(255, 111, 145, 0.533); /* #88ff6f91 */
}
.connect-body.is-live .primary-button:active,
.connect-body.is-waiting .primary-button:active { background: #6a3048; }
/* `showInviteQrButton`: outlined and secondary — it re-opens the invite
after a guest leaves, so it must not compete with the session action. */
.ghost-button {
width: 100%;
height: 44px; border-radius: 12px;
background: transparent;
border: 1px solid #3a4a63;
color: var(--text-secondary); font-size: 13px;
cursor: pointer;
}
.ghost-button:active { background: #1a2230; }
/* The two Multi recovery buttons. Not ghosts: they appear only when
something is broken, and the affordance has to read as the way out rather
than as another secondary option. */
.recovery-button {
width: 100%;
height: 44px; border-radius: 12px;
margin-top: 2px;
background: #1a2a36;
border: 1px solid rgba(88, 222, 200, 0.29);
color: var(--text-primary); font-size: 14px; font-weight: 700;
cursor: pointer;
}
.recovery-button:active { background: #2a3d4a; }
.recovery-button[hidden] { display: none; }
.invite-row { display: flex; gap: 8px; }
/* InviteButton. Share carries the accent on a phone; where no share sheet
exists, Copy inherits it instead — hence `.is-primary` rather than a rule
keyed on position. */
.invite-button {
flex: 1 1 0; min-width: 0;
height: 44px; border-radius: 12px;
background: transparent;
border: 1px solid #3a4a63;
color: var(--text-secondary); font-size: 13px; font-weight: 700;
cursor: pointer;
}
.invite-button:active { background: #1a2230; }
.invite-button.is-primary {
background: #184f48;
border-color: rgba(88, 222, 200, 0.533);
color: var(--text-primary);
}
.invite-button.is-primary:active { background: #1f6f64; }
/* The QR is a button because tapping it enlarges it. `cardSize` in the QML
is clamped to [200, 288] and follows the panel width. */
.qr-card {
align-self: center;
width: clamp(200px, 100%, 288px); aspect-ratio: 1;
padding: 15px; /* the code's quiet zone */
border: 0; border-radius: 12px;
background: #ffffff;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.qr-card canvas { display: block; width: 100%; height: 100%; }
.qr-card:active { filter: brightness(0.94); }
/* The affordance that replaced "Tap the code to enlarge it for scanning."
Four viewfinder brackets — the one shape both platforms' camera apps use
for this exact gesture, so it needs no sentence.
Outside the white card, not inside it: the card's 15 px padding is the
code's quiet zone, and it is already tighter than the four-module
recommendation. Marks in there would be bought with scan reliability.
The negative inset stays well within .connect-waiting's own 12 px, so
.connect-body's overflow never clips it. Eight gradients, two per
corner — one element, and no support surprises on old Safari. */
.qr-card { position: relative; }
.qr-card::after {
content: "";
position: absolute; inset: -7px;
pointer-events: none;
--bracket: rgba(88, 222, 200, 0.62);
background-repeat: no-repeat;
background-image:
linear-gradient(var(--bracket), var(--bracket)),
linear-gradient(var(--bracket), var(--bracket)),
linear-gradient(var(--bracket), var(--bracket)),
linear-gradient(var(--bracket), var(--bracket)),
linear-gradient(var(--bracket), var(--bracket)),
linear-gradient(var(--bracket), var(--bracket)),
linear-gradient(var(--bracket), var(--bracket)),
linear-gradient(var(--bracket), var(--bracket));
background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px,
16px 2px, 2px 16px, 16px 2px, 2px 16px;
background-position:
left top, left top, right top, right top,
left bottom, left bottom, right bottom, right bottom;
transition: opacity var(--press-duration) var(--ease-out);
}
.qr-card:active::after { opacity: 0.45; }
.connect-expiry {
margin: 0 12px 12px;
text-align: center;
font-size: 11px; color: var(--text-secondary);
}
/* The expiry line and the session action sit below the state blocks rather
than inside one, because both survive the waiting → connected switch. They
are the only direct children of the body, so they carry their own gutter. */
.connect-body > .primary-button {
display: block;
width: calc(100% - 24px);
margin: 0 12px 12px;
}
/* ── The connect header's second row ──────────────────────────────────────
The peer used to be the first thing inside the panel body, which below
600 px means the first thing inside a full-screen sheet — and the sheet now
closes itself the moment the guest arrives, so that is the one moment the
row was guaranteed not to be on screen. As a header row it survives the
collapse, which is the state a conversation is actually held in.
It continues the header's raised surface rather than sitting on the page:
two rows of one block, so the panel grows downward instead of the header
appearing to sprout a card. Both gradients have an open variant for the
same reason the head does — teal while the body is out. */
/* ═══ The peer half of the language row (D164) ══════════════════
It used to be the second row of the connect panel, with that panel's
raised gradient and a hairline joining it to the head above. The panel is
gone from the call screen and this came down to sit beside the picker, so
it drops the seam and the gradient and becomes what it is: the right-hand
end of one row. No background of its own — the picker beside it is the
lit control, and a second filled block on the same row would compete with
it for the tap. */
.peer-row {
flex: 0 1 auto;
display: flex; align-items: center; gap: 9px;
min-width: 0;
height: 52px;
padding-left: 2px;
}
.peer-row[hidden] { display: none; }
.peer-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.peer-name {
min-width: 0;
font-size: 14px; font-weight: 700;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Amber rather than the session teal, and deliberately not red: a room that
passes audio through is working exactly as designed and faster than a
translated one — it is just not doing the thing the app is for, which is
worth noticing and is nobody's error. */
.peer-badge {
position: relative;
flex: 0 0 auto;
padding: 2px 8px 3px;
border-radius: 999px;
border: 1px solid rgba(230, 176, 90, 0.5);
background: rgba(230, 176, 90, 0.12);
font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
color: #e8bd76;
white-space: nowrap;
/* It is a