:root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #080b15; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: radial-gradient(ellipse at 50% 46%, #151c35 0%, #0b1020 37%, #080b15 75%); }
main { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem 1.25rem 6.5rem; }
.brand { margin: 0 0 1.6rem; color: #7d8bb0; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.orb-wrap { width: min(52vw, 230px); aspect-ratio: 1; position: relative; display: grid; place-items: center; }
.orb-wrap { border: 0; padding: 0; background: transparent; cursor: pointer; }
.orb-wrap:focus-visible { outline: 2px solid #b7caff; outline-offset: 18px; border-radius: 50%; }
.orb-wrap:disabled { cursor: progress; }
.orb-wrap[data-state="working"] .orb { filter: hue-rotate(40deg); animation: breathe 2.6s ease-in-out infinite; }
.orb-wrap[data-state="listening"] .orb { box-shadow: 0 0 75px #647de64d; }
.orb-wrap[data-state="offline"] .orb { filter: grayscale(.55) brightness(.8); }
p { max-width: 560px; white-space: pre-line; line-height: 1.6; margin: 2rem 0 0; text-align: center; color: #c8d2e9; }
#status { margin-top: 1.8rem; font-size: clamp(.95rem, 2.5vw, 1.05rem); letter-spacing: .01em; }
.controls { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-top: 1.1rem; }
.control { display: inline-flex; align-items: center; gap: .4rem; background: #101a2e; color: #c8d2e9; border: 1px solid #22304d;
  border-radius: 999px; padding: .5rem .95rem; font: inherit; font-size: .88rem; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; }
.control:hover:not(:disabled) { background: #17233b; border-color: #33456b; }
.control:disabled { opacity: .45; cursor: default; }
.control[aria-pressed="true"] { background: #3a2233; border-color: #6b3a52; color: #ffd9e6; }
#chat { width: min(92vw, 640px); max-height: 36vh; overflow-y: auto; margin-top: 1.6rem; display: flex; flex-direction: column; gap: .6rem; }
#chat:empty { display: none; }
.msg { max-width: 88%; padding: .65rem .85rem; border-radius: 14px; font-size: .92rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.you { align-self: flex-end; background: #23315a; color: #e8eeff; border-bottom-right-radius: 4px; }
.msg.agent { align-self: flex-start; background: #111a2e; color: #cfd9ee; border: 1px solid #1e2a44; border-bottom-left-radius: 4px; }
.msg a { color: #9ec3ff; }
.composer { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.2rem; width: min(92vw, 640px); display: flex; gap: .5rem;
  background: #0d1526cc; backdrop-filter: blur(8px); border: 1px solid #22304d; border-radius: 14px; padding: .5rem; }
.composer input { flex: 1; background: transparent; border: 0; color: #e8eeff; padding: .55rem .7rem; font: inherit; outline: none; }
.composer button { background: #5b78e6; color: #fff; border: 0; border-radius: 9px; padding: .55rem .95rem; font: inherit; cursor: pointer; }
.composer button:disabled { opacity: .5; cursor: progress; }
.toggle { position: fixed; right: 1.1rem; bottom: 1.2rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #22304d;
  background: #101a2e; color: #b9c8e6; font-size: 1.05rem; cursor: pointer; }
.toggle[aria-expanded="true"] { background: #22304d; color: #fff; }
#site { margin: .9rem 0 0; font-size: .9rem; color: #9ec3ff; white-space: normal; }
#site a { color: #b7caff; }
.orb-halo { position: absolute; inset: -24%; border-radius: 50%; background: radial-gradient(circle, rgba(87, 122, 250, .24), rgba(77, 89, 191, .06) 48%, transparent 70%); filter: blur(18px); }
.orb { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 50%; box-shadow: 0 0 55px rgba(91, 118, 255, .16), inset -22px -26px 45px rgba(6, 12, 51, .7), inset 3px 3px 16px rgba(202, 222, 255, .3); background: radial-gradient(ellipse at 32% 25%, #f4f9ff 0%, #b7caff 8%, #728ff2 24%, #6862d0 48%, #334581 75%, #182146 100%); }
.orb::before, .orb::after { content: ''; position: absolute; inset: -35%; border-radius: 42%; opacity: .46; filter: blur(14px); background: conic-gradient(from 60deg, transparent, #91d7fd, #ad84e9, transparent, #7c9aff, transparent); animation: drift 24s linear infinite; }
.orb::after { inset: -52%; opacity: .24; animation-duration: 33s; animation-direction: reverse; }
.orb-light { position: absolute; inset: 4%; border-radius: 50%; z-index: 1; background: radial-gradient(ellipse at 35% 22%, rgba(255,255,255,.55), transparent 37%); }
@keyframes drift { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) { .orb::before, .orb::after { animation: none; } .orb { animation: none !important; } }