/* The hidden attribute always wins over a component's display rule. */
[data-workspace] [hidden], .ws-lightbox [hidden] { display: none !important; }
.workspace-page .global-shell__footer { display: none; }
.workspace-page { overflow: hidden; }
/* The Workspace is the screen, never a scrolled page (the keyboard used to
   scroll the document and leave it cut off). While a field is focused,
   workspace.js sizes it to the visible area above the on-screen keyboard
   (--ws-vh); with nothing focused those are cleared, so it is
   always exactly the full screen again once the keyboard is gone. */
html:has(> body.workspace-page), body.workspace-page { height: 100%; overflow: hidden; overscroll-behavior: none; }
.ws { --drawer-top: 0px; --nav-w: 16.5rem; --rail-w: 68px; --ctx-w: 20rem; display: grid; grid-template-columns: auto minmax(0, 1fr); height: calc(100dvh - var(--header-h)); background: var(--paper); color: var(--ink); }
.workspace-page .ws { position: fixed; left: 0; right: 0; top: 0; height: var(--ws-vh, 100%); }
.ws.has-context { grid-template-columns: auto minmax(0, 1fr) var(--ctx-w); }
.ws-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ws-muted { color: var(--muted); font-size: .85rem; margin: 0; }
.ws-button, .ws-toggle, .ws-agent-pick { font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.25; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: var(--r-md); padding: .5rem .85rem; cursor: pointer; }
/* A button's icon and words are centered on each other and in the button, everywhere (CLAUDE.md, Interface rules). */
.ws-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.ws-button > svg, .ws-button > [data-icon] > svg { flex: none; display: block; }
.ws-button:hover, .ws-toggle:hover, .ws-agent-pick:hover { border-color: var(--line-strong); background: var(--panel-strong); }
.ws-button--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ws-button--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.ws-button:disabled, .ws-button:disabled:hover { opacity: .5; cursor: not-allowed; background: var(--panel); border-color: var(--line); }
.ws-button--primary:disabled, .ws-button--primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
.ws-icon { font: inherit; font-size: 1.1rem; line-height: 1; background: none; border: 1px solid transparent; color: var(--muted); border-radius: 9px; padding: .35rem .5rem; cursor: pointer; }
.ws-icon:hover { color: var(--ink); border-color: var(--line); }
:where(.ws button, .ws input, .ws textarea, .ws a):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* navigation */
.ws-nav { border-right: 1px solid var(--line); background: var(--panel); display: flex; min-height: 0; }
.ws-side { width: var(--nav-w); display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); }
.ws-nav__top { display: flex; gap: .5rem; padding: .9rem; align-items: center; }
.ws-nav__top .ws-button { flex: 1; }
.ws-nav [data-action="close-nav"] { display: none; }
.ws-search { padding: 0 .9rem .6rem; }
.ws-search input { width: 100%; font: inherit; font-size: .85rem; padding: .45rem .6rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; }
.ws-tree { overflow-y: auto; padding: 0 .5rem 1rem; flex: 1; }
.ws-tree h2 { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 1rem .5rem .35rem; display: flex; justify-content: space-between; align-items: center; }
.ws-tree h2 button { font-size: .8rem; }
.ws-tree ul { list-style: none; margin: 0; padding: 0; }
.ws-tree li > button, .ws-tree summary { width: 100%; text-align: left; font: inherit; font-size: .86rem; background: none; border: 0; color: var(--ink); padding: .4rem .5rem; border-radius: 9px; cursor: pointer; display: flex; gap: .45rem; align-items: center; overflow: hidden; }
.ws-tree li > button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-tree li > button:hover, .ws-tree summary:hover { background: var(--panel-strong); }
.ws-tree li > button[aria-current="page"] { background: var(--accent-surface); box-shadow: inset 2px 0 0 var(--accent); }
.ws-tree details ul { padding-left: .8rem; border-left: 1px solid var(--line); margin-left: .75rem; }
.ws-tree .ws-dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; background: var(--agent, var(--dim)); }

/* main column */
.ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* The bar: navigation and where you are on the left; this chat's tools, then the mode switch and New chat on the right.
   One row, 60px (56px on phones), 40px buttons. */
.ws-bar { display: flex; align-items: center; gap: .5rem; min-height: 60px; box-sizing: border-box; padding: .625rem 1rem; border-bottom: 1px solid var(--line); }
.ws-bar__title { flex: 1; min-width: 0; }
.ws-bar h1 { font-size: 1.05rem; font-weight: 620; letter-spacing: -.01em; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-bar__actions { display: flex; align-items: center; flex: none; }
.ws-bar__tools { display: flex; align-items: center; gap: .125rem; }
.ws-bar__primary { display: flex; align-items: center; gap: .5rem; margin-left: .75rem; }
.ws-bar .ws-iconbtn { width: 40px; height: 40px; border-radius: 10px; }
.ws-bar__nav { position: relative; }
.ws-only-narrow { display: none; }
.ws-messages { --page-x: clamp(1rem, 4vw, 3rem); --page-top: 1.25rem; flex: 1; overflow-y: auto; padding: var(--page-top) var(--page-x); display: flex; flex-direction: column; gap: 1.25rem; }
.ws-empty { margin: auto; max-width: 34rem; text-align: center; }
.ws-empty h2 { font-size: 1.55rem; font-weight: 620; letter-spacing: -.02em; margin: 0 0 .5rem; }

.ws-msg { max-width: 52rem; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; }
.ws-msg__avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--panel-strong); display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: var(--muted); }
.ws-msg__head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.ws-msg__name { font-weight: 800; font-size: .9rem; color: var(--agent, var(--ink)); }
/* An agent's color is bright; on Light its name takes it mixed with the ink, so it still reads (4.5:1 or more). */
:root[data-theme="light"] .ws-msg__name { color: color-mix(in srgb, var(--agent, var(--ink)) 55%, var(--ink)); }
.ws-msg__meta { font-size: .75rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.ws-msg__body { line-height: 1.6; overflow-wrap: anywhere; }
.ws-msg__body p { margin: .4rem 0; }
.ws-msg__body pre { background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--code-line); border-radius: var(--r-lg); padding: .75rem; overflow-x: auto; font-size: .84rem; line-height: 1.6; }
.ws-msg__body code { font-family: var(--font-mono); font-size: .86em; background: color-mix(in srgb, var(--ink) 8%, transparent); padding: .08rem .35rem; border-radius: var(--r-xs); }
.ws-msg__body pre code { background: none; padding: 0; }
.ws-msg__body a { color: var(--cyan); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.ws-msg__body a:hover { text-decoration-color: currentColor; }
.ws-msg__body ul, .ws-msg__body ol { padding-left: 1.3rem; margin: .4rem 0; }
/* A numbered list that starts further on ("42.") has wider numbers: room for them inside the text's edge. */
.ws-msg__body ol[start] { padding-left: 2.3rem; }
.ws-msg__body h1, .ws-msg__body h2, .ws-msg__body h3, .ws-msg__body h4, .ws-msg__body h5, .ws-msg__body h6 { line-height: 1.3; margin: 1rem 0 .4rem; }
.ws-msg__body h1 { font-size: 1.35rem; } .ws-msg__body h2 { font-size: 1.2rem; } .ws-msg__body h3 { font-size: 1.05rem; } .ws-msg__body h4, .ws-msg__body h5, .ws-msg__body h6 { font-size: .95rem; }
.ws-msg__body > :first-child { margin-top: 0; } .ws-msg__body > :last-child { margin-bottom: 0; }
.ws-msg__body li { margin: .15rem 0; } .ws-msg__body li > ul, .ws-msg__body li > ol { margin: .15rem 0; }
.ws-msg__body li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.2rem; }
.ws-msg__body input[type="checkbox"] { margin: 0 .4rem 0 0; vertical-align: -.1em; }
.ws-msg__body blockquote { margin: .6rem 0; padding: .2rem 0 .2rem .9rem; border-left: 3px solid var(--agent, var(--accent)); color: var(--muted); }
.ws-msg__body hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
.ws-msg__body del { opacity: .7; }
/* A table is a soft card: one rounded edge, rows divided, no grid. */
.ws-table { overflow-x: auto; margin: .8rem 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ws-msg__body table { border-collapse: separate; border-spacing: 0; font-size: .88rem; min-width: 100%; }
.ws-msg__body th, .ws-msg__body td { border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); padding: .6rem .85rem; text-align: left; vertical-align: top; }
.ws-msg__body thead th { color: var(--ink); font-size: .82rem; font-weight: 700; background: var(--panel-strong); border-bottom-color: var(--line); }
.ws-msg__body tbody tr:last-child > * { border-bottom: 0; }
.ws-msg__body tbody th { font-weight: 600; }
.ws-plain { white-space: pre-wrap; }
.ws-code { margin: .7rem 0; border: 1px solid var(--code-line); border-radius: var(--r-lg); overflow: hidden; background: var(--code-bg); }
.ws-code__head { display: flex; justify-content: space-between; align-items: center; padding: .3rem .4rem .3rem .85rem; font-size: .74rem; font-family: var(--font-mono); color: var(--code-dim); background: var(--code-head); border-bottom: 1px solid var(--code-line); text-transform: lowercase; }
.ws-code__copy { font: inherit; font-family: var(--font-ui); color: inherit; background: none; border: 0; border-radius: var(--r-sm); padding: .2rem .5rem; cursor: pointer; text-transform: none; }
.ws-code__copy:hover, .ws-code__copy:focus-visible { color: var(--code-ink); background: color-mix(in srgb, var(--code-ink) 9%, transparent); }
.ws-msg__body .ws-code pre { margin: 0; border: 0; border-radius: 0; background: var(--code-bg); padding: .8rem .95rem; }
.ws-msg__body .ws-code pre code.hljs { padding: 0; background: none; }
/* Syntax colors (highlight.js classes), from the theme's --syn-* tokens: Dyadic's own palette in Light, Dark and OLED. */
.hljs { color: var(--code-ink); background: none; }
.hljs-keyword, .hljs-doctag, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-variable.language_, .hljs-selector-tag { color: var(--syn-keyword); }
.hljs-title, .hljs-title.class_, .hljs-title.function_, .hljs-title.class_.inherited__, .hljs-section { color: var(--syn-function); }
.hljs-string, .hljs-meta .hljs-string, .hljs-char.escape_ { color: var(--syn-string); }
.hljs-number, .hljs-literal, .hljs-bullet, .hljs-symbol { color: var(--syn-number); }
.hljs-type, .hljs-built_in, .hljs-class .hljs-title { color: var(--syn-type); }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-variable, .hljs-params { color: var(--syn-attr); }
.hljs-name, .hljs-tag, .hljs-selector-pseudo { color: var(--syn-tag); }
.hljs-regexp, .hljs-link { color: var(--syn-regexp); }
.hljs-comment, .hljs-quote, .hljs-meta, .hljs-code, .hljs-formula { color: var(--syn-comment); font-style: italic; }
.hljs-meta { font-style: normal; }
.hljs-operator, .hljs-punctuation, .hljs-subst { color: var(--code-ink); }
.hljs-addition { color: var(--diff-add); background: var(--diff-add-bg); }
.hljs-deletion { color: var(--diff-del); background: var(--diff-del-bg); }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; }
.ws-msg__body img { max-width: min(100%, 32rem); border-radius: 9px; border: 1px solid var(--line); display: block; margin: .5rem 0; }
.ws-msg--user .ws-msg__body { width: fit-content; max-width: 100%; background: color-mix(in srgb, var(--panel-strong) 72%, var(--paper)); border-radius: 18px 18px 18px 6px; padding: .6rem .95rem; }
.ws-msg__foot { display: flex; gap: .35rem; align-items: center; margin-top: .35rem; flex-wrap: wrap; }
.ws-chip { font-size: .72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; }
.ws-msg__actions { opacity: 0; transition: opacity 120ms ease; }
.ws-msg:hover .ws-msg__actions, .ws-msg:focus-within .ws-msg__actions { opacity: 1; }
.ws-msg--pending .ws-msg__body { color: var(--muted); }
.ws-error { color: var(--red); }

/* composer */
.ws-composer { border-top: 1px solid var(--line); padding: .75rem clamp(1rem, 4vw, 3rem) calc(.75rem + env(safe-area-inset-bottom, 0px)); }
.ws-composer > * { max-width: 52rem; margin-left: auto; margin-right: auto; }
/* Status lives in the chat (beside the thinking dots, under a live answer);
   the composer's copy is for screen readers only and takes no space. */
.ws-composer__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Working indicator: the agent's mark turns and breathes in its avatar's place,
   then a shimmering status word and three dots. */
.ws-thinking__main { display: grid; gap: .6rem; align-content: center; min-height: 2.4rem; }
.ws-thinking__row, .ws-msg__status { display: flex; align-items: center; gap: .1rem; font-size: .92rem; }
.ws-msg__status { margin: .5rem 0 0; gap: .5rem; font-size: .84rem; }
.ws-msg__status[hidden] { display: none; }
.ws-thinking__mark { animation: ws-mark-spin 2.6s linear infinite, ws-mark-breathe 1.3s ease-in-out infinite alternate; }
.ws-msg__status .ws-thinking__mark { width: 1.1rem; height: 1.1rem; border-radius: 50%; }
.ws-thinking__label { font-weight: 600; background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 35%, var(--ink) 50%, var(--muted) 65%, var(--muted) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ws-shimmer 2.2s linear infinite; }
.ws-thinking__dots { display: inline-flex; gap: .18rem; margin-left: .2rem; align-items: flex-end; height: 1em; }
.ws-thinking__dots i { width: .26rem; height: .26rem; border-radius: 50%; background: var(--muted); animation: ws-dot-fade 1.2s ease-in-out infinite; }
.ws-thinking__dots i:nth-child(2) { animation-delay: .2s; }
.ws-thinking__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ws-mark-spin { to { rotate: 360deg; } }
@keyframes ws-mark-breathe { from { scale: .92; filter: brightness(.95); } to { scale: 1.06; filter: brightness(1.2); } }
@keyframes ws-shimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes ws-dot-fade { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ws-thinking__mark, .ws-thinking__dots i { animation: none; }
  .ws-thinking__label { animation: none; color: var(--muted); background: none; }
}
.ws-inputbox { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .3rem; padding: .3rem; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: 20px;
  background: color-mix(in srgb, var(--panel) 60%, var(--paper)); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.ws-inputbox:focus-within { border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.ws-inputbox__main { flex: 1; min-width: 0; display: grid; }
.ws-composer textarea { display: block; width: 100%; resize: none; max-height: 60vh; overflow-y: auto; font: inherit; line-height: 1.5; padding: .5rem .25rem; background: transparent; color: var(--ink); border: 0; border-radius: 0; }
.ws-composer textarea:focus, .ws-composer textarea:focus-visible { outline: none; }
.ws-inputbox:not(:focus-within) textarea::placeholder { opacity: .75; }
/* A hint wider than the box (a long agent name on a narrow phone) stays on one line instead of showing half a second line. */
.ws-composer textarea::placeholder { white-space: nowrap; overflow: hidden; }
.ws-inputbox .ws-plus, .ws-inputbox .ws-send { flex: none; margin-bottom: .05rem; }
/* Claude's layout: the message on top, the full width of the box; below it, + and the model pill on the left, send on the right. */
.ws-inputbox__main { order: 1; flex: 0 0 100%; padding: .2rem .45rem 0; }
.ws-inputbox .ws-plus { order: 2; }
.ws-inputbox .ws-agent-pick { order: 3; }
.ws-inputbox .ws-send { order: 4; margin-left: auto; }
/* Active modes sit on their own line at the top of the box, above a thin rule. */
.ws-modechips { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: .35rem; padding: .25rem .35rem .5rem; margin-bottom: .2rem; border-bottom: 1px solid var(--line); }
.ws-modechips:not(:has(.ws-modechip[aria-pressed="true"])) { display: none; }
.ws-modechip { display: inline-flex; align-items: center; gap: .3rem; font: 700 .74rem/1 var(--font-ui); padding: .32rem .5rem .32rem .55rem; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent-surface); color: var(--ink); cursor: pointer; }
.ws-modechip[aria-pressed="false"] { display: none; }
.ws-activity__auto { color: var(--accent); }
.ws-modechip svg { width: 13px; height: 13px; }
.ws-modechip svg:last-child { opacity: .7; }
.ws-modechip:hover svg:last-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ws-inputbox { transition: none; } }
.ws-composer__spacer { flex: 1; }
.ws-agent-pick { display: inline-flex; gap: .4rem; align-items: center; min-width: 0; max-width: calc(100% - 6.5rem); height: 38px; padding: 0 .8rem 0 .45rem;
  border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); font-weight: 600; white-space: nowrap; }
.ws-agent-pick:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); border: 0; }
.ws-agent-pick img, .ws-agent-pick .ws-agentmark { width: 22px; height: 22px; flex: none; border-radius: 50%; }
.ws-agent-pick__model { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ws-agent-pick__effort { color: var(--muted); font-weight: 500; }
.ws-pickgroup { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel-strong); overflow: hidden; margin: 0 0 .75rem; }
.ws-pickopt { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.5rem; padding: .7rem 1rem; text-align: left; font: inherit; color: var(--ink);
  background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; }
.ws-pickopt:first-child { border-top: 0; }
.ws-pickopt:hover { background: var(--panel); }
.ws-pickopt__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ws-pickopt__text strong { font-size: 1rem; font-weight: 550; }
.ws-pickopt__text small { color: var(--muted); font-size: .85rem; }
.ws-pickopt > svg:last-child { flex: none; color: var(--accent); }
.ws-pickopt--link > svg { color: var(--muted); }
.ws-pickopt__space { width: 20px; flex: none; }
.ws-pickopt .ws-agentmark, .ws-pickopt img { width: 28px; height: 28px; flex: none; border-radius: 50%; }
.ws-pickgroup--effort { flex-direction: row; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .6rem .6rem 1rem; flex-wrap: wrap; }
.ws-pickgroup--effort strong { font-weight: 550; }
.ws-picklabel { margin: .25rem 0 .45rem .25rem; }
@media (max-width: 600px) { .ws-agent-pick__model { max-width: 8.5rem; } }
.ws-toggle[aria-pressed="true"] { background: var(--accent-surface); border-color: var(--accent); color: var(--accent-muted); }
.ws-cancel { font-size: 1rem; background: none; border: 1px solid var(--line); border-radius: 9px; padding: .35rem .55rem; cursor: pointer; }

/* context */
.ws-context { border-left: 1px solid var(--line); background: var(--panel); padding: .9rem; overflow-y: auto; }
.ws-context header { display: flex; align-items: center; gap: .25rem; }
.ws-context h2 { margin: 0 auto 0 0; font-size: 1rem; font-weight: 800; }
.ws-stack { list-style: none; padding: 0; margin: .9rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.ws-stack li { border: 1px solid var(--line); border-radius: 9px; padding: .55rem .6rem; background: var(--paper); }
.ws-stack li strong { display: block; font-size: .85rem; }
.ws-stack li small { color: var(--dim); font-size: .72rem; }
.ws-stack li p { font-size: .8rem; color: var(--muted); margin: .3rem 0 0; max-height: 4.5rem; overflow: hidden; }
.ws-stack__row { display: flex; justify-content: space-between; gap: .4rem; align-items: start; }

/* menus */
.ws-menu { position: fixed; z-index: 60; min-width: 13rem; background: var(--panel-strong); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: .3rem; }
.ws-menu button { display: flex; width: 100%; gap: .55rem; align-items: center; text-align: left; font: inherit; font-size: .86rem; background: none; border: 0; color: var(--ink); padding: .5rem .6rem; border-radius: var(--r-sm); cursor: pointer; }
.ws-menu button:hover, .ws-menu button:focus-visible { background: color-mix(in srgb, var(--ink) 8%, transparent); outline: none; }
.ws-menu hr { border: 0; border-top: 1px solid var(--line-soft); margin: .3rem .35rem; }
.ws-menu img { width: 20px; height: 20px; border-radius: 50%; }
/* Line icons take the same 20px slot as agent pictures, so every label starts in one column. */
.ws-menu button > svg:first-child { box-sizing: content-box; padding: 0 1.5px; }
.ws-menu__slot { flex: none; width: 20px; height: 20px; }
.ws-menu .danger { color: var(--red); }
.ws-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; }
.ws-toast { position: fixed; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 2rem); background: var(--panel-strong); color: var(--ink); border: 1px solid var(--line); padding: .6rem 1rem; border-radius: var(--r-lg); box-shadow: var(--shadow-2); z-index: 70; font-size: .86rem; line-height: 1.4; }

.ws-plus { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.ws-plus:hover, .ws-plus[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.ws-attachments { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .45rem; }
.ws-attachment { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: .2rem .25rem .2rem .5rem; max-width: 16rem; }
.ws-attachment span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-attachment img { width: 28px; height: 28px; object-fit: cover; border-radius: 8px; }
.ws-attachment[data-state="uploading"] { opacity: .6; }
.ws-image-options { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .45rem; font-size: .8rem; color: var(--muted); background: var(--accent-surface); border: 1px solid var(--line); border-radius: 9px; padding: .45rem .6rem; }
.ws-image-options select { font: inherit; font-size: .8rem; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: .2rem .3rem; max-width: 16rem; }
.ws-msg__files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.ws-msg__files img { width: 7rem; height: 7rem; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); }
.ws-msg__files a { font-size: .78rem; color: var(--cyan); }
.ws-origin { opacity: .62; }
.ws-origin-note { max-width: 52rem; width: 100%; margin: 0 auto; font-size: .78rem; color: var(--dim); border-top: 1px dashed var(--line); padding-top: .5rem; }
.ws.drop-target .ws-main { outline: 2px dashed var(--accent); outline-offset: -6px; }

.ws-nav__foot { border-top: 1px solid var(--line); padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: .4rem; }
.ws-nav__links { display: flex; gap: .8rem; flex-wrap: wrap; }
.ws-link { font: inherit; font-size: .82rem; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.ws-link:hover { color: var(--ink); text-decoration: underline; }
.ws-usage { font-size: .75rem; color: var(--dim); text-decoration: none; }
.ws-results { list-style: none; margin: 0; padding: 0 .2rem; }
.ws-results li { border-bottom: 1px solid var(--line); }
.ws-results button.ws-result { width: 100%; text-align: left; background: none; border: 0; color: var(--ink); font: inherit; padding: .5rem; cursor: pointer; display: block; }
.ws-results button.ws-result:hover { background: var(--panel-strong); }
.ws-results small { display: block; color: var(--dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.ws-results span { display: block; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; }
.ws-result-row { display: flex; align-items: start; }
.ws-result-row .ws-icon { margin-top: .3rem; }
.ws-project { width: 100%; margin: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.ws-project section { border: 1px solid var(--line); border-radius: 9px; padding: .9rem 1rem; background: var(--panel); }
.ws-project h2 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 0 0 .6rem; display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.ws-project textarea, .ws-dialog textarea, .ws-dialog input[type="text"], .ws-dialog input[type="url"], .ws-project input { width: 100%; font: inherit; font-size: .9rem; padding: .55rem .65rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; }
.ws-pulse h3 { font-size: .8rem; color: var(--accent-muted); margin: .7rem 0 .25rem; }
.ws-pulse ul { margin: 0; padding-left: 1.1rem; }
.ws-pulse li { margin: .2rem 0; font-size: .9rem; }
.ws-pulse a { font-size: .72rem; color: var(--cyan); margin-left: .35rem; cursor: pointer; }
.ws-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.ws-list li { display: flex; justify-content: space-between; gap: .6rem; align-items: center; font-size: .88rem; }
.ws-list button.ws-linkish { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem; background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; text-align: left; padding: 0; }
.ws-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.ws-dialog { width: min(40rem, 94vw); max-height: 86vh; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1rem 1.1rem 1.1rem; box-shadow: var(--shadow-3); }
.ws-dialog::backdrop { background: var(--overlay); }
.ws-dialog:focus, dialog:focus { outline: none; }
@media (max-width: 600px) {
  .ws-dialog:not(.ws-dialog--confirm) { width: 100%; max-width: 100%; margin: auto 0 0; max-height: calc(100dvh - max(1.5rem, env(safe-area-inset-top, 0px) + .75rem)); border-width: 1px 0 0;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .ws-dialog:not(.ws-dialog--confirm)[open] { animation: ws-sheet-rise var(--dur-drawer) var(--ease-out); }
  /* A grab handle: the sheet closes with a swipe down from anywhere on it (workspace.js). */
  .ws-dialog:not(.ws-dialog--confirm)::before { content: ""; display: block; width: 36px; height: 4px; margin: -.35rem auto .65rem;
    border-radius: 999px; background: var(--line-strong, var(--line)); }
  /* Swiped up, a sheet fills the screen, however little it holds (workspace.js). */
  .ws-dialog[data-full]:not(.ws-dialog--confirm) { height: 100dvh; max-height: 100dvh; border-radius: 0; border-top-color: transparent;
    padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }
}
/* While its top edge stretches (elastic.js), a dialog shows past its box. */
.ws-dialog.is-elastic, .ws-sheet.is-elastic { overflow: visible; }
@keyframes ws-sheet-rise { from { transform: translateY(100%); } to { transform: none; } }
.ws-dialog__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.ws-dialog h2 { font-size: 1.05rem; margin: 0; }
.ws-dialog h3 { font-size: .86rem; font-weight: 600; color: var(--dim); margin: 1rem 0 .4rem; }
.ws-check { display: flex; gap: .5rem; align-items: start; font-size: .88rem; margin: .25rem 0; }
.ws-fact { display: flex; gap: .5rem; align-items: start; border-bottom: 1px solid var(--line); padding: .4rem 0; font-size: .88rem; }
.ws-fact p { margin: 0; flex: 1; }
.ws-fact small { display: block; color: var(--dim); font-size: .72rem; }

/* "/" command palette */
/* Never squeezed by a long conversation above it (the column shrank it, and the Plan Dock's lines with it: their letters
   were cut at the top and bottom, 2026-10-15): the messages give way instead. */
.ws-composer { position: relative; flex: none; }
.ws-palette { list-style: none; margin: 0 auto .4rem; padding: .3rem; max-height: 16rem; overflow-y: auto; background: var(--panel-strong); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); }
.ws-palette li { display: flex; gap: .6rem; align-items: baseline; padding: .45rem .6rem; border-radius: 9px; cursor: pointer; font-size: .88rem; }
.ws-palette li[aria-selected="true"], .ws-palette li:hover { background: var(--accent-surface); }
.ws-palette code { color: var(--accent); font-family: inherit; font-weight: 600; white-space: nowrap; }
.ws-palette span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* live answers, regenerating, approvals, archived containers */
/* The typing cursor sits at the end of the words being written (alone only while nothing is). */
.ws-live .ws-msg__body:empty::after, .ws-live .ws-msg__body > :is(p, h1, h2, h3, h4):last-child::after,
.ws-live .ws-msg__body > :is(ul, ol):last-child > li:last-child::after { content: "▍"; color: var(--agent, var(--accent)); animation: ws-blink 1s steps(2) infinite; }
@keyframes ws-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ws-live .ws-msg__body::after, .ws-live .ws-msg__body > *::after, .ws-live .ws-msg__body li::after { animation: none; } }
.ws-replacing { opacity: .45; }
/* A call the answer paused on: what would run, and Approve or Deny. */
.ws-approval { box-sizing: border-box; width: 100%; max-width: 52rem; margin: 0 auto; padding: .85rem 1rem; display: grid; gap: .65rem; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 12px; background: var(--panel); }
.ws-approval__head { display: flex; gap: .7rem; align-items: flex-start; }
.ws-approval__icon { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--accent-surface); color: var(--accent); }
.ws-approval__text { display: grid; gap: .2rem; min-width: 0; padding-top: .1rem; }
.ws-approval__text strong { font-size: .93rem; overflow-wrap: anywhere; }
.ws-approval__text small { color: var(--muted); font-size: .8rem; }
.ws-approval__args { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .78rem; max-height: 12rem; overflow-y: auto; background: var(--paper); padding: .55rem .65rem; border-radius: 9px; border: 1px solid var(--line); }
.ws-approval__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.ws-approval__actions .ws-button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 7.5rem; }
/* A card's two choices read as a matched pair: the same width, and the plain one's edge as clear as the filled one's. */
:is(.ws-approval__actions, .ws-stdin__form) .ws-button:not(.ws-button--primary) { border-color: color-mix(in srgb, var(--muted) 55%, var(--line)); }
.ws-approval__status { margin: 0; font-size: .84rem; color: var(--muted); }
.ws-approval[data-state="approved"] .ws-approval__status { color: var(--ok); }
/* A program waiting for input (the approval card's frame): its output, then one row with the field, Send and Stop. */
.ws-stdin__out { font-family: var(--font-mono); }
.ws-stdin__err { color: var(--danger); }
.ws-stdin__typed { color: var(--accent); font-weight: 700; }
.ws-stdin__form { display: flex; gap: .5rem; align-items: stretch; min-width: 0; }
.ws-stdin__form .ws-button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; flex: none; min-width: 5.6rem; }
.ws-stdin__field { flex: 1 1 auto; min-width: 0; font: inherit; font-family: var(--font-mono); font-size: .9rem; padding: .5rem .65rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; }
.ws-stdin__field:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.ws-stdin__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.ws-stdin__foot .ws-approval__status { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ws-stdin__foot .ws-button { display: inline-flex; align-items: center; gap: .35rem; flex: none; }
.ws-stdin__note { color: var(--muted); font-size: .78rem; min-width: 0; }
@media (max-width: 480px) { .ws-stdin__form .ws-button { padding-inline: .6rem; } }
.ws-archived-row { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; font-size: .86rem; min-width: 0; }
.ws-archived-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* image gallery */
.ws-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); gap: .5rem; }
.ws-gallery button { padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); cursor: zoom-in; aspect-ratio: 1; overflow: hidden; }
.ws-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-dialog:has(.ws-gallery) { width: min(60rem, 94vw); }
.ws-msg__body .ws-zoomable { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; max-width: 100%; }
.ws-msg__body .ws-zoomable img { display: block; }

/* image viewer: pan, zoom, save, share */
.ws-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #020611; color: #eef2fb; }
.ws-lightbox::backdrop { background: #020611; }
/* Top bar, image, bottom bar stacked: nothing overlaps, so the bars' buttons
   always get the tap (the stage used to sit over most of the top bar). */
.ws-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
/* The one column is the screen's width: a long prompt in the caption or a
   large image used to widen it past the screen and push everything off. */
.ws-lightbox[open] > * { min-width: 0; }
.ws-lightbox__stage { position: relative; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; display: grid; place-items: center; }
.ws-lightbox__stage.dragging { cursor: grabbing; }
.ws-lightbox__stage img { max-width: 100%; max-height: 100%; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; will-change: transform; }
.ws-lightbox__bar { position: relative; z-index: 2; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; padding: .6rem max(1rem, env(safe-area-inset-right, 0px)) .6rem max(1rem, env(safe-area-inset-left, 0px)); }
.ws-lightbox__bar--top { padding-top: max(.6rem, env(safe-area-inset-top, 0px)); }
.ws-lightbox__bar--bottom { padding-bottom: max(.6rem, env(safe-area-inset-bottom, 0px)); justify-content: center; }
.ws-lightbox__bar p { flex: 1; min-width: 0; margin: 0; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Viewer controls are plain icons on the dark ground: no boxes, a soft circle on hover. */
.ws-lightbox button { font: inherit; font-size: .82rem; color: inherit; background: none; border: 0; border-radius: 999px; cursor: pointer; }
.ws-lightbox button:hover, .ws-lightbox button:focus-visible { background: #ffffff1f; }
.ws-import-prompt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .78rem; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: .6rem; max-height: 12rem; overflow-y: auto; }
.ws-setting { align-items: flex-start; gap: .6rem; padding: .45rem 0; }
.ws-setting span { display: grid; gap: .15rem; }
.ws-setting small { font-size: .78rem; }

/* long-press menus replace the browser's on touch */
.ws-nav button, .ws-nav summary, .ws-menu, .ws-msg, .ws-saved, .ws-gallery { -webkit-touch-callout: none; }
.ws-nav button, .ws-nav summary, .ws-menu { -webkit-user-select: none; user-select: none; }
@media (pointer: coarse) { .ws-msg { -webkit-user-select: none; user-select: none; } }
/* The app's own chrome isn't text to select: a long press on the sidebar, a heading, a tab, a button or a row never starts
   a selection or its callout (the owner found the sidebar's headings selectable, 2026-10-14). What you read and write
   stays selectable: inputs, the editor, code, a message's text on a computer, a plan step's detail, the Black Box's ids. */
.ws-rail, .ws-side, .ws-bar, .ws-context__top, .ws-panel__label, .ws-menu, .ws-sheet__head, .ws-dialog__head, .ws-modechips, .ws-msg__head,
.ws-msg__foot, .ws-setlabel, .ws-sheet__label, .ws-plan__head, .ws-step__head, .ws-addtiles, .ws-addrows, .ws-choices, .ws-pickgroup, .ws-panel-empty,
.bb-tabs, .ws-tiles, .bb-run__head, .bb-steps, button, [role="tab"], [role="menuitem"], [role="radio"], [role="switch"], label, summary {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"], .ws-editor, pre, code, .ws-step__body, .bb-mono, .bb-event__detail {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* A menu shows every item: as tall as the screen allows; taller than that, its rows tighten (placeMenu) before it
   would ever scroll (only a tiny window still scrolls one). */
.ws-menu { max-height: calc(100dvh - 16px); overflow-y: auto; }
/* Over a dialog the menu is a popover in the top layer (hostMenu): placed where it's put, not centered. */
.ws-menu[popover] { inset: auto; margin: 0; color: var(--ink); }
.ws-menu--dense button { padding-top: .3rem; padding-bottom: .3rem; }
.ws-menu--dense hr { margin: .15rem 0; }
.ws-pin { margin-left: auto; font-size: .7rem; }
.ws-drop { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-surface); }
[draggable="true"] { cursor: grab; }

/* Saved and readable links */
.ws-saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ws-saved { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); min-width: 0; }
.ws-saved--missing { opacity: .55; }
.ws-saved__thumb { flex: 0 0 4.5rem; height: 4.5rem; padding: 0; border: 0; border-radius: 9px; overflow: hidden; cursor: zoom-in; background: var(--paper); }
.ws-saved__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-saved__body { flex: 1; min-width: 0; display: grid; gap: .2rem; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ws-saved__body span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: .88rem; }
.ws-saved__body strong { overflow-wrap: anywhere; }
.ws-linkrow .ws-linkish { display: grid; gap: .15rem; text-align: left; min-width: 0; }
.ws-linkrow small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* send: a round arrow in the accent color */
.ws-send { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer; transition: transform .12s ease, opacity .12s ease; }
.ws-send:hover:not(:disabled) { transform: translateY(-1px); }
.ws-send:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ws-send:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) { .ws-send { transition: none; } }
.ws-send.is-stop { background: var(--danger); color: #fff; }
.ws-queue { display: grid; gap: .3rem; margin-bottom: .45rem; }
.ws-queued { display: flex; gap: .5rem; align-items: center; padding: .35rem .55rem; border: 1px dashed var(--line); border-radius: 9px; font-size: .84rem; min-width: 0; }
.ws-queued > span:first-child { white-space: nowrap; font-size: .75rem; }
.ws-queued__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: start; cursor: text; }
.ws-queued__edit { flex: 1; min-width: 0; min-height: 1.6rem; max-height: 10rem; padding: .2rem .4rem; border: 1px solid var(--accent); border-radius: 6px;
  background: var(--paper); color: var(--ink); font: inherit; resize: none; outline: none; }
.ws-aspect { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ws-aspect__chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.ws-aspect__chip { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .76rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: .2rem .45rem; cursor: pointer; min-height: 1.9rem; }
.ws-aspect__chip[aria-checked="true"] { border-color: var(--accent); background: var(--accent-surface); }
.ws-aspect__box { display: inline-block; border: 1.5px solid currentColor; border-radius: 8px; opacity: .85; }
.ws-aspect__chip[aria-checked="true"] .ws-aspect__box { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 25%, transparent); }
.ws-quality { display: flex; flex-wrap: wrap; gap: .35rem; width: 100%; }
.ws-quality__chip { display: grid; gap: .05rem; text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: .3rem .55rem; cursor: pointer; min-width: 0; flex: 1 1 8.5rem; max-width: 14rem; }
.ws-quality__chip[aria-checked="true"] { border-color: var(--accent); background: var(--accent-surface); }
.ws-quality__top { display: flex; align-items: baseline; gap: .4rem; font-size: .8rem; }
.ws-quality__cost { margin-left: auto; font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-quality__model { font-size: .7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) {
  .ws-composer__spacer { min-width: 0; }
  .ws-send { flex: 0 0 auto; }
}
.ws-details p { margin: .25rem 0; } .ws-details small { color: var(--muted); font-size: .78rem; }
.ws-facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; margin: .8rem 0 0; font-size: .88rem; }
.ws-facts dt { color: var(--muted); } .ws-facts dd { margin: 0; overflow-wrap: anywhere; }

/* The Workspace is full-screen: the site header is hidden; the sidebar's
   back link returns to the site's home. */
.workspace-page { --header-h: 0px; }
.workspace-page .global-shell__header { display: none !important; }

/* icon-first controls */
.ws-iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; flex: 0 0 auto; }
.ws-iconbtn:hover, .ws-iconbtn:focus-visible, .ws-iconbtn[aria-expanded="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ws-iconbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ws-iconbtn:disabled { opacity: .45; cursor: default; background: none; }
.ws-toggle--icon { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0; }
.ws-toggle--icon[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-surface); }

/* sidebar */
.ws-nav__head { display: flex; align-items: center; gap: .25rem; padding: .8rem .7rem .5rem .9rem; }
.ws-nav__brand { display: flex; align-items: center; gap: .55rem; margin-right: auto; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.02rem; min-width: 0; }
.ws-nav__brand img { width: 22px; height: 22px; }
.ws-nav .ws-search { padding: 0 .8rem .5rem; }
.ws-nav__primary { display: grid; padding: .1rem .45rem .4rem; }
.ws-nav__item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .5rem .5rem; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: .92rem; cursor: pointer; text-align: left; }
.ws-nav__item svg { color: var(--muted); }
.ws-nav__item:hover, .ws-nav__item:focus-visible, .ws-nav__item[aria-current="page"] { background: var(--accent-surface); }
.ws-nav__foot { border-top: 1px solid var(--line); padding: .45rem .7rem calc(.6rem + env(safe-area-inset-bottom, 0px)); display: grid; gap: .35rem; }
.ws-nav__back { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .8rem; text-decoration: none; padding: .25rem .2rem; width: max-content; }
.ws-nav__back svg { width: 15px; height: 15px; }
.ws-nav__back:hover, .ws-nav__back:focus-visible { color: var(--ink); }
.ws-nav__bottom { display: flex; align-items: center; justify-content: space-between; }
.ws-new { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--accent); cursor: pointer; }
.ws-new:hover, .ws-new:focus-visible { border-color: var(--accent); background: var(--accent-surface); }
.ws-me { padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer; width: 2.4rem; height: 2.4rem; overflow: hidden; display: grid; place-items: center; }
.ws-me:hover, .ws-me:focus-visible { border-color: var(--accent); }
.ws-me .ws-msg__avatar { width: 100%; height: 100%; margin: 0; border-radius: 50%; }

/* settings */
.ws-profile { display: flex; align-items: center; gap: .75rem; padding: .2rem 0 .8rem; border-bottom: 1px solid var(--line); margin-bottom: .4rem; }
.ws-profile .ws-msg__avatar { width: 2.8rem; height: 2.8rem; border-radius: 50%; margin: 0; }
.ws-profile div { display: grid; gap: .1rem; min-width: 0; }
.ws-setting-row { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .65rem .3rem; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.ws-setting-row > span { flex: 1; display: grid; gap: .1rem; min-width: 0; }
.ws-setting-row small { font-size: .78rem; }
.ws-setting-row > svg { color: var(--muted); flex: 0 0 auto; }
.ws-setting-row:hover, .ws-setting-row:focus-visible { background: var(--accent-surface); }
/* A choice among rows (the Haptics Lab): the chosen one in the accent color. */
.ws-setting-row[role="radio"][aria-checked="true"] > svg { color: var(--accent); }
.ws-setting-row[role="radio"][aria-checked="true"] strong { color: var(--accent); }

/* image viewer: icon buttons */
.ws-lightbox button { display: inline-grid; place-items: center; width: 2.75rem; min-width: 0; height: 2.75rem; padding: 0; flex: none; }
/* No tap flash on touch; the drawer opens instantly. */
.workspace-page, .workspace-page * { -webkit-tap-highlight-color: transparent; }
.ws-scrim { animation: none; transition: none; }


/* ---- sidebar rows (one shape for every kind) ---- */
.ws-tree .ws-tree__head { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 1rem .2rem .3rem .5rem; display: flex; justify-content: space-between; align-items: center; min-height: 1.6rem; }
.ws-tree .ws-tree__head .ws-iconbtn { width: 1.7rem; height: 1.7rem; }
.ws-tree__toggle { width: calc(100% - .7rem); background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }
.ws-tree__toggle svg { transition: transform .15s ease; }
.ws-tree__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.ws-tree__list { list-style: none; margin: 0; padding: 0; }
.ws-tree__empty { padding: .3rem .5rem; font-size: .84rem; }
.ws-tree .ws-row { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 2.2rem; padding: .35rem .5rem; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; min-width: 0; box-shadow: none; }
.ws-tree .ws-row:hover, .ws-tree .ws-row:focus-visible { background: var(--panel-strong); }
.ws-tree .ws-row[aria-current="page"] { background: var(--accent-surface); }
.ws-row__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-row--add { color: var(--muted) !important; font-size: .82rem !important; }
.ws-row--add svg { color: var(--muted); }
.ws-row--static { cursor: default; }
.ws-cicon { flex: 0 0 auto; }
.ws-pin { flex: 0 0 auto; color: var(--accent); opacity: .75; }
.ws-chev { display: inline-grid; place-items: center; width: .9rem; color: var(--dim); flex: 0 0 auto; }
.ws-chev svg { transition: transform .15s ease; }
.ws-row[aria-expanded="true"] .ws-chev svg { transform: rotate(90deg); }
.ws-folder__head { display: flex; align-items: center; }
.ws-folder__head .ws-row { flex: 1; }
.ws-folder__more { width: 1.9rem; height: 1.9rem; opacity: .7; }
.ws-folder__more:hover, .ws-folder__more:focus-visible { opacity: 1; }
.ws-folder__body { margin-left: 1.15rem !important; padding-left: .4rem !important; border-left: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .ws-chev svg, .ws-tree__toggle svg { transition: none; } }

/* bottom of the sidebar: leaving the Workspace is a small, separate link */
.ws-nav__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ws-nav__foot { border-top: 1px solid var(--line); }

/* menus with icons */
.ws-menu button svg { color: var(--muted); flex: 0 0 auto; }
.ws-menu .danger svg { color: var(--red); }
/* A group's title inside a menu, and the tick on the chosen one of a set. */
.ws-menu__head { margin: .45rem .7rem .2rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ws-menu__tick { display: grid; place-items: center; margin-left: auto; color: var(--accent); }
.ws-menu__tick svg { display: block; }
/* "Regenerate ›" and its chooser: a model and an agent, each a filled box when chosen, then Confirm. */
.ws-menu .ws-menu__more { margin-left: auto; display: inline-flex; }
.ws-menu .ws-regen__head { margin: .35rem .6rem .15rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ws-menu .ws-regen__choice > span:nth-last-child(2) { flex: 1 1 auto; }
.ws-menu .ws-regen__box { flex: 0 0 auto; display: inline-grid; place-items: center; width: 18px; height: 18px; box-sizing: border-box;
  border: 1.5px solid var(--line); border-radius: 5px; margin-left: auto; }
.ws-menu .ws-regen__box.is-on { background: var(--accent); border-color: var(--accent); }
.ws-menu button .ws-regen__box.is-on svg { color: var(--accent-ink); }
.ws-menu .ws-regen__confirm { justify-content: center; font-weight: 600; background: var(--accent); color: var(--accent-ink); margin-top: .1rem; }
.ws-menu .ws-regen__confirm:hover, .ws-menu .ws-regen__confirm:focus-visible { background: var(--accent-hover); }
.ws-menu button.ws-regen__confirm svg { color: inherit; }

/* edit library / project */
.ws-edit__name { display: flex; gap: .5rem; align-items: center; }
.ws-edit__name input { flex: 1; font: inherit; padding: .6rem .7rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.ws-edit__icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; flex: 0 0 auto; }
.ws-edit__icon[aria-expanded="true"], .ws-edit__icon:hover { border-color: var(--accent); }
.ws-picker { margin-top: .6rem; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-strong); }
.ws-picker__colors { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .6rem; }
.ws-swatch { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid transparent; background: var(--swatch); color: #0b101b; display: grid; place-items: center; cursor: pointer; }
.ws-swatch[aria-checked="true"] { border-color: var(--ink); }
.ws-picker__icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(2.5rem, 100%), 1fr)); gap: .2rem; }
.ws-picker__icon { display: grid; place-items: center; height: 2.5rem; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--ink); cursor: pointer; }
.ws-picker__icon:hover { background: var(--accent-surface); }
.ws-picker__icon[aria-checked="true"] { border-color: var(--accent); background: var(--accent-surface); color: var(--accent); }
.ws-modes { display: grid; gap: .5rem; }
.ws-mode { display: grid; gap: .25rem; text-align: left; font: inherit; color: var(--ink); background: none; border: 1px solid var(--line); border-radius: 10px; padding: .75rem .9rem; cursor: pointer; }
.ws-mode span { color: var(--muted); font-size: .84rem; }
.ws-mode[aria-checked="true"] { border-color: var(--accent); background: var(--accent-surface); }
/* A choice with a tick (Tool Access): its words on the left, the tick centered on the right. */
.ws-mode--check { grid-template-columns: 1fr auto; align-items: center; column-gap: .75rem; }
.ws-mode > .ws-mode__text { display: grid; gap: .25rem; color: var(--ink); font-size: inherit; }
.ws-mode__text span { color: var(--muted); font-size: .84rem; }
.ws-mode > .ws-mode__tick { display: grid; place-items: center; width: 22px; height: 22px; color: var(--accent); }
.ws-mode__tick svg { display: block; }
.ws-modes + .ws-setnote { margin-top: .6rem; }
.ws-row-actions { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: .8rem; }
.ws-row-actions input { flex: 1; min-width: 10rem; font: inherit; padding: .45rem .6rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
.ws-row-actions .ws-button, .ws-info__actions .ws-button { display: inline-flex; align-items: center; gap: .4rem; }
.ws-scoped-memory .ws-fact { display: flex; gap: .5rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: .3rem 0; }
.ws-scoped-memory .ws-fact p { margin: 0; font-size: .88rem; }

/* settings sub-pages, account, plugins */
.ws-back { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .84rem; color: var(--muted); background: none; border: 0; padding: .2rem 0; margin-bottom: .5rem; cursor: pointer; }
.ws-back:hover, .ws-back:focus-visible { color: var(--ink); }
.ws-setting-row--danger, .ws-setting-row--danger svg { color: var(--red) !important; }
.ws-plugins { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ws-plugin { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.ws-plugin__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 8px; background: var(--accent-surface); color: var(--accent); flex: 0 0 auto; }
.ws-plugin > div { flex: 1; display: grid; gap: .2rem; min-width: 0; }
.ws-plugin code { font-size: .74rem; color: var(--accent); }
/* Switches: the knob's size and travel come from the track's, so it sits centered at both ends. */
.ws-switch input, .ws-setting input[role="switch"] { --w: 2.5rem; --h: 1.5rem; --gap: .1875rem; box-sizing: border-box; appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: var(--w); min-width: var(--w); height: var(--h); margin: 0; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 20%, transparent); position: relative; vertical-align: middle; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
.ws-switch input::after, .ws-setting input[role="switch"]::after { content: ""; position: absolute; top: 50%; left: var(--gap); width: calc(var(--h) - 2 * var(--gap)); height: calc(var(--h) - 2 * var(--gap)); border-radius: 50%; background: var(--knob); box-shadow: var(--knob-shadow); transform: translateY(-50%); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) ease; }
.ws-switch input:checked, .ws-setting input[role="switch"]:checked { background: var(--accent); }
.ws-switch input:checked::after, .ws-setting input[role="switch"]:checked::after { transform: translate(calc(var(--w) - var(--h)), -50%); background: var(--knob); }
.ws-switch input:focus-visible, .ws-setting input[role="switch"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ws-file { display: inline-flex; align-items: center; gap: .35rem; }
/* A file in a message: what it is, its size, a warning when it needs one, and a download. */
.ws-filecard { display: inline-flex; align-items: center; gap: .65rem; max-width: min(100%, 26rem); padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); color: var(--ink); text-decoration: none; }
.ws-filecard:hover, .ws-filecard:focus-visible { background: var(--panel-strong); }
.ws-filecard__icon { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 9px; background: var(--paper); color: var(--accent); }
.ws-filecard__main { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.ws-filecard__main strong { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-filecard__main small { color: var(--dim); font-size: .76rem; }
.ws-filecard > svg:last-child { flex: none; color: var(--muted); }
.ws-filecard__warn { flex: none; display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .45rem; border-radius: 999px; font-size: .72rem;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.ws-filecard.is-warned .ws-filecard__icon { color: var(--warn); }
.ws-yourfiles__list { display: grid; gap: .5rem; margin-bottom: 1.2rem; }
.ws-yourfiles__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: .5rem; }
.ws-yourfiles__row .ws-filecard { grid-row: 1; max-width: none; }
.ws-yourfiles__row small { grid-row: 2; grid-column: 1; padding: .2rem .2rem 0; }
.ws-yourfiles__row .ws-iconbtn { grid-row: 1; grid-column: 2; }
.ws-attachment.is-warned { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
/* confirmations, archived and trash */
.ws-confirm__text { margin: 0 0 .4rem; line-height: 1.5; }
.ws-button--danger { background: var(--red); border-color: var(--red); color: #fff; }
.ws-button--danger:hover, .ws-button--danger:focus-visible { filter: brightness(1.08); }
/* A fold's row keeps the heading's spacing itself, so its name, ⋯ and chevron all center on one middle. */
.ws-tree__fold { display: flex; align-items: center; justify-content: space-between; gap: .2rem; margin: 1rem .2rem .3rem .5rem; min-height: 1.6rem; }
.ws-tree .ws-tree__fold > .ws-tree__head { margin: 0; }
.ws-tree__fold .ws-tree__toggle { flex: 1; min-width: 0; }
.ws-tree__chev { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.6rem; color: var(--dim); }
.ws-tree__chev svg { display: block; transition: transform .15s ease; }
.ws-tree__toggle[aria-expanded="true"] .ws-tree__chev svg, .ws-tree__chevbtn[aria-expanded="true"] .ws-tree__chev svg { transform: rotate(90deg); }
.ws-tree__chevbtn { flex: none; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.ws-row__detail { flex: 0 0 auto; font-size: .72rem; }
.ws-iconbtn svg, .ws-row svg { display: block; }
.ws-folder__head { align-items: center; }
.ws-folder__more { align-self: center; }
/* unsaved-changes bar and save confirmation */
.ws-savebar { position: sticky; bottom: -1px; display: flex; align-items: center; gap: .5rem; margin: 1rem -.2rem -.2rem; padding: .7rem .8rem; border: 1px solid var(--accent); border-radius: 10px; background: var(--panel-strong); box-shadow: 0 -8px 24px var(--shadow-color); }
.ws-savebar > span { flex: 1; font-size: .88rem; }
.ws-savebar .ws-button { display: inline-flex; align-items: center; gap: .35rem; }
.ws-saved-notice { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .45rem; margin-bottom: .6rem; padding: .55rem .8rem; border-radius: 8px; background: color-mix(in srgb, var(--ok) 18%, var(--panel)); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent); font-weight: 600; }
.ws-fact--new p { color: var(--accent); }
.ws-dialog--confirm { width: min(26rem, 92vw); }
/* Installed app on iPhone/iPad: the status bar overlays the page, so the
   Workspace keeps clear of it (and of notches and the home bar). */
.ws { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); height: 100dvh; }


/* side panel: files and images */
.ws-scope-note { display: flex; gap: .4rem; align-items: center; margin: .2rem 0 .8rem; }
.ws-lastrun { margin-bottom: .6rem; }
.ws-lastrun h3, .ws-context h3 { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: .8rem 0 .3rem; }
.ws-changes { list-style: none; margin: .3rem 0 0; padding: 0; }
.ws-change { display: flex; align-items: center; gap: .45rem; width: 100%; min-width: 0; padding: .3rem .35rem; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: .84rem; text-align: left; cursor: pointer; }
.ws-change:hover, .ws-change:focus-visible { background: var(--panel-strong); }
.ws-change__path { font-family: var(--font-mono); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ws-badge { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 8px; font-size: .66rem; font-weight: 800; flex: 0 0 auto; font-family: var(--font-mono); }
.ws-badge--added { background: var(--diff-add-bg); color: var(--diff-add); }
.ws-badge--modified { background: color-mix(in srgb, var(--diff-mod) 16%, transparent); color: var(--diff-mod); }
.ws-badge--deleted { background: var(--diff-del-bg); color: var(--diff-del); }
.ws-filetree { list-style: none; margin: 0; padding: 0; }
.ws-filetree .ws-filetree { margin-left: .75rem; padding-left: .45rem; border-left: 1px solid var(--line); }
.ws-filetree summary { display: flex; align-items: center; gap: .35rem; padding: .28rem .35rem; border-radius: 8px; cursor: pointer; font-size: .85rem; list-style: none; color: var(--ink); }
.ws-filetree summary::-webkit-details-marker { display: none; }
.ws-filetree summary:hover { background: var(--panel-strong); }
.ws-filetree summary svg { color: var(--muted); flex: 0 0 auto; }
.ws-filerow { display: flex; align-items: center; gap: .4rem; width: 100%; min-width: 0; padding: .28rem .35rem; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: .85rem; text-align: left; cursor: pointer; }
.ws-filerow:hover, .ws-filerow:focus-visible { background: var(--panel-strong); }
.ws-filerow svg { color: var(--muted); flex: 0 0 auto; }
.ws-filerow__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: .8rem; }
.ws-filerow--deleted .ws-filerow__name { text-decoration: line-through; color: var(--muted); }
.ws-gallery--panel { grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr)); }
.ws-chip--files { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: none; font: inherit; font-size: .72rem; }

/* diffs */
.ws-diff { border: 1px solid var(--code-line); border-radius: 10px; overflow-x: auto; background: var(--code-bg); font-family: var(--font-mono); font-size: .76rem; line-height: 1.55; }
.ws-diff__stat { display: flex; gap: .6rem; padding: .35rem .7rem; border-bottom: 1px solid var(--code-line); background: var(--code-head); font-weight: 700; }
.ws-diff__plus { color: var(--diff-add); } .ws-diff__minus { color: var(--diff-del); }
.ws-diff__hunk { padding: .2rem .7rem; color: var(--info); background: color-mix(in srgb, var(--info) 9%, var(--code-bg)); }
.ws-diff__line { display: grid; grid-template-columns: 2.6rem 2.6rem 1.1rem minmax(max-content, 1fr); white-space: pre; color: var(--code-ink); }
/* Wrap Long Lines (Settings > Appearance, on this device): code, files and changes wrap at the screen's edge instead of
   scrolling sideways. */
:root[data-wrap="on"] :is(.ws-msg__body pre, .ws-msg__body pre code, .ws-codeblock pre) { white-space: pre-wrap; overflow-wrap: anywhere; }
:root[data-wrap="on"] .ws-diff__line { grid-template-columns: 2.6rem 2.6rem 1.1rem minmax(0, 1fr); white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-diff__num { text-align: right; padding-right: .5rem; color: var(--code-dim); user-select: none; }
.ws-diff__sign { user-select: none; text-align: center; }
.ws-diff__line--add { background: var(--diff-add-bg); } .ws-diff__line--add .ws-diff__sign, .ws-diff__line--add .ws-diff__text { color: var(--diff-add); }
.ws-diff__line--del { background: var(--diff-del-bg); } .ws-diff__line--del .ws-diff__sign, .ws-diff__line--del .ws-diff__text { color: var(--diff-del); }
.ws-run { margin: 0 0 1rem; }
.ws-run__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.ws-tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: .7rem; }
.ws-tabs button { font: inherit; font-size: .85rem; padding: .45rem .7rem; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; }
.ws-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.ws-tabs .ws-tabs__action { margin-left: auto; align-self: center; width: 2rem; height: 2rem; }
.ws-dialog:has(.ws-diff) { width: min(56rem, 96vw); }

/* Files and Images pages */
.ws-page-tools { display: flex; justify-content: flex-end; margin-bottom: .8rem; }
.ws-segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; display: inline-flex; gap: .125rem; border: 1px solid var(--line); border-radius: var(--r-md); padding: .1875rem; background: var(--sunken); }
.ws-segmented button { flex: none; white-space: nowrap; font: inherit; font-size: .82rem; font-weight: 550; padding: .35rem .8rem; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.ws-segmented button:hover { color: var(--ink); }
.ws-segmented button[aria-checked="true"], .ws-segmented button[aria-selected="true"] { background: var(--panel-strong); color: var(--ink); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-soft); }
/* A page's own sections (the Store's Plugins, Skills and Agents): across the whole page, each an equal share. */
.ws-segmented--fill { display: flex; width: 100%; }
.ws-segmented--fill button { flex: 1 1 0; min-width: max-content; padding-inline: .6rem; }
.ws-page-tools:has(> .ws-segmented--fill) { width: 100%; }
.ws-group { margin-bottom: 1.4rem; }
.ws-group__head { display: flex; align-items: center; gap: .5rem; font-size: 1rem; margin: 0 0 .5rem; }
.ws-group__head small { margin-left: auto; font-weight: 400; }
.ws-project .ws-group__head { text-transform: none; letter-spacing: 0; font-size: .98rem; color: var(--ink); }
.ws-project .ws-group__head small { font-size: .78rem; letter-spacing: 0; }
.ws-run__open { margin-left: auto; width: 1.9rem; height: 1.9rem; }
.ws-storage { margin: .9rem 0; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: .45rem; }
.ws-storage__row { display: flex; justify-content: space-between; gap: .6rem; }
.ws-storage__bar { height: .45rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.ws-storage__bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.ws-storage__bar span.is-full { background: var(--red); }
.ws-audio { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .3rem .6rem; margin: .5rem 0; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); max-width: 30rem; }
.ws-audio__icon { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--panel-strong); color: var(--accent); }
.ws-audio audio { width: 100%; min-width: 0; height: 2.25rem; color-scheme: dark; }
.ws-audio__text { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; overflow-wrap: anywhere; }
.ws-expired { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: .85rem; margin: .4rem 0; }

/* viewer: one row each. Top: close, position (and the prompt on wide screens), fit when zoomed, info, options.
   Bottom: the image's actions, evenly spaced. Previous and next float at the image's edges. */
.ws-lightbox__bar { flex-wrap: nowrap; }
.ws-lightbox__bar--top { gap: .25rem; }
.ws-lightbox__bar--bottom { gap: clamp(.25rem, 5vw, 1.75rem); }
.ws-lightbox__count { color: var(--code-ink); font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; padding-inline: .35rem; }
.ws-lightbox__navs { display: contents; }
.ws-lightbox__nav { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); background: #0b101b99 !important; backdrop-filter: blur(6px); }
.ws-lightbox__nav:hover, .ws-lightbox__nav:focus-visible { background: #0b101bd9 !important; }
.ws-lightbox__nav--prev { left: max(.6rem, env(safe-area-inset-left, 0px)); }
.ws-lightbox__nav--next { right: max(.6rem, env(safe-area-inset-right, 0px)); }
/* Touch screens swipe between images instead. */
@media (hover: none) and (pointer: coarse) { .ws-lightbox__nav { display: none !important; } }
@media (max-width: 700px) {
  .ws-lightbox__bar--top p { display: none; }
  .ws-lightbox__count { margin-right: auto; }
}
.ws-lightbox .ws-menu { z-index: 5; }

/* tables: words stay whole and a short table fits the screen; a wide one scrolls
   rather than crushing a column below 4rem */
.ws-msg__body th, .ws-msg__body td { overflow-wrap: break-word; word-break: normal; hyphens: manual; min-width: 4rem; }
.ws-msg__body .ws-table table { width: 100%; max-width: none; }
@media (max-width: 600px) { .ws-msg__body th, .ws-msg__body td { padding: .55rem .6rem; } }
.ws-msg__body .ws-table td, .ws-msg__body .ws-table th { max-width: 28rem; }
.ws-lightbox .ws-menu { width: auto; min-width: 13rem; max-width: min(22rem, 92vw); color: var(--ink); }
.ws-lightbox .ws-menu button { display: flex; height: auto; min-width: 0; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 9px; background: none; justify-content: flex-start; font-size: .86rem; color: var(--ink); }
.ws-lightbox .ws-menu button:hover, .ws-lightbox .ws-menu button:focus-visible { background: var(--accent-surface); }
.ws-lightbox .ws-menu .danger { color: var(--red); }

/* search screen: tabs, results, search box at the bottom */
.ws-searchui { width: min(46rem, 100vw); height: min(44rem, 100dvh); max-width: 100vw; max-height: 100dvh; margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; overflow: hidden; }
.ws-searchui:not([open]) { display: none; }
.ws-searchui::backdrop { background: #020611cc; }
.ws-searchui [hidden] { display: none !important; }
/* Search, from the top: the search box; All / Iris Chat / Iris Code and Filters; the filters panel (open beneath them);
   the categories, underlined when chosen; the filters that are on, as chips; then the results, scrolling on their own. */
.ws-searchui__head { position: relative; display: grid; gap: .6rem; padding: .7rem .8rem 0; border-bottom: 1px solid var(--line); }
.ws-searchui:focus, .ws-searchui__tabs:focus { outline: none; }
.ws-searchui__find { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ws-searchui__field { flex: 1; display: flex; align-items: center; gap: .55rem; height: 2.65rem; padding: 0 .85rem; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); min-width: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.ws-searchui__field:focus-within { border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ws-searchui__field input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: .98rem; outline: none; }
.ws-searchui__field input::placeholder { color: var(--dim, var(--muted)); }
.ws-searchui__field input::-webkit-search-cancel-button { display: none; }
.ws-searchui__clear { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--muted) 70%, transparent);
  color: var(--paper); cursor: pointer; flex: 0 0 auto; }
.ws-searchui__close { width: 2.65rem; height: 2.65rem; flex: 0 0 auto; border-radius: 12px; border: 1px solid var(--line) !important; }
/* Where to search, and Filters: one compact row. */
.ws-searchui__moderow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.ws-searchui__mode { display: inline-flex; padding: .18rem; border-radius: 10px; }
.ws-searchui__mode button { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .7rem; border-radius: 8px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.ws-searchui__mode button svg { opacity: .85; }
.ws-searchui__filtersbtn { display: inline-flex; align-items: center; gap: .4rem; height: 2.35rem; padding: 0 .75rem; border: 1px solid var(--line); border-radius: 10px;
  background: none; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.ws-searchui__filtersbtn:hover { color: var(--ink); border-color: var(--muted); }
.ws-searchui__filtersbtn[aria-expanded="true"] { color: var(--ink); background: var(--panel); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ws-searchui__filtersbtn.is-active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ws-searchui__count { display: grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: .68rem; font-weight: 800; }
/* The filters panel: it opens beneath the controls (no overlay); the category's filters as names, the chosen one's
   choices under them, sliding in as you move between them. */
.ws-searchui__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .22s cubic-bezier(.2, .7, .2, 1), opacity .18s ease; }
.ws-searchui__panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.ws-searchui__panelbody { min-height: 0; overflow: hidden; display: grid; gap: .55rem; }
.ws-searchui__panel.is-open .ws-searchui__panelbody { padding: .65rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ws-searchui__pnames { display: flex; flex-wrap: wrap; gap: .3rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.ws-searchui__pnames button { position: relative; display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .6rem; border: 0; border-radius: 8px; background: none;
  color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: color .15s ease, background .15s ease; }
.ws-searchui__pnames button:hover { color: var(--ink); }
.ws-searchui__pnames button[aria-selected="true"] { color: var(--ink); background: var(--panel-strong); }
.ws-searchui__pnames button.is-set::after { content: ""; position: absolute; top: .35rem; right: .3rem; width: .38rem; height: .38rem; border-radius: 50%; background: var(--accent); }
.ws-searchui__poptions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ws-searchui__poptions.is-moving { animation: ws-filter-step .2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ws-filter-step { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.ws-searchui__pill { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; height: 2.15rem; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: .82rem; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.ws-searchui__pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-searchui__pill svg { flex: 0 0 auto; color: var(--muted); }
.ws-searchui__pill:hover { border-color: var(--muted); }
.ws-searchui__pill[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); background: color-mix(in srgb, var(--accent) 16%, var(--paper)); color: var(--ink); font-weight: 600; }
.ws-searchui__pill[aria-pressed="true"] svg { color: var(--accent); }
.ws-searchui__pill.is-back { border-style: dashed; color: var(--muted); }
.ws-searchui__pnone { margin: 0; color: var(--muted); font-size: .84rem; }
.ws-searchui__date { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .82rem; }
.ws-searchui__date input { height: 2.15rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: .82rem; padding: 0 .7rem; color-scheme: dark; }
/* The categories: their names in one row, the chosen one in the accent with a line under it (a narrow screen scrolls the
   row a little rather than cutting a name short). */
.ws-searchui__tabs { display: flex; gap: .15rem; margin: 0 -.8rem; padding: 0 .55rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.ws-searchui__tabs::-webkit-scrollbar { display: none; }
.ws-searchui__tabs button { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .32rem; height: 2.4rem; padding: 0 .5rem;
  border: 0; background: none; color: var(--muted); font: inherit; font-size: .84rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .15s ease; }
.ws-searchui__tabs button svg { flex: 0 0 auto; opacity: .8; }
.ws-searchui__tabs button[aria-selected="true"] svg { opacity: 1; }
.ws-searchui__tabs button:hover { color: var(--ink); }
.ws-searchui__tabs button[aria-selected="true"] { color: var(--accent); }
/* A phone: the categories as icons, the chosen one with its name, so all seven fit on one row. */
@media (max-width: 560px) { .ws-searchui__tabs button:not([aria-selected="true"]) > span { display: none; } .ws-searchui__tabs button { padding: 0 .6rem; } }
.ws-searchui__tabs button::after { content: ""; position: absolute; left: .45rem; right: .45rem; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent);
  transform: scaleX(0); transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
.ws-searchui__tabs button[aria-selected="true"]::after { transform: none; }
/* The filters that are on: one chip each (its value; tap to change it, x to take it off). */
.ws-searchui__chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .5rem 0 .55rem; margin-top: -.6rem; border-top: 1px solid var(--line); }
.ws-searchui__chip { display: inline-flex; align-items: stretch; max-width: 100%; min-width: 0; height: 1.95rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.ws-searchui__chipbody { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; padding: 0 .15rem 0 .6rem; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.ws-searchui__chipbody svg { flex: 0 0 auto; color: var(--accent); }
.ws-searchui__chipbody span { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .ws-searchui__chipbody span { max-width: 7.5rem; } }
.ws-searchui__chipx { display: grid; place-items: center; width: 1.9rem; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 0 999px 999px 0; }
.ws-searchui__chipx:hover, .ws-searchui__chipx:focus-visible { color: var(--ink); }
.ws-searchui__clearall { height: 1.95rem; padding: 0 .35rem; border: 0; background: none; color: var(--accent); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ws-searchui__tick { width: 17px; flex: 0 0 17px; }
.ws-searchui__loading { display: flex; align-items: center; gap: .6rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ws-searchui__panel, .ws-searchui__tabs button::after { transition: none; } .ws-searchui__poptions.is-moving { animation: none; } }
/* The results: compact rows (still a comfortable tap), readable titles, quiet details, scrolling on their own. */
.ws-searchui__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .35rem .45rem calc(.6rem + env(safe-area-inset-bottom, 0px)); }
.ws-searchui__label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim, var(--muted)); margin: .6rem .5rem .35rem; }
.ws-searchui__row { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 3rem; padding: .4rem .5rem; border: 0; border-radius: 10px; background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; min-width: 0; transition: background .12s ease; }
.ws-searchui__row:hover, .ws-searchui__row[aria-selected="true"] { background: var(--panel); }
.ws-searchui__icon { flex: 0 0 auto; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 9px; background: var(--panel); color: var(--muted); overflow: hidden; }
.ws-searchui__row:hover .ws-searchui__icon, .ws-searchui__row[aria-selected="true"] .ws-searchui__icon { background: var(--panel-strong); }
.ws-searchui__icon svg { width: 17px; height: 17px; }
.ws-searchui__icon--image img { width: 100%; height: 100%; object-fit: cover; }
.ws-searchui__text { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.ws-searchui__title { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .9rem; font-weight: 500; }
.ws-searchui__title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-searchui__title .ws-modetag { flex: 0 0 auto; margin-left: 0; }
.ws-searchui__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; color: var(--muted); }
.ws-searchui__title strong, .ws-searchui__sub strong { color: var(--ink); font-weight: 750; }
.ws-searchui__empty { padding: 1rem .6rem; }
/* Full screen on phones: it starts below the status bar, the edges clear rounded corners and cut-outs, and the page's
   height follows the keyboard (interactive-widget=resizes-content), so the search box stays in view. */
@media (max-width: 780px) {
  .ws-searchui { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .ws-searchui__head { padding: calc(.6rem + env(safe-area-inset-top, 0px)) max(.75rem, env(safe-area-inset-right, 0px)) 0 max(.75rem, env(safe-area-inset-left, 0px)); }
  .ws-searchui__tabs { margin: 0 calc(-1 * max(.75rem, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(.75rem, env(safe-area-inset-left, 0px))); }
}
@media (max-width: 480px) {
  .ws-searchui__tabs { gap: .1rem; padding: 0 .4rem; scroll-padding: 0 .4rem; }
  .ws-searchui__tabs button { font-size: .82rem; padding: 0 .45rem; }
}
.ws-imgactions { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.ws-chip--action { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; background: none; font: inherit; font-size: .72rem; color: var(--ink); }
.ws-chip--action:hover, .ws-chip--action:focus-visible { border-color: var(--accent); color: var(--accent); }
.ws-page-tools { gap: .6rem; flex-wrap: wrap; align-items: center; }
.ws-page-search { flex: 1; min-width: 12rem; display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); }
.ws-page-search:focus-within { border-color: var(--accent); }
.ws-page-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; outline: none; }

/* ---- saved images ---- */
.ws-tile { position: relative; }
.ws-tile > button:first-child { width: 100%; }
/* Controls and labels over a picture: dark in every theme, whatever the picture. */
:root { --on-image: #0b101bcc; --on-image-ink: #eef2fb; }
.ws-savebtn { position: absolute; top: .35rem; right: .35rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: var(--on-image); color: var(--on-image-ink); cursor: pointer; opacity: 0; transition: opacity .15s ease, transform .15s ease, background .15s ease; backdrop-filter: blur(4px); }
.ws-tile:hover .ws-savebtn, .ws-savebtn:focus-visible, .ws-savebtn[aria-pressed="true"] { opacity: 1; }
@media (hover: none) { .ws-savebtn { opacity: 1; } }
.ws-savebtn[aria-pressed="true"] { color: var(--accent); }
.ws-savebtn[aria-pressed="true"] svg { fill: currentColor; }
.ws-tile--chat { display: inline-block; max-width: min(100%, 32rem); }
.ws-tile--chat .ws-savebtn { top: .9rem; right: .5rem; }
.ws-lightbox__save { display: inline-flex; }
.ws-lightbox__save .ws-savebtn svg { width: 20px; height: 20px; }
.ws-lightbox__save .ws-savebtn { position: static; opacity: 1; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: none; backdrop-filter: none; }

/* ---- motion: quick, calm, never in the way ---- */
@keyframes ws-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ws-pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ws-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ws-slide-left { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes ws-slide-right { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes ws-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes ws-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes ws-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes ws-toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ws-toast-out { to { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes ws-sheet-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.ws-enter { animation: ws-rise .26s cubic-bezier(.2, .7, .2, 1) both; }
.ws-dots { display: inline-flex; gap: .35rem; padding: .7rem .2rem; }
.ws-dots i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--agent, var(--accent)); animation: ws-bounce 1.2s ease-in-out infinite; }
.ws-dots i:nth-child(2) { animation-delay: .15s; } .ws-dots i:nth-child(3) { animation-delay: .3s; }
.ws-imgwait { width: min(100%, 22rem); display: grid; place-items: center; align-content: center; gap: .5rem; margin-top: .3rem; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); font-size: .85rem;
  background: linear-gradient(100deg, var(--panel) 30%, color-mix(in srgb, var(--agent, var(--accent)) 16%, var(--panel)) 50%, var(--panel) 70%); background-size: 200% 100%; animation: ws-shimmer 1.6s linear infinite; }
.ws-fadeimg { opacity: 0; transition: opacity .35s ease; }
.ws-fadeimg.is-loaded { opacity: 1; }

/* dialogs, menus, search, viewer */
.ws-dialog[open] { animation: ws-pop-in .2s cubic-bezier(.2, .7, .2, 1); }
.ws-dialog[open]::backdrop, .ws-searchui[open]::backdrop, .ws-lightbox[open]::backdrop { animation: ws-fade .2s ease; }
.ws-menu:not([hidden]) { animation: ws-pop-in .14s cubic-bezier(.2, .7, .2, 1); transform-origin: top; }
.ws-searchui[open] { animation: ws-sheet-up .22s cubic-bezier(.2, .7, .2, 1); }
.ws-lightbox[open] { animation: ws-fade .2s ease; }
.ws-lightbox__stage img.ws-slide { animation: ws-pop-in .22s cubic-bezier(.2, .7, .2, 1); }
.ws-searchui__row, .ws-saved, .ws-plugin, .ws-group { animation: ws-rise .22s cubic-bezier(.2, .7, .2, 1) both; }

[data-view]:not([hidden]) { animation: ws-fade .18s ease; }

/* presses, toggles, saves */
.ws-iconbtn, .ws-button, .ws-toggle, .ws-chip--action, .ws-chip--files, .ws-send, .ws-agent-pick, .ws-row, .ws-nav__item, .ws-quality__chip, .ws-aspect__chip, .ws-mode, .ws-swatch, .ws-picker__icon, .ws-segmented button, .ws-searchui__tabs button, .ws-savebtn {
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease; }
.ws-iconbtn:active, .ws-button:active, .ws-toggle:active, .ws-chip--action:active, .ws-send:active, .ws-agent-pick:active, .ws-quality__chip:active, .ws-aspect__chip:active,
.ws-mode:active, .ws-swatch:active, .ws-picker__icon:active, .ws-segmented button:active, .ws-searchui__tabs button:active, .ws-savebtn:active { transform: scale(.94); }
.ws-row:active, .ws-nav__item:active { transform: scale(.985); }
.ws-pop { animation: ws-pop .32s cubic-bezier(.2, .7, .2, 1); }
.ws-send:not(:disabled) { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
.ws-savebar:not([hidden]) { animation: ws-sheet-up .22s cubic-bezier(.2, .7, .2, 1); }
.ws-saved-notice:not([hidden]) { animation: ws-pop-in .22s cubic-bezier(.2, .7, .2, 1); }
.ws-toast { animation: ws-toast-in .22s cubic-bezier(.2, .7, .2, 1); }
.ws-toast.is-leaving { animation: ws-toast-out .3s ease forwards; }
.ws-picker:not([hidden]) { animation: ws-rise .18s ease; }
.ws-filetree details > ul, .ws-folder__body { animation: ws-fade .18s ease; }

@media (prefers-reduced-motion: reduce) {
  .workspace-page *, .workspace-page *::before, .workspace-page *::after, .ws-lightbox *, .ws-searchui *, .ws-searchui, .ws-lightbox, .ws-toast {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ws-dots i { opacity: 1; }
}

/* temporary chats: amber, dashed, labeled */
.ws { --temp: var(--warn); }
.ws-tempbadge { display: inline-flex; align-items: center; gap: .3rem; margin-left: .55rem; padding: .12rem .5rem; border-radius: 999px; border: 1px dashed var(--temp); color: var(--temp); font: 700 .7rem/1.4 var(--font-ui); vertical-align: middle; letter-spacing: .02em; }
.ws.is-temporary .ws-bar { border-bottom: 1px dashed color-mix(in srgb, var(--temp) 60%, transparent); background: color-mix(in srgb, var(--temp) 5%, transparent); }
.ws.is-temporary .ws-inputbox { border-style: dashed; border-color: color-mix(in srgb, var(--temp) 55%, var(--line)); }
.ws.is-temporary .ws-inputbox:focus-within { border-color: var(--temp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--temp) 16%, transparent); }
.ws-tempnote { display: flex; align-items: center; gap: .5rem; margin: 0 auto .45rem; font-size: .78rem; color: var(--temp); }
.ws-tempnote__dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--temp); flex: 0 0 auto; }
.ws.is-temporary .ws-empty h2 { color: var(--temp); }

/* scroll to the latest message */
.ws-main { position: relative; }
.ws-tobottom { position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-strong); color: var(--ink); box-shadow: 0 6px 18px var(--shadow-color); cursor: pointer; animation: ws-pop-in .18s cubic-bezier(.2, .7, .2, 1); }
.ws-tobottom:hover, .ws-tobottom:focus-visible { border-color: var(--accent); color: var(--accent); }
.ws-tobottom:active { transform: translateX(-50%) scale(.94); }
/* Going deeper (workspace.js goDeeper): one system, tinted text with a thin underline and a glow, never a highlighter
   (the owner, 2026-10-16). What can be opened is lavender with a faint 1.5px line set below the letters. Pressed, it
   brightens at once (120ms) and one soft light closes in on it from both ends over the hold (a single layer that follows
   each line the phrase wraps onto: two meeting in the middle drew seams); at the end it pulses once, and breathes while
   the answer grows. One opened turns teal, no line or glow. A faint pill (inside the words' own box, so nothing moves)
   shows only on hover where there's a pointer, never on a long phrase, which keeps to its tint. What an expansion adds
   is teal and underlined as it types in and a while after, then slowly reads as the rest of the answer. */
@property --deeper-in { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.ws-deeper { --tint: color-mix(in srgb, var(--accent) 70%, var(--indigo, var(--accent))); --pill: transparent; --deeper-in: 0%;
  --glow: color-mix(in srgb, var(--tint) 24%, transparent); border-radius: .45em; cursor: pointer; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; color: color-mix(in srgb, var(--tint) 75%, var(--ink));
  /* A taller target for a fingertip (padding, which moves nothing: inline); fills drawn only round the words. */
  padding: .4em .12em; margin: 0 -.12em; background-clip: content-box; background-color: var(--pill);
  background-image: linear-gradient(to right, var(--glow) var(--deeper-in), transparent var(--deeper-in),
    transparent calc(100% - var(--deeper-in)), var(--glow) calc(100% - var(--deeper-in)));
  background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .26em; text-decoration-skip-ink: auto;
  text-decoration-color: color-mix(in srgb, var(--tint) 34%, transparent); text-shadow: 0 0 .7em color-mix(in srgb, var(--tint) 22%, transparent);
  transition: color .3s ease, text-shadow .3s ease, background-color .3s ease, --deeper-in .18s ease-out, text-decoration-color .3s ease; }
/* Opened: its own color (teal, where what can open is lavender), no line or glow; held, the light that closes in is teal. */
.ws-deeper[aria-expanded="true"] { --tint: var(--cyan); color: color-mix(in srgb, var(--cyan) 75%, var(--ink)); text-decoration-color: transparent; text-shadow: none; }
@media (hover: hover) {
  .ws-deeper:hover { --pill: color-mix(in srgb, var(--tint) 6%, transparent); text-shadow: 0 0 .8em color-mix(in srgb, var(--tint) 45%, transparent); }
}
.ws-deeper:focus-visible { --pill: color-mix(in srgb, var(--tint) 6%, transparent); outline: 2px solid var(--accent); outline-offset: 3px; }
/* The hold: the color answers at once, the light closes in from both ends over the hold, and lets go quickly. */
.ws-deeper.is-pressing { -webkit-user-select: none; user-select: none; --pill: transparent; --deeper-in: 51%;
  color: color-mix(in srgb, var(--tint) 30%, var(--ink)); text-decoration-color: transparent;
  text-shadow: 0 0 1em color-mix(in srgb, var(--tint) 75%, transparent);
  transition: color .12s ease-out, text-shadow .2s ease-out, text-decoration-color .12s ease-out, --deeper-in .65s cubic-bezier(.45, 0, .55, 1); }
.ws-deeper.is-held, .ws-deeper.is-asking { -webkit-user-select: none; user-select: none; --pill: transparent; --deeper-in: 51%;
  color: color-mix(in srgb, var(--tint) 25%, var(--ink)); text-decoration-color: transparent;
  text-shadow: 0 0 .45em color-mix(in srgb, var(--tint) 70%, transparent), 0 0 1.3em color-mix(in srgb, var(--tint) 60%, transparent); }
.ws-deeper.is-held { animation: ws-deeper-pulse .55s ease-out; }
@keyframes ws-deeper-pulse { 0% { --glow: color-mix(in srgb, var(--tint) 60%, transparent);
  text-shadow: 0 0 .3em var(--accent), 0 0 1.6em var(--accent), 0 0 2.6em color-mix(in srgb, var(--tint) 70%, transparent); } }
.ws-deeper.is-asking { animation: ws-deeper-lit 1.1s ease-in-out infinite alternate; }
@keyframes ws-deeper-lit { to { text-shadow: 0 0 .4em color-mix(in srgb, var(--tint) 40%, transparent), 0 0 .9em color-mix(in srgb, var(--tint) 30%, transparent); } }
.ws-deeper.is-long { --pill: transparent !important; background-image: none; }  /* a long phrase keeps to its tint and glow */
/* While the answer grows: a soft light passes through the held phrase's passage. */
.ws-msg__body .is-enhancing { position: relative; }
.ws-msg__body .is-enhancing::after { content: ""; position: absolute; inset: -.15em -.35em; border-radius: .6em; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--accent) 10%, transparent) 50%, transparent 65%) no-repeat;
  background-size: 260% 100%; animation: ws-deeper-sweep 1.6s ease-in-out infinite; }
@keyframes ws-deeper-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
/* What an expansion added: teal and underlined as it's written and a while after (the owner, 2026-10-17: "for longer
   paragraphs I genuinely can't tell what is new and what isn't ... Underline the new text as it's written, make the
   text the color - then it all slowly fades into being white"), for as long as it takes to read (workspace.js
   deeperReadMs), then the answer's own color, which it stays. Only that fade is eased: a change of theme isn't. */
.ws-deeper__new, .ws-deeper__para { transition: opacity .18s ease, filter .18s ease; }
.ws-deeper__new.is-fresh, .ws-deeper__para.is-fresh, .ws-deeper__new.is-settling, .ws-deeper__para.is-settling {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .26em; text-decoration-skip-ink: auto; }
.ws-deeper__new.is-fresh, .ws-deeper__para.is-fresh { color: color-mix(in srgb, var(--cyan) 80%, var(--ink));
  text-decoration-color: color-mix(in srgb, var(--cyan) 60%, transparent); }
.ws-deeper__new.is-settling, .ws-deeper__para.is-settling { text-decoration-color: transparent;
  transition: color 6s ease, text-decoration-color 6s ease; }
li > .ws-deeper__para, dd > .ws-deeper__para, dt > .ws-deeper__para { margin: .35em 0 0; }
.ws-deeper__rewrite.is-arriving { animation: ws-deeper-arrive .3s ease-out; }
@keyframes ws-deeper-arrive { from { opacity: .2; filter: blur(2px); } }
.ws-deeper__new.is-leaving, .ws-deeper__para.is-leaving, .ws-deeper__rewrite.is-leaving { opacity: 0; filter: blur(2px); }
@media (prefers-reduced-motion: reduce) {
  .ws-deeper, .ws-deeper.is-pressing, .ws-deeper__new, .ws-deeper__para { transition: none; }
  .ws-deeper.is-held, .ws-deeper.is-asking, .ws-deeper__rewrite.is-arriving { animation: none; }
  .ws-msg__body .is-enhancing::after { animation: none; background: color-mix(in srgb, var(--accent) 5%, transparent); }
}
/* The Android app's long screenshot (LongScreenshot.java) scrolls the conversation: no floating Latest in the picture. */
.dyadic-capture .ws-tobottom { visibility: hidden; }

/* generated images in chat: a compact preview of the full-resolution file;
   tap for the full-size viewer */
.ws-msg__body .ws-zoomable { display: inline-block; border-radius: 10px; overflow: hidden; line-height: 0; }
.ws-msg__body .ws-zoomable img { width: auto; height: auto; max-width: min(100%, 18rem); max-height: 18rem; object-fit: contain; margin: 0; border-radius: 10px; }
.ws-msg__body .ws-zoomable:hover img, .ws-msg__body .ws-zoomable:focus-visible img { filter: brightness(1.06); }
.ws-tile--chat { display: inline-block; max-width: min(100%, 18rem); margin: .4rem 0; }
.ws-tile--chat .ws-savebtn { top: .45rem; right: .45rem; }
@media (max-width: 520px) { .ws-msg__body .ws-zoomable img { max-width: min(100%, 14rem); max-height: 14rem; } .ws-tile--chat { max-width: min(100%, 14rem); } }

/* image selection */
.ws-selectbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; padding: .55rem .7rem; border: 1px solid var(--accent); border-radius: 10px; background: var(--panel-strong); animation: ws-rise .18s ease; }
.ws-selectbar > span { flex: 1; font-weight: 700; }
.ws-selectbar .ws-button { display: inline-flex; align-items: center; gap: .35rem; }
.ws-gallery.is-selecting button { cursor: pointer; }
.ws-tile__check { position: absolute; top: .4rem; left: .4rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid #eef2fb; background: #0b101b99; color: var(--accent-ink); pointer-events: none; }
.ws-tile.is-selected .ws-tile__check { background: var(--accent); border-color: var(--accent); }
.ws-tile.is-selected img { outline: 3px solid var(--accent); outline-offset: -3px; filter: brightness(.85); }
.ws-button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-surface); }

/* ==== navigation shell: rail, conversation sidebar, chat, details ==== */
/* The rail: Home, libraries, then tools and you. */
.ws-rail { width: var(--rail-w); flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .7rem 0 calc(.7rem + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none; }
.ws-rail::-webkit-scrollbar { display: none; }
.ws-rail hr { width: 1.9rem; border: 0; border-top: 2px solid var(--line); margin: .1rem 0; }
.ws-rail__libraries, .ws-rail__tools { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.ws-rail__tools { margin-top: auto; padding-top: .5rem; }
.ws-rail__item { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer;
  transition: border-radius .18s ease, background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; }
.ws-rail__item .ws-cicon { color: var(--tint, var(--muted)); }
.ws-rail__item:hover, .ws-rail__item:focus-visible { border-radius: 11px; border-color: var(--tint, var(--accent)); color: var(--ink); background: color-mix(in srgb, var(--tint, var(--accent)) 14%, var(--panel)); }
.ws-rail__item[aria-current="true"] { border-radius: 11px; border-color: var(--tint, var(--accent)); background: color-mix(in srgb, var(--tint, var(--accent)) 20%, var(--panel)); color: var(--ink); }
.ws-rail__item::before { content: ""; position: absolute; left: calc(-1 * (var(--rail-w) - 46px) / 2); top: 50%; width: 4px; height: 0; border-radius: 0 8px 8px 0; background: var(--tint, var(--accent)); transform: translateY(-50%); transition: height .18s ease; }
.ws-rail__item:hover::before { height: .9rem; }
.ws-rail__item[aria-current="true"]::before { height: 1.8rem; }
.ws-rail__item:active { transform: scale(.94); }
.ws-rail__tool { border-color: transparent; background: none; width: 42px; height: 42px; }
.ws-rail__add { border-style: dashed; color: var(--accent); }
.ws-rail .ws-me { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); overflow: hidden; }
.ws-rail .ws-me::before { display: none; }
.ws-rail .ws-me .ws-msg__avatar { width: 100%; height: 100%; border-radius: 50%; }
.ws-rail img { border-radius: 10px; }
.ws-side__title { display: flex; align-items: center; gap: .5rem; margin: 0 auto 0 0; min-width: 0; font-size: 1rem; font-weight: 800; }
.ws-side__title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The title swaps libraries with a tap (a long press opens the library's options). */
.ws-side__title { margin-left: -.45rem; }
.ws-side__switch { display: inline-flex; align-items: center; justify-content: flex-start; gap: .5rem; min-width: 0; max-width: 100%; margin: -.35rem 0;
  padding: .35rem .45rem; border: 0; border-radius: var(--r-md); background: none; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
.ws-side__switch > svg, .ws-side__switch > img, .ws-side__chev svg { display: block; flex: none; }
.ws-side__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-side__chev { display: grid; place-items: center; flex: none; color: var(--muted); }
.ws-side__switch:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (hover: hover) { .ws-side__switch:hover { background: var(--panel-strong); } }
.ws-row--temporary .ws-row__label { color: var(--muted); }
.ws-tree__list--temporary { border-left: 2px dashed color-mix(in srgb, var(--temp) 55%, transparent); margin-left: .45rem !important; padding-left: .2rem !important; }

/* Desktop: everything docked; the sidebar and details collapse with their buttons. */
@media (min-width: 1101px) {
  .ws.nav-collapsed .ws-side { display: none; }
  .ws:not(.nav-collapsed) .ws-bar__nav { display: none; }
  .ws-bar__details { display: none; }
  .ws:not(.nav-collapsed) .ws-side { animation: ws-slide-left .22s cubic-bezier(.2, .7, .2, 1); }
  .ws-context:not([hidden]) { animation: ws-slide-right .22s cubic-bezier(.2, .7, .2, 1); }
}
/* Tablet and phone: the sidebar and details slide over the chat. */
@media (max-width: 1100px) {
  .ws, .ws.has-context { grid-template-columns: auto minmax(0, 1fr); }
  .ws-context { position: fixed; right: 0; top: 0; bottom: 0; width: min(var(--ctx-w), 88vw); z-index: 50; box-shadow: var(--shadow); padding-top: 0;
    padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); transform: translateX(102%); transition: transform .26s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
  .ws.panel-open .ws-context { transform: none; }
  /* Drawers that cover the screen start below the phone's status bar and display cutout (both sidebars read this). */
  .ws { --drawer-top: env(safe-area-inset-top, 0px); }
  /* Full View: the whole screen. */
  .ws.panel-full .ws-context { width: 100vw; box-shadow: none; }
  .ws-bar [data-action="panel"] { display: none; }
  .ws-scrim { transition: opacity .26s ease; }
  .ws-msg__actions { opacity: 1; }
}
@media (min-width: 781px) and (max-width: 1100px) {
  .ws { --ctx-w: 19rem; }
  .ws-side { position: fixed; top: 0; bottom: 0; left: calc(var(--rail-w) + env(safe-area-inset-left, 0px)); z-index: 50; width: min(var(--nav-w), 70vw); border-right: 1px solid var(--line); box-shadow: var(--shadow);
    padding-top: var(--drawer-top); transform: translateX(calc(-100% - var(--rail-w) - 4px)); transition: transform .26s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
  .ws.nav-open .ws-side, .ws.nav-dragging .ws-side { transform: none; }
  .ws.nav-dragging .ws-side { transform: translateX(calc(-100% - var(--rail-w))); }
  .ws-nav { width: var(--rail-w); }
}
@media (max-width: 780px) {
  .ws, .ws.has-context { grid-template-columns: minmax(0, 1fr); }
  .ws-nav { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; width: min(calc(var(--rail-w) + var(--nav-w)), 94vw); padding-top: var(--drawer-top);
    transform: translateX(-102%); transition: transform .26s cubic-bezier(.2, .7, .2, 1); will-change: transform; box-shadow: none; }
  .ws.nav-open .ws-nav { transform: none; box-shadow: var(--shadow); }
  .ws-side { flex: 1; width: auto; }
  .ws-bar { min-height: 56px; padding: .5rem .625rem; gap: .375rem; }
  .ws-bar__primary { margin-left: .375rem; gap: .25rem; }
  /* Details is in the chat's options here; a dot on the sidebar button says the rail's bell has something unread. */
  .ws-bar__details { display: none; }
  .ws-bar__nav.has-unread::after { content: ""; position: absolute; top: .5rem; right: .5rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 2px var(--paper); }
  .ws-bar__place .ws-lineage { display: none; }
  .ws-toggle { padding: .45rem .6rem; }
}
.ws.nav-dragging .ws-nav, .ws.nav-dragging .ws-side { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .ws-nav, .ws-side, .ws-context, .ws-rail__item, .ws-rail__item::before { transition: none !important; } }

/* details panel: tabs */
/* The panel's pages: each tab its icon over its name, in its own color when chosen; the header and tabs stay put while
   the page scrolls under them. */
/* The panel's header sticks at the very top of its scroll area: the panel keeps no padding above it (that padding is the
   header's own), so no strip of content ever shows above it, the phone's safe area included. */
.ws-context { padding-top: 0; }
.ws-context__top { position: sticky; top: 0; z-index: 3; margin: 0 -.9rem .4rem; padding: calc(.8rem + var(--drawer-top)) .9rem .5rem; background: var(--panel);
  border-bottom: 1px solid var(--line); }
.ws-panel-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem; margin: .65rem 0 0; padding: .2rem; border: 1px solid var(--line);
  border-radius: 12px; background: var(--paper); }
.ws-panel-tabs button { --tab: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-width: 0;
  height: 3rem; padding: .2rem; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 600 .66rem/1.1 var(--font-ui); cursor: pointer;
  transition: background-color .15s ease, color .15s ease; }
.ws-panel-tabs button > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-panel-tabs button svg { display: block; width: 17px; height: 17px; }
.ws-panel-tabs button[aria-selected="true"] { color: var(--tab); background: color-mix(in srgb, var(--tab) 14%, transparent); }
.ws-panel-tabs button:hover { color: var(--ink); }
.ws-panel-tabs [data-panel="activity"] { --tab: var(--cyan); }
.ws-panel-tabs [data-panel="outline"] { --tab: var(--amber); } .ws-panel-tabs [data-panel="context"] { --tab: var(--violet); }
.ws-panel-tabs [data-panel="files"] { --tab: var(--coral); }
/* A section inside a page, and a page with nothing to show: the same everywhere in the panel. */
.ws-panel__label { display: flex; align-items: center; gap: .4rem; margin: 1rem 0 .45rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); }
.ws-panel__label:first-child { margin-top: .3rem; }
/* Every page's own section headings read the same as these. */
#ws-context section > h3:not([class]), #ws-context .ws-sheet__label { display: flex; align-items: center; gap: .4rem; margin: 1rem 0 .45rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ws-panel__label svg { display: block; width: 14px; height: 14px; }
.ws-panel-empty { display: grid; justify-items: center; gap: .45rem; padding: 2rem .75rem; text-align: center; }
.ws-panel-empty__icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; color: var(--indigo);
  background: linear-gradient(135deg, color-mix(in srgb, var(--indigo) 16%, transparent), color-mix(in srgb, var(--violet) 18%, transparent)); }
.ws-panel-empty__icon svg { display: block; }
.ws-panel-empty strong { font-size: .95rem; }
.ws-panel-empty p { margin: 0; max-width: 22rem; color: var(--muted); font-size: .85rem; }

/* The Plan Dock: on top of the composer and one piece with it (the same border, corners and fill, a rule between),
   a handle to swipe or tap, the plan's title and state, the step under way and what Iris is doing, and a bar of one
   segment per step colored by how each stands. Open, the whole plan scrolls under it. */
.ws-plandock { --plan: var(--indigo); display: grid; gap: .3rem; padding: 0 .85rem .6rem; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-bottom: 0; border-radius: 20px 20px 0 0; background: color-mix(in srgb, var(--panel) 60%, var(--paper));
  transition: border-color .15s ease, background-color .15s ease; }
.ws-plandock[hidden] { display: none; }
.ws-composer:has(> .ws-plandock:not([hidden])) .ws-inputbox { border-top-left-radius: 0; border-top-right-radius: 0; }
.ws-composer:has(> .ws-plandock:not([hidden])) .ws-inputbox:focus-within,
.ws-composer:has(> .ws-plandock:not([hidden])) .ws-inputbox.is-planning { box-shadow: none; }
.ws-composer:has(.ws-inputbox:focus-within) > .ws-plandock { border-color: var(--accent); background: var(--panel); }
.ws-plandock__grip { display: flex; justify-content: center; }
.ws-plandock__handle { display: grid; place-items: center; width: 4.5rem; height: 1.2rem; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.ws-plandock__handle::before { content: ""; display: block; width: 2.3rem; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 45%, transparent);
  transition: background-color .15s ease, width .15s ease; }
.ws-plandock__handle:hover::before, .ws-plandock__handle:focus-visible::before { width: 2.8rem; background: var(--muted); }
.ws-plandock__handle:focus-visible { outline: none; }
.ws-plandock__head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ws-plandock__icon { flex: none; display: grid; place-items: center; color: var(--plan); }
.ws-plandock__icon svg { display: block; }
.ws-plandock__title { flex: 1 1 auto; min-width: 0; font-size: .92rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-plandock__status { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-size: .76rem; font-weight: 650;
  color: var(--plan); white-space: nowrap; }
.ws-plandock__status i { flex: none; display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ws-plandock.is-live .ws-plandock__status i { animation: ws-plan-pulse 1.4s ease-in-out infinite; }
.ws-plandock__more { flex: none; width: 2rem; height: 2rem; margin: -.3rem -.4rem -.3rem -.1rem; }
.ws-plandock__now { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: .45rem; min-width: 0; margin: 0; font-size: .82rem; line-height: 1.45; }
.ws-plandock__now > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-plandock.is-live .ws-plandock__now > span:nth-child(2) { font-weight: 600; }
.ws-plandock__count { flex: none; font-size: .76rem; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-plandock__doing { margin: -.15rem 0 0 calc(18px + .45rem); font-size: .76rem; line-height: 1.45; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One segment per step: gray to come, purple under way, green done (paler when skipped), yellow interrupted or blocked,
   red failed. */
.ws-plandock__bar { display: flex; gap: 3px; height: 5px; margin-top: .15rem; }
.ws-plandock__bar i { flex: 1 1 0; min-width: 0; border-radius: 999px; background: color-mix(in srgb, var(--line) 85%, transparent); transition: background-color .3s ease; }
.ws-plandock__bar i.is-in_progress { background: var(--violet); }
.ws-plandock.is-live .ws-plandock__bar i.is-in_progress { animation: ws-plan-segment 1.4s ease-in-out infinite; }
.ws-plandock__bar i.is-completed { background: var(--ok); }
.ws-plandock__bar i.is-skipped { background: color-mix(in srgb, var(--ok) 45%, transparent); }
.ws-plandock__bar i.is-paused, .ws-plandock__bar i.is-blocked { background: var(--warn); }
.ws-plandock__bar i.is-failed { background: var(--danger); }
@keyframes ws-plan-segment { 50% { opacity: .45; } }
.ws-plandock .ws-plan__actions { margin-top: .2rem; }
/* Open: the whole plan, under a rule, scrolling in its own space (a phone's keyboard shrinks the space it has). */
.ws-plandock__body { max-height: min(26rem, 50dvh); margin: .25rem -.85rem 0; padding: .35rem .85rem .1rem; overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--line); }
.ws-plandock__body[hidden] { display: none; }
.ws-plandock.is-moving .ws-plandock__body { overflow: hidden; }
/* At full height: up to just under the top bar (measured as it opens: --plan-full). */
.ws-plandock.is-full .ws-plandock__body { max-height: none; height: var(--plan-full, 60dvh); }
/* The conversation above gives way to it, its padding too, so the composer rises to the top bar. */
.ws-main:has(.ws-plandock.is-tall, .ws-plandock.is-full) .ws-messages { --page-top: 0; padding-bottom: 0; }
.ws-plandock__label { margin: .7rem 0 .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ws-plandock__others { display: grid; gap: .1rem; padding-bottom: .3rem; }
.ws-plandock__other { --plan: var(--muted); display: flex; align-items: center; gap: .5rem; min-height: 2.4rem; padding: .3rem .35rem; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: inherit; font-size: .84rem; text-align: left; cursor: pointer; }
.ws-plandock__other:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ws-plandock__othericon { flex: none; display: grid; place-items: center; color: var(--plan); }
.ws-plandock__othericon svg { display: block; }
.ws-plandock__othername { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-plandock__other small { flex: none; color: var(--plan); font-weight: 650; }
/* Typing on a phone: the keyboard takes the room, so what Iris is doing steps out of the way (the step still shows). */
@media (max-width: 640px) { .ws-composer:has(textarea:focus) .ws-plandock__doing { display: none; } }
@media (prefers-reduced-motion: reduce) { .ws-plandock__bar i, .ws-plandock__status i { animation: none !important; } }
.ws-plan__dot { flex: none; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--step, var(--violet)); animation: ws-plan-pulse 1.4s ease-in-out infinite; }
@keyframes ws-plan-pulse { 50% { transform: scale(.55); opacity: .4; } }
/* A fold (Approach, History): a quiet line with a chevron that turns. */
.ws-fold > summary { display: flex; align-items: center; gap: .3rem; padding: .25rem 0; list-style: none; cursor: pointer; font-size: .74rem; font-weight: 600; color: var(--muted); }
.ws-fold > summary::-webkit-details-marker { display: none; }
.ws-fold__body { margin: .15rem 0 .3rem; font-size: .8rem; white-space: pre-wrap; }
.ws-steps { list-style: none; margin: .15rem 0 0; padding: 0; display: grid; }
.ws-step { --step: var(--muted); margin-left: calc(var(--depth, 0) * .95rem); }
.ws-step.is-nested { padding-left: .3rem; border-left: 2px solid color-mix(in srgb, var(--line) 85%, transparent); }
.ws-step__row { display: flex; align-items: center; min-width: 0; border-radius: 8px; }
.ws-step.is-current > .ws-step__row { background: color-mix(in srgb, var(--step) 10%, transparent); }
.ws-step__head { flex: 1 1 auto; display: flex; align-items: center; gap: .45rem; min-width: 0; min-height: 2.5rem; padding: .3rem .35rem; font: inherit;
  text-align: left; color: var(--ink); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.ws-step__head:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ws-step__head > .ws-step__chev { flex: none; display: block; width: 14px; height: 14px; color: var(--muted); transform-origin: 50% 50%; transform-box: fill-box; transform: rotate(-90deg); transition: transform .18s ease; }
.ws-step__head[aria-expanded="true"] > .ws-step__chev { transform: none; }
.ws-step__icon { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--step); }
.ws-step__icon svg { display: block; }
.ws-step__icon.is-in_progress svg { animation: ws-step-spin 1.1s linear infinite; }
@keyframes ws-step-spin { to { transform: rotate(360deg); } }
.ws-step__key { flex: none; min-width: 1.4rem; font: 600 .68rem/1 var(--font-mono, monospace); color: var(--dim); }
.ws-step__title { flex: 1 1 auto; min-width: 0; font-size: .84rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-step.is-completed .ws-step__title, .ws-step.is-skipped .ws-step__title { color: var(--muted); }
.ws-step.is-skipped .ws-step__title { text-decoration: line-through; }
.ws-step.is-current .ws-step__title { font-weight: 600; }
.ws-step__more { flex: none; width: 2.2rem; height: 2.2rem; opacity: .6; }
.ws-step__kids { flex: none; font-size: .68rem; font-weight: 650; color: var(--dim); font-variant-numeric: tabular-nums; }
.ws-step.has-kids > .ws-step__row .ws-step__title { font-weight: 600; }
.ws-step.has-kids > .ws-step__row .ws-step__head[aria-expanded="false"] > .ws-step__chev { transform: rotate(-90deg); }
.ws-step__live { color: var(--step); font-weight: 600; }
.ws-step__verified { cursor: pointer; }
.ws-step__verified > svg { color: var(--ok); }
.ws-step__verified > strong { flex: none; color: var(--ok); font-weight: 650; }
.ws-step__proof { min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-step__verified.is-whole .ws-step__proof { white-space: normal; }
.ws-step__row:hover .ws-step__more, .ws-step__more:focus-visible, .ws-step__more[aria-expanded="true"] { opacity: 1; }
.ws-step__body { display: grid; gap: .3rem; margin: 0 .35rem .35rem 2.2rem; padding: .1rem 0 .2rem .55rem; border-left: 2px solid color-mix(in srgb, var(--step) 35%, transparent);
  font-size: .78rem; color: var(--ink); }
.ws-step__body p { margin: 0; }
.ws-step__line { display: flex; align-items: center; gap: .35rem; color: var(--muted); }
.ws-step__line svg { flex: none; display: block; display: block; }
.ws-step__verified { color: var(--ok); }
.ws-step__tools > span { display: flex; flex-wrap: wrap; gap: .25rem; }
.ws-step__call { padding: .05rem .4rem; border-radius: 999px; font-size: .7rem; color: var(--ok); background: color-mix(in srgb, var(--ok) 11%, transparent); }
.ws-step__call.is-failed { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); }
.ws-step__call.is-retried { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.ws-plan__actions { display: flex; align-items: center; gap: .4rem; margin-top: .25rem; }
.ws-plan__go { flex: 1 1 auto; min-height: 2.5rem; background: var(--plan); border-color: transparent; color: var(--accent-ink); }
.ws-plandock.is-draft .ws-plan__go { background: linear-gradient(135deg, var(--indigo), var(--violet)); }
.ws-plan__side { flex: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: var(--r-md); }
.ws-plan__history { list-style: none; margin: .1rem 0 .3rem; padding: 0; display: grid; gap: .25rem; font-size: .74rem; }
.ws-plan__history li { display: flex; align-items: center; gap: .4rem; }
.ws-plan__history li > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.ws-plan__history time { flex: none; color: var(--dim); font-size: .7rem; }
.ws-planedit { display: grid; gap: .5rem; margin-bottom: .5rem; }
.ws-planedit__row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: .45rem; align-items: start; }
.ws-planedit__fields { display: grid; gap: .3rem; }
.ws-chip--plan { color: var(--indigo); }
/* A conversation with an unsent draft: a small pencil beside its name, next to the running or unread dot. */
/* A conversation's new name writing itself out in the sidebar (chatLabel): a caret after the letters so far. */
.ws-row__label.is-naming::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em;
  background: var(--accent); border-radius: 1px; animation: ws-name-caret .7s steps(1) infinite; }
@keyframes ws-name-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ws-row__label.is-naming::after { animation: none; } }
.ws-draftmark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; color: var(--muted); }
.ws-draftmark svg { display: block; width: 16px; height: 16px; stroke-width: 1.8; }
/* Plan Mode: its chip in the composer and its row in the + sheet, in a blue to purple gradient when on. */
.ws-modechip--plan[aria-pressed="true"] { color: var(--accent-ink); border-color: transparent; background: linear-gradient(135deg, var(--indigo), var(--violet)); }
.ws-inputbox.is-planning { box-shadow: 0 0 0 1px color-mix(in srgb, var(--indigo) 55%, transparent), 0 0 0 4px color-mix(in srgb, var(--indigo) 14%, transparent); }
.ws-addrow--plan[aria-checked="true"] { background: linear-gradient(135deg, color-mix(in srgb, var(--indigo) 16%, transparent), color-mix(in srgb, var(--violet) 18%, transparent)); }
.ws-addrow--plan[aria-checked="true"] .ws-addrow__icon { color: var(--accent-ink); background: linear-gradient(135deg, var(--indigo), var(--violet)); }
.ws-addrow--plan[aria-checked="true"] .ws-menuswitch { background: var(--indigo); }
@media (prefers-reduced-motion: reduce) {
  .ws-step__icon.is-in_progress svg, .ws-plan__dot { animation: none; }
  .ws-plandock__bar i, .ws-step__head > .ws-step__chev, summary::before { transition: none; }
}
.ws-bar__place { display: flex; align-items: center; gap: .5rem; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; }
.ws-bar__place > * { flex: none; }
.ws-bar__place > .ws-bar__where, .ws-bar__place > .ws-lineage { flex: 0 1 auto; min-width: 0; }
.ws-bar__place > .ws-bar__sub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ws-bar__where { overflow: hidden; text-overflow: ellipsis; }
.ws-lineage { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .05rem .45rem; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--cyan, var(--accent)); font: inherit; font-size: .74rem; cursor: pointer; }
.ws-lineage span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-lineage:hover, .ws-lineage:focus-visible { border-color: var(--accent); }

/* context stack: detach and re-attach */
.ws-stack__open { display: grid; gap: .1rem; min-width: 0; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 0; cursor: pointer; }
.ws-stack__open:disabled { cursor: default; }
.ws-stack li.is-detached { opacity: .55; border-style: dashed; }
.ws-button--small { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem; font-size: .74rem; white-space: nowrap; flex: 0 0 auto; }

/* connections: a small graph */
.ws-connections { display: grid; gap: 1rem; margin-top: .6rem; }
.ws-graph { display: grid; justify-items: center; gap: 0; }
.ws-graph__level { display: grid; gap: .35rem; width: 100%; }
.ws-graph__edge { width: 2px; height: 1rem; background: var(--line); border-radius: 8px; }
.ws-node { display: flex; align-items: center; gap: .55rem; width: 100%; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-node:hover, .ws-node:focus-visible { border-color: var(--accent); }
.ws-node.is-current { border-color: var(--accent); background: var(--accent-surface); cursor: default; }
.ws-node__text { flex: 1; min-width: 0; display: grid; gap: .05rem; }
.ws-node__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.ws-node__text small { color: var(--muted); font-size: .72rem; }
.ws-node > svg:last-child { color: var(--dim); flex: 0 0 auto; }
.ws-graph__group h3 { margin-top: 0; }
.ws-graph__nodes { display: grid; gap: .35rem; }
.ws-row-actions--start { justify-content: flex-start; margin-top: .3rem; }
.ws-row-actions--inline { display: inline-flex; margin: 0; gap: .35rem; }
.ws-row-actions--inline .ws-button { text-transform: none; letter-spacing: 0; font-size: .78rem; padding: .3rem .55rem; }

/* "#" references in the composer */
.ws-imports { display: grid; gap: .35rem; margin-bottom: .45rem; }
.ws-import { border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 10px; background: var(--panel); overflow: hidden; animation: ws-rise .18s ease; }
.ws-import__head { display: flex; align-items: center; }
.ws-import__toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem; padding: .4rem .55rem; border: 0; background: none; color: var(--ink); font: inherit; font-size: .84rem; text-align: left; cursor: pointer; }
.ws-import__toggle > svg:last-child { color: var(--dim); transition: transform .15s ease; flex: 0 0 auto; }
.ws-import__toggle[aria-expanded="true"] > svg:last-child { transform: rotate(90deg); }
.ws-import__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ws-import__count { margin-left: auto; color: var(--muted); font-size: .74rem; white-space: nowrap; }
.ws-import__remove { width: 2rem; height: 2rem; }
.ws-import__items { list-style: none; margin: 0; padding: .2rem .4rem .45rem; display: grid; gap: .15rem; max-height: 14rem; overflow-y: auto; border-top: 1px solid var(--line); }
.ws-import__item { display: flex; align-items: center; gap: .5rem; padding: .35rem .35rem; border-radius: 10px; cursor: pointer; font-size: .82rem; }
.ws-import__item:hover { background: var(--panel-strong); }
.ws-import__item > svg { color: var(--muted); flex: 0 0 auto; display: block; }
.ws-import__item input { margin: .15rem 0 0; accent-color: var(--accent); }
.ws-import__item span { display: grid; gap: .1rem; min-width: 0; }
.ws-import__item strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-import__item small { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ws-palette li > svg, .ws-palette li > .ws-cicon { flex: 0 0 auto; align-self: center; }
/* A cited Workspace item inside an answer's text. */
.ws-refchip--cite { vertical-align: .05em; margin: 0 .1em; padding: .05rem .45rem; font-size: .8em; line-height: 1.5; cursor: default; }
button.ws-refchip--cite { cursor: pointer; }
/* The Workspace items an answer cites, once each, under it (decorateRefs). */
.ws-refsources { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .7rem; }
.ws-refsources__label { color: var(--dim); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-right: .15rem; }
.ws-refsources .ws-refchip--cite { margin: 0; font-size: .78rem; }
.ws-refchip--cite span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-refchip { display: inline-flex; align-items: center; gap: .3rem; max-width: 16rem; padding: .15rem .5rem; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-size: .76rem; }
.ws-refchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-refchip small { color: var(--muted); }
.ws-refchip button { display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.ws-refchip--button { cursor: pointer; }
.ws-refchip--button:hover, .ws-refchip--button:focus-visible { border-color: var(--accent); }
.ws-imported { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .1rem 0 .35rem; }
.ws-imported__label { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; color: var(--muted); }
.ws-imported__item { display: flex; align-items: center; gap: .45rem; }
.ws-chosen { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.ws-pick { display: grid; gap: .15rem; max-height: 18rem; overflow-y: auto; margin-top: .5rem; }
.ws-pick__row { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .45rem .5rem; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.ws-pick__row:hover, .ws-pick__row:focus-visible { background: var(--panel-strong); }
.ws-pick__row[aria-selected="true"] { background: var(--accent-surface); }
.ws-pick__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-pick__check { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 8px; border: 1.5px solid var(--muted); flex: 0 0 auto; color: var(--accent-ink); }
.ws-pick__row[aria-selected="true"] .ws-pick__check { background: var(--accent); border-color: var(--accent); }
.ws-pick__thumb { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 8px; overflow: hidden; background: var(--panel-strong); color: var(--muted); flex: 0 0 auto; }
.ws-pick__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ws-dialog input[type="search"] { width: 100%; font: inherit; font-size: .9rem; padding: .55rem .65rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; }
.ws-dialog textarea + h3, .ws-dialog input + textarea { margin-top: .5rem; }
/* Settings > Memory on a phone: the Add row and the summary's two buttons stay one row each. */
.ws-dialog .ws-row:has(> input[type="text"] + .ws-button) { flex-wrap: nowrap; align-items: stretch; }
.ws-dialog .ws-row:has(> input[type="text"] + .ws-button) > input { flex: 1 1 auto; width: auto; min-width: 0; }
.ws-dialog textarea[maxlength="6000"] + .ws-row-actions { flex-wrap: nowrap; }
.ws-dialog textarea[maxlength="6000"] + .ws-row-actions .ws-button { white-space: nowrap; }
@media (max-width: 520px) {
  .ws-dialog textarea[maxlength="6000"] + .ws-row-actions { gap: .4rem; }
  .ws-dialog textarea[maxlength="6000"] + .ws-row-actions .ws-button { padding-inline: .6rem; gap: .3rem; font-size: .8rem; }
}
.ws-dialog > div > input + textarea { margin-top: .5rem; }

/* images: tabs, albums, trash */
/* Images: one box, one row, one style: the tabs, a divider, then search, saved only and the
   options menu as icons the size of the tabs. An open search widens the box on wide screens
   and takes the tabs' place on phones. */
.ws-imgbar > .ws-page-tools { margin: 0; flex-wrap: nowrap; gap: 0; align-items: stretch; width: fit-content; max-width: 100%; height: 2.6rem;
  padding: .2rem; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.ws-imgbar > .ws-page-tools.is-searching { width: min(100%, 44rem); }
/* Albums, where the tabs were: a page of its own, a segment of the pill. Archive and Trash say where you are, with the way back. */
.ws-imgalbums { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 100%; padding: 0 .7rem;
  border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.ws-imgalbums:hover, .ws-imgalbums:focus-visible { background: var(--accent-surface); }
.ws-imgalbums > svg, .ws-imgwhere svg { display: block; flex: none; }
.ws-imgwhere { flex: none; display: inline-flex; align-items: center; gap: .2rem; height: 100%; padding-right: .55rem; font-size: .9rem; }
.ws-imgwhere > .ws-toolbtn { width: 2rem; }
.ws-imgtools { display: flex; align-items: center; gap: .1rem; min-width: 0; margin-left: .3rem; padding-left: .3rem; border-left: 1px solid var(--line); }
.ws-imgtools .ws-page-search, .ws-imgtools .ws-imgtools__close { display: none; }
.is-searching > .ws-imgtools { flex: 1; }
.is-searching .ws-imgtools .ws-page-search { display: flex; flex: 1; min-width: 0; height: 100%; padding: 0 .45rem; gap: .45rem; border: 0; border-radius: 0; background: none; box-sizing: border-box; }
.ws-imgtools .ws-page-search input { height: 100%; padding: 0; font-size: .86rem; }
/* The x beside the field closes and clears it; no second, built-in clear button. */
.ws-imgtools .ws-page-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.is-searching .ws-imgtools .ws-imgtools__close { display: inline-grid; }
.is-searching .ws-imgtools .ws-imgtools__open { display: none; }
.ws-toolbtn { flex: none; display: inline-grid; place-items: center; width: 2.2rem; height: 100%; border-radius: 10px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.ws-toolbtn:hover, .ws-toolbtn:focus-visible { color: var(--ink); }
.ws-toolbtn[aria-pressed="true"], .ws-toolbtn[aria-expanded="true"] { color: var(--ink); background: var(--accent-surface); }
@media (max-width: 640px) {
  .ws-imgbar > .ws-page-tools.is-searching { width: 100%; }
  .is-searching > :is(.ws-imgalbums, .ws-imgwhere), .is-searching .ws-imgtools > :not(.ws-page-search):not(.ws-imgtools__close) { display: none; }
  .is-searching > .ws-imgtools { margin-left: 0; padding-left: 0; border-left: 0; }
}
.ws-page-tools--start { justify-content: flex-start; }
.ws-images .ws-page-tools { margin-bottom: .6rem; }
.ws-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: .8rem; }
.ws-album { display: grid; gap: .45rem; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; animation: ws-rise .22s cubic-bezier(.2, .7, .2, 1) both; }
.ws-album__cover { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); color: var(--muted); transition: border-color .15s ease, transform .15s ease; }
.ws-album:hover .ws-album__cover, .ws-album:focus-visible .ws-album__cover { border-color: var(--accent); transform: translateY(-2px); }
.ws-album__cover img { width: 100%; height: 100%; object-fit: cover; }
.ws-album__text { display: grid; gap: .1rem; min-width: 0; }
.ws-album__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-album__text small { display: flex; align-items: center; gap: .5rem; }
.ws-album__shared { display: inline-flex; align-items: center; gap: .2rem; color: var(--accent); }
.ws-album-head { display: grid; gap: .2rem; }
.ws-album-head .ws-back { margin-bottom: 0; }
.ws-album-head__title { font-size: 1.3rem; font-weight: 620; letter-spacing: -.015em; margin: 0; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink) !important; }
.ws-tile__days { position: absolute; bottom: .35rem; left: .35rem; padding: .1rem .4rem; border-radius: 999px; background: #0b101bcc; color: #eef2fb; font-size: .7rem; font-weight: 700; }
.ws-tile.is-dragging { opacity: .4; }
.ws-share { display: grid; gap: .4rem; margin-top: .6rem; }
.ws-share input { width: 100%; font: inherit; font-size: .85rem; padding: .55rem .65rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
.ws-dialog .ws-gallery--panel { max-height: 55vh; overflow-y: auto; }
.ws-page-tools .ws-button { display: inline-flex; align-items: center; gap: .4rem; }

/* ==== API: keys, activity, setup ==== */
.ws-apipage { gap: 1rem; }
.ws-apisummary h2 { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
/* API usage: the same cards and rows as an answer's Response info. */
.ws-apisummary { display: grid; gap: .85rem; }
.ws-apisummary .ws-info__section { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.ws-apisummary h3 { margin: 0 0 .45rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.ws-apisummary .ws-info__value strong { font-weight: 650; }
/* A summary's numbers: one tile each (API Activity's totals, the Black Box's week), the same everywhere. */
.ws-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; }
.ws-tile { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); min-width: 0; }
.ws-tile strong { font-size: 1.35rem; font-weight: 650; letter-spacing: -.02em; }
.ws-tile small { color: var(--muted); font-size: .74rem; }
.ws-tile__label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ws-tile--warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.ws-tile--warn strong { color: var(--warn); }
.ws-tile--bad { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.ws-tile--bad strong { color: var(--danger); }
/* A chart's title, the same on every page. */
.ws-info__section > .ws-charthead > h3 { margin: 0; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.ws-usage__detail { display: block; margin-top: .1rem; font-size: .76rem; font-weight: 400; color: var(--dim); }
.ws-breakdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: .85rem 1rem; align-items: start; }
.ws-usage__row { display: grid; grid-template-columns: minmax(0, 1fr) 4.4rem 5.4rem; column-gap: .75rem; row-gap: .45rem; align-items: baseline; padding: .6rem 0; font-size: .86rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.ws-usage__row:last-child { border-bottom: 0; }
.ws-usage__head { padding: .6rem 0 .4rem; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ws-usage__head span { text-align: right; }
.ws-usage__head span:first-child { text-align: left; }
.ws-usage__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-usage__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.ws-usage__bar { grid-column: 1 / -1; height: .3rem; border-radius: 999px; background: color-mix(in srgb, var(--line) 60%, transparent); overflow: hidden; }
.ws-usage__bar i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: var(--accent); }
.ws-info__card.ws-days__card { padding: 1rem .85rem .7rem; }
.ws-days { display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); gap: .35rem; align-items: end; }
.ws-days--dense { gap: 2px; }
.ws-days__col { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 0; }
.ws-days__bar { display: flex; flex-direction: column-reverse; width: 100%; max-width: 2.2rem; height: 5rem; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--line) 35%, transparent); }
.ws-days--dense .ws-days__bar { border-radius: 3px; }
.ws-days__col small { max-width: 100%; overflow: hidden; font-size: .68rem; color: var(--dim); white-space: nowrap; }
.ws-days__axis { display: flex; justify-content: space-between; margin-top: .45rem; font-size: .68rem; color: var(--dim); }
.ws-days__bar i { display: block; flex: none; }
/* A chart's key: an (i) in its top right corner; the popover shows each color with its name and total. */
/* A chart's title and its legend button, on the line above it. */
.ws-charthead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.25rem; }
.ws-info__section .ws-charthead h3 { margin: 0; }
.ws-charthead { margin-bottom: .45rem; }
.ws-days__key { flex: none; display: block; width: .7rem; height: .7rem; border-radius: 3px; }
.ws-page-tools__note { margin-right: auto; }
/* API Tools: skills, vector stores and containers, in the Response info card style. */
.ws-hosted__intro { margin: 0; }
.ws-hosted { display: grid; gap: .55rem; }
.ws-project .ws-hosted { border: 0; border-radius: 0; padding: 0; background: none; }
.ws-hosted__head { display: flex; align-items: center; gap: .6rem; min-height: 2rem; }
.ws-hosted__head .ws-group__head { flex: 1; min-width: 0; margin: 0; justify-content: flex-start; }
.ws-hosted__head .ws-group__head svg { color: var(--accent); flex: none; }
.ws-hosted__head .ws-group__head small { margin-left: .2rem; }
.ws-hosted__card { padding: 0 .85rem; }
/* A connection card's last buttons (Connect Google, Choose Repositories) keep clear of its edge. */
.ws-hosted__card > .ws-row-actions:last-child, .ws-hosted__card > .ws-store__alt:last-child { padding-bottom: .9rem; }
.ws-hosted__row { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto 2.2rem; align-items: center; column-gap: .65rem; padding: .55rem 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.ws-hosted__row:last-child { border-bottom: 0; }
.ws-hosted__icon { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--accent-surface); color: var(--accent); }
.ws-hosted__main { display: grid; gap: .1rem; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; }
button.ws-hosted__main { cursor: pointer; }
button.ws-hosted__main:hover strong { color: var(--accent); }
.ws-hosted__main strong, .ws-hosted__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-hosted__main strong { font-size: .9rem; font-weight: 650; }
.ws-hosted__main small { font-size: .76rem; color: var(--dim); }
.ws-hosted__row .ws-pill { justify-self: end; }
.ws-hosted__id { display: inline-flex; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ws-hosted__id code { display: block; max-width: 12rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-hosted__empty { margin: 0; padding: .8rem 0; font-size: .84rem; color: var(--muted); }
.ws-keygroup { border: 0 !important; padding: 0 !important; background: none !important; }
/* Each library's keys stand apart from the next library's heading. */
.ws-keylist { display: grid; gap: 2.25rem; }
.ws-keygroup .ws-group__head { margin-bottom: .8rem; }
/* A key group inside a section: a small heading over its own cards. */
.ws-keysub { display: grid; gap: .55rem; margin-top: 1.2rem; }
.ws-group__head + .ws-keysub { margin-top: 0; }
.ws-keysub__head { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ws-keysub__head svg { color: var(--accent); flex: none; }
.ws-keysub__head small { font-weight: 600; letter-spacing: 0; }
.ws-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: .7rem; }
.ws-keycard { position: relative; display: grid; gap: .6rem; padding: .85rem .9rem .8rem 1.05rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; animation: ws-rise .22s cubic-bezier(.2, .7, .2, 1) both; }
.ws-keycard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--key); }
.ws-keycard.is-paused, .ws-keycard.is-expired { opacity: .78; }
.ws-keycard.is-revoked { opacity: .55; }
.ws-keycard__head { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.ws-keycard__dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--key); flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--key) 22%, transparent); }
.ws-keycard__title { flex: 1; min-width: 0; display: grid; }
.ws-keycard__title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-keycard__title code { font-size: .74rem; color: var(--muted); }
.ws-pill { flex: 0 0 auto; font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; border: 1px solid currentColor; }
.ws-pill--active { color: var(--ok); }
.ws-pill--paused { color: var(--temp, var(--warn)); }
.ws-pill--expired, .ws-pill--revoked { color: var(--red); }
.ws-keycard__facts { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-size: .78rem; }
.ws-agentchips { display: inline-flex; }
.ws-agentchips img { width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 2px solid var(--agent); background: var(--paper); margin-right: -.3rem; }
/* Round agent avatars keep their shape: square box, never squeezed by a flex row, image cropped to fit. */
.ws-agent-pick img, .ws-menu img, .ws-agentchips img, .ws-agentpick img, .ws-log__agent img { flex: none; aspect-ratio: 1; object-fit: cover; box-sizing: border-box; }
.ws-agentchips img:last-child { margin-right: 0; }
.ws-keycard__numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.ws-keycard__numbers span { display: grid; min-width: 0; }
.ws-keycard__numbers strong { font-variant-numeric: tabular-nums; }
.ws-keycard__numbers small { font-size: .7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-meters { display: grid; gap: .45rem; margin-top: .55rem; }
.ws-meter__row { display: flex; justify-content: space-between; gap: .5rem; font-size: .76rem; margin-bottom: .2rem; }
.ws-keycard__nolimit { font-size: .76rem; margin-top: .45rem; }
/* Iris's own key: what runs on it. */
.ws-keycard__role { display: flex; gap: .45rem; align-items: center; margin: 0; font-size: .78rem; color: var(--muted); }
.ws-keycard__role svg { flex: none; display: block; color: var(--key); }
.ws-meters > small { font-size: .7rem; }
.ws-keycard__foot { display: flex; flex-wrap: wrap; gap: .4rem; }
.ws-apiempty { display: grid; justify-items: center; gap: .4rem; padding: 2rem 1rem; color: var(--muted); }
.ws-apiempty h2 { color: var(--ink); text-transform: none !important; letter-spacing: 0 !important; font-size: 1.2rem !important; }
.ws-keyform { display: grid; gap: .5rem; }
.ws-keyform h3 { margin-bottom: 0; }
.ws-keyform__basics { display: grid; gap: 1rem; margin-bottom: .5rem; }
.ws-keyform__basics .ws-picker__colors { margin-top: .15rem; gap: .4rem; overflow: visible; padding-bottom: 0; }
/* All colors on one row at any width: each swatch shrinks with the row and stays round. */
.ws-keyform__basics .ws-swatch { flex: 1 1 0; min-width: 0; max-width: 2.1rem; width: auto; height: auto; aspect-ratio: 1; }
.ws-grouprow { display: flex; align-items: center; gap: .4rem; }
.ws-grouprow select, .ws-grouprow input { flex: 1; min-width: 0; }
.ws-field small { font-size: .74rem; }
.ws-agentpicks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: .4rem; }
.ws-agentpick { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-agentpick img { width: 2rem; height: 2rem; border-radius: 50%; }
.ws-agentpick span { display: grid; flex: 1; min-width: 0; }
.ws-agentpick small { color: var(--muted); font-size: .72rem; }
.ws-agentpick[aria-pressed="true"] { border-color: var(--agent); background: color-mix(in srgb, var(--agent) 12%, var(--paper)); }
.ws-agentpick[aria-pressed="true"] > svg { color: var(--agent); }
.ws-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: .5rem; }
.ws-field { display: grid; gap: .25rem; font-size: .8rem; color: var(--muted); }
.ws-field input, .ws-field select, .ws-field textarea, .ws-filters select { width: 100%; font: inherit; font-size: .88rem; padding: .5rem .6rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
.ws-field--wide { grid-column: 1 / -1; }
.ws-keywarn { display: flex; gap: .5rem; align-items: center; padding: .6rem .75rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--temp, var(--warn)) 55%, transparent); background: color-mix(in srgb, var(--temp, var(--warn)) 10%, transparent); color: var(--ink); font-size: .86rem; margin: 0 0 .6rem; }
.ws-keywarn svg { color: var(--temp, var(--warn)); flex: 0 0 auto; display: block; }
.ws-copyrow { display: flex; gap: .4rem; align-items: center; min-width: 0; }
/* A field beside its Copy button gives way first, however large the text (min-content would hold it at its size). */
.ws-copyrow > :is(input, select) { width: 0; flex: 1 1 auto; min-width: 0; }
.ws-copyrow input { flex: 1; min-width: 0; font: inherit; font-family: var(--font-mono); font-size: .82rem; padding: .55rem .65rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
.ws-secret { border-color: var(--accent) !important; }
.ws-filters { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.ws-filters .ws-page-search { flex: 1 1 16rem; }
.ws-filters select { width: auto; flex: 0 1 auto; max-width: 12rem; padding: .45rem .5rem; border-radius: 999px; font-size: .82rem; }
.ws-logs__count { margin: 0; }
.ws-logs { display: grid; gap: .35rem; }
.ws-log { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; animation: ws-rise .18s ease both; }
.ws-log.is-failed { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.ws-log.is-open { border-color: var(--accent); }
.ws-log__head { display: grid; grid-template-columns: 3.6rem 5.4rem minmax(6rem, 1fr) minmax(7rem, 1.3fr) minmax(5rem, .9fr) 4.6rem 4.6rem 4.8rem 1rem; align-items: center; gap: .6rem;
  width: 100%; padding: .5rem .7rem; border: 0; background: none; color: var(--ink); font: inherit; font-size: .82rem; text-align: left; cursor: pointer; }
.ws-log__head:hover { background: var(--panel-strong); }
.ws-log__head > svg:last-child, .ws-call__head > svg:last-child { color: var(--muted); transform: rotate(-90deg); transition: transform .18s ease; }
.ws-log__head[aria-expanded="true"] > svg:last-child, .ws-call__head[aria-expanded="true"] > svg:last-child { transform: none; }
.ws-log__head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-log__status { display: inline-flex; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.ws-log__status i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.ws-log__status.is-error i { background: var(--red); } .ws-log__status.is-error { color: var(--red); }
.ws-log__status.is-cancelled i { background: var(--temp, var(--warn)); }
.ws-log__time { display: grid; font-variant-numeric: tabular-nums; }
.ws-log__time small, .ws-log__num small, .ws-log__agent small { color: var(--muted); font-size: .68rem; overflow: hidden; text-overflow: ellipsis; }
.ws-log__key { display: inline-flex; align-items: center; gap: .4rem; }
.ws-log__key i { width: .55rem; height: .55rem; border-radius: 50%; flex: 0 0 auto; }
.ws-log__key span { overflow: hidden; text-overflow: ellipsis; }
.ws-log__agent { display: flex; align-items: center; gap: .45rem; }
.ws-log__agent img { width: 1.4rem; height: 1.4rem; border-radius: 50%; flex: 0 0 auto; }
.ws-log__agent > svg { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; padding: .2rem; border-radius: 50%; background: var(--accent-surface); color: var(--accent); }
.ws-log__agent span { display: grid; min-width: 0; }
.ws-log__agent strong, .ws-log__agent small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-log__client { color: var(--muted); }
.ws-log__meta { display: none; color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.ws-log__num { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.ws-log__detail { padding: .3rem .9rem .9rem; border-top: 1px solid var(--line); background: var(--paper); display: grid; gap: .6rem; animation: ws-fade .18s ease; }
.ws-log__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: .4rem 1.2rem; }
.ws-log__section h3 { margin: .7rem 0 .35rem; }
.ws-log__section .ws-facts { margin: 0; font-size: .82rem; }
.ws-log__error { display: flex; gap: .45rem; align-items: center; margin: .5rem 0 0; padding: .55rem .7rem; border-radius: 8px; background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); font-size: .85rem; }
.ws-log__error svg { flex: 0 0 auto; display: block; }
.ws-json { margin: 0; max-height: 18rem; overflow: auto; padding: .6rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--code-bg); color: var(--code-ink); font-size: .76rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-transcript { display: grid; gap: .35rem; max-height: 28rem; overflow-y: auto; }
/* Generated images in a log: small previews with the original's type, size and dimensions. */
.ws-logimages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: .6rem; }
.ws-logimages figure { margin: 0; display: grid; gap: .3rem; }
.ws-logimages img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); }
.ws-logimages figcaption { font-size: .72rem; color: var(--muted); }
.ws-turn { position: relative; display: grid; gap: .2rem; padding: .5rem .65rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.ws-turn__role { display: flex; align-items: center; min-height: 1.4rem; padding-right: 2rem; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ws-turn--system .ws-turn__role, .ws-turn--instructions .ws-turn__role { color: var(--temp, var(--warn)); } .ws-turn--assistant .ws-turn__role { color: var(--accent); } .ws-turn--tool .ws-turn__role { color: var(--info); }
.ws-turn__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .84rem; line-height: 1.5; max-height: 16rem; overflow-y: auto; }
/* Each box in a log copies its whole content from its top-right corner, clear
   of the text (a turn's role line, a JSON box's right padding). */
.ws-copybox { position: relative; min-width: 0; }
.ws-copybox > .ws-json { padding-right: 2.6rem; }
.ws-boxcopy { position: absolute; top: .3rem; right: .3rem; width: 1.75rem; height: 1.75rem; border-radius: 7px; }
.ws-copybox > .ws-boxcopy { right: .7rem; color: var(--code-dim); }
.ws-copybox > .ws-boxcopy:hover, .ws-copybox > .ws-boxcopy:focus-visible { color: var(--code-ink); background: var(--code-line); }
/* Where the log kept only the start of a long text. */
.ws-fncalls ul { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .45rem; }
.ws-fncalls li { display: grid; gap: .25rem; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.ws-fncalls__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.ws-fncalls__head code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ws-fncalls__args { font-size: .76rem; color: var(--muted); overflow-wrap: anywhere; }
.ws-fncalls__error { color: var(--red); overflow-wrap: anywhere; }
.ws-log__cut { display: flex; gap: .4rem; align-items: center; margin: 0; color: var(--amber); font-size: .76rem; }
.ws-log__cut svg { flex: 0 0 auto; display: block; }
.ws-log__detail details summary { cursor: pointer; font-size: .8rem; color: var(--muted); margin: .35rem 0; }
.ws-row-actions--center { justify-content: center; }
/* API, Connect: the quick start, one app's steps, the developer pages. */
.ws-connect { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.ws-connect__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); min-width: 0; }
.ws-connect__card h2 { margin: 0; }
.ws-connect__card > p { margin: 0; }
.ws-connect__field { display: grid; gap: .3rem; min-width: 0; }
.ws-connect__label { font-size: .76rem; font-weight: 600; color: var(--muted); }
.ws-connect__field select { flex: 1; min-width: 0; font: inherit; font-family: var(--font-mono); font-size: .82rem; padding: .5rem .6rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
.ws-connect__key { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; font-size: .84rem; }
.ws-connect__choices { flex-wrap: wrap; justify-self: start; max-width: 100%; }
.ws-connect__steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; font-size: .86rem; overflow-wrap: anywhere; }
.ws-connect__links { flex-wrap: wrap; }
.ws-codeblock { border: 1px solid var(--code-line); border-radius: 10px; overflow: hidden; background: var(--code-bg); }
.ws-codeblock__head { display: flex; justify-content: space-between; align-items: center; padding: .3rem .4rem .3rem .8rem; background: var(--code-head); border-bottom: 1px solid var(--code-line); color: var(--code-dim); font-size: .78rem; }
.ws-codeblock__head .ws-button { background: none; color: var(--code-ink); border-color: var(--code-line); }
.ws-codeblock pre { margin: 0; padding: .8rem .9rem; overflow-x: auto; color: var(--code-ink); font-size: .8rem; line-height: 1.55; }
/* Narrow screens: a log row becomes a two-line card. */
@media (max-width: 900px) {
  /* Line one: status, model, credits. Line two: when, key, app, tokens and
     latency as one quiet summary (the columns don't fit a phone). */
  .ws-log__head { grid-template-columns: auto minmax(0, 1fr) auto 1rem; grid-template-areas: "status agent credits chev" "meta meta meta chev"; row-gap: .35rem; column-gap: .7rem; }
  .ws-log__status { grid-area: status; } .ws-log__agent { grid-area: agent; }
  .ws-log__num:nth-of-type(7) { grid-area: credits; } .ws-log__meta { grid-area: meta; display: block; }
  .ws-log__head > svg { grid-area: chev; }
  .ws-log__time, .ws-log__key, .ws-log__client, .ws-log__num:nth-of-type(6), .ws-log__num:nth-of-type(8) { display: none; }
  .ws-keycard__numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-filters select { flex: 1 1 calc(50% - .45rem); max-width: none; }
}
.ws-log__section h3 { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: .8rem 0 .4rem; font-weight: 700; }
.ws-project .ws-log__section { border: 0; padding: 0; background: none; border-radius: 0; }
.ws-project .ws-log__detail details, .ws-project .ws-log__detail section { min-width: 0; }
.ws-bar__place .ws-tempbadge { margin-left: 0; }

/* On/off items in a menu: a small switch at the end. */
.ws-menu button[role="menuitemcheckbox"] > span:not(.ws-menuswitch) { flex: 1; }
.ws-menuswitch { position: relative; flex: none; width: 1.9rem; height: 1.1rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background-color .15s ease; }
.ws-menuswitch::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--knob); box-shadow: var(--knob-shadow); transition: transform var(--dur-fast) var(--ease-out); }
.ws-menu [aria-checked="true"] .ws-menuswitch { background: var(--accent); }
.ws-menu [aria-checked="true"] .ws-menuswitch::after { transform: translateX(.8rem); }
/* Attach, Tools and Modes (the + button): a sheet that fits its content; Camera, Photos and Files as tiles with the icon
   centered over the word; then rows, an icon in a circle, a title over a line of detail, and a chevron or a switch. */
.ws-sheet.ws-sheet--fit { height: auto; max-height: min(92dvh, 52rem); }
.ws-sheet.ws-sheet--fit .ws-sheet__body { padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); }
.ws-addtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: .6rem 0 .75rem; }
.ws-addtiles--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ws-addtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; min-height: 5.5rem; padding: .8rem .5rem;
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); cursor: pointer; }
.ws-addtile svg { display: block; color: var(--muted); }
.ws-addtile:active { transform: scale(.97); }
.ws-addrows { display: grid; gap: .4rem; }
.ws-addrow { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .65rem .8rem; font: inherit; text-align: left; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent); border: 0; border-radius: var(--r-lg, 16px); cursor: pointer; }
.ws-addrow__icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: var(--muted);
  background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ws-addrow__icon svg { display: block; }
.ws-addrow__text { flex: 1 1 auto; min-width: 0; display: grid; gap: .1rem; }
.ws-addrow__text strong { font-weight: 600; }
.ws-addrow__text small { color: var(--muted); font-size: .82rem; }
.ws-addrow__end { flex: none; display: grid; place-items: center; color: var(--muted); }
.ws-addrow__end svg { display: block; }
.ws-addrow[aria-checked="true"] .ws-menuswitch { background: var(--accent); }
.ws-addrow[aria-checked="true"] .ws-menuswitch::after { transform: translateX(.8rem); }
/* The model box's Effort and Permissions rows, and the pages they open: each choice's mark in its color, in a soft
   circle of it; the name over what it does; a tick on the current one. */
.ws-pickopt--setting { --tint: var(--accent); }
.ws-pickopt__badge { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; color: var(--tint);
  background: color-mix(in srgb, var(--tint) 14%, transparent); }
.ws-pickopt__badge svg { display: block; }
.ws-choices__lead { margin: 0 0 .7rem; font-size: .88rem; }
.ws-choices { display: grid; gap: .45rem; }
.ws-choice { --tint: var(--accent); display: flex; align-items: center; gap: .85rem; width: 100%; padding: .75rem .85rem; font: inherit; text-align: left;
  color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid transparent; border-radius: var(--r-lg, 16px); cursor: pointer; }
.ws-choice[aria-checked="true"] { border-color: color-mix(in srgb, var(--tint) 55%, transparent); background: color-mix(in srgb, var(--tint) 9%, transparent); }
.ws-choice__mark { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: var(--tint);
  background: color-mix(in srgb, var(--tint) 14%, transparent); }
.ws-choice__mark svg { display: block; }
.ws-choice__text { flex: 1 1 auto; min-width: 0; display: grid; gap: .12rem; }
.ws-choice__text strong { font-weight: 600; }
.ws-choice__text small { color: var(--muted); font-size: .84rem; }
.ws-choice__tick { flex: none; display: grid; place-items: center; width: 1.4rem; color: var(--tint); }
.ws-choice__tick svg { display: block; }
.ws-choice:active { transform: scale(.985); }
/* Effort's mark: four rising bars, the lit ones in its color. */
.ws-level { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.ws-level i { display: block; width: 3px; border-radius: 2px; background: color-mix(in srgb, currentColor 28%, transparent); }
.ws-level i:nth-child(1) { height: 5px; } .ws-level i:nth-child(2) { height: 8px; } .ws-level i:nth-child(3) { height: 11px; } .ws-level i:nth-child(4) { height: 14px; }
.ws-level i.is-on { background: currentColor; }
@media (prefers-reduced-motion: reduce) { .ws-menuswitch, .ws-menuswitch::after { transition: none; } }
/* Rail tools: folded into one button above the avatar; open, they grow upward. */
.ws-rail__drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s cubic-bezier(.2, .7, .2, 1); }
.ws-rail__drawer[data-open="true"] { grid-template-rows: 1fr; }
.ws-rail__drawer-inner { min-height: 0; width: var(--rail-w); overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 0 .2rem; }
.ws-rail__drawer-inner > * { opacity: 0; transform: translateY(.6rem) scale(.9); transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .2, 1); }
.ws-rail__drawer[data-open="true"] .ws-rail__drawer-inner > * { opacity: 1; transform: none; }
.ws-rail__drawer[data-open="true"] .ws-rail__drawer-inner > :nth-last-child(1) { transition-delay: .02s; }
.ws-rail__drawer[data-open="true"] .ws-rail__drawer-inner > :nth-last-child(2) { transition-delay: .05s; }
.ws-rail__drawer[data-open="true"] .ws-rail__drawer-inner > :nth-last-child(3) { transition-delay: .08s; }
.ws-rail__drawer[data-open="true"] .ws-rail__drawer-inner > :nth-last-child(4) { transition-delay: .11s; }
.ws-rail__drawer[data-open="true"] .ws-rail__drawer-inner > :nth-last-child(5) { transition-delay: .14s; }
.ws-rail__drawer[data-open="false"] .ws-rail__drawer-inner > * { visibility: hidden; transition: opacity .12s ease, transform .16s ease, visibility 0s .2s; }
.ws-rail__drawer[data-open="true"] .ws-rail__drawer-inner { padding-bottom: .45rem; }
.ws-rail__toggle[aria-expanded="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (prefers-reduced-motion: reduce) { .ws-rail__drawer, .ws-rail__drawer-inner > * { transition: none !important; } }
/* The last row of search results: switch to the archive and Trash and back. */
.ws-searchui__more { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; margin-top: .4rem; padding: .6rem; border: 1px dashed var(--line); border-radius: 10px;
  background: none; color: var(--muted); font: inherit; font-size: .85rem; cursor: pointer; }
.ws-searchui__more:hover, .ws-searchui__more:focus-visible { color: var(--ink); border-color: var(--muted); }
/* A new chat: blank. Search can be pulled down over it (initPullToSearch). */
.ws-blank { flex: 1; min-height: 100%; }
.ws-searchui.is-pulled[open] { animation: none; }
.ws-searchui.is-pulled[open]::backdrop { animation: none; }
.ws-searchui::backdrop { opacity: var(--sheet-p, 1); }
/* Only the backdrop reads --sheet-p, set every frame of a pull: its own value on the dialog's children keeps the change
   from restyling everything inside it each frame (measured: ~100 elements a frame). */
.ws-searchui > * { --sheet-p: 1; }
.ws-searchui__clear[hidden] { display: none; }

/* Sources: a chip at the end of a cited paragraph, one pill under the answer,
   and the sheet that lists them. */
.ws-siteicon { flex: none; border-radius: 4px; object-fit: contain; background: #fff; }
.ws-siteicon--letter { display: inline-grid; place-items: center; background: var(--accent-surface); color: var(--accent); font: 800 .62rem/1 var(--font-ui); border-radius: 4px; }
/* The chip sits inside the line (its negative margins keep the line's height)
   and stays with the sentence's last word (.ws-cite-glue). */
.ws-cite { display: inline-flex; align-items: center; gap: .25rem; max-width: 10rem; margin: -.3rem 0 -.3rem .15rem; padding: .1rem .38rem .1rem .22rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-strong); color: var(--muted); font: 600 .66rem/1.1 var(--font-ui); vertical-align: middle; cursor: pointer; }
.ws-cite-glue { white-space: nowrap; }
.ws-cite span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ws-cite small { color: var(--dim); font-weight: 700; }
.ws-cite:hover, .ws-cite:focus-visible { color: var(--ink); border-color: var(--muted); }
.ws-sourcepill { display: inline-flex; align-items: center; gap: .5rem; margin-top: .55rem; padding: .3rem .75rem .3rem .4rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font: 600 .82rem/1.4 var(--font-ui); cursor: pointer; }
.ws-sourcepill small { color: var(--dim); }
.ws-sourcepill:hover, .ws-sourcepill:focus-visible { border-color: var(--muted); }
.ws-sourcepill__icons { display: inline-flex; }
.ws-sourcepill__icons > * { border: 2px solid var(--panel); border-radius: 50%; box-sizing: content-box; }
.ws-sourcepill__icons > * + * { margin-left: -6px; }
.ws-sheet { position: fixed; inset: auto 0 0 0; width: min(100%, 44rem); height: min(92dvh, 52rem); max-height: none; max-width: none; margin: 0 auto; padding: 0;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--panel); color: var(--ink);
  display: flex; flex-direction: column; transform: translateY(42%); transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.ws-sheet:not([open]) { display: none; }
.ws-sheet[data-state="full"] { transform: none; }
.ws-sheet[open] { animation: ws-sheet-in .28s cubic-bezier(.2, .7, .2, 1); }
.ws-sheet::backdrop { background: rgb(2 6 17 / .55); animation: ws-fade .2s ease; }
@keyframes ws-sheet-in { from { translate: 0 60%; } }
.ws-sheet__grip { display: grid; place-items: center; padding: .55rem 0 .2rem; touch-action: none; }
.ws-sheet__grip span { width: 2.6rem; height: .3rem; border-radius: 999px; background: var(--line); }
.ws-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 0 .6rem .4rem 1.1rem; border-bottom: 1px solid var(--line); touch-action: none; }
.ws-sheet__head h2 { margin: 0; font-size: .95rem; }
.ws-sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .2rem 1.1rem calc(42% + 1rem + env(safe-area-inset-bottom, 0px)); }
.ws-sheet[data-state="full"] .ws-sheet__body { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
.ws-sheet__label { margin: 1rem 0 .3rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ws-sheet__list { display: grid; }
.ws-sourcerow { display: grid; gap: .2rem; padding: .8rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ws-sourcerow:last-child { border-bottom: 0; }
.ws-sourcerow__site { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .8rem; }
.ws-sourcerow strong { font-size: .95rem; line-height: 1.35; }
.ws-sourcerow small { color: var(--dim); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sourcerow:hover strong, .ws-sourcerow:focus-visible strong { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .ws-sheet, .ws-sheet[open] { transition: none; animation: none; } }

/* Phones: the avatar sits beside the name only; the message starts on its own line below them and runs the full
   width, with room to breathe (wrapping its first lines beside the avatar crowded them against it, and a list's
   numbers hung into the avatar's space). */
@media (max-width: 700px) {
  .ws-messages { --page-x: .85rem; }
  .ws-msg { display: block; }
  .ws-msg::after { content: ""; display: block; clear: both; }
  .ws-msg > .ws-msg__avatar { float: left; margin: 0 .7rem 0 0; }
  .ws-msg > div:not(.ws-msg__avatar) { display: block; }
  .ws-msg__head { min-height: 2rem; align-items: center; align-content: center; }
  .ws-msg > div > :not(.ws-msg__head), .ws-msg__body > * { clear: left; }
  .ws-msg__head + * { margin-top: .5rem; }
}
/* Drag and arrange. Individual transform properties (rotate, scale, translate)
   keep the wiggle, the lift and the slide of neighbours from overriding each
   other or a row's own transform. */
.ws-nav img { -webkit-user-drag: none; }
/* The arrange bar covers the sidebar's header instead of pushing the list
   down: nothing may move under the finger as a drag begins. (On tablets the
   sidebar is fixed, which holds the bar already; relative there undid the
   slide-over and left its buttons over the chat.) */
@media (min-width: 1101px), (max-width: 780px) { .ws-side { position: relative; } }
.ws-arrange:not([hidden]) { position: absolute; z-index: 6; top: .35rem; left: .5rem; right: .5rem; display: flex; align-items: center; gap: .6rem; padding: .45rem .45rem .45rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-strong); box-shadow: var(--shadow); font-size: .8rem; line-height: 1.3; color: var(--muted); }
.ws-arrange span { flex: 1; min-width: 0; }
.ws-arrange .ws-button { flex: 0 0 auto; padding: .4rem .9rem; }
.ws-arranging .ws-nav [data-drag] { animation: ws-wiggle .3s ease-in-out infinite alternate; }
.ws-arranging .ws-nav .ws-row[data-drag] { animation-name: ws-wiggle-row; }
.ws-arranging .ws-nav li:nth-child(2n) > [data-drag], .ws-arranging .ws-nav li:nth-child(2n) .ws-folder__head > [data-drag], .ws-arranging .ws-rail__libraries > [data-drag]:nth-child(2n) { animation-delay: -.15s; }
@keyframes ws-wiggle { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
@keyframes ws-wiggle-row { from { rotate: -.6deg; } to { rotate: .6deg; } }
.ws-lift { scale: 1.04; transition: scale .12s ease; }
.ws-dragging { opacity: .3; }
.ws-dragging [data-drag] { animation: none !important; }
.ws-ghost, :is(.ws-tree, .ws-rail) .ws-ghost { position: fixed; z-index: 1000; margin: 0; pointer-events: none; scale: 1.06; opacity: .97; animation: none !important; box-shadow: 0 14px 34px rgb(0 0 0 / .5); background: var(--panel-strong); border-radius: 12px; }
.ws-is-dragging, .ws-is-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) {
  .ws-arranging .ws-nav [data-drag] { animation: none; outline: 1px dashed var(--muted); outline-offset: -3px; }
}

/* A chat answering now: a softly glowing green dot. An answer you haven't
   seen yet: a blue dot. Read chats have none. */
.ws-dot { flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 50%; margin-inline: .35rem .1rem; }
.ws-dot--active { background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: ws-dot-glow 1.6s ease-in-out infinite; }
.ws-dot--unread { background: var(--info); }
@keyframes ws-dot-glow { 0%, 100% { box-shadow: 0 0 2px 1px color-mix(in srgb, var(--ok) 40%, transparent); } 50% { box-shadow: 0 0 8px 3px color-mix(in srgb, var(--ok) 65%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ws-dot--active { animation: none; box-shadow: 0 0 6px 2px color-mix(in srgb, var(--ok) 50%, transparent); } }

/* What a run searches and reads, as it happens. */
.ws-research { display: grid; gap: .3rem; margin: .1rem 0 .4rem; font-size: .84rem; color: var(--muted); }
.ws-research__step { display: flex; align-items: center; gap: .45rem; margin: 0; min-width: 0; }
.ws-research__step > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-research__step.is-current { color: var(--ink); }
.ws-research__step.is-current > span::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: ws-research-dots 1.2s steps(4, end) infinite; }
@keyframes ws-research-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.ws-research__step--ask .ws-research__agent { width: 18px; height: 18px; flex: none; border-radius: 50%; }
.ws-research__step--ask > .ws-research__task { flex: 1 1 auto; min-width: 0; }
.ws-research__step--ask > .ws-research__agent::after, .ws-research__step--ask > .ws-research__outcome::after { content: none; animation: none; }
.ws-research__outcome { display: inline-grid; place-items: center; flex: none; color: var(--ok); }
.ws-research__step.is-failed .ws-research__outcome { color: var(--warn); }
.ws-chip--asked { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink); }
.ws-chip--asked.is-failed { color: var(--muted); }
.ws-chip--asked .ws-chip__agent { width: 14px; height: 14px; flex: none; border-radius: 50%; }
.ws-research__sources { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; }
.ws-research__source { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .78rem; max-width: 12rem; }
.ws-research__source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-research__source:hover, .ws-research__source:focus-visible { color: var(--ink); border-color: var(--accent); }
/* The browser while it works: picture, title and address, Stop; one row. */
.ws-browse { box-sizing: border-box; display: flex; align-items: center; gap: .65rem; width: 100%; max-width: 30rem; margin: .1rem 0 .45rem; padding: .45rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ws-browse__shot { flex: none; width: 4.5rem; height: 2.8rem; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); display: grid; place-items: center; color: var(--muted); cursor: zoom-in; }
.ws-browse__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; margin: 0; border: 0; border-radius: 0; max-width: none; }
.ws-browse__shot--empty { cursor: default; }
.ws-browse__shot:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ws-browse__main { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.ws-browse__main strong, .ws-browse__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-browse__main strong { font-size: .84rem; }
.ws-browse__main small { font-size: .75rem; color: var(--muted); }
.ws-browse__stop { flex: none; }
.ws-shot__stage { cursor: default; touch-action: auto; padding: 0 max(.5rem, env(safe-area-inset-right, 0px)) 0 max(.5rem, env(safe-area-inset-left, 0px)); }
.ws-shot__stage img { transform: none; border-radius: 6px; }
.ws-shot__url { justify-content: flex-start; }
.ws-shot__url p { color: var(--code-ink); font-size: .78rem; }

/* Response info: label and value rows in cards, then the run behind the answer. */
.ws-info { display: grid; gap: .85rem; }
.ws-info__section h3 { margin: 0 0 .45rem; }
.ws-info__card { margin: 0; padding: 0 .85rem; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.ws-info__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .62rem 0; font-size: .88rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.ws-info__row:last-child { border-bottom: 0; }
.ws-info__label { flex: none; color: var(--muted); }
.ws-info__value { min-width: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ws-info__value code { margin-left: .3rem; padding: .1rem .45rem; font-size: .8rem; border-radius: 6px; background: var(--panel-strong); }
.ws-info__note { margin: -.35rem 0 0; font-size: .76rem; color: var(--dim); }
.ws-info__list li { padding: .55rem 0; font-size: .86rem; overflow-wrap: anywhere; border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.ws-info__list li:last-child { border-bottom: 0; }
.ws-info__list a { color: var(--accent); text-decoration: none; } .ws-info__list a:hover { text-decoration: underline; }
.ws-info__actions { display: flex; justify-content: flex-end; }
.ws-run__step { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .15rem .6rem; align-items: baseline; padding: .6rem 0; font-size: .86rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.ws-run__step:last-child { border-bottom: 0; }
.ws-run__when, .ws-run__ms { color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-run__name { font-weight: 600; }
.ws-run__meta { grid-column: 2 / -1; color: var(--dim); font-size: .78rem; overflow-wrap: anywhere; }
.ws-run__step.is-failed .ws-run__name, .ws-run__error { color: var(--red); }
.ws-run__io { grid-column: 2 / -1; }
.ws-run__io summary { cursor: pointer; color: var(--muted); font-size: .78rem; }
.ws-run__io pre { max-height: 18rem; overflow: auto; margin: .35rem 0 0; padding: .5rem; border-radius: 8px; background: var(--panel); font-size: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-fieldset { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; margin: .5rem 0; }
.ws-fieldset legend { font-size: .8rem; color: var(--muted); padding: 0 .3rem; }

/* A key's library on its card. */
.ws-chip--library { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink); }
/* A file row's search index state: a small muted icon before its change badge. */
.ws-filerow__index { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.ws-filerow__index:empty { display: none; }
.ws-filerow .ws-filerow__index svg { color: var(--muted); opacity: .75; }
.ws-filerow .ws-filerow__index.is-busy svg { color: var(--accent); opacity: 1; }
.ws-filerow .ws-filerow__index.is-failed svg { color: var(--red); opacity: .8; }
/* A second meter in the same box (the file search index) sits a little apart from the first's note. */
.ws-storage small + .ws-storage__row { margin-top: .35rem; }

/* ==== the Store: plugins, skills and agents ==== */
/* A page like API: its tabs, the search row, then sections in the API Tools style. */
.ws-page-tools > .ws-page-search { align-self: stretch; padding-block: 0; }
.ws-page-tools > .ws-page-search input { padding: 0; }
/* A list's "‹ Store" sits on the list it leads back from, as "‹ Albums" does on an album. */
.ws-project > .ws-back { margin-bottom: 0; }
.ws-store__more { display: inline-flex; align-items: center; gap: .2rem; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ws-group__head .ws-store__more svg { color: var(--muted); }
.ws-group__head .ws-store__more:hover svg, .ws-group__head .ws-store__more:focus-visible svg { color: var(--ink); }
.ws-store__tiles { display: flex; gap: 12px; min-height: 56px; padding: .85rem 0; overflow: hidden; }
.ws-store__tile { flex: 0 0 56px; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 14px; background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.ws-store__tile .ws-storeicon { width: 56px; height: 56px; border-radius: 14px; }
.ws-store__tile[data-off="true"] .ws-storeicon { opacity: .45; }
.ws-store__tile--more { box-sizing: border-box; border: 1px solid var(--line); background: var(--panel); font: inherit; font-weight: 750; font-size: .95rem; }
.ws-storeicon { box-sizing: border-box; display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 12px; color: var(--tint, var(--accent));
  background: color-mix(in srgb, var(--tint, var(--accent)) 15%, var(--panel)); border: 1px solid color-mix(in srgb, var(--tint, var(--accent)) 30%, transparent); }
.ws-storeicon svg { display: block; }
.ws-storeicon--image { overflow: hidden; background: var(--panel); border-color: var(--line); }
.ws-storeicon--image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ws-store__row { display: grid; grid-template-columns: minmax(0, 1fr) 2.2rem; align-items: center; column-gap: .5rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.ws-store__row:last-child { border-bottom: 0; }
.ws-store__main { display: flex; align-items: center; gap: .8rem; min-width: 0; padding: .6rem 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-store__main:hover strong span { color: var(--accent); }
.ws-store__text { display: grid; gap: .12rem; min-width: 0; }
.ws-store__text strong { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .92rem; font-weight: 700; }
.ws-store__text strong span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-store__text > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .8rem; }
.ws-store__tag { flex: none; padding: .05rem .4rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .66rem; font-weight: 700; }
.ws-store__tag.is-update { border-color: var(--accent); color: var(--accent); }
/* An installed tile with an update: a small accent dot, like the row's Update tag. */
.ws-store__tile { position: relative; }
.ws-store__tile[data-update="true"]::after { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--panel); }
.ws-store__row[data-off="true"] .ws-storeicon { opacity: .5; }
.ws-store__action { justify-self: end; }
/* details sheet */
.ws-store__hero { display: flex; align-items: center; gap: .8rem; margin: .9rem 0 .4rem; }
.ws-store__hero .ws-storeicon { width: 3.4rem; height: 3.4rem; border-radius: 14px; }
.ws-store__hero > div { display: grid; gap: .1rem; min-width: 0; }
.ws-store__hero strong { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-store__about { margin: .2rem 0 .7rem; color: var(--ink); font-size: .9rem; line-height: 1.45; }
.ws-store__actions { justify-content: flex-start; margin: 0 0 .9rem; }
.ws-store__actions .ws-button { display: inline-flex; align-items: center; gap: .4rem; }
.ws-store__actions .ws-store__danger { color: var(--red); }
.ws-store__actions .ws-store__danger:hover { border-color: var(--red); }
.ws-keyform .ws-field > .ws-segmented { justify-self: start; }
.ws-store__lines { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; color: var(--ink); font-size: .86rem; }
.ws-store__note { margin: .35rem 0 0; font-size: .78rem; }
.ws-store__toolshead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 1rem 0 .3rem; }
.ws-store__toolshead .ws-sheet__label, .ws-store__toolshead .ws-button { margin: 0; }
.ws-hosted__row.ws-store__tool { grid-template-columns: 1.9rem minmax(0, 1fr) auto 2.5rem; }
.ws-store__tool .ws-storeicon { width: 1.9rem; height: 1.9rem; border-radius: 8px; }
.ws-store__tool .ws-switch { display: flex; justify-content: flex-end; }
.ws-store__toolkind { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.ws-store__header { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: .5rem; }
.ws-store__header--one { grid-template-columns: minmax(0, 1fr); }
/* The connection dialog: every field (text, address, choice, secret) the same box. */
.ws-connform .ws-field input, .ws-connform .ws-field select { box-sizing: border-box; height: 2.6rem; margin: 0; padding: 0 .65rem; font: inherit; font-size: .9rem; border-radius: 9px; }
.ws-connform .ws-field select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; cursor: pointer; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right .65rem center; background-size: 1rem 1rem; }
/* Google Workspace: each service's name, then its level */
.ws-google__level { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(8.5rem, 12rem); align-items: center; column-gap: .75rem; padding: .55rem 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
:is(.ws-google__level, .ws-perm__row) select { box-sizing: border-box; width: 100%; height: 2.4rem; margin: 0; padding: 0 2.2rem 0 .65rem; font: inherit; font-size: .88rem; color: var(--ink); background-color: var(--paper); border: 1px solid var(--line); border-radius: 9px; appearance: none; -webkit-appearance: none; cursor: pointer; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right .65rem center; background-size: 1rem 1rem; }
:is(.ws-google__level, .ws-perm__row) .ws-hosted__main small { white-space: normal; }
.ws-google__level select:disabled { opacity: .55; cursor: not-allowed; }
:is(.ws-google__level, .ws-perm__row) select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* HTTP Request's connections: icon, name and address, then Edit and Remove at one size */
.ws-hosted__row.ws-store__conn { grid-template-columns: 1.9rem minmax(0, 1fr) 2.2rem 2.2rem; column-gap: .4rem; }
/* GitHub's connection: the token and Connect in one row, as tall as each other */
.ws-store__token { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .6rem 0; }
.ws-store__token:has(> .ws-iconbtn) { grid-template-columns: minmax(0, 1fr) auto 2.2rem; }
.ws-store__token input { box-sizing: border-box; width: 100%; height: 2.4rem; margin: 0; padding: 0 .65rem; font: inherit; font-size: .88rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; }
.ws-store__token .ws-button { box-sizing: border-box; display: inline-flex; align-items: center; gap: .35rem; height: 2.4rem; }
.ws-store__note a { color: var(--accent); text-decoration: none; } .ws-store__note a:hover { text-decoration: underline; }
/* The Database plugin's connection dialog: host and port, database and user, each pair on one row. */
.ws-dbform__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.ws-dbform__pair--port { grid-template-columns: minmax(0, 1fr) 5.5rem; }
.ws-agentform .ws-edit__name input { font-size: .95rem; }
.ws-agentform textarea { min-height: 8rem; resize: vertical; }
.ws-store__picks h3 { margin: .3rem 0 .35rem; color: var(--muted); font-size: .8rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ws-store__picks .ws-muted { font-size: .8rem; }
/* your own agents' marks: their icon on their color */
.ws-agentmark { box-sizing: border-box; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; color: var(--agent); background: color-mix(in srgb, var(--agent) 20%, var(--panel)); }
.ws-agentmark svg { display: block; }
/* Iris's own agents: Iris's mark filling the box, the agent's icon centered in a small badge on its lower right corner. */
.ws-agentmark--iris { position: relative; background: none; overflow: visible; }
.ws-agentmark--iris > img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.ws-agentmark__badge { position: absolute; right: -14%; bottom: -14%; width: 58%; height: 58%; box-sizing: border-box; display: grid;
  place-items: center; border-radius: 50%; color: #fff; background: var(--agent); box-shadow: 0 0 0 1.5px var(--panel-strong); }
.ws-agentmark__badge svg { display: block; width: 70%; height: 70%; }
.ws-agentmark.ws-msg__avatar { width: 2rem; height: 2rem; color: var(--agent); background: color-mix(in srgb, var(--agent) 20%, var(--panel)); }
.ws-agent-pick .ws-agentmark { width: 22px; height: 22px; }
.ws-msg__status .ws-agentmark { width: 1.1rem; height: 1.1rem; }
.ws-edit__icon .ws-agentmark { width: 2rem; height: 2rem; }

/* Account and billing: "Use a reset" sits under the facts, in the settings-row style. */
.ws-setting-row--first { margin-top: .7rem; border-top: 1px solid var(--line); }
/* Admin: the account list, then one row per change (icon, label, its
   controls at the end). Every row is the same height; every button the same
   width, so the inputs and buttons line up from row to row. */
.ws-admin__list { margin-top: .4rem; }
.ws-admin__list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-admin__control { display: flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: .45rem .3rem; border-bottom: 1px solid var(--line); }
.ws-admin__control > svg { color: var(--muted); flex: 0 0 auto; }
.ws-admin__control > strong { flex: 1; min-width: 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-admin__controls { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.ws-admin__controls .ws-button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 4.25rem; height: 2.2rem; padding: 0; font-size: .8rem; }
.ws-admin__controls input[type="number"] { box-sizing: border-box; width: 4.5rem; height: 2.2rem; margin: 0; font: inherit; font-size: .88rem; padding: 0 .5rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; appearance: textfield; -moz-appearance: textfield; }
.ws-admin__controls input[type="number"]::-webkit-inner-spin-button, .ws-admin__controls input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ws-admin__controls .ws-switch { display: inline-flex; align-items: center; }

/* Scheduler: the bell in the top bar and its panel. The count sits on the
   bell's corner; the panel lists the newest notifications, one row each:
   an icon by kind, the title on one line, up to two lines of text, when. */
.ws-bell { position: relative; }
.ws-bell__count { position: absolute; top: .1rem; right: .1rem; box-sizing: border-box; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; display: grid; place-items: center;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .62rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; }
.ws-menu--notes { box-sizing: border-box; width: min(23rem, calc(100vw - 16px)); padding: .3rem; }
.ws-notes__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.2rem; padding: 0 .3rem 0 .6rem; }
.ws-notes__head strong { font-size: .9rem; }
.ws-menu .ws-notes__all { display: inline-flex; width: auto; gap: .35rem; padding: .35rem .55rem; font-size: .8rem; color: var(--muted); }
.ws-notes__list { display: grid; gap: .1rem; }
.ws-menu .ws-note { align-items: flex-start; gap: .6rem; padding: .55rem .6rem; }
.ws-note__icon { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--paper); color: var(--muted); }
.ws-menu .ws-note__icon svg { color: inherit; padding: 0; }
.ws-note.is-unread .ws-note__icon { background: var(--accent-surface); color: var(--accent); }
.ws-note__icon--failed, .ws-note.is-unread .ws-note__icon--failed { color: var(--red); }
.ws-note__icon--paused, .ws-note.is-unread .ws-note__icon--paused { color: var(--temp, var(--warn)); }
.ws-note__text { display: grid; gap: .12rem; flex: 1; min-width: 0; }
.ws-note__text strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-note__text span { font-size: .8rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ws-note__text small { font-size: .72rem; color: var(--dim, var(--muted)); }
.ws-notes__empty { margin: 0; padding: .4rem .6rem .7rem; font-size: .82rem; color: var(--muted); }

/* The Scheduled page: one card per schedule, like an API key's. A column, so
   a card made taller by its neighbour keeps its rows and its footer at the bottom. */
.ws-schedcard { display: flex; flex-direction: column; }
.ws-schedcard > .ws-keycard__foot { margin-top: auto; }
.ws-schedcard__open { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-schedcard__open small { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-schedcard__open:hover strong, .ws-schedcard__open:focus-visible strong { color: var(--accent); }
.ws-pill--running { color: var(--accent); }
.ws-keycard.is-running { opacity: 1; }
.ws-schedcard__agent, .ws-schedcard__notify, .ws-schedcard__failed { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; }
.ws-schedcard__agent img { width: 1.1rem; height: 1.1rem; border-radius: 50%; }
.ws-schedcard__agent .ws-agentmark { width: 1.1rem; height: 1.1rem; }
.ws-schedcard__failed { color: var(--red); }
.ws-schedcard__note { margin: 0; font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.ws-schedcard__note--failed { color: var(--red); }
.ws-schednote { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; padding: .55rem .7rem; border: 1px solid color-mix(in srgb, var(--temp, var(--warn)) 45%, var(--line)); border-radius: 10px; font-size: .84rem; }
.ws-schednote > svg { flex: none; color: var(--temp, var(--warn)); }
.ws-schednote > span { flex: 1; min-width: 0; }
.ws-schednote .ws-button { display: inline-flex; align-items: center; gap: .35rem; }
/* The edit dialog: the same fields as a connection's; days are seven equal buttons. */
.ws-schedform .ws-fields { grid-template-columns: minmax(0, 1fr); }
.ws-schedform .ws-field[hidden] { display: none; }
.ws-daypicks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.ws-daypicks button { box-sizing: border-box; height: 2.6rem; min-width: 0; padding: 0; font: inherit; font-size: .8rem; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--muted); cursor: pointer; }
.ws-daypicks button[aria-pressed="true"] { background: var(--accent-surface); border-color: var(--accent); color: var(--ink); font-weight: 700; }
.ws-schedform__preview { margin: 0; min-height: 1.3rem; font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
.ws-schedform__preview strong { color: var(--ink); }
.ws-schedform textarea { min-height: 7rem; resize: vertical; }
/* A new schedule's Approve card: when, the next runs, who and how you hear. */
.ws-approval__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .9rem; margin: 0; font-size: .84rem; }
.ws-approval__facts dt { color: var(--muted); }
.ws-approval__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: .1rem .8rem; }
.ws-chip--scheduled { display: inline-flex; align-items: center; gap: .25rem; }

/* What an answer can draw with (workspace.js answerExtras): icons, status
   badges, a row of stat cards, split bars and a headline figure. */
.ws-mdicon { flex: none; width: 1.1em; height: 1.1em; vertical-align: -.18em; margin-right: .3em; color: var(--muted); }
.ws-msg__body ul.ws-iconlist { list-style: none; padding-left: 0; }
.ws-iconlist > li { position: relative; padding-left: 1.85rem; margin: .8rem 0; }
.ws-mdicon--lead { position: absolute; left: 0; top: .2em; width: 1.25rem; height: 1.25rem; margin: 0; }
.ws-status { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; margin: -.2rem 0; padding: .14rem .55rem; border-radius: 999px; vertical-align: middle; white-space: nowrap;
  font: 650 .78rem/1.3 var(--font-ui); --tone: var(--accent); color: color-mix(in srgb, var(--tone) 78%, var(--ink)); background: color-mix(in srgb, var(--tone) 16%, transparent); }
.ws-status--ok { --tone: var(--ok); } .ws-status--warn { --tone: var(--warn); } .ws-status--no { --tone: var(--danger); }
.ws-status svg { flex: none; }
.ws-msg__body p.ws-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(6.5rem, 100%), 1fr)); gap: .5rem; margin: .7rem 0; }
.ws-stat { display: grid; align-content: start; gap: .2rem; min-width: 0; padding: .65rem .75rem; border-radius: 14px; background: var(--panel-strong); }
.ws-stat .ws-mdicon { margin: 0 0 .15rem; width: 1.15rem; height: 1.15rem; }
.ws-stat small { color: var(--muted); font-size: .76rem; line-height: 1.3; }
.ws-stat strong { font-size: 1.3rem; line-height: 1.2; overflow-wrap: anywhere; }
.ws-msg__body p.ws-blocks { display: grid; gap: 1rem; margin: .8rem 0; }
.ws-split { display: grid; gap: .35rem; }
.ws-split__head, .ws-split__foot { display: flex; justify-content: space-between; gap: .75rem; }
.ws-split__head strong { font-size: 1.02rem; line-height: 1.3; }
.ws-split__head strong:last-child { text-align: right; flex: none; }
.ws-split__foot small { color: var(--muted); font-size: .8rem; }
.ws-split__track { display: block; height: .55rem; border-radius: 999px; overflow: hidden; background: var(--coral); }
.ws-split__track > span { display: block; height: 100%; background: var(--indigo); border-radius: 999px 0 0 999px; }
.ws-hero { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .9rem; row-gap: .15rem; }
.ws-hero .ws-mdicon { grid-row: span 2; width: 2.6rem; height: 2.6rem; margin: 0; color: var(--ink); }
.ws-hero .ws-mdicon--sun { color: var(--amber); } .ws-hero .ws-mdicon--storm, .ws-hero .ws-mdicon--alert { color: var(--warn); }
.ws-hero .ws-mdicon--rain, .ws-hero .ws-mdicon--cloud { color: var(--indigo); }
/* A day's high and low, wherever they're drawn: warm and cool. */
.ws-mdicon--thermometerHigh { color: var(--coral); } .ws-mdicon--thermometerLow { color: var(--indigo); }
.ws-hero__main { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.ws-hero__main strong { font-size: 2.1rem; line-height: 1.1; }
.ws-hero__main small { color: var(--muted); font-size: 1rem; }
.ws-hero__note { grid-column: 2; }
.ws-chart { margin: .9rem 0; padding: .85rem .9rem .7rem; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.ws-chart__title { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .95rem; margin-bottom: .6rem; }
.ws-chart__title .ws-mdicon { margin: 0; }
.ws-chart__plot { position: relative; height: 13.5rem; }
.ws-chart__pie { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; gap: 1.1rem; }
.ws-chart--pie .ws-chart__plot { height: 9.5rem; }
.ws-chart__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .86rem; }
.ws-chart__legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: baseline; gap: .2rem .45rem; }
.ws-chart__legend i { width: .6rem; height: .6rem; border-radius: 50%; align-self: center; }
.ws-chart__legend span { color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.ws-chart__legend small { color: var(--dim); text-align: right; }
.ws-chart__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .35rem .8rem; margin-top: .55rem; }
.ws-chart__meta { display: flex; flex-wrap: wrap; gap: .1rem .7rem; color: var(--dim); font-size: .76rem; min-width: 0; padding-top: .2rem; }
.ws-chart__meta a { color: var(--muted); }
.ws-chart__data { flex: 0 0 auto; margin-left: auto; }
.ws-chart__data[open] { flex-basis: 100%; }
.ws-chart__data summary { display: flex; width: fit-content; align-items: center; gap: .3rem; margin-left: auto; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font: 600 .74rem/1.3 var(--font-ui); cursor: pointer; list-style: none; }
.ws-chart__data summary::-webkit-details-marker { display: none; }
.ws-chart__data[open] summary { color: var(--ink); border-color: var(--muted); }
.ws-chart__data .ws-table { justify-self: stretch; margin: .5rem 0 0; font-size: .84rem; background: none; }
/* A draw (random.draw): dice faces, coins, hands, straws and cards. A finished
   answer's draw lands with a little motion (.is-new); none when motion is reduced. */
.ws-draw { display: grid; justify-items: start; gap: .5rem; }
.ws-draw__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; perspective: 600px; }
.ws-draw:not(.ws-draw--ttt) .ws-draw__row { cursor: pointer; }
.ws-draw__caption { color: var(--muted); font-size: .82rem; }
/* The next move: shown under the newest answer only (renderMessages marks it). */
.ws-play { display: flex; flex-wrap: wrap; gap: .4rem; }
/* "Again" buttons send a message: the newest answer's only. A game's moves change their own answer, anywhere. */
.ws-msg__body .ws-play__button:not([data-game]) { display: none; }
.is-latest .ws-msg__body .ws-play__button:not([data-game]) { display: inline-flex; }
.ws-draw.is-past .ws-play { display: none; }
.ws-draw.is-past .ws-ttt__cell { pointer-events: none; }
.ws-play__button { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .7rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-strong); color: var(--ink); font: 600 .8rem/1.2 var(--font-ui); cursor: pointer; transition: transform .12s, border-color .12s; }
.ws-play__button:hover { border-color: var(--muted); transform: translateY(-1px); }
.ws-play__button:active { transform: scale(.96); }

/* Dice */
.ws-die { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: 2.75rem; height: 2.75rem; padding: .42rem; box-sizing: border-box;
  border-radius: .7rem; border: 1px solid var(--line); background: var(--panel-strong); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .22), 0 3px 6px rgb(0 0 0 / .18); }
.ws-die i { width: .46rem; height: .46rem; margin: auto; border-radius: 50%; }
.ws-die i.on { background: var(--ink); }
.ws-die--n { place-items: center; padding: 0; grid-template: 1fr / 1fr; font: 800 1.1rem/1 var(--font-ui); }

/* Coins: two faces; a tails coin rests turned over. */
.ws-coin { position: relative; width: 2.75rem; height: 2.75rem; }
.ws-coin__inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.ws-coin--tails .ws-coin__inner { transform: rotateY(180deg); }
.ws-coin__face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; font: 800 1.05rem/1 var(--font-ui); }
.ws-coin__face--heads { color: #5a4210; background: radial-gradient(circle at 35% 30%, #f6d77a, #d6a536 72%); box-shadow: inset 0 0 0 3px rgb(140 100 20 / .35), inset 0 0 0 5px #f6d77a; }
.ws-coin__face--tails { transform: rotateY(180deg); color: #353c4a; background: radial-gradient(circle at 35% 30%, #eef0f4, #a7afbd 72%); box-shadow: inset 0 0 0 3px rgb(80 90 105 / .35), inset 0 0 0 5px #eef0f4; }

/* Rock paper scissors: a fist shakes, then the throw. */
.ws-rps { position: relative; display: grid; justify-items: center; gap: .2rem; min-width: 5.2rem; padding: .6rem .8rem; border-radius: 14px; border: 1px solid transparent; background: var(--panel-strong); }
.ws-rps svg { color: var(--ink); }
.ws-rps__fist { position: absolute; top: .6rem; opacity: 0; }
.ws-rps strong { font-size: .92rem; }
.ws-rps small { color: var(--muted); font-size: .76rem; }
.ws-rps.is-win { border-color: var(--ok); box-shadow: 0 0 0 3px rgb(63 185 80 / .18); }
.ws-rps.is-lose { opacity: .75; }
.ws-rps__vs { align-self: center; color: var(--muted); font: 700 .8rem/1 var(--font-ui); }

/* Straws */
.ws-straw { display: grid; justify-items: center; gap: .3rem; min-width: 2.75rem; }
.ws-straw__stick { width: .5rem; height: calc(var(--len, 5) * .42rem + .6rem); border-radius: .25rem; background: linear-gradient(90deg, #ecd08e, #c99a3e); }
.ws-straw.is-short .ws-straw__stick { background: linear-gradient(90deg, #f29a9a, #d05a5a); }
.ws-straw small { max-width: 5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .78rem; }
.ws-straw.is-short small { color: var(--ink); font-weight: 700; }

/* Cards: a front and a back, so one can be dealt face down and turned. */
.ws-card { position: relative; width: 2.9rem; height: 4rem; }
.ws-card__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s; }
.ws-card.is-down .ws-card__inner { transform: rotateY(180deg); }
.ws-draw--cards .ws-card.is-down { cursor: pointer; }
.ws-draw--cards .ws-card.is-down:hover .ws-card__inner { transform: rotateY(180deg) translateY(-4px); }
.ws-draw--cards .ws-card.is-down:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: .45rem; }
.ws-card__front, .ws-card__back { position: absolute; inset: 0; display: grid; place-items: center; border-radius: .45rem; backface-visibility: hidden; box-shadow: 0 2px 5px rgb(0 0 0 / .25); }
.ws-card__front { border: 1px solid #d9d4c7; background: #f7f5f0; color: #1d2230; }
.ws-card--red .ws-card__front { color: #c8383a; }
.ws-card__front b { position: absolute; top: .25rem; left: .3rem; font: 800 .8rem/1 var(--font-ui); }
.ws-card__front .ws-card__corner { top: auto; left: auto; bottom: .25rem; right: .3rem; rotate: 180deg; }
.ws-card__back { transform: rotateY(180deg); border: 3px solid #f7f5f0;
  background: repeating-linear-gradient(45deg, #3d5a9e 0 4px, #5876c0 4px 8px); }

/* The wheel: segments clockwise from the top, the pointer above. */
.ws-wheel { position: relative; display: block; width: 9.5rem; height: 9.5rem; margin-top: .55rem; }
.ws-wheel::before { content: ""; position: absolute; z-index: 2; top: -.55rem; left: 50%; translate: -50% 0; border: .5rem solid transparent; border-top: .8rem solid var(--ink); border-bottom: 0; }
.ws-wheel__disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; border: 3px solid var(--panel-strong); box-shadow: 0 3px 10px rgb(0 0 0 / .25); }
.ws-wheel__label { position: absolute; left: 50%; top: 50%; width: 3.5rem; transform-origin: 0 50%; translate: 0 -50%;
  transform: rotate(calc(var(--a) - 90deg)) translateX(.9rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff; font: 700 .68rem/1 var(--font-ui); text-shadow: 0 1px 2px rgb(0 0 0 / .45); text-align: right; }
.ws-wheel__hub { position: absolute; z-index: 1; left: 50%; top: 50%; width: 1.3rem; height: 1.3rem; translate: -50% -50%; border-radius: 50%; background: var(--panel-strong); border: 2px solid var(--line); }
.ws-draw--wheel .ws-draw__caption { color: var(--ink); font-weight: 700; font-size: .95rem; }

/* The Magic 8-ball: a window, a blue die floating up with the answer. */
.ws-8ball { display: grid; place-items: center; width: 8rem; height: 8rem; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #5a5f6b, #15171c 55%, #050608); box-shadow: 0 4px 12px rgb(0 0 0 / .35); }
.ws-8ball__window { display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; background: radial-gradient(circle, #0d1a3d, #050a1c 70%); box-shadow: inset 0 0 0 3px #2a2e38; }
.ws-8ball__die { display: grid; place-items: start center; width: 4.7rem; height: 4rem; padding-top: .5rem; box-sizing: border-box;
  clip-path: polygon(50% 100%, 0 0, 100% 0); background: linear-gradient(#2f5bd6, #1f3f9e); }
.ws-8ball__die span { max-width: 3.4rem; color: #e8eeff; font: 700 .55rem/1.15 var(--font-ui); text-align: center; }
.ws-draw--8ball .ws-draw__caption { color: var(--ink); font-weight: 700; }

/* Tic-tac-toe */
.ws-ttt { display: grid; grid-template: repeat(3, 3rem) / repeat(3, 3rem); gap: .3rem; padding: .3rem; border-radius: .8rem; background: var(--line); }
.ws-ttt__cell { display: grid; place-items: center; padding: 0; border: 0; border-radius: .5rem; background: var(--panel-strong); color: var(--ink); cursor: pointer; transition: background .12s, transform .12s; }
.ws-ttt__cell:not(:disabled):hover { background: color-mix(in srgb, var(--panel-strong) 80%, var(--ink)); transform: scale(1.04); }
.ws-ttt__cell:disabled { cursor: default; }
.ws-ttt__cell.is-x { color: var(--indigo); }
.ws-ttt__cell.is-o { color: var(--coral); }
.ws-ttt__mark { stroke-width: 2.6; }
.ws-ttt__cell.is-line { background: color-mix(in srgb, var(--panel-strong) 70%, var(--ok)); }
.ws-ttt.is-over .ws-ttt__cell:not(.is-line) { opacity: .7; }

/* A game's moves, paged under its board. */
.ws-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: -.2rem 0 .6rem; }
.ws-pager__step { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel-strong); color: var(--ink); cursor: pointer; }
.ws-pager__step:disabled { opacity: .35; cursor: default; }
.ws-pager__label { font-size: .82rem; }
.ws-pager__line { flex-basis: 100%; color: var(--muted); font-size: .8rem; }
.ws-pager__score { flex-basis: 100%; color: var(--ink); font-size: .8rem; font-weight: 600; }

/* Higher or lower */
.ws-draw--hilo .ws-draw__row { align-items: center; }
.ws-hilo__guess { display: grid; justify-items: center; color: var(--muted); }
.ws-hilo__guess small { font: 700 .72rem/1 var(--font-ui); }
.ws-hilo__guess.is-ask small { font-size: 1.3rem; }

@media (prefers-reduced-motion: no-preference) {
  .ws-draw.is-play :is(.ws-die, .ws-rps, .ws-straw__stick, .ws-card, .ws-8ball) { animation: .55s cubic-bezier(.2, .8, .3, 1.15) calc(var(--i, 0) * 90ms) both ws-draw-land; }
  .ws-draw.is-play .ws-die { animation: .7s cubic-bezier(.2, .7, .3, 1) calc(var(--i, 0) * 110ms) both ws-die-tumble; }
  .ws-draw.is-play .ws-coin { animation: .95s cubic-bezier(.3, .1, .3, 1) calc(var(--i, 0) * 90ms) both ws-coin-toss; }
  .ws-draw.is-play .ws-coin__inner { animation: .95s cubic-bezier(.25, .1, .25, 1) calc(var(--i, 0) * 90ms) both ws-coin-spin; }
  .ws-draw.is-play .ws-coin--tails .ws-coin__inner { animation-name: ws-coin-spin-tails; }
  .ws-draw.is-play .ws-straw__stick { transform-origin: bottom; animation-name: ws-draw-grow; animation-duration: .7s; }
  .ws-draw.is-play .ws-straw.is-short .ws-straw__stick { animation: .7s ease calc(var(--i, 0) * 90ms) both ws-draw-grow, .4s ease .9s 2 ws-nudge; }
  .ws-draw--cards.is-play .ws-card { animation: .5s cubic-bezier(.2, .8, .3, 1) calc(var(--i, 0) * 140ms) both ws-card-deal; }
  .ws-draw--cards.is-play .ws-card:not(.is-down) .ws-card__inner { animation: .45s ease calc(var(--i, 0) * 140ms + .4s) both ws-card-turn; }
  .ws-draw.is-play .ws-rps__fist { animation: .9s ease-in-out calc(var(--i, 0) * 0ms) both ws-rps-shake; }
  .ws-draw.is-play .ws-rps__hand, .ws-draw.is-play .ws-rps strong { animation: .35s cubic-bezier(.2, .8, .3, 1.4) .9s both ws-rps-show; }
  /* Who won shows only once the hands do. */
  .ws-draw.is-play .ws-rps.is-win { animation: 1s step-end both ws-rps-unwon, .55s ease 1.25s both ws-win; }
  .ws-draw.is-play .ws-rps.is-lose { animation: 1s step-end both ws-rps-unlost; }
  .ws-draw--rps.is-play .ws-draw__caption, .ws-draw--hilo.is-play .ws-draw__caption, .ws-draw--8ball.is-play .ws-draw__caption { animation: .3s ease 1.2s both ws-fade; }
  .ws-draw--wheel.is-play .ws-draw__caption { animation: .35s cubic-bezier(.2, .8, .3, 1.4) 3.1s both ws-rps-show; }
  .ws-draw--wheel.is-play .ws-wheel__label.is-pick { animation: .5s ease 3.2s 2 ws-blink-soft; }
  .ws-draw.is-play .ws-8ball { animation: .9s ease both ws-8ball-shake; }
  .ws-draw.is-play .ws-8ball__die { animation: .8s ease .85s both ws-8ball-rise; }
  .ws-draw--hilo.is-play .ws-card:not(.is-down):nth-child(3) .ws-card__inner { animation: .5s ease .5s both ws-card-turn; }
  .ws-draw--ttt.is-play .ws-ttt__cell.is-last .ws-ttt__mark { stroke-dasharray: 60; animation: .5s ease .15s both ws-ttt-draw; }
  .ws-draw--ttt.is-play .ws-ttt__cell.is-line { animation: .5s ease .6s both ws-win; }
  .ws-draw__row:active :is(.ws-die, .ws-coin, .ws-card, .ws-8ball) { scale: .96; }
}
@keyframes ws-draw-land { from { opacity: 0; transform: translateY(-.6rem); } }
@keyframes ws-draw-grow { from { transform: scaleY(0); } }
@keyframes ws-die-tumble { 0% { opacity: 0; transform: translate(-1.6rem, -1.4rem) rotate(-300deg) scale(.6); } 60% { opacity: 1; transform: translate(.15rem, .1rem) rotate(12deg) scale(1.05); }
  80% { transform: translate(0, -.15rem) rotate(-4deg); } }
@keyframes ws-coin-toss { 0% { transform: translateY(0) scale(.9); } 45% { transform: translateY(-1.7rem) scale(1.15); } 85% { transform: translateY(.1rem) scale(1); } 92% { transform: translateY(-.25rem); } }
@keyframes ws-coin-spin { from { transform: rotateY(-1800deg); } }
@keyframes ws-coin-spin-tails { from { transform: rotateY(-1620deg); } to { transform: rotateY(180deg); } }
@keyframes ws-card-deal { from { opacity: 0; transform: translate(-3rem, -1.2rem) rotate(-18deg); } }
@keyframes ws-card-turn { from { transform: rotateY(180deg); } }
@keyframes ws-rps-shake { 0% { opacity: 1; transform: translateY(0) rotate(0); } 15%, 48%, 81% { transform: translateY(-.55rem) rotate(-14deg); } 31%, 64% { transform: translateY(.1rem) rotate(4deg); }
  97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ws-rps-show { from { opacity: 0; transform: scale(.4); } }
@keyframes ws-rps-unwon { from { border-color: transparent; box-shadow: none; } }
@keyframes ws-rps-unlost { from { opacity: 1; } }
@keyframes ws-win { 40% { transform: scale(1.08); } }
@keyframes ws-nudge { 50% { transform: translateY(.3rem); } }
@keyframes ws-blink-soft { 50% { opacity: .35; } }
@keyframes ws-8ball-shake { 0%, 100% { transform: none; } 12% { transform: translate(-.35rem, .1rem) rotate(-9deg); } 25% { transform: translate(.35rem, -.1rem) rotate(8deg); }
  38% { transform: translate(-.3rem, .05rem) rotate(-7deg); } 51% { transform: translate(.25rem, 0) rotate(6deg); } 64% { transform: translate(-.15rem, 0) rotate(-3deg); } 77% { transform: rotate(1deg); } }
@keyframes ws-8ball-rise { from { opacity: 0; transform: scale(.55) rotate(-25deg); filter: blur(2px); } }
@keyframes ws-ttt-draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
/* Maps (```map, Leaflet): the Workspace's colors over OpenStreetMap's tiles, darkened in the dark theme. */
.ws-map { display: grid; gap: .5rem; margin: .8rem 0; }
.ws-map__frame { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.ws-map__canvas { height: 20rem; background: var(--panel-strong); font: inherit; }
.ws-map__hint { position: absolute; z-index: 500; left: 50%; bottom: .7rem; translate: -50% 0; padding: .3rem .7rem; border-radius: 999px;
  background: rgb(0 0 0 / .6); color: #fff; font-size: .78rem; pointer-events: none; transition: opacity .2s; }
.ws-map.is-awake .ws-map__hint { opacity: 0; }
:root:not([data-theme="light"]) .ws-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.6); }
.ws-map .leaflet-container { font: inherit; background: var(--panel-strong); }
/* An answer's image rules (a border, rounded corners, a margin) would split the tiles apart. */
.ws-msg__body .ws-map .leaflet-container img { max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; display: block; }
.ws-map .leaflet-bar { border: 1px solid var(--line); box-shadow: none; }
.ws-map .leaflet-bar a { background: var(--panel-strong); color: var(--ink); border-color: var(--line); }
.ws-map .leaflet-bar a:hover { background: var(--panel); }
.ws-map .leaflet-popup-content-wrapper, .ws-map .leaflet-popup-tip { background: var(--panel-strong); color: var(--ink); box-shadow: 0 4px 14px rgb(0 0 0 / .3); }
.ws-map .leaflet-popup-content { margin: .6rem .8rem; }
.ws-map .leaflet-control-attribution { background: color-mix(in srgb, var(--panel-strong) 80%, transparent); color: var(--muted); font-size: .66rem; }
.ws-map .leaflet-control-attribution a { color: var(--muted); }
.ws-map__popup { display: grid; gap: .2rem; }
.ws-map__popup small { color: var(--muted); }
.ws-map__drop { position: absolute; left: 1px; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; rotate: -45deg;
  background: var(--pin, #4a7bd0); border: 2px solid #fff; box-shadow: 0 2px 5px rgb(0 0 0 / .35); }
.ws-map__drop b { rotate: 45deg; color: #fff; font: 800 .72rem/1 var(--font-ui); }
.ws-msg__body .ws-map__places, .ws-map__places { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ws-map__places button { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem .25rem .3rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-strong); color: var(--ink); font: 600 .8rem/1.2 var(--font-ui); cursor: pointer; }
.ws-map__places button:hover { border-color: var(--muted); }
.ws-map__places b { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; color: #fff; font-size: .68rem; }
@media (max-width: 700px) { .ws-map__canvas { height: 16rem; } }
/* On a phone, a row of cards or a draw starts below the avatar, like a table or code. */
@media (max-width: 700px) { .ws-msg__body > p:is(.ws-blocks, .ws-stats, :has(> :is(.ws-draw, .ws-stat, .ws-hero, .ws-split):first-child)) { clear: left; } }
.ws-chart__types { display: inline-flex; gap: .2rem; margin-left: auto; }
.ws-chart__type { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .5rem; border-radius: 999px; border: 1px solid transparent;
  background: none; color: var(--muted); font: 600 .74rem/1.2 var(--font-ui); cursor: pointer; }
.ws-chart__type[aria-pressed="true"] { border-color: var(--line); background: var(--panel-strong); color: var(--ink); }
.ws-chart__type:hover { color: var(--ink); }
/* Their badges and chart-type chips: icon and text centered, text on its capitals (as every chip in the Workspace). */
:is(.ws-status, .ws-chart__type) { justify-content: center; }
:is(.ws-status, .ws-chart__type) > svg { display: block; flex: none; }
:is(.ws-status, .ws-chart__type) > span:not(:has(> *)) { display: block; }
/* In an Iris Code session a draw shows a program's real output: there's nothing to roll or play again. */
.ws.is-code .ws-play { display: none; }
/* Interactive answers (answer-ui.js, docs/answer-extras.md): a working tool in an answer, in the Workspace's own design.
   One box like a chart's; its parts stack with one gap, and a row of parts stacks on a phone. Every icon with words is
   centered on them (flex, align-items: center), and controls are a finger's size. */
.ws-ui { display: grid; gap: .8rem; min-width: 0; margin: .9rem 0; padding: .85rem .95rem .95rem; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.ws-ui__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2rem; }
.ws-ui__title { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; font-weight: 700; font-size: .95rem; }
.ws-ui__title > svg { display: block; flex: none; margin: 0; color: var(--accent); }
.ws-ui__title > span { overflow-wrap: anywhere; }
/* The corner's actions: Show the Math, then Start Over. */
.ws-ui__actions { display: inline-flex; align-items: center; gap: .1rem; flex: none; margin: -.3rem -.4rem -.3rem 0; }
.ws-ui__mathbtn[aria-pressed="true"] { color: var(--accent); background: var(--accent-surface); }
.ws-ui__body { display: grid; gap: .9rem; min-width: 0; }
.ws-ui__body > *, .ws-ui__panel > *, .ws-ui__steppanel > *, .ws-ui__foldbody > * { min-width: 0; margin: 0; }
.ws-ui__note { margin: 0; color: var(--dim); font-size: .78rem; }
.ws-ui__trouble { margin: 0; color: var(--warn); font-size: .78rem; }
.ws-ui .ws-mdicon { margin: 0; vertical-align: 0; }
.ws-ui__text { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.ws-ui__text.is-small { color: var(--muted); font-size: .84rem; }
.ws-ui__text.is-lead { font-size: 1.04rem; }
.ws-ui__heading { display: flex; align-items: center; gap: .45rem; margin: .15rem 0 0; font-size: .92rem; }
.ws-ui__heading > svg { display: block; flex: none; }
/* Figures. */
.ws-ui__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); gap: .5rem; }
.ws-ui__stat strong { font-variant-numeric: tabular-nums; }
.ws-ui__stat[data-tone="ok"] strong { color: var(--ok); } .ws-ui__stat[data-tone="warn"] strong { color: var(--warn); }
.ws-ui__stat[data-tone="no"] strong { color: var(--danger); } .ws-ui__stat[data-tone="info"] strong { color: var(--accent); }
.ws-ui__statnote { color: var(--dim); font-size: .74rem; line-height: 1.3; }
.ws-ui__hero strong { font-variant-numeric: tabular-nums; }
/* The figure and its label share one middle with the icon: with no note under them the icon takes one row, not two (the
   empty second row and its gap pulled it below the figure's middle). */
.ws-ui__hero .ws-hero__main { align-items: center; }
.ws-ui__hero.is-single > .ws-mdicon { grid-row: auto; }
.ws-ui__callout { --tone: var(--info, var(--accent)); display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent); background: color-mix(in srgb, var(--tone) 9%, transparent); line-height: 1.5; }
.ws-ui__callout[data-tone="ok"] { --tone: var(--ok); } .ws-ui__callout[data-tone="warn"] { --tone: var(--warn); } .ws-ui__callout[data-tone="no"] { --tone: var(--danger); }
.ws-ui__calloutmark { display: flex; flex: none; color: var(--tone); }
.ws-ui__calloutmark > svg { display: block; }
.ws-ui__meter { display: grid; gap: .35rem; }
.ws-ui__meterhead, .ws-ui__fieldhead { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.ws-ui__meterlabel, .ws-ui__fieldhead label, .ws-ui__fieldlabel, .ws-ui__numberlabel { color: var(--muted); font-size: .84rem; font-weight: 550; }
.ws-ui__meterhead strong, .ws-ui__value { font-weight: 700; font-variant-numeric: tabular-nums; }
.ws-ui__track { display: block; height: .55rem; overflow: hidden; border-radius: 999px; background: var(--panel-strong); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ws-ui__track > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .18s var(--ease-out, ease-out); }
.ws-ui__meter[data-tone="ok"] .ws-ui__track > span { background: var(--ok); } .ws-ui__meter[data-tone="warn"] .ws-ui__track > span { background: var(--warn); }
.ws-ui__meter[data-tone="no"] .ws-ui__track > span { background: var(--danger); }
.ws-ui__split .ws-split__track > span { transition: width .18s var(--ease-out, ease-out); }
/* Inputs. */
.ws-ui__field { display: grid; gap: .4rem; min-width: 0; }
.ws-ui__slider input[type="range"] { width: 100%; height: 2rem; margin: 0; accent-color: var(--accent); background: none; cursor: pointer; touch-action: pan-y; }
.ws-ui__number { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.ws-ui__stepper { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.ws-ui__step { width: 2.4rem; height: 2.4rem; }
.ws-ui__numberinput { width: 4.5rem; padding: .35rem .2rem; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.ws-ui__numberinput::-webkit-outer-spin-button, .ws-ui__numberinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ws-ui__unit { color: var(--muted); font-size: .84rem; }
.ws-ui__toggle { margin: 0; }
.ws-ui__choice { display: flex; width: 100%; max-width: 100%; }
.ws-ui__choice button { flex: 1 1 0; min-width: 0; }
.ws-ui__choice button, .ws-ui__tabs button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.25rem; }
.ws-ui__choice button > svg, .ws-ui__tabs button > svg { display: block; flex: none; margin: 0; }
.ws-ui__select, .ws-ui__textinput { width: 100%; min-height: 2.6rem; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: .92rem; }
.ws-ui__select:focus-visible, .ws-ui__textinput:focus-visible, .ws-ui__numberinput:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; }
.ws-ui__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ws-ui__button { min-height: 2.5rem; }
.ws-ui__button > svg, .ws-ui__next > span > svg, .ws-ui__play > span > svg { display: block; flex: none; margin: 0; }
/* An answer icon on a button or a choice takes its color (a muted icon on the accent read as disabled). */
.ws-ui :is(.ws-ui__button, .ws-ui__choice button, .ws-ui__tabs button) .ws-mdicon { color: currentColor; }
.ws-ui__nexticon { display: flex; flex: none; }
/* Tables, charts and plots. */
.ws-ui__table { margin: 0; }
.ws-ui__table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ws-ui__table tr.is-lit > * { background: var(--accent-surface); }
.ws-ui__table tfoot td { font-weight: 700; border-top: 1px solid var(--line); }
.ws-ui__sort { display: inline-flex; align-items: center; gap: .25rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; }
.ws-ui__sort > svg { display: block; flex: none; }
.ws-ui__chart > .ws-chart, .ws-ui .ws-map { margin: 0; }
.ws-ui__chart > .ws-chart, .ws-ui__plot { margin: 0; border: 0; padding: 0; background: none; }
/* Cards. */
.ws-ui__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .55rem; }
.ws-ui__card { display: grid; align-content: start; gap: .35rem; min-width: 0; padding: .75rem .8rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-strong); color: var(--ink); font: inherit; text-align: left; }
button.ws-ui__card { cursor: pointer; }
button.ws-ui__card:hover { border-color: var(--line-strong, var(--muted)); }
.ws-ui__card[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-surface); }
.ws-ui__card[data-tone="ok"] { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); } .ws-ui__card[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.ws-ui__card[data-tone="no"] { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.ws-ui__cardhead { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.ws-ui__cardhead > svg { display: block; flex: none; color: var(--accent); }
.ws-ui__cardhead > strong { min-width: 0; overflow-wrap: anywhere; }
.ws-ui__badge { margin-left: auto; padding: .1rem .5rem; border-radius: 999px; background: var(--accent-surface); color: var(--accent); font-size: .72rem; font-weight: 650; white-space: nowrap; }
.ws-ui__cardvalue { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.ws-ui__cardtext { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.ws-ui__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.ws-ui__tag { padding: .08rem .45rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; }
/* Layout: a row of parts side by side (stacked on a phone), tabs, steps, folds. */
.ws-ui__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem 1rem; align-items: start; }
.ws-ui__tabbed { display: grid; gap: .75rem; }
.ws-ui__tabs { justify-self: start; max-width: 100%; overflow-x: auto; }
.ws-ui__panel { display: grid; gap: .8rem; }
.ws-ui__steps { display: grid; gap: .7rem; outline: none; }
.ws-ui__stephead { display: grid; gap: .1rem; }
.ws-ui__stepcount { color: var(--dim); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ws-ui__steptitle { font-size: 1rem; }
.ws-ui__dots { display: flex; gap: .3rem; }
.ws-ui__dots > button { flex: 1; height: .3rem; min-width: .6rem; padding: 0; border: 0; border-radius: 999px; background: var(--panel-strong); box-shadow: inset 0 0 0 1px var(--line-soft); cursor: pointer; }
.ws-ui__dots > .is-done { background: color-mix(in srgb, var(--accent) 55%, var(--panel-strong)); }
.ws-ui__dots > .is-current { background: var(--accent); }
.ws-ui__steppanel { display: grid; gap: .8rem; }
.ws-ui__stepnav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ws-ui__folds { display: grid; gap: .35rem; }
.ws-ui__fold { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-strong); }
.ws-ui__fold > summary { display: flex; align-items: center; gap: .45rem; min-height: 2.6rem; padding: .35rem .7rem; cursor: pointer; list-style: none; font-weight: 600; }
.ws-ui__fold > summary::-webkit-details-marker { display: none; }
.ws-ui__fold > summary > svg { display: block; flex: none; color: var(--muted); transform: rotate(-90deg); transition: transform .15s ease; }
.ws-ui__fold[open] > summary > svg { transform: none; }
.ws-ui__foldbody { display: grid; gap: .7rem; padding: 0 .8rem .8rem; }
/* Teaching: a checklist, a quiz, flashcards, a timeline. */
.ws-ui__checklist { display: grid; gap: .25rem; }
.ws-ui__checkhead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; margin-bottom: .3rem; }
.ws-ui__checkcount { color: var(--muted); font-size: .82rem; font-weight: 650; }
.ws-ui__checkrow { display: flex; align-items: flex-start; gap: .6rem; padding: .45rem .1rem; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.ws-ui__checkrow:last-child { border-bottom: 0; }
.ws-ui__checkrow input { flex: none; width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--accent); }
.ws-ui__checkrow > span { display: grid; gap: .1rem; min-width: 0; }
.ws-ui__checkrow small { color: var(--muted); font-size: .8rem; }
.ws-ui__checkrow.is-done strong { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--dim); }
.ws-ui__quiz { display: grid; gap: .7rem; }
.ws-ui__question { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.45; }
.ws-ui__options { display: grid; gap: .45rem; }
.ws-ui__option { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 2.9rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel-strong); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-ui__option:hover:not(:disabled) { border-color: var(--accent); }
.ws-ui__option:disabled { cursor: default; opacity: 1; }
.ws-ui__option > span:nth-child(2) { flex: 1; min-width: 0; }
.ws-ui__option > svg { display: block; flex: none; }
.ws-ui__letter { display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted); font-size: .76rem; font-weight: 700; }
.ws-ui__option.is-right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--panel-strong)); }
.ws-ui__option.is-right > svg { color: var(--ok); }
.ws-ui__option.is-wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--panel-strong)); }
.ws-ui__option.is-wrong > svg { color: var(--danger); }
.ws-ui__quizdone { display: grid; gap: .35rem; }
.ws-ui__score { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.ws-ui__flashcards { display: grid; gap: .6rem; }
.ws-ui__flash { position: relative; display: block; width: 100%; min-height: 9rem; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; perspective: 900px; }
.ws-ui__flashinner { position: relative; display: grid; min-height: 9rem; transform-style: preserve-3d; transition: transform .45s var(--ease-out, ease-out); }
.ws-ui__flash.is-flipped .ws-ui__flashinner { transform: rotateY(180deg); }
.ws-ui__face { grid-area: 1 / 1; display: grid; place-items: center; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-strong);
  font-size: 1.05rem; line-height: 1.45; text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ws-ui__face--back { transform: rotateY(180deg); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ws-ui__flashnav { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.ws-ui__flashnav > .ws-ui__stepcount { min-width: 4.5rem; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .ws-ui__flashinner { transition: none; transform: none !important; }
  .ws-ui__face { backface-visibility: visible; transform: none; }
  .ws-ui__flash .ws-ui__face--back, .ws-ui__flash.is-flipped .ws-ui__face--front { visibility: hidden; }
  .ws-ui__flash.is-flipped .ws-ui__face--back { visibility: visible; }
  .ws-ui__track > span, .ws-ui__split .ws-split__track > span { transition: none; }
}
.ws-ui__timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.ws-ui__timeline > li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .7rem; }
.ws-ui__rail { display: grid; grid-template-rows: auto 1fr; justify-items: center; }
.ws-ui__mark { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--panel-strong); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.ws-ui__mark > svg { display: block; margin: 0; color: inherit; }
.ws-ui__mark > i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); }
.ws-ui__timeline > li[data-tone="ok"] .ws-ui__mark { box-shadow: inset 0 0 0 1.5px var(--ok); color: var(--ok); } .ws-ui__timeline > li[data-tone="ok"] .ws-ui__mark > i { background: var(--ok); }
.ws-ui__timeline > li[data-tone="warn"] .ws-ui__mark { box-shadow: inset 0 0 0 1.5px var(--warn); color: var(--warn); } .ws-ui__timeline > li[data-tone="warn"] .ws-ui__mark > i { background: var(--warn); }
.ws-ui__timeline > li[data-tone="no"] .ws-ui__mark { box-shadow: inset 0 0 0 1.5px var(--danger); color: var(--danger); } .ws-ui__timeline > li[data-tone="no"] .ws-ui__mark > i { background: var(--danger); }
.ws-ui__line { width: 1.5px; min-height: .8rem; background: var(--line); }
.ws-ui__timeline > li:last-child .ws-ui__line { visibility: hidden; }
.ws-ui__event { display: grid; gap: .1rem; padding-bottom: .9rem; min-width: 0; }
.ws-ui__event small { color: var(--dim); font-size: .74rem; font-weight: 650; letter-spacing: .02em; }
.ws-ui__event p { margin: .1rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
/* Diagrams: boxes and arrows the Workspace lays out; a picked box glows in the accent, its note shows below. */
.ws-ui__diagramwrap { display: grid; gap: .55rem; }
.ws-ui__diagramtitle { color: var(--muted); font-size: .84rem; font-weight: 600; }
.ws-ui__diagram { display: flex; justify-content: center; min-width: 0; }
.ws-ui__svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-ui, inherit); }
.ws-ui__node { cursor: pointer; outline: none; }
.ws-ui__node rect { fill: var(--panel-strong); stroke: var(--line-strong, var(--line)); stroke-width: 1.2; transition: fill .15s ease, stroke .15s ease; }
.ws-ui__node text { fill: var(--ink); font-size: 13px; font-weight: 600; }
.ws-ui__nodeicon { color: var(--accent); }
.ws-ui__node[data-tone="ok"] rect { stroke: var(--ok); } .ws-ui__node[data-tone="warn"] rect { stroke: var(--warn); } .ws-ui__node[data-tone="no"] rect { stroke: var(--danger); }
.ws-ui__node:hover rect, .ws-ui__node:focus-visible rect { stroke: var(--accent); }
.ws-ui__node.is-lit rect { fill: color-mix(in srgb, var(--accent) 16%, var(--panel-strong)); stroke: var(--accent); }
.ws-ui__node.is-selected rect { fill: var(--accent); stroke: var(--accent); }
.ws-ui__node.is-selected text, .ws-ui__node.is-selected .ws-ui__nodeicon { fill: var(--accent-ink); color: var(--accent-ink); }
.ws-ui__edge { fill: none; stroke: var(--muted); stroke-width: 1.4; opacity: .75; }
.ws-ui__arrowhead { fill: var(--muted); }
.ws-ui__edgegroup.is-lit .ws-ui__edge { stroke: var(--accent); opacity: 1; stroke-width: 2; }
.ws-ui__edgepill { fill: var(--panel); stroke: var(--line); }
.ws-ui__edgelabel { fill: var(--muted); font-size: 12px; font-weight: 500; }
.ws-ui__detail { display: grid; gap: .2rem; min-height: 2.6rem; padding: .55rem .75rem; border-radius: 12px; background: var(--panel-strong); font-size: .9rem; line-height: 1.45; }
/* A player: what plays over time (a simulation's clock), with its own Play and a scrubber. */
.ws-ui__player { display: grid; gap: .45rem; }
.ws-ui__player input[type="range"] { width: 100%; height: 2rem; margin: 0; accent-color: var(--accent); touch-action: pan-y; }
/* Show the Math: a figure's formula with its inputs named, then with what they hold now. */
.ws-ui__math { display: none; }
.ws-ui.is-math .ws-ui__math { display: grid; gap: .1rem; min-width: 0; margin-top: .3rem; color: var(--muted); font: 500 .72rem/1.4 var(--font-mono); text-align: left; }
.ws-ui__math code { padding: 0; background: none; color: inherit; font: inherit; overflow-wrap: anywhere; }
.ws-ui__math code:last-child:not(:first-child) { color: var(--dim); }
.ws-hero__main > .ws-ui__math { flex-basis: 100%; }
/* Solve: what an input must be for a result to reach its target, and Use This. */
.ws-ui__solve { display: flex; align-items: center; justify-content: space-between; gap: .6rem .9rem; flex-wrap: wrap; padding: .7rem .8rem;
  border-radius: 12px; background: var(--panel-strong); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ws-ui__solvemain { display: grid; gap: .1rem; min-width: 0; }
.ws-ui__solvelabel { color: var(--muted); font-size: .84rem; font-weight: 550; }
.ws-ui__solveresult { font-size: 1.35rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ws-ui__solvenote { color: var(--dim); font-size: .76rem; }
.ws-ui__use { flex: none; }
/* What Moves It: each input a little lower and higher, a bar each side of the result as it is. */
.ws-ui__drivers { display: grid; gap: .45rem; }
.ws-ui__drivershead { display: flex; align-items: center; justify-content: space-between; gap: .4rem .8rem; flex-wrap: wrap; }
.ws-ui__driverstitle { font-size: .9rem; }
.ws-ui__driverkey { display: inline-flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .74rem; }
.ws-ui__driverkey > span { display: inline-flex; align-items: center; gap: .3rem; }
.ws-ui__driverkey i { display: block; flex: none; width: .65rem; height: .65rem; border-radius: 3px; }
.ws-ui__driverrows { display: grid; gap: .15rem; }
.ws-ui__driver { display: grid; grid-template-columns: minmax(5.5rem, 9rem) minmax(0, 1fr) auto; align-items: center; gap: .7rem; width: 100%;
  min-height: 2.25rem; padding: .3rem .45rem; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-ui__driver:hover { background: var(--panel-strong); }
.ws-ui__driver:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ws-ui__drivername { min-width: 0; overflow: hidden; color: var(--muted); font-size: .84rem; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.ws-ui__driverbar { position: relative; display: block; height: .7rem; border-radius: 999px; background: var(--panel-strong); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ws-ui__driverbar > i { position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: left .18s var(--ease-out, ease-out), width .18s var(--ease-out, ease-out); }
.ws-ui__driverbar > b { position: absolute; top: -.2rem; bottom: -.2rem; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: .55; }
.ws-ui__drivers i.is-down { background: var(--dim); }
.ws-ui__drivers i.is-up { background: var(--accent); }
.ws-ui__driverrange { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Scenarios: set-ups saved and compared with what's now. */
.ws-ui__scenarios { display: grid; gap: .5rem; }
.ws-ui__scenariosbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.ws-ui__scenariosbar > strong { font-size: .9rem; }
.ws-ui__scenariohead { display: inline-flex; align-items: center; justify-content: flex-end; gap: .1rem; }
.ws-ui__load { display: inline-flex; align-items: center; min-height: 2rem; padding: .2rem .4rem; border: 0; border-radius: 8px; background: none; color: var(--accent);
  font: inherit; font-weight: 700; cursor: pointer; }
.ws-ui__load:hover { background: var(--accent-surface); }
.ws-ui__unsave { width: 1.9rem; height: 1.9rem; }
.ws-ui__scenariotable th.is-current { color: var(--accent); }
.ws-ui__scenariotable tr.is-input > * { color: var(--muted); font-size: .84rem; }
@media (prefers-reduced-motion: reduce) { .ws-ui__driverbar > i { transition: none; } }
/* Pills: a figure's parts, a version, a form's answer. */
.ws-ui__pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.ws-ui__pill { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.25rem; padding: .35rem .85rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel-strong); color: var(--muted); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.ws-ui__pill > svg { display: block; flex: none; }
.ws-ui__pill:hover { color: var(--ink); }
.ws-ui__pill[aria-checked="true"] { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.ws-ui__pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A figure: line art that comes apart, its parts picked and explained. */
.ws-ui__figure { display: grid; gap: .7rem; min-width: 0; }
/* A figure's parts: one contained row in the panel, in the order its steps visit them, scrolling sideways when it
   doesn't fit and keeping the picked one in view (answer-ui.js figure). */
.ws-ui__pills.ws-ui__figparts { position: relative; flex-wrap: nowrap; overflow-x: auto; gap: .35rem; padding: .3rem; min-width: 0;
  border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel-strong) 55%, transparent);
  scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.ws-ui__pills.ws-ui__figparts::-webkit-scrollbar { display: none; }
.ws-ui__figparts > .ws-ui__pill { flex: none; scroll-snap-align: center; }
.ws-ui__figparts.is-more-before { -webkit-mask-image: linear-gradient(to right, transparent, black 1.6rem); mask-image: linear-gradient(to right, transparent, black 1.6rem); }
.ws-ui__figparts.is-more-after { -webkit-mask-image: linear-gradient(to left, transparent, black 1.6rem); mask-image: linear-gradient(to left, transparent, black 1.6rem); }
.ws-ui__figparts.is-more-before.is-more-after { -webkit-mask-image: linear-gradient(to right, transparent, black 1.6rem, black calc(100% - 1.6rem), transparent);
  mask-image: linear-gradient(to right, transparent, black 1.6rem, black calc(100% - 1.6rem), transparent); }
.ws-ui__figframe { display: grid; place-items: center; padding: .6rem; border-radius: 14px; background: var(--panel-strong); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ws-ui__figsvg { display: block; width: 100%; height: auto; max-height: 22rem; color: var(--ink); overflow: visible; }
.ws-ui__figsvg.is-tall { max-height: min(70vh, 34rem); }
.ws-ui__figpart { color: color-mix(in srgb, var(--ink) 80%, var(--panel-strong)); cursor: pointer; transition: transform .5s var(--ease-out, ease-out), opacity .25s ease, color .25s ease; }
.ws-ui__figpart.is-moving { transition: opacity .25s ease, color .25s ease; }
.ws-ui__figpart.is-dim { opacity: .2; }
.ws-ui__figpart.is-picked { color: var(--accent); }
.ws-ui__fighit, .ws-ui__fighit * { stroke: transparent; stroke-width: 14px; fill: none; pointer-events: stroke; }
.ws-ui__figarea { fill: transparent; stroke: none; pointer-events: all; }
.ws-ui__figtext { fill: currentColor; stroke: none; font-family: var(--font-ui); font-weight: 600; }
.ws-ui__figcallout { pointer-events: none; color: var(--ink); }
.ws-ui__figlead { stroke: currentColor; stroke-width: 1; opacity: .8; }
.ws-ui__figdot { fill: currentColor; stroke: none; }
.ws-ui__figlabel { fill: currentColor; stroke: none; font-family: var(--font-ui); font-weight: 700; }
.ws-ui__figapart { display: grid; gap: .2rem; }
.ws-ui__figrange { width: 100%; height: 2rem; margin: 0; accent-color: var(--accent); touch-action: pan-y; }
.ws-ui__figends { display: flex; justify-content: space-between; color: var(--dim); font-size: .74rem; }
.ws-ui__figabout { display: grid; gap: .3rem; }
.ws-ui__figheading { font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .ws-ui__figpart { transition: none; } }
/* A story: scenes and choices. */
.ws-ui__story { display: grid; gap: .65rem; }
.ws-ui__storyhead { display: flex; align-items: center; gap: .4rem; min-height: 2rem; }
.ws-ui__storyback { margin-left: -.4rem; }
.ws-ui__trail { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.ws-ui__trail li { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; background: var(--panel-strong); color: var(--muted); font-size: .74rem; }
.ws-ui__storytitle { font-size: 1rem; }
.ws-ui__storytext { margin: 0; line-height: 1.6; font-size: .98rem; overflow-wrap: anywhere; }
.ws-ui__story[data-tone="ok"] .ws-ui__storytext { color: var(--ok); } .ws-ui__story[data-tone="warn"] .ws-ui__storytext { color: var(--warn); }
.ws-ui__story[data-tone="no"] .ws-ui__storytext { color: var(--danger); }
/* Versions: drafts side by side, with what changed. */
.ws-ui__versions { display: grid; gap: .55rem; }
.ws-ui__draft { padding: .75rem .85rem; border-radius: 12px; background: var(--panel-strong); box-shadow: inset 0 0 0 1px var(--line-soft); line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-ui__draft ins { text-decoration: none; border-radius: 4px; background: color-mix(in srgb, var(--ok) 22%, transparent); }
.ws-ui__draft del { color: var(--dim); text-decoration-color: var(--danger); }
.ws-ui__draftnote { color: var(--muted); font-size: .8rem; }
.ws-ui__draftbar { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.ws-ui__changes[aria-pressed="true"] { color: var(--accent); background: var(--accent-surface); }
/* Order: things put in order, or ranked. */
.ws-ui__order { display: grid; gap: .55rem; }
.ws-ui__orderlist { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ws-ui__orderrow { display: flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .25rem .3rem .25rem .55rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-strong); }
.ws-ui__orderrow > svg { display: block; flex: none; }
.ws-ui__orderrow.is-right { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); } .ws-ui__orderrow.is-right > svg { color: var(--ok); }
.ws-ui__orderrow.is-wrong { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); } .ws-ui__orderrow.is-wrong > svg { color: var(--danger); }
.ws-ui__rank { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--panel);
  color: var(--muted); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ws-ui__ordertext { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ws-ui__move { flex: none; }
/* Match: pairs put together. */
.ws-ui__match { display: grid; gap: .55rem; }
.ws-ui__matchhead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ws-ui__matchmiss { color: var(--muted); font-size: .8rem; }
.ws-ui__matchgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.ws-ui__matchcol { display: grid; gap: .4rem; align-content: start; }
.ws-ui__matchitem { display: flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-strong);
  color: var(--ink); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.ws-ui__matchitem > svg { display: block; flex: none; color: var(--ok); }
.ws-ui__matchitem > span { min-width: 0; overflow-wrap: anywhere; }
.ws-ui__matchitem[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ws-ui__matchitem.is-done { opacity: .6; cursor: default; border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.ws-ui__matchitem.is-wrong { border-color: var(--danger); animation: ws-ui-shake .35s ease; }
@keyframes ws-ui-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .ws-ui__matchitem.is-wrong { animation: none; } }
/* Form: questions back to the person. */
.ws-ui__form { display: grid; gap: .8rem; }
.ws-ui__scaleends { display: flex; justify-content: space-between; color: var(--dim); font-size: .74rem; }
/* Palette: colors, how readable text is on each, and a sample. */
.ws-ui__palettewrap { display: grid; gap: .6rem; }
.ws-ui__palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; }
.ws-ui__swatch { display: grid; gap: .4rem; padding: .35rem .35rem .55rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-strong); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.ws-ui__swatchchip { display: grid; place-items: center; gap: .1rem; height: 4.5rem; border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(127 127 127 / .25); }
.ws-ui__swatchsample { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.ws-ui__swatchchip small { font-size: .68rem; font-weight: 600; opacity: .9; }
.ws-ui__swatchtext { display: grid; gap: .05rem; padding: 0 .25rem; min-width: 0; }
.ws-ui__swatchtext strong { font-size: .86rem; overflow-wrap: anywhere; }
.ws-ui__swatchtext code { padding: 0; background: none; color: var(--muted); font-size: .76rem; }
.ws-ui__swatchtext small { color: var(--dim); font-size: .74rem; }
.ws-ui__palettesample { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: 1rem 1.1rem; border-radius: 14px; }
.ws-ui__palettesample strong { font-size: 1.1rem; }
.ws-ui__palettebutton { display: inline-flex; align-items: center; padding: .4rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 700; }
/* Editor: a list kept in place (a receipt's items, the table's people). */
.ws-ui__editor { display: grid; gap: .55rem; }
.ws-ui__editorrows { display: grid; gap: .5rem; }
.ws-ui__editrow { display: grid; gap: .45rem; padding: .55rem .7rem .7rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-strong); }
.ws-ui__edithead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2rem; }
.ws-ui__editnum { color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ws-ui__remove { margin-right: -.35rem; }
.ws-ui__editfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .45rem .6rem; }
.ws-ui__editfields > .ws-ui__editmulti { grid-column: 1 / -1; }
.ws-ui__editmulti { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.ws-ui__editmulti legend { width: 100%; margin-bottom: .25rem; padding: 0; }
.ws-ui__editcheck { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; cursor: pointer; }
.ws-ui__editcheck input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--accent); }
/* Held to act (Unfold, Reasoning): a press never selects the words or opens the phone's copy menu. */
.ws-ui__holdable { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Reasoning: a tree, the conclusion at its root. Light runs up the branches while the argument holds; a doubted step cuts
   its branch and the break climbs to what rested on it. */
.ws-ui__reasoning { --live: var(--accent); --cut: var(--warn); --fall: var(--danger); display: grid; gap: .7rem; }
.ws-ui__argsum { --tone: var(--ok); display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .6rem; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.ws-ui__argsum[data-tone="warn"] { --tone: var(--warn); color: var(--ink); }
.ws-ui__argsum > span:nth-child(2) { flex: 1 1 14rem; min-width: 0; }
.ws-ui__argsum .ws-ui__calloutmark { color: var(--tone); }
.ws-ui__argtree { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.ws-ui__argtree .ws-ui__argtree { margin: .1rem 0 0 .42rem; padding-left: 1.25rem; }
.ws-ui__argtree li { position: relative; }
/* A branch: the rail down from the step above, then the elbow into this step's dot. */
.ws-ui__argtree .ws-ui__argtree > li::before { content: ""; position: absolute; left: -1.25rem; top: 0; width: 1.05rem; height: 1.2rem;
  border-left: 2px solid var(--branch, var(--line)); border-bottom: 2px solid var(--branch, var(--line)); border-bottom-left-radius: 9px;
  transition: border-color .35s ease; transition-delay: var(--delay, 0ms); }
.ws-ui__argtree .ws-ui__argtree > li:not(:last-child)::after { content: ""; position: absolute; left: -1.25rem; top: 0; bottom: 0; border-left: 2px solid var(--line); }
.ws-ui__argtree li[data-state="holds"] { --branch: color-mix(in srgb, var(--live) 55%, var(--line)); }
.ws-ui__argtree li[data-state="doubted"] { --branch: var(--cut); }
.ws-ui__argtree li[data-state="broken"] { --branch: color-mix(in srgb, var(--fall) 70%, var(--line)); }
.ws-ui__argtree li[data-state="holds"]::before { animation: ws-ui-current 2.8s ease-in-out infinite; animation-delay: var(--lag, 0s); }
@keyframes ws-ui-current { 0%, 70%, 100% { filter: none; } 35% { filter: drop-shadow(0 0 3px var(--live)); border-color: var(--live); } }
/* A step: its dot on the branch, a small kind, the words, and Doubt. */
.ws-ui__claim { --k: var(--accent); position: relative; display: grid; gap: .15rem; padding: .3rem 0 .45rem .9rem; transition-delay: var(--delay, 0ms); }
.ws-ui__claim::before { content: ""; position: absolute; left: -.2rem; top: .78rem; width: .62rem; height: .62rem; margin-top: -.31rem; border-radius: 999px;
  background: var(--live); box-shadow: 0 0 0 3px var(--panel), 0 0 8px color-mix(in srgb, var(--live) 70%, transparent);
  transition: background-color .35s ease, box-shadow .35s ease; transition-delay: var(--delay, 0ms); }
.ws-ui__argtree.is-top > li > .ws-ui__claim::before { width: .8rem; height: .8rem; margin-top: -.4rem; left: -.3rem; }
.ws-ui__claim[data-state="doubted"]::before { background: var(--panel); box-shadow: 0 0 0 3px var(--panel), inset 0 0 0 2px var(--cut); }
.ws-ui__claim[data-state="broken"]::before { background: var(--fall); box-shadow: 0 0 0 3px var(--panel); }
.ws-ui__claim[data-kind="fact"] { --k: var(--ok); } .ws-ui__claim[data-kind="assumption"] { --k: var(--warn); }
.ws-ui__claim[data-kind="judgement"] { --k: var(--violet, var(--accent)); } .ws-ui__claim[data-kind="conclusion"] { --k: var(--muted); }
.ws-ui__claimhead { display: flex; align-items: center; gap: .45rem; min-height: 1.6rem; }
.ws-ui__kind { color: var(--k); font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.ws-ui__argstatus { display: inline-flex; align-items: center; gap: .25rem; color: var(--ok); font-size: .74rem; font-weight: 600; }
.ws-ui__argstatus > svg { display: block; flex: none; }
.ws-ui__claim[data-state="broken"] .ws-ui__argstatus { color: var(--fall); }
.ws-ui__doubt { flex: none; margin: -.35rem -.35rem -.35rem auto; color: var(--dim); }
.ws-ui__doubt[aria-pressed="true"] { color: var(--cut); background: color-mix(in srgb, var(--cut) 14%, transparent); }
.ws-ui__claimtext { margin: 0; line-height: 1.5; overflow-wrap: anywhere; border-radius: 6px; transition: color .3s ease; transition-delay: var(--delay, 0ms); }
.ws-ui__argtree.is-top > li > .ws-ui__claim > .ws-ui__claimtext { font-weight: 650; font-size: 1.02rem; }
.ws-ui__claimnote { color: var(--muted); font-size: .8rem; }
.ws-ui__argsource { justify-self: start; color: var(--accent); font-size: .76rem; }
.ws-ui__argwhy { color: var(--fall); font-size: .78rem; line-height: 1.4; }
.ws-ui__claim[data-state="doubted"] .ws-ui__argwhy { color: var(--cut); }
.ws-ui__claim[data-state="doubted"] .ws-ui__claimtext { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--cut) 80%, transparent); }
.ws-ui__claim[data-state="broken"] .ws-ui__claimtext { color: var(--muted); }
.ws-ui__claim.is-breaking .ws-ui__claimtext { animation: ws-ui-break .6s ease both; animation-delay: var(--delay, 0ms); }
.ws-ui__claim.is-mending .ws-ui__claimtext { animation: ws-ui-mend .6s ease both; }
@keyframes ws-ui-break { 30% { color: var(--fall); text-shadow: 0 0 10px color-mix(in srgb, var(--fall) 60%, transparent); } }
@keyframes ws-ui-mend { 30% { color: var(--live); text-shadow: 0 0 10px color-mix(in srgb, var(--live) 60%, transparent); } }
/* Holding a step to doubt it: the words warm as the hold fills. */
.ws-ui__claimtext.ws-ui__holdable { cursor: pointer; background-image: linear-gradient(color-mix(in srgb, var(--cut) 26%, transparent), color-mix(in srgb, var(--cut) 26%, transparent));
  background-repeat: no-repeat; background-size: 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .18s ease, color .3s ease; }
.ws-ui__claimtext.is-pressing { background-size: 100% 100%; transition: background-size .45s linear; }
.ws-ui__claimtext.is-held { animation: ws-ui-held .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .ws-ui__argtree li[data-state="holds"]::before, .ws-ui__claim.is-breaking .ws-ui__claimtext, .ws-ui__claim.is-mending .ws-ui__claimtext { animation: none; }
  .ws-ui__claim, .ws-ui__claim::before, .ws-ui__argtree li::before, .ws-ui__claimtext { transition: none; }
}
/* Unfold: the answer's own prose, short by default, growing in place where it's held (stretchtext). */
.ws-ui.is-bare { padding: 0; border: 0; border-radius: 0; background: none; gap: .5rem; }
.ws-ui__unfoldwrap { display: grid; gap: .4rem; }
.ws-ui__unfold { min-width: 0; }
.ws-ui__unfoldp { margin: 0 0 .8rem; line-height: 1.75; overflow-wrap: anywhere; }
.ws-ui__unfoldp:last-child { margin-bottom: 0; }
.ws-ui__grow { display: inline; margin: 0; padding: 0 .06em; border: 0; border-radius: 5px; color: inherit; font: inherit; line-height: inherit; text-align: inherit; cursor: pointer;
  text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: .24em; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background-color: transparent; background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 22%, transparent));
  background-repeat: no-repeat; background-size: 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .2s ease, text-decoration-color .2s ease, box-shadow .25s ease; }
.ws-ui__grow:hover { text-decoration-color: var(--accent); }
.ws-ui__grow[aria-expanded="true"] { text-decoration-style: solid; text-decoration-color: var(--accent); }
.ws-ui__grow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The hold: a highlighter sweeps across the line and it glows, then a pulse as it opens. */
.ws-ui__grow.is-pressing { background-size: 100% 100%; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent); transition: background-size .45s cubic-bezier(.4, 0, .6, 1), box-shadow .45s ease; }
.ws-ui__holdable.is-held { animation: ws-ui-held .5s ease; }
@keyframes ws-ui-held { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent, 0 0 0 transparent; } }
/* What it holds: tinted so it's clear what grew, a little deeper each level; it blooms in and fades out. */
.ws-ui__more { padding: .12rem .28rem; border-radius: 6px; background: color-mix(in srgb, var(--accent) 13%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: opacity .2s ease, filter .2s ease; }
.ws-ui__more[data-depth="2"] { background: color-mix(in srgb, var(--accent) 19%, transparent); }
.ws-ui__more[data-depth="3"] { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.ws-ui__more.is-new { animation: ws-ui-bloom .55s cubic-bezier(.2, .7, .2, 1); }
.ws-ui__more.is-closing { opacity: 0; filter: blur(3px); }
@keyframes ws-ui-bloom { from { opacity: 0; filter: blur(5px); background-color: color-mix(in srgb, var(--accent) 34%, transparent); } }
.ws-ui__unfoldbar { display: flex; align-items: center; justify-content: space-between; gap: .4rem .8rem; min-height: 1.5rem; }
.ws-ui__unfoldhint { color: var(--dim); font-size: .76rem; }
.ws-ui__unfoldhint.is-nudged { animation: ws-ui-nudge .6s ease; }
@keyframes ws-ui-nudge { 30% { color: var(--accent); } }
.ws-ui__unfoldall { display: inline-flex; align-items: center; margin-left: auto; padding: .2rem .1rem; border: 0; background: none; color: var(--muted); font: inherit; font-size: .76rem;
  font-weight: 600; cursor: pointer; }
.ws-ui__unfoldall:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .ws-ui__grow, .ws-ui__grow.is-pressing, .ws-ui__more { transition: none; }
  .ws-ui__holdable.is-held, .ws-ui__more.is-new, .ws-ui__unfoldhint.is-nudged { animation: none; }
}
/* Building itself on screen, once, as an answer lands: parts rise in turn; a reasoning tree grows out from its root
   (each branch draws down, its step's dot pops, its words arrive); a figure draws its lines; prose arrives by paragraph. */
.ws-ui.is-growing > .ws-ui__head { animation: ws-ui-rise .4s both; }
.ws-ui.is-growing > .ws-ui__body > * { animation: ws-ui-rise .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
@keyframes ws-ui-rise { from { opacity: 0; transform: translateY(8px); } }
.ws-ui.is-growing .ws-ui__argtree .ws-ui__argtree > li::before, .ws-ui.is-growing .ws-ui__argtree .ws-ui__argtree > li::after {
  animation: ws-ui-branch .45s ease-out both; animation-delay: calc(var(--grow, 0s) + .1s); }
@keyframes ws-ui-branch { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.ws-ui.is-growing .ws-ui__claim::before { animation: ws-ui-pop .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--grow, 0s) + .4s); }
@keyframes ws-ui-pop { from { transform: scale(0); } }
.ws-ui.is-growing .ws-ui__claim > :not(.ws-ui__claimhead), .ws-ui.is-growing .ws-ui__claimhead > * { animation: ws-ui-sprout .45s ease-out both; animation-delay: calc(var(--grow, 0s) + .45s); }
.ws-ui.is-growing .ws-ui__argtree li { --grow-own: var(--grow); }
.ws-ui.is-growing .ws-ui__argtree li > .ws-ui__claim .ws-ui__claimhead > *, .ws-ui.is-growing .ws-ui__argtree li > .ws-ui__claim > * { animation-delay: calc(var(--grow-own, 0s) + .45s); }
@keyframes ws-ui-sprout { from { opacity: 0; transform: translateX(-6px); } }
.ws-ui.is-growing .ws-ui__figpart :is(path, line, polyline, polygon, circle, ellipse, rect):not(.ws-ui__figarea) {
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: ws-ui-draw 1.3s cubic-bezier(.4, 0, .2, 1) forwards, ws-ui-fill .9s ease both;
  animation-delay: calc(var(--draw, 0s) + .2s), calc(var(--draw, 0s) + .8s); }
@keyframes ws-ui-fill { from { fill-opacity: 0; } }
.ws-ui.is-growing .ws-ui__figpart text { animation: ws-ui-rise .5s both; animation-delay: calc(var(--draw, 0s) + .9s); }
@keyframes ws-ui-draw { to { stroke-dashoffset: 0; } }
.ws-ui.is-growing .ws-ui__unfoldp { animation: ws-ui-rise .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--p, 0) * 160ms + 60ms); }
@media (prefers-reduced-motion: reduce) { .ws-ui.is-growing *, .ws-ui.is-growing *::before, .ws-ui.is-growing *::after { animation: none !important; } }
/* A web picture in an answer, through Dyadic. */
img.ws-webimage { display: block; max-width: 100%; max-height: 26rem; height: auto; margin: .6rem 0; border-radius: 12px; background: var(--panel-strong); }
/* A card's picture and tint. */
.ws-ui__card.has-image { padding-top: 0; overflow: hidden; }
.ws-ui__cardimage { display: block; width: calc(100% + 1.6rem); max-width: none; height: 8.5rem; margin: 0 -.8rem .25rem; object-fit: cover; background: var(--panel-strong); }
.ws-ui__card.is-tinted { background: color-mix(in srgb, var(--tint) 16%, var(--panel)); border-color: color-mix(in srgb, var(--tint) 35%, var(--line)); }
/* Being built (the answer still streaming), and a tool that couldn't be shown. */
.ws-ui.is-building .ws-ui__title > svg { animation: ws-ui-pulse 1.4s ease-in-out infinite; }
.ws-ui__skeleton { display: grid; gap: .5rem; }
.ws-ui__skeleton > i { display: block; height: .8rem; border-radius: 999px; background: linear-gradient(90deg, var(--panel-strong), var(--line-soft), var(--panel-strong)); background-size: 200% 100%;
  animation: ws-ui-shimmer 1.6s linear infinite; }
.ws-ui__skeleton > i:nth-child(2) { width: 82%; } .ws-ui__skeleton > i:nth-child(3) { width: 58%; height: 2.2rem; border-radius: 12px; }
@keyframes ws-ui-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes ws-ui-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ws-ui__skeleton > i, .ws-ui.is-building .ws-ui__title > svg { animation: none; } }
.ws-ui.is-broken { gap: .4rem; }
.ws-ui__brokennote { display: flex; align-items: center; gap: .45rem; margin: 0; color: var(--muted); }
.ws-ui__brokennote > svg { display: block; flex: none; color: var(--warn); }
.ws-ui.is-broken summary { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .84rem; cursor: pointer; list-style: none; }
.ws-ui.is-broken summary > svg { display: block; flex: none; }
.ws-ui.is-broken pre { max-height: 14rem; overflow: auto; font-size: .76rem; }
@media (max-width: 600px) {
  .ws-ui { padding: .8rem .8rem .85rem; }
  .ws-ui__number { grid-template-columns: 1fr; }
  .ws-ui__stepper { justify-self: start; }
  .ws-ui__driver { grid-template-columns: minmax(0, 1fr) auto; row-gap: .25rem; }
  .ws-ui__driverbar { grid-column: 1 / -1; grid-row: 2; }
}
/* End of what an answer can draw with. */
/* The Outline panel: the chat's questions (each jumps to its place) and its sources. */
.ws-outline { list-style: none; margin: .3rem 0 1.1rem; padding: 0; display: grid; gap: .1rem; counter-reset: ws-q; }
.ws-outline li { counter-increment: ws-q; }
.ws-outline__q { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: start; gap: .35rem; width: 100%; padding: .5rem .55rem; border: 0; border-radius: 10px;
  background: none; color: var(--ink); font: inherit; font-size: .88rem; line-height: 1.4; text-align: left; cursor: pointer; }
.ws-outline__q::before { content: counter(ws-q); color: var(--dim); font-weight: 700; font-size: .8rem; line-height: 1.75; }
.ws-outline__q span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ws-outline__q:hover, .ws-outline__q:focus-visible { background: var(--panel-strong); }
.ws-outline__sources .ws-sourcerow { padding: .65rem 0; }

/* Under the newest answer: one row of refinements (Continue, Shorter, More
   detail, Simpler, Chart or table). A phone scrolls it sideways; it never wraps. */
.ws-refine { display: flex; flex-wrap: nowrap; gap: .35rem; margin-top: .55rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ws-refine::-webkit-scrollbar { display: none; }
/* The same size as the chips above them, text and icon centered. */
.ws-refine .ws-chip--action { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; box-sizing: border-box;
  height: 1.75rem; padding: 0 .65rem; font-size: .75rem; line-height: 1; white-space: nowrap; }
.ws-refine .ws-chip--action > * { display: block; flex: none; line-height: 1; }
/* Your newest question: a pencil edits it and answers again. */
.ws-msg__edit { display: inline-flex; align-items: center; justify-content: center; padding: .3rem; }
.ws-msg__edit:hover, .ws-msg__edit:focus-visible { color: var(--accent); }
.ws-edit { display: grid; gap: .45rem; }
.ws-edit__input { display: block; width: 100%; box-sizing: border-box; min-height: 4.5rem; max-height: 20rem; resize: vertical; font: inherit; line-height: 1.5;
  background: var(--panel); color: var(--ink); border: 1px solid var(--accent); border-radius: 9px; padding: .6rem .8rem; }
.ws-edit__input:focus, .ws-edit__input:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.ws-edit__actions { display: flex; justify-content: flex-end; gap: .4rem; }
.ws-edit__actions .ws-button--small { min-height: 2rem; }
@media (max-width: 700px) { .ws-refine, .ws-edit { clear: left; } }

/* The viewer's prompt sheet: under the image, folded to two lines; tap or
   pull up for the whole prompt (it rises over the image), pull down or tap to
   fold it. One row of actions. The stage keeps the folded sheet's height
   (--sheet-h, measured in workspace.js) free, so the image is never covered. */
/* A definite grid area, so the image's max-height: 100% keeps it above the folded sheet. */
.ws-lightbox__stage { padding-bottom: var(--sheet-h, 0px); grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.ws-psheet__editor { display: block; width: 100%; box-sizing: border-box; resize: none; margin: .25rem 0 0; padding: .55rem .7rem; border-radius: 12px;
  border: 1px solid #ffffff2e; background: #ffffff0d; color: #eef2fb; font: inherit; font-size: .92rem; line-height: 1.45; max-height: 40dvh; overflow-y: auto; }
.ws-psheet__editor:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.ws-psheet.is-editing { box-shadow: 0 -18px 50px #000000a6; }
.ws-psheet { grid-row: 2 / 3; grid-column: 1 / -1; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; width: min(100% - 1.5rem, 42rem); margin: 0 auto .5rem;
  display: flex; flex-direction: column; gap: .6rem; padding: .4rem .75rem .75rem; border-radius: 22px; border: 1px solid #ffffff17;
  background: #0e1424f0; box-shadow: 0 -10px 34px #00000073; backdrop-filter: blur(16px); color: #eef2fb; transition: box-shadow .2s ease; }
.ws-psheet__head { display: flex; flex-direction: column; align-items: center; gap: .4rem; border-radius: 14px; cursor: pointer; touch-action: none; outline-offset: 3px; }
.ws-psheet__grip { flex: none; width: 2.25rem; height: 4px; border-radius: 4px; background: #ffffff3d; visibility: hidden; touch-action: none; }
.ws-psheet.is-clamped .ws-psheet__grip { visibility: visible; }
.ws-psheet:not(.is-clamped) .ws-psheet__head { cursor: text; }
.ws-psheet__text { margin: 0; width: 100%; font-size: .92rem; line-height: 1.45; color: #e3e9f4; white-space: pre-line; overflow-wrap: anywhere; user-select: text;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ws-psheet.is-open { box-shadow: 0 -18px 50px #000000a6; }
.ws-psheet.is-open .ws-psheet__head { touch-action: auto; }
.ws-psheet.is-open .ws-psheet__text { display: block; -webkit-line-clamp: unset; max-height: min(44dvh, 22rem); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.ws-psheet__actions { display: flex; justify-content: center; gap: .5rem; }
.ws-lightbox .ws-psheet__btn { flex: 1 1 0; max-width: 9rem; width: auto; min-width: 0; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: 0 .6rem; border-radius: 999px; background: #ffffff14; color: #eef2fb; font-size: .86rem; font-weight: 600; white-space: nowrap; }
.ws-lightbox .ws-psheet__btn span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .ws-psheet__actions { gap: .35rem; } .ws-lightbox .ws-psheet__btn { padding: 0 .4rem; gap: .3rem; font-size: .82rem; } }
.ws-lightbox .ws-psheet__btn:hover, .ws-lightbox .ws-psheet__btn:focus-visible { background: #ffffff26; }
.ws-lightbox .ws-psheet__btn--primary { background: #eef2fb; color: #0b101b; }
.ws-lightbox .ws-psheet__btn--primary:hover, .ws-lightbox .ws-psheet__btn--primary:focus-visible { background: #ffffff; }
@media (prefers-reduced-motion: reduce) { .ws-psheet { transition: none; } }

/* Imagine, the image studio: styles, then every image in columns (each in its
   own shape), then the prompt box fixed to the bottom of the page. */
.ws-messages:has(> .ws-studio) { padding-bottom: 0; gap: 0; }
.ws-studio { flex: 1 0 auto; display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 76rem; margin: 0 auto; }
/* Twelve styles: one row, sliding sideways where they don't all fit (a phone), its edges fading. */
.ws-studio__styles { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  margin: -4px; padding: 4px; scroll-padding-inline: 4px; --fade-start: #000; --fade-end: #000;
  mask-image: linear-gradient(to right, var(--fade-start), #000 1.25rem, #000 calc(100% - 1.75rem), var(--fade-end)); }
.ws-studio__styles.is-more-before { --fade-start: transparent; }
.ws-studio__styles.is-more-after { --fade-end: transparent; }
.ws-studio__styles::-webkit-scrollbar { display: none; }
.ws-style { flex: 1 0 4.4rem; min-width: 0; max-width: 5.75rem; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.ws-style__tile { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 16px; color: #fff;
  background: linear-gradient(140deg, color-mix(in srgb, var(--from) 78%, #0b101b), color-mix(in srgb, var(--to) 62%, #0b101b));
  box-shadow: inset 0 0 0 1px #ffffff1f; transition: transform .12s ease, box-shadow .12s ease; }
.ws-style__tile svg { width: 40%; height: auto; max-width: 26px; filter: drop-shadow(0 1px 2px #0005); }
.ws-style__name { max-width: 100%; font-size: .7rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-style:hover .ws-style__tile { transform: translateY(-1px); }
.ws-style:focus-visible { outline: none; }
.ws-style:focus-visible .ws-style__tile { outline: 2px solid var(--focus); outline-offset: 2px; }
.ws-style[aria-checked="true"] { color: var(--ink); }
.ws-style[aria-checked="true"] .ws-style__tile { box-shadow: inset 0 0 0 1px #ffffff40, 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.ws-studio__grid { display: flex; gap: .5rem; align-items: flex-start; }
.ws-studio__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.ws-studio__tile { position: relative; display: block; width: 100%; min-height: 3rem; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--panel); cursor: zoom-in; }
.ws-studio__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ws-studio__wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: 1rem .75rem 1.5rem; border: 1px solid var(--line);
  color: var(--muted); font-size: .8rem; text-align: center; cursor: default;
  background: linear-gradient(110deg, var(--panel) 30%, color-mix(in srgb, var(--accent) 9%, var(--panel)) 50%, var(--panel) 70%) 0 0 / 260% 100%; animation: ws-imagine-shimmer 1.8s linear infinite; }
.ws-studio__wait strong { color: var(--ink); font-size: .84rem; }
.ws-studio__wait small { font-size: .74rem; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ws-studio__wait.is-failed { animation: none; background: var(--panel); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.ws-studio__wait.is-failed > svg { color: var(--danger); }
.ws-studio__progress { position: absolute; left: .85rem; right: .85rem; bottom: .8rem; height: 4px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.ws-studio__slow { opacity: 0; color: var(--muted); font-size: .78rem; animation: .4s ease-out both ws-studio-slow; }
@keyframes ws-studio-slow { to { opacity: 1; } }
.ws-studio__progress i { display: block; height: 100%; width: 4%; border-radius: inherit; background: var(--accent); animation: ws-imagine-progress 30s cubic-bezier(.12, .6, .3, 1) forwards; }
.ws-studio__cancel { position: absolute; top: .4rem; right: .4rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 72%, transparent); color: var(--muted); cursor: pointer; }
.ws-studio__cancel:hover, .ws-studio__cancel:focus-visible { color: var(--ink); background: var(--paper); }
@keyframes ws-imagine-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes ws-imagine-progress { from { width: 4%; } to { width: 94%; } }
@media (prefers-reduced-motion: reduce) { .ws-studio__wait { animation: none; } .ws-style__tile { transition: none; } }
.ws-studio__empty { flex: 1; min-width: 0; display: grid; justify-items: center; gap: .6rem; padding: 3rem 1rem; color: var(--muted); text-align: center; }
.ws-studio__empty p { max-width: 22rem; margin: 0; font-size: .9rem; line-height: 1.5; }
/* The prompt box: the words over one row of reference, quality, shape and Generate. */
.ws-studio__bar { position: sticky; bottom: 0; z-index: 3; margin-top: auto; padding: 1.25rem 0 calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--paper) 62%, color-mix(in srgb, var(--paper) 0%, transparent)); }
.ws-studio__box { max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; gap: .35rem; padding: .5rem; border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: var(--panel); box-shadow: var(--shadow); transition: border-color .15s ease, box-shadow .15s ease; }
.ws-studio__box:focus-within { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.ws-studio__input { display: block; width: 100%; min-height: 2.4rem; max-height: 10rem; resize: none; overflow-y: auto; padding: .45rem .5rem; border: 0; background: transparent; color: var(--ink); font: inherit; line-height: 1.5; }
.ws-studio__input:focus, .ws-studio__input:focus-visible { outline: none; }
.ws-studio__row { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.ws-studio__chip { flex: none; display: inline-flex; align-items: center; gap: .35rem; height: 2.4rem; padding: 0 .75rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: .8rem; white-space: nowrap; cursor: pointer; }
.ws-studio__chip:hover, .ws-studio__chip:focus-visible { border-color: var(--muted); }
.ws-studio__chip strong { font-weight: 600; }
.ws-studio__chip > svg:last-child { color: var(--muted); margin-right: -.2rem; }
.ws-studio__chip .ws-aspect__box { border-radius: 3px; }
.ws-studio__cost { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.ws-studio__attach { width: 2.4rem; padding: 0; justify-content: center; color: var(--muted); }
/* Enhance: on, the idea is written out as a full prompt before it's drawn. */
.ws-studio__enhance { color: var(--muted); }
.ws-studio__enhance[aria-pressed="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-surface); }
.ws-studio__enhance[aria-pressed="true"] > svg { color: var(--accent); }
.ws-studio__enhance:disabled { opacity: .5; cursor: default; }
.ws-studio__row.is-tight .ws-studio__enhance > span { display: none; }
.ws-studio__row.is-tight .ws-studio__enhance { width: 2.4rem; padding: 0; justify-content: center; }
.ws-studio__attach > svg:last-child { margin: 0; }
.ws-studio__go { margin-left: auto; flex: none; }
.ws-studio__ref:empty { display: none; }
.ws-studio__thumb { position: relative; display: block; width: 2.4rem; height: 2.4rem; flex: none; }
.ws-studio__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.ws-studio__thumb.is-loading img { opacity: .5; }
.ws-studio__thumb button { position: absolute; top: -.3rem; right: -.3rem; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--ink); color: var(--paper); cursor: pointer; }
.ws-menu button.is-current { background: var(--accent-surface); font-weight: 600; }
.ws-menu .ws-aspect__box { margin-inline: .1rem; border-radius: 3px; }
@media (max-width: 420px) { .ws-studio__chip { padding: 0 .6rem; } .ws-studio__styles { gap: .35rem; }
  /* Room for how many on a phone: the pills drop their chevrons (they still open their menus). */
  .ws-studio__chip:not(.ws-studio__attach) > svg:last-child { display: none; } }
/* A prompt's session: Back and the prompt as a chip on one row; then its
   images; then Generate more, which fills as you pull past the end. */
.ws-studio__head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ws-studio__back { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--panel); color: var(--ink); cursor: pointer; }
.ws-studio__prompt { min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.4rem; padding: .4rem 1rem; border: 1px solid var(--line);
  border-radius: 1.2rem; background: var(--panel); color: var(--ink); font: inherit; font-size: .9rem; line-height: 1.35; text-align: left; cursor: text; }
.ws-studio__prompt span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ws-studio__prompt img { flex: none; width: 1.6rem; height: 1.6rem; margin-left: -.55rem; border-radius: 50%; object-fit: cover; }
.ws-studio__back:hover, .ws-studio__back:focus-visible, .ws-studio__prompt:hover, .ws-studio__prompt:focus-visible { border-color: var(--muted); outline: none; }
.ws-studio__foot { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding-top: .25rem; }
.ws-studio__more { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; max-width: 22rem; height: 2.75rem;
  padding: 0 1.25rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  isolation: isolate; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.ws-studio__more > svg, .ws-studio__label { position: relative; z-index: 1; }
.ws-studio__fill { position: absolute; inset: 0 auto 0 0; z-index: 0; width: calc(var(--fill, 0) * 100%); background: color-mix(in srgb, var(--accent) 30%, transparent); }
.ws-studio__more.is-springing .ws-studio__fill { transition: width .28s cubic-bezier(.2, .7, .2, 1); }
.ws-studio__more.is-full { border-color: var(--accent); background: var(--accent); color: #fff; }
.ws-studio__more.is-full .ws-studio__fill { opacity: 0; }
.ws-studio__more:hover:not(:disabled), .ws-studio__more:focus-visible { border-color: var(--muted); outline: none; }
.ws-studio__more:disabled { opacity: .55; cursor: default; }
.ws-studio__row.is-tight [data-imagine-aspect] > span:not(.ws-aspect__box), .ws-studio__row.is-tight [data-imagine-count] > svg:first-child { display: none; }
.ws-studio__note { max-width: 26rem; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; text-align: center; }
@media (prefers-reduced-motion: reduce) { .ws-studio__more.is-springing .ws-studio__fill { transition: none; } }

/* What an answer did as it worked: "Worked for 13.7s", collapsed; live while it runs; the Tools sheet. */
.ws-activity { margin: .1rem 0 .5rem; color: var(--muted); }
.ws-activity summary { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; cursor: pointer; list-style: none; font-size: .86rem; }
.ws-activity summary::-webkit-details-marker { display: none; }
.ws-activity__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-activity.is-live .ws-activity__label { color: var(--ink); }
.ws-activity__list { display: grid; gap: .45rem; margin: .5rem 0 .2rem; padding-left: .7rem; border-left: 2px solid var(--line); }
.ws-sheet .ws-activity__list { padding-left: 0; border-left: 0; }
.ws-activity__note { margin: 0; color: var(--ink); font-size: .88rem; line-height: 1.45; }
/* While an answer runs, its latest note reads as message text below "Working · 3 Steps". */
.ws-activity__now { margin: .35rem 0 .6rem; color: var(--ink); line-height: 1.6; overflow-wrap: anywhere; }
.ws-activity__tool { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .5rem; font-size: .84rem; }
.ws-activity__icon { display: grid; place-items: center; margin-top: .1rem; color: var(--ok); }
.ws-activity__tool.is-running .ws-activity__icon { color: var(--muted); }
.ws-activity__tool.is-failed .ws-activity__icon, .ws-activity__error { color: var(--danger); }
.ws-activity__main { display: grid; gap: .1rem; min-width: 0; }
.ws-activity__main strong { color: var(--ink); font-weight: 600; }
.ws-activity__main small { overflow-wrap: anywhere; color: var(--muted); }
.ws-activity__time { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.ws-activity__facts { margin: 0 0 .6rem; font-size: .84rem; }
.ws-chip--tools small { margin-left: .15rem; color: var(--muted); }
.ws-chip--tools.is-failed svg { color: var(--danger); }
/* Under an answer every chip is one size, its text and icon centered: Time, Tools, Sources, image actions. */
.ws-msg__foot > :is(.ws-chip, .ws-sourcepill), .ws-msg__foot .ws-imgactions > .ws-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; box-sizing: border-box;
  height: 1.75rem; margin: 0; padding: 0 .65rem; font-size: .75rem; line-height: 1; }
.ws-msg__foot > .ws-sourcepill { padding-left: .3rem; }
.ws-msg__foot > :is(.ws-chip, .ws-sourcepill) > *, .ws-msg__foot .ws-imgactions > .ws-chip > * { display: block; flex: none; line-height: 1; }
.ws-msg__foot .ws-sourcepill__icons { display: inline-flex; }
.ws-msg__foot .ws-sourcepill__icons > * { width: 16px; height: 16px; }
.ws-activity__tool.is-skipped .ws-activity__icon { color: var(--muted); }
/* Settings: a profile, then rounded groups of rows; each row opens its screen in the modal. */
.ws-setprofile { display: grid; justify-items: center; gap: .3rem; margin: .2rem 0 1rem; text-align: center; }
.ws-setprofile .ws-avatar, .ws-setprofile > :first-child { width: 4.5rem; height: 4.5rem; font-size: 1.6rem; }
.ws-setprofile strong { font-size: 1.1rem; }
.ws-setgroup { overflow: hidden; margin: 0 0 1rem; border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: var(--panel-strong); }
.ws-setgroup--pad { padding: .2rem 1rem; }
.ws-setrow { position: relative; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .85rem; width: 100%; min-height: 3.25rem; padding: .7rem 1rem;
  border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
/* Rows divide with a soft rule that starts under the label, not the icon (iOS and Android settings lists). */
.ws-setgroup > .ws-setrow + .ws-setrow::before { content: ""; position: absolute; top: 0; left: 3.05rem; right: 0; border-top: 1px solid var(--line-soft); }
.ws-setgroup > .ws-setrow:first-child { border-top: 0; }
.ws-setrow > svg:first-child { color: var(--ink); }
/* The chevron keeps the last column whether or not a value comes before it, so every row's lines up. */
.ws-setrow > svg:last-child { grid-column: 4; color: var(--muted); }
.ws-setrow strong { font-weight: 500; }
.ws-setrow__value { overflow: hidden; max-width: 14rem; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.ws-setrow--info { cursor: default; grid-template-columns: auto 1fr auto; }
.ws-setrow--danger, .ws-setrow--danger > svg:first-child { color: var(--danger); grid-template-columns: auto 1fr; }
button.ws-setrow:hover { background: color-mix(in srgb, var(--ink) 5%, var(--panel-strong)); }
button.ws-setrow:active { background: color-mix(in srgb, var(--ink) 9%, var(--panel-strong)); }
/* Patch Preview: the correction as written, and the decision it corrects. */
.ws-patchwords { margin: 0 0 1rem; padding: .5rem .8rem; border-left: 3px solid var(--accent); border-radius: 4px; background: var(--accent-surface);
  color: var(--ink); font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.ws-patchhead { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-weight: 600; }
.ws-patchhead > svg { display: block; flex: none; color: var(--accent); }
/* Two lines in a row (an audit entry: what, then who and when). */
.ws-setrow__lines { display: grid; gap: .1rem; min-width: 0; }
.ws-setrow__lines small { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.ws-invite-result { display: grid; gap: .5rem; margin-top: .75rem; }
.ws-setnote.ws-movelist { display: grid; gap: .35rem; margin: 1rem 0 1rem; padding-left: 1.1rem; }
.ws-movelist__final { color: var(--ink); font-weight: 600; }
/* Developers' "For": whose keys and records (your Personal workspace or an organization's), under the hub's tabs. */
.ws-tenantbar { display: flex; align-items: center; gap: .5rem; min-width: 0; margin: .45rem 0 .1rem; }
.ws-tenantbar > svg { display: block; flex: none; color: var(--muted); }
.ws-tenantbar__label { font-size: .7rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ws-tenantbar select { flex: 0 1 auto; min-width: 0; max-width: 16rem; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: .84rem; }
.ws-setlabel { margin: .5rem .25rem .45rem; color: var(--dim); font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.ws-setnote { margin: -.5rem .2rem 1rem; font-size: .8rem; }
.ws-setmeter { display: grid; gap: .5rem; padding: .9rem 1rem; }
.ws-setmeter__head { display: flex; justify-content: space-between; gap: .8rem; }
.ws-setmeter__track { overflow: hidden; height: .4rem; border-radius: 999px; background: var(--line); }
.ws-setmeter__track span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
/* Security and Login: the account page's cards inside the modal. */
.ws-account.dy-auth { width: auto; max-width: none; margin: 0; padding: 0; }
/* Inside Settings the account page's sections fill the sheet; an empty status line takes no room. */
.ws-account [data-status]:empty { display: none; }
.ws-account .dy-card { border-color: var(--line-soft); }
/* Settings > General > Response Experience */
.ws-setting--slider { display: grid; gap: .4rem; padding: .55rem 0; }
.ws-setting--slider input[type="range"] { width: 100%; accent-color: var(--accent); }


/* GitHub's other way in: a pasted token, under the app's buttons. */
.ws-store__alt { margin-top: .6rem; } .ws-store__alt > summary { cursor: pointer; color: var(--muted); font-size: .85rem; margin-bottom: .5rem; }

/* Your Computer: a new computer's setup steps, each command with a copy button. */
.ws-computer__setup:empty { display: none; }
.ws-computer__setup { display: grid; gap: .6rem; margin-top: .8rem; }
.ws-computer__step { display: grid; gap: .25rem; }
.ws-computer__cmd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4rem; padding: .4rem .5rem;
  border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.ws-computer__cmd code { white-space: pre-wrap; word-break: break-all; font-size: .8rem; }

/* An Iris Code session's badge in the bar. */
.ws-modebadge { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); margin-left: 0; margin-right: .45rem; }

/* Iris Chat and Iris Code: the switch beside New chat, and what says which mode something is. */
.ws-modeswitch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ws-modeswitch button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; box-sizing: border-box; height: 36px; min-width: 36px; padding: 0 .75rem;
  border: 0; border-radius: 10px; background: none; color: var(--muted); font: 600 .8rem/1 var(--font-ui); cursor: pointer; transition: background .16s ease, color .16s ease; }
.ws-modeswitch button > [data-icon] { display: block; line-height: 0; }
.ws-modeswitch button svg { display: block; width: 18px; height: 18px; }
.ws-modeswitch button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ws-modeswitch button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ws-modeswitch button[aria-checked="true"] { background: var(--accent-surface); color: var(--accent); }
.ws-modeswitch__label { display: block; }
/* Under desktop width the switch is its two icons (the labels stay for screen readers). */
@media (max-width: 1100px) {
  .ws-modeswitch button { width: 36px; padding: 0; }
  .ws-modeswitch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .ws-modeswitch button { transition: none; } }
.ws-modetag { display: inline-flex; align-items: center; margin-left: .45rem; padding: 0 .4rem; border-radius: 999px; font: 700 .64rem/1.5 var(--font-ui); letter-spacing: .03em;
  vertical-align: middle; border: 1px solid var(--line); color: var(--muted); }
.ws-modetag--code { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ws-modefact { display: flex; align-items: center; gap: .6rem; }
.ws-modefact > span { flex: 1; display: grid; gap: .1rem; }
.ws-store__modenote { padding: .35rem .2rem; }

/* Library Knowledge: entries by kind, Iris's suggestions first. */
.ws-tree__shared { margin-top: .5rem !important; }
.ws-count { margin-left: auto; min-width: 1.25rem; padding: 0 .35rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 .68rem/1.25rem var(--font-ui); text-align: center; }
.ws-knowledge__tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ws-knowledge__tools > .ws-page-search { flex: 1 1 16rem; }
.ws-knowledge__tools > select { font: inherit; font-size: .82rem; padding: .45rem .5rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; }
.ws-knowledge section { margin-top: 1.1rem; }
.ws-knowledge h2 { display: flex; align-items: center; gap: .45rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 0 0 .5rem; }
.ws-knowledge__suggested { padding: .8rem; border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ws-kcard { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin-bottom: .5rem; overflow: hidden; }
.ws-kcard--suggested { background: var(--paper); }
.ws-kcard > .ws-row-actions { padding: 0 .8rem .7rem; }
.ws-kcard__open { display: grid; gap: .25rem; width: 100%; padding: .75rem .8rem; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-kcard__open:hover { background: var(--panel-strong); }
.ws-kcard__kind { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ws-kcard__title { font-size: .95rem; }
.ws-kcard__body { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.ws-kentry__title { margin: .2rem 0 .1rem; font-size: 1.05rem; }
.ws-kentry__body { margin: .6rem 0; }
.ws-kversion { border-top: 1px solid var(--line); padding: .45rem 0; }
.ws-kversion summary { cursor: pointer; color: var(--muted); font-size: .82rem; }
.ws-ksimilar:empty { display: none; }
.ws-ksimilar__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .4rem 0; padding: .5rem .6rem; border-radius: 9px; background: var(--accent-surface); font-size: .84rem; }
.ws-kconflict { display: grid; gap: .5rem; margin: .5rem 0; padding: .6rem; border: 1px solid var(--line); border-radius: 10px; }
.ws-empty-state { display: grid; justify-items: center; gap: .4rem; padding: 2.5rem 1rem; text-align: center; color: var(--muted); }
.ws-empty-state h2 { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 1rem; }
.ws-empty-state p { max-width: 32rem; }

/* Handoffs: reviewing one, and what a conversation was handed. */
.ws-hsection { margin-top: .8rem; }
.ws-hsection h3 { font-size: .82rem; margin: 0 0 .35rem; }
.ws-hlines { list-style: none; margin: 0 0 .3rem; padding: 0; display: grid; gap: .3rem; }
.ws-hlines li { display: flex; align-items: center; gap: .4rem; }
.ws-hlines input { flex: 1; min-width: 0; font: inherit; font-size: .86rem; padding: .4rem .55rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.ws-hlines small { white-space: nowrap; }
.ws-hrecords { padding: .6rem .7rem; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.ws-snapshot { max-width: 46rem; margin: 0 auto 1rem; padding: .85rem 1rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 14px; background: var(--panel); display: grid; gap: .4rem; }
.ws-snapshot.is-stale { border-color: color-mix(in srgb, var(--temp, var(--warn)) 60%, transparent); }
.ws-snapshot__head { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--muted); font-size: .8rem; }
.ws-snapshot__head small { margin-left: auto; }
.ws-snapshot__title { font-size: .98rem; }
.ws-snapshot__summary { margin: 0; color: var(--ink); font-size: .88rem; line-height: 1.5; }
.ws-snapshot__stale { display: flex; align-items: flex-start; gap: .4rem; margin: 0; color: var(--temp, var(--warn)); font-size: .84rem; }
/* A button that reads as a link, wherever it is (it was only styled inside lists). */
button.ws-linkish { background: none; border: 0; padding: 0; color: var(--cyan, var(--accent)); font: inherit; cursor: pointer; text-align: left; }
button.ws-linkish:hover, button.ws-linkish:focus-visible { text-decoration: underline; }
.ws-list button.ws-linkish, .ws-linkrow .ws-linkish { color: var(--ink); }
.ws-knowledge h2 { justify-content: flex-start; }
.ws-project .ws-knowledge section:not(.ws-knowledge__suggested) { border: 0; padding: 0; background: none; }

/* Shared tasks and Iris Code's activity. */
.ws-tasks { display: grid; gap: .9rem; }
.ws-project .ws-tasks section, .ws-project .ws-tasks details { border: 0; padding: 0; background: none; }
.ws-tasks h2, .ws-tasks summary { display: flex; align-items: center; justify-content: flex-start; gap: .45rem; margin: 0 0 .45rem; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); cursor: default; }
.ws-tasks summary { cursor: pointer; }
.ws-tasks__list { display: grid; gap: .4rem; }
.ws-taskrow { display: grid; gap: .25rem; width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-taskrow:hover { background: var(--panel-strong); }
.ws-taskrow__meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; color: var(--muted); font-size: .78rem; }
.ws-taskrow__proof { display: inline-flex; align-items: center; gap: .25rem; color: var(--ok); }
.ws-task__head select { font: inherit; font-size: .86rem; padding: .4rem .55rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; }
/* A task's progress from its records: three steps in a row, four lines in its sheet, a state per criterion. */
.ws-tasklevels { display: inline-flex; flex-wrap: wrap; gap: .2rem .6rem; }
.ws-tasklevel { display: inline-flex; align-items: center; gap: .25rem; color: var(--dim, var(--muted)); }
.ws-tasklevel.is-on { color: var(--ok); }
.ws-tasklevel svg { display: block; flex: none; }
.ws-taskrow__fail { display: inline-flex; align-items: center; gap: .25rem; color: var(--danger); }
.ws-tasklevels-list { list-style: none; margin: .2rem 0 .4rem; padding: 0; display: grid; gap: .45rem; }
.ws-tasklevel-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; align-items: center; color: var(--muted); }
.ws-tasklevel-row svg { display: block; }
.ws-tasklevel-row.is-on { color: var(--ink); }
.ws-tasklevel-row.is-on svg { color: var(--ok); }
.ws-tasklevel-row > span { display: grid; gap: .1rem; min-width: 0; }
.ws-tasklevel-row small { overflow-wrap: anywhere; }
.ws-task__missing { font-size: .84rem; }
.ws-task__notes { margin: .6rem 0; }
.ws-task__notes > summary { cursor: pointer; color: var(--muted); font-size: .86rem; padding: .35rem 0; }
.ws-task.is-busy { opacity: .7; pointer-events: none; }
.ws-criterion { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: start; margin: .35rem 0; }
.ws-criterion__state { color: var(--muted); padding-top: .1rem; }
.ws-criterion__state svg { display: block; }
.ws-criterion--verified .ws-criterion__state { color: var(--ok); }
.ws-criterion--accepted .ws-criterion__state { color: var(--accent); }
.ws-criterion--failed .ws-criterion__state { color: var(--danger); }
.ws-criterion--stale .ws-criterion__state, .ws-criterion--claimed .ws-criterion__state { color: var(--temp, var(--warn)); }
.ws-criterion__text { display: grid; gap: .1rem; min-width: 0; }
.ws-criterion__text small { overflow-wrap: anywhere; }
.ws-criterion__accept { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); cursor: pointer; min-height: 2rem; }
.ws-evidence li { display: flex; align-items: center; gap: .3rem; }
.ws-activity__session { display: grid; gap: .2rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.ws-activity__session:first-of-type { border-top: 0; }
.ws-activity .ws-store__lines li { display: flex; align-items: center; gap: .3rem; }

/* The Iris Code editor (web/workspace/editor.js): beside the conversation (Split), or expanded with the conversation
   beside it (Editor); on phones and narrow tablets a view of its own. Colors come from these tokens. */
.ws { --cm-bg: var(--code-bg); --cm-panel: var(--code-head); --cm-ink: var(--code-ink); --cm-dim: var(--code-dim); --cm-line: var(--code-line);
  --cm-active: color-mix(in srgb, var(--ink) 4%, transparent); --cm-caret: var(--accent); --cm-selection: var(--selection);
  --cm-bracket: color-mix(in srgb, var(--ink) 9%, transparent); --cm-match: color-mix(in srgb, var(--warn) 26%, transparent);
  --cm-keyword: var(--syn-keyword); --cm-string: var(--syn-string); --cm-number: var(--syn-number); --cm-comment: var(--syn-comment);
  --cm-function: var(--syn-function); --cm-type: var(--syn-type); --cm-property: var(--syn-attr); --cm-punct: var(--code-dim);
  --cm-changed: color-mix(in srgb, var(--diff-add) 14%, transparent); }
.ws.editor-split { grid-template-columns: auto minmax(340px, 1fr) var(--ws-editor-w, 52vw); }
.ws.editor-full { grid-template-columns: auto minmax(300px, 340px) minmax(0, 1fr); }
.ws.editor-open .ws-context { display: none; }
.ws-editor { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--line); background: var(--cm-bg); }
.ws-editor__resizer { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; }
.ws-editor__resizer:hover, .ws-editor__resizer:focus-visible { background: color-mix(in srgb, var(--accent) 35%, transparent); outline: none; }
.ws.editor-full .ws-editor__resizer { display: none; }
.ws-editor__bar { display: flex; align-items: center; gap: .3rem; min-height: 2.75rem; padding: 0 .4rem; border-bottom: 1px solid var(--cm-line); background: var(--cm-panel); }
.ws-editor__tabs { flex: 1; display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; align-self: stretch; }
.ws-editor__tabs::-webkit-scrollbar { display: none; }
.ws-editor__tab { display: flex; align-items: center; flex: none; max-width: 14rem; border-right: 1px solid var(--cm-line); color: var(--cm-dim); }
.ws-editor__tab.is-active { background: var(--cm-bg); color: var(--cm-ink); box-shadow: inset 0 -2px 0 var(--accent); }
.ws-editor__tab > button[role="tab"] { display: flex; align-items: center; gap: .35rem; min-width: 0; height: 100%; padding: 0 .3rem 0 .7rem; border: 0; background: none; color: inherit; font: inherit; font-size: .8rem; cursor: pointer; }
.ws-editor__tab > button[role="tab"] span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-editor__tab small { font-size: .66rem; color: var(--cm-dim); }
.ws-editor__tabclose { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: .3rem; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer; }
.ws-editor__tabclose:hover { background: var(--cm-active); color: var(--cm-ink); }
.ws-editor__dirty { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cm-caret); flex: none; }
.ws-editor__layouts button { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem; font-size: .76rem; }
.ws-editor__body { flex: 1; display: flex; min-height: 0; position: relative; }
.ws-editor__explorer { width: 15rem; flex: none; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--cm-line); background: var(--cm-panel); }
.ws-editor__explorer-head { display: flex; align-items: center; gap: .1rem; padding: .45rem .4rem .2rem .7rem; }
.ws-editor__explorer-head strong { flex: 1; min-width: 0; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-editor__explorer-head .ws-iconbtn { width: 1.75rem; height: 1.75rem; }
.ws-editor__search { display: flex; align-items: center; gap: .35rem; margin: .2rem .5rem .4rem; padding: 0 .5rem; border: 1px solid var(--cm-line); border-radius: 8px; background: var(--cm-bg); color: var(--cm-dim); }
.ws-editor__search input { flex: 1; min-width: 0; padding: .35rem 0; border: 0; background: none; color: var(--cm-ink); font: inherit; font-size: .8rem; outline: none; }
.ws-editor__tree { flex: 1; overflow: auto; padding: 0 .2rem .8rem; }
.ws-editor__item { display: flex; align-items: center; }
.ws-editor__row { flex: 1; display: flex; align-items: center; gap: .3rem; min-width: 0; height: 1.75rem; padding: 0 .35rem 0 calc(.4rem + var(--depth, 0) * .85rem); border: 0; border-radius: 6px;
  background: none; color: var(--cm-ink); font: inherit; font-size: .8rem; text-align: left; cursor: pointer; }
.ws-editor__row:hover { background: var(--cm-active); }
.ws-editor__row.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ws-editor__row svg { flex: none; color: var(--cm-dim); }
.ws-editor__row[aria-expanded="true"] .ws-chev svg { transform: rotate(90deg); }
.ws-editor__spacer { width: 12px; flex: none; }
.ws-editor__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-editor__git { font: 700 .66rem/1 var(--font-mono); padding: 0 .15rem; }
.ws-editor__git--mod { color: var(--cm-type); } .ws-editor__git--new { color: var(--cm-string); } .ws-editor__git--del { color: var(--cm-keyword); }
.ws-editor__more { width: 1.6rem; height: 1.6rem; opacity: 0; }
.ws-editor__item:hover .ws-editor__more, .ws-editor__more:focus-visible { opacity: 1; }
@media (hover: none) { .ws-editor__more { opacity: .7; } }
.ws-editor__main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.ws-editor__view { flex: 1; min-height: 0; }
.ws-editor__view .cm-editor { height: 100%; }
.ws-editor__view .cm-editor.cm-focused { outline: none; }
.ws-editor__empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: .5rem; color: var(--cm-dim); text-align: center; padding: 1rem; }
.ws-editor__notice { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .45rem .7rem; border-bottom: 1px solid var(--cm-line); background: var(--accent-surface); font-size: .82rem; color: var(--cm-ink); }
.ws-editor__notice[data-kind="conflict"] { background: color-mix(in srgb, var(--temp, var(--warn)) 14%, var(--cm-panel)); }
.ws-editor__notice > span { flex: 1; min-width: 12rem; }
.ws-editor__ask { display: flex; flex-wrap: wrap; gap: .3rem; padding: .35rem .5rem; border-top: 1px solid var(--cm-line); background: var(--cm-panel); }
.ws-editor__ask .ws-button { display: inline-flex; align-items: center; gap: .3rem; }
.ws-editor__status { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1rem; min-height: 1.6rem; padding: .15rem .7rem; border-top: 1px solid var(--cm-line); background: var(--cm-panel);
  color: var(--cm-dim); font-size: .72rem; }
.ws-editor__status > span { display: inline-flex; align-items: center; gap: .25rem; }
.ws-editor__conn { margin-left: auto; }
.ws-editor__conn .ws-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ok); display: inline-block; }
.ws-editor__conn.is-off .ws-dot { background: var(--danger); }
.ws-editor__unsaved { color: var(--cm-caret); }
.ws-editor__changes { position: absolute; inset: 0; overflow: auto; padding: .9rem 1rem 2rem; background: var(--cm-bg); z-index: 3; }
.ws-changes__head { display: flex; align-items: center; justify-content: space-between; }
.ws-changes__head h2 { font-size: .95rem; margin: 0; }
.ws-changes__run, .ws-changes__proposed { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--cm-line); display: grid; gap: .45rem; }
.ws-changes__proposed h3 { display: flex; align-items: center; gap: .35rem; font-size: .82rem; margin: 0; color: var(--temp, var(--warn)); }
.ws-changes__runhead { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.ws-changes__verdict { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; }
.ws-changes__verdict--tested { color: var(--ok); } .ws-changes__verdict--failed { color: var(--danger); } .ws-changes__verdict--untested { color: var(--cm-dim); }
.ws-changes__row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.ws-changes__path { font-family: var(--font-mono); font-size: .8rem; color: var(--cm-ink); word-break: break-all; }
.ws-changes__patch { max-height: 18rem; overflow: auto; font-size: .75rem; background: var(--cm-panel); padding: .5rem; border-radius: 8px; }
.ws-editor__phonenav { display: none; }
.ws-bar__editor[aria-pressed="true"] { color: var(--accent); background: var(--accent-surface); }
.ws-coderef { font-family: var(--font-mono); }
/* Narrow screens: the editor is a view of its own, with Chat, Files, Editor and Changes at the bottom. */
@media (max-width: 1100px) {
  .ws.editor-open .ws-editor { position: fixed; inset: 0; z-index: 45; border-left: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* The sidebar opened over the editor (a swipe works there too): its scrim over the editor, under the sidebar, so a
     tap or a drag on it closes the sidebar. */
  .ws.editor-open .ws-scrim { z-index: 46; }
  .ws.editor-split, .ws.editor-full { grid-template-columns: auto minmax(0, 1fr); }
  .ws-editor__resizer, .ws-editor__layouts { display: none; }
  .ws-editor__phonenav { display: flex; border-top: 1px solid var(--cm-line); background: var(--cm-panel); }
  .ws-editor__phonenav button { flex: 1; display: grid; justify-items: center; gap: .1rem; padding: .45rem 0 .5rem; border: 0; background: none; color: var(--cm-dim); font: inherit; font-size: .7rem; cursor: pointer; }
  .ws-editor__phonenav button[aria-current="page"] { color: var(--accent); }
  .ws-editor__explorer { position: absolute; inset: 0; width: auto; z-index: 2; border-right: 0; }
  .ws-editor[data-phone-view="editor"] .ws-editor__explorer, .ws-editor[data-phone-view="changes"] .ws-editor__explorer { display: none; }
  .ws-editor[data-phone-view="files"] .ws-editor__explorer { display: flex !important; }
  .ws-editor__explorer-toggle { display: none; }
  .ws-editor__row { height: 2.4rem; font-size: .9rem; }
  .ws-editor__tab > button[role="tab"] { font-size: .85rem; }
  .ws-editor__view .cm-editor { font-size: 14px; }
}
@media (prefers-reduced-motion: no-preference) { .ws-editor__row .ws-chev svg { transition: transform .15s ease; } }
/* With the editor open, the conversation's bar keeps only what works there (the details panel is closed meanwhile). */
.ws.editor-open .ws-bar [data-action="panel"], .ws.editor-open .ws-bar__details { display: none; }
.ws.editor-full .ws-modeswitch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ws.editor-full .ws-modeswitch button { width: 36px; padding: 0; }
.ws.editor-open .ws-bar__actions { min-width: 0; }
.ws-editor__view { display: block; position: relative; }
.ws.editor-open .ws-modebadge { display: none; }
/* Chips, badges and pills, everywhere: icon and text centered on both axes by their boxes, the words keeping the font's
   full line (never trimmed: see styles.css). A leading icon's side bearing comes out of the padding on its side, so both
   sides look even. */
:is(.ws-chip, .ws-tempbadge, .ws-modechip, .ws-refchip, .ws-lineage, .ws-pill, .ws-store__tag, .ws-sourcepill, .ws-studio__chip, .ws-aspect__chip,
    .ws-cite, .ws-research__source, .ws-modetag, .ws-count, .ws-tile__days, .ws-taskrow__proof, .ws-changes__verdict, .ws-imported__label) {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; box-sizing: border-box; }
:is(.ws-chip, .ws-tempbadge, .ws-modechip, .ws-refchip, .ws-lineage, .ws-pill, .ws-store__tag, .ws-sourcepill, .ws-studio__chip, .ws-aspect__chip,
    .ws-cite, .ws-research__source, .ws-modetag, .ws-count, .ws-tile__days, .ws-taskrow__proof, .ws-changes__verdict, .ws-imported__label) > :is(svg, img) {
  display: block; flex: none; }
:is(.ws-chip, .ws-tempbadge, .ws-modechip, .ws-refchip, .ws-lineage, .ws-pill, .ws-store__tag, .ws-sourcepill, .ws-studio__chip, .ws-aspect__chip,
    .ws-cite, .ws-research__source, .ws-modetag, .ws-count, .ws-tile__days, .ws-taskrow__proof, .ws-changes__verdict, .ws-imported__label) > svg:first-child:not(:only-child) {
  margin-inline-start: -1px; }
:is(.ws-chip, .ws-tempbadge, .ws-modechip, .ws-refchip, .ws-lineage, .ws-pill, .ws-store__tag, .ws-sourcepill, .ws-studio__chip, .ws-aspect__chip,
    .ws-cite, .ws-research__source, .ws-modetag, .ws-count, .ws-tile__days, .ws-taskrow__proof, .ws-changes__verdict, .ws-imported__label) > :is(span, small, strong, b):not(:has(> :is(img, svg, span))) {
  display: block; min-width: 0; }

/* -- the four surfaces (workspace.js surfaces; motion.js moves them) ---------------------------------------------
   On a phone or tablet the sidebar, Details, Search and Activity are positioned by script while they move (a finger
   or the spring); at rest these rules hold them, at the same two positions, so nothing jumps. */
@media (max-width: 1100px) {
  .ws-nav, .ws-side, .ws-context { transition: none; }
  .ws-scrim { transition: none; }
}
.ws.is-gesturing, .ws.is-gesturing * { user-select: none; -webkit-user-select: none; }
.ws-searchui.is-pulled { will-change: transform; }

@media (max-width: 780px) { .ws-bar__activity { display: none; } }

/* Activity: a view of Details (the right sidebar). Its lists, and commands and tool calls as a timeline. */
.ws-act__sub { margin: 0 .3rem .2rem; color: var(--dim); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-view="activity"] .ws-sheet__label { margin: 1rem .3rem .3rem; }
.ws-act__list { display: grid; gap: 1px; }
.ws-act__row { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 44px; padding: .45rem .5rem; border: 0; border-radius: 10px; background: none; color: var(--ink);
  font: inherit; text-align: left; text-decoration: none; }
button.ws-act__row, a.ws-act__row { cursor: pointer; }
button.ws-act__row:hover, a.ws-act__row:hover, .ws-act__row:focus-visible { background: var(--panel-strong); }
.ws-act__icon { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--paper); color: var(--muted); overflow: hidden; }
.ws-act__icon img { width: 100%; height: 100%; object-fit: cover; }
.ws-act__main { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.ws-act__main strong { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-act__main small { color: var(--dim); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-act__meta { flex: none; color: var(--dim); font-size: .75rem; font-variant-numeric: tabular-nums; }
.ws-act__row.is-good .ws-act__icon { color: var(--ok); }
.ws-act__row.is-bad .ws-act__icon { color: var(--danger); }
.ws-act__row.is-wait .ws-act__icon, .ws-act__row.is-live .ws-act__icon { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.ws-act__empty { display: grid; justify-items: center; gap: .6rem; padding: 2.5rem 1rem; color: var(--muted); text-align: center; }
.ws-act__empty p { margin: 0; max-width: 26rem; font-size: .88rem; }
.ws-act__note { color: var(--dim); font-size: .78rem; margin: 1rem .3rem; }
/* A timeline: an icon on a line joining the steps, "Ran" and what it was for; a step opens to what exactly ran. */
.ws-act__timeline { list-style: none; margin: 0; padding: 0; }
.ws-act__item { position: relative; }
.ws-act__item:not(:last-child)::before { content: ""; position: absolute; left: calc(.5rem + 8px); top: 2.05rem; bottom: -.35rem; width: 1px; background: var(--line); }
.ws-act__step { display: flex; align-items: flex-start; gap: .75rem; width: 100%; padding: .55rem .5rem; border: 0; border-radius: 10px; background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.ws-act__step:hover, .ws-act__step:focus-visible { background: var(--panel-strong); }
.ws-act__dot { flex: none; display: grid; place-items: center; width: 17px; height: 1.3rem; color: var(--muted); }
.ws-act__words { min-width: 0; line-height: 1.3rem; font-size: .9rem; overflow-wrap: anywhere; }
.ws-act__words strong { font-weight: 600; margin-right: .45rem; }
.ws-act__words span { color: var(--muted); }
.ws-act__item.is-bad .ws-act__dot, .ws-act__item.is-bad .ws-act__words strong { color: var(--danger); }
.ws-act__more { display: grid; justify-items: start; gap: .4rem; padding: 0 .5rem .6rem calc(.5rem + 17px + .75rem); }
.ws-act__more code { display: block; max-width: 100%; padding: .45rem .55rem; border-radius: 8px; background: var(--paper); font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-act__more small { color: var(--dim); font-size: .76rem; }
/* A computer's Permissions (Store, Your Computer). */
.ws-perm__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; padding: .55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.ws-perm__row select { width: 8.5rem; }
.ws-perm__levels { display: grid; gap: .2rem; margin: .3rem 0; }
.ws-perm__rules { display: grid; gap: .3rem; margin: .2rem 0 .5rem; }
.ws-perm__rule { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .2rem .2rem .2rem .55rem; border: 1px solid var(--line); border-radius: 8px; }
.ws-perm__rule code { overflow-wrap: anywhere; font-size: .82rem; }
.ws-approval__always code { font-size: .8rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-spinner { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: ws-spin .8s linear infinite; }
@keyframes ws-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ws-spinner { animation: none; } }

/* A sheet's actions (a task's, an entry's): icons in one row at its top, staying there while it scrolls. */
.ws-chip--task span { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sheet-actions { position: sticky; top: -.2rem; z-index: 2; display: flex; gap: .5rem; margin: 0 -1.1rem .2rem; padding: .55rem 1.1rem;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.ws-sheet-action { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0; border-radius: 12px; }
.ws-sheet-action[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.ws-sheet-action.ws-store__danger { margin-left: auto; }
/* Long-press or right-click a task or an entry for its menu; its options button opens the same one. */
.ws-taskrow-wrap, .ws-kcard { position: relative; }
.ws-taskrow-wrap .ws-taskrow { padding-right: 2.6rem; }
.ws-taskrow__more, .ws-kcard__more { position: absolute; top: .3rem; right: .3rem; }
.ws-kcard__open .ws-kcard__kind { padding-right: 2.2rem; }
/* Library Knowledge attachments: each file with its preview, size and state (uploading with its progress, reading,
   searchable, kept but not searchable, failed), opened, retried or removed from its row. */
.ws-attach { display: grid; gap: .4rem; }
.ws-attach__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ws-attach__list:empty { display: none; }
.ws-attach__row { position: relative; display: flex; align-items: center; gap: .6rem; min-height: 3.1rem; padding: .35rem .4rem .35rem .35rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); overflow: hidden; }
.ws-attach__thumb { flex: 0 0 auto; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 8px; background: var(--panel-strong);
  color: var(--muted); overflow: hidden; cursor: pointer; }
.ws-attach__thumb:disabled { cursor: default; }
.ws-attach__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ws-attach__text { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.ws-attach__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; color: var(--ink); }
.ws-attach__state { display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: .74rem; color: var(--muted); }
.ws-attach__state span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-attach__state svg { flex: 0 0 auto; }
.ws-attach__row.is-ready .ws-attach__state svg { color: var(--ok); }
.ws-attach__row.is-working .ws-attach__state svg { color: var(--accent); animation: ws-spin 1.2s linear infinite; }
.ws-attach__row.is-failed { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.ws-attach__row.is-failed .ws-attach__state { color: var(--red); }
.ws-attach__row.is-gone .ws-attach__name { color: var(--muted); text-decoration: line-through; }
.ws-attach__actions { flex: 0 0 auto; display: inline-flex; gap: .1rem; }
.ws-attach__actions .ws-iconbtn { width: 2.2rem; height: 2.2rem; }
.ws-attach__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ws-attach__bar span { display: block; height: 100%; background: var(--accent); transition: width .2s ease; }
.ws-attach__add { justify-self: start; }
.ws-attach__hint { margin: .2rem 0 0; font-size: .82rem; }
.ws-kcard__meta { display: flex; align-items: center; gap: .5rem; }
.ws-kcard__files { display: inline-flex; align-items: center; gap: .2rem; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ws-attach__row.is-working .ws-attach__state svg { animation: none; } }
/* The offer to continue in Iris Code, under the answer that made it: where it would go and the choice; once settled, one
   quiet line. */
.ws-continue { display: grid; gap: .55rem; margin: .7rem 0 .2rem; padding: .75rem .85rem; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); max-width: 40rem; }
.ws-continue__head { display: flex; align-items: center; gap: .6rem; }
.ws-continue__head strong { font-size: .92rem; }
.ws-continue__icon { display: grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 9px; background: color-mix(in srgb, var(--accent) 18%, var(--panel)); color: var(--accent); }
.ws-continue .ws-row-actions { margin-top: .1rem; justify-content: flex-start; flex-wrap: wrap; }
.ws-continue__count { color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-continue.is-paused .ws-continue__count { opacity: .5; }
.ws-continue.is-settled { display: flex; align-items: center; gap: .4rem; padding: .45rem .7rem; margin: .5rem 0 .1rem; border-color: var(--line); background: none;
  color: var(--muted); font-size: .82rem; width: fit-content; max-width: 100%; }
.ws-continue.is-settled svg { color: var(--accent); flex: 0 0 auto; }
/* Your Computer: a paired computer's state at a glance, and pairing one. */
.ws-computer__dot { width: .6rem; height: .6rem; flex: 0 0 auto; border-radius: 50%; background: var(--muted); margin: 0 .3rem; }
.ws-computer__dot.is-online { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.ws-store__conn.is-paused strong { color: var(--muted); }
.ws-computer__scope { display: grid; gap: .1rem; margin: .2rem 0 .4rem; }
.ws-computer__found { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ws-computer__found > span { display: grid; gap: .1rem; }
.ws-computer__found svg { color: var(--accent); flex: 0 0 auto; }

/* Settings > Appearance: four choices, each a small preview of the Workspace in that theme (its own fixed colors, so
   every card shows its theme whatever the page is in). Two across on phones, four on wider screens. */
.ws-themecards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: .2rem 0 .8rem; }
@media (min-width: 640px) { .ws-themecards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ws-themecard { display: grid; gap: .4rem; align-content: start; padding: .55rem .55rem .7rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-micro) ease; }
.ws-themecard:hover { border-color: var(--line-strong); }
.ws-themecard:active { transform: scale(.97); }
.ws-themecard[aria-checked="true"] { border-color: var(--accent); background: var(--accent-surface); box-shadow: inset 0 0 0 1px var(--accent); }
.ws-themecard__label { display: flex; align-items: center; gap: .4rem; padding: 0 .1rem; }
.ws-themecard__label strong { font-size: .88rem; font-weight: 600; }
.ws-themecard__label svg { color: var(--muted); }
.ws-themecard[aria-checked="true"] .ws-themecard__label svg { color: var(--accent); }
.ws-themecard small { padding: 0 .1rem; font-size: .74rem; line-height: 1.35; }
.ws-themecard__preview { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--pv-line); background: var(--pv-canvas); }
.ws-themecard__preview i { position: absolute; display: block; }
.ws-themecard__side { inset: 0 auto 0 0; width: 28%; background: var(--pv-side); border-right: 1px solid var(--pv-line); }
.ws-themecard__bubble { top: 20%; left: 38%; width: 46%; height: 18%; border-radius: 6px; background: var(--pv-bubble); }
.ws-themecard__line { top: 48%; left: 38%; width: 52%; height: 7%; border-radius: 4px; background: var(--pv-ink); opacity: .35; }
.ws-themecard__dot { right: 8%; bottom: 10%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--pv-accent); }
.ws-themecard--light { --pv-canvas: #f5f3ee; --pv-side: #fdfcf9; --pv-bubble: #ece9e2; --pv-line: #dbd6cc; --pv-ink: #1f2433; --pv-accent: #6a568f; }
.ws-themecard--dark { --pv-canvas: #0b101b; --pv-side: #111827; --pv-bubble: #192236; --pv-line: #2d384f; --pv-ink: #f5f1e9; --pv-accent: #b8a7e9; }
.ws-themecard--oled { --pv-canvas: #000; --pv-side: #0a0a0d; --pv-bubble: #141419; --pv-line: #22232b; --pv-ink: #f2efe8; --pv-accent: #b8a7e9; }
.ws-themecard--system { --pv-canvas: #0b101b; --pv-side: #fdfcf9; --pv-bubble: #8a8fa0; --pv-line: #5c6478; --pv-ink: #8a8fa0; --pv-accent: #b8a7e9; }
.ws-themecard--system .ws-themecard__preview { background: linear-gradient(115deg, #f5f3ee 50%, #0b101b 50%); }
.ws-themecard--system .ws-themecard__side { background: #fdfcf9; border-right-color: #dbd6cc; }

/* Other companies' marks (brands.js): on a neutral tile, never tinted, so a multicolor logo keeps its colors and a
   one-color one (GitHub) follows the text. A connection's tile carries its state in a small dot. */
.ws-brand { position: relative; display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--r-sm);
  background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
.ws-brand svg, .ws-brandmark { display: block; flex: none; }
.ws-brand--status::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: .6rem; height: .6rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--panel); }
.ws-brand--status.is-broken::after { background: var(--warn); }
.ws-storeicon--brand { color: var(--ink); background: var(--panel); border-color: var(--line); }
:root[data-theme="light"] .ws-storeicon--brand, :root[data-theme="light"] .ws-brand { background: var(--knob); }
/* A button that connects to another company: its mark and the words, on the ordinary surface (not the accent). */
.ws-button--brand { display: inline-flex; align-items: center; gap: .5rem; }
.ws-button--primary.ws-button--brand .ws-brandmark--github { color: var(--accent-ink); }
.ws-activity__brand { display: inline-flex; align-items: center; gap: .4rem; }

/* Mature images (sexual; ai/moderation.py), wherever they show (workspace.js marks them): hidden while Safemode is on
   (and until the account's choice is known), blurred until a tap with Blur NSFW on, as they are with it off.
   Pictures of their own say which, over the blur; small thumbnails are only blurred. */
:root:not([data-mature="show"]):not([data-mature="blur"]) img[data-mature-id],
:root[data-mature="blur"] img[data-mature-id]:not([data-revealed]) { filter: blur(30px) saturate(.6); clip-path: inset(0); }
:is(.ws-zoomable, .ws-tile > button, .ws-studio__tile, .ws-lightbox__stage):has(> img[data-mature-id]) { position: relative; }
:root:not([data-mature="show"]):not([data-mature="blur"]) :is(.ws-zoomable, .ws-tile > button, .ws-studio__tile, .ws-lightbox__stage):has(> img[data-mature-id])::after,
:root[data-mature="blur"] :is(.ws-zoomable, .ws-tile > button, .ws-studio__tile, .ws-lightbox__stage):has(> img[data-mature-id]:not([data-revealed]))::after {
  content: "Hidden by\A Safemode"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max-content; max-width: calc(100% - 1rem); padding: .4rem .8rem;
  border-radius: 14px; background: var(--on-image); color: var(--on-image-ink); font-size: .76rem; font-weight: 600; line-height: 1.3;
  text-align: center; white-space: pre-line; overflow: hidden; pointer-events: none; backdrop-filter: blur(4px); }
:root[data-mature="blur"] :is(.ws-zoomable, .ws-tile > button, .ws-studio__tile, .ws-lightbox__stage):has(> img[data-mature-id]:not([data-revealed]))::after {
  content: "Sexual content\A Tap to show"; }
:root[data-mature="blur"] :is(.ws-zoomable, .ws-tile > button, .ws-studio__tile):has(> img[data-mature-id]:not([data-revealed])) { cursor: pointer; }
@media (hover: hover) { :root[data-mature="blur"] :is(.ws-zoomable, .ws-tile > button, .ws-studio__tile, .ws-lightbox__stage):has(> img[data-mature-id]:not([data-revealed]))::after {
  content: "Sexual content\A Click to show"; } }

/* A long chat's earlier messages, a page at a time, above the first one shown. */
.ws-earlier { align-self: center; display: inline-flex; align-items: center; gap: .4rem; margin: .25rem auto .75rem; }

/* Admin > Models (modelsScreen): the chat models, Dyadic's model per job, OpenRouter's list. */
.ws-cpnote { margin-top: -.2rem; }
.ws-cpmodels { display: grid; gap: .6rem; margin-bottom: .6rem; }
.ws-cpmodel { display: grid; gap: .45rem; padding: .75rem; border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: var(--panel-strong); }
.ws-cpmodel > .ws-button { justify-self: start; }
.ws-cpmodel__head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ws-cpmodel__head code, .ws-cprow code, .ws-catalog__item code { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ws-cpmodel__head code { flex: 1; }
.ws-cpmodel__about { font-size: .76rem; }
.ws-cpmodel__about:empty { display: none; }
.ws-cpmodel__foot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ws-cpmodel__foot select { font: inherit; font-size: .8rem; padding: .3rem .55rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; max-width: 12rem; }
.ws-cpmodel__summary { margin: 0; font-size: .8rem; }
.ws-cpmodel__tools .is-tuned { color: var(--accent); }
.ws-cpsettings { display: grid; gap: .8rem; margin: .4rem 0 .8rem; }
/* A setting: its field with Revert to Default beside it once it's set. */
.ws-cpfield__row { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.ws-cpfield__row > input, .ws-cpfield__row > select, .ws-cpfield__row > textarea { flex: 1; min-width: 0; }
/* Its place is kept while it's hidden, so every field is the same width and none moves when one is set. */
.ws-cpfield__row > .ws-iconbtn[hidden] { display: inline-grid; visibility: hidden; }
.ws-cpadvanced { margin: .2rem 0 .8rem; }
.ws-cpadvanced > summary { cursor: pointer; display: flex; align-items: center; gap: .4rem; color: var(--dim); font-size: .78rem; font-weight: 600; margin: .5rem .25rem .45rem; }
.ws-cpsettings textarea { font-family: var(--font-mono); font-size: .8rem; }
.ws-cpmodel__tools { display: flex; gap: .1rem; flex: none; }
.ws-cpmodel__tools .ws-icon:disabled { opacity: .35; cursor: default; }
.ws-cpactions { margin: 0 0 1rem; }
.ws-cpgroup { display: flex; flex-direction: column; }
.ws-cprow { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-top: 1px solid var(--line-soft); }
.ws-cprow:first-child { border-top: 0; }
.ws-cprow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.ws-cprow__text small { font-size: .78rem; }
.ws-cprow__text code { color: var(--ink); }
.ws-cprow__actions { display: flex; gap: .35rem; flex: none; }
.ws-catalog__filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0; }
.ws-catalog__filters .ws-check { margin: 0; }
.ws-catalog__bar { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.ws-catalog__bar small { flex: 1; }
.ws-catalog { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: var(--panel-strong); overflow: hidden; }
.ws-catalog > p { padding: .8rem 1rem; }
.ws-catalog__item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .65rem 1rem; border: 0; border-top: 1px solid var(--line-soft); background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.ws-catalog__item:first-child { border-top: 0; }
.ws-catalog__item:hover { background: var(--panel); }
.ws-catalog__item > input { flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.ws-catalog__item > svg { flex: none; color: var(--muted); }
.ws-catalog__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.ws-catalog__text small { font-size: .78rem; }
.ws-compare { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: var(--panel-strong); }
.ws-compare table { border-collapse: collapse; width: 100%; font-size: .84rem; }
.ws-compare th, .ws-compare td { padding: .55rem .75rem; text-align: left; border-top: 1px solid var(--line-soft); vertical-align: top; min-width: 8rem; }
.ws-compare thead th { border-top: 0; font-weight: 600; }
.ws-compare tbody th { color: var(--muted); font-weight: 500; min-width: 9rem; position: sticky; left: 0; background: var(--panel-strong); }
.ws-compare td.is-best { color: var(--accent); font-weight: 600; }
.ws-compare__about { margin-top: .6rem; font-size: .85rem; }
.ws-compare__about summary { cursor: pointer; font-weight: 600; }
.ws-compare__about p { margin: .4rem 0 0; }
@media (max-width: 600px) { .ws-cprow { flex-wrap: wrap; } .ws-cprow__actions { width: 100%; } }

/* A plan never grows past its dock (a long check or title pushed the card sideways): every level may shrink. */
.ws-steps, .ws-step, .ws-step__row, .ws-step__head, .ws-step__body, .ws-step__line, .ws-fold { min-width: 0; max-width: 100%; }
.ws-step__title, .ws-step__body p { overflow-wrap: anywhere; }
.ws-step__head { flex: 1 1 auto; }

/* -- the nested accordion tree (tree.js): Black Box events, API requests, an answer's tools, Activity ----------------
   Rows fold under their parent behind a chevron. A line runs down from each parent to its children, with an elbow and a
   dot at each child: solid from a top-level row, dashed below that (the owner, 2026-10-15). The elbow meets a row at
   --ft-elbow, the middle of its first line. */
.ws-ftree { --ft-indent: 1.5rem; --ft-gap: .35rem; --ft-elbow: 1.2rem; --ft-x: .8rem; --ft-line: color-mix(in srgb, var(--violet) 60%, transparent);
  --ft-dash: repeating-linear-gradient(90deg, var(--ft-line) 0 3px, transparent 3px 6px);
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ft-gap); min-width: 0; }
.ws-ftree__kids { list-style: none; margin: var(--ft-gap) 0 0; padding: 0 0 0 var(--ft-indent); display: grid; gap: var(--ft-gap); min-width: 0; }
.ws-ftree__kids[hidden] { display: none; }
.ws-ftree__node { position: relative; min-width: 0; }
/* The card is the tree's own (the row inside it brings no border of its own), with the chevron inside it at the left: a
   card's left edge depends only on how deep it is (the owner, 2026-10-15: a chevron outside the card staggered a
   parent in from its children). */
.ws-ftree__item { display: flex; align-items: flex-start; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden;
  transition: border-color .15s ease; }
.ws-ftree__item > :last-child { flex: 1 1 auto; min-width: 0; }
.ws-ftree__item > :is(.ws-log, .bb-event, .ws-activity__tool, .ws-act__item, .ws-act__answer) { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ws-ftree__toggle { flex: none; display: grid; place-items: center; width: calc(var(--ft-x) * 2); height: calc(var(--ft-elbow) * 2 - 2px); margin-right: -.35rem; padding: 0;
  border: 0; border-radius: 10px 0 0 10px; background: none; color: var(--muted); cursor: pointer; }
.ws-ftree__toggle:hover { color: var(--ink); }
/* A top-level card set apart; one that failed, or is open to its details, says so with its border. */
.ws-ftree > .ws-ftree__node > .ws-ftree__item { border-color: color-mix(in srgb, var(--violet) 40%, var(--line)); background: color-mix(in srgb, var(--violet) 5%, var(--panel)); }
.ws-ftree__item:has(> :is(.is-failed, .is-bad)) { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.ws-ftree__item:has(> .ws-log.is-open) { border-color: var(--accent); }
.ws-ftree__toggle svg { display: block; transform: rotate(-90deg); transition: transform .18s ease; }
.ws-ftree__node.is-open > .ws-ftree__item > .ws-ftree__toggle svg { transform: none; }
/* The line down from the parent (its chevron's middle), one stretch per child, ending at the last child's elbow. */
.ws-ftree__kids > .ws-ftree__node::before { content: ""; position: absolute; left: calc(var(--ft-x) - var(--ft-indent) - 1px); top: calc(var(--ft-gap) * -1); bottom: 0;
  border-left: 2px var(--ft-style, solid) var(--ft-line); }
.ws-ftree__kids > .ws-ftree__node:last-child::before { bottom: auto; height: calc(var(--ft-gap) + var(--ft-elbow)); }
/* The elbow to the child, and its dot. */
.ws-ftree__kids > .ws-ftree__node::after { content: ""; position: absolute; left: calc(var(--ft-x) - var(--ft-indent)); top: calc(var(--ft-elbow) - 4px);
  width: calc(var(--ft-indent) - var(--ft-x) + 1px); height: 8px; pointer-events: none;
  background: radial-gradient(circle, var(--violet) 0 3px, transparent 3.5px) right center / 8px 8px no-repeat,
    linear-gradient(var(--ft-line), var(--ft-line)) left center / calc(100% - 6px) 2px no-repeat; }
/* Below the first level the lines are dashed. */
.ws-ftree__kids .ws-ftree__kids { --ft-style: dashed; }
.ws-ftree__kids .ws-ftree__kids > .ws-ftree__node::after {
  background: radial-gradient(circle, var(--violet) 0 3px, transparent 3.5px) right center / 8px 8px no-repeat, var(--ft-dash) left center / calc(100% - 6px) 2px no-repeat; }
.ws-ftree__note { padding: .3rem .5rem; font-size: .8rem; }
@media (max-width: 640px) { .ws-ftree { --ft-indent: 1.15rem; --ft-x: .7rem; } }
@media (prefers-reduced-motion: reduce) { .ws-ftree__toggle svg { transition: none; } }

/* API Activity as a tree: a request's model calls fold under it, and their tool calls under them (tree.js). A request
   stays the full card; a call is a smaller one (status, model, credits, then time, tokens and how long). */
.ws-logtree { --ft-elbow: 1.45rem; }
.ws-call { animation: none; }
.ws-call__head { width: 100%; display: grid; grid-template-columns: auto 1.6rem minmax(0, 1fr) auto 14px; grid-template-areas: "status icon what credits chev" "status icon meta credits chev";
  align-items: center; column-gap: .55rem; row-gap: .1rem; padding: .45rem .7rem; border: 0; background: none; color: var(--ink); font: inherit; font-size: .84rem; text-align: start; }
button.ws-call__head { cursor: pointer; }
button.ws-call__head:hover { background: var(--panel-strong); }
.ws-call__head > .ws-log__status { grid-area: status; }
.ws-call__icon { grid-area: icon; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; color: var(--accent); background: var(--accent-surface); }
.ws-call__icon svg { display: block; }
.ws-call__what { grid-area: what; display: grid; min-width: 0; }
.ws-call__what strong, .ws-call__what small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-call__what small { color: var(--muted); font-size: .72rem; }
.ws-call__head > .ws-log__num { grid-area: credits; }
.ws-call__head > svg:last-child { grid-area: chev; display: block; }
.ws-call__meta { grid-area: meta; min-width: 0; color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-call--tool .ws-call__head { grid-template-columns: auto 1.6rem minmax(0, 1fr); grid-template-areas: "status icon what" "status icon meta"; }
.ws-call--tool .ws-call__icon { color: var(--muted); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ws-call--tool.is-failed .ws-call__what small { color: var(--red); }

/* The Tools popup and Activity's tool calls as trees (tree.js): each row a small rounded card; a model call (or, in
   Activity, an answer) set apart as the row its tools fold under. */
.ws-tooltree, .ws-acttree { --ft-elbow: 1.15rem; margin: .5rem 0 .2rem; }
:is(.ws-tooltree, .ws-acttree) .ws-activity__tool { padding: .45rem .6rem; }
:is(.ws-tooltree, .ws-acttree) .ws-ftree__item:has(> :is(.ws-activity__round, .ws-act__answer)) { border-color: color-mix(in srgb, var(--violet) 30%, var(--line)); }
:is(.ws-tooltree, .ws-acttree) .ws-activity__round .ws-activity__icon { color: var(--violet); }
:is(.ws-tooltree, .ws-acttree) .ws-activity__round.is-failed .ws-activity__icon { color: var(--danger); }
.ws-acttree .ws-act__answer .ws-act__dot { color: var(--violet); }
.ws-acttree .ws-act__answer.is-bad .ws-act__words span { color: var(--danger); }

/* Full View on a computer: Details takes the chat's place (the sidebar stays). Its pages keep a readable width, centered. */
@media (min-width: 1101px) {
  .ws.has-context.panel-full { grid-template-columns: auto minmax(0, 1fr); }
  .ws.panel-full .ws-main { display: none; }
}
.ws.panel-full .ws-context > section, .ws.panel-full .ws-context__top > * { max-width: 60rem; margin-inline: auto; }
.ws-plan__history .ws-step__icon svg { animation: none; }
/* One call card (cards.js): a request in API Activity, a run in the Black Box and a call under either, the same size and
   layout everywhere. Status dot, icon, who made it over its kind and model, badges, when and what it used, then the way
   to its page; its icon links to the same call's other pages sit at the end. */
.ws-cards { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ws-callcard { display: flex; align-items: center; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.ws-callcard.is-failed { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.ws-callcard__main { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "dot icon what badges meta"; align-items: center; column-gap: .6rem; min-height: 3.25rem; padding: .5rem .7rem;
  border: 0; border-radius: inherit; background: none; color: var(--ink); font: inherit; font-size: .84rem; text-align: start; }
button.ws-callcard__main { cursor: pointer; }
button.ws-callcard__main:hover { background: var(--panel-strong); }
button.ws-callcard__main:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ws-callcard__dot { grid-area: dot; width: .55rem; height: .55rem; border-radius: 50%; background: var(--muted); }
.ws-callcard__dot.is-ok { background: var(--ok); } .ws-callcard__dot.is-bad { background: var(--red); }
.ws-callcard__dot.is-warn { background: var(--warn); } .ws-callcard__dot.is-info { background: var(--info); }
.ws-callcard__icon { grid-area: icon; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; overflow: hidden;
  background: var(--accent-surface); color: var(--accent); }
.ws-callcard__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ws-callcard__icon svg, .ws-callcard__go svg { display: block; }
.ws-callcard__what { grid-area: what; display: grid; min-width: 0; }
.ws-callcard__what strong, .ws-callcard__what small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-callcard__what strong { font-weight: 600; }
.ws-callcard__what small { color: var(--muted); font-size: .74rem; }
.ws-callcard__badges { grid-area: badges; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; min-width: 0; }
.ws-callcard__meta { grid-area: meta; color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
.ws-callcard__go { flex: none; display: grid; place-items: center; align-self: stretch; padding: 0 .7rem 0 .2rem; color: var(--muted); cursor: pointer; }
.ws-callcard__links + .ws-callcard__go { padding-left: 0; }
.ws-callcard__links { flex: none; display: flex; align-items: center; gap: .1rem; padding-right: .35rem; }
.ws-callcard__links .ws-iconbtn { width: 2rem; height: 2rem; }
.ws-ftree__item > .ws-callcard { flex: 1 1 auto; margin: 0; border: 0; border-radius: 0; background: none; }
@media (max-width: 700px) {
  .ws-callcard__main { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "dot icon what" ". . meta" ". . badges"; row-gap: .25rem; }
  .ws-callcard__badges { justify-content: flex-start; }
  .ws-callcard__badges:empty { display: none; }
}
/* A word in a pill, the color only repeating it: every status and badge on a card, in the Black Box and API Activity. */
.ws-tone { display: inline-flex; align-items: center; gap: .25rem; flex: 0 0 auto; font-size: .7rem; font-weight: 650; line-height: 1.4; padding: .08rem .5rem;
  border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, currentColor 45%, transparent); background: color-mix(in srgb, currentColor 9%, transparent); white-space: nowrap; }
.ws-tone--ok { color: var(--ok); } .ws-tone--warn { color: var(--warn); } .ws-tone--bad { color: var(--danger, var(--red)); }
.ws-tone--info { color: var(--info); } .ws-tone--muted { color: var(--muted); }
/* A call's page (an API request, a Black Box run): one header card, the same on both. */
.ws-callhead { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.ws-callhead__top { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.ws-callhead__top .ws-callcard__icon { width: 2.25rem; height: 2.25rem; flex: none; }
.ws-callhead__title { flex: 1 1 auto; min-width: 0; display: grid; gap: .15rem; }
.ws-callhead .ws-callhead__title h2 { display: block; margin: 0; font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--ink); overflow-wrap: anywhere; }
.ws-callhead__title small { color: var(--muted); font-size: .8rem; }
.ws-callhead__actions { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .1rem; }
.ws-callhead__badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.ws-callhead .ws-facts { margin: 0; font-size: .82rem; }
.ws-pageback { align-self: flex-start; margin: 0 0 .25rem -.5rem; }
/* One way to open anything that folds (the owner, 2026-10-15: "to not have 100000 different ways to open an accordion"):
   a chevron on the left, pointing right while it's closed and down when it's open, the same as the trees' (tree.js). */
summary { display: flex; align-items: center; gap: .4rem; list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; opacity: .7; transition: transform .18s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
details[open] > summary::before { transform: rotate(90deg); }
/* No line on a card or a tile wraps (the owner, 2026-10-15): what doesn't fit ends in "…", whole in its tooltip. */
.ws-callcard__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-tile > * { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-sevcounts { flex-wrap: nowrap; overflow: hidden; }
@media (max-width: 700px) { .ws-callcard__meta { white-space: nowrap; text-align: start; } }
/* On a phone a card's icon links sit up beside its title, so its time, tokens and credits keep the whole line. */
@media (max-width: 700px) {
  .ws-callcard { position: relative; }
  .ws-callcard__links { position: absolute; top: .3rem; right: 2rem; padding: 0; }
  .ws-callcard:has(> .ws-callcard__links) .ws-callcard__what > strong { padding-right: 4.4rem; }
}
/* Every page's search is the same pill: one height, the words inside it at one size. */
.ws-page-search { box-sizing: border-box; height: 2.5rem; padding-block: 0; }
.ws-page-search input { height: 100%; padding: 0; font-size: .88rem; }
/* A card with calls inside folds with a tap on it (no chevron on the left); its icon links keep clear of its chevron,
   which opens its page; the dot and the icon sit on the card's middle, as the chevron does. */
.ws-ftree__node.folds-on-row > .ws-ftree__item > .ws-callcard > .ws-callcard__main { cursor: pointer; }
div.ws-callcard__main[role="button"]:hover { background: var(--panel-strong); }
div.ws-callcard__main[role="button"]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ws-callcard__links { gap: .35rem; padding-right: 0; }
.ws-callcard__go { min-width: 2.75rem; padding: 0 .75rem 0 .55rem; }
.ws-callcard__links + .ws-callcard__go { margin-left: .5rem; padding-left: .55rem; border-left: 1px solid var(--line-soft); }
.ws-callcard__dot, .ws-callcard__icon { align-self: center; }
@media (max-width: 700px) {
  .ws-callcard__main { grid-template-areas: "dot icon what" "dot icon meta" "dot icon badges"; }
  .ws-callcard__links { right: 3.4rem; }
  .ws-callcard:has(> .ws-callcard__links) .ws-callcard__what > strong { padding-right: 5rem; }
  .ws-callcard__links + .ws-callcard__go { margin-left: 0; border-left: 0; }
}
/* A call the platform refused (a plan record out of order): amber, not red. */
.ws-log__error.is-refused { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
/* A card's two ways in (the owner, 2026-10-15: "blended", "distinguishable", "make it look good"):
   - its page: an accent chevron at the card's right edge, nothing behind it;
   - what's inside: a count bubble on the corner of its icon ("+3"), cut out of the card, a ring while open.
   Its icon links are quiet round icons with a soft fill. */
.ws-callcard { overflow: hidden; }
.ws-callcard__go { flex: none; align-self: stretch; display: grid; place-items: center; padding: 0 .8rem 0 .3rem; border: 0; background: none;
  color: var(--violet, var(--accent)); cursor: pointer; }
.ws-callcard__go svg { width: 18px; height: 18px; }
.ws-callcard.is-failed .ws-callcard__go { color: var(--red); }
.ws-callcard__links { gap: .3rem; padding-right: .15rem; }
.ws-callcard__links .ws-iconbtn, .ws-callhead__actions .ws-iconbtn { width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--muted); }
.ws-callcard__links .ws-iconbtn:hover, .ws-callhead__actions .ws-iconbtn:hover { background: color-mix(in srgb, var(--violet, var(--accent)) 18%, transparent);
  color: var(--ink); }
.ws-callhead__actions { gap: .4rem; }
.ws-callcard__icon { position: relative; overflow: visible; }
.ws-callcard__icon > img { border-radius: 50%; }
.ws-callcard__count { position: absolute; right: -.45rem; bottom: -.35rem; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.2rem; height: 1.05rem; padding: 0 .28rem; border-radius: 999px; font-size: .6rem; font-weight: 800; letter-spacing: .01em;
  color: var(--panel); background: linear-gradient(135deg, var(--violet, var(--accent)), color-mix(in srgb, var(--violet, var(--accent)) 60%, var(--info)));
  box-shadow: 0 0 0 2px var(--panel); transition: background .2s ease, color .2s ease; }
.ws-ftree__node.is-open > .ws-ftree__item > .ws-callcard .ws-callcard__count { background: var(--panel); color: var(--violet, var(--accent));
  box-shadow: 0 0 0 2px var(--panel), inset 0 0 0 1.5px var(--violet, var(--accent)); }
.ws-ftree__node.folds-on-row > .ws-ftree__item > .ws-callcard > .ws-callcard__main { cursor: pointer; }
div.ws-callcard__main[role="button"]:hover { background: var(--panel-strong); }
div.ws-callcard__main[role="button"]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ws-callcard__dot, .ws-callcard__icon { align-self: center; }
@media (max-width: 700px) {
  .ws-callcard__main { grid-template-areas: "dot icon what" "dot icon meta" "dot icon badges"; padding-right: .3rem; column-gap: .55rem; }
  .ws-callcard__go { padding: 0 .6rem 0 .15rem; }
  .ws-callcard__links { right: 2.4rem; }
  .ws-callcard:has(> .ws-callcard__links) .ws-callcard__what > strong { padding-right: 4.8rem; }
}
@media (prefers-reduced-motion: reduce) { .ws-callcard__count { transition: none; } }
/* The line runs into each card's own dot (the owner, 2026-10-15: "make the dots connect to the dots on the card from the
   line"): no dot of the tree's beside the card; the branch meets the card's dot at its middle, solid or dashed like the line. */
.ws-ftree__kids > .ws-ftree__node:has(> .ws-ftree__item > .ws-callcard)::after { display: none; }
.ws-ftree__kids > .ws-ftree__node:has(> .ws-ftree__item > .ws-callcard):last-child::before { display: none; }
.ws-ftree__item:has(> .ws-callcard) { position: relative; overflow: visible; }
.ws-ftree__item > .ws-callcard { border-radius: 11px; }
.ws-ftree__kids > .ws-ftree__node > .ws-ftree__item:has(> .ws-callcard)::before { content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: calc(var(--ft-x) - var(--ft-indent) - 2px); top: 50%; width: calc(var(--ft-indent) - var(--ft-x) + 1.15rem); height: 0;
  border-top: 2px var(--ft-style, solid) var(--ft-line); transform: translateY(-1px); }
.ws-ftree__kids > .ws-ftree__node:last-child > .ws-ftree__item:has(> .ws-callcard)::after { content: ""; position: absolute; pointer-events: none;
  left: calc(var(--ft-x) - var(--ft-indent) - 2px); top: calc(var(--ft-gap) * -1 - 1px); bottom: 50%; border-left: 2px var(--ft-style, solid) var(--ft-line); }
.ws-ftree__item > .ws-callcard .ws-callcard__dot { position: relative; z-index: 2; box-shadow: 0 0 0 2px var(--panel); }

/* The sidebar across the whole screen (a phone; renderOverview): every library a card holding its projects and chats,
   the tools as tiles, then you. It fades in over the sidebar as the sidebar widens. */
.ws-overview { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; min-height: 0; padding-top: var(--drawer-top); background: var(--paper); }
.ws-overview[hidden] { display: none; }
.ws-overview__head { display: flex; align-items: center; gap: .35rem; padding: .7rem .75rem .45rem 1rem; }
.ws-overview__head h2 { margin: 0 auto 0 0; font-size: 1.15rem; font-weight: 800; }
.ws-overview__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .6rem;
  padding: .3rem .85rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
.ws-overview__label { margin: .7rem .2rem .05rem; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ws-ocard { flex: none; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.ws-ocard__head { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 3.25rem; padding: 0 .85rem; border: 0; border-radius: inherit;
  background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.ws-ocard__head:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ws-ocard__chev { display: grid; place-items: center; flex: none; color: var(--muted); transition: transform .22s cubic-bezier(.2, .8, .3, 1); }
.ws-ocard__chev svg { display: block; }
.ws-ocard.is-open .ws-ocard__chev { transform: rotate(90deg); }
.ws-ocard__icon { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: color-mix(in srgb, var(--tint, var(--accent)) 16%, var(--panel)); color: var(--tint, var(--accent)); }
.ws-ocard__icon > * { display: block; }
.ws-ocard__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .98rem; font-weight: 700; }
.ws-ocard__note { flex: none; color: var(--muted); font-size: .76rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Folding open and shut smoothly: the body's one row grows from nothing to its content's height. */
.ws-ocard__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s cubic-bezier(.2, .8, .3, 1); }
.ws-ocard.is-open > .ws-ocard__body { grid-template-rows: 1fr; }
.ws-ocard__inner { min-height: 0; overflow: hidden; }
.ws-ocard__content.ws-tree { display: flex; flex-direction: column; gap: .2rem; flex: none; overflow: visible; padding: .55rem .4rem .6rem; border-top: 1px solid var(--line); }
.ws-ocard__content > .ws-tree__list { margin: 0; }
.ws-ocard__chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .1rem .3rem .25rem; }
.ws-ocard__chip { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.ws-ocard__chip > svg { display: block; flex: none; }
.ws-ocard--add { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.9rem; border-style: dashed; background: none; font-size: .9rem;
  color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.ws-ocard--add > svg { display: block; flex: none; }
.ws-otools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.ws-otile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-width: 0; min-height: 4.6rem; padding: .5rem .25rem;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); color: var(--ink); font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; }
.ws-otile > svg { display: block; flex: none; color: var(--accent); }
.ws-otile > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-otile[aria-current="true"] { border-color: var(--accent); background: var(--accent-surface); }
.ws-ome { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem .45rem .45rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.ws-ome__me { flex: 1 1 auto; display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .25rem; border: 0; border-radius: var(--r-md); background: none;
  color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.ws-ome__avatar { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line); border-radius: 50%; overflow: hidden; }
.ws-ome__avatar > .ws-msg__avatar { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; border-radius: 50%; font-size: .95rem; object-fit: cover; }
.ws-ome__who { display: grid; min-width: 0; }
.ws-ome__who strong, .ws-ome__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-ome__who small { color: var(--muted); font-size: .76rem; }
.ws-ome__bell { position: relative; flex: none; }
@media (max-width: 780px) { .ws.nav-full .ws-nav { width: 100vw; } }
@media (prefers-reduced-motion: reduce) { .ws-ocard__body, .ws-ocard__chev { transition: none; } }

/* A hub (Content, Work, Developers; hubFrame): one page, its sections as the Details panel's tabs (an icon over each name,
   in its own color when chosen), kept at the top as the page scrolls. */
.ws-hub { gap: 1rem; }
.ws-hub__nav { position: sticky; top: calc(-1 * var(--page-top)); z-index: 5; margin: calc(-1 * var(--page-top)) calc(-1 * var(--page-x)) 0; padding: .4rem var(--page-x);
  border-bottom: 1px solid var(--line); background: var(--paper); }
.ws-hubtabs { grid-template-columns: repeat(var(--hub-n, 4), minmax(0, 1fr)); gap: .1rem; margin: 0; padding: 0; border: 0; background: none; }
.ws-hubtabs button { height: 3.25rem; padding: .2rem 0; font-size: .66rem; letter-spacing: -.01em; }
.ws-hubtabs [data-section="overview"], .ws-hubtabs [data-section="saved"] { --tab: var(--cyan); }
.ws-hubtabs [data-section="blackbox"], .ws-hubtabs [data-section="images"] { --tab: var(--violet); }
.ws-hubtabs [data-section="keys"], .ws-hubtabs [data-section="files"] { --tab: var(--amber); }
.ws-hubtabs [data-section="tools"], .ws-hubtabs [data-section="automations"] { --tab: var(--coral); }
.ws-hubtabs [data-section="connect"], .ws-hubtabs [data-section="tasks"] { --tab: var(--ok); }
.ws-hub__body { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (min-width: 781px) { .ws-hubtabs button { flex-direction: row; gap: .45rem; height: 2.6rem; font-size: .8rem; } }

/* Content's Images bar: the library's pill (Albums, search, ⋯) with the primary action at the right (Create Image, or New
   Album on Albums); while searching, the search takes the row. */
.ws-imgbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; min-width: 0; margin-bottom: .6rem; }
.ws-imgbar > .ws-button { flex: none; height: 2.6rem; margin-left: auto; }
.ws-imgbar > .ws-page-tools { margin: 0; }  /* the bar spaces the row (Images' tools rule above gives one a margin) */
.ws-imgbar:has(> .ws-page-tools.is-searching) > .ws-button { display: none; }
.ws-knowledgechip { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; align-self: stretch; padding-inline: .8rem; border-radius: 8px; font-size: .84rem; }
.ws-knowledgechip > svg { display: block; flex: none; }

/* Elastic (the owner, 2026-10-15, after suez's Elastic SVG Sidebar and Codrops' Elastic SVG Elements). The surfaces'
   leading edges are elastic.js's; these are the springs CSS carries: a press gives, then springs back past where it was
   and settles; a menu drops open and a dialog lands with a spring; a switch's knob overshoots and settles; a phone's
   sheet rises and its top stretches and settles, anchored where it sits. --ease-springy is an underdamped spring
   sampled as linear() (about a quarter past, then back), long enough to see it settle. Reduced motion turns them off
   with every other animation (above). */
:root { --ease-springy: linear(0, 0.042, 0.153, 0.309, 0.49, 0.674, 0.847, 0.997, 1.117, 1.202, 1.254, 1.274, 1.268, 1.242, 1.202, 1.153,
  1.102, 1.053, 1.01, 0.975, 0.949, 0.933, 0.925, 0.925, 0.931, 0.941, 0.954, 0.968, 0.982, 0.994, 1.005, 1.012, 1.018, 1.02, 1.021, 1.019, 1);
  --dur-spring: 560ms; }
/* An edge's outward bow (elastic.js): drawn at the surface's corner, over the page (or inside a dialog, which then
   shows past its box while it bows). */
.ws-goo { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; z-index: 50; pointer-events: none; }
.ws-goo--inside { position: absolute; z-index: 3; }
.ws-searchui.is-elastic { overflow: visible; }
/* A press: in quickly, out on the spring. */
.ws-iconbtn, .ws-button, .ws-toggle, .ws-chip--action, .ws-chip--files, .ws-send, .ws-agent-pick, .ws-row, .ws-nav__item, .ws-quality__chip, .ws-aspect__chip, .ws-mode, .ws-swatch, .ws-picker__icon, .ws-segmented button, .ws-searchui__tabs button, .ws-savebtn {
  transition: transform var(--dur-spring) var(--ease-springy), background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease; }
.ws-iconbtn:active, .ws-button:active, .ws-toggle:active, .ws-chip--action:active, .ws-send:active, .ws-agent-pick:active, .ws-quality__chip:active, .ws-aspect__chip:active,
.ws-mode:active, .ws-swatch:active, .ws-picker__icon:active, .ws-segmented button:active, .ws-searchui__tabs button:active, .ws-savebtn:active, .ws-row:active, .ws-nav__item:active {
  transition: transform 90ms ease-out, background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease; }
/* A menu drops open from where it's anchored and springs; a dialog lands. */
@keyframes ws-menu-drop { from { opacity: 0; transform: scale(.94, .8); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
.ws-menu:not([hidden]) { animation: ws-menu-drop var(--dur-spring) var(--ease-springy); }
.ws-dialog[open] { animation: ws-pop-in var(--dur-spring) var(--ease-springy); }
.ws-toast { animation: ws-toast-in var(--dur-spring) var(--ease-springy); }
/* A switch's knob. */
.ws-switch input::after, .ws-setting input[role="switch"]::after { transition: transform var(--dur-spring) var(--ease-springy), background var(--dur-fast) ease; }
.ws-menuswitch::after { transition: transform var(--dur-spring) var(--ease-springy); }
/* A phone's sheet: it rises, its top stretches past and settles, held at the bottom where it sits. */
@keyframes ws-sheet-rise-elastic {
  0% { transform: translateY(100%); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  48% { transform: translateY(0) scaleY(1.03); animation-timing-function: ease-in-out; }
  68% { transform: scaleY(.99); animation-timing-function: ease-in-out; }
  84% { transform: scaleY(1.004); animation-timing-function: ease-out; }
  100% { transform: none; } }
@media (max-width: 600px) {
  .ws-dialog:not(.ws-dialog--confirm)[open] { transform-origin: 50% 100%; animation: ws-sheet-rise-elastic 520ms; }  /* no fill: a swipe down on it sets its own transform */
}

/* Full width on a phone (the owner, 2026-10-15: "I explicitly asked for full width"; "the edges are inconsistent";
   "still give them a buffer ... I just want the pages elements to be full width, like the boxes"). A page's boxes run
   from edge to edge: each top-level section, fold, chart, card and row, the runs in a list and the tiles, with no side
   borders or round corners. Words never do: everything written, inside a box or between them (headings, labels,
   toolbars, filters), keeps one margin from the edge, the page's. A frame inside a box (a chart's, a table's, a
   section's) is dropped: no box in a box. */
@media (max-width: 700px) {
  .ws-messages { --page-x: 1rem; }
  .ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-ftree, .ws-tiles):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *) {
    width: calc(100% + 2 * var(--page-x)); max-width: none; margin-inline: calc(-1 * var(--page-x)); box-sizing: border-box;
    border-left-width: 0; border-right-width: 0; border-radius: 0; }
  /* Their words on the page's margin. */
  .ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *) { padding-left: var(--page-x); padding-right: var(--page-x); }
  .ws-project .bb-fold > summary, .ws-project .bb-fold__body { padding-left: var(--page-x); padding-right: var(--page-x); }
  .ws-project .bb-fold[open] > summary { border-radius: 0; }
  /* A frame inside a box goes. */
  .ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) :is(section, .ws-table, .bb-card, .bb-whatif, .ws-log, .ws-info__card) {
    margin-inline: 0; padding-inline: 0; border: 0; border-radius: 0; background: none; }
  /* The runs in a list: each a band, a run's calls indented under it to the same right edge. */
  .ws-project .ws-ftree:not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *) .ws-ftree__item { border-radius: 0; border-right-width: 0; }
  .ws-project .ws-ftree:not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *) > .ws-ftree__node > .ws-ftree__item { border-left-width: 0; padding-left: calc(var(--page-x) - .8rem); }
  /* The tiles: two to a row, edge to edge, a line between them. */
  .ws-project .ws-tiles:not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *) { gap: 0; border-top: 1px solid var(--line); }
  .ws-project .ws-tiles:not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *) > .ws-tile { border-width: 0 0 1px; border-radius: 0; padding-left: var(--page-x); padding-right: var(--page-x); }
  .ws-project .ws-tiles:not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *) > .ws-tile:nth-child(odd) { box-shadow: inset -1px 0 0 var(--line); }
  /* Rows of controls (a search, filters, a page's toolbar) are bands too: edge to edge, the fields side by side without
     frames of their own, a hairline between them, their words on the page's margin. */
  .ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar) *) {
    width: calc(100% + 2 * var(--page-x)); max-width: none; margin-inline: calc(-1 * var(--page-x)); box-sizing: border-box;
    display: flex; flex-wrap: wrap; gap: 1px; padding: 0; border: 0; border-block: 1px solid var(--line); border-radius: 0; background: var(--line); }
  .ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar) *) > * {
    flex: 1 1 auto; width: auto; min-width: 0; max-width: none; height: auto; min-height: 2.75rem; margin: 0; box-sizing: border-box;
    border: 0; border-radius: 0; background: var(--panel); box-shadow: none; padding-left: var(--page-x); padding-right: var(--page-x); }
  .ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar) *) > :is(span, small, p, .ws-page-tools__note) { display: flex; align-items: center; }
  .ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar) *) > .ws-segmented { padding: .25rem var(--page-x); }
  .ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar) *) > .ws-segmented button { flex: 1; }
  .ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar) *) > span:empty { display: none; }  /* a spacer is no cell */
  .ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar) *) > .ws-button--primary { flex: 0 1 auto; background: var(--accent); color: var(--accent-ink); }
  .ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools, .ws-imgbar) *) > .ws-page-tools { height: 2.75rem; padding-block: 0; align-items: stretch; }
}
/* The composer on a phone, full width too (the owner, 2026-10-15: "None of the elements are full width", of the message
   box and the queue): the message box is a bar along the bottom, round only at its top corners; the Plan Dock on it and
   the messages waiting in the queue have the same edges; their words and buttons keep a margin. */
@media (max-width: 700px) {
  .ws-composer { padding: .5rem 0 0; border-top: 0; }
  .ws-composer > * { max-width: none; }
  .ws-inputbox { padding: .35rem .6rem calc(.35rem + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
  .ws-plandock { border-left-width: 0; border-right-width: 0; padding-left: 1rem; padding-right: 1rem; }
  .ws-plandock__body { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
  .ws-queue { margin-bottom: .5rem; }
  .ws-queued { padding: .45rem 1rem; border-width: 1px 0; border-radius: 0; }
}
/* A menu item that says what it does, under its name (the send modes). */
.ws-menu__text { display: grid; gap: .1rem; min-width: 0; text-align: start; }
.ws-menu__text small { font-size: .74rem; font-weight: 400; color: var(--muted); white-space: normal; line-height: 1.3; }
/* The elastic edge's line, glowing so its shape reads on every theme; while an edge is elastic the surface's own shadow
   is off (cutting the surface to an inward curve flickered it). */
.ws-goo__line { fill: none; stroke: color-mix(in srgb, var(--goo-line, var(--line)) 35%, var(--accent)); stroke-width: 1.5px; stroke-linecap: round; }
/* Its glow: a wide faint stroke under it (a blur filter was repainted every frame). */
.ws-goo__halo { fill: none; stroke: color-mix(in srgb, var(--accent) 22%, transparent); stroke-width: 9px; stroke-linecap: round; }
:is(#ws-nav, #ws-side, #ws-context, .ws-searchui, .ws-plandock, .ws-dialog, .ws-sheet).is-elastic { box-shadow: none !important; }


/* The sidebar's second stage, building (workspace.js, morphBegin): the overview at its own width in the widening drawer,
   each piece revealed by its own transform or clip (morphPaint). The rail's own buttons give way to their icons in
   flight; the list beside it is covered as the page wipes in. Each card's frame is a piece of its own, under its
   contents (z-index -1 in the overview), in the card's border and color (the theme's, never copied: a theme changed
   after it was measured would show stale). Ahead of it, the overview waits drawn and hidden (is-standby). */
.ws-overview.is-standby { visibility: hidden; pointer-events: none; right: auto; }
.ws-nav.is-morphing { overflow: hidden; }
.ws-nav.is-morphing .ws-rail > *, .ws-nav.is-morphing .ws-rail__libraries > *, .ws-nav.is-morphing .ws-rail__tools > * { visibility: hidden; }
.ws-overview.is-building { right: auto; background: transparent; }
.ws-overview__cover, .ws-ocard__frame { display: none; }
.ws-overview.is-building > .ws-overview__cover { display: block; position: absolute; inset: 0; z-index: -1; background: var(--paper); }
.ws-overview.is-building .ws-overview__scroll { overflow: hidden; }
.ws-overview.is-building :is(.ws-ocard, .ws-ome) { position: relative; background: none; border-color: transparent; }
.ws-overview.is-building .ws-ocard__frame { display: block; position: absolute; inset: -1px; z-index: -1; border: 1px solid var(--line); border-radius: inherit;
  background: var(--panel); pointer-events: none; }
.ws-overview.is-building .ws-ocard--add > .ws-ocard__frame { border-style: dashed; background: none; }
.ws-ocard__rule { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.ws-overview.is-building .ws-ocard__content.ws-tree { border-top-color: transparent; }
.ws-overview.is-building .ws-ocard__chip { transform-origin: 30% 100%; }
.ws-overview.is-building .ws-otile { transform-origin: 50% 100%; }
/* Send modes: a message's mode on its head; a patch's report under its answer; a fork's results to bring back, its
   forks, and alternatives compared. */
.ws-chip--mode { display: inline-flex; align-items: center; gap: .3rem; margin-left: .5rem; padding: .1rem .5rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent); font-size: .72rem; font-weight: 650; vertical-align: middle; }
.ws-chip--mode > svg { display: block; flex: none; }
.ws-patch { display: grid; gap: .35rem; margin: .6rem 0 .2rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ws-patch.is-partial { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.ws-patch__head { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 700; font-size: .88rem; }
.ws-patch__head > svg { display: block; flex: none; color: var(--accent); }
.ws-patch__part > summary { display: flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .84rem; }
.ws-patch__part > summary > svg { display: block; flex: none; }
.ws-patch__list { margin: .3rem 0 0; padding-left: 1.2rem; font-size: .84rem; display: grid; gap: .2rem; }
.ws-forkret__part h3 { margin: .9rem 0 .35rem; }
.ws-forkret__list, .ws-forklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ws-forkret__item > label { display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem; }
.ws-forkret__item > label > input { flex: none; margin-top: .2rem; }
.ws-forkret__item.is-conflict { color: var(--warn); }
.ws-forkret__diff pre { max-height: 14rem; overflow: auto; font-size: .76rem; }
.ws-forklist__item { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 10px; }
.ws-forklist__open { flex: 1; min-width: 0; display: grid; gap: .1rem; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.ws-forkcompare { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.ws-forkcompare__one { position: relative; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; }
.ws-forkcompare__one > .ws-iconbtn { position: absolute; top: .35rem; right: .35rem; }
.ws-forkcompare__summary { margin-top: .8rem; }