/* Shared app surfaces, adapted from the supplied ARMY V5 study. The prototype's
   device frame, sample content and simulated OS controls do not belong in the app. */
@font-face { font-family: 'UX OneUI'; src: url('/assets/fonts/oneui-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'UX OneUI'; src: url('/assets/fonts/oneui-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'UX OneUI'; src: url('/assets/fonts/oneui-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'UX OneUI'; src: url('/assets/fonts/oneui-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'UX Sharp'; src: url('/assets/fonts/sharp-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'UX Sharp'; src: url('/assets/fonts/sharp-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'UX Sharp'; src: url('/assets/fonts/sharp-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

body.ux-ui {
  --bg: #f4f4f6; --surface: #fff; --surface-2: #ededf1; --surface-3: #e3e3e8;
  --fg: #252525; --fg-2: #6b6b72; --fg-3: #6b6b72; --line: rgba(0,0,0,.065);
  --accent: #111; --accent-2: var(--accent); --accent-soft: var(--surface-2); --brand: #252525;
  --me-bubble: #252525; --me-text: #fff; --ai-bubble: #e6e6ea; --ux-rule: #d9d9de; --r: 30px; --r-sm: 18px;
  --ok: #347b22; --ok-soft: #e5f7d7; --warn: #b4420b; --warn-soft: #fff0e6;
  --bad: #bc2943; --bad-soft: #fff0f3; --ux-orange: #e65b17;
  --ux-lime: #d8f65c; --ux-lime-ink: #111; --ux-muted: #a5a5ac;
  --device-online: #2ee879; --device-online-ink: #19783b;
  /* a screen being driven live: the design's red LIVE dot and the dark box a phone's capture sits in */
  --live-dot: #e5484d; --live-screen: #1f1f22;
  --ux-glass: rgba(255,255,255,.82); --ux-shadow: 0 8px 28px rgba(30,30,45,.055), inset 0 0 0 1px rgba(0,0,0,.035);
  --ux-card-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 8px 22px rgba(20,20,40,.06); --ux-check: #1e8e5a;
  /* a done step's mark wherever a plan shows (its chat's step box, its sheet): V5's ink with the
     surface's tick, light on dark in the dark theme; a status colour made it read as a state */
  --ux-step-done: var(--fg); --ux-step-done-tick: var(--surface);
  /* a step still to come: an empty ring on the surface (V5's todo ring), dim on dark */
  --ux-step-todo: color-mix(in srgb, var(--fg-3) 40%, var(--surface));
  --shadow: 0 3px 8px rgba(30,30,45,.035), 0 12px 28px rgba(30,30,45,.065);
  --ff: 'UX OneUI', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ux-heading: 'UX Sharp', 'UX OneUI', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg); font-family: var(--ff); line-height: 1.5; color-scheme: light;
}
:root[data-theme='dark'] body.ux-ui {
  --bg: #111112; --surface: #19191b; --surface-2: #222225; --surface-3: #303035;
  --fg: #f3f3f5; --fg-2: #a7a7ad; --fg-3: #92929b; --line: rgba(255,255,255,.09);
  --accent: #f3f3f5; --accent-2: var(--accent); --accent-soft: var(--surface-2); --brand: #f3f3f5;
  --me-bubble: #f3f3f5; --me-text: #111112; --ai-bubble: #2e2e33; --ux-rule: rgba(255,255,255,.12);
  --ok: #a0db87; --ok-soft: #24351f;
  --warn: #ffad7d; --warn-soft: #35251e; --bad: #ff96a7; --bad-soft: #38212a;
  --ux-glass: rgba(32,32,36,.87);
  --device-online-ink: #67ef96;
  --live-dot: #ff6b70; --live-screen: #070708;
  --ux-shadow: 0 8px 28px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.045);
  --ux-card-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.28); --ux-check: #5fcf98;
  --shadow: 0 3px 8px rgba(0,0,0,.2), 0 12px 30px rgba(0,0,0,.25); color-scheme: dark;
}
/* each look's own colour (V5 CHARS.col; the seven plain looks' from its ROOM_BG), soft, and deep for
   the dark chat list: the one map every picture of a look draws on (a chat row's tile, a message's
   face, the round character face and the look picker), so a look wears one colour everywhere */
[data-look] { --look-tint: #eef0f6; --look-deep: #2a2a2f; }
[data-look='yomi'] { --look-tint: #fbf3e8; --look-deep: #3a3128; }
[data-look='solver'] { --look-tint: #efdeca; --look-deep: #45392b; }
[data-look='worker'] { --look-tint: #e9e5fc; --look-deep: #353150; }
[data-look='butler'] { --look-tint: #e4eee6; --look-deep: #2b3b30; }
[data-look='mood'] { --look-tint: #fee2d4; --look-deep: #4b3127; }
[data-look='coach'] { --look-tint: #e1eefe; --look-deep: #273851; }
[data-look='pink'] { --look-tint: #ffe3ec; --look-deep: #4b2b37; }
[data-look='army-mint'] { --look-tint: #ddf5ea; --look-deep: #22402f; }
[data-look='beanie'] { --look-tint: #e3e8fb; --look-deep: #2c3453; }
[data-look='glasses'] { --look-tint: #ededf1; --look-deep: #35353c; }
[data-look='bear'] { --look-tint: #f6ebdd; --look-deep: #45392c; }
[data-look='bunny'] { --look-tint: #f1e6fb; --look-deep: #3c304d; }
[data-look='cat'] { --look-tint: #fff3d1; --look-deep: #463c22; }
.ux-ui :is(button,a,input,textarea,select,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ux-ui button { -webkit-tap-highlight-color: transparent; }
.ux-ui button:disabled { cursor: default; }
.ux-ui :is(h1,h2,h3) { font-family: var(--ux-heading); letter-spacing: -.3px; }
/* Lines break between words, as V5 sets its text: the default split a Korean word between two
   syllables. A word longer than its whole line (a URL, a long name) still wraps instead of spilling;
   break-word, not anywhere, which would let a tight row squeeze its text to a letter per line. */
body.ux-ui { word-break: keep-all; overflow-wrap: break-word; }
.ux-ui :is(.row-sub,.card-sub,.sub,.hint) { overflow-wrap: anywhere; }
.ux-ui :is(.page,.thread,.sheet-body,.side-scroll) { overscroll-behavior-y: contain; }
/* the shell's side gutter is one value (narrower on small phones, wider on big screens), so a page
   that reaches into it (My page) reaches exactly as far and never past the screen's edge */
.ux-app.shell { --ux-gutter: 16px; position: relative; width: 100%; max-width: 1080px; padding: 0 var(--ux-gutter);
  min-height: 0; isolation: isolate; }
.ux-app > .page { --ux-page-top: 10px; min-height: 0; padding: var(--ux-page-top) 2px 40px; gap: 14px; }
.ux-app:has(> .ux-dock) > .page { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
/* a header held at the top of a page holds at the page's padding, not its edge: it covers that strip
   too, where what scrolled past showed above the chat list's tabs and the search box (#506) */
.ux-app > .page > :is(.ux-list-bar, .ux-search-bar)::before { content: ''; position: absolute; left: 0; right: 0;
  bottom: 100%; height: var(--ux-page-top); background: inherit; }
.ux-app .page > h2, .ux-app .page-head h2 { font-size: 25px; font-weight: 700; margin: 10px 4px 8px; }
.ux-app .page-back { min-height: 40px; }

/* Search and profile occupy the quiet top edge; content carries the hierarchy. */
.ux-app .top { align-items: center; padding: 14px 0 8px; min-height: 66px; }
.ux-app .top .icon-btn { border-radius: 50%; background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
.ux-app .top .icon-btn:hover { background: var(--surface-2); }
.ux-app .who-btn { padding: 0 6px; }
.ux-top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ux-profile-button { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.ux-profile-button img { width: 100%; height: 100%; object-fit: cover; }
.ux-profile-button .companion { display: block; width: 100%; height: 100%; }
.ux-chat .top { padding-bottom: 6px; }
.ux-chat .top > .icon-btn:first-child { box-shadow: none; background: none; }

/* The two destinations and new conversation stay reachable with a thumb. */
.ux-dock { position: absolute; z-index: 15; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 14px; right: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none; }
/* The list fades out behind the dock (V5 footers): solid page colour at the bottom edge, clear
   above the buttons, so a long list never shows text running under them. Taps pass through. */
.ux-dock::before { content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -14px; right: -14px; top: -56px; bottom: calc(-16px - env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 0%, var(--bg) 40%,
    color-mix(in srgb, var(--bg) 85%, transparent) 65%, transparent 100%); }
.ux-tabs { display: flex; padding: 4px; gap: 2px; border: 1px solid color-mix(in srgb, var(--surface) 90%, transparent);
  border-radius: 40px; background: var(--ux-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 7px rgba(0,0,0,.08), 0 14px 28px rgba(0,0,0,.1); pointer-events: auto; }
.ux-tab { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 50px; min-width: 96px;
  padding: 12px 19px; border-radius: 30px; color: var(--fg-2); font: 700 14px/1.2 var(--ux-heading);
  transition: background .18s, color .18s, box-shadow .18s; }
.ux-tab svg { width: 20px; height: 20px; flex: none; }
/* a place's count sits on its glyph's top edge, clear of the name beside it (#1206): the tab keeps its
   width, so the thumb under it stays put, and a ring of what is under it (the thumb, else the dock's
   glass) keeps it clear of the glyph */
.ux-tab-glyph { position: relative; display: grid; flex: none; }
.ux-tab-glyph > .nav-badge { position: absolute; top: -12px; left: 8px; min-width: 18px; height: 18px; padding: 1px 5px 0;
  font-size: 10.5px; box-shadow: 0 0 0 2px var(--ux-glass); }
.ux-tab.on .ux-tab-glyph > .nav-badge { box-shadow: 0 0 0 2px var(--fg); }
.ux-tab.on { background: var(--fg); color: var(--bg); box-shadow: 0 4px 9px rgba(0,0,0,.14); }
.ux-new-chat { position: relative; flex: none; width: 64px; height: 64px; display: grid; place-items: center;
  background: var(--fg); color: var(--bg); border-radius: 50%; box-shadow: 0 6px 12px rgba(0,0,0,.16); pointer-events: auto; }
.ux-new-chat .companion { display: block; width: 58px; height: 58px; }
.ux-new-chat img.companion { border-radius: 50%; }
.ux-new-chat > .ux-plus { position: absolute; right: -1px; bottom: 0; width: 22px; height: 22px; display: grid; place-items: center;
  border: 2px solid var(--bg); border-radius: 50%; background: var(--ux-lime); color: #252525; }
/* the cross is a block in the badge's middle, half its size (V5): drawn as text, and larger than
   the room left inside, it sat on a line low and to the right */
.ux-new-chat > .ux-plus svg { display: block; width: 12px; height: 12px; }
.ux-new-chat:hover { transform: translateY(-2px); }
.ux-new-chat:disabled { opacity: .65; }

/* Conversation hierarchy mirrors V5: request, status, then the latest line. */
.ux-conversations.page { gap: 0; }
.ux-filter-content { display: flex; flex-direction: column; min-width: 0; gap: inherit; }
.ux-greeting { position: relative; margin: 0 6px 22px; display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: end; column-gap: 12px; }
.ux-greeting h1 { grid-column: 1; font-size: clamp(25px, 6.7vw, 32px); font-weight: 500; line-height: 1.22; margin: 0;
  max-width: 540px; }
.ux-greeting > .btn { grid-column: 2; grid-row: 2; align-self: end; margin-bottom: 2px; }
/* the companion peeks up from right on top of the greeting or question, as V5 draws it (#271): a
   row of its own above the words, not a fixed offset that left a gap over a one-line title */
/* cut off below only, where it peeks up from behind the words: a box clipped all round cut off what
   the still figure holds at its side (the figure is a little wider than the box) */
.ux-peek { grid-column: 1; grid-row: 1; width: 66px; height: 50px; margin-bottom: -2px; overflow-x: visible; overflow-y: clip; pointer-events: none; }
.ux-greeting-copy { grid-row: 2; }
.ux-peek img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.ux-peek .companion { width: 74px; height: 74px; margin: -2px -4px -16px; }
.ux-filters { --tabs-gap: 20px; position: sticky; top: 0; z-index: 2; display: flex; align-items: stretch; gap: var(--tabs-gap); flex: none;
  padding: 0 calc(6px + var(--tabs-tail, 0px)) 0 6px; border-bottom: 1px solid var(--line); background: var(--bg);
  overflow-x: auto; scrollbar-width: none; }
.ux-filters button { position: relative; flex: none; padding: 12px 0; min-height: 46px; color: var(--fg-2); font: 600 14px var(--ux-heading); }
.ux-filters button.on { color: var(--fg); }
.ux-filters button.on::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; }
.ux-filters button span { margin-inline-start: 4px; font-size: 12px; font-weight: 500; }
.ux-filters > .icon-btn { margin-inline-start: auto; padding: 10px; min-width: 40px; }
/* a narrow phone (a folded phone's cover screen, ≈344px): tighter tabs, so all four show beside the ⋯
   (#199, #1207); a row a language's names make longer scrolls (workspace.js tabStart) */
@media (max-width: 360px) { .ux-filters { --tabs-gap: 14px; } }
@media (max-width: 330px) { .ux-filters { --tabs-gap: 10px; } }

/* ── the chat's work: the design's (V5) stack of cards under the chat's bar (room-stack.js) ──────────
   Folded, the card in front (280×40) with the next ones peeking under it; open, the card in front
   (300×190) with the cards before and after it as strips and dots on the right. Every part rests
   where these rules put it (from the --y/--s/--o, --zone and --reach the script sets);
   room-stack.js moves it there with transform and opacity. */
/* the booking's ticket in a work's panel takes the deck's colours (TaskDetail) */
.ux-stack, .ux-ticket-hero {
  --stack-card: var(--surface); --stack-inset: var(--bg); --stack-g1: #55555c;
  /* the design's second gray, a shade darker so small labels stay readable (4.5:1 on white) */
  --stack-g2: #73737b; --stack-run: #2e47e6; --stack-run-soft: #e4e9ff; --stack-track: #ececef;
  --stack-fill: linear-gradient(90deg, #9a9aa2, #252525); --stack-dot: #d2d2d8; --stack-rule: rgba(17, 17, 19, .08);
  --stack-ring: rgba(0, 0, 0, .06); --stack-shade: rgba(20, 20, 40, .06); --stack-lift: rgba(20, 20, 40, .1);
}
.ux-stack { position: relative; z-index: 2; flex: none; height: var(--zone); margin-top: 11px;
  touch-action: none; -webkit-user-select: none; user-select: none; }
:root[data-theme='dark'] :is(.ux-stack, .ux-ticket-hero) {
  --stack-g1: #d4d4da; --stack-g2: #9a9aa2; --stack-run: #9db0ff;
  --stack-run-soft: #252d49; --stack-track: #2e2e33; --stack-fill: linear-gradient(90deg, #6b6b72, #f3f3f5);
  --stack-dot: #3a3a40; --stack-rule: rgba(255, 255, 255, .09);
  /* light enough that the cards peeking under the one in front still show their edges on the dark page */
  --stack-ring: rgba(255, 255, 255, .13);
  --stack-shade: rgba(0, 0, 0, .28); --stack-lift: rgba(0, 0, 0, .36); }
/* while the stack grows it is drawn over the top of the conversation: the page's own colour covers it */
.ux-stack-veil { position: absolute; top: 0; left: 0; right: 0; height: var(--veil); background: var(--bg);
  transform-origin: 50% 0; transform: scaleY(var(--veil-s)); pointer-events: none; }
/* a card's box is the open card's size; only what it shows takes a tap (a strip's box would cover the conversation) */
.ux-stack-slot { position: absolute; top: 0; left: 50%; width: min(300px, 100%); height: calc(var(--card-size, 190) * 1px); transform-origin: 50% 20px;
  transform: translate(-50%, var(--y)) scale(var(--s)); opacity: var(--o); pointer-events: none; }
.ux-stack-mini, .ux-stack-slot.is-on > .ux-stack-clip > .ux-stack-card { pointer-events: auto; cursor: pointer; }
/* the open card's white: grown from the small card's box (280×40 of 300×190) */
.ux-stack-surface { position: absolute; inset: 0; border-radius: 30px; background: var(--stack-card); opacity: 0;
  box-shadow: 0 0 0 1px var(--stack-ring), 0 18px 40px var(--stack-lift); transform-origin: 50% 0;
  transform: scale(calc(280 / 300), calc(40 / var(--card-size, 190))); }
.ux-stack-slot.is-on > .ux-stack-surface { transform: none; opacity: 1; }
.ux-stack-mini { position: absolute; top: 0; left: 10px; right: 10px; height: 40px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; padding: 0 9px 0 18px; border-radius: 20px; background: var(--stack-card);
  box-shadow: 0 0 0 1px var(--stack-ring), 0 10px 30px var(--stack-shade); }
/* opening, the small face drifts to the middle of the growing card as it fades */
.ux-stack-slot.is-on > .ux-stack-mini { transform: translateY(calc((var(--card-size, 190) - 40) * .5px)); opacity: 0; }
.ux-stack-mini > b, .ux-stack-head > b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  letter-spacing: -.2px; }
.ux-stack-mini > b { font: 700 12.5px/1.3 var(--ff); color: var(--stack-g1); }
/* The open face is seen through a window as tall as the white under it: the window rises as the
   white shrinks to the small card's 40 px and the face drops as much, so the face stays in place
   and nothing of it shows past the white's foot (translate only: a scaled face would squash its text) */
.ux-stack-clip { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; pointer-events: none;
  transform: translateY(calc((40 - var(--card-size, 190)) * 1px)); }
.ux-stack-card { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; padding: 14px;
  border-radius: 30px; overflow: hidden; opacity: 0; transform: translateY(calc((var(--card-size, 190) - 40) * 1px)); }
.ux-stack-slot.is-on > .ux-stack-clip, .ux-stack-slot.is-on > .ux-stack-clip > .ux-stack-card { transform: none; }
.ux-stack-slot.is-on > .ux-stack-clip > .ux-stack-card { opacity: 1; }
/* the open card: its title quiet, one strong line (finished work: when it ended, quietly), then what
   helps read it. Korean breaks between words, as in the bubbles. */
.ux-stack-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px;
  padding: 0 0 0 4px; border-radius: 11px; }
.ux-stack-head > b { font: 700 12px/1.3 var(--ff); color: var(--stack-g2); }
.ux-stack-sum { flex: none; margin: 2px 4px 0; font: 700 16px/1.4 var(--ff); letter-spacing: -.3px; color: var(--fg);
  word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ux-stack-card > .ux-stack-sum.prose.ux-stack-screen-wait { font-size: 14px; font-weight: 600; line-height: 1.5; -webkit-line-clamp: 4; }
/* the work holding the screen this one waits for (#1049), or the slot queued work waits for (#1044), and
   the way on: stop it, or open its chat */
.ux-stack-card > .ux-stack-sum.prose:has(+ .ux-stack-holder) { font-size: 14px; font-weight: 600; line-height: 1.5;
  -webkit-line-clamp: 3; }
.ux-stack-holder { flex: none; display: flex; flex-direction: column; gap: 6px; margin: 0 4px; }
.ux-stack-holder > small { font: 600 12px/1.4 var(--ff); color: var(--stack-g2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.ux-stack-holder-actions { display: flex; gap: 6px; }
.ux-ui .ux-stack-holder-actions .btn { min-height: 32px; padding: 6px 12px; border-radius: 999px; font: 600 12.5px/1.2 var(--ff); }
/* what helps read the line (progress, the goal, the result) rests on the card's foot, as the design's cards do */
.ux-stack-card > :is(.ux-stack-head, .ux-stack-sum, .ux-stack-when) + :not(.ux-stack-sum, .ux-stack-when) { margin-top: auto; }
.ux-stack-along { display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 0; }
.ux-stack-along .ux-stack-sum { -webkit-line-clamp: 2; font-size: 15px; }
.ux-stack-topic { margin: 0 4px; color: var(--stack-g2); font-size: 12px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ux-ui .ux-stack-card .btn.ux-stack-end { background: var(--ux-lime); color: var(--ux-lime-ink); margin-top: auto; width: 100%; min-height: 36px; padding: 8px 12px; border-radius: 999px;
  font: 700 13px/1.2 var(--ff); }
.ux-stack-slot[data-compact='true'] .ux-stack-sum { font-size: 14px; font-weight: 600; line-height: 1.5;
  -webkit-line-clamp: 2; }
.ux-stack-sum.ux-stack-wait { font-size: 14px; font-weight: 600; line-height: 1.5;
  color: var(--stack-g2); -webkit-line-clamp: 3; }
.ux-stack-bar { flex: none; display: flex; align-items: center; gap: 10px; margin: 0 4px; }
.ux-stack-bar > span { flex: 1; height: 6px; border-radius: 3px; background: var(--stack-track); overflow: hidden; }
.ux-stack-bar i { display: block; height: 100%; border-radius: 3px; background: var(--stack-fill); }
.ux-stack-bar small { flex: none; font: 700 11px/1 var(--ux-heading); color: var(--stack-g2); }
.ux-stack-card .card-goal { flex: none; width: auto; max-width: 100%; align-self: flex-start; gap: 5px; padding: 5px 10px;
  border: 0; border-radius: 13px; background: var(--stack-inset); color: var(--stack-g1); font-size: 11.5px; }
.ux-stack-card .card-goal-n { color: var(--stack-g2); }
.ux-stack-chosen, .ux-stack-when { flex: none; margin: 0 4px; font: 600 12px/1.4 var(--ff); color: var(--stack-g2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Markdown has block children: nowrap alone does not keep a saved condition to one line. */
.ux-stack-chosen { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; max-height: 1.4em; }
/* a long result stops at its third line: the space under it is a border in the inset's colour, not
   padding, so the next line does not show through (overflow is clipped at the padding's edge) */
.ux-stack-result { flex: 0 1 auto; min-height: 0; margin: 0; padding: 6px 12px 0; border-bottom: 6px solid transparent;
  border-radius: 18px; background: var(--stack-inset); outline: 1px solid var(--stack-ring); outline-offset: -1px;
  font: 600 12.5px/1.5 var(--ff); color: var(--stack-g1);
  white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ux-stack-card .prose { white-space: normal; }
.ux-stack-card .prose :is(p, h1, h2, h3, h4, h5, h6, ul, ol, pre, blockquote, .md-table) { margin: 0; }
.ux-stack-card .prose :is(h1, h2, h3, h4, h5, h6) { font-size: inherit; line-height: inherit; }
.ux-stack-card .prose :is(ul, ol) { padding-inline-start: 16px; }
.ux-stack-card .prose .md-table table { font-size: inherit; }
/* V5's templates use the same 300×190 frame: facts carry the weight, labels stay quiet. */
/* a booking's options lead with what kind they are and how they are compared (#283) */
.ux-stack-lead { display: flex; align-items: center; gap: 5px; margin: 2px 2px 0; font-size: 11px; font-weight: 600;
  color: var(--fg-2); letter-spacing: -.2px; white-space: nowrap; }
.ux-stack-lead svg { flex: none; }
.ux-stack-lead > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ux-stack-lead > .ux-stack-more { flex: none; margin: 0 2px 0 auto; padding-inline-start: 4px; font-weight: 400; }
/* The tiles get what the card leaves them (a goal or a pick's line takes some) and are as tall as
   that: their lines keep their size and each line keeps its height, and a tile too short for all
   three drops a whole line, the option's name first, rather than slicing letters (#1016). The
   heights below are the tile's padding plus the lines it keeps. */
.ux-stack-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px; min-height: 0; flex: 1;
  container-type: size; }
.ux-stack-option { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; min-height: 0; overflow: hidden; padding: 10px 8px;
  border-radius: 18px; background: var(--stack-inset); color: var(--stack-g2); }
.ux-stack-option > * { flex: none; }
.ux-stack-option.selected { background: var(--stack-card); box-shadow: inset 0 0 0 1.5px var(--fg); color: var(--fg); }
.ux-stack-option strong { font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* the deciding value stays on one line in a tile a third of the card wide (a long price wrapped
   and pushed the line under it out of the card) */
.ux-stack-option b { font: 500 18px/1.15 var(--ux-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-stack-option b.long { font-size: 14px; }
.ux-stack-option small { font-size: 10px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a long name takes a second line where the tiles have the room (no lead line, no goal) */
@container (min-height: 98px) { .ux-stack-option strong { -webkit-line-clamp: 2; } }
@container (max-height: 81px) { .ux-stack-option { gap: 2px; padding: 6px 8px; } }
@container (max-height: 67px) { .ux-stack-option { gap: 1px; padding: 4px 8px; } .ux-stack-option strong { display: none; } }
@container (max-height: 44px) { .ux-stack-option small { display: none; } }
/* a goal's or a pick's line under the tiles: the card's rows close up so the tiles keep the price */
.ux-stack-card:has(> .ux-stack-options):has(> .card-goal, > .ux-stack-chosen) { gap: 6px; }
.ux-stack-more { flex: none; color: var(--stack-g2); font-size: 10px; margin: 0 4px; }
/* while the work waits on its question a tile leads to that option in the chat (#571): a button drawn as
   the tile it is; options with nothing to compare are one line saying how many wait there, the way there */
button.ux-stack-option { border: 0; font: inherit; text-align: start; cursor: pointer; }
.ux-stack-answer { flex: none; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 18px; background: var(--stack-inset); color: var(--stack-g1); font: 600 12.5px/1.3 var(--ff);
  text-align: start; cursor: pointer; }
.ux-stack-answer svg { flex: none; color: var(--stack-g2); }
:is(button.ux-stack-option, .ux-stack-answer):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ux-stack-progress { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ux-stack-card:has(> .ux-stack-progress) > .ux-stack-sum { font-size: 12px; font-weight: 600;
  color: var(--stack-g2); -webkit-line-clamp: 1; }
.ux-stack-count { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; font-family: var(--ux-heading); }
.ux-stack-count b { font-size: 30px; font-weight: 500; line-height: 1; color: var(--fg); }
.ux-stack-count > span { font-size: 16px; color: var(--stack-g2); }
.ux-stack-progress .ux-stack-bar { margin: 0; }
.ux-stack-facts { display: flex; min-height: 0; padding: 10px 4px; border-radius: 18px; background: var(--stack-inset); }
/* The steps' strip keeps its size or goes: squeezed under a pick's line or a goal it showed an empty
   bar (#556). The count, the bar and the step now going say where the work stands; its panel lists the steps. */
.ux-stack-progress > .ux-stack-facts { flex: none; }
.ux-stack-card:has(> .ux-stack-chosen, > .card-goal) > .ux-stack-progress > .ux-stack-facts { display: none; }
.ux-stack-facts > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; text-align: center; padding: 0 7px; }
.ux-stack-facts > div + div { border-inline-start: 1px solid var(--stack-ring); }
.ux-stack-facts small { color: var(--stack-g2); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ux-stack-facts b { color: var(--stack-g1); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ux-stack-doc { display: flex; align-items: center; gap: 12px; flex: 1; min-height: 0; overflow: hidden; }
/* the screen a work drives, on a card of its own beside the work's (the design's live screen card,
   #1013): where it is, the newest capture filling what the card has left (a phone's upright in the dark
   box, a desktop's across from its top), and what it does now, one line each */
.ux-stack-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; }
.ux-stack-screen .ux-live-tabs { flex: none; background: var(--stack-inset); }
.ux-stack-screen .ux-live-tabs button { min-height: 28px; }
.ux-stack-screen .ux-live-where { flex: none; padding: 0 4px; color: var(--stack-g2); }
.ux-stack-screen .ux-live-shot { flex: 1; min-height: 0; border-radius: 18px; background: var(--stack-inset); }
.ux-stack-screen .ux-live-shot.phone { height: auto; padding: 6px 0; background: var(--live-screen); }
.ux-stack-screen .ux-live-shot.phone img { border-radius: 10px; }
.ux-stack-screen .ux-live-shot.desktop img { height: 100%; aspect-ratio: auto; }
.ux-stack-screen .ux-live-shot.desktop:has(> .ux-live-wait) { aspect-ratio: auto; }
.ux-stack-screen .ux-live-shot.desktop > .ux-live-wait { color: var(--stack-g2); }
.ux-stack-screen .ux-live-now { flex: none; padding: 0 4px; }
.ux-stack-screen .ux-live-text > :is(b, .card-now) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-stack-doc-icon { display: grid; place-items: center; flex: none; width: 92px; align-self: stretch; min-height: 56px;
  max-height: 92px; border-radius: 18px; background: var(--stack-inset); color: var(--stack-g2); }
.ux-stack-doc-copy { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0;
  min-height: 0; max-height: 100%; overflow: hidden; }
/* an answer in words sits in the card's inset as words, no file beside it (#369) */
.ux-stack-doc.text .ux-stack-doc-copy { align-self: stretch; padding: 10px 12px; border-radius: 18px; background: var(--surface-2); }
/* A heading and its paragraph are two blocks line-clamp does not count together; bound the preview itself to two lines. */
.ux-stack-doc .ux-stack-result { margin: 0; padding: 0; border: 0; outline: none; border-radius: 0; background: none; box-shadow: none; -webkit-line-clamp: 2; max-height: 3em; }
/* Text-only results use the available inset; files or goal/selection badges keep their shorter preview. */
.ux-stack-card:not(:has(> .card-goal, > .ux-stack-chosen)) .ux-stack-doc.text .ux-stack-result:has(> p:first-child) {
  -webkit-line-clamp: 4; max-height: 6em; }
/* a table, list or code block is one line of its words here (app.js StackResult, #806); an inline
   code chip would stand taller than that line */
.ux-stack-doc .ux-stack-result.ux-stack-excerpt { display: block; white-space: nowrap;
  text-overflow: ellipsis; max-height: 1.5em; }
.ux-stack-doc .ux-stack-excerpt code { font: inherit; padding: 0; background: none; }
.ux-stack-card > .ux-stack-question { -webkit-line-clamp: 2; }
/* Leave room for the candidates' price and time; their question stays complete in the chat. */
.ux-stack-card:has(> .ux-stack-options) > .ux-stack-sum { -webkit-line-clamp: 1; }
.ux-stack-doc .ux-stack-result:not(.ux-stack-excerpt) > :not(:first-child) { display: none; }
.ux-stack-doc .ux-stack-result:not(.ux-stack-excerpt) > :is(h1, h2, h3, h4, h5, h6):first-child + * { display: block; }
.ux-stack-doc-copy > small { display: block; flex: none; margin-top: 6px; font-size: 10.5px; color: var(--stack-g2); }
.ux-stack-card:has(> .ux-stack-ticket) { gap: 6px; }
/* a booking in flight: the step it is at stays one quiet line over its ticket (#556) */
.ux-stack-card:has(> .ux-stack-ticket) > .ux-stack-sum { margin-top: 0; font-size: 12px; font-weight: 600; color: var(--stack-g2); }
.ux-stack-ticket { display: flex; flex: 1; min-height: 0; flex-direction: column; justify-content: center; gap: 6px; }
.ux-ticket-caption { display: block; flex: none; margin-inline: 4px; color: var(--stack-g2); font-size: 10px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-ticket-route { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ux-ticket-end { flex: 1; min-width: 0; }
.ux-ticket-end:last-child { text-align: end; }
.ux-ticket-end small { display: block; font-size: 10px; line-height: 1.4; color: var(--stack-g2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-ticket-end strong { display: block; font: 700 22px/1.2 var(--ux-heading); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-ticket-end.long strong { font-size: 16px; }
.ux-ticket-middle { display: flex; flex: 0 1 66px; min-width: 26px; flex-direction: column; align-items: center; gap: 6px; color: var(--stack-g2); }
.ux-ticket-middle small { max-width: 100%; padding: 2px 6px; border-radius: 10px; background: var(--stack-inset); color: var(--stack-g1); font-size: 10px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-ticket-middle i { width: 100%; height: 4px; border-radius: 2px; background: var(--stack-fill); }
.ux-stack-ticket .ux-stack-facts { flex: none; padding-block: 6px; }
.ux-stack-ticket .ux-stack-facts > div { gap: 2px; }
.ux-stack-ticket .ux-stack-facts small { line-height: 1.2; }
.ux-stack-ticket .ux-stack-facts b { line-height: 1.2; }
.ux-ticket-place { min-width: 0; margin-inline: 4px; }
/* in the work's panel the ticket leads as a card of its own, as V5's full view opens with it (a
   phone's width at most: across a desktop panel the route read as a rule, not a ticket) */
.ux-ticket-hero { max-width: 480px; margin: 0 0 14px; padding: 14px; border-radius: 24px; background: var(--stack-card);
  box-shadow: 0 0 0 1px var(--stack-ring), 0 10px 30px var(--stack-shade); }
.ux-ticket-hero .ux-stack-ticket { gap: 10px; }
.ux-ticket-hero .ux-ticket-end strong { font-size: 26px; }
.ux-ticket-hero .ux-ticket-end.long strong { font-size: 18px; }
.ux-ticket-hero .ux-ticket-end { flex: 0 1 auto; }
.ux-ticket-hero .ux-ticket-middle { flex: 1 1 96px; }
.ux-ticket-hero .ux-stack-facts { padding-block: 10px; }
.ux-ticket-place strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; line-height: 1.2; }
.ux-ticket-place small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--stack-g2); }
/* Amounts and dates a result sets out, as V5 3C's money and calendar cards (result-figures.js, #588):
   in the chat a card of their own over the folded table, on the top card cut to what fits its frame. */
.ux-figure { --fig-1: #252525; --fig-2: #9a9aa2; --fig-3: #c8c8ce; --fig-4: #e2e2e6; --fig-in: #d8f65c;
  --fig-track: #ececef; --fig-inset: #f4f4f6; display: flex; flex-direction: column; min-width: 0; }
:root[data-theme='dark'] .ux-figure { --fig-1: #f3f3f5; --fig-2: #9a9aa2; --fig-3: #5c5c63; --fig-4: #3a3a40;
  --fig-in: #c6e84a; --fig-track: #2e2e33; --fig-inset: #232326; }
/* a phone's width at most: across a desktop panel the bars read as rules */
.ux-figure-wrap { max-width: 480px; margin: 8px 0; }
.ux-figure-wrap:first-child { margin-top: 2px; }
.ux-figure-wrap:last-child { margin-bottom: 0; }
.ux-figure-wrap > .ux-figure { padding: 14px; border-radius: 18px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line); white-space: normal; }
.ux-figure-table { margin-top: 8px; padding-top: 0; border-top: 0; }
.ux-figure-table > summary { font-size: 12px; }
.ux-money-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0;
  font-size: 12px; color: var(--fg-2); }
.ux-money-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-money-line b { flex: none; font: 600 15px/1.25 var(--ux-heading); color: var(--fg); letter-spacing: -.3px; }
.ux-money-bar { display: flex; gap: 2px; height: 10px; margin-top: 6px; border-radius: 5px; background: var(--fig-track); overflow: hidden; }
.ux-money-bar i, .ux-money-legend i { display: block; flex: none; height: 100%; background: var(--fig-4); }
.ux-money-bar i:nth-child(1), .ux-money-legend span:nth-child(1) i { background: var(--fig-1); }
.ux-money-bar i:nth-child(2), .ux-money-legend span:nth-child(2) i { background: var(--fig-2); }
.ux-money-bar i:nth-child(3), .ux-money-legend span:nth-child(3) i { background: var(--fig-3); }
.ux-money-row.in .ux-money-bar i { background: var(--fig-in); }
.ux-money-row + .ux-money-row, .ux-money-line + .ux-money-row { margin-top: 10px; }
.ux-money-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 10.5px; color: var(--fg-2); }
.ux-money-legend span { display: inline-flex; align-items: center; gap: 4px; }
.ux-money-legend i { width: 7px; height: 7px; border-radius: 2px; }
/* the gap between money in and out: orange when it falls short, as the design's shortfall */
.ux-money-gap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 12px;
  padding: 10px 12px; border-radius: 14px; background: var(--ok-soft); color: var(--ok); }
.ux-money-gap.short { background: var(--warn-soft); color: var(--warn); }
/* in a narrow card the amount goes under its label rather than breaking the label's words */
.ux-money-gap { flex-wrap: wrap; row-gap: 2px; }
.ux-money-gap span { font-size: 12px; font-weight: 600; white-space: nowrap; }
.ux-money-gap b { flex: none; margin-left: auto; font: 700 17px/1.2 var(--ux-heading); letter-spacing: -.3px; }
.ux-month-title { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--fg-2); }
.ux-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 10px; border-radius: 16px; background: var(--fig-inset); }
.ux-month-grid span { display: grid; place-items: center; height: 20px; border-radius: 10px;
  font: 500 11px var(--ux-heading); color: var(--fg-3); }
.ux-month-grid span.head { font: 600 10px var(--ff); }
.ux-month-grid span.on { background: var(--fig-1); color: var(--surface); }
.ux-month-grid span.today { box-shadow: inset 0 0 0 1px var(--fg-3); }
.ux-month-list { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 12px; }
.ux-month-list li { display: flex; gap: 10px; min-width: 0; }
.ux-month-list b { flex: none; font-weight: 600; }
.ux-month-list span { min-width: 0; color: var(--fg-2); overflow-wrap: anywhere; }
/* a Brief card's amounts line up with its words */
.brief-grid .brief-card > .ux-figure { padding: 0 4px; }
/* on the top card: the stack's own greys and a tighter rhythm inside its 300×190 frame */
.ux-figure.compact { flex: 1; min-height: 0; justify-content: flex-end; margin-inline: 4px; }
.ux-figure.compact .ux-money-line { color: var(--stack-g2); }
.ux-figure.compact .ux-money-line b { font-size: 13.5px; }
.ux-figure.compact .ux-money-bar { height: 8px; margin-top: 4px; }
.ux-figure.compact .ux-money-line + .ux-stack-facts { margin-top: 6px; }
.ux-figure.compact .ux-stack-facts .in b { color: var(--fg); }
.ux-figure.compact .ux-money-gap { margin-top: 8px; padding: 6px 10px; }
.ux-figure.compact .ux-money-gap b { font-size: 15px; }
.ux-figure.compact .ux-month-title { margin: 0 0 6px; color: var(--stack-g2); }
.ux-figure.compact .ux-stack-facts { margin-inline: -4px; }
/* A linked goal is still an action in this same fixed-height card. Keep the complete caption
   and facts above it rather than letting a flex child overflow over its neighbours. */
.ux-stack-card:has(> .ux-stack-ticket):has(> .card-goal) .ux-stack-ticket { gap: 3px; }
.ux-stack-card:has(> .ux-stack-ticket) .card-goal { padding-block: 3px; font-size: 10.5px; }
.ux-stack-card:has(> .card-goal) .ux-ticket-caption { line-height: 1.2; }
.ux-stack-card:has(> .card-goal) .ux-ticket-end small { line-height: 1.1; }
.ux-stack-card:has(> .card-goal) .ux-ticket-end strong { font-size: 20px; line-height: 1.1; }
.ux-stack-card:has(> .card-goal) .ux-ticket-end.long strong { font-size: 16px; }
.ux-stack-card:has(> .card-goal) .ux-stack-ticket .ux-stack-facts { padding-block: 4px; }
.ux-stack-card:has(> .card-goal) .ux-stack-ticket .ux-stack-facts small { font-size: 9px; }
.ux-stack-card:has(> .card-goal) .ux-ticket-place strong { font-size: 16px; }
.ux-stack-card:has(> .card-goal) .ux-ticket-place small { font-size: 10px; line-height: 1.2; margin-top: 2px; }
/* a schedule (V5's schedule card): when it runs next quietly on top, its clock and the time it keeps at
   the foot, how often over the time; when it may run, until when and a zone other than the device's under
   them (#527, #532) */
.ux-stack-card:has(> .ux-stack-routine) > .ux-stack-sum { font-size: 13px; font-weight: 600; color: var(--stack-g2); -webkit-line-clamp: 2; }
.ux-stack-routine { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  min-height: 0; margin-inline: 4px; }
.ux-stack-routine-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 16px;
  background: var(--stack-inset); color: var(--stack-g2); }
.ux-stack-routine-when { min-width: 0; text-align: end; }
.ux-stack-routine-when small { display: block; margin-bottom: 3px; font: 600 11px/1.3 var(--ff); color: var(--stack-g2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-stack-routine-when strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: 700 28px/1 var(--ux-heading); letter-spacing: -.5px; color: var(--fg); overflow-wrap: anywhere; }
/* how often said in words (every 30 minutes, an exact rule) steps down to stay whole */
.ux-stack-routine-when strong.long { font-size: 16px; line-height: 1.25; letter-spacing: -.2px; }
.ux-stack-routine-foot { flex: none; margin: -3px 4px 0; font: 600 10.5px/1.3 var(--ff); color: var(--stack-g2); text-align: end;
  word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* a card's status in the design's pill tones: needs you, going on, done, failed, the rest muted */
.ux-stack :is(.ux-stack-mini, .ux-stack-head) > .pill { flex: none; gap: 0; height: 24px; padding: 0 9px; border-radius: 12px;
  font: 600 12px/1.4 var(--ff); background: var(--stack-inset); color: var(--fg-2); }
.ux-stack :is(.ux-stack-mini, .ux-stack-head) > .pill .pulse { display: none; }
.ux-stack :is(.ux-stack-mini, .ux-stack-head) > .pill.wait { background: var(--warn-soft); color: var(--warn); }
.ux-stack :is(.ux-stack-mini, .ux-stack-head) > .pill.run { background: var(--stack-run-soft); color: var(--stack-run); }
.ux-stack :is(.ux-stack-mini, .ux-stack-head) > .pill.ok { background: var(--ok-soft); color: var(--ok); }
.ux-stack :is(.ux-stack-mini, .ux-stack-head) > .pill.bad { background: var(--bad-soft); color: var(--bad); }
/* work driving a screen: LIVE with the design's red dot */
.ux-stack :is(.ux-stack-mini, .ux-stack-head) > .pill.live { gap: 5px; background: var(--stack-run-soft); color: var(--stack-run); }
/* a schedule's: its clock beside the word */
.ux-stack :is(.ux-stack-mini, .ux-stack-head) > .pill:is(.routine, .goal) { gap: 4px; }
.ux-stack-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ux-stack-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* which card is open: dots on its right, the open one long */
.ux-stack-dots { position: absolute; z-index: 30; top: var(--dots); left: min(calc(50% + 166px), calc(100% - 8px));
  display: flex; flex-direction: column; gap: 5px; transform: translateY(-50%); opacity: 0; pointer-events: none; }
.ux-stack.is-open > .ux-stack-dots { opacity: 1; }
.ux-stack-dots i { width: 4px; height: 4px; border-radius: 2px; background: var(--stack-dot); }
.ux-stack-dots i.on { height: 14px; background: var(--fg); }
/* the narrowest phones have no room beside the open card: the strips still say there are others */
@media (max-width: 340px) { .ux-stack-dots { display: none; } }
/* the line between the stack and the conversation, where the stack reaches */
.ux-stack-rule { position: absolute; z-index: 30; top: -1px; left: 16px; right: 16px; height: 1px; background: var(--stack-rule);
  transform: translateY(var(--reach)); pointer-events: none; }
.ux-chat .chat { min-width: 0; }
.ux-chat .thread { padding: 8px 2px 12px; }
/* The conversation as the design (V5) draws it: the agent's rows start with its face and name over
   grey bubbles, the person's are ink bubbles at the end, each bubble with its clock time beside it */
.ux-chat .thread-in { gap: 12px; }
.ux-chat .msg.ai:has(> .ux-message-meta) { position: relative; padding-inline-start: 42px; gap: 4px; }
/* what the person might say next, under the reply that ends the chat (#481): V5's white chips,
   lined up with the reply's bubble; they wrap rather than run off a phone's width */
.ux-follow-ups { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; padding-inline-start: 42px; }
.ux-follow-up { max-width: 100%; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: var(--surface);
  color: var(--fg); font: 500 12.5px var(--ff); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-follow-up:disabled { opacity: .5; cursor: default; }
.ux-message-meta { min-width: 0; margin-inline-start: 2px; color: var(--fg-2); font-size: 12px; line-height: 1.4; }
.ux-message-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ux-message-face { position: absolute; inset-inline-start: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden; background: var(--look-tint); }
/* the figure as the design puts it in a face: 85% wide from the top; Yomi's round head fills it */
.ux-message-face img { display: block; width: 85%; margin: 0 auto; }
/* a suggestion's face in the notifications (V5 3C, #584), on its look's tint like a message's */
.live-face { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--look-tint); }
.live-face img { display: block; width: 85%; margin: 0 auto; }
.ux-message-face[data-look='yomi'] img { width: 110%; margin: -1px -5% 0; }
.ux-chat .msg.ai:has(> .ux-message-meta) > :is(.cards, .msg-line) + :is(.cards, .msg-line) { margin-top: 4px; }
/* a bubble and its time side by side, the time at the bottom: at most 80% of the row (the agent's
   face included), and no wider than a comfortable line on a wide screen */
.ux-chat .msg-line { display: flex; align-items: flex-end; gap: 6px; max-width: min(80%, 560px); }
.ux-chat .msg.ai .msg-line { align-self: flex-start; max-width: min(calc((100% + 42px) * .8), 560px); }
.ux-chat .msg.me .msg-line { flex-direction: row-reverse; }
/* a failed work's last report (the design's failure card): a card ringed in red, what failed in red
   after its mark, what it found and why in grey, then its two ways on */
.ux-chat .fail-card { width: min(300px, 100%); min-width: 0; padding: 12px 14px; border-radius: 22px; background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 25%, transparent); }
.ux-chat .fail-head { display: flex; align-items: flex-start; gap: 8px; }
.ux-chat .fail-mark { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--bad) 16%, var(--surface)); color: var(--bad); font: 700 12px/1 var(--ff); }
.ux-chat .fail-head strong { min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 20px; color: var(--bad);
  word-break: keep-all; overflow-wrap: anywhere; }
.ux-chat .fail-body { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--fg-2); word-break: keep-all; overflow-wrap: anywhere; }
.ux-chat .fail-body > :first-child { margin-top: 0; }
.ux-chat .fail-body > :last-child { margin-bottom: 0; }
.ux-chat .fail-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.ux-chat .fail-actions .btn { height: 36px; min-height: 36px; padding: 0 14px; border-radius: 18px; font-size: 12px; }
.ux-chat .fail-actions .btn.ghost { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
/* a work's steps in its chat (the design's step box): a small white box under the agent's name, a
   14px mark per step (.ux-step-mark, below) */
.ux-chat .ux-steps { align-self: flex-start; min-width: 210px; max-width: min(300px, 100%); padding: 8px 12px; border-radius: 16px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; text-align: start; }
.ux-chat .ux-steps:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.ux-steps-title { font-size: 11px; font-weight: 600; color: var(--fg-2); }
.ux-steps ol { list-style: none; margin: 2px 0 0; padding: 0; }
.ux-step { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 2; color: var(--fg); }
.ux-step-text { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.ux-step-text .card-now { display: block; line-height: 1.5; margin-bottom: 4px; font-size: 11px; color: var(--fg-2); }
.ux-step-tag { margin-inline-start: 6px; font-size: 10.5px; color: var(--fg-2); }
.ux-step.failed { color: var(--bad); }
.ux-step:is(.stopped, .cancelled) { color: var(--fg-2); }
.ux-step:is(.pending, .skipped) { color: var(--fg-3); }
.ux-steps-more { font-size: 11px; color: var(--fg-3); line-height: 1.8; }
.ux-step .ux-step-mark { margin-top: 5px; }
/* A step's mark, the same wherever a plan shows (its chat's step box, its sheet: StepMark): a tick
   on ink when done; ink while it is the current step (waiting, or paused there), a ring turning
   inside while it runs; an empty ring while still to come; dashed when the work ended without it;
   red when it failed, grey when the work was cancelled. The container sets the size. The sheet had a green tick, a
   breathing dot and a red ring of its own (#835, #838). */
.ux-step-mark { position: relative; flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%;
  box-sizing: border-box; font: 700 9px/1 var(--ff); color: var(--surface); }
.ux-step-mark.done { background: var(--ux-step-done); color: var(--ux-step-done-tick); }
.ux-step-mark:is(.running, .waiting, .stopped, .current) { background: var(--ux-step-done); }
.ux-step-mark.running::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--ux-step-done-tick) 30%, transparent); border-top-color: var(--ux-step-done-tick);
  animation: ux-step-turn .8s linear infinite; }
.ux-step-mark.failed { background: var(--bad); }
.ux-step-mark.cancelled { background: var(--fg-3); }
.ux-step-mark.pending { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ux-step-todo); }
.ux-step-mark.skipped { border: 1.5px dashed var(--fg-3); }
@keyframes ux-step-turn { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .ux-step-mark.running::after { animation: none; } }
/* a work's live screen (the design's, ARMY_3C; on its top card, .ux-stack-screen): its newest capture in
   a frame (a phone's upright in a dark box, a desktop's across) and what it does now under it; a tab per
   screen when it works on two (#589, #496) */
.pill.live { background: var(--run-soft); color: var(--run); font-weight: 700; letter-spacing: .2px; }
.pill.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--live-dot); }
.ux-live-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 14px; background: var(--surface-2); }
.ux-live-tabs button { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 32px; padding: 0 8px; border: 0; border-radius: 11px; background: none; color: var(--fg-2);
  font: 600 12px/1.2 var(--ff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ux-live-tabs button.on { background: var(--surface); color: var(--fg); box-shadow: 0 1px 4px rgba(20,20,40,.08); }
.ux-live-where { display: flex; align-items: center; gap: 5px; padding: 0 2px; font: 600 11.5px/1.3 var(--ff); color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-live-where svg { flex: none; }
.ux-live-shot { display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: zoom-in;
  background: var(--surface-2); }
.ux-live-shot img { display: block; }
.ux-live-shot.phone { display: flex; justify-content: center; height: 200px; padding: 10px 0; background: var(--live-screen); }
.ux-live-shot.phone img { height: 100%; width: auto; max-width: 100%; border-radius: 12px; object-fit: contain; }
.ux-live-shot.desktop img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
/* the VM's frame before its first one comes (#775): a quiet line where the picture will be */
.ux-live-wait { align-self: center; font: 600 11.5px/1.3 var(--ff); color: var(--fg-3); }
.ux-live-shot.desktop:has(> .ux-live-wait) { display: grid; place-items: center; aspect-ratio: 16 / 10; }
.ux-live-shot.phone > .ux-live-wait { color: rgba(255, 255, 255, .6); }
.ux-live-now { display: flex; align-items: flex-start; gap: 8px; padding: 0 2px; color: var(--fg); }
.ux-live-text { flex: 1; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.ux-live-text > b { display: block; font: 600 13px/1.4 var(--ff); }
.ux-live-text .card-now { display: block; margin-top: 1px; font-size: 11px; line-height: 1.5; color: var(--fg-2); }
.ux-live-now > small { flex: none; margin-top: 2px; font: 600 10.5px/1.3 var(--ux-heading); color: var(--fg-2); white-space: nowrap; }
.ux-chat .msg-line > .bubble { min-width: 0; max-width: 100%; border-radius: 18px; padding: 9px 14px; font-size: 14px;
  line-height: 1.45; letter-spacing: -.1px; font-weight: 400; }
.ux-chat .msg.ai .bubble { background: var(--ai-bubble); color: var(--fg); }
.ux-chat .bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.msg-time { flex: none; padding-bottom: 2px; color: var(--fg-3); font: 400 10px/1.2 var(--ux-heading); white-space: nowrap; }
/* while the agent answers: three dots blink in its bubble, what a running tool does beside them; the
   bubble keeps one line's height, so the first words take its place without a jump */
.ux-chat .bubble.typing { display: flex; align-items: center; gap: 8px; min-height: calc(1.45em + 18px); color: var(--fg-2); }
.typing-dots { display: inline-flex; flex: none; gap: 4px; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: #b9b9c0; animation: ux-typing 1s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ux-typing { 50% { opacity: .3; } }
/* what the conversation itself says, centred between rules: the day the messages below are from, or
   that work went on in another chat (with the way there); 18px from the messages around it */
.ux-chat :is(.day-line, .moved-line) { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--fg-2);
  font-size: 11px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.ux-chat :is(.day-line, .moved-line)::before, .ux-chat :is(.day-line, .moved-line)::after { content: ''; flex: 1 0 24px;
  height: 1px; background: var(--ux-rule); }
.moved-what { min-width: 0; }
.moved-go { color: var(--fg); font-weight: 600; text-decoration: none; white-space: nowrap; }
.moved-go:hover, .moved-go:focus-visible { text-decoration: underline; }
/* a running work's quiet line stands in the agent's column, under its words */
.ux-chat .msg.progress { margin-top: -4px; padding-inline-start: 44px; }
.ux-ui .cards { max-width: 560px; }
.ux-ui .card { border-radius: 24px; border-color: var(--line); padding: 16px; background: var(--surface); box-shadow: var(--ux-shadow); }
.ux-ui .card-title { font-size: 15px; font-weight: 600; }
.ux-ui .card-kind { font-size: 10px; letter-spacing: .025em; }
/* A forecast the chat read, as V5's weather widget draws it (weather-card.js, #840): a sky-coloured
   card with the place and its sky over the big temperature, today's figures in a row or the days in
   a strip, and the first wet day as a notice. The sky picks the colour; white type reads on each. */
.ux-ui .wx { --wx-from: #4f8cf7; --wx-to: #2d5fd6; --wx-soft: rgba(255,255,255,.16);
  display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; min-width: 0; padding: 16px 16px 12px;
  border-radius: 24px; background: linear-gradient(160deg, var(--wx-from), var(--wx-to)); color: #fff;
  box-shadow: 0 8px 22px rgba(30,60,140,.16); }
.ux-ui .wx-tone { --wx-from: #4f8cf7; --wx-to: #2d5fd6; }
.ux-ui :is(.wx, .wx-tone)[data-sky='partly'] { --wx-from: #5d93ea; --wx-to: #3a66c4; }
.ux-ui :is(.wx, .wx-tone):is([data-sky='cloudy'], [data-sky='fog']) { --wx-from: #8592a6; --wx-to: #5a6578; }
.ux-ui :is(.wx, .wx-tone):is([data-sky='rain'], [data-sky='drizzle']) { --wx-from: #5f7697; --wx-to: #354862; }
.ux-ui :is(.wx, .wx-tone)[data-sky='snow'] { --wx-from: #86a9d8; --wx-to: #5878a8; }
.ux-ui :is(.wx, .wx-tone)[data-sky='storm'] { --wx-from: #50557a; --wx-to: #2a2d47; }
/* the same skies at night's brightness, so the card does not glare out of a dark chat */
:root[data-theme='dark'] .ux-ui .wx { background: linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)),
  linear-gradient(160deg, var(--wx-from), var(--wx-to)); box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.wx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.wx-where { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wx-place { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; line-height: 1.3; }
.wx-sky { font-size: 12px; opacity: .85; }
.wx-pic { flex: none; width: 64px; height: 46px; margin: -4px -4px 0 0; }
.wx-pic svg, .wx-mini svg, .wx-notice-pic svg { display: block; width: 100%; height: 100%; }
.wx-main { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: -8px; }
.wx-temp { font: 700 44px/1 var(--ux-heading); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.wx-range { font-size: 12px; font-weight: 600; opacity: .9; }
.wx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
.wx-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 14px; background: var(--wx-soft); }
.wx-stat span { font-size: 11px; opacity: .85; }
.wx-stat b { font: 700 16px/1.2 var(--ux-heading); font-variant-numeric: tabular-nums; }
/* the days side by side as V5 sets them; more than fit scroll sideways inside the card */
.wx-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(40px, 1fr); gap: 2px; margin: 0 -6px; padding: 0;
  list-style: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.wx-days::-webkit-scrollbar { display: none; }
.wx-days li { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 12px;
  scroll-snap-align: start; font-variant-numeric: tabular-nums; }
.wx-days li.wet { background: var(--wx-soft); }
.wx-day { font-size: 11px; font-weight: 600; opacity: .8; white-space: nowrap; }
.wx-mini { width: 30px; height: 22px; margin: 2px 0; }
.wx-days b { font: 700 14px/1.2 var(--ux-heading); }
.wx-low { font-size: 11px; opacity: .7; }
.wx-rain { font-size: 10px; font-weight: 600; color: #cfe8ff; }
.wx-notice { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: var(--wx-soft); }
.wx-notice-pic { flex: none; width: 34px; height: 25px; }
.wx-notice-text { display: flex; flex-direction: column; min-width: 0; font-size: 11.5px; line-height: 1.35; }
.wx-notice-text b { font-size: 13px; }
.wx-notice-text span { opacity: .88; }
.wx-src { margin-top: -4px; font-size: 10px; text-align: right; opacity: .65; }
/* The chat's forecast as a card of its stack (#1063; V5's weather widget in its 300×190 frame): the
   sky's colour inset under the card's title, the lead temperature on the right of what it is and the
   first wet day (or today's range), then five days side by side or today's figures. */
.ux-ui .ux-stack-card > .wx-stack { flex: 1; min-height: 0; max-width: none; gap: 6px; padding: 10px 12px 8px;
  border-radius: 20px; box-shadow: none; overflow: hidden; }
/* the whole forecast in its panel takes the panel's width */
.ux-ui .sheet[data-sheet-kind='weather'] .wx { max-width: none; }
.wx-stack-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 0 2px; }
.wx-stack .wx-where { gap: 1px; }
.wx-stack .wx-sky { font-size: 11.5px; font-weight: 600; }
.wx-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.wx-stack .wx-temp { flex: none; font-size: 34px; letter-spacing: -1px; }
.wx-stack .wx-days { flex: 1; min-height: 0; margin: 0 -4px; overflow: hidden; align-items: stretch; }
.wx-stack .wx-days li { justify-content: flex-start; padding: 3px 2px; }
.wx-stack .wx-mini { width: 26px; height: 19px; margin: 1px 0; }
.wx-stack .wx-days b { font-size: 13px; }
.wx-stack .wx-stats { flex: 1; min-height: 0; align-content: end; }
.wx-stack .wx-stat { padding: 6px 10px; }
/* its pill: the lead sky in its colour, a picture and a word */
.ux-stack :is(.ux-stack-mini, .ux-stack-head) > .pill.weather { gap: 3px; padding: 0 9px 0 5px;
  background: linear-gradient(160deg, var(--wx-from), var(--wx-to)); color: #fff; }
.wx-pill-pic { flex: none; width: 22px; height: 16px; }
.wx-pill-pic svg, .wx-link-pic svg { display: block; width: 100%; height: 100%; }
/* an answer's line for a forecast other than the one at the chat's top: it opens that forecast in a panel */
.ux-ui .card.line.weather-link { width: auto; max-width: 300px; padding: 8px 14px 8px 8px; border-radius: 20px; cursor: pointer;
  font: inherit; color: inherit; text-align: start; }
.wx-link-pic { flex: none; display: grid; place-items: center; width: 40px; height: 32px; padding: 3px 5px; border-radius: 12px;
  background: linear-gradient(160deg, var(--wx-from), var(--wx-to)); }
.weather-link .card-now { color: var(--fg-2); font-size: 12px; }
.wx-link-go { flex: none; display: grid; color: var(--fg-3); }
.weather-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* An approval as the design (V5) draws it: one white card in the agent's column with what it asks
   and a small pill for where it stands, its facts as rows (key left, value right), the text it would
   send under a dashed rule, what it leads to in small type, then its "no" and "yes". */
.ux-ui .card.approval:not(.done) { max-width: 300px; padding: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--surface);
  box-shadow: var(--ux-card-shadow); overflow: hidden; }
/* a wide screen gives its rows and text a little more room */
@media (min-width: 700px) { .ux-ui .card.approval:not(.done) { max-width: 360px; } }
/* a question the work waits on (the design's option card): the approval card's shell; its pill is the
   quiet one, as an answer is not an approval; plain answers are grey rows with their words centred, as
   V5's buttons and 4C's answer chips are; offers are grey tiles read from the start, as V5's option tiles
   with their facts are (#867). The one tapped turns ink while it sends. No blue in them (the old offer
   number and reason were blue). */
.ux-ui .card.ask-card { max-width: 300px; padding: 0 0 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface);
  box-shadow: var(--ux-card-shadow); overflow: hidden; }
@media (min-width: 700px) { .ux-ui .card.ask-card { max-width: 360px; } }
/* a question led to from its card at the top takes the keyboard (findAnswer): its ring for keys only */
.ux-ui .card.ask-card:focus { outline: none; }
.ux-ui .card.ask-card:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.apv-state.ask { background: var(--surface-2); color: var(--fg); }
.ask-card .choices { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px 12px 0; }
.ux-ui .ask-card .btn.choice { justify-content: center; width: 100%; min-height: 44px; height: auto; padding: 10px 14px; border: 0;
  border-radius: 13px; background: var(--surface-2); color: var(--fg); font-size: 14px; font-weight: 500; text-align: center;
  white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.ux-ui .ask-card .btn.choice:hover:not(:disabled) { background: var(--surface-3); }
.ask-card .offer { border: 0; border-radius: 16px; background: var(--surface-2); overflow: hidden; }
.ask-card .offer:hover { border-color: transparent; }
.ask-card .offer-pick { padding: 10px 12px 9px; color: var(--fg); }
.ux-ui .ask-card :is(.btn.choice, .offer-pick).chosen { background: var(--fg); color: var(--surface); opacity: 1; }
.ask-card .offer-pick.chosen :is(.offer-f, .offer-p, .offer-terms) { color: inherit; }
.ask-card .offer-t { font-size: 13.5px; font-weight: 600; }
.ask-card .offer-f { font-size: 12px; color: var(--fg-2); }
.ask-card .offer-p { font-family: var(--ux-heading); font-weight: 700; color: var(--fg); }
.ask-card .offer-terms { font-size: 11px; color: var(--fg-3); }
/* the option a top card led to (findAnswer): an ink ring that fades over POINTED_MS (app.js) */
.ux-ui :is(.ask-card .btn.choice, .ask-card .offer-pick, .card.ask-card).pointed { animation: ux-pointed 1.6s ease-out; }
@keyframes ux-pointed { 0%, 50% { outline: 2px solid var(--fg); outline-offset: -2px; }
  100% { outline: 2px solid transparent; outline-offset: -2px; } }
@media (prefers-reduced-motion: reduce) {
  .ux-ui :is(.ask-card .btn.choice, .ask-card .offer-pick, .card.ask-card).pointed { animation: none; outline: 2px solid var(--fg); outline-offset: -2px; }
}
.ask-card .offer-why { align-self: flex-start; margin-top: 4px; padding: 0 6px; border-radius: 8px; background: var(--ux-lime);
  color: var(--ux-lime-ink); font-size: 9.5px; font-weight: 700; line-height: 16px; }
.ask-card .offer-src { margin: -2px 12px 8px; color: var(--fg-3); font-size: 11px; }
.ask-card .offer-src:hover { color: var(--fg); }
.ask-card .ask-field { display: flex; flex-direction: column; gap: 4px; margin: 12px 16px 0; color: var(--fg-2); font-size: 12px; }
.ask-card .ask-field input { height: 40px; padding: 0 12px; border: 0; border-radius: 14px; background: var(--surface-2); color: var(--fg);
  font-size: 14px; }
.ux-ui .ask-card .ask-send { display: flex; justify-content: center; width: calc(100% - 24px); height: 42px; min-height: 42px;
  margin: 14px 12px 0; border-radius: 13px; box-shadow: none; }
.ask-hint { margin: 12px 16px 0; color: var(--fg-3); font-size: 11.5px; line-height: 1.45; }
.ask-in-sheet { display: flex; flex-direction: column; gap: 8px; }
/* in a work's sheet the same card keeps the sheet's type scale (12, 13, 15; 400, 600, 700) */
.sheet .ask-card .card-title { font-size: 15px; }
.sheet .apv-state.ask { height: 22px; font-size: 12px; line-height: 22px; }
.sheet .ask-card :is(.ask-text, .btn.choice, .offer-t, .ask-field input, .ask-send) { font-size: 15px; }
.sheet .ask-card .btn.choice { font-weight: 400; }
.sheet .ask-card :is(.offer-f, .offer-p) { font-size: 13px; }
.sheet .ask-card :is(.offer-terms, .offer-src, .ask-hint, .ask-field) { font-size: 12px; }
.sheet .ask-card .offer-why { font-size: 12px; font-weight: 600; line-height: 18px; }
/* 1A scope/send/pay: a clear question, quiet facts and one primary action. */
.apv-head { display: flex; align-items: flex-start; gap: 8px; padding: 16px 16px 0; }
/* a question's pill floats at the head's end, so only its title's first line runs beside it and
   the second has the card's width (the English pill is twice the Korean one); with no short title
   the pill stands alone there and the question is the card's text */
.ask-card .apv-head { display: flow-root; }
.ask-card .apv-head > .apv-state { float: inline-end; margin-block-start: 1px; margin-inline-start: 8px; }
.ask-card .ask-text { padding: 8px 16px 0; color: var(--fg); font-size: 14px; line-height: 1.55; }
.ask-card .apv-head:has(> .apv-state:only-child) + .ask-text { padding-top: 4px; }
.ux-ui .apv-head .card-title { flex: 1; min-width: 0; margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3;
  letter-spacing: -.3px; word-break: keep-all; overflow-wrap: anywhere; }
.apv-state { flex: none; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--warn-soft); color: var(--ux-orange);
  font-size: 10.5px; font-weight: 600; line-height: 22px; white-space: nowrap; }
/* an offered next step is a suggestion: its pill is neutral */
.card.approval.offer .apv-state { background: var(--surface-2); color: var(--fg-2); }
.apv-context { margin: 10px 16px 0; color: var(--fg-2); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.apv-rows { margin: 12px 16px 0; padding: 10px 0; border-block: 1px solid var(--line); }
.apv-rows .pv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--fg-2);
  font-size: 12.5px; line-height: 1.9; }
.apv-rows .pv-k { flex: none; }
.apv-rows .pv-v { min-width: 0; color: var(--fg); font-weight: 600; line-height: 1.45; text-align: end; overflow-wrap: anywhere; }
/* the files it would send, one a line; one it cannot find warns (#1180) */
.apv-rows .pv-files .pv-v { display: flex; flex-direction: column; align-items: flex-end; }
.apv-rows .pv-file.missing { color: var(--warn); font-weight: 500; }
.apv-body { margin: 12px 16px 0; padding-top: 10px; border-top: 1px solid var(--line); }
.pv-say { color: var(--fg-2); font-size: 11.5px; line-height: 1.5; }
.pv-body { color: var(--fg-2); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
/* folded to PREVIEW_FOLD_LINES (app.js) lines */
.pv-body.folded { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pv-more { margin-top: 4px; padding: 0; background: none; color: var(--fg); font-size: 12px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; }
.apv-scope { margin: 10px 16px 0; color: var(--fg-3); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.apv-scope > * + *::before { content: ' · '; color: var(--fg-3); font-weight: 400; }
.apv-irreversible { color: var(--bad); font-weight: 600; }
.apv-note { display: flex; align-items: flex-start; gap: 6px; margin: 10px 14px 0; color: var(--fg-2); font-size: 12px; line-height: 1.5; }
.apv-note svg { flex: none; margin-top: 2px; }
/* the quiet "no" and the ink "yes" as two equal halves (a lone "no" spans the row), a label longer
   than its half (approving with a fingerprint) taking the room it needs; while the answer is on its
   way both are locked and the one tapped stays solid with its wait label */
.apv-btns { display: flex; gap: 8px; padding: 14px 12px 12px; }
.ux-ui .apv-btns .btn { flex: 1; height: auto; min-height: 42px; padding: 10px 12px; border-radius: 13px;
  font-size: 12.5px; font-weight: 600; }
.ux-ui .apv-btns .btn.ghost { background: var(--surface-2); color: var(--fg); box-shadow: none; }
.ux-ui .apv-btns .btn.ghost:hover:not(:disabled) { background: var(--surface-2); }
.ux-ui .apv-btns .btn.primary { box-shadow: none; }
.ux-ui .apv-btns .btn[aria-busy='true'] { opacity: 1; }
/* The safe one-time choice and time windows stay inside the 1A card, including keyboard focus. */
.apv-field { min-width: 0; margin: 14px 12px 0; padding: 0; border: 0; color: var(--fg-2); font-size: 12.5px; }
.apv-field legend { margin-bottom: 8px; padding: 0 4px; }
.pass-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pass-choice { position: relative; min-width: 0; cursor: pointer; }
.pass-choice.once { grid-column: 1 / -1; }
.pass-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
/* the words sit in the middle of their button at the size of the buttons under them (#880): the
   check takes room only on the chosen one, a hidden check had pushed every other label aside */
.pass-choice span { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 42px; padding: 8px;
  border: 1px solid transparent; border-radius: 12px; background: var(--surface-2); color: var(--fg-2);
  font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.pass-choice svg { flex: none; display: none; }
.pass-choice input:checked + span { border-color: var(--fg); background: var(--surface); color: var(--fg); font-weight: 600; }
.pass-choice input:checked + span svg { display: block; }
.pass-choice input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
.apv-field:disabled { opacity: .5; }
.apv-field:disabled .pass-choice { cursor: default; }
/* in a browser what the pass guards is approved on the phone: where asking stands, in an inset */
.pass-wait { margin: 12px 10px 0; padding: 12px 14px; border-radius: 16px; background: var(--bg); }
.pass-wait-top { display: flex; align-items: center; gap: 8px; color: var(--fg); font-size: 13px; font-weight: 600; line-height: 1.4; }
.pass-wait-now { margin-top: 4px; color: var(--fg-2); font-size: 12px; line-height: 1.5; }
.pass-wait-live { width: 8px; height: 8px; margin-inline-start: auto; border-radius: 50%; background: var(--ux-orange);
  animation: blink 1.6s ease-in-out infinite; }
.pass-wait.failed .pass-wait-top { color: var(--bad); }
.ux-ui .pass-wait .pass-resend { margin-top: 10px; height: 30px; min-height: 30px; padding: 0 14px; border-radius: 15px; font-size: 12px; }
/* answered or no longer waiting: one quiet line in the agent's column, its mark saying how it went */
.ux-ui .card.approval.done { display: flex; align-items: flex-start; gap: 6px; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--fg-2); font-size: 12px; font-weight: 500; line-height: 1.45; }
.apv-mark { flex: none; display: flex; margin-top: 2px; color: var(--fg-3); }
.apv-mark.yes { color: var(--ux-check); }
.apv-said { min-width: 0; overflow-wrap: anywhere; }
.apv-said .msg-time { padding: 0; color: inherit; font: inherit; }
/* Pictures and files in the conversation as the design (V5) draws them. A picture is a small cover
   thumbnail whose box stands before it arrives (app.js PICTURE_PX): one alone 220 x 165, two or more
   the square tiles of one grid, the person's own 84 px tiles in a row above their words; a tap opens
   it whole. A file is one row: its icon, its name and how it opens. */
.ux-chat .card.shot, .ux-chat .msg .att-img { flex: none; padding: 0; border: 0; overflow: hidden; background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line); }
.ux-chat .card.shot { width: 220px; height: 165px; max-width: 100%; border-radius: 18px; }
.ux-chat .pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 320px; }
.ux-chat .pics > .card.shot { width: auto; height: auto; aspect-ratio: 1; border-radius: 16px; }
.ux-chat .msg .att-img { width: 84px; height: 84px; max-width: none; border-radius: 16px; }
.ux-chat :is(.card.shot, .msg .att-img) img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
/* a picture that cannot load: a quiet note in its box (the person's small tiles keep only the icon),
   a tap there asks for it again (app.js Picture) */
.ux-chat :is(.card.shot, .msg .att-img) { position: relative; }
.ux-chat .pic-failed { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; padding: 10px; text-align: center; color: var(--fg-2); font-size: 12px; line-height: 1.35; }
.ux-chat .pic-failed-retry { font-weight: 600; color: var(--fg); }
.ux-chat :is(.card.shot, .msg .att-img):has(img.ux-img-failed) img { visibility: hidden; }
.ux-chat :is(.card.shot, .msg .att-img):has(img.ux-img-failed) .pic-failed { display: flex; }
.ux-chat .msg .att-img .pic-failed :is(.pic-failed-text, .pic-failed-retry) { display: none; }
.ux-chat .msg.me { gap: 6px; }
.ux-chat .msg.me .cards { align-items: flex-end; gap: 6px; }
.ux-chat .pics.mine { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.ux-chat .card.file { display: flex; align-items: center; gap: 10px; max-width: 320px; min-height: 52px; padding: 8px 14px 8px 8px;
  border: 0; border-radius: 18px; box-shadow: var(--ux-card-shadow); }
.ux-chat .msg.me .card.file { width: auto; }
.file-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px;
  background: var(--surface-2); color: var(--fg-2); }
.ux-chat .card.file .card-title { flex: 1; min-width: 0; font-size: 13.5px; line-height: 18px; }
.ux-chat .card.file .card-sub { flex: none; margin: 0; font-size: 12px; font-weight: 600; }
.ux-ui .callout { border-radius: 22px; padding: 14px 16px; }
.ux-ui .callout.ask { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--ux-shadow); }
.ux-ui .pill { padding: 3px 9px; font-size: 10px; }
.ux-ui .pill.wait { color: var(--warn); background: var(--warn-soft); }
.ux-ui .btn { min-height: 40px; border-radius: 22px; padding: 10px 17px; font-size: 13px; }
.ux-ui .btn.primary { background: var(--fg); color: var(--bg); box-shadow: none; }
.ux-ui .btn.primary:hover:not(:disabled) { filter: none; opacity: .86; }
.ux-ui .btn.sm { min-height: 34px; padding: 7px 12px; font-size: 12px; }
.ux-ui .btn.lg { min-height: 48px; }
.ux-ui .btn.choice { border-radius: 18px; white-space: normal; }
.ux-ui .input { border-radius: 18px; padding: 12px 14px; }
/* a room too short for all that sits over the conversation (the keyboard up on a small screen, a phone
   held sideways): the update notice, then the folded stack, give way to the composer (room-fit.js) */
.ux-chat :is(.android-update, .ux-stack)[data-gave-way] { display: none; }
/* The composer as V5 draws it: a white 54 px bar on the page, ＋ · the field · one round action, the
   thread fading out just above it; no ring while typing. The action is the mic while there is nothing
   to send, send once there is (words or a file) and stop while a reply streams. Both stay drawn and
   these rules pick one, so typing never redraws the field (js/app.js Composer). */
.ux-chat .composer { position: relative; padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
.ux-chat .composer::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; pointer-events: none;
  background: linear-gradient(to top, var(--bg), transparent); }
.ux-chat .composer-in { align-items: flex-end; gap: 6px; min-height: 54px; padding: 7px; border: 0; border-radius: 27px;
  background: var(--surface); box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.10); }
:root[data-theme='dark'] .ux-chat .composer-in { box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(0,0,0,.36); }
/* a long draft scrolls inside the field past a third of the room, so the room keeps its bar and some
   of the conversation (the keyboard up leaves a phone's small screen a few hundred px) */
.ux-chat .composer textarea { min-height: 40px; max-height: min(220px, calc(var(--app-h, 100dvh) / 3)); padding: 9px 4px;
  font-size: 15px; line-height: 22px; }
.ux-chat .composer textarea::placeholder { color: var(--ux-muted); }
.ux-chat .composer .attach { width: 40px; height: 40px; margin: 0; border-radius: 50%; background: var(--surface-2); color: var(--fg);
  transition: transform .22s var(--motion-ease), background-color .2s, color .2s; }
/* open: the plus turns to × on ink */
.ux-chat .composer .attach[aria-expanded='true'] { transform: rotate(45deg); background: var(--fg); color: var(--bg); }
.ux-chat .composer .attach:disabled { opacity: .4; }
.ux-chat .composer-in > :is(.send, .voice-btn) { width: 40px; height: 40px; border-radius: 50%; background: var(--fg); color: var(--bg);
  box-shadow: 0 4px 12px rgba(0,0,0,.18); transition: transform .15s; }
/* a pointer that hovers (a touch screen's tap leaves its hover behind on what is drawn under it) */
@media (hover: hover) {
  .ux-chat .composer .attach:hover:not(:disabled, [aria-expanded='true']) { background: var(--surface-3); }
  .ux-chat .composer-in > :is(.send, .voice-btn):hover:not(:disabled) { opacity: .86; }
}
.ux-chat .composer-in > :is(.send, .voice-btn):active:not(:disabled) { transform: scale(.92); }
.ux-chat .composer-in > :is(.send, .voice-btn):disabled { opacity: .45; }
.ux-chat .composer-in > .send.stop { background: var(--surface-2); color: var(--fg); box-shadow: none; }
.ux-chat .composer:not(:has(.att-row)) .composer-in:has(> .voice-btn):has(> textarea:placeholder-shown) > .send:not(.stop),
.ux-chat .composer:has(.att-row) .composer-in > .voice-btn,
.ux-chat .composer-in:has(> textarea:not(:placeholder-shown)) > .voice-btn,
.ux-chat .composer-in:has(> .send.stop) > .voice-btn { display: none; }
/* what goes with the next message (V5 chips): a 28 px picture or file glyph, the name and ×, dimmed
   while it uploads; an edit being made sits above them in the same look */
.ux-chat .att-row { gap: 6px; margin: 0 0 8px; }
.ux-chat :is(.att-chip, .edit-banner) { border: 0; background: var(--surface); box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 6px 16px rgba(0,0,0,.08); }
:root[data-theme='dark'] .ux-chat :is(.att-chip, .edit-banner) { box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(0,0,0,.3); }
.ux-chat .att-chip { height: 36px; max-width: 240px; gap: 6px; padding: 0 6px 0 4px; border-radius: 18px; color: var(--fg);
  font-size: 12px; font-weight: 500; transition: opacity .2s; }
.ux-chat .att-thumb { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; object-fit: cover;
  background: var(--surface-2); color: var(--fg-2); }
.ux-chat .att-x { width: 22px; height: 22px; background: var(--surface-2); color: var(--fg); }
.ux-chat .att-x svg { stroke-width: 3.6; }
.ux-chat .edit-banner { border-radius: 18px; padding: 10px 8px 10px 14px; }
/* the ＋ menu (V5): a frosted card above the bar, a 32 px glyph circle on each row, growing from the
   corner over ＋ (its open and close motion is the shared menu's) */
.ux-ui .menu.ux-attach-menu { top: auto; right: auto; width: 204px; min-width: 0; padding: 6px; border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transform-origin: 22px 100%; }
.ux-ui .ux-attach-menu .menu-item { justify-content: flex-start; gap: 12px; min-height: 46px; padding: 0 12px 0 8px; border-radius: 18px;
  font-size: 14px; font-weight: 500; letter-spacing: -.1px; }
.ux-ui .ux-attach-menu .menu-item:is(:hover, :focus-visible, :active) { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.ux-menu-glyph { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2); color: var(--fg); }
.ux-menu-glyph svg { stroke-width: 1.7; }
/* what Return does: a quiet line under the bar where there is a keyboard; a touch screen sends with its
   button and shows none (the field still reads it out, aria-describedby) */
.ux-chat .composer-hint { font-size: 10px; }
@media (pointer: coarse) { .ux-chat .composer-hint { display: none; } }

/* ── the voice: where the composer was, the design's capsule (1C; 1A while words show) ────────── */
/* Its companion peeks over the left shoulder from behind it. Alone, the state is said large; with
   words, the words lead under the state's small label. The mic's halo (listening) and the bars
   (speaking) follow the level voice.js measures on their side (data-level: in, out), else they keep
   the design's rhythm. Every loop is delayed by --voice-phase, minus the time since the voice began
   (keepTime in voice.js): the redrawn page puts the voice back, which starts its loops over. The
   light, aura and halo run all the time and a state only shows them; a state's own mark (bars, dots)
   starts with it and counts from --voice-step, set again when the state changes. */
.voice { position: relative; --voice-listen: linear-gradient(90deg, #161ecc, #1a46d6 52%, #0e6db0);
  --voice-glass: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .9) 50%, rgba(245, 248, 249, .83) 70%,
    rgba(234, 241, 244, .59) 81%, rgba(228, 238, 242, .37) 91%, rgba(228, 238, 242, .28));
  --voice-rim: inset 0 1px 0 #fff, inset 0 0 0 .7px rgba(255, 255, 255, .76);
  --voice-halo: rgba(60, 86, 240, .26), rgba(47, 203, 201, .12) 62%;
  --voice-aura: -3px -3px 28px rgba(118, 214, 188, .27), 3px 7px 36px rgba(124, 184, 240, .27);
  /* the listening words and the light moving through them keep 4.5:1 on the tinted glass: the
     gradient's last stop a shade darker than 1C's #0f74b8, the glints darker than its #0e92c4 */
  --voice-glint-1: rgb(8 112 168); --voice-glint-2: rgb(112 62 240);
  /* how strong the glow is: it lies at the bottom of the page's own layer, under everything on it, so
     screen blending (1C) would have nothing to lighten there, and on the light page it would vanish */
  --voice-glow: .7; }
:root[data-theme='dark'] .voice { --voice-listen: linear-gradient(90deg, #a9b8ff, #c2ceff 52%, #8fd8f7);
  --voice-glass: linear-gradient(180deg, rgba(44, 44, 49, .96), rgba(30, 30, 34, .92));
  --voice-rim: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 .7px rgba(255, 255, 255, .09);
  --voice-halo: rgba(138, 164, 255, .34), rgba(90, 214, 200, .16) 62%;
  --voice-glint-1: rgb(150 226 250); --voice-glint-2: rgb(196 178 255); --voice-glow: .85; }
/* in the chat the companion's head takes the room above the capsule, never the thread's last words;
   --voice-foot is the room under it to the page's foot, which the glow reaches */
.voice-dock { flex: none; --voice-foot: calc(12px + env(safe-area-inset-bottom, 0px)); margin: 40px 0 var(--voice-foot); }
/* the capsule wakes, not the voice: the glow under the thread must not ride along */
.voice-dock.voice-in > :is(.voice-peek, .voice-capsule) {
  animation: voice-wake .64s cubic-bezier(.2, .9, .3, 1.16) var(--voice-phase, 0s) both; }
/* the sheet's voice is a layer of its own, so its glow stays above the sheet's page colour */
.voice-overlay { margin-top: 36px; isolation: isolate; }
/* the light at the page's foot (1C fl-call-glow) while the voice is open: four soft shapes drifting
   and breathing, under the thread's messages too (-1: the bottom of the page's own layer). Its box
   spans a phone's screen; a wider one keeps it under the chat, its sides fading (past the chat, beside
   the side bar, it would scroll the page sideways). The shapes and their drift keep the design's
   proportions of its 360px screen at any width. */
.voice-glow { position: absolute; z-index: -1; left: calc(50% - 50vw); right: calc(50% - 50vw);
  bottom: calc(-1 * var(--voice-foot, 0px)); height: 280px; overflow: hidden; pointer-events: none;
  opacity: var(--voice-glow); transition: opacity .8s ease; }
.voice[data-state='error'] > .voice-glow { opacity: 0; }
.voice-in > .voice-glow { animation: voice-glow-in .8s ease var(--voice-phase, 0s) both; }
.voice-glow i { position: absolute; }
/* each shape's softness is its own gradient, drawn once (the design's blur(42px) on a moving shape is
   redrawn every frame): its fall-off reaches twice the blur past the shape */
.voice-glow i::before { content: ''; position: absolute; inset: -84px;
  background: radial-gradient(closest-side, rgb(var(--glow-tint) / .75), rgb(var(--glow-tint) / .42) 45%,
    rgb(var(--glow-tint) / .13) 72%, rgb(var(--glow-tint) / 0)); }
.voice-glow i:nth-child(1) { left: -13.9%; bottom: 34px; width: 58.3%; height: 110px; --glow-tint: 118 218 190; opacity: .3;
  animation: voice-glow-1 11s ease-in-out var(--voice-phase, 0s) infinite alternate,
    voice-glow-scale 3.2s ease-in-out var(--voice-phase, 0s) infinite; }
.voice-glow i:nth-child(2) { right: -16.7%; bottom: 30px; width: 63.9%; height: 120px; --glow-tint: 118 178 244; opacity: .28;
  animation: voice-glow-2 13s ease-in-out var(--voice-phase, 0s) infinite alternate,
    voice-glow-scale 3.8s ease-in-out calc(var(--voice-phase, 0s) - 1.1s) infinite; }
.voice-glow i:nth-child(3) { left: 32%; bottom: 72px; width: 47.2%; height: 90px; --glow-tint: 140 214 236; opacity: .24;
  animation: voice-glow-3 9.5s ease-in-out var(--voice-phase, 0s) infinite alternate,
    voice-glow-scale 2.8s ease-in-out calc(var(--voice-phase, 0s) - .6s) infinite; }
.voice-glow i:nth-child(4) { left: 40%; bottom: -16px; width: 52.8%; height: 84px; --glow-tint: 168 232 214; opacity: .2;
  animation: voice-glow-4 15s ease-in-out var(--voice-phase, 0s) infinite alternate; }
@media (min-width: 700px) {
  .voice-glow { left: 0; right: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
}
.voice-capsule { position: relative; z-index: 1; isolation: isolate; display: flex; align-items: center; gap: 6px;
  min-height: 56px; padding: 8px 8px 8px 18px; border-radius: 28px; background: var(--voice-glass);
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: 0 10px 24px -14px rgba(6, 8, 14, .32), 0 1px 3px rgba(6, 8, 14, .1), var(--voice-rim); }
/* the glass's mint and sky tints */
.voice-capsule::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(72% 62% at 18% 70%, rgba(118, 214, 188, .11), transparent 72%),
    radial-gradient(72% 62% at 84% 66%, rgba(124, 184, 240, .1), transparent 72%); }
/* the aura round it while it listens (1C fl-call-aura): breathing, fading in and out with the listening;
   gone with the mic off or a failure */
.voice-aura { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .5s ease; }
.voice-aura::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--voice-aura);
  opacity: .86; animation: voice-aura 1.9s ease-in-out var(--voice-phase, 0s) infinite; }
.voice:is([data-state='listening'], [data-state='hearing']):not(.muted) .voice-aura { opacity: 1; }
/* the companion's window: its foot hidden behind the capsule, room above for its own motion */
.voice-peek { position: absolute; z-index: 0; left: 6px; top: -44px; width: 56px; height: 54px; overflow: hidden;
  pointer-events: none; }
.voice-peek .companion { position: absolute; left: 4px; top: 8px; width: 48px; height: 48px;
  filter: drop-shadow(0 3px 5px rgba(4, 8, 20, .22)); }
.voice-text { flex: 1; min-width: 0; padding: 3px 0; }
.voice-status { display: flex; align-items: center; gap: 8px; font-size: 19px; line-height: 26px; font-weight: 700;
  letter-spacing: -.025em; word-break: keep-all; overflow-wrap: anywhere; }
.voice[data-state='listening']:not(.muted) .voice-label { background: var(--voice-listen);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* the light moving through them (1C flCallText): two copies of the words (data-text), each the gradient
   with its two glints elsewhere, cross-fade (opacity only); plus-lighter adds the two exactly, so the
   words never thin or thicken midway. Still motion keeps the plain gradient. */
@supports (mix-blend-mode: plus-lighter) and (content: '' / '') {
  @media (prefers-reduced-motion: no-preference) {
    .voice-label { position: relative; isolation: isolate; }
    .voice-label::before, .voice-label::after { content: attr(data-text) / ''; position: absolute; inset: 0;
      visibility: hidden; color: transparent; mix-blend-mode: plus-lighter;
      background-image: radial-gradient(closest-side, var(--voice-glint-1), transparent),
        radial-gradient(closest-side, var(--voice-glint-2), transparent), var(--voice-listen);
      background-size: 84px 52px, 76px 50px, 100% 100%; background-repeat: no-repeat;
      -webkit-background-clip: text; background-clip: text;
      animation: voice-light 5.2s ease-in-out var(--voice-phase, 0s) infinite alternate both; }
    .voice-label::before { background-position: 96% 20%, 0 80%, 0 0; animation-direction: alternate-reverse; }
    .voice-label::after { background-position: 0 30%, 100% 70%, 0 0; }
    .voice[data-state='listening']:not(.muted) .voice-label { background: none; }
    .voice[data-state='listening']:not(.muted) .voice-label::before,
    .voice[data-state='listening']:not(.muted) .voice-label::after { visibility: visible; }
  }
}
.voice-capsule:has(.voice-caption:not(:empty)) .voice-status { font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: 0; color: var(--fg-2); }
.voice:is([data-state='idle'], [data-state='error']) .voice-status { font-size: 15px; line-height: 21px; letter-spacing: -.01em; }
.voice[data-state='error'] .voice-status { font-weight: 500; color: var(--bad); }
/* two lines, the newest: a long reply keeps showing the words being said, its start cut off above */
.voice-caption { margin-top: 2px; font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: -.02em;
  color: var(--fg-2); word-break: keep-all; overflow-wrap: anywhere;
  display: flex; flex-direction: column; justify-content: flex-end; max-height: 44px; overflow: hidden; }
.voice-caption:empty { display: none; }
.voice-caption[data-from='person'] { color: var(--fg); }
/* a word arriving in the live caption (1A): a short fade and a 3px rise, nothing else moves */
.voice-word { display: inline-block; }
.voice-word.new { animation: voice-word .26s var(--motion-ease) both; }
@keyframes voice-word { from { opacity: 0; transform: translateY(3px); } }
.voice-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.voice-overlay > .voice-actions { justify-content: flex-end; gap: 8px; }
.voice-capsule :is(.voice-mute, .voice-open) { border-radius: 50%; color: var(--fg); }
.voice-capsule .voice-end { min-height: 40px; min-width: 64px; margin-inline-start: 4px; padding: 0 16px; border-radius: 20px; }
.voice[data-state='error'] .voice-mute { display: none; }
/* the live voice's mic, turned off */
.voice:not(.voice-basic) .voice-mute[aria-pressed='true'] { background: var(--bad-soft); color: var(--bad); }
/* the mic's halo while it listens (1C flCallMic) */
.voice-mute svg { position: relative; }
.voice-mute::before { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; visibility: hidden;
  background: radial-gradient(closest-side, var(--voice-halo), transparent);
  animation: voice-mic 1.5s ease-in-out var(--voice-phase, 0s) infinite; }
.voice:is([data-state='listening'], [data-state='hearing']):not(.muted) .voice-mute::before { visibility: visible; }
.voice[data-level~='in'] .voice-mute::before { animation: none; opacity: calc(.55 + var(--level) * .45);
  transform: scale(calc(.8 + var(--level) * .5)); transition: transform .08s linear, opacity .08s linear; }
/* the state's mark after its words (4C): bars while the voice speaks, dots while it thinks or connects */
.voice-mark { display: none; align-items: center; gap: 2px; height: 14px; flex: none; }
.voice-mark i { width: 2px; height: 14px; border-radius: 1px; background: currentColor; }
.voice-mark i:nth-child(1) { --k: .75; } .voice-mark i:nth-child(2) { --k: 1; } .voice-mark i:nth-child(3) { --k: .7; }
.voice-mark i:nth-child(4) { --k: .9; } .voice-mark i:nth-child(5) { --k: .6; }
.voice:is([data-state='speaking'], [data-state='thinking'], [data-state='connecting']) .voice-mark { display: inline-flex; }
.voice[data-state='speaking'] .voice-mark i { transform: scaleY(.22);
  animation: voice-bar .86s ease-in-out var(--voice-step, 0s) infinite; }
.voice[data-state='speaking'] .voice-mark i:nth-child(2) { animation-duration: .7s; animation-delay: calc(var(--voice-step, 0s) - .5s); }
.voice[data-state='speaking'] .voice-mark i:nth-child(3) { animation-duration: .96s; animation-delay: calc(var(--voice-step, 0s) - .25s); }
.voice[data-state='speaking'] .voice-mark i:nth-child(4) { animation-duration: .78s; animation-delay: calc(var(--voice-step, 0s) - .62s); }
.voice[data-state='speaking'] .voice-mark i:nth-child(5) { animation-duration: .9s; animation-delay: calc(var(--voice-step, 0s) - .1s); }
.voice[data-level~='out'][data-state='speaking'] .voice-mark i { animation: none;
  transform: scaleY(calc(.22 + var(--level) * var(--k) * .78)); transition: transform .08s linear; }
.voice:is([data-state='thinking'], [data-state='connecting']) .voice-mark { gap: 3px; }
.voice:is([data-state='thinking'], [data-state='connecting']) .voice-mark i { width: 4px; height: 4px; border-radius: 50%;
  opacity: .3; animation: voice-dot 1.1s ease-in-out var(--voice-step, 0s) infinite; }
.voice:is([data-state='thinking'], [data-state='connecting']) .voice-mark i:nth-child(2) { animation-delay: calc(var(--voice-step, 0s) + .15s); }
.voice:is([data-state='thinking'], [data-state='connecting']) .voice-mark i:nth-child(3) { animation-delay: calc(var(--voice-step, 0s) + .3s); }
.voice:is([data-state='thinking'], [data-state='connecting']) .voice-mark i:nth-child(n+4) { display: none; }
@keyframes voice-wake { from { opacity: 0; transform: translateY(10px) scale(.92); } }
@keyframes voice-mic { 0%, 100% { transform: scale(.8); opacity: .65; } 22% { transform: scale(1.14); opacity: 1; }
  48% { transform: scale(.92); } 70% { transform: scale(1.06); opacity: .9; } }
@keyframes voice-bar { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
@keyframes voice-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes voice-aura { 0%, 100% { opacity: .72; } 30% { opacity: 1; } 58% { opacity: .82; } 80% { opacity: .96; } }
@keyframes voice-light { from { opacity: 0; } }
@keyframes voice-glow-in { from { opacity: 0; } }
@keyframes voice-glow-1 { to { translate: 71% -9%; } }
@keyframes voice-glow-2 { to { translate: -74% -12%; } }
@keyframes voice-glow-3 { from { translate: -53% 4%; } to { translate: 59% -11%; } }
@keyframes voice-glow-4 { from { translate: -58% 0; } to { translate: 42% -7%; } }
@keyframes voice-glow-scale { 0%, 100% { scale: 1; } 30% { scale: 1.16 1.24; } 55% { scale: .94; } 78% { scale: 1.08 1.14; } }
/* reduced motion stops every loop (below): the bars hold mid height, the dots stay lit, the aura and
   the glow stand still and the words keep their plain gradient */
@media (prefers-reduced-motion: reduce) {
  .voice[data-state='speaking'] .voice-mark i { transform: scaleY(.55); }
  .voice:is([data-state='thinking'], [data-state='connecting']) .voice-mark i { opacity: .8; }
}

/* Space is a library of actual artifacts, with the same soft tiles as V5. */
.ux-space.page { gap: 12px; }
.space-tabs { display: flex; flex: none; gap: 19px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); padding: 0 4px; }
.space-tab { position: relative; padding: 12px 0; min-height: 44px; flex: none; color: var(--fg-2); font: 700 14px/1.2 var(--ux-heading); white-space: nowrap; }
.space-tab.active, .space-tab[aria-selected='true'] { color: var(--fg); }
.space-tab.active::after, .space-tab[aria-selected='true']::after { content: ''; position: absolute; bottom: 0; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.space-tab-count { font: 400 11px/1 var(--ff); margin-inline-start: 4px; color: var(--fg-3); }
/* V5's columns (.sp-grid, .sp-col), each card placed in the shortest by space.js so the newest
   read across the top */
.space-grid { display: flex; align-items: flex-start; gap: 12px; padding: 0 0 6px; }
.space-col { display: flex; flex: 1; flex-direction: column; gap: 12px; min-width: 0; }
/* V5's generous outer curve and inset cover share a 10px frame; compact phones keep more room for text. */
.space-card { position: relative; display: block; width: 100%; min-width: 0;
  margin: 0; border-radius: 40px; background: var(--surface); box-shadow: var(--ux-shadow); }
.space-open { display: flex; flex-direction: column; width: 100%; text-align: start; border-radius: inherit; padding: 10px; color: var(--fg); overflow: hidden; }
/* only a pointer that hovers: a tap leaves :hover on the card, and a theme closed again kept a coloured title */
@media (hover: hover) { .space-open:hover :is(.space-card-title, .space-theme-title) { color: var(--accent); } }
.space-preview { position: relative; display: grid; place-content: center; justify-items: center; gap: 8px; width: 100%; min-height: 116px;
  border-radius: 30px; background: var(--surface-2); color: var(--fg-2); overflow: hidden; }
.space-preview > svg { width: 34px; height: 34px; stroke-width: 1.4; }
.space-preview--app { background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); color: var(--accent); min-height: 136px; }
.space-preview--doc { background: color-mix(in srgb, var(--warn-soft) 50%, var(--surface-2)); }
.space-preview--media { background: color-mix(in srgb, var(--ok-soft) 40%, var(--surface-2)); }
.space-preview.has-excerpt { align-content: start; justify-items: start; padding: 18px 16px; min-height: 164px; gap: 10px; }
.space-excerpt { margin: 0; color: var(--fg-2); font: 400 13px/1.55 var(--ff); text-align: start; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* Remaining outline covers keep V5's sheet of paper rising from the tint with the first block
   shapes. The document title is the card's own, under the cover (#1208). */
/* a block, not the cover's centred grid, and stretched (a block's children follow justify-items
   now): the paper keeps the cover's width whatever its words. Its height is what it shows (space.js
   coverHeight, given as its aspect ratio), the paper running on past the cover's foot; a wide column
   stops it before it turns into a long empty sheet (#1057) */
.space-preview.has-thumb { display: block; justify-items: stretch; padding: 14px 14px 0; max-height: 200px; }
.space-thumb { display: flex; flex-direction: column; gap: 9px; min-width: 0; min-height: 100%; padding: 14px 14px 16px;
  border-radius: 16px 16px 0 0; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(20,20,40,.06); }
.space-thumb .space-excerpt.is-lead { -webkit-line-clamp: 2; color: var(--fg); font-size: 12px; }
/* V5's document hierarchy: quiet format/time, title, then the actual paragraphs and list rows. */
.space-card.space-card--document { border-radius: 26px; box-shadow: 0 2px 8px rgba(20,20,40,.035), inset 0 0 0 1px var(--line); }
.space-card--document .space-open { padding: 16px; }
.space-card--document .space-card-body { padding: 0; }
.space-document-kicker { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px; color: var(--fg-3); font: 500 10px/1.3 var(--ff); }
.space-document-kicker > span:first-child { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; }
.space-document-kicker > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-card--document .space-card-body .space-card-title { font-size: 17px; line-height: 1.25; letter-spacing: -.025em; }
.space-document { display: flex; flex-direction: column; gap: 9px; margin: 12px 0 14px; }
.space-document .space-excerpt { font-size: 13px; line-height: 1.5; -webkit-line-clamp: 4; }
.space-document.is-structured .space-excerpt { -webkit-line-clamp: 2; }
.space-document-block { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.space-document-block .space-excerpt { min-width: 0; flex: 1; }
.space-document-marker { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 14px; height: 14px; margin-top: 3px; color: var(--fg-2); font: 600 11px/1 var(--ff); }
.is-numbered > .space-document-marker { width: auto; min-width: 14px; max-width: 45%; height: auto;
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums; line-height: 1.3; }
.is-bullet > .space-document-marker::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--fg-3); }
.is-task > .space-document-marker { border: 1.2px solid var(--fg-3); border-radius: 50%; }
.is-task.is-checked > .space-document-marker { background: var(--fg); border-color: var(--fg); color: var(--surface); }
.is-task.is-checked .space-excerpt { text-decoration: line-through; color: var(--fg-3); }
.space-document-footer { border-top: 1px solid var(--line); padding-top: 9px; }
.space-document-footer .space-card-file { margin: 0; font-size: 10px; color: var(--fg-3); }
.space-document-footer .space-card-meta { margin-top: 4px; }
.space-document-footer .space-card-source { margin-top: 5px; }
/* HTML apps show their saved content as a compact widget; controls remain in the viewer. */
.space-card--app.space-card--document { background: var(--surface); }
.space-card--app .space-document-kicker > span:first-child { color: var(--accent); }
.space-card--app .space-document-block.is-task { padding-block: 6px; border-bottom: 1px solid var(--line); }
.space-card--app .space-document-block.is-task:last-child { border-bottom: 0; }
.space-card--app .space-document { gap: 6px; }
.space-card--app .is-task > .space-document-marker { border-radius: 4px; }
.space-card--app .is-task.is-checked > .space-document-marker { background: var(--ux-lime); border-color: var(--ux-lime); color: var(--ux-lime-ink); }
/* A page thumbnail keeps its own styling; a single overlay target opens the full app. */
.space-card.space-card--html { border-radius: 26px; overflow: visible; transition: transform var(--motion-press) cubic-bezier(.23, 1, .32, 1); }
/* Transforming only the caption would move the overlay into that smaller containing block. */
.ux-ui .space-card--html .space-open:active:not(:disabled) { transform: none; }
.space-card--html:has(.space-open:active:not(:disabled)) { transform: scale(var(--press-surface)); }
.space-card--html .space-open { padding: 14px 16px 16px; }
.space-card--html .space-open::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.space-card--html > .space-menu-wrap { z-index: 2; }
.space-card--html > :is(.space-delete-confirm, .space-action-error) { position: relative; z-index: 2; }
.space-card--html:has(.space-open:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.space-card--html .space-document-kicker { margin-bottom: 7px; }
.space-card--html .space-document-footer { border: 0; padding-top: 6px; }
.space-card--html .space-card-body .space-card-title { font-size: 16px; line-height: 1.3; -webkit-line-clamp: 2; }
.space-html-preview { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 26px 26px 0 0; background: var(--surface-2); pointer-events: none; }
.space-html-preview.is-ready { background: white; color-scheme: light; }
.space-html-frame { position: absolute; top: 0; left: 0; border: 0; max-width: none;
  transform-origin: top left; pointer-events: none; background: white; }
.space-html-fallback { height: 100%; overflow: hidden; padding: 16px; }
.space-html-fallback .space-document { margin: 0; gap: 6px; }
.space-html-fallback .space-document-block:nth-child(n+3) { display: none; }
.space-html-hint { display: block; margin-top: 10px; font: 500 11px/1.4 var(--ff); color: var(--fg-3); }
@media (max-width: 380px) {
  .space-card.space-card--html { border-radius: 22px; }
  .space-html-preview { border-radius: 22px 22px 0 0; }
}
.space-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 380px) {
  .space-card.space-card--document { border-radius: 22px; }
  .space-card--document .space-open { padding: 14px; }
}
.space-shapes { display: flex; flex-direction: column; gap: 7px; }
.space-shapes i { display: block; height: 5px; border-radius: 3px; background: var(--surface-3); }
.space-shapes i.is-mid { width: 78%; }
.space-shapes i.is-short { width: 56%; }
.space-shapes .space-shape-heading { width: 48%; height: 7px; margin-top: 3px; background: color-mix(in srgb, var(--fg-3) 55%, var(--surface-3)); }
.space-shape-row { display: flex; align-items: center; gap: 6px; }
.space-shape-row > i { flex: 1; }
.space-shape-row > b { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3); }
.space-shape-row.is-task > b { width: 10px; height: 10px; border: 1.5px solid var(--fg-3); background: none; }
.space-shape-row.is-task.is-done > b { border-color: var(--ux-lime); background: var(--ux-lime); }
.space-shape-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.space-shape-table > b { height: 9px; border-radius: 2px; background: var(--surface-3); }
.space-shape-table > b:nth-child(-n+3) { background: color-mix(in srgb, var(--fg-3) 45%, var(--surface-3)); }
.space-shape-code { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--fg) 85%, var(--surface)); }
.space-shapes .space-shape-code i { background: color-mix(in srgb, var(--surface) 40%, transparent); }
.space-shape-quote { display: block; padding-left: 7px; border-left: 3px solid var(--ux-lime); }
.space-shape-image { display: grid; place-items: center; height: 38px; border-radius: 8px; color: var(--fg-3);
  background: color-mix(in srgb, var(--ok-soft) 60%, var(--surface-2)); }
.space-shape-control { display: block; width: 46%; height: 14px; border-radius: 999px; background: var(--fg); opacity: .85; }
.space-card--link .space-preview { display: flex; align-items: center; justify-content: start; gap: 10px; min-height: 56px; padding: 12px 14px; }
.space-preview--link > svg { width: 24px; height: 24px; flex: none; color: var(--accent); }
.space-link-host { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
a.space-open { text-decoration: none; }
/* V5 gives each image room for its own proportions, with a quiet caption below.
   Transparent artwork rests on the same solid surface as the caption. */
.space-card--media { border-radius: 30px; box-shadow: 0 3px 14px rgba(20,20,40,.035); }
.space-card--media .space-open { padding: 0; }
.space-card--media .space-preview { border-radius: 30px 30px 0 0; background: var(--surface-2); }
.space-preview.has-picture { display: grid; place-content: stretch; min-height: 0; background: var(--surface); }
.space-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.space-image-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-3); }
.space-preview:has(.space-image.in) .space-image-placeholder { display: none; }
.space-image-error { display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 10px; padding: 18px; color: var(--fg-2); font: 400 12px/1.5 var(--ff); text-align: center; }
.space-image-error svg { flex: none; color: var(--fg-3); }
.space-card--media .space-card-body { padding: 15px 16px 18px; }
:is(.ux-space, .space-theme-view, .space-context) .space-card--media .space-card-title { font-size: 17px; line-height: 1.3; -webkit-line-clamp: 2; }
.space-card--media .space-card-meta { margin-top: 7px; line-height: 1.5; overflow-wrap: anywhere; }
.space-card--media .space-card-source { margin-top: 6px; }
@media (max-width: 380px) {
  .space-card--media .space-card-body { padding: 13px 14px 16px; }
  :is(.ux-space, .space-theme-view, .space-context) .space-card--media .space-card-title { font-size: 16px; }
}

.space-format { font: 700 10px/1.2 var(--ux-heading); letter-spacing: .08em; text-transform: uppercase; }
/* a file's kind with its format on a band at the icon's foot; the customary colour of the format,
   neutral for one without (#523) */
.space-filetype { position: relative; display: grid; place-items: center; padding: 6px 10px 12px; color: var(--fg-3); }
.space-filetype > svg { stroke-width: 1.3; }
.space-filetype > .space-format { position: absolute; left: 0; bottom: 8px; min-width: 34px; padding: 3px 6px; border-radius: 6px;
  background: var(--filetype, var(--fg-2)); color: #fff; font-weight: 800; letter-spacing: .04em; text-align: center;
  box-shadow: 0 2px 6px rgba(20,20,40,.12); }
.space-filetype[data-format='pdf'] { --filetype: #e5484d; }
.space-filetype:is([data-format='doc'], [data-format='docx'], [data-format='hwp'], [data-format='hwpx'], [data-format='odt'], [data-format='rtf']) { --filetype: #3b6fe0; }
.space-filetype:is([data-format='xls'], [data-format='xlsx'], [data-format='ods']) { --filetype: #1f9d55; }
.space-filetype:is([data-format='ppt'], [data-format='pptx'], [data-format='odp'], [data-format='key']) { --filetype: #ea6a1f; }
.space-filetype:is([data-format='zip'], [data-format='7z'], [data-format='rar'], [data-format='tar'], [data-format='gz']) { --filetype: #7c5cd6; }
.space-card-body { padding: 14px 8px 10px; min-width: 0; width: 100%; }
:is(.ux-space, .space-theme-view, .space-context) .space-card-title { margin: 0; font: 650 17px/1.3 var(--ff); letter-spacing: -.025em; word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.space-card-meta { color: var(--fg-3); font-size: 10px; margin: 7px 0 0; }
/* a document's file name, under its own title (#1208) */
.space-card-file { margin: 5px 0 0; color: var(--fg-2); font: 400 11px/1.4 var(--ff); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.space-card-source { color: var(--fg-2); font-size: 11px; margin: 7px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-inline-end: 24px; }
.space-menu-wrap { position: absolute; right: 8px; bottom: 7px; }
.space-more { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--fg-3); }
.space-more:hover { background: var(--surface-2); }
.space-menu { position: absolute; z-index: 5; right: 0; bottom: 34px; min-width: 160px; padding: 5px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.space-menu-item { display: flex; align-items: center; gap: 8px; min-height: 42px; width: 100%; padding: 10px; text-align: start; border-radius: 12px; font-size: 12px; }
.space-menu-item:hover { background: var(--surface-2); }
.space-delete-confirm { padding: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.space-delete-confirm p { flex-basis: 100%; margin: 0; }
.space-action-error { padding: 0 14px 14px; font-size: 12px; color: var(--bad); overflow-wrap: anywhere; }
.space-state { display: flex; align-items: center; flex-direction: column; padding: 45px 22px; text-align: center; gap: 12px; color: var(--fg-2); }
.space-state > svg { width: 40px; height: 40px; color: var(--fg-3); }
.space-state h2 { font-size: 19px; color: var(--fg); margin: 0; }
.space-state p { margin: 0; max-width: 420px; font-size: 13px; }
.space-state.is-error > svg { color: var(--bad); }
/* The work still open, as one quiet line at the top of All that leads to the Work tab. What waits on
   the person is marked with an orange dot, its words in ink like the rest: orange words were too faint
   to read. */
.space-open-work { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 12px; padding: 11px 14px 11px 16px;
  border-radius: 18px; background: var(--surface); color: var(--fg-2); font: 600 13px/1.3 var(--ff); text-align: start; }
.space-open-work > svg { flex: none; margin-inline-start: auto; color: var(--fg-3); }
.space-open-work .asks, .space-card-work.asks { color: var(--fg); }
.space-open-work .asks::before, .space-card-work.asks::before { content: ''; display: inline-block; width: 7px; height: 7px;
  margin-inline-end: 6px; border-radius: 50%; background: var(--ux-orange); vertical-align: 1px; }
@media (hover: hover) { .space-open-work:hover { color: var(--fg); } }
/* a result whose work still goes on says so as one word at the end of its line, never broken apart */
.space-card-work { color: var(--fg-2); font-weight: 600; white-space: nowrap; }
/* work under way and no result yet: where its results will be, under the line that leads to it */
.space-pending { margin: 2px 0 0; color: var(--fg-3); font-size: 12px; text-align: center; }
/* V5's enlarged result: the saved content and one pill back to a draft in its chat. */
.space-result-view { --motion-result-delay: 60ms; position: fixed; inset: 0; z-index: 61; display: flex; flex-direction: column; align-items: center;
  gap: 20px; padding: calc(40px + env(safe-area-inset-top, 0px)) 12px calc(52px + env(safe-area-inset-bottom, 0px)); }
.space-result-scrim { position: absolute; inset: 0; background: rgba(18,18,22,.28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: ux-fade-in var(--motion-scrim) ease; }
/* the panel is V5's tinted #cfull; what it holds sits on it as a card (a document's paper, an app) */
.space-result-panel { position: relative; width: 100%; max-width: 1080px; min-height: 0; flex: 1; display: flex;
  flex-direction: column; overflow: hidden; border-radius: 32px; background: var(--bg); color: var(--fg);
  box-shadow: 0 24px 60px rgba(20,20,40,.18), inset 0 0 0 1px var(--line);
  animation: space-result-in var(--motion-sheet) var(--motion-settle); }
@keyframes space-result-in { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.space-result-head { display: flex; align-items: center; gap: 8px; flex: none; padding: 20px 16px 12px 22px; }
.space-result-name { flex: 1; min-width: 0; }
.space-result-file { margin: 3px 0 0; color: var(--fg-3); font: 400 12px/1.3 var(--ff); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.space-result-head h2 { flex: 1; min-width: 0; margin: 0; font: 700 18px/1.3 var(--ff); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.space-result-close, .space-result-tools :is(.space-more, .space-result-save) { display: grid; place-items: center; flex: none; width: 40px;
  height: 40px; border-radius: 50%; background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line); }
.space-result-tools { position: relative; flex: none; }
.space-result-tools .space-menu-wrap { position: relative; right: auto; bottom: auto; }
.space-result-tools .space-menu { top: 48px; bottom: auto; color: var(--fg); }
.space-result-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 20px 24px; overscroll-behavior: contain; }
.space-result-body:has(> .file-html) { display: flex; padding: 0 8px 8px; }
.space-result-body .file-html { height: 100%; flex: 1; border: 0; border-radius: 24px; box-shadow: 0 0 0 1px var(--line); }
/* A document is a sheet of paper on the panel (V5's .cf-sec), its first heading set as its title
   (V5's .docv h2): a report read as one white field with nothing to tell it from the panel (#611). */
.space-result-body > :is(.file-view, .file-text) { margin: 0; padding: 22px 20px 26px; border-radius: 22px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 10px 28px rgba(20,20,40,.06); }
.space-result-body > .file-view > h1:first-child { font: 700 22px/1.3 var(--ff); letter-spacing: -.4px; margin-bottom: 14px; }
.space-result-body > .file-view blockquote { border-left: 3px solid var(--ux-lime); color: var(--fg-2); }
/* a wide table's row cards (app.css, narrow screens) lie on the paper in the panel's tint */
@media (max-width: 640px) { .space-result-body > .file-view .md-table.many tr { border-color: transparent; background: var(--bg); } }
.space-result-body > p { margin: 12px 4px 0; }
.space-result-body > .btn { display: flex; margin: 16px auto; }
.space-result-bar { position: relative; display: flex; flex-direction: column; align-items: center; flex: none;
  gap: 8px; width: 100%; max-width: 420px;
  animation: ux-fade-in var(--motion-sheet) ease both; animation-delay: var(--motion-result-delay); }
.space-result-bar[hidden] { display: none; }
.space-result-bar > :is(.space-delete-confirm, .space-action-error) { width: 100%; margin: 0; padding: 14px 16px;
  border: 0; border-radius: 22px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
.space-result-bar > .space-action-error { color: var(--bad); text-align: center; }
.space-result-edit, .space-result-download, .sheet-float > button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%;
  min-height: 50px; padding: 12px 26px; border-radius: 999px; background: var(--accent); color: var(--bg);
  font: 700 15px/1.3 var(--ff); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
:is(.space-result-edit, .space-result-download):disabled { opacity: .6; }
.space-result-view.is-details { justify-content: center; }
.is-details .space-result-panel { flex: none; max-width: 480px; }
.space-result-details { display: grid; justify-items: center; gap: 16px; padding: 28px 12px; color: var(--fg-2); text-align: center; }
.space-result-details p { margin: 0; overflow-wrap: anywhere; }
/* Space alone opts into a single reading surface. Chat keeps the shared viewer's presentation. */
.space-result-view--space { gap: 12px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 8px calc(16px + env(safe-area-inset-bottom, 0px)); }
.space-result-view--space .space-result-panel { max-width: 1040px; border-radius: 24px; background: var(--surface); }
.space-result-view--space .space-result-head { gap: 4px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.space-result-view--space .space-result-head h2 { font: 600 15px/1.4 var(--ff); }
.space-result-view--space .space-result-file { margin-top: 2px; font-size: 11px; line-height: 1.4; }
.space-result-view--space :is(.space-result-close, .space-result-tools .space-more, .space-result-save) {
  width: 44px; height: 44px; background: transparent; box-shadow: none; }
.space-result-view--space .space-result-body { padding: 0; }
.space-result-view--space .space-result-body:has(> .file-html) { padding: 0; }
.space-result-view--space .file-html { min-width: 0; width: 100%; border-radius: 0; box-shadow: none; }
.space-result-view--space .space-result-body > :is(.file-view, .file-text) {
  max-width: 76ch; margin: 0 auto; padding: 26px 24px 40px; border-radius: 0; box-shadow: none; background: transparent;
  font-size: 15px; line-height: 1.75; }
.space-result-view--space .space-result-body > .file-text { font-size: 14px; line-height: 1.7; }
.space-result-view--space .space-result-body > .file-view > h1:first-child {
  font: 700 26px/1.25 var(--ff); letter-spacing: -.6px; margin: 0 0 20px; }
.space-result-view--space .file-view :is(h2, h3, h4) { line-height: 1.35; margin-top: 1.6em; }
.space-result-view--space .file-view :is(p, ul, ol) { margin-top: 0; margin-bottom: 1em; }
.space-result-view--space .file-view li + li { margin-top: .4em; }
.space-result-view--space .file-view :is(pre, .md-table) { max-width: 100%; }
.space-result-view--space .space-result-body > .empty { padding: 64px 24px 24px; }
.space-result-view--space.is-details .space-result-panel { max-width: 480px; }
@media (min-width: 700px) {
  .space-result-view--space { padding: 32px 24px; gap: 16px; }
  .space-result-view--space .space-result-head { padding: 14px 16px 14px 28px; }
  .space-result-view--space .space-result-body > :is(.file-view, .file-text) { padding: 40px 32px 56px; }
  .space-result-view--space .space-result-body > .file-view { font-size: 16px; }
  .space-result-view--space .space-result-body > .file-view > h1:first-child { font-size: 30px; }
}
.space-result-image { --motion-result-delay: 60ms; --viewer-bottom: calc(var(--space-view-foot, 0px) + 96px + env(safe-area-inset-bottom, 0px)); }
.space-result-image .viewer-bg { background: rgba(18,18,22,.64); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.space-result-image > .space-result-bar { position: absolute; left: 50%; bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); width: calc(100% - 32px); z-index: 3; }
.space-result-image .viewer-caption { bottom: calc(var(--space-view-foot, 0px) + 82px + env(safe-area-inset-bottom, 0px)); }
.space-result-source { position: absolute; left: 20px; right: 20px; bottom: calc(var(--space-view-foot, 0px) + 60px + env(safe-area-inset-bottom, 0px));
  color: rgba(255,255,255,.8); text-align: center; font: 400 12px/1.4 var(--ff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.space-result-image :is(.viewer-close, .space-more) { width: 40px; height: 40px; background: rgba(255,255,255,.85); color: #111; }
/* A conversation's results of one kind are one theme: its pictures as 1A's collage, its other
   files as papers in V5's frosted folder. Opened, it lies over Space as V5's folder view. */
.space-collage { display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 3px; aspect-ratio: 11 / 10; border-radius: 22px; overflow: hidden; }
.space-tile { position: relative; display: grid; place-content: center; justify-items: center; gap: 4px; min-width: 0; min-height: 0;
  background: var(--surface-2); color: var(--fg-2); }
.space-tile:first-child, .space-collage[data-count='2'] > .space-tile { grid-row: span 2; }
.space-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.space-tile-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.38);
  color: #fff; font: 700 16px/1 var(--ux-heading); }
.space-theme-kind { margin: 0 0 3px; color: var(--fg-3); font: 500 11px/1.3 var(--ff); }
.ux-space .space-theme-title { margin: 0; font: 700 17px/1.22 var(--ff); letter-spacing: -.45px; word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.space-theme--folder { --folder-top: rgba(255,255,255,.96); --folder-bottom: rgba(234,236,242,.9); --folder-edge: #fff;
  --paper: #fff; --paper-ink: #5a5a62; --pocket-top: rgba(248,249,252,.42); --pocket-bottom: rgba(236,238,244,.7);
  --pocket-edge: rgba(255,255,255,.95); --pocket-glow: rgba(255,255,255,.35); isolation: isolate;
  background: linear-gradient(165deg, var(--folder-top), var(--folder-bottom));
  box-shadow: inset 0 0 0 1px var(--folder-edge), 0 10px 30px rgba(20,20,40,.06), 0 1px 2px rgba(0,0,0,.03); }
:root[data-theme='dark'] .space-theme--folder { --folder-top: #29292d; --folder-bottom: #1c1c1f; --folder-edge: rgba(255,255,255,.08);
  --paper: #34343a; --paper-ink: #a7a7ad; --pocket-top: rgba(38,38,42,.42); --pocket-bottom: rgba(28,28,31,.82);
  --pocket-edge: rgba(255,255,255,.1); --pocket-glow: transparent; }
/* the folder's white edge runs over its pocket too */
.space-theme--folder::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--folder-edge); pointer-events: none; }
.space-theme--folder .space-open { position: relative; height: 224px; padding: 18px 16px 0; }
.space-folder-head { padding-inline-end: 28px; }
.ux-space .space-theme--folder .space-theme-title { font-size: 15px; line-height: 1.25; letter-spacing: -.3px; }
.space-folder-head .space-card-meta { margin: 2px 0 0; font: 500 11px/1.3 var(--ff); }
.space-folder-count { position: absolute; top: 14px; right: 14px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 8px;
  background: var(--paper); color: var(--fg-2); font: 600 10.5px/24px var(--ux-heading); text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
/* the papers sit under the head, however many lines its name takes */
.space-papers { position: relative; flex: 1; margin: 25px -6px 0; }
.space-paper { position: absolute; top: 0; width: 76%; height: 118px; padding: 10px 11px; border-radius: 12px; overflow: hidden;
  background: var(--paper); color: var(--paper-ink); font: 400 9.5px/1.55 var(--ff); overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(20,20,40,.1); }
.space-paper b { display: block; margin-bottom: 3px; color: var(--fg); font: 600 10px/1.4 var(--ff); }
.space-paper:nth-child(1) { left: 10%; z-index: 3; transform: rotate(-2deg); }
.space-paper:nth-child(2) { left: 20%; top: -4px; z-index: 2; transform: rotate(6deg); opacity: .96; }
.space-paper:nth-child(3) { left: 2%; top: 4px; z-index: 1; transform: rotate(-8deg); opacity: .92; }
.space-pocket { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 36%;
  background: linear-gradient(180deg, var(--pocket-top), var(--pocket-bottom));
  -webkit-backdrop-filter: blur(7px) saturate(1.3); backdrop-filter: blur(7px) saturate(1.3);
  border-top: 1px solid var(--pocket-edge); box-shadow: 0 -6px 14px var(--pocket-glow); }
.space-theme-view { position: fixed; inset: 0; z-index: 20; overflow: hidden; outline: none; }
/* the dimming reaches past the screen's edges so the blur does not brighten them */
.space-theme-view::before { content: ''; position: absolute; inset: -40px; background: rgba(30,30,40,.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
/* over a dark page a lighter veil keeps the theme's cards apart from what is behind them */
:root[data-theme='dark'] .space-theme-view::before { background: rgba(110,110,125,.3); }
/* the veil fades in as the theme fans open and out as it folds back (space.js fanOut/foldIn) */
.space-theme-view.opening::before { animation: space-veil var(--motion-scrim) ease both; }
.space-theme-view.closing::before { animation: space-veil var(--motion-scrim) ease reverse both; }
.space-theme-view.closing { pointer-events: none; }
@keyframes space-veil { from { opacity: 0; } }
/* a picture fades in inside the box kept for it, the first time it loads (space.js appear) */
.space-fade { opacity: 0; transition: opacity var(--motion-fade) ease; }
.space-fade.in { opacity: 1; }
/* a card gives a little under the finger (V5 .sc:active) */
.space-open { transition: transform .12s ease; }
.space-open:active { transform: scale(.97); }
/* render restores this scroll position; late lazy images must not anchor it somewhere else. */
.space-theme-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-width: none;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 18px calc(96px + env(safe-area-inset-bottom, 0px)); }
.space-theme-scroll > * { max-width: 1080px; margin-inline: auto; }
.space-theme-head { padding: 6px 56px 0 6px; color: #fff; }
.space-theme-head h2 { margin: 0; font: 700 22px/1.25 var(--ff); letter-spacing: -.5px; overflow-wrap: anywhere; }
.space-theme-head p { margin: 2px 0 0; font: 500 12px/1.4 var(--ff); color: rgba(255,255,255,.7); }
/* a theme's cards read row by row, newest first, as V5's masonry places them and as its
   pictures page in the viewer (Space's columns would read down each column) */
.space-theme-view .space-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start;
  margin-top: 18px; }
.space-theme-view .space-card { margin: 0; }
@media (min-width: 700px) { .space-theme-view .space-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .space-theme-view .space-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.space-theme-close { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: max(16px, calc(50% - 540px)); z-index: 1;
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.85); color: #111; }
.space-theme-bar { position: absolute; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.space-theme-bar > * { pointer-events: auto; }
.space-theme-source { min-height: 50px; padding: 0 26px; border-radius: 25px; background: #fff; color: #111;
  font: 700 14px/1.2 var(--ff); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.space-theme-source:disabled { opacity: .7; }
.space-theme-error { margin: 0; max-width: 420px; padding: 8px 14px; border-radius: 16px; background: var(--surface); color: var(--bad);
  font-size: 12px; text-align: center; box-shadow: var(--shadow); }
/* an open theme hides the dock and lies over the side list's sticky search too */
.ux-app:has(> .space-theme-view) { z-index: 2; }
.ux-app:has(> .space-theme-view) > .ux-dock { visibility: hidden; }

/* Notification history and its single path to chats needing an answer. */
.notif-needs { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 52px; padding: 14px 16px; border-radius: 18px; background: var(--surface-2); text-align: left;
  font-size: 15px; font-weight: 600; }
.notif-needs > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-needs > svg { flex: none; transform: rotate(180deg); color: var(--fg-2); }
.notif-records { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.notif-records > .label { margin: 8px 2px 0; }
.notif-history .row-title { font-size: 15px; font-weight: 600; }
.notif-history .row-sub { font-size: 13px; font-weight: 400; }
.notif-history .pill { font-size: 12px; font-weight: 600; }
.notif-older > summary { font-size: 13px; font-weight: 600; }
.notif-older > .swipe { margin-top: 10px; }

/* rows on one card, divided by lines: a chat's work to choose from (⋮ › Work details) */
.ux-setting-list { display: flex; flex-direction: column; border-radius: 30px; background: var(--surface); overflow: hidden; box-shadow: var(--ux-shadow); }
.ux-ui .ux-setting-list > .row-card { border: 0; box-shadow: none; border-radius: 0; background: transparent; padding: 18px 16px; min-height: 68px; }
.ux-ui .ux-setting-list > .row-card + .row-card { border-top: 1px solid var(--line); }

/* Profile and settings retain their real switches, scope notices and server state. */
.device-status.is-in-use { display: inline-flex; align-items: center; gap: 6px; color: var(--device-online-ink); font-weight: 600; white-space: nowrap; }
.device-status.is-in-use::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--device-online); box-shadow: 0 0 0 3px color-mix(in srgb, var(--device-online) 15%, transparent), 0 0 8px color-mix(in srgb, var(--device-online) 40%, transparent); }
.ux-ui .row-card { border-radius: 24px; padding: 16px; border-color: var(--line); box-shadow: var(--ux-shadow); }
.ux-ui .row-card.col { gap: 10px; }
.ux-ui .seg { border-radius: 19px; padding: 4px; }
.ux-ui .seg button { border-radius: 15px; min-height: 36px; }
.ux-ui .seg button.on { box-shadow: 0 2px 6px rgba(0,0,0,.06); }
/* Connections show one quiet row; examples, tools and setup live in their detail sheet. */
.ux-ui .conn-grid { display: flex; flex-direction: column; gap: 0; }
.ux-ui .conn-card { flex-direction: row; align-items: center; gap: 12px; border-radius: 20px;
  padding: 12px 14px; min-width: 0; min-height: 61px; }
.ux-ui .conn-grid .conn-card { border-radius: 0; border-bottom: 0; }
.ux-ui .conn-grid .conn-card:first-child { border-radius: 20px 20px 0 0; }
.ux-ui .conn-grid .conn-card:last-child { border-radius: 0 0 20px 20px; border-bottom: 1px solid var(--line); }
.ux-ui .conn-grid .conn-card:only-child { border-radius: 20px; }
.conn-open, .conn-account { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.conn-open { width: 100%; }
.conn-account { max-width: 100%; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
.conn-info .row-sub:has(.conn-account[aria-pressed="true"]) { white-space: normal; }
.conn-account[aria-pressed="true"] { white-space: normal; }
.conn-account:focus-visible, .conn-open:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; }
.conn-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-align: left; }
.conn-info .row-title, .conn-info .row-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-info .row-title { font-size: 15px; font-weight: 600; }
.conn-info .row-sub { font-size: 13px; font-weight: 400; color: var(--fg-2); }
.ux-ui .conn-card > .btn { flex: none; align-self: center; font-size: 12px; font-weight: 600; }
.conn-help { gap: 16px; }
.conn-help .row-sub { white-space: normal; overflow-wrap: anywhere; }
.conn-help > .btn { align-self: flex-start; }
.conn-custom > summary { font-size: 15px; font-weight: 600; }
.ux-ui .conn-custom > .row-card { margin-top: 12px; }
.ux-ui .empty { padding-top: 40px; }
.ux-ui .empty-ic { width: 62px; height: 62px; border-radius: 23px; background: var(--surface); box-shadow: var(--ux-shadow); }
.ux-ui .sheet { border-radius: 30px 30px 0 0; border: 1px solid var(--line); box-shadow: 0 -8px 40px rgba(0,0,0,.08); }
/* V5's plain confirmation: one question, its consequence, then two equal text actions. */
.ux-ui .sheet.ux-confirm:not(.right) { width: min(480px, 100vw); }
.ux-confirm .sheet-body { padding: 24px 22px 0; gap: 6px; }
.ux-confirm-title { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -.3px; }
.ux-confirm-description { margin: 0; color: var(--fg-2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.ux-ui .ux-confirm .ux-confirm-actions { gap: 0; padding: 22px 22px calc(12px + env(safe-area-inset-bottom, 0px));
  border: 0; background: none; }
.ux-confirm-action { position: relative; flex: 1; min-width: 0; min-height: 46px; border-radius: 12px;
  background: none; color: var(--fg); font-size: 15px; font-weight: 600; }
.ux-confirm-action + .ux-confirm-action::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 1px; background: var(--line); }
.ux-confirm-action:active { background: var(--surface-2); }
.ux-confirm-action:disabled { opacity: .45; cursor: wait; }
.ux-ui .sheet-head { padding: 20px 16px 14px 22px; }
.ux-ui .sheet-title { font-size: 17px; letter-spacing: -.025em; }
.sheet[data-sheet-kind='app-update'] .sheet-title { font-size: 19px; font-weight: 700; }
.app-update-content { display: flex; flex-direction: column; gap: 16px; }
.ux-ui .app-update-content > .row-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
.app-update-content .row-title { font-size: 17px; font-weight: 600; }
.app-update-content .row-sub { font-size: 13px; font-weight: 400; }
.app-update-content .android-notes { font-size: 13px; }
.app-update-content .app-versions { font-size: 13px; }
.app-versions summary { cursor: pointer; color: var(--fg-2); }
.app-versions > .col { margin-top: 10px; gap: 4px; }
.app-update-content .prose { font-size: 13px; }
.app-update-content .prose :is(h1,h2,h3,h4,h5,h6) { font-size: 15px; font-weight: 600; }
.app-update-content .update-bar:not(.paused) > i { background: var(--fg); }
.ux-ui .sheet-body { padding: 18px; }
/* A work's details open as V5 opens a mini-app large: one big rounded card over the page, the
   page blurred behind it (#366), and they leave the way they came, from where they stand: the
   bottom sheet's exit shifted them half a screen sideways first, a second window for a moment (#364).
   It is as tall as what it holds, up to the screen under the page's head: a short work opened as a
   screen of white under three lines (#1129). It stands on the screen's foot, its action under it. */
.ux-ui .sheet.ux-task-full:not(.right) { inset: auto 12px calc(12px + env(safe-area-inset-bottom));
  max-height: calc(100dvh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  transform: none; width: auto; margin: 0 auto; max-width: 980px; border: 0; border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18); animation: ux-task-in .42s var(--motion-settle); }
.ux-ui .sheet.ux-task-full.leaving { animation: ux-task-out var(--motion-leave) var(--motion-ease) both; }
/* its one action stands apart under the panel, as a file's in its enlarged view (.space-result-bar):
   V5's pill under an enlarged card (#745); the panel ends above it */
.ux-ui .sheet.ux-task-full.has-float:not(.right) { bottom: calc(122px + env(safe-area-inset-bottom));
  max-height: calc(100dvh - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
/* the width of the screen, its pill centred: at left 50% it had half the width and a longer label
   broke in two; a tap beside the pill reaches the veil, as on any part of it */
.ux-ui .sheet-float { position: fixed; z-index: 42; left: 16px; right: 16px; bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; pointer-events: none; animation: ux-fade-in var(--motion-sheet) ease both; animation-delay: 60ms; }
.ux-ui .sheet-float > button { pointer-events: auto; }
.ux-ui .sheet.leaving + .sheet-float { animation: ux-fade-out var(--motion-leave) var(--motion-ease) both; }
@keyframes ux-task-in { from { transform: translateY(28px) scale(.97); opacity: 0; } }
@keyframes ux-task-out { to { transform: translateY(28px) scale(.97); opacity: 0; } }
.ux-ui .scrim:has(+ .ux-task-full) { background: rgba(18, 18, 22, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ux-ui .ux-task-full .sheet-head { flex: none; }
.ux-ui .ux-task-full .sheet-body { flex: 0 1 auto; min-height: 0; width: 100%; max-width: 960px; margin: 0 auto;
  padding-bottom: max(18px, env(safe-area-inset-bottom)); }
/* and they read as a result opened large in Space (s2 report 133): the same card corners, the same
   two-line title, the same round ⋯ and ✕ on the plain card, no rule under the head */
.ux-ui .sheet.ux-task-full:not(.right) { border-radius: 32px; }
.ux-ui .ux-task-full .sheet-head { gap: 8px; padding: 20px 16px 12px 22px; border-bottom: 0; }
.ux-ui .ux-task-full .sheet-title { font: 700 18px/1.3 var(--ff); letter-spacing: normal; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ux-ui .ux-task-full .sheet-head > .icon-btn, .ux-ui .ux-task-full .sheet-head > .menu-wrap > .icon-btn { width: 40px; height: 40px;
  border-radius: 50%; background: var(--surface-2); color: var(--fg); }
.ux-ui .sheet:is(.ux-room-settings, .ux-room-media-sheet):not(.right) {
  max-height: min(660px, calc(100dvh - env(safe-area-inset-top) - 16px)); border-radius: 28px 28px 0 0;
  background: var(--bg); padding-bottom: env(safe-area-inset-bottom); }
.ux-sheet-grab { flex: none; width: 36px; height: 4px; margin: 10px auto 0; border-radius: 2px;
  background: var(--fg-3); opacity: .45; }
.ux-ui :is(.ux-room-settings, .ux-room-media-sheet) .sheet-head { flex: none; border-bottom: 0; padding-top: 14px; }
.ux-ui :is(.ux-room-settings, .ux-room-media-sheet) .sheet-title { font-size: 19px; }
.ux-ui :is(.ux-room-settings, .ux-room-media-sheet) .sheet-body { min-height: 0; gap: 20px; }
.ux-room-overview { display: flex; align-items: center; gap: 14px; }
.ux-room-overview > img { flex: none; width: 68px; height: 68px; border-radius: 22px; background: var(--surface); object-fit: cover; }
.ux-room-overview > div { min-width: 0; }
.ux-room-overview strong { display: block; font-size: 17px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.ux-room-overview small { display: block; margin-top: 6px; color: var(--fg-2); font-size: 12px; }
.ux-room-section { display: flex; flex-direction: column; gap: 8px; }
.ux-room-section h3 { font-size: 12px; font-weight: 700; color: var(--fg-2); margin: 0 4px; }
.ux-room-box { background: var(--surface); border-radius: 22px; overflow: hidden; }
.ux-room-setting { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; text-align: start; }
.ux-room-setting + .ux-room-setting { border-top: 1px solid var(--line); }
button.ux-room-setting:hover { background: var(--surface-2); }
.ux-room-setting-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; color: var(--fg-2); background: var(--bg); }
.ux-room-setting strong { display: block; font-size: 14px; font-weight: 600; }
.ux-room-setting small { display: block; font-size: 11.5px; color: var(--fg-2); margin-top: 4px; }
.ux-room-setting-end { display: flex; align-items: center; gap: 6px; color: var(--fg-2); font-size: 12px; }
.ux-room-setting > svg, .ux-room-setting-end > svg { transform: rotate(180deg); color: var(--fg-3); flex: none; }
.ux-room-settings .switch { width: 44px; height: 26px; border-radius: 13px; }
.ux-room-settings .switch i { width: 20px; height: 20px; }
.ux-room-settings .switch.on { background: var(--fg); }
.ux-room-settings .switch.on i { background: var(--bg); }
.ux-room-local { margin: 0 4px; font-size: 11px; line-height: 1.5; color: var(--fg-2); }
.ux-room-leave { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px;
  background: var(--surface); color: var(--bad); border-radius: 22px; font-size: 14px; font-weight: 600; }
.ux-room-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ux-room-photo, .ux-room-file { min-width: 0; overflow: hidden; border-radius: 18px; background: var(--surface); }
.ux-room-photo > img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.ux-room-photo > span { display: block; padding: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.ux-room-file { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 16px; text-align: start; }
.ux-room-file > svg { flex: none; color: var(--fg-2); }
.ux-room-file > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
@media (min-width: 700px) { .ux-ui .sheet:is(.ux-room-settings, .ux-room-media-sheet):not(.right) { border-radius: 28px; } }
.ux-ui .sheet.right { border-radius: 28px 0 0 28px; }
.ux-ui .menu { border-radius: 20px; padding: 6px; }
.ux-ui .menu-item { border-radius: 13px; min-height: 42px; }
.ux-ui .scrim { background: rgba(20,20,25,.28); backdrop-filter: blur(4px); }
.ux-ui .ux-ui .nav { border-radius: 18px; }
.ux-ui .sidebar { background: var(--bg); }

@media (min-width: 700px) {
  .ux-app.shell { --ux-gutter: 28px; }
  .ux-conversations.page { padding-inline: 22px; }
  .ux-greeting { margin-top: 10px; margin-bottom: 30px; }
  .ux-greeting h1 { font-size: 34px; }
  /* the buttons keep a phone's width (440px) in the middle, while the dock keeps the page's width
     less its 14px insets (taps pass through it): its fade covers the page and ends at the page's
     edge. One as wide as the window, centred beside the side bar, scrolled the page sideways. */
  .ux-dock { padding-inline: max(0px, (100% - 2 * 14px - 440px) / 2); }
  .space-grid, .space-col { gap: 14px; }
  .space-preview { min-height: 150px; }
  /* a wide column's square was mostly empty around 11-14 px words: here it keeps a card's height */
  .ux-chat .chat { max-width: 800px; width: 100%; margin-inline: auto; }
  .ux-ui .sheet:not(.right) { bottom: 20px; width: min(680px,calc(100vw - 40px)); border-radius: 30px; }
}
@media (min-width: 1100px) {
  .ux-ui .frame { grid-template-columns: 250px minmax(0,1fr); }
  .ux-ui .frame-main .shell { max-width: 1080px; }
}
@media (max-width: 380px) {
  .ux-app.shell { --ux-gutter: 12px; }
  .ux-tab { min-width: 88px; padding-inline: 15px; }
  .ux-new-chat { width: 60px; height: 60px; }
  .ux-greeting { margin-inline: 3px; }
  .space-grid, .space-col, .space-theme-view .space-grid { gap: 10px; }
  .space-card { border-radius: 32px; }
  .space-open { padding: 8px; }
  .space-preview { border-radius: 24px; min-height: 100px; }
  .space-card-body { padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ux-ui *, .ux-ui *::before, .ux-ui *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .ux-new-chat:hover { transform: none; }
}

/* no bottom padding: the scroller's own padding held the sticky main button that far above the
   screen's foot, and the step showed beneath it (the button's band carries the safe area) */
.ux-onboarding.page { gap: 20px; padding-bottom: 0; }
/* the design's progress: one bar of segments for the steps that set something up */
.ux-onboarding-progress { display: flex; justify-content: center; padding: 8px 0; flex: none; }
.ux-onboarding-progress li { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); color: transparent; overflow: hidden; }
.ux-onboarding-progress li:is(.done, .on) { background: var(--fg); }
.ux-onboarding-body { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 660px; margin-inline: auto; min-width: 0; }
/* the design's step heading: written from the start of the line, a large heading over a short grey line */
.ux-onboarding-hero { display: flex; flex-direction: column; align-items: flex-start; text-align: start; gap: 8px; padding: 8px 2px 4px; }
.ux-onboarding-hero > .ux-character { display: block; width: 112px; height: 112px; }
.ux-onboarding-hero h1 { font: 600 25px/1.3 var(--ff); letter-spacing: -.6px; margin: 0; text-wrap: balance; }
.ux-onboarding-hero p { font-size: 13px; font-weight: 600; line-height: 1.55; margin: 0; max-width: 450px; color: var(--fg-2); text-wrap: pretty; }
.ux-onboarding-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ux-onboarding-card > .page { flex: none; overflow: visible; padding: 0; gap: 12px; }
/* a page shown inside a step keeps the step's own way back: its bar does not show */
.ux-onboarding-card > .page > :is(h2,.page-back,.ux-page-bar) { display: none; }
.ux-onboarding-card .row-card { border-radius: 26px; }
.ux-onboarding-card .conn-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); }
/* First setup offers two services; the full catalog stays in My page. */
.onboarding-connections{display:flex;flex-direction:column;gap:12px}
.onboarding-connection .conn-badge{width:36px;height:36px;font-size:15px}
.onboarding-connection strong{font-size:15px;font-weight:600}
.onboarding-connection .row-sub{font-size:13px;font-weight:400}
.onboarding-connection-desc{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.onboarding-connection-help{font-size:13px;overflow-wrap:anywhere}
.onboarding-connection-help summary{cursor:pointer;color:var(--fg-2)}
.ux-onboarding-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  flex: none; width: 100%; max-width: 660px; margin: auto auto 0; padding-top: 8px; }
.ux-onboarding-actions .btn.primary { min-width: 150px; }
.ux-onboarding-actions > .ux-skip { flex-basis: 100%; color: var(--fg-2); font-size: 12px; text-align: center; min-height: 40px; }
.ux-choice { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 24px;
  background: var(--surface); color: var(--fg); text-align: start; width: 100%; }
.ux-choice.on, .ux-choice[aria-pressed='true'] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-height: 650px) {
  .ux-onboarding-hero { padding-top: 0; }
}
.ux-greeting-copy { grid-column: 1; min-width: 0; }
.ux-conv-menu { top: 38px; min-width: 190px; }
.ux-local-hint { padding: 8px; font-size: 12px; }
/* an empty tab and a list that could not be read: the same quiet block, a retry under the failure */
:is(.ux-hub-empty, .ux-list-error) > svg { color: var(--fg-3); }
:is(.ux-hub-empty, .ux-list-error) h2 { margin-top: 12px; font-size: 17px; }
:is(.ux-hub-empty, .ux-list-error) p { font-size: 13px; line-height: 1.55; color: var(--fg-2); margin: 8px auto 16px; max-width: 300px;
  word-break: keep-all; }
.ux-list-error.conversation-error { display: block; padding: 40px 20px; text-align: center; color: var(--fg-3); }
.ux-list-error .btn { min-height: 44px; padding-inline: 24px; }
/* the list's first read: soft placeholder rows (a tile and two lines), breathing until it answers */
.ux-list-loading { display: flex; flex-direction: column; }
.ux-skeleton-row { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 8px;
  animation: ux-skeleton 1.4s ease-in-out infinite; }
.ux-skeleton-row i { flex: none; width: 52px; height: 52px; border-radius: 19px; background: var(--surface-3); }
.ux-skeleton-row span { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.ux-skeleton-row b { display: block; width: 46%; height: 12px; border-radius: 6px; background: var(--surface-3); }
.ux-skeleton-row b + b { width: 78%; height: 10px; opacity: .7; }
@keyframes ux-skeleton { 50% { opacity: .5; } }
.ux-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.space-delete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.space-delete-actions .btn { flex: 1; min-width: 0; white-space: normal; }
.space-refresh-error { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-radius: 18px; background: var(--bad-soft);
  color: var(--bad); padding: 12px 14px; font-size: 12px; overflow-wrap: anywhere; }
.space-refresh-error > .btn { margin-inline-start: auto; }
.space-menu-item.danger { color: var(--bad); }
.ux-onboarding-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none;
  width: 100%; max-width: 660px; margin-inline: auto; }
.ux-onboarding-toolbar .ux-onboarding-progress { flex: 1; display: flex; list-style: none; align-items: center; gap: 7px; margin: 0; }
.ux-onboarding-toolbar > .icon-btn { flex: none; }
.ux-onboarding-toolbar .ux-onboarding-progress { gap: 4px; }
/* where the design shows no way back or no progress, the bar keeps its place */
.ux-onboarding-gap { flex: 1; }
.space-card-source > svg { margin-inline-end: 4px; vertical-align: -2px; }
.ux-search > h1 { margin: 8px 4px 4px; font-size: 29px; }
.ux-search > .conv-search { padding-inline: 14px; background: var(--surface); border-radius: 24px; }
.ux-search .conv-search-input { padding-block: 12px; }
.ux-ui .goal-card { border-radius: 24px; box-shadow: var(--ux-shadow); }
.ux-ui .goal-card-head { padding: 17px 16px; }
.ux-ui .file-card { border-radius: 24px; padding: 10px; box-shadow: var(--ux-shadow); }
.ux-ui :is(.file-card img,.file-ic) { border-radius: 17px; }
.ux-ui .file-name { padding-inline: 2px; }
.ux-ui .brief-card { box-shadow: var(--ux-shadow); }
.ux-ui .brief-card-title { font-weight: 600; }
.ux-ui .brief-hero-title { font-family: var(--ux-heading); font-weight: 700; }
.ux-ui .brief-card-media { border-radius: 20px; }
.ux-ui .vm-frame { border-radius: 24px; }
.ux-ui .work-tabs { background: transparent; border-radius: 0; padding: 0; gap: 20px; border-bottom: 1px solid var(--line); }
.ux-ui .work-tabs button { position: relative; flex: none; padding: 12px 2px; border-radius: 0; color: var(--fg-2); }
.ux-ui .work-tabs button.on { box-shadow: none; background: transparent; color: var(--fg); }
.ux-ui .work-tabs button.on::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 18px; border-radius: 2px; background: currentColor; }
/* Icon fields reserve their leading space when the shared input padding changes. */
.ux-ui .input-wrap .input { padding-inline-start: 42px; padding-inline-end: 14px; }
.ux-ui .input-wrap .input[name='password'] { padding-inline-end: 46px; }
/* Sign-in, V5's front door: Yomi waves over the product's one line on a soft grey light and the
   form sits under it, one centred column on a phone and a desktop alike. Sign-up has two more
   fields, so its Yomi steps back to keep the button in sight. */
.ux-ui .auth { --auth-glow: #e9e9ee; --auth-ring: rgba(0,0,0,.06); position: relative;
  min-height: var(--app-h, 100dvh); display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(64px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(90% 55% at 50% 30%, var(--auth-glow) 0%, var(--bg) 75%); }
:root[data-theme='dark'] .ux-ui .auth { --auth-glow: #222226; --auth-ring: rgba(255,255,255,.08); }
.ux-ui .auth-column { width: 100%; max-width: 360px; display: flex; flex-direction: column; }
.ux-ui .auth-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ux-ui .auth-intro .ux-wave { width: 264px; height: 236px; margin: 0; }
.ux-ui .auth-intro .ux-wave-shadow { width: 120px; height: 16px; margin-left: -60px; bottom: -6px; }
.ux-ui .auth.signup .auth-intro .ux-wave { width: 176px; height: 157px; }
.ux-ui .auth.signup .auth-intro .ux-wave-shadow { width: 80px; height: 11px; margin-left: -40px; }
.ux-ui .auth-tagline { margin: 22px 0 0; font: 700 19px/1.38 var(--ux-heading); letter-spacing: .1px; color: var(--fg);
  white-space: pre-line; }
.ux-ui .auth-card { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.ux-ui .auth-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.ux-ui .auth-note { margin: 0 6px 6px; font: 600 13px/1.55 var(--ff); color: var(--fg-2); text-align: center; text-wrap: balance;
  word-break: keep-all; }
.ux-ui .auth-card .callout { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 2px; padding: 13px 16px;
  border-radius: 18px; font: 600 13px/1.5 var(--ff); }
.ux-ui .auth-card .callout svg { flex: none; margin-top: 2px; }
.ux-ui .auth .field { gap: 0; }
.ux-ui .auth .input-wrap > svg { left: 18px; color: var(--ux-muted); transition: color var(--motion-fade); }
.ux-ui .auth .input-wrap:focus-within > svg { color: var(--fg); }
.ux-ui .auth .input-wrap .input { height: 54px; padding-inline-start: 48px; border: 0; border-radius: 18px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--auth-ring); color: var(--fg); font: 600 15px var(--ff);
  transition: box-shadow var(--motion-fade); }
.ux-ui .auth .input-wrap .input::placeholder { color: var(--ux-muted); font-weight: 500; }
.ux-ui .auth .input-wrap .input:focus { outline: none; box-shadow: 0 0 0 1.5px var(--fg); }
.ux-ui .auth .input-wrap .input[name='password'] { padding-inline-end: 52px; }
.ux-ui .auth .input-eye { right: 8px; width: 38px; height: 38px; border-radius: 50%; color: var(--ux-muted); }
.ux-ui .auth .input-eye:hover { background: var(--surface-2); color: var(--fg); }
.ux-ui .auth-card .btn.lg { height: 52px; min-height: 52px; margin-top: 6px; border-radius: 26px; background: var(--fg);
  color: var(--bg); font: 700 14.5px var(--ff); box-shadow: none; transition: transform .15s, opacity var(--motion-fade); }
.ux-ui .auth-card .btn.lg:active:not(:disabled) { transform: scale(.98); }
.ux-ui .auth-card .btn.lg:disabled { opacity: .6; cursor: progress; }
.ux-ui .auth-switch { min-height: 40px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0 4px; font: 600 13px/1.4 var(--ff); color: var(--fg-2); }
.ux-ui .auth-switch a { color: var(--fg); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ux-ui .auth-foot { margin: 20px 0 0; font: 600 11.5px/1.4 var(--ff); letter-spacing: .02em; color: var(--fg-3); text-align: center; }
.ux-ui .auth-lang { position: absolute; z-index: 2; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; margin: 0;
  flex-wrap: nowrap; gap: 2px; padding: 3px; border-radius: 20px; background: color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow: 0 0 0 1px var(--auth-ring); }
.ux-ui .auth-lang button { flex: none; min-height: 32px; padding: 0 12px; border-radius: 16px; font: 600 12.5px var(--ff); color: var(--fg-2); }
.ux-ui .auth-lang button.on { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
@media (max-height: 720px) {
  .ux-ui .auth { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
  .ux-ui .auth-intro .ux-wave { width: 176px; height: 157px; }
  .ux-ui .auth-intro .ux-wave-shadow { width: 80px; height: 11px; margin-left: -40px; }
  .ux-ui .auth.signup .auth-intro .ux-wave { width: 120px; height: 107px; }
  .ux-ui .auth.signup .auth-intro .ux-wave-shadow { width: 56px; height: 8px; margin-left: -28px; }
  .ux-ui .auth-tagline { margin-top: 16px; }
  .ux-ui .auth-card { margin-top: 24px; }
}
/* A scrollable flex column must keep each section's natural height. In particular,
   a clipped settings group otherwise shrank to two rows on a short phone. */
.ux-app > .page > * { flex-shrink: 0; }
.ux-chat .composer textarea:focus-visible { outline: none; }
.ux-app:not(.ux-hub):not(.ux-chat) > .top { display: flex; align-items: center; justify-content: space-between; }
.ux-app:not(.ux-hub):not(.ux-chat) > .top > .who-btn { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.ux-app:not(.ux-hub):not(.ux-chat):has(> .ux-onboarding) > .top { display: none; }
/* the agent's look as the design's editor draws it (V5 .ed.full): the look worn now large on its own
   colour, the thirteen looks as small round thumbnails four to a row and Done as the one black pill,
   in a column as narrow as a phone's on a wide screen. The page scrolls across the shell's whole
   gutter, as V5's sheet does, so Done's shadow fades out there instead of being cut at the content's edge. */
.ux-editor.page { gap: 0; margin-inline: calc(-1 * var(--ux-gutter, 16px)); padding-inline: calc(var(--ux-gutter, 16px) + 2px); }
.ux-editor.page > :not(.ux-page-bar) { width: 100%; max-width: 420px; margin-inline: auto; }
.ux-editor-preview { display: grid; place-items: center; padding: 2px 0 16px; }
.ux-editor-preview > .ux-face { width: 112px; height: 112px; box-shadow: 0 14px 34px rgba(40, 30, 20, .10); }
/* a still figure (a look without a clip, or any look with reduced motion) sits where V5 puts one in
   this circle: 74 of 112 px wide, 16 px down, its feet under the edge */
.ux-editor-preview > .ux-face > .companion { width: 106px; height: 106px; margin: 16px auto 0; }
.ux-editor .btn.ux-editor-done { min-height: 50px; margin-top: 18px; border-radius: 25px; font-size: 15px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
/* the looks to choose from, here and in first setup (V5 .edrow.chars), each on its own colour: a look
   with a clip framed as V5 crops its tile (.edc i.bgf: 118% wide, 40% from the top), the others' still
   40 px wide and 9 px down, floating as V5's first-run figures do (js/app.js LookThumb) */
.ux-look-picker { width: 100%; max-width: 420px; margin-inline: auto; }
.ux-look-label { margin: 0 0 9px 2px; font-size: 12px; font-weight: 600; color: var(--fg-2); }
.ux-look-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 0; justify-items: center; }
.ux-look-grid .character-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  max-width: 100%; padding: 0 2px; font-size: 11px; font-weight: 400; line-height: 1.3; color: var(--fg-2);
  text-align: center; overflow-wrap: anywhere; }
.ux-look-thumb { position: relative; display: block; flex: none; width: 56px; height: 56px; border-radius: 50%;
  overflow: hidden; background: var(--look-tint); }
.ux-look-thumb > img { position: absolute; max-width: none; }
.ux-look-thumb > :is(.clip, .tile) { left: -9%; top: -7.2%; width: 118%; height: 118%; }
/* Yomi's clip is its whole figure, while V5's tile of it is a close-up of head and shoulders (the
   clip's square from 19.6% across and 12% down, 60.8% of its width): framed so the circle shows what
   the tile shows, as for the five looks whose tile is their clip's first frame */
.ux-look-thumb[data-look='yomi'] > .clip { left: -47.1%; top: -30.6%; width: 194.2%; height: 194.2%; }
.ux-look-thumb > .still { inset-inline: 0; top: 9px; width: 40px; margin-inline: auto; }
/* the look worn now: its name in ink, ringed in ink with a gap of the surface between (V5 .edc.on);
   the gap is drawn over the picture, which would hide an inset shadow of the circle itself */
.ux-look-grid .character-pick.on { color: var(--fg); font-weight: 600; }
.character-pick.on .ux-look-thumb { box-shadow: 0 0 0 2px var(--fg); }
.character-pick.on .ux-look-thumb::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--surface); }

/* ── The design's shell (V5): the hub's two round buttons, a chat's bar, page bars, ⋮ menus ── */
/* the hub: search and the person's agent at the top right as V5 draws them, scrolling away with the list;
   in the phone app what it adds at the left (watching and listening along) */
.ux-app .top.ux-hub-top { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-height: 0; padding: 6px 0 0; position: relative; z-index: 6; }
.ux-app .top.ux-hub-top .ux-round { width: 40px; height: 40px; box-shadow: 0 0 0 1px rgba(20, 20, 40, .035), 0 4px 14px rgba(20, 20, 40, .14), 0 1px 3px rgba(20, 20, 40, .08); }
/* watching and listening along at the hub's top left (#1198): off as the round buttons at its right,
   on filled with the live dot, starting or ending dimmed and breathing; why one did not start under them */
.ux-along-taps { display: flex; gap: 8px; margin-right: auto; }
.ux-along-tap { position: relative; }
.ux-app .top.ux-hub-top .ux-along-tap[aria-pressed=true] { background: var(--fg); color: var(--bg); }
.ux-along-tap[aria-pressed=true]::after { content: ""; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--live-dot); box-shadow: 0 0 0 2px var(--bg); }
.ux-along-tap[aria-busy=true] { animation: ux-along-wait 1.4s ease-in-out infinite; }
@keyframes ux-along-wait { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ux-along-tap[aria-busy=true] { animation: none; opacity: .6; } }
.ux-along-why { flex-basis: 100%; }
.ux-along-why .needs { flex-wrap: wrap; }
.ux-hub-top .ux-profile-button { width: 40px; height: 40px; background: #e9eaf0; box-shadow: 0 0 0 1px rgba(20, 20, 40, .035), 0 4px 14px rgba(20, 20, 40, .14), 0 1px 3px rgba(20, 20, 40, .08); }
/* a chat's bar: back, its name in a pill beside its companion, ⋮ */
.ux-app .top.ux-room-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center;
  min-height: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) 0 6px; }
.ux-app .top.ux-room-head > .icon-btn { width: 44px; height: 44px; background: none; box-shadow: none; }
.ux-app .top.ux-room-head > .back-btn svg { width: 24px; height: 24px; stroke-width: 1.8; }
/* V5's room controls sit 8px from the phone edge, inside the page's wider gutter. */
@media (max-width: 699px) {
  .ux-app .top.ux-room-head { margin-inline: calc(8px - var(--ux-gutter)); }
}
.ux-room-offline { grid-column: 1 / -1; margin-top: 4px; padding: 8px 12px; border-radius: 12px;
  background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1.5; }
.ux-room-pill.who-btn { flex-direction: row; gap: 8px; justify-self: center; max-width: min(230px, 100%); height: 40px; padding: 0 18px 0 6px;
  border-radius: 20px; background: color-mix(in srgb, var(--surface) 75%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .08); }
/* the chat's face, as the design's 28 px round avatar on its pale tint (companion-assets.js frames it) */
.ux-room-pill .mascot-slot, .ux-room-pill .mascot { width: 28px; height: 28px; margin: 0; border-radius: 50%; overflow: hidden; flex: none; }
.ux-room-pill .mascot-slot { background: #eef0f6; }
.ux-room-title { min-width: 0; font-size: 14px; font-weight: 700; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⋮ drawn as the design's three dots */
.ux-menu-btn { color: var(--fg); background: none; box-shadow: none; }
.ux-ico-more { width: 4px; height: 18px; background: radial-gradient(circle, currentColor 1.9px, transparent 2.2px) 50% 0 / 4px 6px repeat-y; }
.ux-menu-scrim { position: fixed; inset: 0; z-index: 44; }
.menu.ux-shell-menu { position: fixed; z-index: 45; min-width: 200px; padding: 6px; border-radius: 18px; border: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 14px 36px rgba(20, 20, 40, .16); transform-origin: top right;
  animation: ux-menu-in .18s cubic-bezier(.3, .7, .2, 1); }
.ux-shell-menu .menu-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px;
  border-radius: 12px; font-size: 14px; font-weight: 500; }
.ux-shell-menu .menu-item.danger { color: var(--bad); }
@keyframes ux-menu-in { from { transform: scale(.92); opacity: 0; } }
/* a chat's work to choose from (⋮ › Work details): one row each, its status and when it was asked.
   The list and its rows keep their own height and the sheet's body scrolls them (a redraw keeps
   its place): in that flex column they shrank to fit it instead, the list clipped at its rounded
   edge, and dozens of rows went down to their padding, each title over the row above */
.ux-ui .ux-room-work, .ux-ui .ux-room-work > .row-card { flex: none; }
.ux-ui .ux-room-work > .row-card { padding: 14px 16px; gap: 12px; transition: background .15s; }
.ux-ui .ux-room-work > .row-card:is(:hover, :active) { background: var(--surface-2); }
.ux-ui .ux-room-work > .row-card[aria-busy='true'] { opacity: .6; }
/* the list clips its rows at its rounded edge: a row's focus ring is drawn inside the row */
.ux-ui .ux-room-work > .row-card:focus-visible { outline-offset: -4px; border-radius: 26px; }
.ux-room-work .row-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ux-room-work-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-width: 0; }
.ux-room-work-meta time { font-family: var(--ux-heading); font-size: 12px; color: var(--fg-2); white-space: nowrap; }
.ux-room-work > .row-card > svg { flex: none; color: var(--fg-3); }
/* the chat list's filters and, at their end, its ⋮ */
.ux-list-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; background: var(--bg);
  border-bottom: 1px solid var(--line); }
/* the tabs' line runs on under the ⋮ (V5); names that run past it scroll, faded at the edge where more
   tabs are, as wide as the gap between two tabs: a row workspace.js starts on a whole tab shows no
   tab half under the fade */
.ux-list-bar > .ux-filters { position: static; flex: 1; min-width: 0; border-bottom: 0; }
.ux-list-bar > .ux-filters.more-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--tabs-gap)), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--tabs-gap)), transparent); }
.ux-list-bar > .ux-filters.more-start { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - var(--tabs-gap)), transparent);
  mask-image: linear-gradient(270deg, #000 calc(100% - var(--tabs-gap)), transparent); }
.ux-list-bar > .ux-filters.more-start.more-end {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--tabs-gap), #000 calc(100% - var(--tabs-gap)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--tabs-gap), #000 calc(100% - var(--tabs-gap)), transparent); }
/* the hidden chats' own view (from the list's ⋯): back to the tab it came from, its name and count,
   over its rows (V5 .arch-bar) */
.ux-hidden-bar { display: flex; align-items: center; gap: 4px; margin-inline: -6px; padding-top: 10px; }
.ux-hidden-bar h2 { display: flex; align-items: baseline; gap: 6px; margin: 0; font: 700 15px var(--ff); letter-spacing: -.2px; }
.ux-hidden-count { font: 600 13px var(--ux-heading); color: var(--fg-3); }
/* a 44 px target around the design's 32 px round button */
.ux-hidden-back.icon-btn, .ux-hidden-back.icon-btn:hover { width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  background: none; box-shadow: none; color: var(--fg); }
.ux-hidden-back::before { content: ''; position: absolute; width: 32px; height: 32px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line); transition: background .15s; }
.ux-hidden-back:hover::before { background: var(--surface-2); }
.ux-hidden-back svg { position: relative; width: 16px; height: 16px; }
.ux-hidden-bar + .ux-chat-list { padding-top: 4px; }
/* a page's bar: back, its name in the middle (the design's toolbar title, V5 .pf-head h2: OneUI, not
   the display face), one way into another page on the right */
.ux-page-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(44px, auto); align-items: center; gap: 4px;
  min-height: 52px; margin: 6px -4px 6px; }
.ux-page-bar h2 { margin: 0; font-family: var(--ff); font-size: 16px; font-weight: 700; letter-spacing: -.3px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-page-bar-end { display: flex; justify-content: flex-end; }
:is(.ux-page-bar-end, .brief-tab-bar) .icon-btn[aria-busy='true'] svg { animation: ux-step-turn .9s linear infinite; }
.ux-brief-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  :is(.ux-page-bar-end, .brief-tab-bar) .icon-btn[aria-busy='true'] svg { animation: none; opacity: .35; }
}
.ux-page-bar .back-btn { background: none; box-shadow: none; color: var(--fg); }
/* the settings My page opens, as the design draws its sub-pages (V5 panes, .pf-*): white cards in a
   hairline ring, a 38 px tile before a row, captions above the cards, choices and states in ink and
   grey */
.ux-pane { --pane-ring: 0 0 0 1px rgba(0, 0, 0, .04); --pane-lift: 0 8px 24px rgba(20, 20, 40, .05); }
:root[data-theme='dark'] .ux-pane { --pane-ring: 0 0 0 1px rgba(255, 255, 255, .06); --pane-lift: 0 8px 24px rgba(0, 0, 0, .28); }
/* the page scrolls across the shell's whole side gutter, as My page does, so the cards' shadows fade
   out there instead of being cut at the content's edge; on a wide screen it stays a column as narrow
   as My page's */
.ux-pane.page { margin-inline: calc(-1 * var(--ux-gutter, 16px)); padding-inline: calc(var(--ux-gutter, 16px) + 2px); }
.ux-pane.page > * { width: 100%; max-width: 560px; margin-inline: auto; }
.ux-ui .ux-pane .row-card { border: 0; border-radius: 28px; padding: 16px 18px; box-shadow: var(--pane-ring), var(--pane-lift); }
/* the ring keeps saying what a border said: a reset about to run */
.ux-pane .row-card.reset-card { --pane-ring: 0 0 0 1px color-mix(in srgb, var(--bad) 35%, transparent); }
.ux-pane button.row-card:hover { background: color-mix(in srgb, var(--fg) 2%, var(--surface)); }
/* a card that is one row opening a page is as tall as the design's row (60 px) */
.ux-ui .ux-pane .row-card.link-row { padding: 11px 16px; }
/* a row's title and line as the design's (V5 .pf-row .tx); a service's row in the list of connections
   keeps its own larger name and line */
.ux-pane :is(.row-title, .row-card > strong):not(:where(.conn-info *)) { font-size: 13.5px; font-weight: 700; line-height: 1.3;
  letter-spacing: -.2px; }
.ux-pane .row-sub:not(:where(.conn-info *)) { font-size: 11.5px; font-weight: 600; line-height: 1.45; }
/* the page's own notes between its cards read as the design's pane note (V5 .p2note) */
.ux-pane > :is(.row-sub, p.muted) { font-size: 12.5px; font-weight: 400; line-height: 1.5; padding-inline: 4px; }
/* a row's leading icon is the design's tile (V5 .pf-row .ic); a card that opens with one keeps the
   tile in its corner and the rest of the card beside it, as the design's rows do */
.ux-pane :is(.row-card, .row-card > .row:first-child) > svg:first-child:not(:last-child) {
  box-sizing: content-box; flex: none; width: 20px; height: 20px; padding: 9px; border-radius: 13px;
  background: var(--surface-2); color: var(--fg-2); stroke-width: 1.7; }
.ux-pane .row-card.col:has(> .row:first-child > svg:first-child:not(:last-child)) { position: relative; min-height: 70px;
  padding-left: 68px; }
.ux-pane .row-card.col > .row:first-child > svg:first-child:not(:last-child) { position: absolute; left: 18px; top: 16px; }
/* a caption above cards (V5 .pf-sec h3): in sentence case, close to the card it names */
.ux-pane .label { padding: 10px 6px 0; font-size: 13px; font-weight: 700; letter-spacing: -.1px; text-transform: none;
  color: var(--fg-2); }
.ux-pane > .label { margin-bottom: -6px; }
/* a choice of a few (V5 .seg2): a 34 px track of options sharing it evenly, the chosen one a white
   pill. An option is never narrower than its label, so no label breaks inside it; labels too long
   to share one line (the names of the person's phones) move whole options to a second line instead
   of being cut. A choice of five takes the design's smaller size (V5 .seg2 span, 11 px), so that
   all five fit on one line on a phone. */
.ux-ui .ux-pane .seg { flex-wrap: wrap; gap: 0; min-height: 34px; padding: 2px; border-radius: 17px; background: var(--bg); }
.ux-ui .ux-pane .seg button { flex: 1 1 0; min-width: max-content; min-height: 30px; padding: 0 8px; border-radius: 15px;
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.ux-ui .ux-pane .seg:has(> button:nth-child(5)) button { padding-inline: 3px; font-size: 11px; }
/* a folded phone's cover screen (≈344 px) still fits five on one line */
@media (max-width: 380px) { .ux-ui .ux-pane .seg:has(> button:nth-child(5)) button { padding-inline: 1px; font-size: 10.5px; } }
.ux-ui .ux-pane .seg button.on { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
/* a phone's name may be long (#930): its choice grows to the card's width at most and ends in "…"
   (its title keeps it whole); short choices still share a row */
.ux-ui .ux-pane .screen-pick .seg button { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme='dark'] .ux-ui .ux-pane .seg button.on { background: var(--surface-3); box-shadow: none; }
/* where a setting stands, in a word on a chip led by its dot (V5 .st-dot); where it applies, the
   same chip led by its glyph */
.ux-ui .ux-pane :is(.pill, .scope) { gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 10.5px;
  font-weight: 700; line-height: 1; }
.ux-pane .pill:not(.device-status)::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; }
/* the search: its box and Cancel at the top, then what matched */
.ux-search-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 0 8px; background: var(--bg); }
.ux-search-bar .conv-search { flex: 1; min-height: 44px; margin: 0; border-radius: 22px; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04); }
.ux-search-cancel { flex: none; padding: 8px 2px; font-size: 14px; font-weight: 500; color: var(--fg); }
/* a wide screen lists the places on its left: its dock holds only the new chat, at the right */
.frame .ux-dock { justify-content: flex-end; }

/* My page as the ARMY V5 design draws it (#s-profile): the agent as one card, the devices as tiles,
   then short menu cards of 60 px rows; on a wide screen the column stays as narrow as a phone's. */
/* the page scrolls across the shell's whole gutter, so the cards' shadows and focus rings fade out
   there instead of being cut at the content's edge; Korean wraps between words (a narrow phone left
   the version's last syllable alone on a line) */
.ux-profile.page { gap: 10px; margin-inline: calc(-1 * var(--ux-gutter, 16px)); padding-inline: calc(var(--ux-gutter, 16px) + 2px);
  word-break: keep-all; }
.ux-profile.page > * { width: 100%; max-width: 560px; margin-inline: auto; }
.ux-profile :is(.ux-agent-card, .ux-device-card, .ux-menu-card, .app-version) {
  border: 0; border-radius: 28px; background: var(--surface); box-shadow: var(--ux-shadow); color: var(--fg); }
:is(.ux-agent-card, button.ux-device-card):hover { background: color-mix(in srgb, var(--fg) 2%, var(--surface)); }
.ux-agent-card { display: flex; align-items: center; gap: 14px; padding: 18px; text-align: start; }
.ux-agent-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ux-agent-name { font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.3px; overflow-wrap: anywhere; }
.ux-agent-sub { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.ux-agent-edit { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 15px;
  background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--fg-2); }
.ux-device-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; text-align: start; }
.ux-device-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.ux-device-head strong { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }
.ux-device-count { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--fg-2); }
.ux-device-count svg, .ux-menu-row > svg:last-child, .ux-profile .app-version > svg { flex: none; color: var(--fg-3); }
.ux-device-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ux-device-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 14px 4px 12px;
  border-radius: 20px; background: var(--surface-2); }
.ux-device-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 2px 8px rgba(20, 20, 40, .05); }
.ux-device-tile strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.2px; }
.ux-device-none { margin: 0; padding: 0 2px; font-size: 12.5px; color: var(--fg-2); }
/* a state in a word on a pill, led by its dot: quiet, and green for the device in use (.is-in-use
   colours its words and dot) */
.ux-state-chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 10px;
  background: var(--surface); color: var(--fg-2); font-size: 10px; font-weight: 700; white-space: nowrap; }
.ux-state-chip::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ux-state-chip.is-in-use { gap: 5px; background: var(--ok-soft); font-weight: 700; }
.ux-menu-card { display: flex; flex-direction: column; padding: 4px 0; overflow: hidden; }
.ux-menu-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; text-align: start; }
.ux-menu-row + .ux-menu-row { border-top: 1px solid var(--line); }
.ux-menu-row:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
/* the card clips its rows' corners, so a row's focus ring is drawn inside it */
.ux-ui .ux-menu-row:focus-visible { outline-offset: -3px; }
.ux-menu-tile { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px;
  background: var(--surface-2); color: var(--fg-2); }
:is(.ux-menu-tile, .ux-device-icon) svg { stroke-width: 1.7; }
.ux-menu-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ux-menu-title { font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.2px; overflow-wrap: anywhere; }
/* up to two lines: a line that names each setting it sums up (How Army works) was cut off in one (#1212) */
.ux-menu-sub { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
  font-size: 11px; font-weight: 600; line-height: 1.35; color: var(--fg-2); }
/* the foot: the server as a quiet caption over the app's version, one more row card, then signing out */
.ux-profile .server-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px;
  margin-top: 8px; -webkit-line-clamp: unset; text-align: center; font-size: 11.5px; color: var(--fg-3); }
.ux-profile .server-line .agent-mode { padding: 0; background: none; color: inherit; font-size: inherit; }
.ux-profile .app-version { padding: 11px 16px; }
.ux-profile :is(.app-version, .ux-sign-out) .row-title { font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.2px; }
.ux-profile .app-version .row-sub { font-size: 11px; font-weight: 600; }
/* signing out: the page's last row, in the warning colour (a grey button above the version went unseen);
   scrolled to the end, it clears the screen's bottom edge */
.ux-ui .ux-sign-out { color: var(--bad); }
.ux-ui button.ux-sign-out:hover { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.ux-app > .ux-profile { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
/* as tall and as round as the cards above it, its icon and words in line with their icons and titles */
.ux-profile .ux-sign-out { min-height: 60px; gap: 22px; padding: 11px 16px 11px 25px; border-radius: 28px; }
/* a page's data that could not be read: what failed and trying again, above whatever is still shown */
.ux-read-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ux-read-error .btn { flex: none; }

/* first setup: the step scrolls, its main action stays at the foot of the screen (the design's
   fixed bottom button), over a band that fades the text passing beneath it */
.ux-onboarding-actions { position: sticky; bottom: 0; z-index: 2; margin-top: auto;
  padding: 14px 0 calc(24px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 34%); }
/* each step's figure as the design sizes it: a small face over the welcome, the chosen look large
   under the heading while it is chosen, a larger face over the summary, which is centred */
.ux-onboarding[data-onboarding-step='welcome'] .ux-onboarding-hero > .ux-face { width: 76px; height: 76px; margin-bottom: 14px; }
.ux-onboarding[data-onboarding-step='character'] .ux-onboarding-hero > .ux-face { order: 3; align-self: center; margin-top: 12px; }
.ux-onboarding[data-onboarding-step='ready'] .ux-onboarding-hero { align-items: center; text-align: center; padding-top: 32px; }
.ux-onboarding[data-onboarding-step='ready'] .ux-onboarding-hero > .ux-face { width: 132px; height: 132px; margin-bottom: 18px; }
/* the welcome's three promises: white cards, each mark on its own grey tile */
.ux-onboarding[data-onboarding-step='welcome'] .row-card { border-radius: 22px; padding: 16px; }
.ux-onboarding[data-onboarding-step='welcome'] .row-card > svg { box-sizing: content-box; flex: none; padding: 9px;
  border-radius: 14px; background: var(--surface-2); }

/* the search's three boxes (chats, results, memory), each with its count; matches in lime. Their
   holder is patched while typing and adds no box of its own: they keep the page's gaps */
.ux-search-results { display: contents; }
.ux-search-box { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px 8px; border-radius: 22px;
  background: var(--surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, .04); }
.ux-search-box > h2 { display: flex; align-items: baseline; gap: 6px; margin: 0 8px 6px; font-size: 13px; font-weight: 700; color: var(--fg-2); letter-spacing: 0; }
.ux-search-count { font-family: var(--ux-heading); font-size: 12px; font-weight: 600; color: var(--fg-3); }
.ux-search-box .convs { gap: 0; }
.ux-search-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border-radius: 14px; text-align: start; color: var(--fg); }
.ux-search-row:hover { background: var(--surface-2); }
.ux-search-row > svg { flex: none; color: var(--fg-2); }
.ux-search-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ux-search-box > .muted { margin: 2px 8px 6px; font-size: 13px; }
.ux-search mark, .ux-search .conv.found mark { background: #d8f65c; color: #252525; border-radius: 3px; padding: 0 1px; }
/* the box is the field: one ring around it while typing, none inside */
.ux-search-bar .conv-search-input:focus-visible { outline: none; }
.ux-search-bar .conv-search:focus-within { box-shadow: 0 0 0 1.5px var(--fg); }

/* ── the chat list as the design's start screen ───────────────────────────────────────── */
/* the hero: what waits on the person, one at a time — a two-line question in Sharp beside one black
   pill that opens the chat at its card, the chat it waits in under them, page dots when more wait */
.ux-hero { grid-template-columns: minmax(0, 1fr); }
.ux-hero .ux-greeting-copy { grid-column: 1 / -1; }
.ux-hero-row { display: flex; align-items: flex-end; gap: 12px; }
.ux-hero-row h1 { flex: 1; min-width: 0; }
/* a wide screen keeps the pill beside the words, not at the page's far edge (#1204: 583 px apart) */
@media (min-width: 700px) { .ux-hero-row h1 { flex: 0 1 auto; max-width: 640px; } }
.ux-hero h1, .ux-greeting h1 { font-family: var(--ux-heading); font-size: 26px; font-weight: 500; line-height: 1.2;
  letter-spacing: -.3px; white-space: pre-line; margin: 0; }
/* a headline past two lines at that size is said whole a size smaller (workspace.js fit): a two-line
   cut ended a question mid-sentence (#1204). Four lines at most then, a longer one whole in its chat */
.ux-hero h1.ux-hero-fit { font-size: 20px; letter-spacing: -.2px; }
.ux-hero h1.ux-hero-fit:not(.ux-hero-ok), .ux-hero-fit .ux-hero-title { display: -webkit-box; -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; overflow: hidden; }
.ux-hero-fit .ux-hero-title { -webkit-line-clamp: 3; }
/* an approval: its title, whole and broken between words, and the ask always on a line of its own (V5) */
.ux-hero h1.ux-hero-ok { display: block; }
.ux-hero-ok > span { display: block; }
/* the chat it waits in (V5 .cst-m), as Space says a result's chat */
.ux-hero-chat { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 8px 0 0; color: var(--fg-3);
  font-size: 12px; line-height: 1.4; }
.ux-hero-chat svg { flex: none; }
.ux-hero-chat span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* a sideways drag moves the copy, never the page or a text selection; it springs back short of a
   slide, and the next slide's copy arrives from the side it was pushed to (V5's .3s) */
.ux-hero { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.ux-hero .ux-greeting-copy { transition: transform .3s var(--motion-ease); }
.ux-hero .ux-greeting-copy.dragging { transition: none; }
.ux-arrive-next { animation: ux-hero-next .3s var(--motion-ease) both; }
.ux-arrive-prev { animation: ux-hero-prev .3s var(--motion-ease) both; }
@keyframes ux-hero-next { from { opacity: 0; transform: translateX(28px); } }
@keyframes ux-hero-prev { from { opacity: 0; transform: translateX(-28px); } }
.ux-hero-action { flex: none; margin-bottom: 1px; min-width: 64px; height: 32px; padding: 0 16px; border-radius: 16px;
  background: #111; color: #fff; font-size: 13px; font-weight: 600; transition: transform .1s, background .2s; }
:root[data-theme='dark'] .ux-hero-action { background: var(--fg); color: var(--bg); }
/* the pill takes a tap a little above and below it (44 px tall), its look unchanged */
.ux-hero-action { position: relative; }
.ux-hero-action::before { content: ''; position: absolute; inset: -6px 0; }
/* each page dot is a 24 x 44 px target with V5's dot drawn in its middle (#1204: a 6 px dot was the
   whole target); the targets reach over the room around the row, which keeps the dots' own height,
   and the first dot stays under the words */
.ux-hero-dots { grid-column: 1 / -1; grid-row: 3; display: flex; margin: 14px 0 0 -9px; }
.ux-hero-dots button { display: grid; place-items: center; width: 24px; height: 44px; margin-block: -19px; padding: 0;
  background: none; transition: width .25s; }
.ux-hero-dots button::after { content: ''; width: 6px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .14);
  transition: width .25s, background .25s; }
:root[data-theme='dark'] .ux-hero-dots button::after { background: rgba(255, 255, 255, .2); }
.ux-hero-dots button.on { width: 34px; }
.ux-hero-dots button.on::after { width: 16px; background: var(--fg); }
/* rows (V5 .row): the chat's look on its own colour (the design's tile in light, deep in dark), a prop
   on its corner where the look alone does not say the situation, the chat's name, under it what is
   going on in it, and at the top of the side the time over what waits on the person; the name is
   bold only while something waits */
/* the list starts 16 px under the tabs (V5 #rows: margin 12 + padding 4), and a row's picture and
   words keep the design's 20 px edge on a phone (V5 .row pads 20): the page insets its content 18 px
   there (14 px on a narrow phone) and a row pads 8 px inside its own tint */
.ux-chat-list { display: flex; flex-direction: column; gap: 0; min-width: 0; padding-top: 16px; margin-inline: -6px; }
@media (max-width: 380px) { .ux-chat-list { margin-inline: -2px; } }
@media (min-width: 700px) { .ux-chat-list { margin-inline: 0; } }
/* the Needs filter's work kept without a chat is a swipe card: the delete layer under it stays inside
   its rounded corners */
.ux-chat-list .swipe { border-radius: 22px; flex: none; }
.ux-conv-row { display: flex; align-items: center; position: relative; min-width: 0; border-radius: 18px; }
/* a row swiped left (V5): it slides over its two round actions, hide and leave, which grow in */
.ux-swipe { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 18px; }
.ux-swipe > .ux-conv { position: relative; z-index: 1; touch-action: pan-y; }
.ux-swipe > .ux-conv.dragging { transition: none; }
.ux-swipe-actions { position: absolute; top: 0; bottom: 0; right: 14px; display: flex; align-items: center; gap: 8px; }
.ux-swipe-actions button { width: 48px; height: 48px; border-radius: 50%; display: grid; place-content: center; justify-items: center;
  gap: 1px; font-size: 9.5px; font-weight: 500; line-height: 1.1; transform: scale(.7); opacity: 0; transition: transform .2s, opacity .2s; }
:is(.ux-conv-row.swiped, .ux-swipe:has(> .dragging)) .ux-swipe-actions button { transform: none; opacity: 1; }
.ux-swipe-hide { background: #ededf0; color: var(--fg); }
.ux-swipe-leave { background: #ffe9e7; color: #ff3b30; }
:root[data-theme='dark'] .ux-swipe-hide { background: var(--surface-3); }
:root[data-theme='dark'] .ux-swipe-leave { background: #3a2225; color: #ff8a80; }
/* the row is opaque, so a swipe's actions wait under it, and slides as a swipe opens or closes it */
.ux-conv.conv { --ux-row: var(--bg); display: flex; align-items: center; gap: 14px; flex: 1; width: 100%; min-width: 0;
  min-height: 72px; padding: 10px 8px; border: 0; border-radius: 18px; background: var(--bg); color: var(--fg);
  text-align: start; transition: background var(--motion-fade), transform .22s cubic-bezier(.3,.7,.2,1);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* only a pointer that hovers tints the row on hover (a phone kept the tapped row grey); a press is
   tinted by the press feedback every list row shares, 7% of the row's ink over the page. --ux-row
   is the row's colour as shown, which the prop's notch takes */
.ux-conv.conv:hover { background: var(--bg); }
@media (hover: hover) { .ux-conv.conv:hover { --ux-row: var(--surface-2); background: var(--ux-row); } }
.ux-conv.conv:active { --ux-row: color-mix(in srgb, var(--bg), var(--fg) 7%); }
.ux-conv-face { position: relative; display: grid; flex: none; }
.ux-conv-avatar { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px;
  overflow: hidden; background: var(--look-tint); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 4px 12px rgba(0, 0, 0, .05); }
.ux-conv-avatar img { object-fit: contain; object-position: 50% 12%; width: 92%; height: 108%; margin-top: 8%; }
/* the seven plain looks leave room above the head for ears and hats: drawn from the top at the
   design's width (42 of 52 px), higher where a hat or ears need the room */
.ux-conv-avatar:is([data-look='pink'], [data-look='army-mint'], [data-look='glasses'], [data-look='beanie'],
  [data-look='bear'], [data-look='bunny'], [data-look='cat']) img {
  position: absolute; left: 50%; top: 17%; width: 81%; height: auto; margin: 0; transform: translateX(-50%); }
.ux-conv-avatar[data-look='beanie'] img { top: 10%; }
.ux-conv-avatar:is([data-look='bear'], [data-look='bunny'], [data-look='cat']) img { top: 9%; }
/* the design's tile where the look has one (V5 CHARS.bg), cropped as V5's row thumbnail crops it,
   on the look's tint until it arrives; the still under it is the dark list's */
.ux-conv-tile { background: var(--tile) 50% 45% / 108% no-repeat, var(--look-tint); }
.ux-conv-tile > img { display: none; }
/* a pastel tile glared on the dark list: there each look keeps its hue, deep, under a lit figure */
:root[data-theme='dark'] .ux-conv-avatar { background: var(--look-deep); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
:root[data-theme='dark'] .ux-conv-tile > img { display: block; }
/* the prop: one small grey mark in a notch of the row's own colour (a white dot on every row
   was the brightest thing in the list); the mark is the Brief's solid drawing or an app icon */
.ux-conv-prop { position: absolute; inset-inline-end: -3px; bottom: -3px; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--ux-row); color: var(--fg-2);
  box-shadow: 0 0 0 2px var(--ux-row); transition: background var(--motion-fade), box-shadow var(--motion-fade); }
.ux-conv-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ux-conv-main strong { font: 400 15px/1.3 var(--ff); letter-spacing: -.2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ux-conv.asks .ux-conv-main strong { font-weight: 700; }
.ux-conv-preview { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* the line in the design's lightest ink, under the time's (dark keeps its own third ink) */
/* the line under a chat's name is read, not glanced at: 12 px in the meta grey (#a5a5ac, 2.4:1 on
   white) could not be made out on a phone (s2 report 139) */
.ux-conv-preview > small { flex: 1; min-width: 0; font: 400 13px/1.4 var(--ff); color: var(--fg-2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:root[data-theme='dark'] .ux-conv-preview > small { color: var(--fg-3); }
/* "needs you" as the design's lime pill, leading the line */
.ux-notice-tag { flex: none; height: 18px; padding: 0 7px; border-radius: 9px; background: var(--ux-lime); color: var(--ux-lime-ink);
  font: 600 10.5px/18px var(--ff); letter-spacing: -.2px; white-space: nowrap; }
/* a chat whose newest work did not end well says how (#1202): failed, or a result to look at */
.ux-notice-tag.bad { background: var(--bad-soft); color: var(--bad); }
.ux-notice-tag.warn { background: var(--warn-soft); color: var(--warn); }
/* work going on in a chat: V5's working dots (its live log's, beside what the work does now) in the
   row's ink, leading the line; they breathe in turn, slowly, and stand still with reduced motion */
.ux-conv-working { display: inline-flex; flex: none; }
.ux-conv-working > [aria-hidden] { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.ux-conv-working i { width: 5px; height: 5px; border-radius: 50%; background: var(--fg);
  animation: ux-working var(--motion-working) ease-in-out infinite both; }
.ux-conv-working i:nth-child(2) { animation-delay: calc(var(--motion-working) / 6); }
.ux-conv-working i:nth-child(3) { animation-delay: calc(var(--motion-working) / 3); }
@keyframes ux-working { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ux-conv-working i { animation: none; opacity: .7; } }
.ux-conv-side { display: flex; flex-direction: column; align-items: flex-end; align-self: flex-start; gap: 8px; flex: none; padding-top: 2px; }
/* a chat with nothing under its name: its time stays level with the name */
.ux-conv:not(:has(.ux-conv-preview)) .ux-conv-side { align-self: center; padding-top: 0; }
.ux-conv-side time { font: 400 12px var(--ux-heading); color: var(--fg-2); white-space: nowrap; }
.ux-conv-marks { display: flex; align-items: center; gap: 4px; color: #b0b0b8; }
/* a pinned chat's mark: the design's pin, filled and tilted */
.ux-conv-marks > svg { flex: none; fill: currentColor; transform: rotate(45deg); }
/* the count of what waits on the person, white on the design's orange in both themes (a lighter
   orange let the numerals fade); Sharp's numerals sit high, so they are nudged down. Chat's count in
   the dock and a wide screen's menu is the same bubble (#1206). */
.ux-conv-marks .badge, .nav-badge { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 20px;
  height: 20px; margin: 0; padding: 1.5px 6px 0; border-radius: 10px; background: var(--ux-orange); color: #fff;
  font: 700 11px/1 var(--ux-heading); letter-spacing: 0; }
/* A held chat lifts above a quiet backdrop. Top-layer placement keeps the menu clear of the
   list's clipping, dock and scroll position, including the last row on a phone. */
.ux-conv.ux-conv-pressing { transform: scale(.98); background: var(--surface-2); transition: transform 160ms ease-out, background 160ms; }
.ux-chat-context { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--fg); overflow: hidden;
  overscroll-behavior: contain; -webkit-user-select: none; user-select: none; }
.ux-chat-context::backdrop { background: rgb(0 0 0 / .24); backdrop-filter: blur(4px);
  animation: ux-context-dim 240ms cubic-bezier(.23, 1, .32, 1) both; animation-delay: var(--context-elapsed); }
:root[data-theme='dark'] .ux-chat-context::backdrop { background: rgb(0 0 0 / .46); }
.ux-context-cluster { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ux-context-cluster.above { flex-direction: column-reverse; }
.ux-chat-context .ux-context-preview { width: 100%; min-height: 72px; padding: 12px; border-radius: 20px;
  background: var(--surface); box-shadow: 0 12px 36px rgb(0 0 0 / .16); pointer-events: none;
  animation: ux-context-lift 260ms cubic-bezier(.23, 1, .32, 1) both; animation-delay: var(--context-elapsed); }
.ux-chat-context .ux-context-preview .ux-conv-main strong { white-space: normal; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ux-chat-context .ux-conv-menu { position: relative; inset: auto; width: min(240px, 100%); min-width: 0;
  padding: 6px; border-radius: 20px; background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  box-shadow: 0 16px 48px rgb(0 0 0 / .18), 0 2px 6px rgb(0 0 0 / .06);
  transform-origin: top left; animation: ux-context-unfold 260ms cubic-bezier(.23, 1, .32, 1) both;
  animation-delay: var(--context-elapsed); }
.ux-context-cluster.above .ux-conv-menu { transform-origin: bottom left; --context-y: 8px; }
.ux-chat-context .menu-item { width: 100%; min-height: 48px; padding: 12px 14px; gap: 10px; border-radius: 14px;
  font-size: 15px; font-weight: 500; line-height: 1.4; }
.ux-chat-context .menu-item > svg { width: 19px; height: 19px; }
.ux-chat-context .menu-item.danger { color: var(--bad); margin-top: 5px; position: relative; }
.ux-chat-context .menu-item.danger::before { content: ''; position: absolute; top: -3px; left: 14px; right: 14px;
  height: 1px; background: color-mix(in srgb, var(--fg) 9%, transparent); }
.ux-chat-context.closing { pointer-events: none; }
.ux-chat-context.closing::backdrop { animation: ux-context-dim-out 160ms ease-in both; animation-delay: var(--context-elapsed); }
.ux-chat-context.closing .ux-context-preview { animation: ux-context-return 160ms ease-in both; animation-delay: var(--context-elapsed); }
.ux-chat-context.closing .ux-conv-menu { animation: ux-context-fold 160ms ease-in both; animation-delay: var(--context-elapsed); }
@keyframes ux-context-dim { from { opacity: 0; } }
@keyframes ux-context-lift { from { transform: scale(.98); } }
@keyframes ux-context-unfold { from { opacity: 0; transform: translateY(var(--context-y, -8px)) scale(.94); } }
@keyframes ux-context-dim-out { to { opacity: 0; } }
@keyframes ux-context-return { to { opacity: 0; transform: scale(.98); } }
@keyframes ux-context-fold { to { opacity: 0; transform: translateY(var(--context-y, -8px)) scale(.96); } }
.ux-chat-context.instant::backdrop, .ux-chat-context.instant .ux-context-preview,
.ux-chat-context.instant .ux-conv-menu { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ux-conv.ux-conv-pressing { transform: none; transition: none; }
  .ux-chat-context::backdrop, .ux-chat-context .ux-context-preview, .ux-chat-context .ux-conv-menu { animation: none; }
}


/* Developer feedback remains reachable above the app dock and work sheets. */
.issue-help { position: fixed; z-index: 85; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  --feedback-ink: #a45b5b; color: var(--feedback-ink); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--feedback-ink) 35%, transparent);
  box-shadow: 0 1px 4px #0001; opacity: .85; cursor: grab; touch-action: none; user-select: none; }
.issue-help::before { content: ''; position: absolute; inset: -4px; border-radius: inherit; }
.issue-help:hover, .issue-help:focus-visible { opacity: 1; }
.issue-help.dragging { cursor: grabbing; opacity: 1; }
[data-theme="dark"] .issue-help { --feedback-ink: #c78888; }
/* until moved, a slim tab tucked into the gutter at the right edge's middle, narrower than the
   narrowest gutter (12px) so no card's control is under it (#1247 F08, feedback-button.js); its touch
   area reaches no further into the page */
.issue-help.docked { width: 10px; height: 52px; border-radius: 8px 0 0 8px; border-right: 0; opacity: .75;
  background: color-mix(in srgb, var(--feedback-ink) 65%, var(--surface)); }
.issue-help.docked svg { display: none; }
.issue-help.docked::before { inset: -6px 0 -6px -2px; border-radius: 8px 0 0 8px; }
.ux-page-bar-end { display: flex; align-items: center; gap: 4px; }

.issue-report .scrim { z-index: 90; }
.issue-form { z-index: 91; }
.toast { z-index: 100; }
.issue-preview { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* ── memory panels (V5 memory detail): the title and when it changed stay at the top, the page or
   the editor's fields scroll under them, and an editor's Cancel and Save stay at the foot ──────── */
.ux-ui .sheet.has-foot .sheet-body { flex: 1 1 auto; min-height: 0; }
/* a page being edited takes the panel's full height, its text box the rest of it */
.ux-ui .sheet:has(.know-body) { height: min(88dvh, 760px); }
.ux-ui .sheet .know-body { flex: 1 0 auto; min-height: 0; }
.ux-ui .sheet .know-body textarea { flex: 1; min-height: 180px; resize: none; line-height: 1.6; }
.ux-ui .sheet.has-foot .field > span { font-size: 12px; font-weight: 700; color: var(--fg-2); }
.ux-ui .sheet.has-foot .input { border-radius: 18px; padding: 14px 16px; font-size: 15px; }
.ux-ui .sheet.has-foot .input:focus { outline: none; border-color: var(--fg); background: var(--surface); }
.ux-ui .sheet-foot { flex: none; display: flex; gap: 8px; padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--surface); }
.ux-ui .sheet-foot .btn { min-height: 52px; border-radius: 26px; font-size: 14.5px; font-weight: 700; }
.ux-ui .sheet-foot .btn.ghost { flex: 1; }
.ux-ui .sheet-foot .btn.primary { flex: 2; }

/* ── a live call: the design's call screen (4C) as a card at the top of its chat ──────────── */
/* dark in either theme, as the call screen is, with text colours of its own that the record and
   notes inside it read in; on the dark page its ring and lift set it apart */
.call-card { --fg: #fff; --fg-2: rgba(255, 255, 255, .62); --fg-3: rgba(255, 255, 255, .5); --line: rgba(255, 255, 255, .12);
  --surface-2: rgba(255, 255, 255, .14); --bad: #ff9aa8; --accent: #fff;
  display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-radius: 24px; color: var(--fg);
  background: linear-gradient(170deg, rgba(14, 20, 16, .93), rgba(8, 12, 10, .97));
  box-shadow: 0 12px 30px rgba(8, 12, 10, .2); overflow: hidden auto; color-scheme: dark; }
:root[data-theme='dark'] .call-card { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 14px 34px rgba(0, 0, 0, .55); }
/* the record's row closes the card, its own height the space under it */
.call-card:has(> .call-details:last-child) { padding-bottom: 4px; }
/* In its chat the card keeps to its share of the column, so the newest message and the composer
   under it stay in view (with the keyboard up too): an open record is the one part that gives way
   and scrolls, and only a screen with no room at all scrolls the card itself. */
.chat-call.call-card { flex: 0 1 auto; min-height: 0; max-height: 50%; margin: 6px 0 10px; }
.call-card > * { flex: none; }
.call-card > .call-details[open] { flex: 0 1 auto; min-height: 0; }
/* a details element lays out what it holds in its ::details-content box: the list gives way there */
.chat-call .call-details[open]::details-content { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
.call-details > * { flex: none; }
.chat-call .call-transcript { flex: 0 1 auto; min-height: 0; max-height: none; }
/* the call screen's rows: who calls and the clock, the face beside who is called and what the line
   does, the newest words, listening in */
.call-top { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; }
.call-label { grid-column: 1 / 3; min-width: 0; font-size: 12px; font-weight: 600; letter-spacing: .2px;
  color: rgba(255, 255, 255, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-timer { grid-column: 3; justify-self: end; font: 500 12px/1 var(--ux-heading); color: rgba(255, 255, 255, .5);
  font-variant-numeric: tabular-nums; }
.call-avatar { grid-column: 1; position: relative; width: 56px; height: 56px; }
/* the round face on its look's tint (.ux-face), the figure a little larger and set low, as a caller's picture */
.call-card .call-face { position: relative; z-index: 1; display: grid; place-items: end center; width: 100%; height: 100%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.call-card .call-face > .companion { width: 62px; height: 62px; margin-bottom: -10px; }
/* while the phone rings, rings leave the face .73 s apart, under the words beside it and inside the card */
.call-rings i { --ring: 1.6; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.4px rgba(255, 255, 255, .45);
  animation: call-ring 2.2s ease-out infinite; animation-delay: var(--call-phase, 0s); }
.call-rings i:nth-child(2) { animation-delay: calc(var(--call-phase, 0s) + .73s); }
.call-rings i:nth-child(3) { animation-delay: calc(var(--call-phase, 0s) + 1.46s); }
.call-main { grid-column: 2 / -1; position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; }
.call-callee { font: 300 22px/1.2 var(--ff); letter-spacing: -.4px; overflow-wrap: anywhere; }
.call-number { margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.call-card .call-status { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 13px; font-weight: 600;
  line-height: 1.4; color: rgba(255, 255, 255, .88); }
/* the line's signal (4C .wave, .dts): bars while it is open, still while it closes; dots on hold */
.call-wave, .call-dots { display: inline-flex; align-items: center; flex: none; }
.call-wave { gap: 2px; height: 16px; }
.call-wave i { width: 3px; height: 16px; border-radius: 1.5px; background: currentColor; transform: scaleY(.3);
  animation: call-wave .86s ease-in-out infinite; animation-delay: var(--call-phase, 0s); }
.call-wave i:nth-child(2) { animation-duration: .7s; animation-delay: calc(var(--call-phase, 0s) - .5s); }
.call-wave i:nth-child(3) { animation-duration: .96s; animation-delay: calc(var(--call-phase, 0s) - .25s); }
.call-wave i:nth-child(4) { animation-duration: .78s; animation-delay: calc(var(--call-phase, 0s) - .62s); }
.call-wave i:nth-child(5) { animation-duration: .9s; animation-delay: calc(var(--call-phase, 0s) - .1s); }
[data-call='ending'] .call-wave { opacity: .5; }
[data-call='ending'] .call-wave i { animation: none; transform: scaleY(.22); }
.call-dots { gap: 3px; }
.call-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .3;
  animation: call-dot 1.1s ease-in-out infinite; animation-delay: var(--call-phase, 0s); }
.call-dots i:nth-child(2) { animation-delay: calc(var(--call-phase, 0s) + .15s); }
.call-dots i:nth-child(3) { animation-delay: calc(var(--call-phase, 0s) + .3s); }
/* the work waits on the person: the design's lime dot and no bars */
.call-ask { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ux-lime);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ux-lime) 20%, transparent); }
/* the newest words said (4C .c-say) in two lines; an open record shows them all instead */
.call-say { grid-column: 1 / -1; margin: 0; padding: 11px 14px; border-radius: 17px; background: rgba(255, 255, 255, .11);
  box-shadow: inset 0 0 0 .8px rgba(255, 255, 255, .14); font-size: 13.5px; font-weight: 500; line-height: 1.62;
  letter-spacing: -.2px; word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.call-say b { font-weight: 700; }
.call-say.fresh { animation: call-say var(--motion-rise-time) var(--motion-settle) both; }
.call-card:has(> .call-details[open]) .call-say { display: none; }
/* what failed and what to do takes the newest words' place in its chat */
.chat-call.call-card:has(> .call-error) .call-say { display: none; }
/* listening in (4C .c-send pills): the quiet pill, white while the call plays */
.call-pill { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 18px;
  border-radius: 23px; font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.call-listen { grid-column: 1 / -1; }
.call-pill.sec { background: rgba(255, 255, 255, .14); color: var(--fg); box-shadow: inset 0 0 0 .8px rgba(255, 255, 255, .18); }
.call-pill.pri { background: var(--fg); color: var(--ux-lime-ink); }
.call-pill[aria-disabled='true'] { opacity: .6; cursor: default; }
@media (min-width: 700px) { .call-pill { justify-self: start; min-width: 200px; } }
.call-card :is(.call-note, .call-error) { margin: 0; font-size: 13px; }
.call-card .call-error .btn { color: var(--fg); }
/* The card folds in its chat on a short screen (a phone with its keyboard up, a small phone), where
   it also takes a smaller share, and while its record is open, which then has the room: its rows
   become one (the face, who is called and what the line does, the clock, listening as a round
   button its hidden words name) over the record. */
.chat-call.call-card:has(> .call-details[open]) { --call-fold: 1; gap: 8px; padding: 10px 14px 2px; }
@media (max-height: 760px) {
  .chat-call.call-card { --call-fold: 1; gap: 8px; padding: 10px 14px; max-height: 40%; }
  .chat-call.call-card:has(> .call-details:last-child) { padding-bottom: 2px; }
}
@media (max-height: 600px) { .chat-call.call-card { max-height: 34%; } }
@container style(--call-fold: 1) {
  /* listening, when it is offered, adds the last column */
  .call-top { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0 12px; }
  :is(.call-label, .call-number, .call-say, .call-record-note) { display: none; }
  :is(.call-avatar, .call-main, .call-timer, .call-listen) { grid-row: 1; }
  .call-avatar { grid-column: 1; width: 40px; height: 40px; }
  .call-main { grid-column: 2; }
  .call-timer { grid-column: 3; font-size: 13px; }
  .call-listen { grid-column: 4; position: relative; width: 40px; min-width: 0; min-height: 40px; padding: 0;
    border-radius: 50%; justify-self: auto; }
  .call-pill-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .call-callee { font-size: 17px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .call-card .call-status { margin-top: 1px; }
  .call-card .call-face > .companion { width: 44px; height: 44px; margin-bottom: -7px; }
  .call-rings i { --ring: 1.4; }
  .call-details { padding-top: 6px; }
  .call-details > summary { min-height: 32px; }
}
/* the live region the call's status words are read from (announceCall): heard, never seen */
.call-heard { position: fixed; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes call-ring { to { transform: scale(var(--ring)); opacity: 0; } }
@keyframes call-wave { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
@keyframes call-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes call-say { from { opacity: 0; transform: translateY(8px); } }
/* a finished call's quiet line arrives once, where its card stood */
.chat-call.call-arrive { animation: call-arrive var(--motion-fade) var(--motion-settle) both; }
@keyframes call-arrive { from { opacity: 0; transform: translateY(-4px); } }
/* nothing moves: one ring at rest, the bars at mid height, the dots lit (the clock still counts) */
@media (prefers-reduced-motion: reduce) {
  .call-rings i { opacity: 0; }
  .call-rings i:first-child { opacity: .6; transform: scale(1.3); }
  .call-wave i { transform: scaleY(.55); }
  .call-dots i { opacity: .8; }
}
/* In the work's panel a live call is the design's whole call screen (4C), centred: the clock, who
   calls, who is called in large light type with the number and what the line does, the 104px face
   with its rings while the phone rings, and six bars under it while the line talks. */
.call-card.call-hero { gap: 14px; padding: 22px 20px 18px; }
.call-hero .call-top { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; text-align: center; }
.call-hero .call-timer { grid-column: 1; grid-row: 1; justify-self: center; }
.call-hero .call-label { grid-column: 1; grid-row: 2; margin-top: 12px; }
.call-hero .call-main { grid-column: 1; grid-row: 3; align-items: center; margin-top: 7px; }
.call-hero .call-callee { font-size: clamp(26px, 7.4vw, 31px); line-height: 1.15; letter-spacing: -.6px; }
.call-hero .call-number { margin-top: 6px; }
.call-hero .call-status { justify-content: center; margin-top: 9px; font-weight: 500; color: rgba(255, 255, 255, .62); }
.call-hero .call-avatar { grid-column: 1; grid-row: 4; width: 104px; height: 104px; margin-top: 30px; }
.call-hero .call-face { box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.call-hero .call-face > .companion { width: 112px; height: 112px; margin-bottom: -16px; }
.call-hero .call-rings i { --ring: 2.05; }
.call-bars { grid-column: 1; grid-row: 5; display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  height: 26px; margin-top: 22px; }
.call-bars i { width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .8); transform-origin: bottom;
  animation: call-bar .9s ease-in-out infinite; }
.call-bars i:nth-child(1) { height: 10px; animation-delay: calc(var(--call-phase, 0s) - .1s); }
.call-bars i:nth-child(2) { height: 20px; animation-delay: calc(var(--call-phase, 0s) - .4s); }
.call-bars i:nth-child(3) { height: 26px; animation-delay: calc(var(--call-phase, 0s) - .7s); }
.call-bars i:nth-child(4) { height: 16px; animation-delay: calc(var(--call-phase, 0s) - .25s); }
.call-bars i:nth-child(5) { height: 22px; animation-delay: calc(var(--call-phase, 0s) - .55s); }
.call-bars i:nth-child(6) { height: 11px; animation-delay: calc(var(--call-phase, 0s) - .85s); }
[data-call='ending'] .call-bars { opacity: .5; }
[data-call='ending'] .call-bars i { animation: none; transform: scaleY(.35); }
.call-hero .call-say { grid-column: 1; grid-row: 6; justify-self: stretch; margin-top: 20px; text-align: start; }
.call-hero .call-listen { grid-column: 1; grid-row: 7; justify-self: center; min-width: 200px; margin-top: 16px; }
@keyframes call-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .call-bars i { transform: scaleY(.6); } }

/* ── motion: the prototype's (V5) easings and timings; js/motion.js decides when they play ──── */
:root {
  --motion-ease: cubic-bezier(.3, .7, .2, 1);      /* screens, sheets, menus */
  --motion-settle: cubic-bezier(.32, .72, 0, 1);   /* a panel coming to rest */
  --motion-rise: cubic-bezier(.2, .8, .2, 1);      /* a new chat rising */
  --motion-push: .32s;
  --motion-fade: .18s;
  --motion-rise-time: .3s;
  --motion-sheet: .38s;
  --motion-leave: .26s;
  --motion-menu: .16s;
  --motion-scrim: .25s;
  --motion-toast: .22s;
  --motion-arrive: .3s;    /* js/motion.js reads it */
  --motion-working: 1.4s;  /* one breath of a chat row's working dots */
}
/* A change of place (data-nav, set while it plays): the page is one picture and moves; the rest of
   the screen (a wide screen's list) is drawn as it now is. Slides cover each other, so they do
   not blend; a cross-fade does. */
html[data-nav] :is(#root > .shell, #root > .frame > .frame-main) { view-transition-name: ux-page;
  /* the moving pictures are opaque: a page without its own background let the other show through
     it, the two pages' words overlapping as if garbled and the old one lingering (#288, #296) */
  background: var(--bg); }
html[data-nav=tab] .ux-dock { view-transition-name: ux-dock; }
/* A status/category tab changes only its pane. Header and dock stay live and still. */
html[data-nav=filter] :is(#root > .shell, #root > .frame > .frame-main) { view-transition-name: none; }
/* Only the filtered results move. Including the greeting made its unchanged title,
   character and Review button dim on every status tap. */
html[data-nav=filter] .ux-filter-content { view-transition-name: ux-filter-page; background: var(--bg); }
html[data-nav=filter] :is(.ux-list-bar, .space-tabs) { view-transition-name: ux-filter-bar; }
/* The pane reaches under the floating dock. Capture it above the pane, or the opaque
   pane snapshots cover it for the duration of the fade. */
html[data-nav=filter] .ux-dock { view-transition-name: ux-dock; }
html[data-nav=filter]::view-transition-old(ux-filter-bar),
html[data-nav=filter]::view-transition-old(ux-dock) { display: none; }
html[data-nav=filter]::view-transition-new(ux-filter-bar),
html[data-nav=filter]::view-transition-new(ux-dock) { animation: none; }
html[data-nav=filter]::view-transition-group(ux-filter-page),
html[data-nav=filter]::view-transition-group(ux-filter-bar),
html[data-nav=filter]::view-transition-group(ux-dock) { animation-duration: var(--motion-fade); }
html[data-nav=filter]::view-transition-old(ux-filter-page) { animation: ux-fade-out var(--motion-fade) ease both; }
html[data-nav=filter]::view-transition-new(ux-filter-page) { animation: ux-fade-in var(--motion-fade) ease both; }
::view-transition-old(root) { display: none; }
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(ux-page) { overflow: clip; animation-duration: var(--motion-push); animation-timing-function: var(--motion-ease); }
html:is([data-nav=push], [data-nav=pop], [data-nav=rise], [data-nav=sink])::view-transition-old(ux-page),
html:is([data-nav=push], [data-nav=pop], [data-nav=rise], [data-nav=sink])::view-transition-new(ux-page) { mix-blend-mode: normal; }
/* deeper: the page comes in from the right; the one it came from drifts left and dims */
html[data-nav=push]::view-transition-old(ux-page) { animation: ux-page-under var(--motion-push) var(--motion-ease) both; }
html[data-nav=push]::view-transition-new(ux-page) { animation: ux-page-from-right var(--motion-push) var(--motion-ease) both;
  box-shadow: -10px 0 28px rgba(0, 0, 0, .08); }
/* back: the page leaves to the right over the one returning */
html[data-nav=pop]::view-transition-old(ux-page) { z-index: 1; animation: ux-page-to-right var(--motion-push) var(--motion-ease) both;
  box-shadow: -10px 0 28px rgba(0, 0, 0, .08); }
html[data-nav=pop]::view-transition-new(ux-page) { animation: ux-page-from-under var(--motion-push) var(--motion-ease) both; }
/* a wide screen moves less: the page shifts a little and fades */
html[data-nav=push][data-nav-wide]::view-transition-old(ux-page),
html[data-nav=pop][data-nav-wide]::view-transition-old(ux-page) { z-index: 0; box-shadow: none; animation: ux-fade-out var(--motion-fade) ease both; }
html[data-nav=push][data-nav-wide]::view-transition-new(ux-page) { box-shadow: none; animation: ux-page-shift-in var(--motion-push) var(--motion-ease) both; }
html[data-nav=pop][data-nav-wide]::view-transition-new(ux-page) { animation: ux-page-unshift-in var(--motion-push) var(--motion-ease) both; }
/* a new chat rises from just below and sinks back when left */
html[data-nav=rise]::view-transition-old(ux-page) { animation: none; }
html[data-nav=rise]::view-transition-new(ux-page) { animation: ux-page-rise var(--motion-rise-time) var(--motion-rise) both; }
html[data-nav=sink]::view-transition-old(ux-page) { z-index: 1; animation: ux-page-sink var(--motion-rise-time) var(--motion-rise) both; }
html[data-nav=sink]::view-transition-new(ux-page) { animation: none; }
/* Chat and Space, or anything else, cross-fade; the dock and the round buttons stay put */
html:is([data-nav=tab], [data-nav=fade])::view-transition-group(ux-page),
html[data-nav=tab]::view-transition-group(ux-dock) { animation-duration: var(--motion-fade); }
html:is([data-nav=tab], [data-nav=fade])::view-transition-old(ux-page),
html[data-nav=tab]::view-transition-old(ux-dock) { animation: ux-fade-out var(--motion-fade) ease both; }
html:is([data-nav=tab], [data-nav=fade])::view-transition-new(ux-page),
html[data-nav=tab]::view-transition-new(ux-dock) { animation: ux-fade-in var(--motion-fade) ease both; }
/* Custom fade keyframes replace Chromium's built-in blending animation. Restore
   additive blending so two half-visible copies don't darken the same pixels. */
::view-transition-image-pair(ux-page), ::view-transition-image-pair(ux-filter-page),
::view-transition-image-pair(ux-dock) { isolation: isolate; }
html:is([data-nav=tab], [data-nav=fade])::view-transition-old(ux-page),
html:is([data-nav=tab], [data-nav=fade])::view-transition-new(ux-page),
html[data-nav=tab]::view-transition-old(ux-dock), html[data-nav=tab]::view-transition-new(ux-dock),
html[data-nav=filter]::view-transition-old(ux-filter-page),
html[data-nav=filter]::view-transition-new(ux-filter-page) { mix-blend-mode: plus-lighter; }
/* Shared controls stay opaque, including in dark mode where cross-fading their
   translucent backgrounds briefly changed the header and new-chat button's brightness. */
html:is([data-nav=tab], [data-nav=filter]) .ux-hub-top { view-transition-name: ux-hub-top; }
html:is([data-nav=tab], [data-nav=filter]) .ux-new-chat { view-transition-name: ux-new-chat; }
html:is([data-nav=tab], [data-nav=filter])::view-transition-old(ux-hub-top),
html:is([data-nav=tab], [data-nav=filter])::view-transition-old(ux-new-chat) { display: none; }
html:is([data-nav=tab], [data-nav=filter])::view-transition-new(ux-hub-top),
html:is([data-nav=tab], [data-nav=filter])::view-transition-new(ux-new-chat) { animation: none; }
html:is([data-nav=tab], [data-nav=filter])::view-transition-group(ux-hub-top),
html:is([data-nav=tab], [data-nav=filter])::view-transition-group(ux-new-chat) { animation-duration: var(--motion-fade); }
@keyframes ux-page-from-right { from { transform: translateX(100%); } }
@keyframes ux-page-to-right { to { transform: translateX(100%); } }
@keyframes ux-page-under { to { transform: translateX(-22%); opacity: .6; } }
@keyframes ux-page-from-under { from { transform: translateX(-22%); opacity: .6; } }
@keyframes ux-page-shift-in { from { transform: translateX(40px); opacity: 0; } }
@keyframes ux-page-unshift-in { from { transform: translateX(-40px); opacity: 0; } }
@keyframes ux-page-rise { from { transform: translateY(12px); opacity: 0; } 70% { opacity: 1; } }
@keyframes ux-page-sink { 30% { opacity: 1; } to { transform: translateY(12px); opacity: 0; } }
@keyframes ux-fade-in { from { opacity: 0; } }
@keyframes ux-fade-out { to { opacity: 0; } }
/* Panels slide up over a fading scrim and settle; a closing one (.leaving, js/motion.js leave)
   slides back down, a side panel back out, a ⋮ menu shrinks into its corner, never catching a tap. */
.ux-ui .scrim { animation: ux-fade-in var(--motion-scrim) ease; }
.ux-ui .sheet { animation: ux-sheet-in var(--motion-sheet) var(--motion-settle); }
.ux-ui .sheet.right { animation: ux-panel-in var(--motion-sheet) var(--motion-settle); }
.ux-ui .leaving { pointer-events: none; }
.ux-ui :is(.scrim, .ux-menu-scrim).leaving { animation: ux-fade-out var(--motion-leave) ease both; }
.ux-ui .sheet.leaving { animation: ux-sheet-out var(--motion-leave) var(--motion-ease) both; }
.ux-ui .sheet.right.leaving { animation: ux-panel-out var(--motion-leave) var(--motion-ease) both; }
.ux-ui .ux-shell-menu.leaving { animation: ux-menu-out var(--motion-menu) var(--motion-ease) both; }
@keyframes ux-sheet-in { from { transform: translate(-50%, calc(100% + 24px)); } }
@keyframes ux-panel-in { from { transform: translateX(100%); } }
@keyframes ux-sheet-out { to { transform: translate(-50%, calc(100% + 24px)); } }
@keyframes ux-panel-out { to { transform: translateX(100%); } }
@keyframes ux-menu-out { to { transform: scale(.92); opacity: 0; } }
/* a notice rises in and fades back down */
.ux-ui .toast { animation: ux-toast-in var(--motion-toast) var(--motion-ease); }
.ux-ui .toast.leaving { pointer-events: none; animation: ux-toast-out var(--motion-toast) ease forwards; }
@keyframes ux-toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes ux-toast-out { to { opacity: 0; transform: translate(-50%, 10px); } }

/* Army's notice at the top (js/army-notice.js), the design's (ARMY_1A .fl-mnoti) as the phone's
   card over other apps draws it (DoneOverlay): white, lit faintly mint at the lower left and blue at
   the lower right; Army's face, ARMY and what it is about in small type over the news; one dark
   pill. It comes down from a little above with a slight overshoot and goes back up. */
.army-notice { position: fixed; z-index: 120; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%;
  width: min(420px, calc(100vw - 24px)); transform: translateX(-50%);
  animation: army-notice-in .64s cubic-bezier(.2, .9, .3, 1.12) both; }
.army-notice.leaving { pointer-events: none; animation: army-notice-out var(--motion-leave) var(--motion-ease) forwards; }
@keyframes army-notice-in { from { opacity: 0; transform: translate(-50%, -18px) scale(.97); } }
@keyframes army-notice-out { to { opacity: 0; transform: translate(-50%, -18px) scale(.97); } }
.army-notice-card { --notice-ink: #16171d; --notice-head: rgba(22,23,29,.55); --notice-name: #34384b;
  --notice-time: #8b909c; --notice-act: #1d1e24; --notice-act-ink: #fff;
  display: flex; align-items: center; gap: 10px; min-height: 84px; box-sizing: border-box;
  padding: 14px 14px 14px 18px; border-radius: 30px; cursor: pointer; touch-action: none; user-select: none;
  color: var(--notice-ink); font-family: var(--ff);
  background: radial-gradient(ellipse at 18% 80%, rgba(118,214,188,.16), transparent 70%),
    radial-gradient(ellipse at 88% 70%, rgba(124,184,240,.16), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.9));
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: inset 0 0 0 .75px rgba(22,23,29,.1), 0 -3px 20px rgba(118,214,188,.2),
    0 10px 30px rgba(124,184,240,.24), 0 18px 30px -22px rgba(0,0,0,.4); }
.army-notice-card.dragging { transition: none; }
.army-notice-card.flung { transition: transform .18s ease-in, opacity .18s ease-in; }
.army-notice-card:not(.dragging):not(.flung) { transition: transform .2s var(--motion-ease), opacity .2s; }
.army-notice-text { flex: 1; min-width: 0; }
.army-notice-head { display: flex; align-items: center; min-width: 0; font-size: 11px; font-weight: 600;
  line-height: 1.3; letter-spacing: -.01em; color: var(--notice-head); }
.army-notice-face { flex: none; display: block; width: 20px; height: 20px; margin-right: 6px; }
.army-notice-face > .ux-face { width: 100%; height: 100%; }
.army-notice-head b { flex: none; font-family: var(--ux-heading); font-weight: 600; color: var(--notice-name); }
.army-notice-about { min-width: 0; margin-left: .3em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.army-notice-head time { flex: none; margin-left: auto; padding-left: 8px; font-weight: 500; color: var(--notice-time); }
/* the news in a sentence, two lines at most: a long result is read in full where the tap leads */
.army-notice-message { margin: 4px 0 0; font-size: 14px; font-weight: 600; line-height: 1.42; letter-spacing: -.03em;
  word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden; }
.army-notice-action { flex: none; align-self: center; height: 38px; padding: 0 15px; border: 0; border-radius: 19px;
  background: var(--notice-act); color: var(--notice-act-ink); font: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: -.02em; white-space: nowrap; cursor: pointer; box-shadow: 0 3px 8px rgba(12,15,29,.14); }
.army-notice-action:active { transform: scale(.97); }
.army-notice-action:focus-visible { outline: 2px solid var(--notice-ink); outline-offset: 2px; }
:root[data-theme='dark'] .army-notice-card { --notice-ink: #f3f3f5; --notice-head: rgba(243,243,245,.6);
  --notice-name: #f3f3f5; --notice-time: #92929b; --notice-act: #f3f3f5; --notice-act-ink: #111112;
  background: radial-gradient(ellipse at 18% 80%, rgba(118,214,188,.12), transparent 70%),
    radial-gradient(ellipse at 88% 70%, rgba(124,184,240,.12), transparent 70%),
    linear-gradient(180deg, rgba(40,40,44,.97), rgba(32,32,36,.94));
  box-shadow: inset 0 0 0 .75px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.4), 0 18px 30px -22px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) {
  .army-notice, .army-notice.leaving { animation: none; }
  .army-notice-card:not(.dragging) { transition: none; }
}
/* a new message settles in from just below */
.ux-ui .ux-arrive { animation: ux-arrive var(--motion-arrive) ease both; }
@keyframes ux-arrive { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* ── character motion: the supplied clips and the V5 springs (js/app.js CharacterFace, CompanionPeek,
   WavingYomi; a state's motion is played by companion-assets.js) ─────────────────────────────── */
/* the head and shoulders peeking over the greeting fade out at the window's foot, as in V5 */
.ux-peek:has(> .ux-peek-clip) { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
/* a round face: the whole figure moving on its own tint (the look's colour, from the one map) */
.ux-face { display: block; flex: none; border-radius: 50%; overflow: hidden; background: var(--look-tint);
  box-shadow: 0 10px 26px rgba(40, 30, 20, .10); }
.ux-face > img, .ux-face > .companion { display: block; width: 100%; height: 100%; object-fit: cover; }
.ux-face-hello { width: 76px; height: 76px; margin-top: 54px; box-shadow: 0 10px 26px rgba(40,30,20,.10); }
.ux-face-profile { width: 70px; height: 70px; }
.ux-onboarding-hero > .ux-face { width: 112px; height: 112px; }
@media (max-height: 650px) { .ux-onboarding-hero > .ux-face { width: 80px; height: 80px; } }
/* signing in: Yomi floats, its arm waving from the shoulder over a breathing shadow */
.ux-wave { position: relative; flex: none; width: 104px; height: 93px; margin-left: -6px;
  animation: ux-wave-float 3.2s ease-in-out infinite; }
.ux-wave img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none;
  filter: drop-shadow(0 6px 14px rgba(37, 37, 60, .12)); }
.ux-wave .ux-wave-arm { transform-origin: 75.4% 49.3%; animation: ux-wave-arm 2.6s ease-in-out infinite; }
.ux-wave-shadow { position: absolute; left: 50%; bottom: -4px; width: 48px; height: 8px; margin-left: -24px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37, 37, 60, .16), rgba(37, 37, 60, 0)); animation: ux-wave-shadow 3.2s ease-in-out infinite; }
@keyframes ux-wave-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ux-wave-arm { 0%, 62%, 100% { transform: rotate(0); } 10% { transform: rotate(-16deg); } 22% { transform: rotate(8deg); }
  34% { transform: rotate(-14deg); } 46% { transform: rotate(6deg); } }
@keyframes ux-wave-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.88); opacity: .7; } }

/* My devices' list as the design's pane of connected devices (V5 .pf-row): each device a row of its
   glyph on a 38 px tile, its name and its state, the rows parted by a hairline; what a machine brings
   (the VM's browser and coding agent) is a list inside its entry under a guide line, greyed while it
   cannot be used (#896). Routing stays below and operator diagnostics stay folded. */
.ux-device-status .device-list{display:flex;flex-direction:column}
.ux-device-status .device-entry{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 0}
.ux-device-status .device-entry:first-child{padding-top:4px}
.ux-device-status .device-entry:last-child{padding-bottom:2px}
.ux-device-status .device-entry+.device-entry{border-top:1px solid var(--line)}
.ux-device-status .surf{gap:12px;align-items:center;padding:0}
.ux-device-status .device-glyph{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:13px;background:var(--surface-2);color:var(--fg-2)}
.ux-device-status .surf-n{flex:1;min-width:0;font-size:14.5px;font-weight:700;letter-spacing:-.2px}
.ux-device-status .surf-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ux-device-status .surf-d{font-size:11.5px;font-weight:600;color:var(--fg-3)}
.ux-device-status .surf-r{flex:0 1 auto;min-width:0;max-width:55%;font-size:12px;overflow-wrap:anywhere}
/* a state longer than the room beside the name (the VM's isolation on a narrow phone) wraps inside its chip */
.ux-ui .ux-device-status .surf-r .pill{height:auto;min-height:22px;padding-block:4px;line-height:1.25;white-space:normal;text-align:left}
.ux-device-status .device-body{display:flex;flex-direction:column;gap:8px;min-width:0;padding-left:50px}
.device-parts{display:flex;flex-direction:column;gap:7px;margin:2px 0;padding:2px 0 2px 12px;list-style:none;border-left:2px solid var(--line)}
.device-part{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;font-weight:600;color:var(--fg)}
.device-part svg{flex:none;color:var(--fg-2)}
.device-part small{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--fg-3);text-align:right}
.device-part.off, .device-part.off svg{color:var(--fg-3)}
.vm-setup-details{min-width:0;font-size:13px}
.vm-setup-details summary{cursor:pointer;color:var(--fg-2)}
.vm-setup-details pre{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;font-weight:400}

/* A goal shown beside its work reads in the page's own neutral tone, not the old purple goal
   colour (#371): a grey inset with the ink and a muted count, as V5's chips */
.ux-ui :is(.card-goal, .goal-group, .goal-chip) { color: var(--fg); background: var(--surface-2); }
.ux-ui :is(.card-goal, .goal-group, .goal-chip) svg { color: var(--fg-2); }
.ux-ui .card-goal { border-color: transparent; }
/* ...and so does a goal's own card in a chat (one its stack does not hold): its purple stripe, cut
   by the round card's corner, read as a picture pasted into the conversation (#941) */
.ux-ui .card.line.goal { background: var(--surface); border-color: var(--line); }
.ux-ui .card.line.goal::before { content: none; }
.ux-ui .card.line.goal .ring-bg { stroke: var(--line); }
.ux-ui .card.line.goal .ring-fg { stroke: var(--fg); }

/* ── steady: the page holds still as what it shows arrives (js/steady.js) ──────────────────── */
/* a chat picture fades in the first time it arrives; one shown before keeps its size and shows at once */
.ux-ui img.ux-img-wait { opacity: 0; }
/* the dock's thumb slides under the chosen tab (V5 .seg .thumb-on .28s); the tab itself stays clear */
:root { --motion-thumb: .28s; }
.ux-tabs { position: relative; }
.ux-tab { position: relative; z-index: 1; }
.ux-tab-thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 30px; pointer-events: none;
  background: var(--fg); box-shadow: 0 4px 9px rgba(0, 0, 0, .14);
  transition: transform var(--motion-thumb) var(--motion-ease), width var(--motion-thumb) ease; }
.ux-tabs:has(> .ux-tab-thumb) .ux-tab.on { background: none; box-shadow: none; }
/* Chat and Space trading places keep the dock still, so its thumb is seen sliding */
html[data-nav=tab]::view-transition-old(ux-dock) { animation: none; opacity: 0; }
html[data-nav=tab]::view-transition-new(ux-dock) { animation: none; }

/* Personal memory controls, shared with first setup. */
.ux-memory-controls{padding:0!important;gap:0!important;overflow:hidden}
.memory-option,.memory-kind{display:flex;align-items:center;gap:12px;padding:16px;width:100%;min-width:0}
.memory-option+.memory-option,.memory-kind+.memory-kind{border-top:1px solid var(--line)}
.memory-option>svg,.memory-kind>svg{flex:none;color:var(--fg-2)}
.memory-option .row-main,.memory-kind .row-main{min-width:0;flex:1}
.memory-option .row-title,.memory-kind .row-title{display:block;font-size:13px;font-weight:600;line-height:1.45}
.memory-option .row-sub,.memory-kind .row-sub{display:block;font-size:12px;font-weight:400;line-height:1.55;margin:4px 0 0}
.memory-option .switch{flex:none}
.memory-scope-title{font-size:13px;font-weight:700;color:var(--fg-2);margin:20px 4px 8px}
.memory-kind{border:0;background:transparent;text-align:start;color:var(--fg);cursor:pointer}
.memory-kind:disabled{opacity:.45;cursor:default}
.memory-kind:focus-visible{outline:2px solid var(--fg);outline-offset:-3px}
.memory-kind-check{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid var(--line);border-radius:7px;background:var(--surface)}
.memory-kind[aria-checked=true] .memory-kind-check{background:var(--fg);border-color:var(--fg);color:var(--surface)}
.memory-controls-note{margin:12px 4px 16px;font-size:12px;line-height:1.6}
.memory-open{display:flex;align-items:center;gap:12px;width:100%;text-align:start;font-size:13px;font-weight:600;color:var(--fg)}
.memory-open .row-main{flex:1;min-width:0}
.memory-open>svg{flex:none}

/* The phone's real feature groups beside service connections, with V5 grouped rows. */
.connection-features{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.ux-ui .ux-pane .connection-feature-list.row-card,
.ux-onboarding .connection-feature-list.row-card{padding:0;gap:0;overflow:hidden}
.connection-feature-list .connection-feature{margin:0;padding:16px;border-bottom:1px solid var(--line)}
.connection-feature-list .connection-feature:last-child{border-bottom:0}
.connection-feature>.row>svg{flex:none;color:var(--muted)}
.connection-feature .tool-head{min-width:0;text-align:left}
.connection-feature .row-title{font-size:13px;font-weight:600}
.connection-feature .row-sub{font-size:12px;font-weight:400;overflow-wrap:anywhere}
.connection-feature .needs{margin-top:12px}
.connection-feature-list .switch{flex:none}
.connection-feature .tool-head .row-sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.connection-feature-list .connection-feature+.connection-feature{border-top:0}
/* the phone's other groups fold at the foot of the same list, under one line (#895) */
.connection-feature-list .connection-feature-more{gap:0;padding:0;border-top:0}
.connection-feature-more>summary{display:flex;align-items:center;min-height:48px;padding:0 16px}
.connection-feature-more>summary+.connection-feature{border-top:1px solid var(--line)}

/* Work notification choices: the V5 notification pane (data-pane="noti") in first setup and My
   page, one card of the account rows (a glyph on its tile, name, line, switch) parted by hairlines.
   Quiet hours' From and Until open under their row, indented to its text, as two lines of one grey
   inset (the design's choice track); a choice saving keeps its switch at full ink and breathes its
   knob. */
.ux-onboarding .notification-options.row-card,
.ux-onboarding .notification-more.row-card { padding: 0; gap: 0; overflow: hidden; }
.notification-option > .switch { flex: none; }
.notification-option > .switch[aria-busy='true'] { opacity: 1; cursor: progress; }
.notification-option > .switch[aria-busy='true'] i { animation: ux-skeleton 1s ease-in-out infinite; }
.notification-options + .muted, .notification-more + .muted { margin-top: -4px; }
.ux-ui .notification-options > .notification-times { border-top: 0; }
.notification-times { display: flex; flex-direction: column; margin: -4px 16px 14px 66px; }
.notification-time { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0;
  min-height: 44px; padding: 0 14px; background: var(--surface-2); font-size: 13px; font-weight: 600;
  color: var(--fg-2); cursor: pointer; }
.notification-time > span:first-child { flex: 1; min-width: 0; }
.notification-time-value { flex: none; font-size: 13.5px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.notification-time > svg { flex: none; color: var(--fg-3); }
.notification-time:first-child { border-radius: 16px 16px 0 0; }
.notification-time + .notification-time { border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; }
.notification-time:focus-within { outline: 2px solid var(--fg); outline-offset: -2px; }
/* the native field lies over the whole row, unseen: a tap anywhere opens its picker */
.notification-time input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  opacity: 0; cursor: pointer; }
.notification-time:has(input:disabled) { cursor: not-allowed; }
.notification-time:has(input:disabled) .notification-time-value { color: var(--fg-3); }
.notification-time:has(input[aria-busy='true']) .notification-time-value { animation: ux-skeleton 1s ease-in-out infinite; }
.notification-zone { margin: 8px 2px 0; font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--fg-3);
  overflow-wrap: anywhere; }
.notification-option .ux-setting-sub { word-break: keep-all; }
@media (max-width: 360px) { .notification-times { margin-left: 16px; } }
/* while the choices are read: the card's four rows drawn in grey */
.notification-skeleton { animation: ux-skeleton 1.4s ease-in-out infinite; }
.notification-skeleton i { flex: none; width: 38px; height: 38px; border-radius: 13px; background: var(--surface-2); }
.notification-skeleton span { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.notification-skeleton b { display: block; width: 42%; height: 11px; border-radius: 6px; background: var(--surface-3); }
.notification-skeleton b + b { width: 72%; height: 9px; opacity: .7; }
.notification-skeleton em { flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--surface-2); }
/* words only a screen reader says (also as a page's own child, which pages widen to their column) */
.ux-hidden-status, .ux-pane.page > .ux-hidden-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .notification-skeleton, .notification-option > .switch[aria-busy='true'] i,
  .notification-time:has(input[aria-busy='true']) .notification-time-value { animation: none; }
}

/* Four observed settings, as the V5 finish card: values wrap within narrow phones. */
.ux-onboarding .onboarding-summary.row-card{padding:0;gap:0;overflow:hidden}
.onboarding-summary-row{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--line)}
.onboarding-summary-row:last-child{border-bottom:0}
.onboarding-summary-row>svg{flex:none}
.onboarding-summary-row>strong{min-width:0;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.onboarding-summary-value{flex:1;min-width:0;margin-inline-start:auto;text-align:end;font-size:12px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}

/* Account settings keep the V5 rows together; editors and diagnostic versions open on demand. */
.ux-ui .ux-pane .ux-account-card { padding: 0; gap: 0; overflow: hidden; }
.ux-account-card > * + * { border-top: 1px solid var(--line); }
.ux-setting-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px;
  padding: 11px 16px; text-align: left; background: transparent; color: var(--fg); }
button.ux-setting-row, summary.ux-setting-row { cursor: pointer; }
summary.ux-setting-row { list-style: none; }
summary.ux-setting-row::-webkit-details-marker { display: none; }
.ux-setting-row > svg { flex: none; color: var(--fg-3); }
.ux-setting-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  border-radius: 13px; background: var(--surface-2); color: var(--fg-2); }
.ux-setting-text { flex: 1; min-width: 0; }
.ux-setting-title { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; }
.ux-setting-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 600;
  line-height: 1.4; color: var(--fg-3); overflow-wrap: anywhere; }
.ux-setting-value { flex: 0 1 auto; min-width: 0; max-width: 32%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--fg-2); }
.ux-ui .ux-pane .ux-account-fold > .row-card { margin: 0; border: 0; box-shadow: none;
  padding: 0 16px 16px; background: transparent; }
.ux-account-body { padding: 0 16px 16px; }
.ux-account-body .version-value { min-width: 0; overflow-wrap: anywhere; }
.ux-ui .ux-pane .row-card.ux-account-reset { padding: 11px 16px; }
.ux-account-reset .ux-setting-title, .ux-account-reset > svg { color: var(--bad); }
.ux-account-reset .ux-setting-icon { color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.ux-account-fold[open] > summary > svg:last-child { transform: rotate(90deg); }
/* A press answers at once, as in the design (the tap highlight is off): surfaces .97, buttons .96,
   round icons .92, rows a light tint; they settle back in the same 150 ms. Never on a disabled one,
   and with reduced motion only the tint shows. */
:root { --motion-press: 150ms; --press-surface: .97; --press-button: .96; --press-icon: .92; }
@media (prefers-reduced-motion: reduce) { :root { --press-surface: 1; --press-button: 1; --press-icon: 1; } }
.ux-ui :is(.btn, .send, .ux-hero-action, .ux-tab, .starter, .space-tab, .space-source, .ux-filters button,
  .icon-btn, .ux-new-chat, .ux-profile-button, .space-more, button.card, a.card, .space-open, button.row-card,
  .ux-context-stack summary, .ux-conv.conv, .menu-item, .space-menu-item, .ux-search-row) {
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-press) ease, background-color var(--motion-press) ease, color var(--motion-press) ease,
    opacity var(--motion-press) ease, border-color var(--motion-press) ease, box-shadow var(--motion-press) ease; }
.ux-ui :is(.btn, .send, .ux-hero-action, .ux-tab, .starter, .space-tab, .space-source, .ux-filters button):active:not(:disabled) {
  transform: scale(var(--press-button)); }
.ux-ui :is(.icon-btn, .ux-new-chat, .ux-profile-button, .space-more):active:not(:disabled) { transform: scale(var(--press-icon)); }
.ux-ui :is(button.card, a.card, .space-open, button.row-card, .ux-context-stack summary):active:not(:disabled) {
  transform: scale(var(--press-surface)); }
.ux-ui :is(.ux-conv.conv, .menu-item, .space-menu-item, .ux-search-row):active:not(:disabled) {
  background-color: color-mix(in srgb, currentColor 7%, transparent); }

/* Each supported execution rule keeps its own V5 row; the signed device pass stays independent. */
.ux-rule-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ux-rule-head .row-main { min-width: 0; }
.ux-rule-head .scope { margin-top: 4px; }
.ux-work-rules { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ux-work-rules > .row-card { margin: 0; }
.ux-autonomy-options { display: flex; flex-direction: column; }
.ux-autonomy-option { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; }
.ux-autonomy-option + .ux-autonomy-option { border-top: 1px solid var(--line); }
.ux-autonomy-option .row-title, .ux-autonomy-option .row-sub { display: block; }
.ux-autonomy-option .row-sub { margin-top: 4px; }
.ux-autonomy-option input { flex: none; width: 18px; height: 18px; accent-color: var(--fg); }
.ux-autonomy-option:has(input:disabled) { cursor: wait; opacity: .6; }
.ux-autonomy-option.on .row-title { color: var(--fg); }
.ux-work-pass > .row-sub, .ux-work-levels > .row-sub { overflow-wrap: anywhere; }
.ux-work-rules .row-sub { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* Existing privacy/awareness choices use V5 toggle rows; permission explanations remain visible. */
.ux-ui .ux-pane .row-card.ux-toggle-card { padding: 11px 16px; }
.ux-toggle-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ux-toggle-head .row-main { min-width: 0; }
.ux-toggle-head .row-sub { margin-top: 3px; }
.ux-toggle-head .scope { margin-top: 4px; }
.ux-toggle-head > .switch { flex: none; }
.ux-toggle-card .row-sub { display: block; -webkit-line-clamp: unset; overflow: visible; }
.ux-toggle-card > :not(.ux-toggle-head) { margin-left: 50px; min-width: 0; }
.ux-toggle-card > .needs { flex-wrap: wrap; }

/* care-plan uses Space's rounded cards and the bundled coach look; choices stay in Labs/settings. */
.care-page { max-width: 760px; }
.care-intro { max-width: 60ch; line-height: 1.7; }
.care-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-bottom: 24px; }
.care-body > .row-card, .care-suggestions > .row-card { margin: 0; }
.care-overview { display: flex; align-items: flex-start; gap: 9px; padding: 0 5px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.care-status-dot { flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--muted); }
.care-status-dot[data-active='1'] { background: var(--ok); }
.care-chat { width: 100%; justify-content: center; min-height: 44px; gap: 8px; }
.care-off-note { font-size: 13px; line-height: 1.7; margin: 0 5px; }
.care-space { width: 100%; max-width: 1120px; align-self: center; }
.care-plan { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.care-hero { position: relative; display: flex; align-items: center; gap: 24px; padding: 28px 32px;
  border-radius: 28px; background: var(--look-tint); min-width: 0; }
html[data-theme='dark'] .care-hero { background: var(--look-deep); }
.care-hero-copy { flex: 1; min-width: 0; }
.care-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px;
  font-size: 11px; font-weight: 650; color: var(--fg-2); }
.care-eyebrow > span { font-weight: 450; }
.care-hero h2 { margin: 0; max-width: 28em; font-size: 25px; font-weight: 700; line-height: 1.45; letter-spacing: -.6px; }
.care-plan-summary { margin: 12px 0 0; max-width: 64ch; color: var(--fg-2); font-size: 13px; line-height: 1.8; }
.care-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; }
.care-hero-actions .btn { min-height: 44px; gap: 8px; font-size: 13px; }
.care-settings-link { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 6px 0;
  border: 0; background: transparent; color: var(--fg-2); font: 500 12px/1.5 var(--ff); cursor: pointer; }
.care-settings-link:hover { color: var(--fg); }
.care-coach { flex: none; width: 122px; height: auto; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(24,52,80,.08)); }
.care-week { min-width: 0; }
.care-week-heading, .care-day-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.care-week-heading h3, .care-day-heading h3 { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 650; }
.care-week-heading > .small { font-size: 11px; text-align: right; }
.care-dates { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin: 14px 0 26px; }
.care-date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 99px; padding: 12px 3px; border: 1px solid transparent; border-radius: 20px;
  background: var(--surface); color: var(--fg); font-family: var(--ff); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.care-date:hover { background: var(--surface-2); }
.care-date[aria-pressed='true'] { border-color: var(--fg); background: var(--fg); color: var(--surface); }
.care-date-weekday { font-size: 11px; opacity: .65; }
.care-date-number { font-size: 23px; font-weight: 650; line-height: 1.25; letter-spacing: -.6px; }
.care-date-mark { display: flex; align-items: center; justify-content: center; min-height: 14px; font-size: 9px; font-weight: 600; }
.care-date-dots { display: flex; gap: 3px; }
.care-date-dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.care-day-heading { margin-bottom: 14px; }
.care-day-count { color: var(--muted); font-size: 11px; }
.care-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.care-action-card { display: flex; flex-direction: column; min-width: 0; padding: 22px; border-radius: 26px;
  background: var(--surface); box-shadow: var(--ux-shadow); }
.care-action-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin: -5px 0 8px; }
.care-kind { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--fg-2); font-size: 11px; font-weight: 550; }
.care-action-art, .care-rest-art { flex: none; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(24,52,80,.08)); }
.care-action-art { width: 52px; height: 52px; }
.care-rest-art { width: 96px; height: 96px; }
html[data-theme='dark'] .care-coach,
html[data-theme='dark'] .care-action-art,
html[data-theme='dark'] .care-rest-art { filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.care-action-title { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.5; letter-spacing: -.4px; }
.care-action-when { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; font-size: 12px; color: var(--fg-2); line-height: 1.7; }
.care-action-when > svg { flex: none; margin-top: 3px; }
.care-alternative { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; margin: 16px 0 0;
  border-radius: 14px; background: var(--surface-2); font-size: 12px; line-height: 1.75; color: var(--fg-2); }
.care-alternative > span:first-child { color: var(--muted); font-size: 10px; font-weight: 550; }
.care-action-more { margin-top: 14px; font-size: 12px; line-height: 1.75; }
.care-action-more summary { color: var(--muted); cursor: pointer; font-size: 11px; }
.care-action-more p { margin: 10px 0; }
.care-feedback, .care-proposal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 16px; }
.care-feedback { margin-top: auto; }
.care-feedback .btn { padding: 7px 10px; min-height: 36px; font-size: 11px; border-color: var(--line); }
.care-proposal-actions .btn { min-height: 36px; }
.care-rest-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px;
  border-radius: 26px; background: var(--surface); text-align: center; color: var(--muted); }
.care-rest-card h4 { margin: 14px 0 6px; font-size: 15px; font-weight: 600; color: var(--fg); }
.care-rest-card p { margin: 0; font-size: 12px; line-height: 1.7; }
.care-week-zone, .care-updated { margin: 12px 0 0; font-size: 10px; line-height: 1.6; }
.care-updated { margin: -12px 0 0; }
.care-week-notice { margin: 12px 0 0; line-height: 1.7; }
.care-text-link { align-self: flex-start; width: fit-content; border: 0; background: transparent;
  color: var(--muted); font-size: 12px; font-weight: 550; padding: 8px 0; text-align: left; cursor: pointer; }
.care-text-link:hover { color: var(--fg); text-decoration: underline; }
.care-suggestions { display: flex; flex-direction: column; gap: 12px; }
.care-nudge { padding: 22px 24px; border-radius: 26px; background: var(--look-tint); }
html[data-theme='dark'] .care-nudge { background: var(--look-deep); }
.care-nudge-label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-2); }
.care-nudge h3 { margin: 12px 0 8px; font-size: 18px; line-height: 1.5; }
.care-nudge-body { margin: 0; max-width: 66ch; font-size: 13px; line-height: 1.8; }
.care-nudge-action { margin-top: 12px; font-size: 11px; color: var(--fg-2); line-height: 1.7; }
.care-proposal-actions .btn { font-size: 12px; }
.care-group-title { margin: 4px 3px 10px; font-size: 13px; font-weight: 650; color: var(--muted); }
.care-sources > summary, .care-data-controls > summary, .care-saved > summary { cursor: pointer; font-size: 14px; font-weight: 650; line-height: 1.6; }
.care-saved > summary { margin-bottom: 14px; }
.care-sources > p { margin: 10px 0; line-height: 1.65; }
.care-source { display: flex; align-items: flex-start; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); }
.care-source .row-main { min-width: 0; flex: 1; }
.care-source .switch { margin-top: 4px; flex: none; }
.care-source .row-sub { margin-top: 4px; font-size: 12px; line-height: 1.65; white-space: normal; }
.ux-ui .care-source .row-sub, .ux-ui .care-sources > .row-sub { display: block; -webkit-line-clamp: unset; overflow: visible; }
.care-source-status { font-size: 11px; color: var(--muted); margin-top: 5px; }
.care-data-controls { padding: 10px 5px 0; }
.care-data-controls > p { line-height: 1.65; }
.care-unavailable { gap: 12px; margin-top: 12px; }
.care-loading { min-height: 150px; justify-content: center; gap: 18px; color: var(--muted); font-size: 13px; }
.care-loading-bar { position: relative; overflow: hidden; height: 10px; width: 55%; max-width: 240px; border-radius: 8px; background: var(--line); }
/* Periods match FLOAT_MS, PULSE_MS and SHIMMER_MS in care-plan.js. The script sets a negative
   delay so a redraw continues the same phase instead of restarting the motion. */
@media (prefers-reduced-motion: no-preference) {
  .care-coach, .care-action-art, .care-rest-art { animation: care-float 5.6s ease-in-out infinite; }
  .care-status-dot[data-active='1'] { animation: care-pulse 2.8s ease-in-out infinite; }
  .care-loading-bar::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 16%, transparent), transparent);
    animation: care-shimmer 1.6s ease-in-out infinite; animation-delay: inherit; }
}
@keyframes care-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes care-float-phone { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: no-preference) and (max-width: 600px) {
  .care-coach, .care-action-art, .care-rest-art { animation-name: care-float-phone; }
}
@keyframes care-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes care-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .care-coach, .care-action-art, .care-rest-art, .care-status-dot, .care-loading-bar::after { animation: none; }
}
.care-error { font-size: 13px; line-height: 1.6; }
.care-lab-card { gap: 12px; }
.care-lab-card .row-sub { margin-top: 4px; line-height: 1.65; white-space: normal; }
.ux-ui .care-lab-card .row-sub { display: block; -webkit-line-clamp: unset; overflow: visible; }
.care-lab-card > .btn { align-self: flex-start; margin-left: 50px; }
@media (max-width: 600px) {
  .care-body { gap: 12px; }
  .care-hero { display: block; padding: 22px; border-radius: 24px; }
  .care-coach { position: absolute; right: 15px; top: 19px; width: 73px; }
  .care-eyebrow { display: block; padding-right: 64px; margin-bottom: 10px; font-size: 10px; line-height: 1.7; }
  .care-eyebrow > span { display: block; }
  .care-hero h2 { padding-right: 55px; font-size: 20px; line-height: 1.5; }
  .care-plan-summary { margin-top: 14px; font-size: 12px; line-height: 1.8; }
  .care-hero-actions { margin-top: 18px; gap: 6px 14px; }
  .care-hero-actions .btn { font-size: 12px; }
  .care-settings-link { font-size: 11px; }
  .care-plan { gap: 22px; }
  .care-nudge { padding: 20px; border-radius: 24px; }
  .care-dates { gap: 4px; margin-bottom: 22px; }
  .care-date { min-height: 89px; padding: 10px 2px; border-radius: 16px; }
  .care-date-number { font-size: 20px; }
  .care-date-weekday { font-size: 10px; }
  .care-date-mark { font-size: 8px; }
  .care-action-grid { grid-template-columns: minmax(0, 1fr); }
  .care-action-card { padding: 20px; border-radius: 24px; }
  .care-action-art { width: 44px; height: 44px; }
  .care-action-title { font-size: 17px; }
  .care-rest-card { padding: 22px 20px; }
  .care-rest-art { width: 72px; height: 72px; }
  .care-proactive .row-sub, .care-lab-card .row-sub { font-size: 12px; line-height: 1.65; }
}

/* My page › Labs: the note on what Labs is, then one toggle row per feature; what a feature needs or
   kept sits under its switch, a thin rule apart, and its own deletes keep their one question. */
.labs-note { margin: 0 2px 2px; font-size: 13px; line-height: 1.5; }
.labs-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.labs-list > .row-card { margin: 0; }
.labs-more { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); }
.labs-more > .btn { align-self: flex-start; }
.labs-more .row { gap: 8px; align-items: center; min-height: 32px; }
.labs-more .row-sub { overflow-wrap: anywhere; }

/* Space's literal data excerpt: quiet rules and aligned values, with no inner scrolling. */
.space-card--table { container-type: inline-size; }
.space-table-preview { margin: 13px 0 14px; min-width: 0; }
.space-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; line-height: 1.4; }
.space-table td { padding: 8px 5px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--fg-2); }
.space-table td + td { border-left: 1px solid var(--line); }
.space-table tr:nth-child(odd) { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.space-table tr:last-child td { border-bottom: 0; }
.space-table-cell { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; font-variant-numeric: tabular-nums; }
.space-table-more { margin: 9px 0 0; color: var(--fg-3); font-size: 10px; line-height: 1.4; }

.space-table-more.is-narrow-only { display: none; }
@container (max-width: 220px) {
  .space-table td:nth-child(n+3) { display: none; }
  .space-table-more.is-narrow-only { display: block; }
}
@container (max-width: 160px) {
  .space-table { font-size: 11px; }
  .space-table td { padding: 7px 3px; }
}
.space-table td:first-child .space-table-cell { display: block; white-space: nowrap; text-overflow: ellipsis; }

/* Folder names are controls, so a hold edits instead of selecting browser text. */
.space-theme .space-open, .space-theme-rename { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.space-group-title, .space-group-editor { width: min(100%, 360px); margin: 0 auto !important; }
.space-theme-rename { display: block; width: 100%; min-height: 52px; padding: 10px 16px;
  border: 1px solid transparent; border-radius: 28px; color: inherit; font: inherit; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-group-field { position: relative; display: flex; align-items: center; height: 52px; border-radius: 28px;
  border: 1px solid rgba(255,255,255,.36); background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 16px rgba(0,0,0,.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.35); backdrop-filter: blur(20px) saturate(1.35); }
.space-theme-view .space-group-editor input { display: block; width: 100%; min-width: 0; height: 100%; padding: 10px 48px 10px 16px;
  border: 0; border-radius: inherit; background: transparent; color: #fff; caret-color: #fff;
  font: 700 22px/1.25 var(--ff); letter-spacing: -.5px; box-shadow: none; }
.ux-ui .space-group-editor input:focus-visible { outline: none; }
.space-group-field:focus-within { border-color: rgba(255,255,255,.65); }
.space-group-clear { position: absolute; right: 4px; top: 3px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.space-group-clear span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.55); color: rgba(30,30,40,.65); }
.space-group-clear:active { transform: scale(.94); }
.space-group-editor #space-group-error { margin: 8px 14px 0; font-size: 13px; color: #fff; }
.space-group-saving { position: absolute; right: 18px; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: space-group-saving .8s linear infinite; }
@keyframes space-group-saving { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .space-group-saving { animation: none; } }

/* Space's CSV/TSV reading surface: keep cells aligned, including on a phone. */
.space-result-view--space .space-result-body:has(> .space-table-view) { display: flex; overflow: hidden; }
.space-table-view { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.space-table-summary { display: flex; align-items: center; gap: 8px; padding: 16px 24px; color: var(--fg-2); }
.space-table-count { margin: 0; font: 500 12px/1.5 var(--ff); font-variant-numeric: tabular-nums; }
.space-table-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.space-table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.space-table-full { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 14px/1.6 var(--ff); color: var(--fg); }
.space-table-full :is(th, td) { text-align: left; vertical-align: top; padding: 14px 20px;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.space-table-full :is(th, td):last-child { border-right: 0; }
.space-table-full thead th { position: sticky; top: 0; z-index: 2; padding: 8px 20px;
  background: var(--bg); color: var(--fg-2); font: 500 11px/1.5 var(--ff); border-top: 1px solid var(--line); }
.space-table-full td > div { width: max-content; min-width: 80px; max-width: 360px; white-space: pre-wrap; overflow-wrap: anywhere; }
.space-table-full .space-table-index { position: sticky; left: 0; width: 40px; min-width: 40px;
  padding-left: 10px; padding-right: 10px; text-align: center; background: var(--bg);
  color: var(--fg-2); font: 400 11px/1.6 var(--ff); font-variant-numeric: tabular-nums; }
.space-table-full thead .space-table-index { z-index: 3; }
.space-table-full tbody .space-table-index { z-index: 1; padding-top: 17px; }
.space-table-pages { display: flex; align-items: center; gap: 4px; padding: 8px 16px;
  border-top: 1px solid var(--line); font: 500 12px/1.5 var(--ff); font-variant-numeric: tabular-nums; }
.space-table-pages > span { margin-right: auto; color: var(--fg-2); }
.space-table-pages button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--fg); }
.space-table-pages button:active { background: var(--bg); }
.space-table-pages button:disabled { opacity: .3; }
.space-table-empty { display: grid; justify-items: center; gap: 12px; padding: 64px 24px; color: var(--fg-2); }
.space-table-empty p { margin: 0; font-size: 14px; }
.space-result-body > .space-table-notice { margin: 0; padding: 20px 24px 0; color: var(--fg-2); font-size: 13px; }
@media (max-width: 640px) {
  .space-table-summary { padding: 12px 16px; }
  .space-table-full :is(th, td) { padding-left: 14px; padding-right: 14px; }
  .space-table-full td > div { max-width: 240px; }
}

/* The companion's name shares the editor column; its draft does not change the preview. */
.ux-editor-name { display: grid; gap: 6px; padding-bottom: 16px; }
.ux-editor-name .ux-look-label { margin-bottom: 0; }
.ux-editor-name input { width: 100%; min-width: 0; min-height: 44px; border-radius: 12px; }
.ux-editor-name small { font-size: 11px; }
.ux-message-name, .ux-agent-name { overflow-wrap: anywhere; }

/* Space long-press: the real card stays in view while its actions take focus. */
.space-context { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  padding: 0; margin: 0; border: 0; background: transparent; color: var(--fg); overflow: auto; }
.space-context::backdrop { background: rgb(0 0 0 / .24); backdrop-filter: blur(4px);
  animation: space-context-veil 220ms cubic-bezier(.23, 1, .32, 1) both; animation-delay: var(--context-elapsed); }
:root[data-theme='dark'] .space-context::backdrop { background: rgb(0 0 0 / .46); }
.space-context-cluster { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.space-context-cluster.above { flex-direction: column-reverse; }
.space-context-cluster.right { align-items: flex-end; }
.space-context-preview { flex-shrink: 0; pointer-events: none; user-select: none;
  animation: space-context-lift 240ms cubic-bezier(.23, 1, .32, 1) both; animation-delay: var(--context-elapsed); }
.space-context-preview > .space-card { margin: 0; width: 100%; box-shadow: 0 12px 36px rgb(0 0 0 / .16); }
.space-context-preview .space-open { pointer-events: none; }
.space-context .space-menu { overflow-y: auto; overscroll-behavior: contain; position: relative; inset: auto; min-width: 0; width: 264px; max-width: 100%; box-sizing: border-box; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 16px 48px rgb(0 0 0 / .18); transform-origin: top left;
  animation: space-context-unfold 240ms cubic-bezier(.23, 1, .32, 1) both; animation-delay: var(--context-elapsed); }
.space-context-cluster.above .space-menu { transform-origin: bottom left; --context-y: 8px; }
.space-context-cluster.right .space-menu { transform-origin: top right; }
.space-context-cluster.right.above .space-menu { transform-origin: bottom right; }
.space-context .space-menu-item { display: flex; align-items: center; width: 100%; min-height: 48px; gap: 12px; padding: 12px 14px;
  border: 0; border-radius: 16px; color: var(--fg); background: transparent; text-align: start; font: inherit; font-size: 14px;
  cursor: pointer; transition: background-color 120ms ease, transform 120ms cubic-bezier(.23, 1, .32, 1); }
.space-context .space-menu-item svg { flex: 0 0 auto; }
.space-context .space-menu-item:active:not(:disabled) { transform: scale(.97); background: var(--surface-2); }
.space-context .space-menu-item:focus-visible { outline: 2px solid var(--fg); outline-offset: -3px; }
.space-context .space-menu-item:disabled { opacity: .45; cursor: default; }
.space-context .space-menu-item.danger { color: var(--bad); margin-top: 5px; position: relative; }
.space-context .space-menu-item.danger::before { content: ''; position: absolute; top: -3px; left: 14px; right: 14px; height: 1px; background: var(--line); }
.space-context-fallback { background: var(--surface); padding: 16px; border-radius: 20px; }
.space-context.closing { pointer-events: none; }
.space-context.closing::backdrop, .space-context.closing .space-context-preview { animation: space-context-out 160ms cubic-bezier(.23, 1, .32, 1) both; animation-delay: var(--context-elapsed); }
.space-context.closing .space-menu { animation: space-context-fold 160ms cubic-bezier(.23, 1, .32, 1) both; animation-delay: var(--context-elapsed); }
@keyframes space-context-veil { from { opacity: 0; } }
@keyframes space-context-lift { from { transform: scale(.98); } }
@keyframes space-context-unfold { from { opacity: 0; transform: translateY(var(--context-y, -8px)) scale(.95); } }
@keyframes space-context-out { to { opacity: 0; } }
@keyframes space-context-fold { to { opacity: 0; transform: translateY(var(--context-y, -8px)) scale(.97); } }
.space-context.instant::backdrop, .space-context.instant .space-context-preview, .space-context.instant .space-menu { animation: none; }
@media (hover: hover) and (pointer: fine) { .space-context .space-menu-item:hover:not(:disabled) { background: var(--surface-2); } }
@media (prefers-reduced-motion: reduce) {
  .space-context::backdrop, .space-context .space-context-preview, .space-context .space-menu { animation: none; }
  .space-context .space-menu-item { transition: none; }
  .space-context .space-menu-item:active:not(:disabled) { transform: none; }
}

.space-context:not(.keyboard) .space-menu-item:focus-visible { outline: none; }