@props([
    /** Classes on the inner content wrapper (below glass overlays). */
    'innerClass' => 'relative z-10 flex h-full min-h-0 flex-col',
    /** Delay in seconds for widget enter animation parity with React. */
    'delay' => 0,
])

<section {{ $attributes->class([
    'widget-surface relative h-full min-h-0 overflow-hidden rounded-[16px] border border-white/50 p-3.5 sm:p-4',
    'shadow-[0_10px_30px_rgba(15,23,42,0.07)]',
])->merge([
    'style' => sprintf(
        'animation-delay:%ss;animation-duration:420ms;animation-timing-function:cubic-bezier(0.16,1,0.3,1);',
        is_numeric($delay) ? number_format((float) $delay, 2, '.', '') : '0.00'
    ),
]) }}>
    <div class="pointer-events-none absolute inset-x-5 top-0 h-px bg-white/80"></div>
    <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.9),transparent_30%),radial-gradient(circle_at_bottom_left,rgba(16,185,129,0.08),transparent_28%)]"></div>
    <div class="{{ $innerClass }}">
        {{ $slot }}
    </div>
</section>