/* 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);
}

/* ---- 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-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%; }
/* The animated face has its own plate, so the picture under it (which has a face of its own) is hidden while it runs. */
.agent-face:has(.agent-face-art) .agent-face-img, .agent-face:has(.agent-face-art) .agent-initials { visibility: hidden; }
.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); } }

/* ---- 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; }
@media (min-width: 700px) {
  .agent-sheet { align-items: stretch; justify-content: flex-end; }
  .agent-sheet-scrim { background: transparent; }
  .agent-sheet-box { width: min(26rem, 100vw); max-width: none; height: 100%; border: 0; border-left: 1px solid var(--line, currentColor); border-radius: 0; box-shadow: -10px 0 24px color-mix(in srgb, var(--text, #18181b) 18%, transparent); padding-top: env(safe-area-inset-top); }
  .agent-sheet-close { top: env(safe-area-inset-top); }
}

.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; padding: 12px 16px 16px;
}
.agent-thread-scroll > * { flex: none; }

.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 { width: 100%; height: 100%; transition: width 0.15s ease, height 0.15s ease; }
.agent-window-face[data-size="badge"] svg { width: 44px; height: 44px; }
.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-window-name { margin: 0; font-size: 1.25rem; line-height: 1.2; overflow-wrap: anywhere; }
.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;
}
.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-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-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; }

.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: 60%; 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-task-toggle { flex: none; align-self: flex-start; min-height: 44px; padding: 4px 0; border: 0; background: none; color: var(--dim, inherit); font: inherit; font-size: 13px; cursor: pointer; }
.agent-task-toggle:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 2px; }
.agent-task-extras { display: flex; flex: none; flex-direction: column; gap: 8px; min-width: 0; }
.agent-task-extras[hidden] { display: none; }
.agent-task-extras label { display: flex; flex-direction: column; gap: 4px; color: var(--dim, inherit); font-size: 13px; min-width: 0; }
.agent-task-links, .agent-task-due { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px 12px; border: 1px solid var(--edge, currentColor); border-radius: 12px; background: var(--field, var(--panel, #fff)); color: var(--text, inherit); font: inherit; font-size: 16px; }
.agent-task-links { min-height: 44px; resize: vertical; overflow-wrap: anywhere; }
.agent-task-links:focus-visible, .agent-task-due:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 1px; }
.agent-task-due { min-height: 44px; }
.agent-task { border-left: 3px solid var(--accent, #ff5600); background: color-mix(in srgb, var(--accent, #ff5600) 6%, 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-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-reply-text { font-size: 14px; }
.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-pill.presence-busy::before { animation: none; }
  .agent-window-face svg { transition: none; }
}

.agent-rooms-button { min-width:44px;min-height:44px;align-self:center;flex:none;border:1px solid var(--line,#18181b);border-radius:6px;padding:6px;background:#18181b;color:#fff;font:inherit;cursor:pointer; }
.agent-rooms-button:focus-visible { outline:2px solid #FF5600; }
.agent-rooms { width:min(360px,85vw);max-height:80vh;overflow:auto;border:1px solid var(--line,#18181b);border-radius:10px;background:#18181b;color:#fff;padding:16px; }
.agent-rooms::backdrop { background:var(--scrim,rgba(0,0,0,.6)); }
.agent-rooms h2 { margin:0 0 12px;font-size:17px; }
.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-rooms>button { min-height:44px;border:1px solid #FF5600;border-radius:6px;padding:6px 12px;background:#18181b;color:#fff;font:inherit;cursor:pointer; }