/* Israel Canada, the guide (agent): panel, conversation, voice and video mocks.
   Views on .agent[data-view]: closed | docked | expanded | collapsed. Modes on [data-mode]: chat | voice | video.
   Anatomy and copy follow the DSM Conversation page and specs/agent-journey.md (panel on the right). */

.agent { --panel-w: clamp(440px, 31.25vw, 600px); --panel-top: 96px; --ease-agent: cubic-bezier(.22, 1, .36, 1); }
.agent__scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(25, 25, 25, .18);
  opacity: 0; visibility: hidden; transition: opacity 420ms var(--ease-standard), visibility 0s linear 420ms,
    background-color 420ms var(--ease-standard), backdrop-filter 420ms var(--ease-standard);
}
.agent[data-view='docked'] .agent__scrim, .agent[data-view='expanded'] .agent__scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
.agent[data-view='expanded'] .agent__scrim {
  background: rgba(25, 25, 25, .56);
  -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
}

/* ───────────── Panel ───────────── */
.agent__panel {
  position: fixed; z-index: 95; top: var(--panel-top); bottom: 24px; right: 24px; width: var(--panel-w);
  /* clip, not just hidden: the call's ambient glow is wider than the panel, and a hidden-overflow
     box can still be scrolled sideways (it drifted 14 px on a phone) */
  display: flex; flex-direction: column; overflow: hidden; overflow: clip;
  background: #fff; border-radius: 20px; box-shadow: var(--depth-4); color: var(--ink);
  opacity: 0; visibility: hidden; transform: translateX(32px) scale(.98); transform-origin: 100% 100%;
  transition: opacity 360ms var(--ease-standard), transform 620ms var(--ease-agent), width 620ms var(--ease-agent),
    right 620ms var(--ease-agent), visibility 0s linear 620ms, background-color 420ms var(--ease-standard), color 420ms var(--ease-standard);
}
.agent[data-view='docked'] .agent__panel, .agent[data-view='expanded'] .agent__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.agent[data-view='expanded'] .agent__panel { --w: min(1200px, calc(100vw - 48px)); width: var(--w); right: calc((100vw - var(--w)) / 2); }
.agent[data-view='collapsed'] .agent__panel { transform: translateY(24px) scale(.92); }

.agent__head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.agent__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.agent__id > div { min-width: 0; }
/* her name never cuts off (v4): where the panel is too narrow for it beside the tools, it takes two even lines */
.agent__id p { text-wrap: balance; line-height: 20px; }
.agent__avatar { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--accent); }
.agent__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.agent__tools { display: flex; gap: 4px; }
.agent__tool {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink);
  transition: background-color var(--d-fast) var(--ease-standard);
}
.agent__tool:hover { background: var(--muted); }
.agent__tool-sheet { display: none; } /* the collapse button's chevron, for the phone's sheet (responsive.css) */
/* narrower docked panels (under 1600 wide): slimmer tools, so the name stays on one line */
@media (max-width: 1600px) { .agent__tools { gap: 0; } .agent__tool { width: 36px; height: 36px; } }

