@media (min-width: 760px) {
  .orbit-scene {
    --orbit-size: min(68vw, calc(100dvh - 190px), 620px);
  }

  .bottom-sheet {
    bottom: 28px;
  }
}

@media (max-width: 380px) {
  .orbit-scene {
    --orbit-size: min(90vw, calc(100dvh - 176px));
    --peer-avatar: clamp(30px, 8.8vw, 34px);
  }

  .identity-cluster {
    transform: scale(.92);
  }

  .action-dock {
    gap: 10px;
    padding: 9px;
  }

  .dock-button {
    width: 50px;
    height: 50px;
    border-radius: 18px;
  }

  .dock-control {
    width: 50px;
    height: 50px;
  }

  .nearby-fab {
    right: 14px;
    bottom: calc(16px + var(--safe-bottom));
    width: 50px;
    height: 50px;
    border-radius: 18px;
  }

  .dock-haptic-switch {
    clip-path: inset(0 round 18px);
  }

  .nearby-device-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .nearby-device-avatar {
    width: 44px;
    height: 44px;
  }

  .nearby-connect {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .peer-node,
  .orbit-ring,
  .avatar-frame,
  .avatar--self::before,
  .peer-overlap::before,
  .identity-cluster,
  .connection-tray,
  .chat-row {
    animation: none !important;
  }

  .bottom-sheet {
    transform: none;
    transition: opacity 80ms linear;
  }

  .bottom-sheet.is-open {
    transform: none;
    transition: opacity 80ms linear;
  }

  .sheet-backdrop {
    transition-duration: 80ms;
  }

  button:active {
    transform: none;
    background-color: color-mix(in srgb, var(--blue) 10%, transparent);
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }
}