/* AGENTS AND THEIR SCREENS (2026-11-01): the agent rows in the people rail with a live mini-thumbnail and a
   status, the screen card at the top of an agent's conversation, and the worker agent view, full screen over
   the app (js/agent-view.js). Loaded after flows.css and before mobile.css, whose section 9 holds the phone. */

/* ------------------------------------------------------------- the rail: agents with a screen */

.r-row.k-agent { align-items: flex-start; }
.r-row.k-agent .r-av { margin-top: 2px; }
.r-doing { font-size: 11px; line-height: 1.3; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; }
.r-row.k-agent .r-shot { margin-top: 3px; flex: none; width: 58px; height: 38px; border-radius: 5px; overflow: hidden; position: relative; background: #1b222b; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
.r-row.k-agent .r-shot svg { display: block; width: 100%; height: 100%; }
.r-row.k-agent .r-shot.tall svg { background: #e9ebee; }
.r-shot .r-shotdot { display: block; position: absolute; right: 3px; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 1.5px #fff; }
.r-shot.st-waiting { box-shadow: 0 0 0 1.5px var(--orange-2); }
.r-shot.st-paused { box-shadow: 0 0 0 1.5px var(--accent); }
.r-shot.st-waiting .r-shotdot, .r-shot.st-paused .r-shotdot, .r-shot.st-idle .r-shotdot { background: var(--ink-3); }
.ag-st { display: inline-flex; align-items: center; gap: 4px; flex: none; font-weight: 500; }
.ag-st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.ag-st.st-working { color: var(--ok); }
.ag-st.st-working::before { background: var(--ok); }
.ag-st.st-waiting { color: var(--orange-2); }
.ag-st.st-waiting::before { background: var(--orange-2); }
.ag-st.st-paused { color: var(--accent-ink); }
.ag-st.st-paused::before { background: var(--accent); }
.ag-st.st-idle { color: var(--ink-3); }
/* The strip of faces (the collapsed rail, the phone's strip): a small screen badge on an agent with one. */
.r-face.has-screen, .r-av.has-screen { position: relative; }
.r-face .r-scr { position: absolute; right: -2px; bottom: -1px; width: 13px; height: 10px; border-radius: 2.5px; background: #1b222b; box-shadow: 0 0 0 1.5px var(--card); }
.r-face .r-scr::after { content: ''; position: absolute; inset: 2px; border-radius: 1px; background: #8fb3e6; }
.r-face .r-scr.st-waiting::after { background: var(--orange); }
/* The main agent: no avatar, its light. */
.face.agent.main { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 22%, var(--card)), var(--card) 70%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 50%; display: grid; place-items: center; }
.face.agent.main > i:not(.ai-glyph) { display: none; }
.face.agent.main .ai-glyph { transform: scale(1.15); }

/* ------------------------------------------------------------- the screen card in a conversation */

.ch-screenslot { flex: none; min-width: 0; }
.ch-screenslot:empty { display: none; }
.ch-screen { flex: none; min-width: 0; width: calc(100% - 20px); box-sizing: border-box; margin: 8px 10px 0; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); cursor: pointer; display: block; border-radius: 12px; }
.ch-screen .cs-pic { position: relative; display: block; border-radius: 10px; overflow: hidden; background: #1b222b; aspect-ratio: 16 / 9.4; max-height: 168px; width: 100%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent), 0 6px 18px -10px rgba(20, 28, 40, 0.5); transition: box-shadow 160ms var(--ease), transform 160ms var(--ease); }
.ch-screen .cs-pic svg { display: block; width: 100%; height: 100%; }
.ch-screen.tall .cs-pic svg { background: #2a3440; }
.ch-screen:hover .cs-pic { box-shadow: 0 0 0 2px var(--accent), 0 8px 22px -10px rgba(20, 28, 40, 0.55); }
.ch-screen:focus-visible { outline: none; }
.ch-screen:focus-visible .cs-pic { box-shadow: 0 0 0 2px var(--focus); }
.cs-badge { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; color: #fff; background: rgba(12, 16, 22, 0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cs-badge i { width: 6px; height: 6px; border-radius: 50%; background: #e5484d; }
.cs-badge i.still { background: #9aa7b6; }
.cs-badge i.wait { background: var(--orange); }
.cs-open { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 500; color: #fff; background: rgba(12, 16, 22, 0.66); opacity: 0; transition: opacity 140ms ease; }
.ch-screen:hover .cs-open, .ch-screen:focus-visible .cs-open { opacity: 1; }
.cs-text { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; padding: 7px 2px 0; }
.cs-text b { font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-text small { color: var(--ink-3); font-size: 11px; display: flex; align-items: center; gap: 6px; }
.cs-text small > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-text small .cs-wins { margin-left: auto; white-space: nowrap; flex: none; }
.ch-screen.st-waiting .cs-pic { box-shadow: 0 0 0 1.5px var(--orange-2), 0 6px 18px -10px rgba(20, 28, 40, 0.5); }
.ch-noscreen { flex: none; margin: 8px 10px 0; padding: 9px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink-2); font-size: 12px; display: flex; gap: 8px; align-items: center; }
.ch-noscreen svg { flex: none; color: var(--ink-3); }

/* ------------------------------------------------------------- the worker agent view */

.av { position: fixed; inset: 0; z-index: 88; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-size: 13px; animation: av-in 180ms var(--ease); }
@keyframes av-in { from { opacity: 0; transform: scale(0.985); } }
body.agentview-open #toast { z-index: 96; }
.av-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--card); min-width: 0; }
.av-back { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 6px 8px 6px 4px; border-radius: 8px; color: var(--ink-2); cursor: pointer; font-weight: 500; flex: none; }
.av-back:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.av-who { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.av-who > span { display: flex; flex-direction: column; min-width: 0; }
.av-who b { font-size: 14px; font-weight: 600; }
.av-who small { color: var(--ink-3); font-size: 12px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-st { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.av-st.st-working { background: var(--ok); }
.av-st.st-waiting { background: var(--orange-2); }
.av-st.st-paused { background: var(--accent); }
.av-modes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 7%, transparent); flex: none; }
.av-modes button { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 11px; border-radius: 7px; color: var(--ink-2); cursor: pointer; font-weight: 500; white-space: nowrap; }
.av-modes button .s { display: none; }
.av-modes button:hover { color: var(--ink); }
.av-modes button[aria-checked='true'] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(20, 28, 40, 0.08); }
.av-modes button[aria-checked='true'][data-mode='interact'] { color: var(--accent-ink); }
.av-modes button[aria-checked='true'][data-mode='comment'] { color: #c2352d; }
.av-modes button[aria-disabled='true'] { color: var(--ink-3); opacity: 0.7; cursor: not-allowed; }
.av-lockico { display: inline-flex; margin-left: -2px; }
.av-right { display: flex; align-items: center; gap: 8px; flex: none; }
.av-grant { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; font-size: 11.5px; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.av-grant.watch-only { color: var(--ink); background: color-mix(in srgb, var(--orange) 20%, transparent); }
.av-bugbtn, .av-chatbtn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 0 9px; cursor: pointer; color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 500; }
.av-bugbtn:hover, .av-chatbtn:hover { color: var(--ink); border-color: var(--line-2); }
.av-bugbtn[aria-expanded='true'], .av-chatbtn[aria-expanded='true'] { border-color: var(--accent); color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.av-bugbtn b { font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.av-bugbtn b:empty { display: none; }
/* An icon with a tooltip on a wide screen; on a phone, which has no tooltips, it says Chat (mobile.css). */
.av-chatbtnl { display: none; }
.av-chatbtn { width: 34px; justify-content: center; padding: 0; }
.av-chatbtn i { position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px var(--card); }
.av-note { padding: 7px 16px; color: var(--ink-3); font-size: 12px; min-height: 30px; }
.av-banner { display: flex; align-items: center; gap: 10px; margin: 0 16px 6px; padding: 8px 10px 8px 12px; border-radius: 10px; background: var(--accent); color: #fff; }
.av-banner span { flex: 1; }
.av-giveback { border: 0; border-radius: 8px; padding: 6px 12px; background: #fff; color: var(--accent-ink); font-weight: 600; cursor: pointer; }
/* Compact (the default): the stage has the whole width, the thumbnails under it, the field at the bottom. With the
   chat shown, the conversation is a column on the right and the field sits at its foot (the same element, moved). */
.av > .av-head { flex: none; }
.av-main { flex: 1; min-height: 0; display: flex; }
.av-left { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.av-left > :not(.av-body) { flex: none; }
.av-body { flex: 1; display: flex; padding: 0 16px; min-height: 0; }
.av-stagewrap { flex: 1; }
.av-bottomslot:empty { display: none; }
.av-chat { flex: none; width: clamp(320px, 30vw, 420px); min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--card); animation: av-chat-in 180ms var(--ease); }
.av-chat[hidden] { display: none; }
@keyframes av-chat-in { from { opacity: 0; transform: translateX(12px); } }
.av-chathead { flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.av-chatx { display: none; border: 0; background: none; color: var(--ink-2); border-radius: 8px; cursor: pointer; place-items: center; }
.av-chatwho { display: flex; align-items: center; gap: 8px; min-width: 0; }
.av-chatwho > span { display: flex; flex-direction: column; min-width: 0; }
.av-chatwho b { font-size: 13px; font-weight: 600; }
.av-chatwho small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; overscroll-behavior: contain; }
.av-msgs .cm { max-width: 92%; }
.av-msgs .cm.has-shot { width: 92%; }
.av-msgs .cm-b { font-size: 13px; overflow-wrap: anywhere; }
.av-chatempty { color: var(--ink-3); font-size: 12.5px; line-height: 1.45; padding: 8px 2px; }
.av-vnote { display: inline-flex; align-items: center; gap: 5px; }
.av-chatslot { flex: none; }
.av-chatslot .av-compose { padding: 6px 10px 12px; }
.av-chatslot .av-last { display: none; }
/* In the column the words get the whole first line, the keep toggle and Send the second (as on a phone). */
.av-chatslot .av-line:has(.av-keep:not([hidden])) { flex-wrap: wrap; }
.av-chatslot .av-line:has(.av-keep:not([hidden])) .av-input { order: -1; flex-basis: 100%; }
.av-chatslot .av-line:has(.av-keep:not([hidden])) .av-keep { margin-left: auto; }
.av-chatslot .av-keep .l { display: none; }
.av-chatslot .av-keep .s { display: inline; }
.av-stagewrap { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.av-marktools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.av-marktools button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 5px 9px; cursor: pointer; color: var(--ink-2); }
.av-marktools button[aria-pressed='true'] { background: #c2352d; border-color: #c2352d; color: #fff; }
.av-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.av-count { color: var(--ink-3); font-size: 12px; margin-left: auto; }
.av-stage { position: relative; flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; background: #11161d; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
.av-stage:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.av[data-avmode='interact'] .av-stage { box-shadow: 0 0 0 2px var(--accent); }
.av[data-avmode='interact'] .av-stage:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.av[data-avmode='comment'] .av-stage { box-shadow: 0 0 0 2px #e5484d; }
.av-frame { position: absolute; inset: 0; }
.av-frame svg { display: block; width: 100%; height: 100%; }
.av-marks { position: absolute; pointer-events: none; }
.av-fx { position: absolute; inset: 0; pointer-events: none; }
.av-ripple { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 25%, transparent); animation: av-ripple 600ms ease-out forwards; }
@keyframes av-ripple { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.av-typed { position: absolute; padding: 4px 8px; border-radius: 7px; background: var(--accent); color: #fff; font: 500 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.av-typed.sent { background: color-mix(in srgb, var(--accent) 70%, #000); }
.av-typed.sent::after { content: none; }
.av-typed::after { content: '▍'; animation: av-caret 1s steps(1) infinite; margin-left: 1px; }
@keyframes av-caret { 50% { opacity: 0; } }
.av-live { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 7px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(12, 16, 22, 0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.av-live i { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; animation: av-pulse 1.6s ease-in-out infinite; }
.av-live i.still { background: #9aa7b6; animation: none; }
.av-live i.paused { background: var(--accent); animation: none; }
@keyframes av-pulse { 50% { opacity: 0.35; } }
.av-locked { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; color: #c9d3df; padding: 24px; }
.av-locked b { color: #fff; font-size: 15px; }
.av-locked span { max-width: 360px; font-size: 12.5px; }
.av-stage.pen-on { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='3.5' fill='%23ff3b30' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 10 10, crosshair !important; }
/* The comment popover, beside the mark it asks about (on a phone, a small sheet at the foot of the picture). */
.av-pop { position: absolute; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 7px; width: 330px; padding: 7px 7px 6px; border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, #e5484d 45%, transparent); animation: av-pop 140ms var(--ease); cursor: default; }
@keyframes av-pop { from { transform: translateY(3px) scale(0.97); opacity: 0; } }
.av-popn { width: 22px; height: 22px; border-radius: 50%; background: #ff3b30; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, #ff3b30 40%, transparent); }
.av-pop input { min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 14px; padding: 5px 2px; color: var(--ink); }
.av-pop button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: #c2352d; color: #fff; display: grid; place-items: center; cursor: pointer; }
.av-pophint { grid-column: 1 / -1; color: var(--ink-3); font-size: 11px; padding: 0 2px; }

.av-debug { position: absolute; right: 16px; top: 58px; z-index: 6; width: min(400px, calc(100vw - 32px)); max-height: calc(100% - 150px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.av-debug[hidden] { display: none; }
.av-debughead { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--line); }
.av-debughead b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.av-debughead small { color: var(--ink-3); font-size: 11px; }
.av-x { margin-left: auto; border: 0; background: none; padding: 6px; border-radius: 7px; cursor: pointer; color: var(--ink-3); display: inline-flex; }
.av-debugbody { padding: 10px 12px 14px; overflow: auto; display: flex; flex-direction: column; gap: 9px; }
.av-hint { color: var(--ink-3); font-size: 12px; line-height: 1.45; }
.av-hint code, .av-check code { font-size: 11px; background: color-mix(in srgb, var(--ink) 6%, transparent); padding: 0 3px; border-radius: 4px; }
.av-check { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-2); }
.av-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* A sent screen prompt in the conversation (here and in the rail's chat pane): the marked frame, its numbered
   comments, the surface; a kept comment says so and can ride a later message. */
.shot { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.shot-pic { position: relative; display: block; width: 100%; max-width: 300px; border-radius: 7px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
.shot-pic.tall { width: 112px; }
.shot-pic svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.shot-words { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; line-height: 1.35; }
.shot-words li { display: flex; gap: 6px; align-items: baseline; }
.shot-words b { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #ff3b30; color: #fff; font-size: 10px; transform: translateY(2px); }
.shot-words .none { opacity: 0.6; font-style: italic; }
.shot-line { font-size: 11px; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot-kept { align-self: flex-start; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, #e5484d 18%, transparent); color: inherit; }
.shot-use { align-self: flex-start; border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; font-size: 12px; opacity: 0.85; }
.shot-use:hover { opacity: 1; }
.ch-log .cm:has(.shot-pic) { width: 90%; }
.av-link { border: 0; background: none; padding: 0; color: var(--accent-ink); text-decoration: underline; cursor: pointer; font-size: 12px; align-self: flex-start; }
.av-log li { display: grid; gap: 3px; }
.av-log small { color: var(--ink-3); font-size: 11px; }
.av-log pre { margin: 0; padding: 7px 8px; border-radius: 7px; background: color-mix(in srgb, var(--ink) 5%, transparent); font: 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

/* The dock: the agent's windows and apps, each its last frame. */
.av-dock { padding: 10px 16px 4px; min-width: 0; }
.av-tiles { display: flex; gap: 10px; overflow-x: auto; padding: 3px 2px 6px; scrollbar-width: thin; }
.av-tile { flex: none; width: 150px; display: flex; flex-direction: column; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; color: var(--ink); }
.av-tpic { position: relative; display: block; height: 88px; border-radius: 8px; overflow: hidden; background: #1b222b; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); transition: box-shadow 140ms var(--ease); }
.av-tpic svg { display: block; width: 100%; height: 100%; }
.av-tpic.tall { background: #2a3440; }
.av-tile:hover .av-tpic { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent); }
.av-tile.on .av-tpic { box-shadow: 0 0 0 2px var(--accent); }
.av-tile:focus-visible { outline: none; }
.av-tile:focus-visible .av-tpic { box-shadow: 0 0 0 2px var(--focus), 0 0 0 4px color-mix(in srgb, var(--focus) 30%, transparent); }
.av-tname { display: flex; align-items: center; gap: 5px; font-size: 12px; min-width: 0; }
.av-tname b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-tname svg { flex: none; color: var(--ink-3); }
.av-tdot { width: 6px; height: 6px; border-radius: 50%; background: #e5484d; flex: none; }
.av-tile small { color: var(--ink-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-tile.k-terminal small { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }
.av-tile.locked .av-tpic { display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 10%, var(--card)); }
.av-tlock { display: grid; justify-items: center; gap: 3px; color: var(--ink-3); font-size: 11px; }

/* The field, always at the bottom. */
.av-compose { padding: 4px 16px 14px; }
.av-last { font-size: 12px; color: var(--ink-3); padding: 0 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-last span { color: var(--ink-2); font-weight: 500; }
.av-form { position: relative; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); padding: 6px; }
.av-form:focus-within { border-color: var(--accent); }
.av-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 6px; }
.av-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 8px; border-radius: 8px; font-size: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); animation: av-chip 160ms var(--ease); }
@keyframes av-chip { from { transform: scale(0.94); opacity: 0; } }
.av-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; gap: 4px; align-items: center; }
.av-chip > span b { font-weight: 600; color: #c2352d; }
/* The marks' count stays readable when a long window title is cut short. */
.av-chip > span .cl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.av-chip > span b { flex: none; }
.av-chip button { border: 0; background: none; padding: 2px; border-radius: 5px; color: inherit; cursor: pointer; display: inline-flex; opacity: 0.75; }
.av-chip button:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.av-chip.off { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-3); box-shadow: none; padding-right: 8px; }
.av-line { display: flex; align-items: flex-end; gap: 6px; }
.av-plus { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.av-plus[aria-expanded='true'] { border-color: var(--accent); color: var(--accent-ink); }
.av-input { flex: 1; min-width: 0; border: 0; resize: none; background: none; padding: 8px 4px; font: inherit; font-size: 14px; line-height: 1.4; max-height: 140px; outline: none; color: var(--ink); }
.av-send, .av-keep { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; border: 0; cursor: pointer; font-weight: 600; }
.av-send { background: var(--accent); color: #fff; }
.av-keep { background: none; color: var(--ink-2); font-weight: 500; font-size: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.av-keep .s { display: none; }
.av-keep[aria-pressed='true'] { background: color-mix(in srgb, #e5484d 12%, var(--card)); color: #c2352d; box-shadow: inset 0 0 0 1px color-mix(in srgb, #e5484d 40%, transparent); }
.av-keep[hidden] { display: none; }
/* The marks waiting above the field, numbered as on the picture, each with its comment. */
.av-items { list-style: none; margin: 0; padding: 0 2px 6px; display: flex; flex-direction: column; gap: 4px; max-height: 168px; overflow: auto; }
.av-items[hidden] { display: none; }
.av-item { display: flex; align-items: center; gap: 2px; border-radius: 9px; background: color-mix(in srgb, #e5484d 7%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #e5484d 22%, transparent); }
.av-item.new { animation: av-chip 160ms var(--ease); }
.av-item.editing { box-shadow: inset 0 0 0 1.5px #e5484d; }
.av-itext { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; border: 0; background: none; padding: 5px 4px 5px 6px; text-align: left; font: inherit; font-size: 13px; color: var(--ink); cursor: text; border-radius: 9px; }
.av-itext .n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.av-itext .k { flex: none; display: inline-flex; color: #c2352d; opacity: 0.8; }
.av-itext .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-item.empty .t { color: var(--ink-3); font-style: italic; }
.av-itext .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.av-idel { flex: none; border: 0; background: none; padding: 6px; margin-right: 2px; border-radius: 7px; color: var(--ink-3); cursor: pointer; display: inline-flex; }
.av-idel:hover { background: color-mix(in srgb, #e5484d 14%, transparent); color: #c2352d; }
.av-howto { color: var(--ink-3); font-size: 12px; margin-right: 4px; }
.av-pen[aria-pressed='true'] { background: #c2352d !important; border-color: #c2352d !important; color: #fff !important; }
.av-attach { position: absolute; left: 6px; bottom: calc(100% + 6px); width: min(340px, calc(100vw - 32px)); padding: 6px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow), 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 2px; z-index: 3; }
.av-attach [role='menuitem'] { display: flex; gap: 9px; align-items: center; border: 0; background: none; padding: 7px 8px; border-radius: 8px; text-align: left; cursor: pointer; color: var(--ink); }
.av-attach [role='menuitem']:hover, .av-attach [role='menuitem']:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.av-attach [role='menuitem'] > span { display: flex; flex-direction: column; min-width: 0; }
.av-attach [role='menuitem'] small { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-attach [role='menuitem'][aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
.av-mh { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding: 4px 8px; font-weight: 600; }
.av-mnote { font-size: 11.5px; color: var(--ink-3); padding: 4px 8px; display: flex; gap: 4px; align-items: center; }

@media (max-width: 1100px) {
  .av-modes button .l { display: none; }
  .av-modes button .s { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .av, .av-chat, .av-chip, .av-item.new, .av-pop, .av-ripple, .av-live i, .av-typed::after { animation: none !important; }
}

/* A desktop window on the stage (contract §28c): what it is and where, Bring to front, Use in my message. */
.av-winbar { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 9px; color: #fff; background: rgba(12, 16, 22, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12px; }
.av-winbar[hidden] { display: none; }
.av-wininfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.av-wininfo b, .av-wininfo small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-wininfo small { color: #b9c4d2; font-size: 11px; }
.av-winbar button { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.1); color: #fff; border-radius: 7px; padding: 5px 9px; cursor: pointer; font: inherit; }
.av-winbar button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
.av-winbar button:disabled { opacity: 0.5; cursor: not-allowed; }
.av[data-avmode='comment'] .av-winbar, .av[data-avmode='interact'] .av-winbar { opacity: 0.85; }
@media (max-width: 599.98px) {
  .av-winbar { flex-wrap: wrap; }
  .av-winbar .av-wininfo { flex-basis: 100%; }
  .av-winbar button { min-height: 36px; flex: 1; justify-content: center; }
}