@font-face { font-family: "Roboto"; src: url("./assets/Roboto-Light.ttf") format("truetype"); font-style: normal; font-weight: 300; font-display: swap; }
.agent-root {
  color-scheme: dark;
  font-family: "Roboto", "Segoe UI", sans-serif;
  font-weight: 300;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --blue: #2c3d6a;
  --vsi-panel-width: 292px;
  --vsi-strip-height: 36px;
}
.agent-root, .agent-root * { box-sizing: border-box; }
.agent-root button { color: inherit; font: inherit; }
.agent-root { --orb-size: 66px; position: fixed; z-index: 20; right: max(var(--vs-agent-right, 10px), calc(env(safe-area-inset-right) + 8px)); bottom: max(var(--vs-agent-bottom, 10px), calc(env(safe-area-inset-bottom) + 8px)); width: min(308px, calc(100vw - 28px)); height: var(--orb-size); display: flex; justify-content: flex-end; align-items: center; pointer-events: none; }
.agent-root[hidden] { display: none; }
.agent-root > * { pointer-events: auto; }
.agent-orb-button { width: var(--orb-size); height: var(--orb-size); flex: 0 0 var(--orb-size); padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; z-index: 2; isolation: isolate; transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.agent-orb-button::before { content: ""; position: absolute; inset: 8%; z-index: -1; border: 1px solid rgba(191,205,239,.42); border-radius: 50%; background: radial-gradient(ellipse at 44% 47%, rgba(250,251,255,.8), rgba(171,190,232,.45) 9%, rgba(76,99,150,.22) 28%, transparent 50%), radial-gradient(ellipse at 28% 22%, rgba(255,255,255,.38), transparent 15%), radial-gradient(ellipse at 67% 72%, rgba(44,61,106,.22), rgba(22,28,42,.35) 66%, rgba(8,10,15,.45)); box-shadow: inset 0 1px 3px rgba(255,255,255,.25), inset -5px -6px 18px rgba(2,4,9,.22), 0 0 22px rgba(44,61,106,.22); }
.agent-orb-button[data-renderer="webgpu"]::before, .agent-orb-button[data-renderer="webgl2"]::before { display: none; }
.agent-orb-button:hover { transform: scale(1.035); filter: brightness(1.065); }
.agent-orb-button:active { transform: scale(1.035); }
.agent-orb-button:focus { outline: none; }
.agent-orb-button:focus-visible .orb-canvas { filter: brightness(1.18) drop-shadow(0 5px 13px rgba(44,61,106,.15)); }
.agent-orb-button:focus-visible::before { filter: brightness(1.18); }
.orb-canvas { display: block; width: 100%; height: 100%; position: relative; filter: drop-shadow(0 5px 13px rgba(44,61,106,.15)); }
.agent-orb-button[data-orb-mechanics="fluid"], .agent-root.is-open .agent-orb-button[data-orb-mechanics="fluid"] { transform: none; filter: none; animation: none; transition: none; }
.agent-orb-button[data-orb-mechanics="fluid"]::before { transform: var(--orb-fallback-shape, scale(1)); opacity: var(--orb-appearance-opacity, 1); transition: none; }
.orb-backdrop { position: absolute; inset: 8.25%; z-index: -1; border-radius: 50%; pointer-events: none; opacity: var(--orb-appearance-opacity, 1); backdrop-filter: blur(1px) saturate(110%); }
.orb-backdrop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at 36% 27%, rgba(24,40,69,.14), rgba(10,23,43,.38) 63%, rgba(7,18,37,.28));
  opacity: var(--orb-hue-opacity, 0); transition: opacity .62s cubic-bezier(.22,1,.36,1);
}
@supports (backdrop-filter: url(#lens)) { .orb-backdrop.has-refraction { backdrop-filter: var(--glass-lens) blur(.3px) saturate(110%); } }
.agent-root .glass-surface {
  position: absolute;
  right: 8px; bottom: calc(100% + 10px);
  width: 280px; height: 248px;
  pointer-events: none;
  opacity: 1; visibility: visible;
  transition: opacity .48s ease, visibility 0s;
}
.agent-root .glass-surface[data-introduction-dismissed="true"][data-open="false"] { opacity: 0; visibility: hidden; transition: opacity .48s ease, visibility 0s .48s; }
.agent-root .glass-surface[data-introduction-ready="false"][data-open="false"] { opacity: 0; visibility: hidden; transition: none; }
.glass-shadow { position: absolute; inset: 0; border-radius: 32px; background: rgba(0,0,0,.12); filter: blur(11px); transform-origin: right bottom; pointer-events: none; will-change: transform, opacity; }
.glass-material { position: absolute; inset: 0; overflow: hidden; pointer-events: none; will-change: clip-path;
  background: linear-gradient(152deg, rgba(255,255,255,.065), rgba(255,255,255,.022) 45%, rgba(44,61,106,.045) 100%), rgba(12,15,22,var(--surface-hue-alpha, 0));
  transition: background-color .62s cubic-bezier(.22,1,.36,1);
  backdrop-filter: blur(1.25px) saturate(106%); -webkit-backdrop-filter: blur(1.25px) saturate(106%);
}
.glass-gloss { position: absolute; inset: 0; background-size: 100% 100%; pointer-events: none; }
.glass-gloss svg { display: block; overflow: visible; }
.glass-material::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(ellipse 210px 120px at var(--glass-light-x, 15%) var(--glass-light-y, -18%), rgba(245,248,255,.020), transparent 82%), radial-gradient(ellipse 110px 190px at 109% 77%, rgba(44,61,106,.055), transparent 80%);
  background-size: 100% 100%; pointer-events: none;
}
@supports (backdrop-filter: url(#lens)) { .glass-material.has-refraction { backdrop-filter: var(--glass-lens) blur(.65px) saturate(106%); -webkit-backdrop-filter: var(--glass-lens) blur(.65px) saturate(106%); } }
.surface-introduction { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; padding: 4px 12px; overflow: hidden; white-space: nowrap; color: var(--surface-text-color, #f3f4f8); font-size: 13px; line-height: 20px; word-spacing: .04em; pointer-events: none; will-change: opacity; }
.surface-introduction-line { display: block; flex: 0 0 auto; width: max-content; white-space: nowrap; }
.surface-introduction-line .response-word { max-width: none; overflow-wrap: normal; }
.agent-root .surface-introduction-measure { position: absolute; visibility: hidden !important; opacity: 0 !important; pointer-events: none; }
.agent-root .surface-introduction-measure * { visibility: hidden !important; animation: none !important; }
/* Only the material paints a panel. Text and sizing containers stay clear. */
.agent-root :is(.surface-introduction, .surface-introduction-line, .conversation-layout, .panel-content, .response-word) { background: transparent; border: 0; box-shadow: none; }
.conversation-layout { position: absolute; right: 0; bottom: 0; display: grid; grid-template-rows: minmax(0, 1fr) 1px 52px; border-radius: 30px; overflow: hidden; color: var(--surface-text-color, #f3f4f8); pointer-events: auto; will-change: opacity, clip-path; }
.conversation-layout[inert] { pointer-events: none; }
.agent-root .panel-content { min-height: 0; padding: 20px 22px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.24) transparent; color: inherit; font-size: 13.5px; font-weight: 300; line-height: 1.5; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
.conversation-divider { margin: 0 22px; background: currentColor; opacity: calc(var(--divider-reveal, 1) * .16); }
.conversation-entry { position: relative; margin: 0; padding: 0 22px; display: flex; align-items: center; }
.conversation-input { min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; outline: none; box-shadow: none; color: inherit; font: 300 14px/1.4 "Roboto", "Segoe UI", sans-serif; text-align: left; caret-color: transparent; border-radius: 0; }
.conversation-input:focus, .conversation-input:focus-visible { outline: none; box-shadow: none; caret-color: currentColor; }
.conversation-input::placeholder { color: inherit; opacity: .54; }
.conversation-layout:has(.conversation-input:focus-visible) .conversation-divider { opacity: .28; }
.response-word { display: inline-block; max-width: 100%; overflow-wrap: anywhere; color: transparent; animation: response-reveal .74s cubic-bezier(.25,.10,.25,1) both; }
.response-word-visible { color: inherit; animation: none; }
.response-word-reduced { animation: response-reveal-reduced .12s ease-out both; }
/* Fade the glyphs, rather than separate word layers above the backdrop lens. */
@keyframes response-reveal { from { color: transparent; } to { color: var(--surface-text-color, #f3f4f8); } }
@keyframes response-reveal-reduced { from { color: transparent; } to { color: var(--surface-text-color, #f3f4f8); } }
.glass-filter-definitions { position: fixed; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.agent-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 700px) {
  .agent-root { --orb-size: 60px; --vsi-panel-width: 272px; --vsi-strip-height: 40px; width: min(288px, calc(100vw - 28px)); right: max(var(--vs-agent-right, 8px), calc(env(safe-area-inset-right) + 8px)); bottom: max(var(--vs-agent-bottom, 8px), calc(env(safe-area-inset-bottom) + 8px)); }
  .surface-introduction { font-size: 12px; }
  .conversation-input { font-size: 16px; width: calc(100% / .875); flex: 0 0 calc(100% / .875); transform: scale(.875); transform-origin: left center; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-root, .agent-root *, .agent-root *::before, .agent-root *::after { scroll-behavior: auto !important; transition-duration: .12s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}