@property --ring-diameter {
  syntax: "<length>";
  inherits: false;
  initial-value: 1.5px;
}
.menu-orbit {
  padding: 0;
  border-radius: 50%;
  min-width: 29px;
  cursor: pointer;
}
.menu-orbit:hover {
  background: rgb(var(--accent) / 0.12);
  filter: drop-shadow(0 0 7px rgb(var(--accent) / 0.5));
}
/* The button owns a stable hit area; moving rings never intercept pointer events. */
#assistant-open i,
#assistant-open:after {
  pointer-events: none;
}
/* A tighter resting capsule; expanded navigation keeps its full width. */
body:not(.menu-open) .menu-shell {
  width: 184px;
}
body:not(.menu-open) .menu-bar {
  gap: 8px;
  padding-left: 14px;
  padding-right: 10px;
}
body:not(.menu-open) .menu-wordmark {
  display: none;
}
body:not(.menu-open) .menu-bar #menu-toggle {
  min-width: 106px;
  gap: 16px;
}
@media (max-width: 700px) {
  body:not(.menu-open) .menu-shell {
    width: 155px;
  }
  body:not(.menu-open) .menu-bar {
    padding-left: 12px;
    padding-right: 8px;
    gap: 4px;
  }
  body:not(.menu-open) .menu-bar #menu-toggle {
    min-width: 94px;
    gap: 12px;
  }
}
/* Larger menu capsule with the same compact proportions. */
body:not(.menu-open) .menu-shell {
  width: 196px;
  height: 64px;
  border-radius: 34px;
}
body:not(.menu-open) .menu-bar {
  height: 63px;
  padding-left: 18px;
  padding-right: 14px;
  gap: 10px;
}
body:not(.menu-open) #assistant-open,
body:not(.menu-open) .assistant-slot {
  width: 37px;
  height: 37px;
  min-width: 37px;
}
body:not(.menu-open) .menu-bar #menu-toggle {
  min-width: 106px;
  font-size: 15px;
  gap: 14px;
  padding: 12px 8px;
  justify-content: center;
}
body:not(.menu-open) .menu-symbol {
  width: 21px;
  height: 21px;
}
body:not(.menu-open) .menu-symbol i {
  width: 19px;
  top: 7px;
}
body:not(.menu-open) .menu-symbol i + i {
  width: 15px;
  top: 14px;
}
@media (max-width: 700px) {
  body:not(.menu-open) .menu-shell {
    width: 200px;
    height: 60px;
  }
  body:not(.menu-open) .menu-bar {
    height: 59px;
    padding-left: 15px;
    padding-right: 11px;
    gap: 8px;
  }
  body:not(.menu-open) #assistant-open,
  body:not(.menu-open) .assistant-slot {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }
  body:not(.menu-open) .menu-bar #menu-toggle {
    min-width: 117px;
    font-size: 14px;
    gap: 16px;
  }
}
/* Narrower ellipses make the interwoven gaps legible at menu size. */
#assistant-open i {
  inset: 20% 0;
  border-width: 1.5px;
}

