#agent-assistant-root {
  --agent-accent: var(--ui-brand);
  --agent-soft: var(--ui-brand-soft);
  --agent-paper: var(--ui-surface);
  --agent-ink: var(--ui-text);
  --agent-line: var(--ui-border);
  position: absolute;
  right: 12px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  font-family: inherit;
}
@media (min-width: 831px) {
  body:has(.desktop-layout.app-focus) .phone-shell:not(:has(> .bottom-nav)) > #agent-assistant-root {
    right: 12px;
    bottom: 28px;
  }
}
body:has(.ob-screen) #agent-assistant-root,
.phone-shell:has(> .viewport :is([role="dialog"],[role="alertdialog"])[aria-modal="true"]) > #agent-assistant-root,
.phone-shell:has(.dx-voice-call, .dx-voice-permission, .dx-conversation-panel) > #agent-assistant-root { display: none; }
.agent-assistant-trigger {
  display: grid;
  place-items: center;
  width: max-content;
  min-width: 56px;
  min-height: 48px;
  border: 0;
  border-radius: var(--ui-radius-control);
  padding: 0 var(--ui-space-2);
  color: #fff;
  background: var(--agent-accent);
  box-shadow: var(--ui-shadow);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
#agent-assistant-root[data-disposition="restricted"] .agent-assistant-trigger { background: var(--ui-brand-soft); color: var(--ui-brand); }
.agent-assistant-card {
  position: absolute;
  right: 0;
  bottom: 60px;
  width: min(360px, calc(100vw - 60px));
  max-height: min(620px, calc(100dvh - 150px));
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid var(--agent-line);
  border-radius: 22px;
  background: var(--agent-paper);
  color: var(--agent-ink);
  box-shadow: 0 18px 48px rgb(36 24 58 / 24%);
}
.agent-assistant-card h2 { margin: 4px 34px 8px 0; font-size: 20px; }
.agent-assistant-card p { line-height: 1.55; }
.agent-assistant-eyebrow { margin: 0; color: var(--agent-accent); font-size: 14px; font-weight: 700; }
.agent-assistant-close { position: absolute; top: 12px; right: 14px; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--agent-ink); font-size: 28px; cursor: pointer; }
.agent-assistant-form { display: grid; gap: 9px; margin-top: 16px; }
.agent-assistant-form label { font-size: 14px; font-weight: 700; }
.agent-assistant-form textarea { resize: vertical; min-height: 88px; padding: 12px; border: 1px solid var(--agent-line); border-radius: 13px; background: var(--agent-paper); color: inherit; font: inherit; font-size: max(16px, 1em); }
.agent-assistant-form select { width: 100%; min-height: 48px; padding: 9px 12px; border: 1px solid var(--agent-line); border-radius: 13px; background: var(--agent-paper); color: inherit; font: inherit; font-size: max(16px, 1em); }
.agent-assistant-submit { min-height: 48px; border: 0; border-radius: 13px; padding: 11px 14px; background: var(--agent-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.agent-assistant-submit:disabled { opacity: .62; cursor: wait; }
.agent-assistant-result { margin-top: 14px; padding: 13px; border-radius: 14px; background: var(--agent-soft); overflow-wrap: anywhere; }
.agent-assistant-result p { margin: 6px 0; }
.agent-assistant-evidence { margin: 12px 0; padding: 10px 12px; border-left: 3px solid var(--agent-accent); border-radius: 8px; background: var(--agent-paper); overflow-wrap: anywhere; }
.agent-assistant-evidence strong { font-size: 14px; }
.agent-assistant-evidence-link { border: 0; min-height: 44px; padding: 4px 0; background: transparent; color: var(--agent-accent); text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; }
.agent-assistant-versions { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--agent-line); font-size: 14px; overflow-wrap: anywhere; }
.agent-assistant-versions p { margin: 3px 0; }
.agent-assistant-result small, .agent-assistant-boundary { color: var(--muted, #625b71); font-size: 14px; }
.agent-assistant-review-actions { display: grid; gap: 8px; margin-top: 14px; }
.agent-assistant-review-actions label { font-size: 14px; font-weight: 700; }
.agent-assistant-review-actions input { min-height: 48px; box-sizing: border-box; width: 100%; padding: 9px 12px; border: 1px solid var(--agent-line); border-radius: 11px; background: var(--agent-paper); color: var(--agent-ink); font: inherit; font-size: max(16px, 1em); }
.agent-assistant-review-actions button { min-height: 48px; border: 1px solid var(--agent-accent); border-radius: 11px; background: var(--agent-paper); color: var(--agent-accent); font: inherit; font-weight: 700; cursor: pointer; }
.agent-assistant-review-actions button:first-of-type, .agent-assistant-review-actions button:nth-of-type(2) { background: var(--agent-accent); color: #fff; }
.agent-assistant-review-actions button:disabled { opacity: .6; cursor: wait; }
.agent-assistant-success { color: #256029; }
.agent-assistant-error { color: #a13b32; }
.agent-assistant-safety-support { margin-top: 12px; padding: 13px; border: 2px solid #a13b32; border-radius: 14px; background: #fff4f2; }
.agent-assistant-safety-support p { margin: 7px 0; }
.agent-assistant-safety-resources { display: grid; gap: 8px; margin: 10px 0; }
.agent-assistant-safety-resources a { display: block; min-height: 44px; padding: 10px 12px; border-radius: 11px; background: #fff; color: #7a271f; font-weight: 700; text-decoration: none; }
.agent-assistant-trigger:focus-visible, .agent-assistant-close:focus-visible, .agent-assistant-submit:focus-visible, .agent-assistant-evidence-link:focus-visible, .agent-assistant-form select:focus-visible, .agent-assistant-form textarea:focus-visible, .agent-assistant-review-actions input:focus-visible, .agent-assistant-review-actions button:focus-visible, .agent-assistant-safety-resources a:focus-visible { outline: 3px solid var(--agent-accent); outline-offset: 3px; }
@media (max-width: 480px) {
  .agent-assistant-card { max-height: min(560px, calc(100dvh - 160px)); padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .agent-assistant-trigger, .agent-assistant-card { scroll-behavior: auto; } }

/* Keep the assistant reachable above the Talk composer and its voice controls. */
.phone-shell:has([data-page-id="VOICE-CONVERSATION"]) > #agent-assistant-root {
  top: 12px;
  bottom: auto;
  right: 12px;
}
@media (min-width: 831px) {
  body:has(.desktop-layout.app-focus) .phone-shell:has([data-page-id="VOICE-CONVERSATION"]) > #agent-assistant-root {
    bottom: auto;
  }
}
.phone-shell:has(> #agent-assistant-root) [data-page-id="VOICE-CONVERSATION"] .dx-conversation-header {
  padding-inline-end: 68px;
}
.phone-shell:has([data-page-id="VOICE-CONVERSATION"]) > #agent-assistant-root .agent-assistant-trigger {
  width: max-content;
  min-width: 48px;
  min-height: 44px;
}
.phone-shell:has([data-page-id="VOICE-CONVERSATION"]) > #agent-assistant-root .agent-assistant-card {
  top: 52px;
  bottom: auto;
  right: 0;
  left: auto;
  max-height: min(560px, calc(100dvh - 100px));
}

/* Reserve space beneath the scroll viewport for the report and recording instructions. */
#app .phone-shell:has(> .viewport :is(.wr-screen, .mj-page-074, .resource-screen[data-page-id="RES-006"])) > #agent-assistant-root {
  position: relative;
  inset: auto;
  flex: none;
  align-self: flex-end;
  margin: 8px 12px max(8px, env(safe-area-inset-bottom));
}

/* Latin names need more room than 圆圆, above both the composer and wrapped tabs. */
:is(html:lang(en), html:lang(es)) .phone-shell:has(> #agent-assistant-root) [data-page-id="VOICE-CONVERSATION"] .dx-conversation-header {
  padding-inline-end: calc(6rem + var(--ui-space-3) + var(--ui-space-4));
}
:is(html:lang(en), html:lang(es)) .phone-shell:has(> .bottom-nav):not(:has([data-page-id="VOICE-CONVERSATION"])) > #agent-assistant-root {
  bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
}