.agent__body { position: relative; flex: 1; min-height: 0; }
.agent__stream {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth;
  display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 16px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.agent__stream > * { flex-shrink: 0; } /* scroll rows (suggestions) would otherwise collapse to 0 height */
.agent[data-view='expanded'] .agent__stream { padding-inline: max(24px, calc((100% - 760px) / 2)); } /* a centred 760px reading column */

.agent__composer {
  flex: none; display: flex; align-items: center; gap: 8px; margin: 0 20px; padding: 4px;
  border: 1px solid var(--border); border-radius: 9999px; background: var(--muted);
  transition: border-color var(--d-base) var(--ease-standard), background-color var(--d-base) var(--ease-standard);
}
.agent[data-view='expanded'] .agent__composer { width: calc(100% - 40px); max-width: 760px; margin-inline: auto; }
.agent__composer:focus-within { border-color: var(--input); background: #fff; }
.agent__composer input { flex: 1; min-width: 0; height: 44px; padding-inline: 14px 4px; border: 0; background: transparent; font-size: 16px; line-height: 24px; caret-color: var(--accent); }
.agent__composer input::placeholder { color: var(--muted-fg); opacity: 1; }
.agent__composer .round { width: 40px; height: 40px; }
.agent__composer .round--ghost:hover { background: var(--secondary-hover); }
.agent__disclaimer { flex: none; padding: 8px 20px 14px; text-align: center; color: var(--muted-fg); }

/* Context line on a project page ("מדברים על SHE") */
.agent__context { display: none; flex: none; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid rgba(25, 25, 25, .08); color: var(--muted-fg); }
.agent.has-project .agent__context { display: flex; animation: msg-in var(--d-slow) var(--ease-agent); }
.agent__context b { color: var(--ink); font-weight: 500; }
.agent__context-thumb { width: 36px; height: 24px; overflow: hidden; border-radius: 4px; }
.agent__context-thumb img { width: 100%; height: 100%; object-fit: cover; }
.agent[data-mode='video'] .agent__context { color: rgba(255, 255, 255, .6); border-bottom-color: rgba(255, 255, 255, .08); }
.agent[data-mode='video'] .agent__context b { color: #fff; }

/* ───────────── Conversation ───────────── */
.msg-user {
  align-self: flex-end; max-width: 80%; padding: 10px 16px; border-radius: 20px 20px 20px 4px;
  background: var(--ink); color: #fff; font-size: 16px; line-height: 24px;
  animation: msg-in var(--d-slow) var(--ease-agent);
}
.msg-agent { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; animation: msg-in var(--d-slow) var(--ease-agent); }
.msg-agent__avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; margin-top: 2px; }
.msg-agent__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.msg-agent__text { font-size: 18px; line-height: 29px; }
.msg-agent__text b { font-weight: 700; }
.msg-agent__text .caret { display: inline-block; width: 2px; height: 1em; margin-inline-start: 2px; vertical-align: -2px; background: var(--accent); animation: caret 1s steps(1) infinite; }
.msg-indent { margin-inline-start: 40px; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }

.msg-note {
  padding-inline-start: 12px; border-inline-start: 2px solid var(--accent); color: var(--muted-fg);
  font-size: 14px; line-height: 20px; animation: msg-in var(--d-slow) var(--ease-agent);
}
.msg-status { display: flex; align-items: center; gap: 10px; color: var(--muted-fg); font-size: 14px; line-height: 20px; animation: msg-in var(--d-slow) var(--ease-agent); }
.msg-status__avatar { position: relative; width: 28px; height: 28px; }
.msg-status__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.msg-status__avatar::after { /* the thinking arc */
  content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent);
  animation: spin 1.2s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--input); animation: dot 1.2s var(--ease-standard) infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* Choice group (show_choices, style chips) */
.choices { display: flex; flex-direction: column; gap: 8px; animation: msg-in var(--d-slow) var(--ease-agent); }
.choices__row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  height: 40px; padding-inline: 16px; border-radius: 9999px; background: var(--muted); color: var(--ink);
  font-weight: 500; font-size: 14px; line-height: 20px;
  opacity: 0; transform: translateY(6px); animation: chip-rise 520ms var(--ease-agent) forwards; animation-delay: calc(var(--i) * 60ms);
  transition: background-color var(--d-fast) var(--ease-standard), box-shadow var(--d-fast) var(--ease-standard), color var(--d-fast) var(--ease-standard);
}
@keyframes chip-rise { to { opacity: 1; transform: none; } }
.choice:hover:not(:disabled) { background: var(--secondary-hover); }
.choice[aria-pressed='true'] { background: var(--accent-subtle); color: var(--accent-subtle-fg); box-shadow: 0 0 0 2px var(--accent); }
.choice:disabled { cursor: default; }
.choices.is-done .choice:not([aria-pressed='true']) { opacity: .45; }
.choices__hint { color: var(--muted-fg); font-size: 12px; line-height: 16px; }