/* Move the original menu element above the capsule's clipping surface. */
.menu-shell {
  --assistant-menu-width: 196px;
  --assistant-slot-size: 37px;
  --assistant-slot-gap: 10px;
}
.menu-shell.music-playing {
  --assistant-menu-width: 248px;
  --assistant-slot-gap: 12px;
}
.assistant-slot {
  visibility: hidden;
  pointer-events: none;
  margin-right: 0;
  transition: margin-right 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
body:not(.menu-open) .menu-shell.orb-away,
body:not(.menu-open) .menu-shell.music-playing.orb-away {
  width: calc(
    var(--assistant-menu-width) - var(--assistant-slot-size) -
      var(--assistant-slot-gap)
  );
}
body:not(.menu-open) .orb-away .assistant-slot {
  margin-right: calc(
    0px - var(--assistant-slot-size) - var(--assistant-slot-gap)
  );
}
/* Flex preserves the music layout while letting the first slot release its space. */
body:not(.menu-open) .menu-shell.music-playing .menu-bar {
  display: flex;
  gap: var(--assistant-slot-gap);
}
body:not(.menu-open) .menu-shell.music-playing .menu-bar .menu-audio-stop {
  flex: 0 0 36px;
}
body:not(.menu-open) .menu-shell.music-playing .menu-bar #menu-toggle {
  flex: 1;
  width: auto;
  padding: 12px 10px;
  justify-content: space-between;
  gap: 12px;
}
.menu-bar .menu-symbol {
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .menu-shell {
    --assistant-menu-width: 200px;
    --assistant-slot-size: 34px;
    --assistant-slot-gap: 8px;
  }
  .menu-shell.music-playing {
    --assistant-menu-width: 238px;
    --assistant-slot-gap: 10px;
  }
}
#assistant-open.orb-travelling {
  position: fixed;
  z-index: 1000;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  background: transparent;
  transition: none;
  filter: drop-shadow(0 0 12px rgb(var(--accent) / 0.25));
}
#assistant-open.orb-moving {
  will-change: transform;
}
#assistant-open.orb-travelling {
  outline: none;
}
#assistant-open.orb-travelling:focus-visible {
  filter: drop-shadow(0 0 15px rgb(var(--accent) / 0.45));
}
#assistant-open.orb-travelling i {
  transition: none;
}

/* Align the three-ring silhouette on its vertical symmetry axis. */
.menu-orbit {
  transform: rotate(-30deg);
}
.menu-open .menu-orbit {
  transform: rotate(150deg);
}

/* The real page is sampled directly by one small compositor surface. */
.orb-filter-defs {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
}
#assistant-open.orb-travelling {
  filter: none;
  isolation: auto;
  contain: layout style;
}
#assistant-open.orb-travelling::before,
#assistant-open.orb-travelling::after {
  display: none;
}
.orb-glass-surface,
.orb-glass-coat {
  display: none;
  position: absolute;
  inset: -5%;
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(30deg);
}
.orb-glass-surface {
  z-index: 0;
}
#assistant-open.orb-travelling .orb-glass-surface {
  display: block;
  opacity: var(--orb-glass, 0);
  filter: blur(0.28px);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  background: radial-gradient(
    circle,
    transparent 18%,
    #0a142008 48%,
    #0a142015 76%,
    #040a1728 100%
  );
  box-shadow:
    inset 1px 1.5px 1px #efffff14,
    inset -1px -1.5px 2px #b9dce812,
    inset 5px 5px 12px #f0faff12,
    inset -3px -5px 10px #0209102a,
    0 12px 30px #0002;
}
.orb-glass-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 1px 0 1px #ff86910a,
    inset -1px 0 1px #66bfff0e,
    inset 0 -1px 1px #90ffe808;
  background: radial-gradient(ellipse at 20% 25%, #e7f7ff15, transparent 35%);
}
/* The polished surface and reflections sit behind the original, glowing rings. */
#assistant-open.orb-travelling .orb-glass-coat {
  display: block;
  z-index: 2;
  overflow: hidden;
  opacity: var(--orb-glass, 0);
  background: url("./media/glass/lens-reflection.png?v=crystal-7") center/100%
    100% no-repeat;
  box-shadow:
    inset 0 1px 1px #efffff10,
    inset 0 -1.5px 1px #d5efff14,
    inset -2px -5px 8px #659eff22;
}
.orb-glass-coat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 42% 17% at 38% 91%, #e9faff38, transparent 76%),
    radial-gradient(ellipse 9% 38% at 7% 48%, #e9faff60, transparent 76%);
  box-shadow:
    inset 1.5px -0.5px 1px #ec92960c,
    inset -1.5px 0.5px 1px #71b7ff12;
}
#assistant-open.orb-travelling i {
  --ring-glow: var(--accent);
  z-index: 3;
  filter: none;
  border-color: rgb(var(--accent) / calc(0.75 + var(--orb-glass, 0) * 0.18));
  box-shadow:
    0 0 calc(8px + var(--orb-glass, 0) * 5px)
      rgb(var(--ring-glow) / calc(0.2 + var(--orb-glass, 0) * 0.28)),
    0 0 calc(var(--orb-glass, 0) * 24px)
      rgb(var(--ring-glow) / calc(var(--orb-glass, 0) * 0.2));
  mask-image: none;
}
#assistant-open.orb-travelling i:nth-child(2) {
  --ring-glow: var(--secondary);
  border-color: rgb(var(--secondary) / calc(0.75 + var(--orb-glass, 0) * 0.15));
}
#assistant-open.orb-travelling i:nth-child(3) {
  --ring-glow: var(--text);
  border-color: rgb(var(--text) / calc(0.65 + var(--orb-glass, 0) * 0.27));
}
#assistant-open.orb-travelling:focus-visible {
  filter: none;
}

