/* One bottom-center iris gathers journey, voice and personal controls. */
#narration-controls {
  position: fixed;
  left: 50%;
  right: auto;
  top: auto;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: auto;
  transform: translateX(-50%);
  z-index: 60;
  padding: 0;
  border: 0;
  background: transparent;
}
#portal-toggle {
  appearance: none;
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--es-line);
  border-radius: 65% 35% 65% 35% / 50%;
  background: color-mix(in srgb, var(--es-ground) 85%, transparent);
  color: var(--es-ink);
  cursor: pointer;
  backdrop-filter: blur(0.8rem);
  transition:
    border-color 180ms,
    border-radius 420ms;
}
#portal-toggle svg {
  width: 2.2rem;
  height: 1.9rem;
  overflow: visible;
  transform-origin: center;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
#portal-toggle:hover,
#portal-toggle[aria-expanded="true"] {
  border-color: var(--es-pore);
  border-radius: 50%;
}
#portal-toggle[aria-expanded="true"] svg {
  transform: rotate(70deg) scale(1.1);
}
#portal-toggle:focus-visible,
#portal-menu :is(button, a, input):focus-visible {
  outline: 1px solid var(--es-pore);
  outline-offset: 0.3rem;
}
#portal-toggle:disabled {
  cursor: default;
  opacity: 0.45;
}
#portal-menu[hidden] {
  display: none !important;
}
#portal-menu {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.7rem);
  display: flex;
  align-items: center;
  border: 1px solid var(--es-line);
  background: color-mix(in srgb, var(--es-ground) 94%, transparent);
  color: var(--es-ink);
  backdrop-filter: blur(1.1rem);
  transform: translateX(-50%);
  transform-origin: bottom center;
  animation: portal-aperture 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
#portal-menu .portal-group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  width: 100%;
  padding: 0.4rem 0;
  background: transparent;
  border: 0;
}
#portal-menu #senses,
#portal-menu .scene-controls,
#portal-menu .journey-controls {
  position: static;
  inset: auto;
  transform: none;
  width: auto;
  max-width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}
#portal-menu button,
#portal-menu a {
  cursor: pointer;
  min-height: 2.6rem;
}
#portal-menu .portal-group--interface :is(button, a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--es-line);
  border-radius: 65% 35% 65% 35% / 55%;
  background: transparent;
  color: var(--es-ink);
  font: inherit;
  font-size: var(--es-text-small);
  text-decoration: none;
}
#portal-menu .portal-group--interface :is(button, a):hover {
  border-color: var(--es-pore);
}
#portal-menu :is(button, a):disabled {
  cursor: default;
  opacity: 0.45;
}
#portal-menu .voice-control {
  margin: 0;
}
@keyframes portal-aperture {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
@media (max-width: 600px) {
  #portal-menu {
    width: calc(100vw - 1.25rem);
    padding: 0.9rem 0.8rem;
  }
  #portal-menu .portal-group {
    gap: 0.5rem;
  }
  #portal-menu .portal-group--interface :is(button, a) {
    font-size: var(--es-text-small);
  }
  #portal-menu #senses {
    flex-direction: row;
  }
}
@media (prefers-reduced-motion: reduce) {
  #portal-menu,
  #portal-toggle,
  #portal-toggle svg {
    animation: none;
    transition: none;
  }
  #portal-toggle[aria-expanded="true"] svg {
    transform: none;
  }
}
/* Compact rail: controls expand in one local anchored panel. */
#portal-menu {
  width: min(42rem, calc(100vw - 1.25rem));
  max-height: 6rem;
  padding: 0.5rem 0.75rem;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.5rem;
  border-radius: 2rem;
  overflow: visible;
}
#portal-menu .portal-panel {
  position: relative;
  flex: 1;
  min-width: 0;
}
#portal-menu .portal-panel > summary {
  list-style: none;
  cursor: pointer;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--es-text-small) var(--es-font-data);
  border-radius: 2rem;
  padding: 0.5rem;
}
#portal-menu .portal-panel > summary::-webkit-details-marker {
  display: none;
}
#portal-menu .portal-panel[open] > summary {
  color: var(--es-pore);
}
#portal-menu .portal-panel-content {
  position: absolute;
  bottom: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(24rem, calc(100vw - 2rem));
  max-height: 11.25rem;
  overflow: auto;
  padding: 0.75rem;
  border: 1px solid var(--es-line);
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--es-ground) 96%, transparent);
  backdrop-filter: blur(1rem);
}
#portal-menu .portal-panel:first-child .portal-panel-content {
  left: 0;
  transform: none;
}
#portal-menu .portal-panel:last-child .portal-panel-content {
  left: auto;
  right: 0;
  transform: none;
}
#portal-menu .portal-panel-content .portal-group {
  gap: 0.4rem;
  padding: 0.2rem 0;
}
@media (max-width: 600px) {
  #portal-menu {
    max-height: 7.5rem;
    padding: 0.45rem;
    overflow: visible;
  }
  #portal-menu .portal-panel > summary {
    font-size: var(--es-text-small);
  }
  #portal-menu .portal-panel-content {
    width: min(20rem, calc(100vw - 2rem));
  }
}

#portal-menu
  :is(button, a, label, summary, .es-choice-trigger, .es-choice-option) {
  font-size: var(--es-text-small);
  line-height: 1.45;
}
#portal-menu .portal-panel > summary {
  overflow-wrap: anywhere;
}
#portal-menu .portal-panel-content {
  max-height: min(22rem, calc(100svh - 10rem));
}
#portal-menu .voice-control {
  flex-wrap: wrap;
}