.suggestions { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; animation: msg-in var(--d-slow) var(--ease-agent); }
.suggestions .choice { flex: none; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.suggestions .choice:hover:not(:disabled) { background: var(--secondary-hover); box-shadow: inset 0 0 0 1px var(--input); }

/* Recommendation cards (recommend_projects) */
.recos { display: grid; gap: 16px; }
.agent[data-view='expanded'] .recos { grid-template-columns: 1fr 1fr; }
.reco {
  display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--border);
  box-shadow: var(--depth-1); opacity: 0; transform: translateY(14px);
  animation: chip-rise 760ms var(--ease-agent) forwards; animation-delay: calc(var(--i) * 140ms);
  transition: box-shadow var(--d-slow) var(--ease-standard), border-color var(--d-slow) var(--ease-standard);
}
.reco:hover { box-shadow: var(--depth-3); border-color: var(--input); }
.reco__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; }
.reco__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-out); }
.reco:hover .reco__media img { transform: scale(1.04); }
.reco__badge {
  position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding-inline: 8px; border-radius: 4px; background: #fff; color: var(--accent-subtle-fg);
  font-weight: 500; font-size: 12px; line-height: 16px; box-shadow: var(--depth-1);
}
.reco__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.reco__name { font-weight: 500; font-size: 24px; line-height: 32px; cursor: pointer; }
.reco__tagline { margin-top: -8px; color: var(--muted-fg); font-size: 14px; line-height: 20px; }
.reco__why {
  display: flex; gap: 8px; padding: 12px 14px; background: var(--accent-subtle); color: var(--accent-subtle-fg);
  font-size: 14px; line-height: 22px;
}
.reco__why .i { flex: none; margin-top: 3px; }
.reco__facts { display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 500; font-size: 14px; line-height: 20px; }
.reco__facts span { display: inline-flex; align-items: center; gap: 6px; }
.reco__facts .i { color: var(--muted-fg); }
.reco__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } /* side by side, both cards end on one CTA line */
.reco__actions .pill { height: 44px; padding-inline: 18px; }
.pill--ink { background: var(--ink); color: #fff; }
.pill--ink:hover { background: #000; }

/* Compare table */
.compare { display: grid; grid-template-columns: auto 1fr 1fr; border: 1px solid var(--border); font-size: 14px; line-height: 20px; animation: msg-in var(--d-slow) var(--ease-agent); }
.compare > * { padding: 10px 12px; border-top: 1px solid var(--border); }
.compare > :nth-child(-n + 3) { border-top: 0; background: var(--muted); font-weight: 500; }
.compare .k { color: var(--muted-fg); white-space: nowrap; }

/* Thank-you card, once the lead modal is sent */
.agent-thanks { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; background: var(--success-subtle); color: var(--success); animation: msg-in var(--d-slow) var(--ease-agent); }
.agent-thanks p { color: var(--ink); }

/* ───────────── Launcher (collapsed) ───────────── */
.agent__launcher {
  position: fixed; z-index: 95; right: 24px; bottom: 24px;
  /* Logical padding (Ori, 27.10): the avatar sits 8px from the start edge like top and bottom, and the text
     gets air before the rounded end (the physical 8 20 8 8 put the 20 beside the avatar in RTL) */
  display: flex; align-items: center; gap: 14px; padding: 8px; padding-inline-end: 28px; border-radius: 9999px;
  background: var(--glass-regular); border: 1px solid var(--glass-border); box-shadow: var(--fx-glass-regular), var(--depth-3);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.94);
  transition: opacity 320ms var(--ease-standard), transform 560ms var(--ease-agent), visibility 0s linear 560ms, background-color var(--d-base) var(--ease-standard);
}
.agent[data-view='collapsed'] .agent__launcher { opacity: 1; visibility: visible; transform: none; transition-delay: 160ms, 160ms, 0s, 0s; }
.agent__launcher:hover { background: var(--glass-strong); }
.agent__launcher-text { display: flex; flex-direction: column; align-items: flex-start; }
.agent__launcher-text .t-caption { color: var(--muted-fg); }
.agent__unread { position: absolute; top: 6px; inset-inline-end: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform var(--d-slow) var(--ease-agent); }
.agent.has-unread .agent__unread { transform: scale(1); }

/* One composer at a time: the header composer steps aside while the panel is open */
.agent-open .dock__composer { opacity: 0; pointer-events: none; }

/* ───────────── Voice mode ───────────── */
.agent__voice, .agent__call { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 420ms var(--ease-standard), visibility 0s linear 420ms; }
.agent[data-mode='voice'] .agent__voice, .agent[data-mode='video'] .agent__call { opacity: 1; visibility: visible; transition-delay: 0s; }
.agent[data-mode='voice'] .agent__stream, .agent[data-mode='video'] .agent__stream { opacity: 0; pointer-events: none; }
.agent[data-mode='voice'] .agent__composer, .agent[data-mode='video'] .agent__composer,
.agent[data-mode='voice'] .agent__disclaimer, .agent[data-mode='video'] .agent__disclaimer { display: none; }

/* Every block has a fixed height (caption 3 lines, chips 2 rows + hint), so the orb never moves. */
.agent__voice {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px;
  background: radial-gradient(80% 60% at 50% 38%, #fff7f4 0%, #fff 70%);
}
.voice__orb { position: relative; flex: none; width: 168px; height: 168px; display: grid; place-items: center; }
.voice__orb img { position: relative; width: 136px; height: 136px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; box-shadow: 0 0 0 1px var(--accent), var(--depth-3); transform: scale(var(--amp, 1)); transition: transform 120ms linear; }
.voice__ring { position: absolute; inset: 16px; border-radius: 50%; border: 1px solid rgba(237, 16, 0, .45); opacity: 0; }
.agent.is-speaking .voice__ring { animation: ring 2.4s var(--ease-standard) infinite; }
.agent.is-speaking .voice__ring:nth-child(2) { animation-delay: .8s; }
.agent.is-speaking .voice__ring:nth-child(3) { animation-delay: 1.6s; }
@keyframes ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
.voice__state { flex: none; height: 20px; color: var(--accent-strong); }
.voice__wave { flex: none; display: flex; align-items: center; gap: 4px; height: 28px; opacity: 0; transition: opacity var(--d-base) var(--ease-standard); }
.voice__wave span { width: 4px; height: 6px; border-radius: 2px; background: var(--ink); }
.agent.is-listening .voice__wave, .agent.is-user-speaking .voice__wave { opacity: 1; }
.agent.is-listening .voice__wave span { animation: wave-idle 1.6s var(--ease-standard) infinite; animation-delay: calc(var(--n) * 90ms); }
.agent.is-user-speaking .voice__wave span { animation: wave 520ms var(--ease-standard) infinite alternate; animation-delay: calc(var(--n) * -70ms); }
@keyframes wave-idle { 0%, 100% { height: 6px; } 50% { height: 10px; } }
@keyframes wave { from { height: 6px; } to { height: 26px; } }

/* Captions: a fixed window of --cap-lines lines; .cap-roll slides up as the words light (agent.js). */
.cap-roll { position: relative; display: block; transition: transform 360ms var(--ease-agent); }
.cap-roll.is-user { color: var(--muted-fg); }
.voice__caption { --cap-lines: 3; flex: none; width: min(460px, 100%); height: 87px; overflow: hidden; text-align: center; font-size: 20px; line-height: 29px; }
.voice__caption .w { opacity: .28; transition: opacity 260ms var(--ease-standard); }
.voice__caption .w.on { opacity: 1; }

/* Chips: the open question's answers or the latest follow-ups, in a fixed-height band. */
.voice__choices, .call__choices { display: flex; flex-direction: column; align-items: center; gap: 8px; transition: opacity 220ms var(--ease-standard); }
.voice__choices { flex: none; width: 100%; max-width: 560px; height: 112px; }
.voice__choices.is-leaving, .call__choices.is-leaving { opacity: 0; }
.mode-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mode-chips .choice { flex: none; }
.voice__choices .hint, .call__choices .hint { text-align: center; color: var(--muted-fg); font-size: 12px; line-height: 16px; }
.voice__controls, .call__controls { display: flex; gap: 12px; }
.voice__controls { flex: none; margin-top: 8px; }
.call-btn {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--muted); color: var(--ink); transition: background-color var(--d-fast) var(--ease-standard), color var(--d-fast) var(--ease-standard), transform var(--d-slow) var(--ease-agent);
}
.call-btn:hover { background: var(--secondary-hover); }
.call-btn[data-call-mic][aria-pressed='true'], .call-btn[data-call-sound][aria-pressed='false'] { background: var(--ink); color: #fff; }
.call-btn--end { background: #d93025; color: #fff; }
.call-btn--end:hover { background: #b3261e; }
.call-btn--end .i { rotate: 135deg; }

/* ───────────── Video call: dark glass ───────────── */
/* The panel itself turns to smoked glass over the blurred page. */
.agent[data-mode='video'] .agent__panel {
  background: rgba(20, 20, 20, .6); color: #fff;
  -webkit-backdrop-filter: blur(36px) saturate(1.5); backdrop-filter: blur(36px) saturate(1.5);
  box-shadow: var(--depth-4), inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.agent__head { transition: border-color 420ms var(--ease-standard); }
.agent[data-mode='video'] .agent__head { border-bottom-color: rgba(255, 255, 255, .08); }
.agent[data-mode='video'] .agent__tool { color: #fff; }
.agent[data-mode='video'] .agent__tool:hover { background: rgba(255, 255, 255, .1); }

/* Fixed rows: top bar, picture, chip band, controls. Chips coming and going never resize the picture. One column
   that never grows past the panel (v4: an auto column took the picture's width on a phone and ran off its edge). */
.agent__call {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 24px minmax(0, 1fr) 72px 64px; justify-items: center;
  gap: 16px; padding: 20px 24px 24px; color: #fff;
  background: radial-gradient(70% 55% at 50% 42%, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 70%);
}
.call__top { justify-self: stretch; display: flex; align-items: center; justify-content: space-between; }
.call__live { display: inline-flex; align-items: center; gap: 8px; }
.call__dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, .25); animation: dot 1.6s var(--ease-standard) infinite; }
.call__timer { color: rgba(255, 255, 255, .7); }
/* The stage is a size container, so the picture takes the largest 3:4 that fits it both ways (at most 480 x 640),
   centred: in the expanded call, docked on the right, beside a project page, on a phone's sheet, at any height. */
.call__stage {
  position: relative; align-self: stretch; justify-self: stretch; display: grid; place-items: center; min-height: 0; min-width: 0;
  container-type: size; --frame-w: min(100%, 480px);
}
@supports (width: 1cqh) { .call__stage { --frame-w: min(100cqw, 75cqh, 480px); } }
/* Her picture, blurred, as ambient light behind the bezel (the glass picks up its warmth). */
.call__ambient {
  position: absolute; left: 50%; top: 50%; width: var(--frame-w); height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  transform: translate(-50%, -50%) scale(1.3); filter: blur(60px) saturate(1.5); opacity: .5; pointer-events: none;
}
.call__frame {
  position: relative; width: var(--frame-w); aspect-ratio: 3 / 4; border-radius: 34px; container: frame / inline-size;
  background: linear-gradient(160deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .12) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .5), 0 40px 90px -30px rgba(0, 0, 0, .8);
  transition: box-shadow 600ms var(--ease-standard);
}
.agent.is-speaking .call__frame {
  box-shadow: inset 0 0 0 1px rgba(255, 120, 110, .6), inset 0 1px 0 rgba(255, 255, 255, .5), 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 56px -10px rgba(237, 16, 0, .55);
}
.call__media { position: absolute; inset: 10px; overflow: hidden; border-radius: 24px; background: #1b1b1b; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
/* Enso deviation (operator, 2026-11-03): her picture holds still. The vendor's breathing, a 1 % rise from the shoulders
   every 5.2 s on these layers (vendor/agent.vendor.css:300-305), rocked Kaltura's live picture like a boat at sea. */
.call__still, .call__idle, .call__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.call__idle, .call__video { opacity: 0; transition: opacity 420ms var(--ease-standard); }
.call__idle.is-ready, .agent.is-speaking .call__video.is-ready { opacity: 1; }

/* State: the dot alone in a glass bead (the label is for screen readers). Listening: white and
   still; thinking: a slow white pulse; speaking: a red pulse. */
.call__state {
  position: absolute; z-index: 2; top: 22px; inset-inline-start: 22px; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; background: rgba(20, 20, 20, .3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
}
.call__state-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .85); transition: background-color var(--d-base) var(--ease-standard); }
.agent.is-thinking .call__state-dot { animation: state-think 1.4s var(--ease-standard) infinite; }
.agent.is-speaking .call__state-dot { background: var(--accent); animation: dot 1.2s var(--ease-standard) infinite; }
@keyframes state-think { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Caption bubble: glass, fixed size; the paragraph inside is the 2-line window. */
.call__captions {
  position: absolute; z-index: 2; inset: auto 22px 22px; padding: 10px 18px; border-radius: 18px; pointer-events: none;
  background: rgba(16, 16, 16, .36); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-standard), transform 420ms var(--ease-agent);
}
.call__captions.on { opacity: 1; transform: none; }
.call__captions p { --cap-lines: 2; height: 54px; overflow: hidden; text-align: center; font-size: 18px; line-height: 27px; }
.call__captions .w { opacity: .3; transition: opacity 240ms var(--ease-standard); }
.call__captions .w.on { opacity: 1; }
.call__captions .cap-roll.is-user { color: rgba(255, 255, 255, .78); }
/* a small picture (docked on a low screen, a small phone): the bezel, the bead and the captions scale down with it */
@container frame (max-width: 300px) {
  .call__media { inset: 8px; border-radius: 20px; }
  .call__state { top: 16px; inset-inline-start: 16px; width: 26px; height: 26px; }
  .call__captions { inset: auto 14px 14px; padding: 8px 12px; border-radius: 14px; }
  .call__captions p { height: 44px; font-size: 15px; line-height: 22px; }
}

/* One row of glass chips in the wide (expanded) call. */
.call__choices { align-self: stretch; justify-self: stretch; }
.call__choices .mode-chips { flex-wrap: nowrap; }
/* Docked call (beside a project page, Ori 26.10): the narrower panel lets the chips take two rows,
   in a band that is still fixed, so the picture never moves. */
.agent[data-view='docked'] .agent__call { grid-template-rows: 24px minmax(0, 1fr) 112px 64px; padding: 16px 20px 20px; }
/* her name stays whole beside the four tools in the narrower panel beside a project page */
.project-open .agent__head { gap: 10px; padding-inline: 16px; }
.agent[data-view='docked'] .call__choices .mode-chips { flex-wrap: wrap; }
.call__choices .choice {
  background: rgba(255, 255, 255, .1); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
}
.call__choices .choice:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }
.call__choices .choice[aria-pressed='true'] { background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--accent); }
.call__choices .hint { color: rgba(255, 255, 255, .55); }

/* Controls in one glass capsule. */
.call__controls {
  align-self: center; gap: 8px; padding: 6px; border-radius: 9999px; background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .2), 0 16px 40px -16px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
.agent__call .call-btn { width: 52px; height: 52px; background: rgba(255, 255, 255, .1); color: #fff; }
.agent__call .call-btn:hover { background: rgba(255, 255, 255, .2); }
.agent__call .call-btn[data-call-mic][aria-pressed='true'], .agent__call .call-btn[data-call-sound][aria-pressed='false'] { background: #fff; color: var(--ink); }
.agent__call .call-btn--end { background: #d93025; }
.agent__call .call-btn--end:hover { background: #b3261e; }

/* The avatar flying from the header into the call frame */
.agent-morph { position: fixed; z-index: 200; top: 0; left: 0; object-fit: cover; object-position: 50% 22%; pointer-events: none; will-change: transform, border-radius; }

/* ───────────── Agent highlights on the page ("show me on the page") ───────────── */
.pcard.is-agent-pick .pcard__media { box-shadow: 0 16px 48px -12px rgba(237, 16, 0, .35), 0 0 0 8px rgba(237, 16, 0, .14), 0 0 0 2px var(--accent); }
.pcard__pick {
  position: absolute; bottom: 12px; left: 50%; z-index: 4; pointer-events: none; translate: -50% 0; display: none; align-items: center; gap: 4px; /* at the foot: the tags and the status hold the top (v2) */
  height: 26px; padding-inline: 10px; border-radius: 9999px; background: var(--accent-strong); color: #fff; font-weight: 500; font-size: 12px; line-height: 16px;
}
.pcard.is-agent-pick .pcard__pick { display: inline-flex; animation: pick-pulse 1.2s var(--ease-standard) 2; }
@keyframes pick-pulse { 50% { box-shadow: 0 0 0 8px rgba(237, 16, 0, .2); } }
.chip--agent .i { display: block; }

@media (prefers-reduced-motion: reduce) {
  .agent__panel, .agent__launcher { transform: none !important; transition-duration: 1ms !important; }
  .reco, .choice, .msg-user, .msg-agent, .msg-note, .choices { transform: none !important; animation: none !important; opacity: 1 !important; }
  .call__still, .call__idle, .call__video { animation: none; }
}