/* Floating conversation; the original orb remains a separate travelling element. */
.assistant-composer {
  --composer-width: min(560px, calc(100vw - 48px));
  --input-glass-blur: 1.5px;
  --input-glass-tint: 0.16;
  --assistant-history-height: 0px;
  position: fixed;
  z-index: 1001;
  left: 50%;
  top: var(--assistant-top, 58vh);
  width: var(--composer-width);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
  transition:
    top 0.54s cubic-bezier(0.25, 0.75, 0.25, 1),
    visibility 0s 0.4s;
  color: #edfaff;
  font-family: "DM Sans", sans-serif;
}
.assistant-composer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.assistant-composer.is-closing {
  transition: visibility 0s 0.18s;
}
.assistant-input-row {
  order: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 48px;
  gap: 10px;
  align-items: center;
  margin: 0;
}
.assistant-pill-frame {
  min-width: 0;
  --pill-width: 444px;
}
.assistant-pill {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 32px;
  opacity: 0;
  transform: translateY(-8px);
  clip-path: inset(0 calc(50% - 24px) round 32px);
  /* Filter the clipped element itself: a filtered child cannot sample past
     its parent's clip-path backdrop root. */
  -webkit-backdrop-filter: var(--pill-glass-filter)
    blur(var(--input-glass-blur));
  backdrop-filter: var(--pill-glass-filter) blur(var(--input-glass-blur));
  background: transparent;
  box-shadow: 0 8px 28px #0003;
  transition:
    clip-path 0.3s cubic-bezier(0.4, 0, 0.6, 1),
    opacity 0.25s,
    transform 0.3s,
    box-shadow 0.25s;
}
.assistant-composer.is-open .assistant-pill {
  clip-path: inset(0 0 round 32px);
  opacity: 1;
  transform: translateY(0);
  transition:
    clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.44s,
    opacity 0.25s 0.44s,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.44s,
    box-shadow 0.25s;
}
.assistant-pill:focus-within {
  box-shadow:
    0 0 24px rgb(var(--accent) / 0.09),
    0 8px 28px #0003;
}
.assistant-pill-glass {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--pill-width);
  transform: translateX(-50%);
  border-radius: 32px;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgb(7 14 23 / calc(var(--input-glass-tint) * 0.8)),
      transparent 38%,
      #a8dfff08 86%,
      #d6f7ff13
    ),
    rgb(9 24 35 / var(--input-glass-tint));
  box-shadow:
    inset 8px 0 13px #bbf1ff16,
    inset -7px 0 12px #afceff16,
    inset 0 -5px 9px #daf7ff12;
}
.assistant-pill-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 14px 25px at 15px 50%, #e8faff36, transparent 85%),
    radial-gradient(
      ellipse 16px 26px at calc(100% - 15px) 50%,
      #a4dfff24,
      transparent 85%
    ),
    radial-gradient(ellipse 45% 9px at 45% 94%, #d9f8ff1c, transparent 90%);
}
.assistant-pill-content {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 50%;
  width: var(--pill-width);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 19px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.12s;
}
.assistant-composer.is-open .assistant-pill-content {
  opacity: 1;
  transition: opacity 0.3s 0.68s;
}
.assistant-input-light {
  flex: 0 0 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(var(--accent) / 0.8);
  box-shadow: 0 0 10px rgb(var(--accent) / 0.5);
}
#assistant-message {
  flex: 1;
  min-width: 0;
  width: 0;
  height: 34px;
  border: 0;
  padding: 0;
  outline: none;
  background: transparent;
  color: #effbff;
  font:
    400 16px/1.4 "DM Sans",
    sans-serif;
  letter-spacing: 0.01em;
  caret-color: rgb(var(--accent));
  text-shadow: 0 1px 5px #000b;
}
#assistant-message::placeholder {
  color: #f7fcff;
  opacity: 1;
  font-size: var(--input-placeholder-size, 12px);
  letter-spacing: 0.16em;
}
.assistant-action-orb {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #efffff;
  box-shadow: 0 8px 22px #0002;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.7);
  transition:
    opacity 0.2s,
    transform 0.35s,
    box-shadow 0.25s;
}
.assistant-action-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  -webkit-backdrop-filter: var(--mini-glass-filter, blur(0.6px))
    blur(var(--input-glass-blur));
  backdrop-filter: var(--mini-glass-filter, blur(0.6px))
    blur(var(--input-glass-blur));
  background:
    radial-gradient(circle at 36% 25%, #ddf8ff16, transparent 60%),
    rgb(6 18 28 / var(--input-glass-tint));
  box-shadow:
    inset 3px 0 7px #c4efff18,
    inset -2px -3px 6px #bfdfff18;
}
.assistant-action-orb svg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 3px #0009);
  transition:
    opacity 0.2s,
    transform 0.25s;
}
.assistant-composer.is-open .assistant-action-orb {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.3s 0.76s,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.76s,
    box-shadow 0.25s;
}
.assistant-composer.is-open .assistant-voice {
  transition-delay: 0.84s, 0.84s, 0s;
}
.assistant-action-orb:disabled {
  cursor: default;
}
.assistant-action-orb:disabled svg {
  opacity: 0.3;
}
.assistant-action-orb:not(:disabled):hover {
  box-shadow:
    0 0 24px rgb(var(--accent) / 0.18),
    0 8px 22px #0002;
}
.assistant-action-orb:not(:disabled):hover svg {
  transform: translateY(-1px);
}
.assistant-action-orb:not(:disabled):active svg {
  transform: scale(0.85);
}
.assistant-action-orb:focus-visible,
.assistant-replay:focus-visible {
  outline: 2px solid rgb(var(--accent) / 0.65);
  outline-offset: 3px;
}
.assistant-conversation-space {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 0;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: var(--assistant-history-height);
  transition: height 0.54s cubic-bezier(0.25, 0.75, 0.25, 1);
}
.assistant-thread {
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  scrollbar-color: rgb(var(--accent) / 0.26) transparent;
  outline: none;
  padding: 4px 8px 8px;
  width: min(100%, 520px);
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 0.25s;
  scroll-behavior: smooth;
}
.assistant-thread[hidden] {
  display: none;
}
.assistant-thread.is-scrollable {
  scrollbar-width: thin;
}
.assistant-thread:not(.is-scrollable)::-webkit-scrollbar {
  display: none;
}
.assistant-composer.is-open .assistant-thread {
  opacity: 1;
}
.assistant-thread:focus-visible {
  box-shadow: inset 2px 0 rgb(var(--accent) / 0.3);
  border-radius: 8px;
}
.assistant-messages {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.assistant-message-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.assistant-message-row.from-user {
  align-items: flex-end;
}
.assistant-message-author {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.assistant-bubble {
  position: relative;
  box-sizing: border-box;
  max-width: min(252px, 78%);
  padding: 11px 22px;
  /* Cap each corner so multiline messages keep a full-width text area. */
  border-radius: 22px;
  background:
    linear-gradient(155deg, #e1faff12, transparent 48%, #bfeaff0d), #08141eb3;
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  box-shadow:
    inset 0 1px 0 #e2faff0a,
    0 5px 14px #0002;
  transform-origin: bottom left;
}
.from-user .assistant-bubble {
  transform-origin: bottom right;
  background:
    linear-gradient(155deg, rgb(var(--accent) / 0.16), transparent 65%),
    #0b2531ab;
}
.assistant-bubble p {
  position: relative;
  max-width: 28ch;
  margin: 0;
  font:
    400 14px/1.45 "DM Sans",
    sans-serif;
  color: #effaff;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  text-shadow: 0 1px 3px #0006;
}
.assistant-bubble p span {
  display: inline-block;
  white-space: pre-wrap;
}
.assistant-motion-studio {
  position: absolute;
  right: calc(50% - 50vw + 24px);
  top: calc(50svh - var(--assistant-top, 58vh));
  width: 272px;
  max-width: calc(100vw - 32px);
  max-height: calc(100svh - 160px);
  margin: 0;
  overflow-y: auto;
  transform: translateY(-50%);
  border: 1px solid #c5e8f51c;
  border-radius: 18px;
  background: #0b141beb;
  box-shadow: 0 16px 48px #0003;
  opacity: 0;
  transition: opacity 0.2s;
}
.assistant-motion-studio:not([open]) {
  width: max-content;
}
.assistant-composer.is-open .assistant-motion-studio {
  opacity: 1;
  transition: opacity 0.35s 0.94s;
}
.assistant-settings-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 16px 18px;
  list-style: none;
  cursor: pointer;
  color: #d9eff3;
  font:
    500 10px "DM Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.assistant-settings-toggle::-webkit-details-marker {
  display: none;
}
.assistant-settings-toggle svg {
  transition: transform 0.2s;
  opacity: 0.65;
}
.assistant-motion-studio[open] .assistant-settings-toggle svg {
  transform: rotate(180deg);
}
.assistant-settings-toggle:focus-visible {
  outline: 1px solid #bde3ea80;
  outline-offset: -5px;
  border-radius: 15px;
}
.assistant-settings-content {
  padding: 2px 18px 18px;
}
.assistant-motion-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 12px;
  align-items: end;
}
.assistant-motion-controls label:first-child {
  grid-column: 1/-1;
}
.assistant-motion-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #c9e8ef8a;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-shadow: 0 1px 4px #000b;
}
.assistant-motion-controls select {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #d6f4ff1c;
  border-radius: 0;
  padding: 5px 22px 7px 0;
  background: transparent;
  color: #e4f5f7b8;
  font:
    400 12px "DM Sans",
    sans-serif;
  outline: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23b1d8e0' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  text-shadow: 0 1px 4px #000b;
}
.assistant-motion-controls select:focus-visible {
  border-color: rgb(var(--accent) / 0.7);
}
.assistant-motion-controls option {
  background: #101e26;
  color: #eafaff;
}
.assistant-replay {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #bdefff0a;
  color: #bde3eabf;
  cursor: pointer;
}
.assistant-replay:hover {
  background: #bdefff18;
  color: #efffff;
}
.assistant-motion-tuning {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 20px;
}
.assistant-glass-tuning {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}
.assistant-motion-tuning.assistant-text-tuning {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 10px;
}
.assistant-motion-tuning label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 5px;
}
.assistant-motion-tuning label > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #c9e8ef9c;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 4px #000b;
}
.assistant-motion-tuning output {
  color: #e4f5f7ce;
  font-size: 10px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.assistant-motion-tuning input {
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.assistant-motion-tuning input::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: #bde3ea38;
}
.assistant-motion-tuning input::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: #bde3ea38;
}
.assistant-motion-tuning input::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: #d4f6f5;
  box-shadow: 0 0 9px #a4efdd45;
}
.assistant-motion-tuning input::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: #d4f6f5;
  box-shadow: 0 0 9px #a4efdd45;
}
.assistant-motion-tuning input:focus-visible {
  outline: 1px solid #bde3ea80;
  outline-offset: 2px;
  border-radius: 6px;
}
.assistant-preview-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: #c4e2ea68;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 4px #000b;
}
.assistant-clear {
  padding: 0;
  min-width: 0;
  border: 0;
  background: none;
  color: #d7eff5ad;
  font: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.assistant-clear[hidden] {
  display: none;
}
.assistant-clear:hover {
  color: #fff;
}
.assistant-message-status {
  order: 3;
  margin: 10px auto 0;
  padding: 7px 12px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  background: #071118cc;
  color: #d8e9ec;
  font:
    400 12px/1.5 "DM Sans",
    sans-serif;
  text-align: center;
}
.assistant-message-status:empty {
  display: none;
}
.assistant-composer:not(.is-open) .assistant-message-status {
  opacity: 0;
  transition: opacity 0.15s;
}
/* Fade the live glass in place on dismissal; no expensive closing clip sweep. */
.assistant-composer.is-closing .assistant-pill {
  clip-path: inset(0 0 round 32px);
  transform: none;
  transition: opacity 0.16s;
}
.assistant-composer.is-closing .assistant-action-orb {
  transform: none;
  transition: opacity 0.16s;
}
.assistant-composer.is-closing .assistant-thread,
.assistant-composer.is-closing .assistant-motion-studio {
  transition: opacity 0.16s;
}
#assistant-open.is-thinking {
  cursor: pointer;
}
.orb-tube-canvas {
  display: none;
  position: absolute;
  z-index: 3;
  left: -24px;
  top: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  pointer-events: none;
}
#assistant-open.orb-tubes-ready.orb-travelling > .orb-tube-canvas {
  display: block;
}
#assistant-open.orb-tubes-ready.orb-travelling > i {
  visibility: hidden;
}

