<!DOCTYPE html>
<html lang="en" class="h-full meet-room-page">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $room->title }} · Ladill Meet</title>
    @include('partials.favicon')
    <style>
        [x-cloak] { display: none !important; }
        .meet-toolbar__track:not(.is-ready) [data-toolbar-conditional],
        .meet-toolbar__track:not(.is-ready) [data-alpine-toolbar] { display: none !important; }
    </style>
    @vite(['resources/css/app.css', 'resources/js/meet-room.js'])
</head>
<body class="h-full overflow-hidden bg-slate-950 font-sans text-white" x-data="meetRoom()" x-init="init()">
    @php
        use App\Models\User;
        use App\Services\Meet\ParticipantPresenter;

        $joined = $session->participants->whereIn('status', ['joined', 'waiting']);
        $participantAvatars = ParticipantPresenter::avatarMap($joined, $room->host_user_ref);
        $joinedParticipants = $joined
            ->map(fn ($p) => ParticipantPresenter::toArray($p, $participantAvatars, $room->host_user_ref))
            ->values();
        $roomHostUser = User::query()->where('public_id', $room->host_user_ref)->first();
        $roomHost = [
            'user_ref' => $room->host_user_ref,
            'display_name' => $roomHostUser?->name ?? 'Host',
            'avatar_url' => $roomHostUser?->avatarUrl(),
        ];
        $isConferenceSession = $isConference ?? false;
        $sessionNoun = match (true) {
            $isConferenceSession => 'conference',
            ($isSpace ?? false) => 'room',
            $room->isWebinar() => 'webinar',
            default => 'meeting',
        };
        $sessionNounTitle = ucfirst($sessionNoun);
        $presenterRefsList = (array) ($presenterRefs ?? []);
        $headerHostPerson = ParticipantPresenter::headerHost($joinedParticipants->all(), $roomHost);
        $headerParticipantCount = ParticipantPresenter::headerCountNumber(
            $joinedParticipants->all(),
            (bool) ($usesStageLayout ?? false),
            $presenterRefsList,
        );
        $headerParticipantSuffix = ParticipantPresenter::headerCountSuffix(
            $joinedParticipants->all(),
            (bool) ($usesStageLayout ?? false),
            $presenterRefsList,
        );
        $headerWaitingCount = $joinedParticipants->where('status', 'waiting')->count();
        $stageLayoutName = ($stageConfig['stage_layout'] ?? 'plenary') === 'panel' ? 'Panel discussion' : 'Plenary';
        $initialConferenceStatus = match (true) {
            ($inBreakout ?? false) => 'Breakout · meeting mode',
            ($isGreenRoom ?? false) && ($usesStageLayout ?? false) => "Green room · {$stageLayoutName}",
            ($isGreenRoom ?? false) => 'Green room',
            ! ($usesStageLayout ?? false) => 'Conference live',
            ($stageConfig['stage_layout'] ?? 'plenary') === 'panel' => 'Panel discussion live',
            default => 'Plenary live',
        };
        $initialConferenceStatusClass = match (true) {
            ($inBreakout ?? false) => 'text-amber-400/90',
            ($isGreenRoom ?? false) => 'text-violet-400/90',
            ($stageConfig['stage_layout'] ?? 'plenary') === 'panel' => 'text-violet-400/90',
            default => 'text-sky-400/90',
        };
    @endphp
    <div id="meet-config"
         data-token="{{ $mediaToken }}"
         data-url="{{ $mediaUrl }}"
         data-configured="{{ $mediaConfigured ? '1' : '0' }}"
         data-participant="{{ $participant->uuid }}"
         data-display-name="{{ $participant->display_name }}"
         data-is-host="{{ ($canManageConference ?? $participant->isHost()) ? '1' : '0' }}"
         data-poll-url="{{ route('meet.room.poll', $session) }}"
         data-ended-url="{{ route('meet.ended', $session) }}"
         data-chat-url="{{ route('meet.room.chat', $session) }}"
         data-reaction-url="{{ route('meet.room.reaction', $session) }}"
         data-raise-hand-url="{{ route('meet.room.raise-hand', $session) }}"
         data-speak-request-url="{{ ($usesSpeakAccess ?? false) ? route('meet.room.speak.request', $session) : '' }}"
         data-speak-cancel-url="{{ ($usesSpeakAccess ?? false) ? route('meet.room.speak.cancel', $session) : '' }}"
         data-speak-grant-url="{{ ($canManageSpeakAccess ?? false) ? route('meet.room.speak.grant', [$session, '__UUID__']) : '' }}"
         data-speak-revoke-url="{{ ($canManageSpeakAccess ?? false) ? route('meet.room.speak.revoke', [$session, '__UUID__']) : '' }}"
         data-speak-dismiss-url="{{ ($canManageSpeakAccess ?? false) ? route('meet.room.speak.dismiss', [$session, '__UUID__']) : '' }}"
         data-space-promote-url="{{ ($isSpace ?? false) && ($participant->isHost() || ($canManageConference ?? false)) ? route('meet.room.space.promote', [$session, '__UUID__']) : '' }}"
         data-space-demote-url="{{ ($isSpace ?? false) && ($participant->isHost() || ($canManageConference ?? false)) ? route('meet.room.space.demote', [$session, '__UUID__']) : '' }}"
         data-space-speak-accept-url="{{ ($isSpace ?? false) ? route('meet.room.space.speak.accept', $session) : '' }}"
         data-space-speak-decline-url="{{ ($isSpace ?? false) ? route('meet.room.space.speak.decline', $session) : '' }}"
         data-space-speak-dismiss-url="{{ ($isSpace ?? false) && ($participant->isHost() || ($canManageConference ?? false)) ? route('meet.room.space.speak.dismiss', [$session, '__UUID__']) : '' }}"
         data-space-co-host-url="{{ ($isSpace ?? false) && ($participant->isHost() || ($canManageConference ?? false)) ? route('meet.room.space.co-host', [$session, '__UUID__']) : '' }}"
         data-uses-speak-access="{{ ($usesSpeakAccess ?? false) ? '1' : '0' }}"
         data-can-manage-speak="{{ ($canManageSpeakAccess ?? false) ? '1' : '0' }}"
         data-leave-url="{{ route('meet.room.leave', $session) }}"
         data-end-url="{{ route('meet.room.end', $session) }}"
         data-recording-start-url="{{ route('meet.room.recording.start', $session) }}"
         data-recording-stop-url="{{ route('meet.room.recording.stop', $session) }}"
         data-lock-url="{{ ($isSpace ?? false) ? '' : route('meet.room.lock', $session) }}"
         data-unlock-url="{{ ($isSpace ?? false) ? '' : route('meet.room.unlock', $session) }}"
         data-caption-url="{{ route('meet.room.caption', $session) }}"
         data-live-captions="{{ $room->setting('live_captions') ? '1' : '0' }}"
         data-mute-on-join="{{ $room->setting('mute_on_join', true) ? '1' : '0' }}"
         data-video-off-on-join="{{ ($isAudioOnly ?? false) || $room->setting('video_off_on_join', false) ? '1' : '0' }}"
         data-audio-only="{{ ($isAudioOnly ?? false) ? '1' : '0' }}"
         data-is-space="{{ ($isSpace ?? false) ? '1' : '0' }}"
         data-watermark="{{ $watermark ? '1' : '0' }}"
         data-locked="{{ $session->is_locked ? '1' : '0' }}"
         data-recording-active="{{ $activeRecording ? '1' : '0' }}"
         data-active-recording-uuid="{{ $activeRecording?->uuid ?? '' }}"
         data-is-webinar="{{ ($isWebinar ?? false) ? '1' : '0' }}"
         data-is-conference="{{ ($isConference ?? false) ? '1' : '0' }}"
         data-session-noun="{{ $sessionNoun }}"
         data-is-green-room="{{ ($isGreenRoom ?? false) ? '1' : '0' }}"
         data-session-mode="{{ $session->session_mode }}"
         data-go-live-url="{{ ($isConference ?? false) && ($isGreenRoom ?? false) && ($canManageConference ?? $participant->isHost()) ? route('meet.room.townhall.live', $session) : '' }}"
         data-add-presenter-url="{{ ($isConference ?? false) && ($canManageConference ?? $participant->isHost()) ? route('meet.room.townhall.presenters', $session) : '' }}"
         data-stage-update-url="{{ ($usesStageLayout ?? false) && ($canManageConference ?? $participant->isHost()) ? route('meet.room.stage.update', $session) : '' }}"
         data-uses-stage-layout="{{ ($usesStageLayout ?? false) ? '1' : '0' }}"
         data-panel-discussions="{{ ($stageConfig['panel_discussions'] ?? false) ? '1' : '0' }}"
         data-stage-layout="{{ $stageConfig['stage_layout'] ?? 'plenary' }}"
         data-panels='@json($stageConfig['panels'] ?? [])'
         data-active-panel-id="{{ $stageConfig['active_panel_id'] ?? '' }}"
         data-spotlight-speaker-ref="{{ $stageConfig['spotlight_speaker_ref'] ?? '' }}"
         data-presenter-refs='@json($presenterRefs ?? [])'
         data-can-publish="{{ ($canPublish ?? true) ? '1' : '0' }}"
         data-audio-only-publish="{{ ($audioOnlyPublish ?? false) ? '1' : '0' }}"
         data-speak-granted="{{ ($speakGranted ?? false) ? '1' : '0' }}"
         data-speak-requested="{{ ($speakRequested ?? false) ? '1' : '0' }}"
         data-in-breakout="{{ ($inBreakout ?? false) ? '1' : '0' }}"
         data-qa-url="{{ ($isSpace ?? false) ? '' : route('meet.room.qa.submit', $session) }}"
         data-polls-create-url="{{ ($isSpace ?? false) ? '' : route('meet.room.polls.create', $session) }}"
         data-breakouts-create-url="{{ ($isSpace ?? false) ? '' : route('meet.room.breakouts.create', $session) }}"
         data-breakouts-close-url="{{ ($isSpace ?? false) ? '' : route('meet.room.breakouts.close', $session) }}"
         data-breakouts-return-url="{{ ($isSpace ?? false) ? '' : route('meet.room.breakouts.return', $session) }}"
         data-breakouts-broadcast-url="{{ ($isSpace ?? false) ? '' : route('meet.room.breakouts.broadcast', $session) }}"
         data-media-token-url="{{ route('meet.room.media-token', $session) }}"
         data-files-upload-url="{{ ($isSpace ?? false) ? '' : route('meet.room.files.upload', $session) }}"
         data-whiteboard-url="{{ ($isSpace ?? false) ? '' : route('meet.room.whiteboard.show', $session) }}"
         data-whiteboard-save-url="{{ ($isSpace ?? false) ? '' : route('meet.room.whiteboard.save', $session) }}"
         data-join-url="{{ $room->joinUrl() }}"
         data-room-title="{{ $room->title }}"
         data-passcode="{{ $room->passcode ?? '' }}"
         @php $applauseAudioVer = @filemtime(public_path('audios/clapping.wav')) ?: null; @endphp
         data-applause-audio="{{ $applauseAudioVer ? asset('audios/clapping.wav') . '?v=' . $applauseAudioVer : '' }}"
         data-csrf="{{ csrf_token() }}"
         data-session-uuid="{{ $session->uuid }}"
         data-initial-participants='@json($joinedParticipants)'
         data-room-host='@json($roomHost)'
         hidden></div>

    @if (! $mediaConfigured)
        <div class="absolute inset-x-0 top-0 z-50 bg-amber-500 px-4 py-2 text-center text-sm font-medium text-amber-950">
            LiveKit is not configured. Set LIVEKIT_URL, LIVEKIT_API_KEY, and LIVEKIT_API_SECRET in .env for video.
        </div>
    @endif

    <div class="flex h-full min-w-0">
        <div class="relative flex min-h-0 min-w-0 flex-1 flex-col">
        <header class="flex shrink-0 items-center justify-between gap-2 bg-slate-950 px-4 py-3">
            <div class="min-w-0 max-w-[40%] sm:max-w-none">
                <h1 class="truncate text-sm font-semibold">{{ $room->title }}</h1>
                @if ($isAudioOnly ?? false)
                    <p class="text-[10px] font-medium uppercase tracking-wide text-emerald-400/90">Audio room</p>
                @elseif ($isConference ?? false)
                    <p class="text-[10px] font-medium uppercase tracking-wide {{ $initialConferenceStatusClass }}"
                       :class="conferenceStatusClass()"
                       x-text="conferenceStatusLabel()">{{ $initialConferenceStatus }}</p>
                @endif
                <p class="min-h-4 truncate text-xs font-medium leading-4"
                   :class="activeSpeakerCount() > 0 ? 'text-emerald-400' : 'text-slate-600'"
                   :title="activeSpeakersMessage()"
                   x-text="activeSpeakersMessage() || '...'"></p>
            </div>
            <div class="flex shrink-0 items-center gap-2 text-xs text-slate-400">
                <button @click.stop="openShare()" data-share-trigger type="button"
                        class="inline-flex items-center justify-center rounded-lg bg-slate-900 p-2 text-slate-200 transition-colors hover:bg-slate-800 sm:gap-1.5 sm:px-2.5 sm:py-1.5"
                        title="Share {{ $sessionNoun }} link"
                        aria-label="Share {{ $sessionNoun }} link">
                    @include('meet.room.partials.meet-icon', ['icon' => 'share', 'class' => 'h-4 w-4'])
                    <span class="hidden sm:inline text-xs font-medium">Share</span>
                </button>
                <span x-show="isRecording" @unless($activeRecording) style="display: none" @endunless
                      class="inline-flex items-center justify-center"
                      role="status"
                      aria-label="Recording">
                    <span class="h-2.5 w-2.5 rounded-full bg-red-500 animate-pulse sm:hidden"></span>
                    <span class="hidden rounded bg-red-600 px-2 py-0.5 text-xs font-medium text-white sm:inline">REC</span>
                </span>
                <span x-show="isLocked" @unless($session->is_locked) style="display: none" @endunless class="rounded bg-amber-600 px-2 py-0.5 font-medium text-white">Locked</span>
                <button @click="toggleParticipants()" type="button"
                        class="relative inline-flex items-center gap-1 rounded-lg bg-slate-900 px-2 py-1 text-xs font-medium text-slate-200 transition-colors hover:bg-slate-800 sm:gap-2"
                        :class="isHost && waitingCount > 0 ? 'ring-2 ring-amber-400/60' : ''"
                        :title="usesStageLayout ? 'View speakers' : 'View participants'"
                        :aria-label="(usesStageLayout ? 'Speakers' : 'Participants') + ': ' + headerParticipantLabel()">
                    <span x-show="isHost && waitingCount > 0" x-cloak
                          x-text="waitingCount > 9 ? '9+' : waitingCount"
                          class="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-amber-500 px-1 text-[10px] font-bold text-amber-950"></span>
                    @if ($headerHostPerson)
                        <span class="relative flex h-7 w-7 shrink-0 overflow-hidden rounded-full" aria-hidden="true">
                            @if (! empty($headerHostPerson['avatar_url']))
                                <img src="{{ $headerHostPerson['avatar_url'] }}" alt="" width="28" height="28"
                                     class="h-7 w-7 rounded-full object-cover">
                            @else
                                <span class="flex h-7 w-7 items-center justify-center rounded-full bg-slate-700 text-[11px] font-semibold text-white">
                                    {{ ParticipantPresenter::initials($headerHostPerson['display_name']) }}
                                </span>
                            @endif
                        </span>
                    @endif
                    <span><span x-text="headerParticipantCount()">{{ $headerParticipantCount }}</span><span class="hidden sm:inline" x-text="headerParticipantSuffix()">{{ $headerParticipantSuffix }}</span></span>
                </button>
            </div>
        </header>

        @if (($isConference ?? false) && ($isGreenRoom ?? false))
        <div x-show="isConference && isGreenRoom" x-cloak
             class="flex shrink-0 flex-col gap-2 border-b border-violet-500/30 bg-violet-500/15 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
            <div class="min-w-0 text-sm text-violet-100">
                <p class="font-medium">Green room</p>
                <p class="truncate text-xs text-violet-200/90">Only hosts and speakers are visible. Attendees join after you go live.</p>
                <p x-show="usesStageLayout" class="mt-1 text-xs text-violet-200/90">
                    Stage layout:
                    <span class="font-semibold text-violet-50" x-text="stageLayoutLabel()"></span>
                </p>
            </div>
            <div class="flex shrink-0 flex-wrap items-center gap-2">
                <button x-show="isHost && usesStageLayout" @click="openPanelSetup()" type="button"
                        class="shrink-0 rounded-lg border border-violet-400/40 bg-violet-500/20 px-3 py-1.5 text-xs font-semibold text-violet-100 transition-colors hover:bg-violet-500/30">
                    @include('meet.room.partials.meet-icon', ['icon' => 'panel', 'class' => 'mr-1 inline h-3.5 w-3.5'])
                    Stage layout
                </button>
                <button x-show="isHost" @click="goLive()" type="button" :disabled="goingLive"
                        class="shrink-0 rounded-lg bg-violet-500 px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-violet-400 disabled:opacity-60">
                    <span x-text="goingLive ? 'Starting…' : 'Go live'">Go live</span>
                </button>
            </div>
        </div>
        @endif

        @if (($inBreakout ?? false) && ! ($isSpace ?? false))
        <div x-show="inBreakout && !isSpace" x-cloak
             class="flex shrink-0 flex-col gap-1 border-b border-amber-500/30 bg-amber-500/10 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between">
            <div class="min-w-0">
                <p class="text-sm font-semibold text-amber-100">Breakout session</p>
                <p class="truncate text-xs text-amber-200/90" x-text="breakoutRoomName ? 'You are in ' + breakoutRoomName : 'You are in a breakout room'"></p>
            </div>
            <p x-show="breakoutTimeRemaining()" class="shrink-0 text-xs font-medium text-amber-200/90" x-text="breakoutTimeRemaining()"></p>
        </div>
        @endif

        @unless ($isSpace ?? false)
        <div x-show="isHost && breakoutsActive && !inBreakout && !isSpace" x-cloak
             class="flex shrink-0 flex-col gap-2 border-b border-amber-500/25 bg-amber-500/10 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between">
            <div class="min-w-0 text-sm text-amber-100">
                <p class="font-medium">Breakouts are active</p>
                <p class="text-xs text-amber-200/90">Attendees are in smaller discussion groups. You remain on the main stage.</p>
            </div>
            <button @click="closeBreakouts()" type="button"
                    class="shrink-0 rounded-lg bg-amber-500 px-3 py-1.5 text-xs font-semibold text-amber-950 hover:bg-amber-400">
                End breakouts
            </button>
        </div>
        @endunless

        @if (($usesStageLayout ?? false) && ! ($isGreenRoom ?? false) && ! ($inBreakout ?? false))
        <div x-show="usesStageLayout && !isGreenRoom && !inBreakout" x-cloak
             class="flex shrink-0 flex-col gap-2 border-b px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between sm:gap-3"
             :class="stageLayout === 'panel' ? 'border-violet-500/25 bg-violet-500/10' : 'border-sky-500/25 bg-sky-500/10'">
            <div class="flex min-w-0 items-start gap-2.5">
                <span class="mt-1.5 flex h-2.5 w-2.5 shrink-0 rounded-full"
                      :class="stageLayout === 'panel' ? 'bg-violet-400' : 'bg-sky-400'"></span>
                <div class="min-w-0">
                    <p class="text-sm font-semibold"
                       :class="stageLayout === 'panel' ? 'text-violet-100' : 'text-sky-100'"
                       x-text="stageLayoutLabel()"></p>
                    <p x-show="stageLayoutDescription()" class="truncate text-xs"
                       :class="stageLayout === 'panel' ? 'text-violet-200/85' : 'text-sky-200/85'"
                       x-text="stageLayoutDescription()"></p>
                </div>
            </div>
            <button x-show="isHost" @click="openPanelSetup()" type="button"
                    class="inline-flex shrink-0 items-center gap-1.5 self-start rounded-lg border px-3 py-1.5 text-xs font-semibold transition-colors sm:self-center"
                    :class="stageLayout === 'panel'
                        ? 'border-violet-400/40 bg-violet-500/20 text-violet-100 hover:bg-violet-500/30'
                        : 'border-sky-400/40 bg-sky-500/20 text-sky-100 hover:bg-sky-500/30'">
                @include('meet.room.partials.meet-icon', ['icon' => 'panel', 'class' => 'h-3.5 w-3.5'])
                Change layout
            </button>
        </div>
        @endif

        <div x-show="isHost && waitingCount > 0" x-cloak
             class="flex shrink-0 items-center justify-between gap-3 border-b border-amber-500/30 bg-amber-500/15 px-4 py-2.5">
            <div class="flex min-w-0 items-center gap-2 text-sm text-amber-100">
                <span class="flex h-2 w-2 shrink-0 animate-pulse rounded-full bg-amber-400"></span>
                <span class="truncate"
                      x-text="waitingCount === 1 ? '1 person is waiting to be admitted' : waitingCount + ' people are waiting to be admitted'"></span>
            </div>
            <button @click="openParticipantsPanel()" type="button"
                    class="shrink-0 rounded-lg bg-amber-500 px-3 py-1.5 text-xs font-semibold text-amber-950 transition-colors hover:bg-amber-400">
                Review
            </button>
        </div>

        <div x-show="audioPlaybackBlocked || needsMediaUnlock" x-cloak
             class="flex shrink-0 items-center justify-between gap-3 border-b border-indigo-500/30 bg-indigo-500/15 px-4 py-2.5">
            <p class="text-sm text-indigo-100"
               x-text="needsMediaUnlock ? 'Microphone blocked — click to allow speaking and hearing others.' : 'Audio playback blocked — click to hear other participants.'"></p>
            <button @click="unlockAllAudio()" type="button"
                    class="shrink-0 rounded-lg bg-indigo-500 px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-indigo-400">
                Enable audio
            </button>
        </div>

        <div x-show="shareOpen" x-cloak
             @click.outside="if (! $event.target.closest('[data-share-trigger]')) shareOpen = false"
             class="absolute right-4 top-14 z-50 w-80 rounded-xl bg-slate-900 p-4 shadow-2xl">
            <div class="flex items-start justify-between gap-2">
                <div>
                    <p class="text-sm font-medium text-white">Invite others</p>
                    <p class="mt-0.5 text-xs text-slate-400">Share this link so people can join the {{ $sessionNoun }}.</p>
                </div>
                <button @click="shareOpen = false" type="button" class="rounded p-1 text-slate-400 hover:bg-slate-800 hover:text-white" title="Close">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                </button>
            </div>
            <div class="mt-3 flex gap-2">
                <input type="text" readonly :value="joinUrl"
                       class="min-w-0 flex-1 rounded-lg border-0 bg-slate-950 px-3 py-2 text-xs text-slate-200 ring-1 ring-slate-700/60">
                <button @click="copyJoinLink()" type="button"
                        class="shrink-0 rounded-lg bg-indigo-600 px-3 py-2 text-xs font-medium text-white hover:bg-indigo-500"
                        x-text="shareCopied ? 'Copied' : 'Copy'"></button>
            </div>
            <p x-show="passcode" class="mt-3 text-xs text-slate-400">
                Passcode: <span class="font-mono font-medium text-slate-200" x-text="passcode"></span>
            </p>
        </div>

        <main class="relative flex min-h-0 min-w-0 flex-1 flex-col p-4 pb-2 meet-room-main">
                <div id="meet-stage" class="flex h-full min-h-0 flex-1 flex-col gap-3" :class="usesStageLayout ? 'meet-stage meet-stage--' + stageLayout : ''">
                    <div id="meet-stage-spotlight" class="meet-stage-spotlight relative min-h-0 flex-1 overflow-hidden rounded-xl bg-slate-900"></div>
                    <div id="video-grid" class="min-h-0 min-w-0" :class="audioOnly ? ((isSpace ? 'meet-audio-grid meet-space-grid flex-1' : 'meet-audio-grid flex-1')) : (usesStageLayout ? 'meet-stage-panel-grid flex-1 h-full' : 'meet-gallery-grid h-full')"></div>
                    <div id="meet-audience-strip" class="meet-audience-strip shrink-0"></div>
                </div>
                <div id="screen-share" class="absolute inset-4 hidden rounded-xl bg-black"></div>

                <div x-show="watermark" class="pointer-events-none absolute right-6 top-6 rounded bg-black/40 px-3 py-1 text-xs text-white/80" x-text="displayName"></div>

                <div x-show="liveCaptions && captionText" class="pointer-events-none absolute inset-x-0 bottom-20 flex justify-center px-4">
                    <p class="max-w-2xl rounded-lg bg-black/70 px-4 py-2 text-center text-sm text-white" x-text="captionText"></p>
                </div>

                <div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center gap-2">
                    <template x-for="reaction in floatingReactions" :key="reaction.id">
                        <span class="flex h-10 w-10 animate-bounce items-center justify-center rounded-full bg-slate-800/90">
                            <img x-show="reaction.kind === 'thumbs'" src="{{ asset('images/meet-icons/applause.svg') }}?v={{ @filemtime(public_path('images/meet-icons/applause.svg')) ?: '1' }}" alt="" class="meet-toolbar-icon h-5 w-5">
                            <img x-show="reaction.kind === 'heart'" src="{{ asset('images/meet-icons/react.svg') }}?v={{ @filemtime(public_path('images/meet-icons/react.svg')) ?: '1' }}" alt="" class="meet-toolbar-icon h-5 w-5">
                        </span>
                    </template>
                </div>
        </main>

        <footer class="relative shrink-0 bg-slate-950 py-4 sm:px-4 meet-room-footer">
            @php
                $toolbarShowMic = ($canPublish ?? true) && ((! ($audioOnlyPublish ?? false)) || ($speakGranted ?? false));
                $toolbarShowVideo = ($canPublish ?? true) && ! ($isAudioOnly ?? false) && ! ($audioOnlyPublish ?? false);
                $toolbarShowAudiencePrimary = ($isSpace ?? false)
                    ? ! ($canPublish ?? true)
                    : (($usesSpeakAccess ?? false) && ((! ($canPublish ?? true)) || ($audioOnlyPublish ?? false)));
                $toolbarShowAudienceDesktop = ($isSpace ?? false)
                    ? ! ($canPublish ?? true)
                    : (($usesSpeakAccess ?? false)
                        ? ((! ($canPublish ?? true)) || ($audioOnlyPublish ?? false))
                        : ($canPublish ?? true));
                $toolbarShowReactPrimary = $toolbarShowAudiencePrimary
                    && ! (($usesSpeakAccess ?? false) && ($speakGranted ?? false) && ($audioOnlyPublish ?? false));
            @endphp
            <div x-show="speakGranted && audioOnlyPublish" x-cloak
                 class="pointer-events-none absolute inset-x-0 -top-10 flex justify-center px-4 sm:-top-11">
                <p class="rounded-full bg-emerald-500/15 px-4 py-1.5 text-xs font-medium text-emerald-300 ring-1 ring-emerald-500/30">
                    You can speak — your microphone is available
                </p>
            </div>
            @if (($isSpace ?? false) && ($speakRequested ?? false) && ! ($canPublish ?? true))
            <div x-show="isSpace && speakRequested && !canPublish" x-cloak
                 class="absolute inset-x-0 -top-14 flex justify-center px-4 sm:-top-16">
                <div class="flex flex-wrap items-center justify-center gap-2 rounded-2xl bg-indigo-600/90 px-4 py-2.5 text-sm text-white shadow-lg ring-1 ring-indigo-400/40">
                    <span class="font-medium">You've been invited to speak</span>
                    <button type="button" @click="acceptSpaceSpeakInvitation()"
                            class="rounded-lg bg-white px-3 py-1 text-xs font-semibold text-indigo-700 hover:bg-indigo-50">Accept</button>
                    <button type="button" @click="declineSpaceSpeakInvitation()"
                            class="rounded-lg bg-indigo-800/80 px-3 py-1 text-xs font-medium text-indigo-100 hover:bg-indigo-800">Decline</button>
                </div>
            </div>
            @endif
            <div class="meet-toolbar mx-auto max-w-5xl">
                <div class="meet-toolbar__track sm:px-0">
                    <div class="meet-toolbar__primary sm:contents">
                        <button @click="toggleMute()" type="button"
                                x-show="showMicrophoneControl()"
                                data-toolbar-conditional
                                @unless($toolbarShowMic) style="display:none" @endunless
                                class="rounded-full p-3 transition-colors"
                                :class="isMuted ? 'bg-red-600 hover:bg-red-500' : 'bg-slate-700 hover:bg-slate-600'"
                                :title="isMuted ? 'Unmute' : 'Mute'">
                            <svg x-show="!isMuted" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 0 1 6 0v8.25a3 3 0 0 1-3 3Z"/></svg>
                            <svg x-show="isMuted" x-cloak class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 0 1 6 0v8.25a3 3 0 0 1-3 3Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m3 3 18 18"/></svg>
                        </button>
                        <button @click="toggleVideo()" type="button"
                                x-show="showVideoControl()"
                                data-toolbar-conditional
                                @unless($toolbarShowVideo) style="display:none" @endunless
                                class="rounded-full p-3 transition-colors"
                                :class="isVideoOff ? 'bg-red-600 hover:bg-red-500' : 'bg-slate-700 hover:bg-slate-600'"
                                :title="isVideoOff ? 'Turn camera on' : 'Turn camera off'">
                            <svg x-show="!isVideoOff" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>
                            <svg x-show="isVideoOff" x-cloak class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m3 3 18 18"/></svg>
                        </button>
                        <button @click="toggleScreenShare()" type="button"
                                x-show="showVideoControl()"
                                data-toolbar-conditional
                                @unless($toolbarShowVideo) style="display:none" @endunless
                                class="rounded-full p-3 transition-colors"
                                :class="isScreenSharing ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
                                title="Share screen">
                            @include('meet.room.partials.meet-icon', ['icon' => 'screen-share'])
                        </button>
                        <button @click="raiseHand()" type="button"
                                x-show="showPrimaryToolbarAudienceControls()"
                                data-toolbar-conditional
                                @unless($toolbarShowAudiencePrimary) style="display:none" @endunless
                                class="rounded-full bg-slate-700 p-3 hover:bg-slate-600"
                                title="Raise hand">
                            @include('meet.room.partials.meet-icon', ['icon' => 'raise-hand'])
                        </button>
                        <button @click="sendReaction('thumbs')" type="button"
                                x-show="showPrimaryToolbarAudienceControls()"
                                data-toolbar-conditional
                                @unless($toolbarShowAudiencePrimary) style="display:none" @endunless
                                class="rounded-full bg-slate-700 p-3 hover:bg-slate-600"
                                title="Applause — sound plays when others join in">
                            @include('meet.room.partials.meet-icon', ['icon' => 'applause'])
                        </button>
                        <button @click="sendReaction('heart')" type="button"
                                x-show="showPrimaryToolbarAudienceControls() && !(usesSpeakAccess && speakGranted && audioOnlyPublish)"
                                data-toolbar-conditional
                                @unless($toolbarShowReactPrimary) style="display:none" @endunless
                                class="rounded-full bg-slate-700 p-3 hover:bg-slate-600"
                                title="React">
                            @include('meet.room.partials.meet-icon', ['icon' => 'react'])
                        </button>
                        @if ($isSpace ?? false)
                        <button @click="toggleChat()" type="button"
                                data-alpine-toolbar
                                class="rounded-full p-3 transition-colors sm:hidden"
                                :class="sidebarPanel === 'chat' ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
                                title="Chat">
                            @include('meet.room.partials.meet-icon', ['icon' => 'chat'])
                        </button>
                        @if ($participant->isHost())
                            <button @click="toggleRecording()" type="button"
                                    data-alpine-toolbar
                                    class="rounded-full p-3 transition-colors sm:hidden"
                                    :class="isRecording ? 'bg-red-600 hover:bg-red-500' : 'bg-slate-700 hover:bg-slate-600'"
                                    :title="isRecording ? 'Stop recording' : 'Start recording'">
                                <span class="block h-3 w-3 rounded-full" :class="isRecording ? 'bg-white animate-pulse' : 'bg-red-400'"></span>
                            </button>
                        @endif
                        @else
                        <button @click="toggleFeatures()" type="button"
                                data-alpine-toolbar
                                class="rounded-full p-3 transition-colors sm:hidden"
                                :class="sidebarPanel === 'features' ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
                                title="More options">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/></svg>
                        </button>
                        @endif
                    </div>

                    <button @click="raiseHand()" type="button" x-show="showAudienceControls()" data-toolbar-conditional @unless($toolbarShowAudienceDesktop) style="display:none" @endunless class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="Raise hand">
                        @include('meet.room.partials.meet-icon', ['icon' => 'raise-hand'])
                    </button>
                    <button @click="sendReaction('thumbs')" type="button" x-show="showAudienceControls()" data-toolbar-conditional @unless($toolbarShowAudienceDesktop) style="display:none" @endunless class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="Applause — sound plays when others join in">
                        @include('meet.room.partials.meet-icon', ['icon' => 'applause'])
                    </button>
                    <button @click="sendReaction('heart')" type="button" x-show="showAudienceControls()" data-toolbar-conditional @unless($toolbarShowAudienceDesktop) style="display:none" @endunless class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="React">
                        @include('meet.room.partials.meet-icon', ['icon' => 'react'])
                    </button>
                    @unless ($isSpace ?? false)
                    <button @click="toggleChat()" type="button"
                            data-alpine-toolbar
                            class="hidden rounded-full p-3 transition-colors sm:inline-flex"
                            :class="sidebarPanel === 'chat' ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
                            title="Chat">
                        @include('meet.room.partials.meet-icon', ['icon' => 'chat'])
                    </button>
                    <input type="file" id="meet-file-input" class="hidden" @change="uploadFile">
                    <button @click="toggleFeatures()" type="button"
                            data-alpine-toolbar
                            class="hidden items-center gap-1.5 rounded-full px-3.5 py-3 text-xs font-medium transition-colors sm:inline-flex"
                            :class="sidebarPanel === 'features' ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
                            title="More options">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/></svg>
                        More
                    </button>
                    @endunless
                    @if ($isSpace ?? false)
                        <button @click="toggleChat()" type="button"
                                data-alpine-toolbar
                                class="hidden rounded-full p-3 transition-colors sm:inline-flex"
                                :class="sidebarPanel === 'chat' ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
                                title="Chat">
                            @include('meet.room.partials.meet-icon', ['icon' => 'chat'])
                        </button>
                    @endif
                    @if (($isSpace ?? false) && $participant->isHost())
                        <button @click="toggleRecording()" type="button"
                                data-alpine-toolbar
                                class="hidden rounded-full p-3 transition-colors sm:inline-flex"
                                :class="isRecording ? 'bg-red-600 hover:bg-red-500' : 'bg-slate-700 hover:bg-slate-600'"
                                :title="isRecording ? 'Stop recording' : 'Start recording'">
                            <span class="block h-3 w-3 rounded-full" :class="isRecording ? 'bg-white animate-pulse' : 'bg-red-400'"></span>
                        </button>
                    @endif

                    <div class="meet-toolbar__divider sm:hidden" aria-hidden="true"></div>

                    <div class="meet-toolbar__actions sm:contents">
                        <form id="meet-leave-form" method="POST" action="{{ route('meet.room.leave', $session) }}" class="inline" @submit.prevent="submitLeave()">
                            @csrf
                            <button type="submit"
                                    class="rounded-full bg-red-600 p-3 font-medium hover:bg-red-500 sm:px-5 sm:py-3 sm:text-sm"
                                    title="Leave {{ $sessionNoun }}"
                                    aria-label="Leave {{ $sessionNoun }}">
                                <span class="sm:hidden">
                                    @include('meet.room.partials.meet-icon', ['icon' => 'leave'])
                                </span>
                                <span class="hidden sm:inline">Leave</span>
                            </button>
                        </form>
                        @if ($participant->isHost())
                            <button @click="openEndMeetingConfirm()" type="button"
                                    class="rounded-full bg-red-950 p-3 text-red-400 hover:bg-red-900 sm:px-4 sm:py-3 sm:text-sm"
                                    title="End {{ $sessionNoun }} for everyone"
                                    aria-label="End {{ $sessionNoun }} for everyone">
                                <span class="sm:hidden">
                                    @include('meet.room.partials.meet-icon', ['icon' => 'end'])
                                </span>
                                <span class="hidden sm:inline">End</span>
                            </button>
                            <form id="meet-end-form" method="POST" action="{{ route('meet.room.end', $session) }}" class="hidden">
                                @csrf
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        </footer>

        @unless ($isSpace ?? false)
        <div x-show="breakoutModalOpen" x-cloak
             class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
             @keydown.escape.window="breakoutModalOpen = false">
            <div class="w-full max-w-sm rounded-2xl bg-slate-900 p-5 shadow-2xl" @click.outside="breakoutModalOpen = false">
                <h3 class="text-base font-semibold text-white">Start breakout rooms</h3>
                <p class="mt-1 text-sm text-slate-400">Attendees and speakers are split into smaller groups with full meeting controls. You stay on the main stage.</p>
                <form @submit.prevent="submitBreakouts()" class="mt-4 space-y-4">
                    <div>
                        <label for="breakout-count" class="sr-only">Number of rooms</label>
                        <input id="breakout-count" type="number" min="1" max="20" x-model="breakoutCount"
                               class="w-full rounded-xl border-0 bg-slate-950 px-3 py-2.5 text-sm text-white ring-1 ring-slate-700/60 focus:ring-indigo-500">
                    </div>
                    <div class="flex justify-end gap-2">
                        <button type="button" @click="breakoutModalOpen = false"
                                class="rounded-xl px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800">Cancel</button>
                        <button type="submit"
                                class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500">Create rooms</button>
                    </div>
                </form>
            </div>
        </div>
        @endunless

        <div x-show="endMeetingConfirmOpen" x-cloak
             class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
             @keydown.escape.window="endMeetingConfirmOpen = false">
            <div class="w-full max-w-sm rounded-2xl bg-slate-900 p-5 shadow-2xl" @click.outside="endMeetingConfirmOpen = false">
                <h3 class="text-base font-semibold text-white">End {{ $sessionNoun }} for everyone?</h3>
                <p class="mt-2 text-sm text-slate-400">All participants will be disconnected and the session will close.</p>
                <div class="mt-5 flex justify-end gap-2">
                    <button type="button" @click="endMeetingConfirmOpen = false"
                            class="rounded-xl px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800">Cancel</button>
                    <button type="button" @click="submitEndMeeting()"
                            class="rounded-xl bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-500">End {{ $sessionNoun }}</button>
                </div>
            </div>
        </div>
        </div>

        <div class="meet-room-panels-stack max-sm:contents"
             :class="sidebarPanel ? 'is-open' : ''">
            <div x-show="sidebarPanel" x-cloak
                 class="meet-room-panel__backdrop fixed inset-0 z-40 sm:hidden"
                 @click="closeSidebar()"
                 aria-hidden="true"></div>

        <x-meet.room.panel show="sidebarPanel === 'chat'" title="{{ ($isSpace ?? false) ? 'Room chat' : $sessionNounTitle.' chat' }}">
            <x-slot:subtitle>
                <p>Messages are visible to everyone in the {{ ($isSpace ?? false) ? 'room' : 'call' }}</p>
            </x-slot:subtitle>

            <div class="flex min-h-0 flex-1 flex-col">
                <div class="flex-1 space-y-3 overflow-y-auto" id="chat-messages">
                    @foreach ($messages as $message)
                        @php $isOwn = $message->sender_name === $participant->display_name; @endphp
                        <div class="meet-chat-bubble {{ $isOwn ? 'meet-chat-bubble--own' : '' }}">
                            <div class="rounded-2xl px-3 py-2 {{ $isOwn ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-100' }}">
                                @unless ($isOwn)
                                    <p class="mb-0.5 text-xs font-medium text-sky-300">{{ $message->sender_name }}</p>
                                @endunless
                                <p class="text-sm leading-relaxed">{{ $message->body }}</p>
                            </div>
                            <p class="mt-1 text-[10px] text-slate-500 {{ $isOwn ? 'text-right' : '' }}">{{ $message->created_at->format('g:i A') }}</p>
                        </div>
                    @endforeach
                </div>
                <form @submit.prevent="sendChat" class="mt-3 shrink-0">
                    <div class="flex items-end gap-2">
                        <input type="text" x-model="chatInput" placeholder="Write a message…"
                               class="flex-1 rounded-xl border-0 bg-slate-800 px-3 py-2.5 text-sm text-white placeholder:text-slate-500 focus:ring-2 focus:ring-indigo-500">
                        <button type="submit"
                                class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-500 disabled:opacity-50"
                                :disabled="!chatInput.trim()">Send</button>
                    </div>
                </form>
            </div>
        </x-meet.room.panel>

        @unless ($isSpace ?? false)
        <x-meet.room.panel show="sidebarPanel === 'programme'" title="Programme">
            <x-slot:subtitle>
                <p>Lineup from Events when linked to this {{ $sessionNoun }}</p>
            </x-slot:subtitle>

            <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
                @include('meet.room.partials.programme-panel', [
                    'programmeSnapshot' => $programmeSnapshot,
                    'linkedProgrammeItems' => $linkedProgrammeItems ?? [],
                    'sessionNoun' => $sessionNoun,
                ])
            </div>
        </x-meet.room.panel>
        @endunless

        <x-meet.room.panel show="sidebarPanel === 'participants'" :title="null">
            <x-slot:subtitle>
                <template x-if="usesStageLayout">
                    <div>
                        <p x-text="speakerCount() + (speakerCount() === 1 ? ' speaker' : ' speakers') + ' on stage'"></p>
                        <p x-show="activeSpeakerCount() >= 1" x-cloak class="text-emerald-400" x-text="activeSpeakersMessage()"></p>
                    </div>
                </template>
                <template x-if="!usesStageLayout">
                    <div>
                        <p x-text="participantCount() + (participantCount() === 1 ? ' person' : ' people') + ' in this call'"></p>
                        <p x-show="activeSpeakerCount() >= 2" x-cloak class="text-emerald-400" x-text="activeSpeakersMessage()"></p>
                    </div>
                </template>
            </x-slot:subtitle>
            <x-slot:header>
                <h2 class="text-base font-semibold text-white" x-text="isSpace ? 'People' : (usesStageLayout ? 'Speakers' : 'Participants')"></h2>
            </x-slot:header>

            <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
                <template x-if="isSpace && isHost && handRaisedParticipants().length">
                    <div class="mb-3 border-b border-slate-800 pb-3">
                        <p class="px-2 pb-2 text-xs font-semibold uppercase tracking-wide text-amber-300">
                            Raised hands
                            <span class="ml-1 rounded-full bg-amber-500/20 px-1.5 py-0.5 text-[10px] text-amber-200"
                                  x-text="handRaisedParticipants().length"></span>
                        </p>
                        <template x-for="person in handRaisedParticipants()" :key="'hand-'+person.uuid">
                            <div class="flex items-center gap-3 rounded-xl px-2 py-2.5">
                                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-amber-500/20 text-sm font-semibold text-amber-200"
                                      x-text="participantInitials(person.display_name)"></span>
                                <span class="min-w-0 flex-1">
                                    <span class="block truncate text-sm font-medium text-white" x-text="person.display_name"></span>
                                    <span class="block text-xs text-amber-200/80">Wants to speak</span>
                                </span>
                                <button type="button" @click="inviteSpaceSpeaker(person.uuid)"
                                        class="rounded-lg bg-emerald-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-emerald-500">Invite to speak</button>
                            </div>
                        </template>
                    </div>
                </template>
                <template x-if="isSpace && isHost && spaceSpeakInvitePendingParticipants().length">
                    <div class="mb-3 border-b border-slate-800 pb-3">
                        <p class="px-2 pb-2 text-xs font-semibold uppercase tracking-wide text-sky-300">
                            Invited to speak
                            <span class="ml-1 rounded-full bg-sky-500/20 px-1.5 py-0.5 text-[10px] text-sky-200"
                                  x-text="spaceSpeakInvitePendingParticipants().length"></span>
                        </p>
                        <template x-for="person in spaceSpeakInvitePendingParticipants()" :key="'space-invite-'+person.uuid">
                            <div class="flex items-center gap-3 rounded-xl px-2 py-2.5">
                                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sky-500/20 text-sm font-semibold text-sky-200"
                                      x-text="participantInitials(person.display_name)"></span>
                                <span class="min-w-0 flex-1">
                                    <span class="block truncate text-sm font-medium text-white" x-text="person.display_name"></span>
                                    <span class="block text-xs text-sky-200/80">Waiting for response</span>
                                </span>
                                <button type="button" @click="dismissSpaceSpeakInvitation(person.uuid)"
                                        class="rounded-lg bg-slate-700 px-2.5 py-1 text-xs font-medium text-slate-200 hover:bg-slate-600">Cancel invite</button>
                            </div>
                        </template>
                    </div>
                </template>
                <template x-if="isHost && waitingParticipants().length">
                    <div class="mb-3 border-b border-slate-800 pb-3">
                        <p class="px-2 pb-2 text-xs font-semibold uppercase tracking-wide text-amber-300">
                            Waiting to join
                            <span class="ml-1 rounded-full bg-amber-500/20 px-1.5 py-0.5 text-[10px] text-amber-200"
                                  x-text="waitingParticipants().length"></span>
                        </p>
                        <template x-for="person in waitingParticipants()" :key="'wait-'+person.uuid">
                            <div class="flex items-center gap-3 rounded-xl px-2 py-2.5">
                                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-amber-500/20 text-sm font-semibold text-amber-200"
                                      x-text="participantInitials(person.display_name)"></span>
                                <span class="min-w-0 flex-1">
                                    <span class="block truncate text-sm font-medium text-white" x-text="person.display_name"></span>
                                    <span class="block text-xs text-amber-200/80">Waiting for admission</span>
                                </span>
                                <span class="flex shrink-0 gap-1">
                                    <button type="button" @click="admitParticipant(person.uuid)"
                                            class="rounded-lg bg-emerald-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-emerald-500">Admit</button>
                                    <button type="button" @click="denyParticipant(person.uuid)"
                                            class="rounded-lg bg-slate-700 px-2.5 py-1 text-xs font-medium text-slate-200 hover:bg-slate-600">Deny</button>
                                </span>
                            </div>
                        </template>
                    </div>
                </template>
                <template x-if="canManageSpeak && speakRequestParticipants().length">
                    <div class="mb-3 border-b border-slate-800 pb-3">
                        <p class="px-2 pb-2 text-xs font-semibold uppercase tracking-wide text-sky-300">
                            Requesting to speak
                            <span class="ml-1 rounded-full bg-sky-500/20 px-1.5 py-0.5 text-[10px] text-sky-200"
                                  x-text="speakRequestParticipants().length"></span>
                        </p>
                        <template x-for="person in speakRequestParticipants()" :key="'speak-req-'+person.uuid">
                            <div class="flex items-center gap-3 rounded-xl px-2 py-2.5">
                                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sky-500/20 text-sm font-semibold text-sky-200"
                                      x-text="participantInitials(person.display_name)"></span>
                                <span class="min-w-0 flex-1">
                                    <span class="block truncate text-sm font-medium text-white" x-text="person.display_name"></span>
                                    <span class="block text-xs text-sky-200/80">Wants to speak</span>
                                </span>
                                <span class="flex shrink-0 gap-1">
                                    <button type="button" @click="grantSpeakAccess(person.uuid)"
                                            class="rounded-lg bg-emerald-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-emerald-500">Allow</button>
                                    <button type="button" @click="dismissSpeakRequest(person.uuid)"
                                            class="rounded-lg bg-slate-700 px-2.5 py-1 text-xs font-medium text-slate-200 hover:bg-slate-600">Dismiss</button>
                                </span>
                            </div>
                        </template>
                    </div>
                </template>
                <template x-for="person in (usesStageLayout ? speakerParticipantsSorted() : inCallParticipantsSorted())" :key="person.uuid">
                    <div class="flex items-center gap-3 rounded-xl px-2 py-2.5"
                         :class="isSpeaking(person.uuid) ? 'bg-emerald-500/10 ring-1 ring-emerald-500/40' : ''">
                        <span class="relative flex h-10 w-10 shrink-0">
                            <img x-show="person.avatar_url"
                                 :src="person.avatar_url"
                                 alt=""
                                 class="h-10 w-10 rounded-full object-cover"
                                 :class="isSpeaking(person.uuid) ? 'ring-2 ring-emerald-400 ring-offset-2 ring-offset-slate-900' : ''">
                            <span x-show="!person.avatar_url"
                                  class="flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold text-white"
                                  :class="isSpeaking(person.uuid) ? 'ring-2 ring-emerald-400 ring-offset-2 ring-offset-slate-900' : ''"
                                  :style="avatarStyle(person.display_name)"
                                  x-text="participantInitials(person.display_name)"></span>
                        </span>
                        <span class="min-w-0 flex-1">
                            <span class="block truncate text-sm font-medium text-white" x-text="person.display_name"></span>
                            <span x-show="isSpeaking(person.uuid)" class="block text-xs font-medium text-emerald-400">Speaking</span>
                            <span x-show="!isSpeaking(person.uuid)" class="block text-xs text-slate-400" x-text="roleLabel(person.role)"></span>
                        </span>
                        <span class="flex shrink-0 items-center gap-1">
                            <button x-show="usesStageLayout && isHost && isSpeakerPerson(person) && !matchesSpotlightKey(resolveSpotlightKey(), person)"
                                    type="button" @click="setSpotlight(spotlightKey(person))"
                                    class="rounded-lg bg-indigo-600 px-2 py-1 text-[10px] font-medium text-white hover:bg-indigo-500">
                                Spotlight
                            </button>
                            <button x-show="isConference && isHost && isGreenRoom && person.user_ref && !['host', 'co_host', 'panelist'].includes(person.role)"
                                    type="button" @click="makeSpeaker(person.user_ref)"
                                    class="rounded-lg bg-violet-600 px-2 py-1 text-[10px] font-medium text-white hover:bg-violet-500">
                                Make speaker
                            </button>
                            <button x-show="isSpace && isHost && person.role === 'attendee' && !person.speak_requested"
                                    type="button" @click="inviteSpaceSpeaker(person.uuid)"
                                    class="rounded-lg bg-emerald-600 px-2 py-1 text-[10px] font-medium text-white hover:bg-emerald-500">
                                Invite to speak
                            </button>
                            <button x-show="isSpace && isHost && person.role === 'panelist'"
                                    type="button" @click="promoteSpaceCoHost(person.uuid)"
                                    class="rounded-lg bg-violet-600 px-2 py-1 text-[10px] font-medium text-white hover:bg-violet-500">
                                Make co-host
                            </button>
                            <button x-show="isSpace && isHost && (person.role === 'panelist' || person.role === 'co_host')"
                                    type="button" @click="demoteSpaceSpeaker(person.uuid)"
                                    class="rounded-lg bg-slate-600 px-2 py-1 text-[10px] font-medium text-slate-100 hover:bg-slate-500">
                                Move to audience
                            </button>
                            <button x-show="canManageSpeak && usesSpeakAccess && person.role === 'attendee' && !person.speak_granted"
                                    type="button" @click="grantSpeakAccess(person.uuid)"
                                    class="rounded-lg bg-emerald-600 px-2 py-1 text-[10px] font-medium text-white hover:bg-emerald-500">
                                Invite to speak
                            </button>
                            <button x-show="canManageSpeak && usesSpeakAccess && person.speak_granted"
                                    type="button" @click="revokeSpeakAccess(person.uuid)"
                                    class="rounded-lg bg-slate-600 px-2 py-1 text-[10px] font-medium text-slate-100 hover:bg-slate-500">
                                Revoke speak
                            </button>
                        </span>
                        <span class="flex shrink-0 items-center gap-1 text-slate-400">
                            <span x-show="person.speak_granted" class="rounded-full bg-emerald-500/20 px-1.5 py-0.5 text-[10px] font-medium text-emerald-300" title="Can speak">Mic</span>
                            <span x-show="person.speak_requested && !person.speak_granted" class="rounded-full bg-sky-500/20 p-1 text-sky-300" title="Requested to speak">
                                @include('meet.room.partials.meet-icon', ['icon' => 'speak', 'class' => 'h-3.5 w-3.5'])
                            </span>
                            <span x-show="isSpeaking(person.uuid)" class="meet-speaking-badge rounded-full bg-emerald-500/20 p-1 text-emerald-300" title="Speaking">
                                <svg class="h-3.5 w-3.5" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                                    <rect class="meet-speaking-bar meet-speaking-bar--1" x="1" y="5" width="2.5" height="6" rx="1"/>
                                    <rect class="meet-speaking-bar meet-speaking-bar--2" x="6.75" y="3" width="2.5" height="10" rx="1"/>
                                    <rect class="meet-speaking-bar meet-speaking-bar--3" x="12.5" y="6" width="2.5" height="4" rx="1"/>
                                </svg>
                            </span>
                            <span x-show="person.hand_raised" class="rounded-full bg-amber-500/20 p-1 text-amber-300" title="Hand raised">
                                @include('meet.room.partials.meet-icon', ['icon' => 'raise-hand', 'class' => 'h-3.5 w-3.5'])
                            </span>
                            <svg x-show="person.is_muted" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" title="Muted">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 0 1 6 0v8.25a3 3 0 0 1-3 3Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m3 3 18 18"/>
                            </svg>
                            <svg x-show="person.is_video_off" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" title="Camera off">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m3 3 18 18"/>
                            </svg>
                        </span>
                    </div>
                </template>
                <p x-show="(usesStageLayout ? speakerParticipantsSorted().length : inCallParticipants().length) === 0 && waitingParticipants().length === 0" class="px-2 py-4 text-center text-xs text-slate-500" x-text="usesStageLayout ? 'No speakers yet.' : 'No participants yet.'"></p>
            </div>
        </x-meet.room.panel>

        <div x-show="panelSetupOpen" x-cloak
             class="fixed inset-0 z-50 flex items-end justify-center bg-black/60 p-4 backdrop-blur-sm sm:items-center"
             @keydown.escape.window="cancelPanelSetup()">
            <div class="w-full max-w-lg rounded-2xl bg-slate-900 p-5 shadow-2xl" @click.outside="cancelPanelSetup()">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <h3 class="text-base font-semibold text-white">Stage layout</h3>
                        <p class="mt-1 text-sm text-slate-400">Choose how speakers appear on stage. Changes apply when you save.</p>
                    </div>
                    <button @click="cancelPanelSetup()" type="button" class="rounded-lg p-1 text-slate-400 hover:bg-slate-800 hover:text-white">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                    </button>
                </div>

                <div class="mt-5 grid gap-3 sm:grid-cols-2">
                    <button type="button" @click="selectStageLayout('plenary')"
                            class="rounded-xl border p-4 text-left transition-colors"
                            :class="stageLayout === 'plenary'
                                ? 'border-sky-500/60 bg-sky-500/10 ring-1 ring-sky-500/40'
                                : 'border-slate-700/60 bg-slate-950/60 hover:border-slate-600'">
                        <p class="text-sm font-semibold text-white">Plenary</p>
                        <p class="mt-1 text-xs leading-relaxed text-slate-400">One main speaker fills the stage.</p>
                    </button>
                    <button type="button" @click="selectStageLayout('panel')"
                            class="rounded-xl border p-4 text-left transition-colors"
                            :class="stageLayout === 'panel'
                                ? 'border-violet-500/60 bg-violet-500/10 ring-1 ring-violet-500/40'
                                : 'border-slate-700/60 bg-slate-950/60 hover:border-slate-600'">
                        <p class="text-sm font-semibold text-white">Panel discussion</p>
                        <p class="mt-1 text-xs leading-relaxed text-slate-400">Multiple speakers shown together in a split-screen grid. Assign speakers to each panel below.</p>
                    </button>
                </div>

                <p x-show="stageLayout === 'plenary'" x-cloak class="mt-3 rounded-lg border border-sky-500/30 bg-sky-500/10 px-3 py-2 text-xs text-sky-100">
                    Plenary shows one speaker on the main stage.
                </p>

                <div x-show="stageLayout === 'plenary'" x-cloak class="mt-5 space-y-2">
                    <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">On stage</p>
                    <div class="flex flex-wrap gap-2">
                        <template x-for="speaker in speakerParticipantsSorted()" :key="'plenary-' + speaker.uuid">
                            <button type="button" @click="setSpotlight(spotlightKey(speaker))"
                                    class="rounded-full px-3 py-1.5 text-xs font-medium transition-colors"
                                    :class="matchesSpotlightKey(resolveSpotlightKey(), speaker)
                                        ? 'bg-sky-600 text-white ring-1 ring-sky-400/60'
                                        : 'bg-slate-800 text-slate-300 hover:bg-slate-700'">
                                <span x-text="speaker.display_name"></span>
                            </button>
                        </template>
                    </div>
                </div>

                <p x-show="stageLayout === 'panel'" x-cloak class="mt-3 rounded-lg border border-violet-500/30 bg-violet-500/10 px-3 py-2 text-xs text-violet-100">
                    Switching to panel discussion changes the live stage to a multi-speaker grid for everyone in the room.
                </p>

                <div x-show="stageLayout === 'panel'" x-cloak class="mt-5 space-y-3">
                    <template x-for="(panel, index) in panels" :key="panel.id">
                        <div class="rounded-xl border border-slate-700/60 bg-slate-950/60 p-3">
                            <div class="flex items-center gap-2">
                                <input type="text" x-model="panel.name" placeholder="Panel name"
                                       class="min-w-0 flex-1 rounded-lg border-0 bg-slate-900 px-3 py-2 text-sm text-white ring-1 ring-slate-700/60">
                                <button type="button" @click="setActivePanel(panel.id)"
                                        class="rounded-lg px-2.5 py-1.5 text-xs font-medium"
                                        :class="activePanelId === panel.id ? 'bg-violet-600 text-white' : 'bg-slate-800 text-slate-300'">
                                    <span x-text="activePanelId === panel.id ? 'Active' : 'Show'"></span>
                                </button>
                                <button type="button" @click="removePanel(index)" class="rounded-lg p-1.5 text-slate-400 hover:bg-slate-800 hover:text-red-300">
                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                                </button>
                            </div>
                            <div class="mt-3 flex flex-wrap gap-2">
                                <template x-for="speaker in speakerParticipantsSorted()" :key="panel.id + '-' + speaker.uuid">
                                    <label class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs"
                                           :class="panel.speaker_refs.includes(spotlightKey(speaker)) ? 'bg-violet-600/30 text-violet-100 ring-1 ring-violet-500/50' : 'bg-slate-800 text-slate-300'">
                                        <input type="checkbox" class="sr-only"
                                               :checked="panel.speaker_refs.includes(spotlightKey(speaker))"
                                               @change="togglePanelSpeaker(panel, spotlightKey(speaker))">
                                        <span x-text="speaker.display_name"></span>
                                    </label>
                                </template>
                            </div>
                        </div>
                    </template>
                    <button type="button" @click="addPanel()"
                            class="w-full rounded-xl border border-dashed border-slate-600 px-3 py-2.5 text-sm font-medium text-slate-300 hover:border-violet-500/50 hover:text-violet-200">
                        + Add panel
                    </button>
                </div>

                <div class="mt-6 flex justify-end gap-2">
                    <button type="button" @click="cancelPanelSetup()"
                            class="rounded-xl px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800">Cancel</button>
                    <button type="button" @click="saveStageLayout()" :disabled="savingStageLayout"
                            class="rounded-xl bg-violet-600 px-4 py-2 text-sm font-medium text-white hover:bg-violet-500 disabled:opacity-60">
                        <span x-text="savingStageLayout ? 'Saving…' : 'Save layout'"></span>
                    </button>
                </div>
            </div>
        </div>

        @unless ($isSpace ?? false)
        <x-meet.room.panel show="sidebarPanel === 'features'" title="More options">
            <x-slot:subtitle>
                <p>{{ ($isSpace ?? false) ? 'Audio room controls' : $sessionNounTitle.' tools and extras' }}</p>
            </x-slot:subtitle>

            <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
                <div class="space-y-1">
                    <div class="space-y-1 sm:hidden" x-show="showAudienceControls()">
                        <x-meet.room.menu-item icon="chat" title="Chat" subtitle="Open the {{ $sessionNoun }} chat"
                                               x-show="!isSpace"
                                               @click="toggleChat()" />
                        <x-meet.room.menu-item icon="raise-hand" title="Raise hand" subtitle="Signal that you have something to share"
                                               x-show="!usesSpeakAccess || isSpace"
                                               @click="raiseHand(); closeSidebar()" />
                        <x-meet.room.menu-item icon="applause" title="Applause" subtitle="Send applause — sound plays when others join in"
                                               x-show="!usesSpeakAccess || isSpace"
                                               @click="sendReaction('thumbs'); closeSidebar()" />
                        <x-meet.room.menu-item icon="react" title="React" subtitle="Send a heart to the room"
                                               x-show="isSpace || !usesSpeakAccess || (usesSpeakAccess && speakGranted && audioOnlyPublish)"
                                               @click="sendReaction('heart'); closeSidebar()" />
                        <div class="my-1 border-t border-slate-800"></div>
                    </div>
                    <div class="space-y-1" x-show="usesSpeakAccess && !speakGranted && !speakRequested && showAudienceControls()">
                        <x-meet.room.menu-item icon="speak" title="Request to speak" subtitle="Ask the host to enable your microphone"
                                               @click="requestSpeak(); closeSidebar()" />
                        <div class="my-1 border-t border-slate-800"></div>
                    </div>
                    <div class="space-y-1" x-show="usesSpeakAccess && speakRequested && !speakGranted">
                        <button type="button" disabled
                                class="flex w-full cursor-default items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-400">
                            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-sky-500/15">
                                @include('meet.room.partials.meet-icon', ['icon' => 'speak', 'class' => 'h-5 w-5'])
                            </span>
                            <span class="min-w-0">
                                <span class="block font-medium text-sky-300">Speak request sent</span>
                                <span class="block text-xs text-slate-500">Waiting for the host to allow your microphone</span>
                            </span>
                        </button>
                        <button type="button" @click="cancelSpeakRequest(); closeSidebar()"
                                class="ml-12 text-xs font-medium text-slate-400 hover:text-slate-200">Cancel request</button>
                        <div class="my-1 border-t border-slate-800"></div>
                    </div>
                    <div class="space-y-1" x-show="usesSpeakAccess && speakGranted && audioOnlyPublish">
                        <button type="button" disabled
                                class="flex w-full cursor-default items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-400">
                            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-emerald-500/15">
                                @include('meet.room.partials.meet-icon', ['icon' => 'speak', 'class' => 'h-5 w-5'])
                            </span>
                            <span class="min-w-0">
                                <span class="block font-medium text-emerald-300">You can speak</span>
                                <span class="block text-xs text-slate-500">Your microphone is available — use the mic control below</span>
                            </span>
                        </button>
                        <div class="my-1 border-t border-slate-800"></div>
                    </div>
                    <div class="space-y-1 sm:hidden" x-show="showStagePublisherControls()">
                        <x-meet.room.menu-item icon="chat" title="Chat" subtitle="Open the {{ $sessionNoun }} chat"
                                               x-show="!isSpace"
                                               @click="toggleChat()" />
                        <div class="my-1 border-t border-slate-800"></div>
                    </div>

                    @unless ($isSpace ?? false)
                    <x-meet.room.menu-item icon="programme" title="Programme" :subtitle="'View the '.$sessionNoun.' lineup from Events'"
                                           @click="toggleProgramme()" />

                    <button @click="openUploadPicker()" type="button"
                            class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-200 transition-colors hover:bg-slate-800">
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-slate-800/80">
                            @include('meet.room.partials.meet-icon', ['icon' => 'upload-file', 'class' => 'h-5 w-5'])
                        </span>
                        <span class="min-w-0">
                            <span class="block font-medium">Share files</span>
                            <span class="block text-xs text-slate-400">Upload a file for everyone in the call</span>
                        </span>
                    </button>
                    @endunless

                    @if ($participant->isHost())
                        <button @click="toggleRecordingFromMenu()" type="button"
                                class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-200 transition-colors hover:bg-slate-800">
                            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-red-500/15">
                                <span class="h-3 w-3 rounded-full" :class="isRecording ? 'bg-red-500 animate-pulse' : 'bg-red-400'"></span>
                            </span>
                            <span class="min-w-0">
                                <span class="block font-medium" x-text="isRecording ? 'Stop recording' : 'Start recording'"></span>
                                <span class="block text-xs text-slate-400">Save this {{ $sessionNoun }} to the cloud</span>
                            </span>
                        </button>

                        @unless ($isSpace ?? false)
                        <button @click="toggleLockFromMenu()" type="button"
                                class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-200 transition-colors hover:bg-slate-800">
                            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-slate-800/80">
                                @include('meet.room.partials.meet-icon', ['icon' => 'lock', 'class' => 'h-5 w-5'])
                            </span>
                            <span class="min-w-0">
                                <span class="block font-medium" x-text="isLocked ? 'Unlock ' + sessionNoun() : 'Lock ' + sessionNoun()"></span>
                                <span class="block text-xs text-slate-400">Control who can join</span>
                            </span>
                        </button>

                        <x-meet.room.menu-item icon="start-breakout" title="Start breakouts" subtitle="Split participants into smaller rooms"
                                               @click="createBreakouts()" />

                        <x-meet.room.menu-item icon="close-breakout" title="Close breakouts" subtitle="Bring everyone back to the main room"
                                               @click="closeBreakouts()" />

                        <div x-show="breakoutsActive" x-cloak class="mt-3 space-y-2 border-t border-slate-800 pt-3">
                            <p class="px-1 text-xs font-semibold uppercase tracking-wide text-slate-500">Broadcast to breakouts</p>
                            <form @submit.prevent="broadcastToBreakouts()" class="flex gap-2">
                                <input type="text" x-model="breakoutBroadcastInput" placeholder="Message all breakout rooms…"
                                       class="flex-1 rounded-lg border-0 bg-slate-950 px-3 py-2 text-sm text-white placeholder:text-slate-500 ring-1 ring-slate-700/60">
                                <button type="submit" class="rounded-lg bg-indigo-600 px-3 py-2 text-xs font-medium text-white hover:bg-indigo-500">Send</button>
                            </form>
                        </div>
                        @endunless
                    @endif
                </div>

                @if ($isWebinar ?? false)
                    <div class="mt-4 border-t border-slate-800 pt-4">
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Q&amp;A</p>
                        <ul class="mt-2 max-h-36 space-y-2 overflow-y-auto">
                            <template x-for="item in qaItems" :key="item.uuid">
                                <li class="rounded-lg bg-slate-800/80 px-3 py-2 text-sm">
                                    <span class="font-medium text-sky-300" x-text="item.asker_name"></span>
                                    <span class="text-slate-300" x-text="': ' + item.question"></span>
                                </li>
                            </template>
                            <li x-show="qaItems.length === 0" class="text-xs text-slate-500">No questions yet.</li>
                        </ul>
                        <form @submit.prevent="submitQuestion" class="mt-3 flex gap-2">
                            <input type="text" x-model="qaInput" placeholder="Ask a question…"
                                   class="flex-1 rounded-lg border-0 bg-slate-950 px-3 py-2 text-sm text-white placeholder:text-slate-500 ring-1 ring-slate-700/60">
                            <button type="submit" class="rounded-lg bg-indigo-600 px-3 py-2 text-xs font-medium hover:bg-indigo-500">Send</button>
                        </form>
                    </div>
                @endif

                <p x-show="breakoutBroadcast && !isSpace" class="mt-3 rounded-xl bg-amber-950/40 px-3 py-3 text-sm text-amber-100" x-text="breakoutBroadcast"></p>
            </div>
        </x-meet.room.panel>
        @endunless
        </div>
    </div>
</body>
</html>
