Flutter iOS 27 Siri AI Panel with Dynamic Island Glow

WDiv(
  className: '''
    relative w-[420px] h-[600px] overflow-hidden rounded-[44px]
    bg-gradient-to-b from-neutral-900 via-neutral-950 to-black
    dark:from-neutral-950 dark:via-black dark:to-black
  ''',
  children: [
    WDiv(
      className: 'absolute -top-12 left-8 w-52 h-52 rounded-full bg-purple-500/30 dark:bg-purple-500/25',
    ),
    WDiv(
      className: 'absolute top-28 -right-12 w-56 h-56 rounded-full bg-pink-500/25 dark:bg-pink-500/20',
    ),
    WDiv(
      className: 'absolute bottom-28 -left-16 w-60 h-60 rounded-full bg-indigo-500/30 dark:bg-indigo-500/25',
    ),
    WDiv(
      className: 'absolute -bottom-10 right-6 w-52 h-52 rounded-full bg-orange-500/20 dark:bg-orange-500/15',
    ),
    WDiv(
      className: 'absolute inset-0 flex flex-col justify-between p-6',
      children: [
        WDiv(
          className: 'w-full flex flex-row items-center justify-center',
          children: [
            WDiv(
              className: '''
                flex flex-row items-center gap-3 rounded-full px-5 py-3
                border border-white/10 dark:border-white/10
                bg-black/50 dark:bg-black/60
              ''',
              children: [
                WDiv(
                  className: '''
                    w-6 h-6 rounded-full
                    bg-gradient-to-br from-purple-400 via-pink-400 to-orange-400
                    dark:from-purple-400 dark:via-pink-400 dark:to-orange-400
                  ''',
                ),
                WText(
                  'Siri is listening',
                  className: 'text-sm font-medium text-white/80 dark:text-white/80',
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'w-full flex flex-col gap-5',
          children: [
            WDiv(
              className: '''
                self-end max-w-[280px] rounded-3xl px-5 py-3
                border border-white/10 dark:border-white/10
                bg-white/12 dark:bg-white/10
              ''',
              child: WText(
                'What should I wear this weekend?',
                className: 'text-sm font-medium text-white dark:text-white',
              ),
            ),
            WDiv(
              className: 'w-full flex flex-col gap-2',
              children: [
                WText(
                  'SIRI',
                  className: 'text-xs font-bold uppercase tracking-widest text-purple-300 dark:text-purple-300',
                ),
                WText(
                  'This weekend stays clear and mild near 22 degrees. Light layers and your sunglasses should be perfect for the coast.',
                  className: 'text-lg font-medium text-white/90 dark:text-white/90 leading-relaxed',
                ),
              ],
            ),
            WDiv(
              className: '''
                w-full flex flex-row items-center gap-4 rounded-2xl p-4
                border border-white/12 dark:border-white/10
                bg-white/8 dark:bg-white/5
              ''',
              children: [
                WDiv(
                  className: '''
                    w-12 h-12 rounded-2xl
                    bg-gradient-to-br from-amber-300 to-orange-500
                    dark:from-amber-400 dark:to-orange-600
                  ''',
                ),
                WText(
                  'Saturday  -  Sunny, 22 degrees',
                  className: 'text-sm font-semibold text-white dark:text-white',
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: '''
            w-full flex flex-row items-center gap-3 rounded-full px-5 py-4
            border border-white/15 dark:border-white/12
            bg-white/10 dark:bg-white/8
          ''',
          children: [
            WDiv(
              className: '''
                w-7 h-7 rounded-full
                bg-gradient-to-br from-purple-400 via-pink-400 to-orange-400
                dark:from-purple-400 dark:via-pink-400 dark:to-orange-400
              ''',
            ),
            WText(
              'Ask anything',
              className: 'flex-1 text-sm font-medium text-white/50 dark:text-white/50',
            ),
            WDiv(
              className: '''
                w-9 h-9 rounded-full
                bg-white/15 dark:bg-white/12
                flex flex-row items-center justify-center
              ''',
              child: WIcon(
                Icons.arrow_forward,
                className: 'text-lg text-white dark:text-white',
              ),
            ),
          ],
        ),
      ],
    ),
  ],
)