/* Focus view uses one page backdrop instead of individual glass surfaces. */
.assistant-focus-backdrop,
.assistant-focus-panel {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0s 0.3s;
}
.assistant-focus-backdrop {
  z-index: 998;
  inset: 0;
  background: rgb(3 8 13 / 0.32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.assistant-focus-panel {
  z-index: 999;
  left: 50%;
  width: min(608px, calc(100vw - 24px));
  transform: translateX(-50%);
  border: 1px solid #e9faff12;
  border-radius: 28px;
  background: rgb(12 21 29 / 0.38);
  box-shadow: 0 20px 60px #0002;
  transition:
    top 0.54s cubic-bezier(0.25, 0.75, 0.25, 1),
    height 0.54s cubic-bezier(0.25, 0.75, 0.25, 1),
    opacity 0.3s,
    visibility 0s 0.3s;
}
.assistant-simple-open .assistant-focus-backdrop,
.assistant-simple-open .assistant-focus-panel {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.assistant-view-toggle {
  position: absolute;
  left: 50%;
  top: var(--assistant-eye-y, -186px);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  min-width: 0;
  border: 1px solid #e2faff20;
  border-radius: 50%;
  background: #142029a6;
  color: #deeff2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    top 0.54s cubic-bezier(0.25, 0.75, 0.25, 1),
    opacity 0.18s,
    background 0.2s,
    visibility 0s 0.18s;
}
.assistant-composer.is-open .assistant-view-toggle {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    top 0.54s cubic-bezier(0.25, 0.75, 0.25, 1),
    opacity 0.25s 0.7s,
    background 0.2s,
    visibility 0s;
}
.assistant-view-toggle:hover {
  background: #2d454ee6;
  color: #fff;
}
.assistant-view-toggle[aria-pressed="true"] {
  background: #263a43;
  border-color: #d9faff45;
  color: #fff;
}
.assistant-view-toggle:focus-visible {
  outline: 2px solid #d6f4ff;
  outline-offset: 3px;
}
.assistant-eye-slash {
  opacity: 0;
  transition: opacity 0.2s;
}
[aria-pressed="true"] .assistant-eye-slash {
  opacity: 1;
}
.assistant-simple #assistant-open.orb-travelling .orb-glass-surface,
.assistant-simple #assistant-open.orb-travelling .orb-glass-coat,
.assistant-simple .assistant-pill-glass,
.assistant-simple .assistant-action-orb::before {
  display: none;
}
.assistant-simple #assistant-open.orb-travelling,
.assistant-simple #assistant-open.orb-travelling i {
  filter: none !important;
  box-shadow: none !important;
}
.assistant-simple .assistant-pill,
.assistant-simple .assistant-bubble {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: none !important;
  box-shadow: none;
}
.assistant-simple .assistant-pill {
  background: #172630;
}
.assistant-simple .assistant-action-orb {
  background: #213540;
  box-shadow: none;
}
.assistant-simple .assistant-action-orb:not(:disabled):hover {
  background: #2c4653;
  box-shadow: none;
}
.assistant-simple .assistant-action-orb svg {
  filter: none;
}
.assistant-simple .assistant-bubble {
  background: #182630;
}
.assistant-simple .from-user .assistant-bubble {
  background: #293e4a;
}
.assistant-simple .assistant-bubble p,
.assistant-simple .assistant-bubble p span {
  filter: none !important;
  text-shadow: none;
}
.assistant-simple #assistant-message {
  text-shadow: none;
}
.assistant-simple .assistant-input-light {
  box-shadow: none;
}
.assistant-simple .assistant-motion-studio {
  display: none;
}

@media (max-width: 1199px) {
  .assistant-motion-studio {
    right: calc(50% - 50vw + 16px);
    top: calc(112px - var(--assistant-top, 58vh));
    max-height: calc(100svh - 136px);
    transform: none;
  }
}
@media (max-width: 600px) {
  .assistant-motion-studio:not([open]) .assistant-settings-toggle {
    padding: 12px 14px;
    gap: 12px;
  }
  .assistant-composer {
    --composer-width: calc(100vw - 48px);
  }
  .assistant-input-row {
    grid-template-columns: minmax(0, 1fr) 48px 48px;
    gap: 8px;
  }
  .assistant-action-orb {
    width: 48px;
    height: 48px;
  }
  .assistant-pill-content {
    padding: 6px 15px;
    gap: 8px;
  }
  #assistant-message::placeholder {
    letter-spacing: 0.1em;
  }
  .assistant-bubble {
    max-width: min(252px, 82%);
    padding: 11px 22px;
  }
  .assistant-motion-controls {
    gap: 12px;
  }
  .assistant-motion-tuning {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
    padding-right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-focus-backdrop,
  .assistant-focus-panel,
  .assistant-view-toggle,
  .assistant-composer.is-open .assistant-view-toggle,
  .assistant-eye-slash {
    transition: none;
  }
  .assistant-composer,
  .assistant-pill,
  .assistant-composer.is-open .assistant-pill,
  .assistant-pill-content,
  .assistant-composer.is-open .assistant-pill-content,
  .assistant-action-orb,
  .assistant-composer.is-open .assistant-action-orb,
  .assistant-motion-studio,
  .assistant-composer.is-open .assistant-motion-studio,
  .assistant-thread,
  .assistant-conversation-space {
    transition: none;
    scroll-behavior: auto;
  }
}

/* Text chat controls remain separate from the hidden design settings. */
.assistant-chat-toolbar {
  order: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 10px auto 0;
  max-width: 100%;
  color: #c7d9ddb3;
  font:
    400 11px/1.5 "DM Sans",
    sans-serif;
  flex-wrap: wrap;
}
.assistant-chat-toolbar[hidden],
.assistant-chat-toolbar button[hidden] {
  display: none;
}
.assistant-chat-toolbar button {
  border: 0;
  background: #101d24b8;
  border-radius: 20px;
  padding: 7px 12px;
  color: #ecf7fa;
  font: inherit;
  cursor: pointer;
  min-height: 32px;
}
.assistant-chat-toolbar button:disabled {
  opacity: 0.45;
  cursor: default;
}
.assistant-chat-toolbar button:focus-visible {
  outline: 2px solid #bceff2;
  outline-offset: 3px;
}
.assistant-chat-toolbar > span {
  max-width: 100%;
  text-shadow: 0 1px 6px #000;
}
.assistant-chat-toolbar a {
  color: inherit;
  text-underline-offset: 3px;
}
.assistant-composer:not(.is-open) .assistant-chat-toolbar {
  visibility: hidden;
}