/* The agent bar and its window (shared/agent-bar.js, agent-window.js). One stylesheet for the web app, the phone app and the
   Chrome side panel; the extension gets a checked copy (scripts/sync-shared.mjs). It uses only the host page's tokens
   (--bg --panel --line --edge --text --dim --accent --ok --bad --scrim), with fallbacks, so light and dark come from the host.
   No inline styles: the server sends a strict content security policy.

   The four states differ by shape as well as colour, so nobody has to tell green from amber:
     on the call  a solid ring with a glow that pulses
     available    no ring, a small dot at the corner
     working      an arc that turns around the face
     cannot hear  a grey face and an ear with a line through it */

.agent-bar, .agent-sheet {
  --ag-on: var(--ok, #2a7400);
  --ag-busy: var(--meter-warn, #c97100);
  --ag-ring: var(--panel, #ffffff);
}
/* Icons drawn as masks in the text colour (Material icons, Apache 2.0): the Settings gear and the call arrows. */
.agent-sheet, .agent-window {
  --ag-icon-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94s-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96a7 7 0 0 0-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84a.47.47 0 0 0-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.48.48 0 0 0-.59.22L2.74 8.87a.47.47 0 0 0 .12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.48.48 0 0 0-.12-.61zM12 15.6a3.6 3.6 0 1 1 0-7.2 3.6 3.6 0 0 1 0 7.2z'/%3E%3C/svg%3E");
  --ag-icon-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 5.41 18.59 4 7 15.59V9H5v10h10v-2H8.41z'/%3E%3C/svg%3E");
  --ag-icon-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z'/%3E%3C/svg%3E");
  --ag-icon-missed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.59 7 12 14.59 6.41 9H11V7H3v8h2v-4.59l7 7 9-9z'/%3E%3C/svg%3E");
}

/* ---- the bar ---------------------------------------------------------- */
.agent-bar {
  display: flex; flex-wrap: nowrap; gap: 4px; align-items: flex-start;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 0 0 6px; padding: 8px max(6px, env(safe-area-inset-right)) 8px max(6px, env(safe-area-inset-left));
}
.agent-bar::-webkit-scrollbar { display: none; }
.agent-bar[hidden] { display: none; }

.agent-badge {
  position: relative; flex: 0 0 auto; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center;
  width: 58px; min-height: 44px; margin: 0; padding: 6px 0 2px;
  border: 0; border-radius: 12px; background: none; color: var(--text, inherit); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.agent-badge:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 1px; }
.agent-bar .agent-overflow {
  flex: none; align-self: flex-start; width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 6px 7px 0;
  border: 1px solid var(--line, currentColor); border-radius: 50%; background: var(--panel, #fff);
  color: var(--text, inherit); font: inherit; font-weight: 600; cursor: pointer;
}

.agent-face { position: relative; display: block; width: 44px; height: 44px; margin-bottom: 7px; border-radius: 50%; overflow: hidden; }
.agent-face-img, .agent-initials { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.agent-initials { display: grid; place-items: center; font-size: 20px; font-weight: 700; line-height: 1; }
.agent-face-art { position: absolute; inset: 0; display: block; border-radius: 50%; }
/* A picture is never covered: the drawn face (the default for an agent with no picture) hides only the letter under it. */
.agent-face:has(.agent-face-art) .agent-initials { visibility: hidden; }
.agent-initials-square { border-radius: 10px; }
.agent-initials-hex { border-radius: 0; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
/* On the call the picture itself moves, driven by the badge's data-state and the speech level (--ag-level, 0 to 1): it leans
   while the agent listens, bobs while it works, and swells a little with its voice. The ring around it glows brighter then. */
.agent-badge[data-state] .agent-face-img { transform-origin: 50% 90%; will-change: transform; }
.agent-badge[data-state="listening"] .agent-face-img { animation: agent-lean 3.6s ease-in-out infinite; }
.agent-badge[data-state="thinking"] .agent-face-img, .agent-badge[data-state="working"] .agent-face-img,
.agent-badge[data-state="waiting_for_approval"] .agent-face-img { animation: agent-bob 1.8s ease-in-out infinite; }
.agent-badge[data-state="speaking"] .agent-face-img { transform: scale(calc(1 + var(--ag-level, 0.25) * 0.1)); transition: transform 90ms ease-out; }
.agent-badge[data-state="speaking"] .agent-ring-on-call {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ag-on) 45%, transparent), 0 0 12px 4px color-mix(in srgb, var(--ag-on) 70%, transparent);
}
.agent-face-art svg, .agent-window-face svg { display: block; width: 100%; height: 100%; }

.agent-name {
  display: block; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; line-height: 1.2; text-align: center;
}
.agent-badge[aria-expanded="true"] .agent-name { font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent, currentColor); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* The ring is a 52px circle centred on the 44px face. It is empty unless the state gives it a look. */
.agent-ring {
  position: absolute; top: 2px; left: 50%; width: 52px; height: 52px; margin-left: -26px; box-sizing: border-box;
  border: 3px solid transparent; border-radius: 50%; pointer-events: none;
}
.agent-ring-on-call {
  border-color: var(--ag-on);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ag-on) 30%, transparent), 0 0 7px 2px color-mix(in srgb, var(--ag-on) 60%, transparent);
  animation: agent-pulse 1.8s ease-in-out infinite;
}
.agent-ring-busy { border-top-color: var(--ag-busy); border-right-color: var(--ag-busy); animation: agent-turn 1.6s linear infinite; }
.agent-ring-available, .agent-ring-deaf { border-color: transparent; }

.agent-dot {
  position: absolute; top: 36px; left: 50%; margin-left: 9px; width: 13px; height: 13px; box-sizing: border-box;
  border: 2px solid var(--ag-ring); border-radius: 50%; background: var(--ag-on); pointer-events: none;
}
.agent-dot[hidden], .agent-ear-off[hidden] { display: none; }

.agent-ear-off {
  position: absolute; top: 31px; left: 50%; margin-left: 4px; width: 24px; height: 24px; box-sizing: border-box;
  display: grid; place-items: center; border: 2px solid var(--edge, currentColor); border-radius: 50%;
  background: var(--ag-ring); color: var(--text, currentColor); pointer-events: none;
}
.agent-ear-off svg { display: block; width: 16px; height: 16px; }

.agent-badge[data-presence="deaf"] .agent-face { filter: grayscale(1); opacity: 0.55; }
.agent-badge[data-presence="deaf"] .agent-name { color: var(--dim, inherit); }

@keyframes agent-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes agent-turn { to { transform: rotate(360deg); } }
@keyframes agent-lean { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes agent-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ---- the window ------------------------------------------------------- */
.agent-sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.agent-sheet[hidden] { display: none; }
.agent-sheet-scrim { position: absolute; inset: 0; background: var(--scrim, rgba(15, 17, 23, 0.55)); }
.agent-sheet-box {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 40rem; height: 85vh; height: 85dvh;
  background: var(--panel, #ffffff); color: var(--text, inherit);
  border: 1px solid var(--line, currentColor); border-bottom: 0; border-radius: 16px 16px 0 0;
  --ag-safe-bottom: env(safe-area-inset-bottom, 0px); overflow: hidden;
}
.agent-sheet-close {
  position: absolute; top: 0; right: max(8px, env(safe-area-inset-right)); z-index: 2;
  min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--text, inherit); font: inherit; font-weight: 600; cursor: pointer;
}
.agent-sheet-close:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: -3px; border-radius: 12px; }
/* From 700px up the window is the left sidebar, under the page's banner (--agent-top) and beside PaceNotes, which stays live. */
@media (min-width: 700px) {
  .agent-sheet { top: var(--agent-top, 0px); align-items: stretch; justify-content: flex-start; pointer-events: none; }
  .agent-sheet-scrim { display: none; }
  .agent-sheet-box { pointer-events: auto; width: min(26rem, 100vw); max-width: none; height: 100%; border: 0; border-right: 1px solid var(--line, currentColor); border-radius: 0; box-shadow: 10px 0 24px color-mix(in srgb, var(--text, #18181b) 14%, transparent); }
}

.agent-window { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; min-width: 0; overflow-wrap: anywhere; }
.agent-window[hidden] { display: none; }
.agent-window:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: -3px; }

/* Tabs along the top edge, like Chrome's: the open one joins the panel under it. Done sits at the right end. */
.agent-tabs {
  display: flex; flex: none; gap: 2px; align-items: flex-end; overflow-x: auto; scrollbar-width: none;
  padding: 6px 84px 0 8px; border-bottom: 1px solid var(--line, currentColor); background: var(--bg, transparent);
}
.agent-tabs::-webkit-scrollbar { display: none; }
.agent-tab-wrap { display: flex; flex: none; align-items: stretch; max-width: 11rem; border-radius: 10px 10px 0 0; }
.agent-tab-wrap:has(.agent-tab.active) { background: var(--panel, #ffffff); box-shadow: inset 0 0 0 1px var(--line, currentColor), 0 1px 0 var(--panel, #ffffff); }
.agent-tab {
  min-height: 44px; min-width: 44px; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 0; border-radius: 10px 10px 0 0; background: none; color: var(--dim, inherit); font: inherit; font-size: 14px; cursor: pointer;
}
.agent-tab.active { color: var(--text, inherit); font-weight: 600; box-shadow: inset 0 -3px 0 var(--accent, currentColor); }
.agent-tab.pinned::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--accent, currentColor); vertical-align: 1px; }
.agent-tab-close {
  flex: none; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 10px 10px 0 0; background: none;
  color: var(--dim, inherit); font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}
.agent-tab:focus-visible, .agent-tab-close:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: -3px; }

.agent-panel { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; min-width: 0; }
.agent-header { display: flex; flex: none; flex-direction: column; gap: 8px; padding: 12px 16px 0; }
.agent-thread-scroll {
  display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; min-height: 0; min-width: 0;
  overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; padding: 12px 16px 16px;
  scroll-padding-bottom: calc(var(--compose-h, 0px) + var(--ag-safe-bottom, env(safe-area-inset-bottom, 0px)));
}
.agent-thread-scroll > * { flex: none; }

/* Short app frames need room for the thread as well as the full portrait and composer. */
@media (max-height: 600px) and (max-width: 699px) {
  .agent-sheet-box { height: 100vh; height: 100dvh; }
  .agent-header { gap: 4px; padding-top: 4px; }
  .agent-thread-scroll { padding-top: 8px; padding-bottom: 8px; }
}

.agent-window-head { display: flex; align-items: center; gap: 12px; }
/* A fixed 88px box: the face inside switches between full and small without moving anything around it. */
.agent-window-face {
  flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.agent-window-face svg, .agent-window-face img { width: 100%; height: 100%; transition: width 0.15s ease, height 0.15s ease; }
.agent-window-face img { object-fit: contain; }
.agent-window-face[data-size="badge"] svg, .agent-window-face[data-size="badge"] img { width: 44px; height: 44px; }
/* The dachshund portrait is a full-body side view (tail off the left edge, nose at the right). On a small tile show the head and
   shoulders, so it reads next to the worker and the other faces. Where object-view-box is not supported the whole portrait shows. */
.agent-face-img[src*="/room-portraits/dog/"], .agent-window-face img[src*="/room-portraits/dog/"] { object-view-box: inset(3% 6% 50% 24%); }
.agent-window-face[data-state="listening"] img { animation: agent-lean 3.6s ease-in-out infinite; }
.agent-window-face[data-state="thinking"] img, .agent-window-face[data-state="working"] img,
.agent-window-face[data-state="waiting_for_approval"] img { animation: agent-bob 1.8s ease-in-out infinite; }
.agent-window-face[data-state="speaking"] img { transform: scale(calc(1 + var(--ag-level, 0.25) * 0.1)); transition: width 0.15s ease, height 0.15s ease, transform 90ms ease-out; }
.agent-window-face:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 2px; }
.agent-window-title { flex: 1 1 auto; min-width: 0; }
.agent-name-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.agent-window-name { flex: 0 1 auto; min-width: 0; margin: 0; font-size: 1.25rem; line-height: 1.2; overflow-wrap: anywhere; }
/* Call takes the right of the header (the old Settings spot), the easiest place to reach on an iPad held in two hands. */
.agent-head-call { flex: none; display: flex; align-items: center; }
.agent-head-call:empty { display: none; }
.agent-head-call .agent-call { min-width: 72px; }
/* The arrow sits against Call: Call rings here, the arrow picks another place. */
.agent-head-call .agent-call:has(+ .agent-call-pick) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.agent-call-pick { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: 1px; padding: 0; border: 1px solid var(--btn-edge, var(--primary-edge, var(--accent, currentColor))); border-radius: 0 12px 12px 0; background: var(--btn, var(--accent, #ff5600)); color: var(--on-btn, var(--on-accent, #18181b)); cursor: pointer; touch-action: manipulation; }
.agent-call-pick::before { content: ''; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.agent-call-pick[aria-expanded="true"]::before { margin-top: 4px; transform: rotate(225deg); }
.agent-call-pick:disabled { opacity: 0.55; cursor: default; }
.agent-call-places { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; }
.agent-call-places[hidden] { display: none; }
.agent-call-place { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line, currentColor); border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; white-space: normal; cursor: pointer; }
.agent-call-place:disabled { opacity: 0.45; cursor: default; }
.agent-window-role { display: block; margin-top: 2px; color: var(--dim, inherit); font-size: 14px; }

.agent-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin-top: 6px; padding: 2px 10px;
  border: 1px solid var(--edge, currentColor); border-radius: 999px; font-size: 13px; line-height: 1.2;
  max-width: 100%; overflow-wrap: normal; word-break: normal;
}
/* The window sets overflow-wrap: anywhere, which broke "Available" mid-word in a squeezed header (Jake 2026-11-09). A status
   the agent wrote itself can be a sentence, so the pill still wraps, between words only. */
.agent-pill::before { content: ""; flex: none; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; }
.agent-pill.presence-on_call::before { background: var(--ag-on); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ag-on) 35%, transparent), 0 0 6px 1px var(--ag-on); }
.agent-pill.presence-available::before { width: 8px; height: 8px; background: var(--ag-on); }
.agent-pill.presence-busy::before { border: 2px solid transparent; border-top-color: var(--ag-busy); border-right-color: var(--ag-busy); animation: agent-turn 1.6s linear infinite; }
.agent-pill.presence-deaf::before { border: 1.5px solid currentColor; background: linear-gradient(to top right, transparent 43%, currentColor 43% 57%, transparent 57%); }

.agent-now { margin: 0; color: var(--dim, inherit); font-size: 14px; }
.agent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; }
.agent-header > .agent-actions:empty { display: none; }
.agent-call, .agent-join, .agent-leave, .agent-end, .agent-send, .agent-older, .agent-retry, .agent-filter-clear {
  min-height: 44px; padding: 0 16px; border-radius: 12px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--edge, currentColor); background: transparent; color: var(--text, inherit);
}
.agent-call { border-color: var(--btn-edge, var(--primary-edge, var(--accent, currentColor))); background: var(--btn, var(--accent, #ff5600)); color: var(--on-btn, var(--on-accent, #18181b)); }
.agent-call, .agent-leave, .agent-talk-button { touch-action: manipulation; }
/* Red on purpose: while a call is up this is the one button that ends it. The time beside it must not make it jump. */
.agent-call-end { border-color: var(--call-end, #d92d20); background: var(--call-end, #d92d20); color: var(--on-call-end, #fff); font-variant-numeric: tabular-nums; }
.agent-talk-button:disabled, .agent-leave:disabled, .agent-end:disabled, .agent-call:disabled, .agent-join:disabled, .agent-send:disabled, .agent-older:disabled { opacity: 0.55; cursor: default; }
.agent-leave:focus-visible, .agent-end:focus-visible, .agent-call:focus-visible, .agent-join:focus-visible, .agent-send:focus-visible, .agent-older:focus-visible, .agent-retry:focus-visible, .agent-filter-clear:focus-visible, .agent-chip:focus-visible, .agent-result:focus-visible {
  outline: 3px solid var(--accent, currentColor); outline-offset: 2px;
}
.agent-reason { color: var(--dim, inherit); font-size: 14px; }
.agent-message { margin: 0; font-size: 14px; }
.agent-message:empty, .agent-now[hidden], .agent-state:empty, .agent-more:empty { display: none; }

/* Talk out loud with the agent (shared/agent-talk-view.js). The dot is the state: green listening, a turning ring thinking,
   accent bars speaking. Words beside it say the same, so color is never the only signal. */
.agent-talk-button, .agent-talk-mode, .agent-talk-hold, .agent-talk-cut, .agent-talk-end {
  min-height: 44px; padding: 0 16px; border-radius: 12px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--edge, currentColor); background: transparent; color: var(--text, inherit);
}
.agent-talk-button.active { border-color: var(--ag-on); box-shadow: inset 0 0 0 1px var(--ag-on); }
.agent-talk-button:focus-visible, .agent-talk-mode:focus-visible, .agent-talk-hold:focus-visible, .agent-talk-cut:focus-visible {
  outline: 3px solid var(--accent, currentColor); outline-offset: 2px;
}
.agent-talk-slot:empty { display: none; }
.agent-talk-slot { margin: 0 0 8px; }
.agent-talk-end[hidden] { display: none; }
.agent-talk-hold { min-height: 64px; width: 100%; font-size: 17px; touch-action: none; user-select: none; }
.agent-talk { display: grid; gap: 8px; margin-top: 4px; padding: 12px; border: 1px solid var(--line, currentColor); border-radius: 12px; background: var(--bg, transparent); }
.agent-talk[hidden] { display: none; }
.agent-talk p { margin: 0; }
.agent-talk-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.agent-talk-state { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.agent-talk-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--dim, currentColor); box-sizing: border-box; }
.agent-talk[data-state="listening"] .agent-talk-dot, .agent-talk[data-state="holding"] .agent-talk-dot {
  background: var(--ag-on); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ag-on) 30%, transparent); animation: agent-talk-pulse 1.4s ease-in-out infinite;
}
.agent-talk[data-state="thinking"] .agent-talk-dot, .agent-talk[data-state="starting"] .agent-talk-dot, .agent-talk[data-state="sending"] .agent-talk-dot {
  background: transparent; border: 2px solid transparent; border-top-color: var(--ag-busy); border-right-color: var(--ag-busy); animation: agent-turn 1.2s linear infinite;
}
.agent-talk[data-state="speaking"] .agent-talk-dot { border-radius: 2px; background: var(--accent, #ff5600); animation: agent-talk-speak 0.8s ease-in-out infinite alternate; }
.agent-talk-you, .agent-talk-agent { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.agent-talk-you { color: var(--dim, inherit); }
.agent-talk-note { font-size: 14px; color: var(--dim, inherit); }
.agent-talk-modes, .agent-talk-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.agent-talk-mode[aria-pressed="true"], .agent-talk-mode[aria-checked="true"] { border-width: 2px; border-color: var(--accent, currentColor); background: color-mix(in srgb, var(--accent, #ff5600) 22%, transparent); }
.agent-talk-mode[aria-pressed="true"]::before, .agent-talk-mode[aria-checked="true"]::before { content: "\2713  "; }
.agent-talk-hold { flex: 1 1 12rem; min-height: 56px; border-color: var(--btn-edge, var(--accent, currentColor)); background: var(--btn, var(--accent, #ff5600)); color: var(--on-btn, var(--on-accent, #18181b)); touch-action: none; user-select: none; -webkit-user-select: none; }
.agent-talk[data-state="holding"] .agent-talk-hold { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ag-on) 45%, transparent); }
.agent-talk-hold:disabled { opacity: 0.55; cursor: default; }
.agent-talk [hidden] { display: none; }
@keyframes agent-talk-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ag-on) 10%, transparent); } }
@keyframes agent-talk-speak { from { transform: scaleY(0.5); } to { transform: scaleY(1.2); } }

.agent-search, .agent-compose-input {
  width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--edge, currentColor); border-radius: 12px;
  background: var(--field, var(--panel, #ffffff)); color: var(--text, inherit); font: inherit; font-size: 16px;
}
.agent-search:focus-visible, .agent-compose-input:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 1px; }
.agent-results { display: flex; flex-direction: column; gap: 4px; }
.agent-results:empty { display: none; }
.agent-results-note { margin: 0; color: var(--dim, inherit); font-size: 13px; }
.agent-result {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--line, currentColor); border-radius: 12px; background: none;
  color: var(--text, inherit); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.agent-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agent-filter:empty { display: none; }
.agent-filter-label { font-size: 14px; font-weight: 600; }
.agent-state { min-height: 3.5rem; }
.agent-state p { margin: 0 0 8px; }
.agent-error { color: var(--bad, inherit); }
.agent-loading, .agent-empty { color: var(--dim, inherit); }

.agent-thread { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.agent-entry {
  min-width: 0; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 8px; padding: 10px 12px;
  border: 1px solid var(--line, currentColor); border-radius: 12px;
}
.agent-kind { flex: none; font-size: 14px; }
.agent-entry-title { flex: 1 1 10rem; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.agent-entry-time { flex: none; color: var(--dim, inherit); font-size: 12px; }
.agent-entry-text { flex: 1 1 100%; color: var(--dim, inherit); font-size: 14px; overflow-wrap: anywhere; }
.agent-chip {
  max-width: 100%; box-sizing: border-box; min-height: 28px; overflow-wrap: anywhere; padding: 2px 10px; border: 1px solid var(--edge, currentColor); border-radius: 999px; background: none;
  color: var(--text, inherit); font: inherit; font-size: 12px; cursor: pointer;
}
span.agent-chip { cursor: default; }
button.agent-chip { min-width: 44px; min-height: 44px; }
.agent-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.agent-task-box {
  display: flex; flex: none; flex-direction: column; gap: 4px; min-height: 0; max-height: 35%; overflow-y: auto;
  border-top: 1px solid var(--line, currentColor); padding: 10px 16px calc(8px + var(--ag-safe-bottom, env(safe-area-inset-bottom, 0px)));
}
.agent-compose { display: flex; flex: none; align-items: flex-end; gap: 8px; min-width: 0; }
.agent-compose-input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; line-height: 1.4; max-height: calc(7em + 22px); resize: none; overflow-y: auto; overflow-wrap: anywhere; }
.agent-entry.agent-system-line { border: 0; border-radius: 0; padding: 4px 0; gap: 4px 8px; color: var(--dim, inherit); font-size: 12px; }
.agent-system-line .agent-entry-title { font-weight: 400; }
.agent-system-line .agent-entry-text { font-size: 12px; }
.agent-task { background: var(--panel, transparent); }
.agent-task .agent-entry-text { color: var(--text, inherit); white-space: pre-wrap; }
.agent-task-status { margin-left: auto; color: var(--dim, inherit); font-size: 12px; }
.agent-task-resources { display: flex; flex: 1 1 100%; min-width: 0; flex-direction: column; gap: 4px; font-size: 14px; overflow-wrap: anywhere; }
.agent-task-reply { flex: 1 1 100%; min-width: 0; border-top: 1px solid var(--line, currentColor); padding-top: 8px; overflow-wrap: anywhere; white-space: pre-wrap; }
.agent-reply-name { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; }
.agent-quick-reply { margin-left: 6px; font-size: 11px; font-weight: 400; }
.agent-reply-text { font-size: 14px; }
/* A task reads as a conversation, like a messaging app: what you sent is a bubble on the right with its time and status under it,
   the agent's answer a bubble on the left with the agent's name on top. Grid rows keep every part on its own line; time and status
   share one row. Classes and DOM order stay as they were (tests, swipe, select and the row reuse read them). */
.agent-entry.agent-task {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; column-gap: 6px; row-gap: 4px; align-items: center;
  border: 0; border-radius: 0; background: none; padding: 8px 12px;
}
.agent-task > * { grid-column: 1 / -1; justify-self: start; min-width: 0; max-width: 100%; order: 6; }
/* The Archive swipe layer is positioned against the row's padding box; a grid area would pull it inside and show its edges. */
.agent-task > .agent-swipe-bg { grid-column: auto; max-width: none; }
.agent-task > .kind-task { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.agent-task > .agent-entry-text, .agent-task > .agent-task-resources, .agent-task > .agent-task-due-chip, .agent-task > div:not([class]) { order: 1; justify-self: end; }
.agent-task > .agent-entry-text {
  max-width: min(85%, 36rem); box-sizing: border-box; padding: 8px 12px; border-radius: 18px 18px 4px 18px;
  background: color-mix(in srgb, var(--btn-edge, #ff5600) 26%, var(--panel, #18181b)); color: var(--text, inherit); font-size: 15px; line-height: 1.4;
  overflow-wrap: anywhere;
}
.agent-task > .agent-entry-text .agent-message-quote { margin: 0 0 6px; padding-left: 8px; border-left: 2px solid currentColor; opacity: .85; }
.agent-task > .agent-task-resources { max-width: min(85%, 36rem); align-items: flex-end; text-align: right; }
.agent-task > .agent-task-resources:has(> .agent-media) { width: 100%; }
.agent-task-resources > .agent-media { width: 100%; align-items: flex-end; }
.agent-task > .agent-entry-time { order: 2; grid-column: 1; justify-self: end; font-size: 11px; }
.agent-task > .agent-task-status { order: 2; grid-column: 2; margin: 0; font-size: 11px; }
.agent-task > .agent-task-status:not(:empty)::before { content: "\00b7\00a0"; }
.agent-task > .agent-task-reply {
  order: 3; max-width: min(88%, 40rem); box-sizing: border-box; margin-top: 4px; padding: 8px 12px; border-top: 0;
  border-radius: 18px 18px 18px 4px; background: color-mix(in srgb, var(--text, #fff) 9%, var(--panel, #18181b));
}
.agent-task > .agent-task-reply .agent-reply-text { font-size: 15px; line-height: 1.4; }
.agent-task > .agent-replies-link { order: 4; }
.agent-reply-folded { max-height: 15em; overflow: hidden; -webkit-mask-image: linear-gradient(black 65%, transparent); mask-image: linear-gradient(black 65%, transparent); }
.agent-talk-long { white-space: nowrap; }
.agent-reply-fold {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none;
  color: var(--accent, inherit); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
@media (hover: none) and (pointer: coarse) {
  [data-message-text] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
[data-message-text][data-message-selectable], [data-message-text][data-message-selectable] * { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; }
.agent-message-overlay { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.agent-message-overlay > * { pointer-events: auto; }
.agent-message-overlay [hidden], .agent-compose-quote[hidden] { display: none; }
.agent-message-menu { position: absolute; display: flex; flex-direction: column; min-width: 160px; max-width: calc(100% - 16px); padding: 4px; border: 1px solid var(--edge, currentColor); border-radius: 12px; background: var(--panel, #fff); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.agent-message-menu button:focus-visible, [data-message-text]:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: -3px; }
.agent-message-quote { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--accent, currentColor); color: var(--dim, inherit); white-space: pre-wrap; }
.agent-compose-quote { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 10px; border-left: 3px solid var(--accent, currentColor); font-size: 13px; }
.agent-compose-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-compose-quote button { flex: none; min-width: 44px; min-height: 44px; border: 0; background: none; color: inherit; font: inherit; }
.agent-task-box-plus:has(.agent-compose-quote:not([hidden])) { flex-wrap: wrap; }
.agent-task-box-plus .agent-compose-quote { flex: 1 0 100%; box-sizing: border-box; order: -1; }
.agent-mic[hidden], .agent-send[hidden], .agent-working-row[hidden] { display: none; }
.agent-md-p { margin: 0 0 6px; }
.agent-md-p:last-child, .agent-md-list:last-child { margin-bottom: 0; }
.agent-md-list { margin: 0 0 6px; padding-left: 22px; white-space: normal; }
.agent-md-h { font-weight: 700; margin: 6px 0 4px; }
.agent-md-h1 { font-size: 16px; }
.agent-md-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; background: var(--panel, rgba(127,127,127,0.15)); padding: 1px 4px; border-radius: 4px; }
.agent-md-codeblock { position: relative; margin: 0 0 6px; }
.agent-md-pre { margin: 0; padding: 8px 10px; padding-right: 56px; overflow-x: auto; white-space: pre; background: var(--panel, rgba(127,127,127,0.15)); border-radius: 8px; font-size: 13px; }
.agent-md-pre code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.agent-md-copy { position: absolute; top: 4px; right: 4px; min-height: 28px; padding: 0 8px; font-size: 12px; border: 1px solid var(--edge, currentColor); border-radius: 6px; background: var(--panel, #fff); color: inherit; }
.agent-md-link { color: var(--accent, inherit); text-decoration: underline; overflow-wrap: anywhere; }
.agent-working-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: var(--dim, inherit); list-style: none; }
.agent-dots { display: inline-flex; gap: 4px; }
.agent-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: agent-dot 1.2s infinite ease-in-out; }
.agent-dots i:nth-child(2) { animation-delay: 0.2s; }
.agent-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes agent-dot { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .agent-dots i { animation: none; opacity: 0.7; } }
.agent-send { flex: none; height: 44px; padding: 0 12px; background: var(--accent, #ff5600); border-color: var(--accent, #ff5600); color: var(--on-accent, #18181b); }
.agent-send:disabled { background: var(--panel, #fff); border-color: var(--edge, currentColor); color: var(--dim, inherit); }

/* Reduced motion: nothing turns, pulses or slides. The states stay readable by shape: a solid ring, a dot, a half arc, an ear. */
@media (prefers-reduced-motion: reduce) {
  .agent-ring-on-call, .agent-ring-busy, .agent-strip-ring, .agent-pill.presence-busy::before, .agent-talk[data-state] .agent-talk-dot { animation: none; }
  .agent-badge[data-state] .agent-face-img, .agent-window-face[data-state] img { animation: none; transform: none; }
  .agent-window-face svg, .agent-window-face img { transition: none; }
}

.agent-rooms-list { display:grid;gap:8px;margin-bottom:16px; }
.agent-rooms-list a { box-sizing:border-box;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;padding:8px;border-left:2px solid #FF5600;text-decoration:none; }
.room-level { display:inline-flex;align-items:center;gap:2px; }
.room-level svg { width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:1.5; }
.room-level-green { color:var(--lvl-green,rgb(74,222,128)); }.room-level-blue { color:var(--lvl-blue,rgb(96,165,250)); }.room-level-black,.room-level-double_black { color:#fff;background:var(--panel,#18181b);border-radius:2px; }
.room-level-double_black svg { width:24px; }.room-level-outline svg { fill:none;stroke-dasharray:2 2; }.room-level-muted { opacity:.5; }


.agent-more-button, .agent-pin, .agent-chat { min-height: 44px; cursor: pointer; }
.agent-more-button { flex: 0 0 auto; padding: 8px 14px; scroll-snap-align: start; border: 1px solid var(--edge, currentColor); border-radius: 12px; background: var(--panel, #fff); color: var(--text, inherit); font: inherit; }
.agent-more-button[hidden] { display: none; }
.agent-more-button:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 2px; }
.agent-more-list { overflow-y: auto; min-height: 0; }
.agent-more-list[hidden], .agent-panel[hidden] { display: none; }
.agent-more-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0; }
.agent-more-face { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; }
.agent-more-face img { width: 44px; height: 44px; object-fit: contain; }
.agent-more-description { min-width: 0; }
.agent-more-row > .agent-actions { grid-column: 1 / -1; }
.agent-more-role { display: block; font-size: 14px; color: var(--dim, inherit); }
/* The page's Agents sheet (banner mode, data-single): room at the edges, a line between agents, buttons that do not touch. */
[data-single] .agent-more-list { padding: 4px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
[data-single] .agent-more-help { margin: 4px 0 6px; color: var(--dim, inherit); font-size: 14px; line-height: 1.35; }
[data-single] .agent-more-row { gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--line, color-mix(in srgb, currentColor 16%, transparent)); }
[data-single] .agent-more-row > .agent-actions { gap: 10px; }

/* ---- one agent's settings (agent-window.js) --------------------------- */
/* A small gear right after the agent's name. The target stays 44px; negative margins keep the name row its own height. */
.agent-settings-toggle {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; margin: -10px 0 -10px -4px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--dim, inherit); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.agent-settings-toggle[aria-expanded="true"] { color: var(--accent, currentColor); }
.agent-settings-toggle:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: -4px; }
.agent-gear {
  display: block; width: 20px; height: 20px; fill: currentColor;
}
.agent-settings { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line, currentColor); border-radius: 12px; }
.agent-settings[hidden], .agent-settings:empty { display: none; }
.agent-settings-title { margin: 0; font-size: 15px; }
.agent-settings-sub { margin: 4px 0 0; font-size: 13px; color: var(--dim, inherit); font-weight: 600; }
.agent-device-scopes { display: flex; flex-direction: column; gap: 8px; }
.agent-device-scopes .agent-seg, .agent-device-scopes p { margin: 0; }
.agent-settings-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.agent-settings-label { margin: 0; color: var(--dim, inherit); font-size: 14px; }
.agent-pin { padding: 0 14px; border: 1px solid var(--edge, currentColor); border-radius: 12px; background: transparent; color: var(--text, inherit); font: inherit; font-weight: 600; }
.agent-pin:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 2px; }
.agent-settings .agent-rooms-list { margin: 0; color: var(--dim, inherit); font-size: 14px; }
.agent-settings .agent-rooms-list a { color: var(--text, inherit); }

/* ---- the panel's frame (agent-dock.js, web app only) ------------------- */
/* A bar across the top: Agents (the handle that moves a popped out window) and Pop out / Dock. Done sits at its right end. */
.agent-dock-bar {
  display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; padding: 0 84px 0 8px;
  border-bottom: 1px solid var(--line, currentColor); background: var(--bg, transparent);
}
.agent-sheet[data-dock-ready] .agent-tabs { padding-right: 8px; }
.agent-dock-move {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 8px; border: 0; background: none; text-align: left;
  color: var(--text, inherit); font: inherit; font-weight: 700; touch-action: none;
}
.agent-dock-move:disabled { color: var(--text, inherit); opacity: 1; cursor: default; }
.agent-sheet[data-dock="floating"] .agent-dock-move { cursor: move; }
.agent-sheet[data-dock="docked"] .agent-dock-move { cursor: ew-resize; }
@media (max-width: 699px) { .agent-sheet[data-dock="docked"] .agent-dock-move { cursor: ns-resize; } }
.agent-sheet[data-dock="floating"] .agent-dock-move::before { content: "⠿"; margin-right: 8px; color: var(--dim, inherit); }
.agent-dock-toggle {
  flex: none; min-height: 44px; padding: 0 12px; border: 1px solid var(--edge, currentColor); border-radius: 10px;
  background: transparent; color: var(--text, inherit); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.agent-dock-move:focus-visible, .agent-dock-toggle:focus-visible, .agent-dock-grip:focus-visible, .agent-dock-corner:focus-visible {
  outline: 3px solid var(--accent, currentColor); outline-offset: -3px;
}
.agent-sheet[data-dock-ready] .agent-sheet-close { min-height: 44px; }

/* The docked edge: the inner side of a side panel, the top of a bottom sheet. */
/* On a phone the grip is the visible pull line; the 44px top bar under it takes the drag as well (agent-dock.js). */
.agent-dock-grip { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 12px; cursor: ns-resize; touch-action: none; }
.agent-dock-grip::after { content: ""; position: absolute; left: 50%; top: 4px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--edge, currentColor); opacity: 0.6; }
.agent-dock-grip[hidden], .agent-dock-corner[hidden] { display: none; }
@media (max-width: 699px) {
  .agent-sheet[data-dock="docked"] .agent-dock-bar { padding-top: 8px; }
  .agent-sheet[data-dock="docked"] .agent-sheet-close { top: 8px; }
}
@media (min-width: 700px) {
  .agent-sheet[data-dock="docked"] .agent-sheet-box { box-sizing: border-box; padding-right: 20px; }
  .agent-dock-grip { top: 0; bottom: 0; left: auto; right: 0; width: 16px; height: auto; cursor: ew-resize; }
  .agent-dock-grip::after { left: auto; right: 3px; top: 50%; width: 4px; height: 40px; margin: -20px 0 0; }
  .agent-dock-grip:hover::after, .agent-sheet[data-dragging] .agent-dock-grip::after { background: var(--accent, currentColor); opacity: 1; }
}

/* A first tap arms the side divider; only the next touch may resize. */
@media (min-width: 700px) {
  .agent-sheet[data-dock="docked"] .agent-dock-grip { touch-action: pan-y; }
}
@media (min-width: 600px) {
  .agent-sheet[data-dock-horizontal][data-dock="docked"] .agent-dock-grip { touch-action: pan-y; }
}

/* Popped out: a window over PaceNotes, which stays live around it. */
.agent-sheet[data-dock="floating"] { pointer-events: none; }
.agent-sheet[data-dock="floating"] .agent-sheet-scrim { display: none; }
.agent-sheet[data-dock="floating"] .agent-sheet-box {
  position: fixed; pointer-events: auto; max-width: none; padding-top: 0;
  border: 1px solid var(--edge, currentColor); border-radius: 14px;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--text, #18181b) 30%, transparent);
}
.agent-sheet[data-dock="floating"] .agent-sheet-close { top: 0; }
.agent-dock-corner {
  position: absolute; z-index: 3; right: 0; bottom: 0; width: 44px; height: 44px; cursor: nwse-resize; touch-action: none;
  background: no-repeat right bottom / 24px 24px linear-gradient(135deg, transparent 50%, var(--edge, currentColor) 50% 58%, transparent 58% 70%, var(--edge, currentColor) 70% 78%, transparent 78%);
  border-bottom-right-radius: 14px;
}
.agent-sheet[data-dragging], .agent-sheet[data-dragging] * { user-select: none; -webkit-user-select: none; }

/* The banner's highlighted agent: the one whose window is open. */
.agent-badge[data-active] .agent-name { background: var(--accent, currentColor); color: var(--panel, #ffffff); }
/* A one-agent window (the page's banner switches agents) shows no tab strip or More list of its own. */
.agent-window[data-single] .agent-tabs, .agent-window[data-single] > .agent-more-button { display: none; }
.agent-contact { display: grid; gap: 8px; }
.agent-contact-name, .agent-contact-about {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--edge, currentColor);
  border-radius: 10px; background: var(--bg, transparent); color: var(--text, inherit); font: inherit;
}
.agent-contact-save { justify-self: start; min-height: 44px; }

/* Chrome's narrow side panel still resizes horizontally. */
.agent-sheet[data-dock-horizontal] { align-items: stretch; justify-content: flex-start; pointer-events: none; }
.agent-sheet[data-dock-horizontal] .agent-sheet-scrim { display: none; }
.agent-sheet[data-dock-horizontal] .agent-sheet-box { pointer-events: auto; height: 100%; max-width: none; border-radius: 0; }
.agent-sheet[data-dock-horizontal][data-dock="docked"] .agent-sheet-box { box-sizing: border-box; padding-right: 20px; }
@media (max-width: 599px) { .agent-sheet[data-dock-horizontal][data-dock="docked"] .agent-sheet-box { padding-right: 0; } }
.agent-sheet[data-dock-horizontal] .agent-dock-move { cursor: ew-resize; }
.agent-sheet[data-dock-horizontal] .agent-dock-grip { top: 0; bottom: 0; left: auto; right: 0; width: 16px; height: auto; cursor: ew-resize; }
.agent-sheet[data-dock-horizontal] .agent-dock-grip::after { left: auto; right: 3px; top: 50%; width: 4px; height: 40px; margin: -20px 0 0; }
.agent-card-picker { max-width: 100%; min-height: 36px; margin-top: 6px; background: var(--panel, white); color: var(--text, inherit); font: inherit; }
.agent-archive { margin-top: 16px; }
.agent-archive > summary { cursor: pointer; padding: 10px 0; }
.agent-archive > input { box-sizing: border-box; width: 100%; min-height: 44px; font: inherit; }
.agent-archive-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 0; }
.agent-archive-row > strong { flex: 1; overflow-wrap: anywhere; }
.agent-picker { display: block; width: 100%; min-height: 44px; margin-top: 6px; background: var(--panel, white); color: var(--text, inherit); font: inherit; }
.agent-detached { pointer-events: auto; align-self: flex-start; min-height: 44px; padding: 16px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }

.agent-sheet[data-agent-detached] { pointer-events: none; }
.agent-sheet[data-agent-detached] .agent-sheet-scrim { display: none; }

/* ---- arranging the bar and the Agents sheet (banner mode; agent-edit.js) -------------------------------------------- */
/* Hold a face (or a row in the sheet) and it wiggles; drag it to put the agents in order; each has a minus. With reduced motion
   nothing wiggles and a grip shows instead, so there is always something to take hold of. */
.agent-slot { position: relative; display: block; min-width: 0; flex: 0 0 auto; touch-action: none; }
.agent-badge { touch-action: none; -webkit-touch-callout: none; }
.agent-order-control { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--line, currentColor); }
.agent-order-control button { min-height: 44px; flex: 1; border: 0; border-radius: 8px; padding: 9px; background: none; color: var(--text, inherit); font: inherit; cursor: pointer; }
.agent-order-control button[aria-pressed="true"] { background: var(--panel, #fff); box-shadow: 0 1px 3px var(--line, currentColor); }
.agent-order-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.agent-order-undo { min-height: 44px; border: 0; padding: 8px; background: none; color: var(--accent, #ff5600); font: inherit; cursor: pointer; }
[data-editing] .agent-badge { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.agent-badge-remove {
  position: absolute; top: -4px; left: -4px; z-index: 2; width: 24px; height: 24px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--edge, currentColor); border-radius: 50%; background: var(--panel, #ffffff); color: var(--text, inherit);
  font: inherit; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
}
.agent-badge-remove::after { content: ""; position: absolute; inset: -10px; }   /* a 44px target around the 24px minus */
.agent-badge-remove:disabled { opacity: 0.4; cursor: default; }
.agent-badge-remove:focus-visible, .agent-done-chip:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 2px; }
.agent-done-chip {
  flex: 0 0 auto; align-self: center; justify-self: center; min-height: 44px; margin-top: 14px; padding: 0 16px; border: 0; border-radius: 22px;
  background: var(--accent, #ff5600); color: var(--on-accent, #18181b); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.agent-badge img, .agent-edit-row img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
[data-dragging] { position: relative; z-index: 6; opacity: 0.92; animation: none !important; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }
[data-drop-over] { outline: 2px dashed var(--accent, currentColor); outline-offset: -2px; border-radius: 12px; }
@keyframes agent-wiggle { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
@media (prefers-reduced-motion: no-preference) {
  [data-editing] > .agent-slot, .agent-edit-row .agent-more-face { animation: agent-wiggle 0.26s ease-in-out infinite alternate; }
  [data-editing] > .agent-slot:nth-child(even), .agent-edit-row:nth-child(even) .agent-more-face { animation-delay: -0.13s; animation-direction: alternate-reverse; }
}
@media (prefers-reduced-motion: reduce) {
  [data-editing] > .agent-slot::after {
    content: "\2807\2807"; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); padding: 0 6px; border-radius: 8px;
    background: var(--panel, #ffffff); color: var(--dim, inherit); font-size: 14px; line-height: 16px; pointer-events: none;
  }
}

/* The arranging list in the Agents sheet (agent-arrange.js). */
.agent-more-top { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 6px; }
.agent-more-top .agent-more-help { flex: 1 1 auto; margin: 0; }
.agent-edit-toggle {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 1px solid var(--edge, currentColor); border-radius: 12px; white-space: nowrap;
  background: transparent; color: var(--text, inherit); font: inherit; font-weight: 700; cursor: pointer;
}
.agent-edit-toggle[data-key="done"] { border-color: transparent; background: var(--accent, #ff5600); color: var(--on-accent, #18181b); }
.agent-edit-toggle:focus-visible, .agent-edit-btn:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 2px; }
.agent-edit-heading { margin: 16px 0 4px; color: var(--dim, inherit); font-size: 14px; font-weight: 700; }
.agent-edit-list { display: flex; flex-direction: column; min-height: 52px; border-radius: 12px; }
.agent-edit-empty { margin: 0; padding: 14px 12px; color: var(--dim, inherit); font-size: 14px; }
.agent-more-row.agent-edit-row { grid-template-columns: 24px 44px minmax(0, 1fr); }
.agent-grip { display: grid; place-items: center; align-self: stretch; min-height: 44px; color: var(--dim, inherit); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.agent-grip::before { content: ""; width: 10px; height: 20px; background: radial-gradient(circle, currentColor 1.7px, transparent 2.1px) 0 0 / 5px 6.67px; }
.agent-edit-btn {
  min-height: 44px; padding: 0 12px; border: 1px solid var(--edge, currentColor); border-radius: 12px; background: transparent;
  color: var(--text, inherit); font: inherit; font-weight: 600; cursor: pointer;
}
.agent-edit-btn:disabled { opacity: 0.45; cursor: default; }
.agent-edit-delete, .agent-delete-confirm { border-color: var(--bad, currentColor); color: var(--bad, currentColor); }
.agent-edit-panel { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line, currentColor); border-radius: 12px; }
.agent-contact-face, .agent-contact-voice { display: block; width: 100%; min-height: 44px; margin-top: 6px; background: var(--panel, white); color: var(--text, inherit); font: inherit; }

/* ---- Messages and Calls (agent-window.js) ------------------------------ */
/* A switch under the header keeps the two apart, like a phone's Messages and Phone apps. The same look serves All and Missed. */
.agent-seg {
  display: flex; flex: none; gap: 2px; min-width: 0; margin: 10px 16px 0; padding: 2px; border-radius: 12px;
  background: color-mix(in srgb, var(--text, #18181b) 9%, transparent);
}
.agent-seg[hidden] { display: none; }
.agent-seg-btn {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text, inherit); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* The picked side is the page colour in light mode and a lifted grey in dark mode, as on a phone. */
.agent-seg-btn[aria-pressed="true"], .agent-seg-btn[aria-selected="true"] {
  background: var(--panel, #ffffff); background: light-dark(var(--panel, #ffffff), color-mix(in srgb, var(--text, #ffffff) 22%, var(--panel, #18181b)));
  font-weight: 700; box-shadow: 0 1px 3px color-mix(in srgb, var(--text, #18181b) 22%, transparent);
}
.agent-seg-btn:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: -3px; }
.agent-thread-scroll[hidden], .agent-task-box[hidden], .agent-calls-view[hidden], .agent-recents[hidden], .agent-call-detail[hidden],
.agent-calls-state[hidden], .agent-calls-more[hidden], .agent-calls-search[hidden] { display: none; }

.agent-calls-view {
  display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 16px calc(16px + var(--ag-safe-bottom, env(safe-area-inset-bottom, 0px)));
}
.agent-calls-view > * { flex: none; }
.agent-calls-filter { align-self: center; width: min(100%, 16rem); margin: 0; }
.agent-calls-state:empty { display: none; }
.agent-calls-older { align-self: center; }
.agent-calls-state p { margin: 8px 0; }

/* One row per call, as in Recents: an arrow for the way it went, who, what happened, and on the right when, how long and the cost. */
.agent-recents { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.agent-recent-item { min-width: 0; border-bottom: 1px solid var(--line, color-mix(in srgb, currentColor 16%, transparent)); }
.agent-recent {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 10px; align-items: center; column-gap: 10px; width: 100%; min-height: 60px;
  box-sizing: border-box; padding: 8px 0; border: 0; background: none; color: var(--text, inherit); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.agent-recent:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: -3px; border-radius: 10px; }
.agent-recent-icon { width: 16px; height: 16px; justify-self: center; background: var(--dim, currentColor); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.agent-recent-icon[data-icon="in"] { -webkit-mask-image: var(--ag-icon-in); mask-image: var(--ag-icon-in); }
.agent-recent-icon[data-icon="out"] { -webkit-mask-image: var(--ag-icon-out); mask-image: var(--ag-icon-out); }
.agent-recent-icon[data-icon="missed"] { -webkit-mask-image: var(--ag-icon-missed); mask-image: var(--ag-icon-missed); background: var(--bad, currentColor); }
.agent-recent-icon[data-icon="room"], .agent-recent-icon[data-icon="listening"], .agent-recent-icon[data-icon="phone"] { background: none; }
.agent-recent-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agent-recent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; line-height: 1.25; }
.agent-recent.missed .agent-recent-name, .agent-detail-name.missed { color: var(--bad, currentColor); }
.agent-recent-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim, inherit); font-size: 13px; line-height: 1.3; }
.agent-recent.live .agent-recent-sub { color: var(--ag-on, currentColor); font-weight: 600; }
.agent-recent-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.agent-recent-time { color: var(--dim, inherit); font-size: 14px; white-space: nowrap; }
.agent-recent-meta { color: var(--dim, inherit); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.agent-recent-more::before { content: "\203A"; color: var(--dim, inherit); font-size: 22px; line-height: 1; }

/* One call's detail, in place of the list. */
.agent-call-detail { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.agent-detail-back {
  align-self: flex-start; min-height: 44px; padding: 0 10px 0 0; border: 0; background: none; color: var(--accent, currentColor);
  font: inherit; font-weight: 600; cursor: pointer;
}
.agent-detail-back::before { content: "\2039"; margin-right: 6px; font-size: 22px; line-height: 1; vertical-align: -2px; }
.agent-detail-back:focus-visible, .agent-detail-open:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 2px; border-radius: 10px; }
.agent-detail-name { margin: 0; font-size: 1.25rem; line-height: 1.2; overflow-wrap: anywhere; }
.agent-detail-kind { margin: -4px 0 0; color: var(--dim, inherit); font-size: 14px; }
.agent-detail-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 4px 0 0; padding: 10px 12px; border: 1px solid var(--line, currentColor); border-radius: 12px; font-size: 14px; }
.agent-detail-facts dt { color: var(--dim, inherit); }
.agent-detail-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.agent-detail-sub { margin: 4px 0 0; color: var(--dim, inherit); font-size: 13px; font-weight: 600; }
.agent-detail-summary { margin: 0; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-detail-open {
  align-self: flex-start; min-height: 44px; padding: 0 16px; border: 1px solid var(--edge, currentColor); border-radius: 12px; background: transparent;
  color: var(--text, inherit); font: inherit; font-weight: 600; cursor: pointer;
}

.agent-detail-delete { color: var(--bad, #ff5600); border-color: var(--bad, #ff5600); }
.agent-detail-delete-note { margin: 8px 0; color: var(--dim, inherit); font-size: 14px; line-height: 1.4; }

/* The Tread Connection app's Agents tab (strip): every agent as a face along the top; the one picked opens from the Agents button. */
.agent-window[data-single][data-strip] .agent-tabs { display: flex; gap: 4px; padding: 8px 56px 6px 12px; align-items: center; }
.agent-window[data-strip] .agent-tab-wrap, .agent-window[data-strip] .agent-tab-wrap:has(.agent-tab.active) { max-width: none; border-radius: 12px; box-shadow: none; background: none; }
.agent-tab.agent-strip-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; min-height: 58px; padding: 4px 6px;
  border-radius: 12px; font-size: 12px; box-shadow: none;
}
.agent-tab.agent-strip-tab.active { box-shadow: none; background: color-mix(in srgb, var(--accent, currentColor) 16%, transparent); }
.agent-strip-unread { display: inline-block; flex: none; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--accent, #ff5600); }
.agent-strip-art .agent-strip-unread { position: absolute; top: -2px; right: -2px; margin: 0; box-shadow: 0 0 0 2px var(--panel, #ffffff); }
.agent-new-divider { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: var(--accent, #ff5600); font-size: 12px; list-style: none; }
.agent-new-divider::before, .agent-new-divider::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.5; }
.agent-strip-art { position: relative; display: inline-block; width: 32px; height: 32px; flex: none; }
.agent-strip-ring { position: absolute; inset: -4px; box-sizing: border-box; border: 2.5px solid transparent; border-radius: 50%; pointer-events: none; }
.agent-strip-ring.agent-ring-on-call { border-color: var(--ag-on); animation: agent-pulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ag-on) 30%, transparent), 0 0 7px 2px color-mix(in srgb, var(--ag-on) 60%, transparent); }
.agent-strip-ring.agent-ring-busy { border-top-color: var(--ag-busy); border-right-color: var(--ag-busy); animation: agent-turn 1.6s linear infinite; }
.agent-strip-ear { position: absolute; right: -6px; bottom: -4px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--panel, #fff); font-size: 10px; line-height: 1; }
.agent-strip-tab[data-presence="deaf"] .agent-strip-face { filter: grayscale(1); opacity: 0.55; }
.agent-strip-tab[data-presence="deaf"] .agent-strip-name { color: var(--dim, inherit); }
.agent-strip-face { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.agent-tab.agent-strip-tab.active .agent-strip-face { box-shadow: 0 0 0 2px var(--accent, currentColor); }
.agent-strip-letter { display: inline-grid; place-items: center; background: var(--line, color-mix(in srgb, currentColor 20%, transparent)); color: var(--text, inherit); font-weight: 600; font-size: 15px; }
.agent-strip-name { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The voice-note mic beside Send: tap to record, tap again to send. Orange with a running clock while it records. */
.agent-mic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--line, currentColor); border-radius: 22px; background: var(--panel, transparent); color: var(--text, inherit); font: inherit; font-size: 14px; cursor: pointer;
}
.agent-mic-icon { width: 16px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Crect x='4' y='0' width='8' height='13' rx='4'/%3E%3Cpath d='M1 9a7 7 0 0 0 14 0' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='7' y='16' width='2' height='4'/%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 16 20'%3E%3Crect x='4' y='0' width='8' height='13' rx='4'/%3E%3Cpath d='M1 9a7 7 0 0 0 14 0' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='7' y='16' width='2' height='4'/%3E%3C/svg%3E") center / contain no-repeat; }
.agent-mic-time:empty { display: none; }
.agent-mic.recording { background: var(--btn, #ff5600); border-color: var(--btn-edge, #ff5600); color: var(--on-btn, #18181b); }
.agent-mic.recording .agent-mic-icon { border-radius: 2px; width: 12px; height: 12px; -webkit-mask: none; mask: none; }
.agent-mic:disabled { opacity: 0.6; cursor: default; }
.agent-mic:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 2px; }
.agent-head-call:has(.agent-talk-button) { flex-direction: column; align-items: stretch; gap: 8px; }
/* The browser page and the Chrome side panel (the iPhone app lays its own header out, web/app.css html.suite): the header wraps
   instead of squeezing. When the name and role would get less than 11rem beside the buttons, the buttons drop to a row of their
   own and share it. A 560px side panel used to stack Walkie-talkie over Call, crush the role into a three-line column and break
   the status pill mid-word ("Availabl / e", Jake 2026-11-09). */
html:not(.suite) .agent-window-head { flex-wrap: wrap; gap: 10px 12px; }
html:not(.suite) .agent-window-title { flex: 999 1 11rem; }
html:not(.suite) .agent-head-call, html:not(.suite) .agent-head-call:has(.agent-talk-button) { flex: 1 0 auto; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; max-width: 100%; }
html:not(.suite) .agent-head-call .agent-call, html:not(.suite) .agent-head-call .agent-talk-button { flex: 1 1 auto; white-space: nowrap; }
html:not(.suite) .agent-head-call .agent-call:has(+ .agent-call-pick) { margin-right: -8px; }
/* The narrowest side panel: a smaller face keeps the name beside it instead of dropping the title under an 88px face. */
@media (max-width: 380px) { html:not(.suite) .agent-window-face { width: 48px; height: 48px; } }
.agent-head-call .agent-talk-button { min-width: 72px; min-height: 44px; }
.agent-window[data-single][data-strip] .agent-tabs { margin-right: 84px; padding-right: 8px; }
/* From 700px the sidebar has its own top bar (Agents, Pop out, Done), so the strip under it spans the full column and scrolls sideways;
   the 84px gap is only for the phone, where Done overlaps the strip's row. The sidebar also clears the status bar (iPad). */
@media (min-width: 700px) {
  .agent-sheet[data-dock-ready] .agent-window[data-single][data-strip] .agent-tabs { margin-right: 0; padding-right: 12px; }
  .agent-sheet[data-dock="docked"] .agent-sheet-box { --ag-safe-top: max(0px, calc(env(safe-area-inset-top, 0px) - var(--agent-top, 0px))); padding-top: var(--ag-safe-top); }
  .agent-sheet[data-dock="docked"] .agent-sheet-close { top: var(--ag-safe-top); }
}

/* ---- Clear, + and App settings (the Tread Connection app turns these on; its phone layout is in web/app.css) --------------- */
.agent-view-bar { display: flex; flex: none; align-items: center; gap: 8px; }
.agent-view-bar .agent-seg { flex: 1 1 auto; }
/* ---- the ⋯ menu, Archive swipe, Undo toast and the first-swipe sheet (see agent-window.js) ---------------------------------- */
.agent-panel { position: relative; }
.agent-overlay { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.agent-overlay > * { pointer-events: auto; }
.agent-overlay [hidden] { display: none !important; }
.agent-menu-scrim { position: absolute; inset: 0; background: transparent; }
.agent-menu {
  position: absolute; top: 56px; right: 12px; display: flex; flex-direction: column; min-width: 190px; padding: 4px;
  border: 1px solid var(--edge, currentColor); border-radius: 12px; background: var(--panel, #ffffff); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.agent-menu-item { min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: var(--text, inherit); font: inherit; text-align: left; cursor: pointer; }
.agent-menu-item:disabled { opacity: 0.4; cursor: default; }
.agent-menu-item:focus-visible, .agent-select-btn:focus-visible, .agent-filter-btn:focus-visible, .agent-select-bar button:focus-visible, .agent-act:focus-visible, .agent-row:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: -3px; }
.agent-archived-bar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 0 4px; }
.agent-archived-bar[hidden] { display: none; }
.agent-archived-title { font-weight: 600; }
.agent-archived-done, .agent-unarchive {
  min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--accent, inherit); font: inherit; font-weight: 600; cursor: pointer;
}
.agent-unarchive { margin-left: auto; align-self: center; }
.agent-entry > .agent-unarchive { flex: none; }
.agent-thread:has(.agent-swipe-row), .agent-recents:has(.agent-swipe-row) { overflow-x: clip; overflow-y: visible; }
.agent-swipe-row { position: relative; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.agent-swipe-row a, .agent-swipe-row button { -webkit-user-select: auto; user-select: auto; }
.agent-swipe-bg {
  position: absolute; top: 0; bottom: 0; width: 100%; display: flex; align-items: center; box-sizing: border-box; padding: 0 22px;
  background: color-mix(in srgb, var(--accent, #ff5600) 55%, #18181b); color: #fff; font-weight: 700; cursor: pointer;
}
.agent-swipe-bg::after { content: 'Archive'; }
.agent-swipe-bg-left { left: -100%; justify-content: flex-end; }
.agent-swipe-bg-right { right: -100%; justify-content: flex-start; }
.agent-swipe-row.armed > .agent-swipe-bg { background: var(--accent, #ff5600); color: #18181b; }
.agent-archive-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}
.agent-archive-sr:focus { right: 8px; top: 4px; width: auto; height: 44px; margin: 0; padding: 0 14px; clip: auto; clip-path: none; border-radius: 22px; background: var(--accent, #ff5600); color: #18181b; font: inherit; font-weight: 700; z-index: 2; }
.agent-archive-sr:focus::before { content: 'Archive'; }
.agent-toast, .agent-message-toast {
  position: absolute; left: 12px; right: 12px; bottom: calc(var(--compose-h, 64px) + 16px); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; box-sizing: border-box; padding: 0 6px 0 16px; border: 1px solid var(--edge, #fff); border-radius: 12px; background: var(--panel, #18181b); color: var(--text, #fff); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.agent-toast-text { min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.agent-toast-undo { min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--accent, #ff5600); font: inherit; font-weight: 700; cursor: pointer; }
.agent-swipe-host { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.agent-swipe-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.agent-swipe-sheet {
  position: relative; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 16px 16px 0 0; background: var(--panel, #ffffff); color: var(--text, inherit);
}
.agent-swipe-done { min-height: 44px; align-self: stretch; }
.agent-swipe-title { margin: 0; font-size: 1.1rem; }
.agent-swipe-group { display: flex; flex-direction: column; gap: 6px; }
.agent-swipe-label { color: var(--dim, inherit); font-size: 14px; }
.agent-swipe-group .agent-seg-btn { min-height: 44px; }
.agent-earlier { align-self: flex-start; }
.agent-app-settings { align-self: stretch; }
.agent-task-box-plus { position: relative; flex-direction: row; align-items: flex-end; overflow: visible; }
.agent-task-box-plus .agent-compose { flex: 1 1 auto; }
.agent-plus {
  flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--edge, currentColor); border-radius: 50%; background: none;
  color: var(--text, inherit); font: inherit; font-size: 24px; line-height: 1; cursor: pointer;
}
.agent-plus-menu {
  position: absolute; left: 0; bottom: 100%; z-index: 3; display: flex; flex-direction: column; min-width: 160px; padding: 4px;
  border: 1px solid var(--edge, currentColor); border-radius: 12px; background: var(--panel, #ffffff);
}
.agent-plus-menu[hidden], .agent-plus-file { display: none; }
.agent-plus-item { min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--text, inherit); font: inherit; text-align: left; cursor: pointer; }
.agent-plus:focus-visible, .agent-plus-item:focus-visible, .agent-swipe-sheet button:focus-visible, .agent-toast-undo:focus-visible, .agent-archived-done:focus-visible, .agent-unarchive:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 2px; }

/* ---- Select and Filter, the select bar, the action bar and saved rows (see agent-window.js) -------------------------------- */
.agent-select-btn, .agent-filter-btn, .agent-select-cancel, .agent-select-all, .agent-select-bar button {
  flex: none; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--accent, inherit); font: inherit; font-weight: 600; cursor: pointer;
}
.agent-filter-btn { position: relative; color: var(--dim, inherit); }
.agent-filter-btn.on { color: var(--accent, currentColor); }
.agent-filter-icon {
  display: block; width: 22px; height: 22px; margin: 0 auto; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%;
  background: linear-gradient(currentColor, currentColor) center 6px / 10px 2px no-repeat, linear-gradient(currentColor, currentColor) center 10px / 6px 2px no-repeat, linear-gradient(currentColor, currentColor) center 14px / 2px 2px no-repeat;
}
.agent-filter-dot { position: absolute; top: 8px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent, #ff5600); display: none; }
.agent-filter-btn.on .agent-filter-dot { display: block; }
.agent-select-bar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; }
.agent-select-bar[hidden], .agent-view-bar[hidden], .agent-action-bar[hidden] { display: none; }
.agent-select-count { font-weight: 600; text-align: center; }
.agent-action-bar { display: flex; flex: none; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line, currentColor); background: var(--panel, #18181b); }
.agent-act { flex: 1 1 0; min-height: 48px; padding: 0 10px; border: 1px solid var(--edge, currentColor); border-radius: 12px; background: none; color: var(--text, inherit); font: inherit; font-weight: 600; cursor: pointer; }
.agent-act.primary { flex: 1.4 1 0; border-color: transparent; background: var(--accent, #ff5600); color: #18181b; }
.agent-act:disabled { opacity: 0.4; cursor: default; }
.agent-saved-mark { color: var(--accent, #ff5600); font-size: 14px; line-height: 1; }
.agent-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.agent-view-bar-solo { justify-content: flex-end; }
.agent-selecting { position: relative; cursor: pointer; padding-left: 52px; -webkit-user-select: none; user-select: none; }
/* A photo or file row is a system line with no side padding of its own, which put its text under the circle. */
.agent-entry.agent-selecting { padding-left: 52px; }
.agent-selecting.agent-system-line::before { top: 2px; }
.agent-selecting::before {
  content: ''; position: absolute; left: 14px; top: 14px; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid var(--dim, currentColor); border-radius: 50%;
}
.agent-selecting[data-selected="true"]::before { border-color: var(--accent, #ff5600); background: var(--accent, #ff5600) radial-gradient(circle, #18181b 0 0) center / 0 0 no-repeat; box-shadow: inset 0 0 0 4px var(--panel, #18181b); }
.agent-unselectable { opacity: 0.45; cursor: default; }
.agent-selecting a, .agent-selecting button, .agent-selecting audio, .agent-selecting video { pointer-events: none; }
.agent-selecting .agent-media-delete, .agent-selecting .agent-media-bar .agent-chip { display: none; }
.agent-confirm-text { margin: 0; color: var(--dim, inherit); }
.agent-confirm-yes { min-height: 48px; border-color: var(--bad, #ff5600); color: var(--bad, #ff5600); }
.agent-confirm-no { min-height: 48px; }
.agent-act-archive, .agent-act-save, .agent-act-delete { white-space: nowrap; }

.agent-talk[data-state="idle"]:not([hidden]) { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; }
.agent-talk[data-state="idle"] .agent-talk-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.suite .agent-window[data-strip] .agent-tabs[hidden] { display: none; }
.agent-message-transient { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Thread media (shared/thread-media-view.js): lazy images and video in an agent thread, a Save button under each. */
.agent-media { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.agent-media-frame { display: block; width: 100%; max-width: min(420px, 70%); padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--line, rgba(128, 128, 128, 0.2)) center / cover no-repeat; cursor: zoom-in; min-height: 72px; }
.agent-media-img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; }
.agent-media-frame, .agent-media-img, .agent-media-thumb { -webkit-touch-callout: default; }
.agent-media-video { display: block; width: 100%; max-width: 480px; max-height: 60vh; border-radius: 10px; background: #18181b; }
.agent-media-audio { width: 100%; max-width: 420px; }
.agent-media-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--dim, inherit); }
.agent-media-file, .agent-media-note { font-size: 13px; overflow-wrap: anywhere; }
.agent-media-expired { display: flex; align-items: center; gap: 10px; opacity: 0.75; }
.agent-media-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; filter: grayscale(1); }
.agent-media-lightbox { touch-action: pan-x pinch-zoom; overscroll-behavior: contain; position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.88); }
.agent-media-lightbox img, .agent-media-lightbox video { max-width: 96vw; max-height: 92vh; object-fit: contain; }
.agent-media-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 1; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: #18181b; font-size: 28px; line-height: 1; }
.agent-media-bar.agent-media-bar-tucked { display: none; }
/* With Save and Delete along the bottom, the photo stops above them instead of running underneath. */
.agent-media-lightbox-has-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); box-sizing: border-box; }
.agent-media-lightbox-has-bar img, .agent-media-lightbox-has-bar video { max-height: min(92vh, calc(100% - 8px)); min-height: 0; }
.agent-media-lightbox-bar { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: 100%; box-sizing: border-box; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 0 16px; }
.agent-media-lightbox-bar button { padding: 10px 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: #18181b; font-size: 15px; min-height: 44px; }
.agent-media-lightbox-bar .agent-media-lightbox-delete { background: #18181b; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.agent-media-lightbox-bar button:disabled { opacity: 0.6; }


/* Room artifact cards and their read-only viewer. */
.agent-artifact { flex: 1 1 100%; min-width: 0; width: 100%; max-width: 480px; height: 216px; max-height: 220px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); cursor: pointer; font-size: 13px; }
.agent-artifact-heading { display: flex; align-items: center; gap: 8px; height: 20px; flex: none; min-width: 0; }
.agent-artifact-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-artifact-icon, .agent-artifact-kind, .agent-artifact-version, .agent-artifact-more { color: var(--dim); }
.agent-artifact-content { height: 130px; min-height: 130px; overflow: hidden; }
.agent-artifact-preview { min-width: 0; overflow-wrap: anywhere; line-height: 20px; }
.agent-artifact-block { display: block; margin: 0 0 4px; white-space: pre-wrap; }
.agent-artifact-cached { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.agent-artifact-item { margin-bottom: 2px; }
.agent-artifact-preview-card .agent-artifact-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-artifact-footer { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 12px; }
.agent-artifact-open { margin-left: auto; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 12px; cursor: pointer; }
.agent-artifact[data-state="loading"] .agent-artifact-content { opacity: 0.65; background: var(--line); border-radius: 4px; }
.agent-artifact[data-state="gone"] { cursor: default; justify-content: center; color: var(--dim); }
.agent-artifact-preview table { border-collapse: collapse; font: inherit; min-width: 100%; }
.agent-artifact-preview th, .agent-artifact-preview td { padding: 2px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.agent-artifact-preview-card table { table-layout: fixed; width: 100%; font-size: 11px; line-height: 17px; }
.agent-artifact-preview-card th, .agent-artifact-preview-card td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-artifact-preview-card th { white-space: normal; overflow-wrap: anywhere; line-height: 14px; vertical-align: bottom; font-size: 10.5px; max-height: 28px; }
.agent-artifact-preview svg { display: block; width: 100%; height: 130px; color: var(--accent, var(--text)); }
.agent-artifact-overlay { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.88); }
.agent-artifact-sheet { display: flex; flex-direction: column; width: min(880px, 94vw); height: 90vh; min-width: 0; box-sizing: border-box; padding: 16px; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); font: 15px/1.5 system-ui, sans-serif; }
.agent-artifact-close { flex: none; align-self: flex-start; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.agent-artifact-view-heading { flex: none; min-width: 0; }
.agent-artifact-view-heading h2 { margin: 2px 0; overflow-wrap: anywhere; }
.agent-artifact-view-body { flex: 1; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; }
.agent-artifact-preview-full { overflow: auto; }
.agent-artifact-view-body > .agent-artifact-table { height: 100%; overflow: auto; }
.agent-artifact-preview-full table { width: max-content; }
.agent-artifact-preview-full th, .agent-artifact-preview-full td { min-width: 100px; }
.agent-artifact-preview-full td { white-space: nowrap; }
.agent-artifact-preview-full th { white-space: normal; }
.agent-artifact-hint { color: var(--dim); font-size: 12px; margin: 6px 0 0; position: sticky; left: 0; }
.agent-artifact-preview-full th { position: sticky; top: 0; background: var(--panel); }
.agent-artifact-preview-full svg { height: auto; min-height: 220px; }
.agent-artifact-view-footer { flex: none; }
.agent-artifact-view-footer a { color: var(--accent, var(--text)); }
@media (max-width: 599px) {
  .agent-artifact-sheet { width: 100%; height: 100%; height: 100dvh; border: 0; border-radius: 0; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
}
@media (prefers-reduced-motion: reduce) { .agent-artifact-overlay, .agent-artifact-sheet { animation: none; transition: none; } }

.agent-task-box-plus:has(.agent-draft-state:not([hidden])) { flex-wrap: wrap; }
.agent-draft-state { flex: 0 0 100%; min-width: 0; max-height: 45vh; overflow: auto; padding: 8px 12px; font-size: 13px; }
.agent-draft-state[hidden] { display: none; }
.agent-draft-state p { margin: 0 0 8px; }
.agent-draft-state > span { margin-right: 8px; }
.agent-draft-state button { margin: 4px 8px 0 0; }
.agent-draft-preview { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 100px; overflow: auto; font: inherit; margin: 4px 0 8px; }

/* Composer photo previews, upload feedback and dictation. */
.agent-task-box-plus { flex-wrap: wrap; }
.agent-composer-state, .agent-photo-preview, .agent-upload-list, .agent-dictation-recovery { flex: none; width: 100%; min-width: 0; font-size: 14px; }
.agent-composer-state[hidden], .agent-photo-preview[hidden], .agent-upload-list[hidden], .agent-dictation-recovery[hidden] { display: none; }
.agent-upload-list { order: -1; }
.agent-upload-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line, currentColor); border-radius: 8px; margin-bottom: 6px; }
.agent-upload-chip span { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.agent-upload-chip progress { width: 100%; }
.agent-photo-preview { display: flex; align-items: center; gap: 10px; order: -1; }
.agent-photo-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.agent-photo-preview span { overflow-wrap: anywhere; }
.agent-dictation-interim { margin: 4px 0; color: var(--dim, inherit); white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-dictation-recovery textarea { width: 100%; box-sizing: border-box; }

.agent-sheet[data-dock="docked"][data-resize-armed] .agent-dock-grip { touch-action: none; background: color-mix(in srgb, var(--accent, currentColor) 18%, transparent); }
.agent-sheet[data-resize-armed] .agent-dock-grip::after { background: var(--accent, currentColor); opacity: 1; }
/* The strip is 16px and a finger is wider than that. The empty gutter beside it answers too (nothing to tap there), and once armed the
   next touch counts from well to either side, because a miss would clear the highlight and move nothing. */
@media (min-width: 700px) { .agent-sheet[data-dock="docked"] .agent-dock-grip::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; right: -16px; } }
.agent-sheet[data-dock="docked"][data-resize-armed] .agent-dock-grip::before { left: -24px; right: -24px; }

.agent-sheet[data-dock-ready] .agent-dock-move:disabled { cursor: default; }

.agent-dictation-level { width: 90px; height: 14px; margin: 0 8px; vertical-align: middle; }

.agent-replies-link { display: block; border: 0; padding: 6px 0; background: none; color: var(--accent, #ff5600); font: inherit; font-size: 13px; cursor: pointer; }
.agent-reply-thread { position: absolute; inset: 0 0 0 auto; width: min(100%, 28rem); box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; padding: 16px; border-left: 1px solid var(--edge, currentColor); background: var(--panel, #fff); box-shadow: -6px 0 24px color-mix(in srgb, var(--text, #18181b) 13%, transparent); }
.agent-reply-thread[hidden] { display: none; }
.agent-thread-heading { margin: 0; }
.agent-thread-close { align-self: flex-end; }
.agent-thread-parent { border-bottom: 1px solid var(--edge, currentColor); padding-bottom: 12px; }
.agent-thread-replies { flex: 1 0 auto; }
.agent-thread-message { padding: 10px 0; overflow-wrap: anywhere; }
.agent-thread-input { flex-shrink: 0; width: 100%; box-sizing: border-box; padding: 10px; font: inherit; color: inherit; background: var(--panel, #fff); border: 1px solid var(--edge, currentColor); border-radius: 8px; }
.agent-thread-send, .agent-thread-close, .agent-thread-more { min-height: 44px; cursor: pointer; }
@media (max-width: 600px) {
  .agent-reply-thread { inset: auto 0 0; width: 100%; max-height: 95%; border-radius: 18px 18px 0 0; border-top: 1px solid var(--edge, currentColor); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

.agent-task > .agent-filing-line { flex: 1 1 100%; font-size: 12px; color: var(--dim, inherit); }
.agent-thread-root .agent-entry-title { font-weight: 600; }
.agent-filing-line button { color: inherit; background: none; border: 0; padding: 6px 2px; font: inherit; cursor: pointer; }
.agent-filing-choices { display: flex; flex-wrap: wrap; gap: 4px; }
.agent-filing-choices[hidden] { display: none; }

/* A video or file opens in the viewer, which carries Save and Delete, so the thread shows one Open under it instead of
   three pills with a one-tap Delete beside Open. A link that opens outside the app keeps its Save. */
.agent-media-bar:has(> button.agent-media-open) > :is(.agent-media-save, .agent-media-delete) { display: none; }
/* Who wrote a message from another agent: a quiet line, not a pill that reads like an action. Still a 44px target. */
.agent-chip.agent-name-chip { border-color: transparent; padding: 2px 4px; color: var(--dim, inherit); }
.agent-chip.agent-name-chip::before { content: 'From '; }
/* Typing on a phone with the keyboard up: the agent strip and the Messages/Calls row step aside so the thread keeps its room. */
@media (max-width: 700px) and (max-height: 640px) {
  .agent-window:has(.agent-compose-input:focus) :is(.agent-tabs, .agent-view-bar) { display: none; }
}

/* Select mode (phone app): the Delete / Archive / Save bar takes the tab bar's place. The tab bar returns, as it was, when select ends. */
html.suite:has(.agent-sheet:not([hidden]) .agent-window:not([hidden]) .agent-select-bar:not([hidden])) .suite-tabs { display: none; }
.agent-message-act { display: inline; min-height: 0; padding: 12px 6px; border: 0; background: none; color: var(--accent, currentColor); font: inherit; font-weight: 600; text-decoration: underline; }
/* Done shows at the top right with the keyboard up or on a call (no tab bar then), so the strip's scroll box ends before it. The phone rule in
   web/app.css gives the strip width:100% with margin 0, which makes a margin-right a no-op (the box overflows instead of shrinking), so
   width goes back to auto here; Done is 75px wide plus 8px from the edge, so 84px. */
@media (max-width: 699px) { html.suite:is(.suite-kb, .in-call) .agent-window[data-single][data-strip] .agent-tabs { width: auto; margin-right: 84px; } }