@naviedu/room-platform-react 0.0.9 → 0.0.12

package/index.esm.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Component, createContext, useContext, useState, useRef, useCallback, useEffect, useMemo, useId, forwardRef, useLayoutEffect } from 'react';
+import { Component, useContext, createContext, useState, useRef, useCallback, useEffect, useMemo, useId, forwardRef, useLayoutEffect } from 'react';
 import { Slot, AlertDialog as AlertDialog$1, Dialog as Dialog$1, Select as Select$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from 'radix-ui';
 import { Minimize2, Maximize2, XIcon, ChevronDownIcon, CheckIcon, ChevronUpIcon, Loader2Icon, PhoneOff, Bell, PhoneCall, Hand, VideoOff, ChevronUp, SunDim, Images, ImageUp, Plus, Trash2, Settings, ArrowLeftRight, Monitor, LogOut, Mic, Camera, X, ChevronLeft, ChevronRight, PanelRightOpen, PanelRightClose, Check } from 'lucide-react';
-import { toast } from 'sonner';
 import { RoomEvent, Track, createLocalVideoTrack, Room, DataPacket_Kind } from 'livekit-client';
+import { createPortal } from 'react-dom';
+import { toast, Toaster } from 'sonner';
 import { VideoTrack, RoomContext, RoomAudioRenderer, StartAudio, useTracks, useRoomContext, TrackToggle } from '@livekit/components-react';
 import { supportsBackgroundProcessors, BackgroundProcessor } from '@livekit/track-processors';
-import { createPortal } from 'react-dom';
 import { io } from 'socket.io-client';
 
 function _assert_this_initialized$2(self) {
@@ -173,7 +173,13 @@ var getParticipantTabTitle = function(participantTab) {
 };
 
 var RoomPlatformCapability = {
+    ROOM_JOIN: 'room:join',
+    CHAT_SEND: 'chat:send',
+    MEDIA_SUBSCRIBE: 'media:subscribe',
+    MEDIA_PUBLISH_AUDIO: 'media:publish_audio',
+    MEDIA_PUBLISH_VIDEO: 'media:publish_video',
     MEDIA_SHARE_SCREEN: 'media:share_screen',
+    DATA_PUBLISH: 'data:publish',
     ROOM_SPEAK_REQUEST: 'room:speak_request',
     ROOM_MODERATE: 'room:moderate',
     MONITOR_MANAGE: 'monitor:manage',
@@ -182,6 +188,10 @@ var RoomPlatformCapability = {
     PRIVATE_ROOM_CLOSE: 'private_room:close',
     WHITEBOARD_CLEAR: 'whiteboard:clear'
 };
+var roomPlatformCapabilities = Object.values(RoomPlatformCapability);
+var isRoomPlatformCapability = function(value) {
+    return roomPlatformCapabilities.includes(value);
+};
 
 function _define_property$y(obj, key, value) {
     if (key in obj) {
@@ -250,16 +260,16 @@ function clsx() {
     return n;
 }
 
-function _array_like_to_array$B(arr, len) {
+function _array_like_to_array$C(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$x(arr) {
+function _array_with_holes$y(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$f(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$B(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$C(arr);
 }
 function _define_property$x(obj, key, value) {
     if (key in obj) {
@@ -277,7 +287,7 @@ function _define_property$x(obj, key, value) {
 function _iterable_to_array$f(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$x(arr, i) {
+function _iterable_to_array_limit$y(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -301,7 +311,7 @@ function _iterable_to_array_limit$x(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$x() {
+function _non_iterable_rest$y() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$f() {
@@ -322,19 +332,19 @@ function _object_spread$t(target) {
     }
     return target;
 }
-function _sliced_to_array$x(arr, i) {
-    return _array_with_holes$x(arr) || _iterable_to_array_limit$x(arr, i) || _unsupported_iterable_to_array$B(arr, i) || _non_iterable_rest$x();
+function _sliced_to_array$y(arr, i) {
+    return _array_with_holes$y(arr) || _iterable_to_array_limit$y(arr, i) || _unsupported_iterable_to_array$C(arr, i) || _non_iterable_rest$y();
 }
 function _to_consumable_array$f(arr) {
-    return _array_without_holes$f(arr) || _iterable_to_array$f(arr) || _unsupported_iterable_to_array$B(arr) || _non_iterable_spread$f();
+    return _array_without_holes$f(arr) || _iterable_to_array$f(arr) || _unsupported_iterable_to_array$C(arr) || _non_iterable_spread$f();
 }
-function _unsupported_iterable_to_array$B(o, minLen) {
+function _unsupported_iterable_to_array$C(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$B(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$C(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$B(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$C(o, minLen);
 }
 /**
  * Concatenates two arrays faster than the array spread operator.
@@ -493,7 +503,7 @@ var processObjectDefinition = function(classDefinition, classPartObject, classGr
     var entries = Object.entries(classDefinition);
     var len = entries.length;
     for(var i = 0; i < len; i++){
-        var _entries_i = _sliced_to_array$x(entries[i], 2), key = _entries_i[0], value = _entries_i[1];
+        var _entries_i = _sliced_to_array$y(entries[i], 2), key = _entries_i[0], value = _entries_i[1];
         processClassesRecursively(value, getPart(classPartObject, key), classGroupId, theme);
     }
 };
@@ -5283,16 +5293,16 @@ function cn() {
     return twMerge(clsx(inputs));
 }
 
-function _array_like_to_array$A(arr, len) {
+function _array_like_to_array$B(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$w(arr) {
+function _array_with_holes$x(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$e(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$A(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$B(arr);
 }
 function _define_property$w(obj, key, value) {
     if (key in obj) {
@@ -5310,7 +5320,7 @@ function _define_property$w(obj, key, value) {
 function _iterable_to_array$e(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$w(arr, i) {
+function _iterable_to_array_limit$x(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -5334,7 +5344,7 @@ function _iterable_to_array_limit$w(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$w() {
+function _non_iterable_rest$x() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$e() {
@@ -5391,19 +5401,19 @@ function _object_without_properties_loose$f(source, excluded) {
     }
     return target;
 }
-function _sliced_to_array$w(arr, i) {
-    return _array_with_holes$w(arr) || _iterable_to_array_limit$w(arr, i) || _unsupported_iterable_to_array$A(arr, i) || _non_iterable_rest$w();
+function _sliced_to_array$x(arr, i) {
+    return _array_with_holes$x(arr) || _iterable_to_array_limit$x(arr, i) || _unsupported_iterable_to_array$B(arr, i) || _non_iterable_rest$x();
 }
 function _to_consumable_array$e(arr) {
-    return _array_without_holes$e(arr) || _iterable_to_array$e(arr) || _unsupported_iterable_to_array$A(arr) || _non_iterable_spread$e();
+    return _array_without_holes$e(arr) || _iterable_to_array$e(arr) || _unsupported_iterable_to_array$B(arr) || _non_iterable_spread$e();
 }
-function _unsupported_iterable_to_array$A(o, minLen) {
+function _unsupported_iterable_to_array$B(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$A(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$B(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$A(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$B(o, minLen);
 }
 var falsyToString = function(value) {
     return typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
@@ -5422,7 +5432,7 @@ var cva = function(base, config) {
             return variants[variant][variantKey];
         });
         var propsWithoutUndefined = props && Object.entries(props).reduce(function(acc, param) {
-            var _param = _sliced_to_array$w(param, 2), key = _param[0], value = _param[1];
+            var _param = _sliced_to_array$x(param, 2), key = _param[0], value = _param[1];
             if (value === undefined) {
                 return acc;
             }
@@ -5435,7 +5445,7 @@ var cva = function(base, config) {
                 "className"
             ]);
             return Object.entries(compoundVariantOptions).every(function(param) {
-                var _param = _sliced_to_array$w(param, 2), key = _param[0], value = _param[1];
+                var _param = _sliced_to_array$x(param, 2), key = _param[0], value = _param[1];
                 return Array.isArray(value) ? value.includes(_object_spread$s({}, defaultVariants, propsWithoutUndefined)[key]) : _object_spread$s({}, defaultVariants, propsWithoutUndefined)[key] === value;
             }) ? _to_consumable_array$e(acc).concat([
                 cvClass,
@@ -5558,6 +5568,18 @@ function Button(_0) {
     }, props));
 }
 
+var PortalContainerContext = /*#__PURE__*/ createContext(null);
+function PortalContainerProvider(param) {
+    var children = param.children, container = param.container;
+    return /*#__PURE__*/ jsx(PortalContainerContext.Provider, {
+        value: container,
+        children: children
+    });
+}
+function usePortalContainer() {
+    return useContext(PortalContainerContext);
+}
+
 function _define_property$u(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -5604,6 +5626,25 @@ function _object_spread$q(target) {
     }
     return target;
 }
+function ownKeys$l(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props$l(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$l(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _object_without_properties$d(source, excluded) {
     if (source == null) return {};
     var target = {}, sourceKeys, key, i;
@@ -5647,10 +5688,16 @@ function AlertDialog(_0) {
     }, props));
 }
 function AlertDialogPortal(_0) {
-    _object_destructuring_empty$3(_0); var props = _extends$3({}, _0);
-    return /*#__PURE__*/ jsx(AlertDialog$1.Portal, _object_spread$q({
+    var container = _0.container, props = _object_without_properties$d(_0, [
+        "container"
+    ]);
+    var _ref;
+    var inheritedContainer = usePortalContainer();
+    return /*#__PURE__*/ jsx(AlertDialog$1.Portal, _object_spread_props$l(_object_spread$q({
         "data-slot": "alert-dialog-portal"
-    }, props));
+    }, props), {
+        container: (_ref = container !== null && container !== void 0 ? container : inheritedContainer) !== null && _ref !== void 0 ? _ref : undefined
+    }));
 }
 function AlertDialogOverlay(_0) {
     var className = _0.className, props = _object_without_properties$d(_0, [
@@ -5841,12 +5888,12 @@ function Badge(_0) {
     }, props));
 }
 
-function _array_like_to_array$z(arr, len) {
+function _array_like_to_array$A(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$v(arr) {
+function _array_with_holes$w(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$s(obj, key, value) {
@@ -5876,7 +5923,7 @@ function _extends$2() {
     };
     return _extends$2.apply(this, arguments);
 }
-function _iterable_to_array_limit$v(arr, i) {
+function _iterable_to_array_limit$w(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -5900,7 +5947,7 @@ function _iterable_to_array_limit$v(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$v() {
+function _non_iterable_rest$w() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_destructuring_empty$2(o) {
@@ -5977,16 +6024,16 @@ function _object_without_properties_loose$b(source, excluded) {
     }
     return target;
 }
-function _sliced_to_array$v(arr, i) {
-    return _array_with_holes$v(arr) || _iterable_to_array_limit$v(arr, i) || _unsupported_iterable_to_array$z(arr, i) || _non_iterable_rest$v();
+function _sliced_to_array$w(arr, i) {
+    return _array_with_holes$w(arr) || _iterable_to_array_limit$w(arr, i) || _unsupported_iterable_to_array$A(arr, i) || _non_iterable_rest$w();
 }
-function _unsupported_iterable_to_array$z(o, minLen) {
+function _unsupported_iterable_to_array$A(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$z(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$A(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$z(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$A(o, minLen);
 }
 function Dialog(_0) {
     _object_destructuring_empty$2(_0); var props = _extends$2({}, _0);
@@ -5995,10 +6042,16 @@ function Dialog(_0) {
     }, props));
 }
 function DialogPortal(_0) {
-    _object_destructuring_empty$2(_0); var props = _extends$2({}, _0);
-    return /*#__PURE__*/ jsx(Dialog$1.Portal, _object_spread$o({
+    var container = _0.container, props = _object_without_properties$b(_0, [
+        "container"
+    ]);
+    var _ref;
+    var inheritedContainer = usePortalContainer();
+    return /*#__PURE__*/ jsx(Dialog$1.Portal, _object_spread_props$k(_object_spread$o({
         "data-slot": "dialog-portal"
-    }, props));
+    }, props), {
+        container: (_ref = container !== null && container !== void 0 ? container : inheritedContainer) !== null && _ref !== void 0 ? _ref : undefined
+    }));
 }
 function DialogOverlay(_0) {
     var className = _0.className, props = _object_without_properties$b(_0, [
@@ -6016,7 +6069,7 @@ function DialogContent(_0) {
         "showCloseButton",
         "maximizable"
     ]);
-    var _React_useState = _sliced_to_array$v(React.useState(false), 2), isMaximized = _React_useState[0], setIsMaximized = _React_useState[1];
+    var _React_useState = _sliced_to_array$w(React.useState(false), 2), isMaximized = _React_useState[0], setIsMaximized = _React_useState[1];
     return /*#__PURE__*/ jsxs(DialogPortal, {
         children: [
             /*#__PURE__*/ jsx(DialogOverlay, {}),
@@ -6245,13 +6298,17 @@ function SelectTrigger(_0) {
     }));
 }
 function SelectContent(_0) {
-    var className = _0.className, children = _0.children, _0_position = _0.position, position = _0_position === void 0 ? 'item-aligned' : _0_position, _0_align = _0.align, align = _0_align === void 0 ? 'center' : _0_align, props = _object_without_properties$a(_0, [
+    var className = _0.className, children = _0.children, _0_position = _0.position, position = _0_position === void 0 ? 'item-aligned' : _0_position, _0_align = _0.align, align = _0_align === void 0 ? 'center' : _0_align, container = _0.container, props = _object_without_properties$a(_0, [
         "className",
         "children",
         "position",
-        "align"
+        "align",
+        "container"
     ]);
+    var _ref;
+    var inheritedContainer = usePortalContainer();
     return /*#__PURE__*/ jsx(Select$1.Portal, {
+        container: (_ref = container !== null && container !== void 0 ? container : inheritedContainer) !== null && _ref !== void 0 ? _ref : undefined,
         children: /*#__PURE__*/ jsxs(Select$1.Content, _object_spread_props$j(_object_spread$n({
             "data-slot": "select-content",
             "data-align-trigger": position === 'item-aligned',
@@ -6636,12 +6693,16 @@ function TooltipTrigger(_0) {
     }, props));
 }
 function TooltipContent(_0) {
-    var className = _0.className, _0_sideOffset = _0.sideOffset, sideOffset = _0_sideOffset === void 0 ? 4 : _0_sideOffset, children = _0.children, props = _object_without_properties$7(_0, [
+    var className = _0.className, _0_sideOffset = _0.sideOffset, sideOffset = _0_sideOffset === void 0 ? 4 : _0_sideOffset, children = _0.children, container = _0.container, props = _object_without_properties$7(_0, [
         "className",
         "sideOffset",
-        "children"
+        "children",
+        "container"
     ]);
+    var _ref;
+    var inheritedContainer = usePortalContainer();
     return /*#__PURE__*/ jsx(Tooltip$1.Portal, {
+        container: (_ref = container !== null && container !== void 0 ? container : inheritedContainer) !== null && _ref !== void 0 ? _ref : undefined,
         children: /*#__PURE__*/ jsxs(Tooltip$1.Content, _object_spread_props$i(_object_spread$k({
             "data-slot": "tooltip-content",
             sideOffset: sideOffset,
@@ -6732,16 +6793,16 @@ var RoomPlatformRuntimeErrorCode = {
     LIVEKIT_TOKEN_EXPIRED: 'LIVEKIT_TOKEN_EXPIRED'
 };
 
-function _array_like_to_array$y(arr, len) {
+function _array_like_to_array$z(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$u(arr) {
+function _array_with_holes$v(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$d(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$y(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$z(arr);
 }
 function _assert_this_initialized$1(self) {
     if (self === void 0) {
@@ -6849,7 +6910,7 @@ function _is_native_function$1(fn) {
 function _iterable_to_array$d(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$u(arr, i) {
+function _iterable_to_array_limit$v(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -6873,7 +6934,7 @@ function _iterable_to_array_limit$u(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$u() {
+function _non_iterable_rest$v() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$d() {
@@ -6926,23 +6987,23 @@ function _set_prototype_of$1(o, p) {
     };
     return _set_prototype_of$1(o, p);
 }
-function _sliced_to_array$u(arr, i) {
-    return _array_with_holes$u(arr) || _iterable_to_array_limit$u(arr, i) || _unsupported_iterable_to_array$y(arr, i) || _non_iterable_rest$u();
+function _sliced_to_array$v(arr, i) {
+    return _array_with_holes$v(arr) || _iterable_to_array_limit$v(arr, i) || _unsupported_iterable_to_array$z(arr, i) || _non_iterable_rest$v();
 }
 function _to_consumable_array$d(arr) {
-    return _array_without_holes$d(arr) || _iterable_to_array$d(arr) || _unsupported_iterable_to_array$y(arr) || _non_iterable_spread$d();
+    return _array_without_holes$d(arr) || _iterable_to_array$d(arr) || _unsupported_iterable_to_array$z(arr) || _non_iterable_spread$d();
 }
 function _type_of$a(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-function _unsupported_iterable_to_array$y(o, minLen) {
+function _unsupported_iterable_to_array$z(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$y(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$z(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$y(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$z(o, minLen);
 }
 function _wrap_native_super$1(Class) {
     var _cache = typeof Map === "function" ? new Map() : undefined;
@@ -7116,7 +7177,7 @@ var createIdempotencyKey$1 = function() {
 var actionPendingKey = function(name, payload) {
     if (!payload) return name;
     return "".concat(name, ":").concat(JSON.stringify(Object.entries(payload).sort(function(param, param1) {
-        var _param = _sliced_to_array$u(param, 1), left = _param[0], _param1 = _sliced_to_array$u(param1, 1), right = _param1[0];
+        var _param = _sliced_to_array$v(param, 1), left = _param[0], _param1 = _sliced_to_array$v(param1, 1), right = _param1[0];
         return left.localeCompare(right);
     })));
 };
@@ -7221,21 +7282,21 @@ var activeDevicesStateOf = function(room) {
 };
 function RoomPlatformProvider(param) {
     var apiBaseUrl = param.apiBaseUrl, children = param.children, launchToken = param.launchToken, onError = param.onError, onLifecycleEvent = param.onLifecycleEvent, onLaunchTicketRequired = param.onLaunchTicketRequired;
-    var _useState = _sliced_to_array$u(useState(), 2), access = _useState[0], setAccess = _useState[1];
-    var _useState1 = _sliced_to_array$u(useState(emptyActiveDevices), 2), activeDevices = _useState1[0], setActiveDevices = _useState1[1];
-    var _useState2 = _sliced_to_array$u(useState(), 2), actionError = _useState2[0], setActionError = _useState2[1];
-    var _useState3 = _sliced_to_array$u(useState(), 2), controlState = _useState3[0], setControlState = _useState3[1];
-    var _useState4 = _sliced_to_array$u(useState(), 2), error = _useState4[0], setError = _useState4[1];
-    var _useState5 = _sliced_to_array$u(useState(null), 2), localCameraTrack = _useState5[0], setLocalCameraTrack = _useState5[1];
-    var _useState6 = _sliced_to_array$u(useState(null), 2), localPreviewTrack = _useState6[0], setLocalPreviewTrack = _useState6[1];
-    var _useState7 = _sliced_to_array$u(useState(emptyLocalMediaState), 2), localMedia = _useState7[0], setLocalMedia = _useState7[1];
-    var _useState8 = _sliced_to_array$u(useState(), 2), privateRoom = _useState8[0], setPrivateRoom = _useState8[1];
-    var _useState9 = _sliced_to_array$u(useState(), 2), privateRoomConnection = _useState9[0], setPrivateRoomConnection = _useState9[1];
-    var _useState10 = _sliced_to_array$u(useState(false), 2), privateMediaRestorePending = _useState10[0], setPrivateMediaRestorePending = _useState10[1];
-    var _useState11 = _sliced_to_array$u(useState([]), 2), pendingActionKeys = _useState11[0], setPendingActionKeys = _useState11[1];
-    var _useState12 = _sliced_to_array$u(useState([]), 2), pendingLocalMediaKinds = _useState12[0], setPendingLocalMediaKinds = _useState12[1];
-    var _useState13 = _sliced_to_array$u(useState(null), 2), room = _useState13[0], setRoom = _useState13[1];
-    var _useState14 = _sliced_to_array$u(useState('connecting'), 2), status = _useState14[0], setStatus = _useState14[1];
+    var _useState = _sliced_to_array$v(useState(), 2), access = _useState[0], setAccess = _useState[1];
+    var _useState1 = _sliced_to_array$v(useState(emptyActiveDevices), 2), activeDevices = _useState1[0], setActiveDevices = _useState1[1];
+    var _useState2 = _sliced_to_array$v(useState(), 2), actionError = _useState2[0], setActionError = _useState2[1];
+    var _useState3 = _sliced_to_array$v(useState(), 2), controlState = _useState3[0], setControlState = _useState3[1];
+    var _useState4 = _sliced_to_array$v(useState(), 2), error = _useState4[0], setError = _useState4[1];
+    var _useState5 = _sliced_to_array$v(useState(null), 2), localCameraTrack = _useState5[0], setLocalCameraTrack = _useState5[1];
+    var _useState6 = _sliced_to_array$v(useState(null), 2), localPreviewTrack = _useState6[0], setLocalPreviewTrack = _useState6[1];
+    var _useState7 = _sliced_to_array$v(useState(emptyLocalMediaState), 2), localMedia = _useState7[0], setLocalMedia = _useState7[1];
+    var _useState8 = _sliced_to_array$v(useState(), 2), privateRoom = _useState8[0], setPrivateRoom = _useState8[1];
+    var _useState9 = _sliced_to_array$v(useState(), 2), privateRoomConnection = _useState9[0], setPrivateRoomConnection = _useState9[1];
+    var _useState10 = _sliced_to_array$v(useState(false), 2), privateMediaRestorePending = _useState10[0], setPrivateMediaRestorePending = _useState10[1];
+    var _useState11 = _sliced_to_array$v(useState([]), 2), pendingActionKeys = _useState11[0], setPendingActionKeys = _useState11[1];
+    var _useState12 = _sliced_to_array$v(useState([]), 2), pendingLocalMediaKinds = _useState12[0], setPendingLocalMediaKinds = _useState12[1];
+    var _useState13 = _sliced_to_array$v(useState(null), 2), room = _useState13[0], setRoom = _useState13[1];
+    var _useState14 = _sliced_to_array$v(useState('connecting'), 2), status = _useState14[0], setStatus = _useState14[1];
     var isMountedRef = useRef(false);
     var accessRef = useRef(undefined);
     var controlStateRef = useRef(undefined);
@@ -8642,12 +8703,46 @@ function useRoomPlatform() {
     return context;
 }
 
-function _array_like_to_array$x(arr, len) {
+var RoomPlatformToastContext = /*#__PURE__*/ createContext({
+    error: function(message) {
+        return toast.error(message);
+    }
+});
+function RoomPlatformToastProvider(param) {
+    var children = param.children;
+    var portalContainer = usePortalContainer();
+    var toasterId = useId();
+    var roomPlatformToast = useMemo(function() {
+        return {
+            error: function(message) {
+                return toast.error(message, {
+                    toasterId: toasterId
+                });
+            }
+        };
+    }, [
+        toasterId
+    ]);
+    return /*#__PURE__*/ jsxs(RoomPlatformToastContext.Provider, {
+        value: roomPlatformToast,
+        children: [
+            children,
+            portalContainer ? /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(Toaster, {
+                id: toasterId
+            }), portalContainer) : null
+        ]
+    });
+}
+function useRoomPlatformToast() {
+    return useContext(RoomPlatformToastContext);
+}
+
+function _array_like_to_array$y(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$t(arr) {
+function _array_with_holes$u(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$l(gen, resolve, reject, _next, _throw, key, arg) {
@@ -8679,7 +8774,7 @@ function _async_to_generator$l(fn) {
         });
     };
 }
-function _iterable_to_array_limit$t(arr, i) {
+function _iterable_to_array_limit$u(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -8703,19 +8798,19 @@ function _iterable_to_array_limit$t(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$t() {
+function _non_iterable_rest$u() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$t(arr, i) {
-    return _array_with_holes$t(arr) || _iterable_to_array_limit$t(arr, i) || _unsupported_iterable_to_array$x(arr, i) || _non_iterable_rest$t();
+function _sliced_to_array$u(arr, i) {
+    return _array_with_holes$u(arr) || _iterable_to_array_limit$u(arr, i) || _unsupported_iterable_to_array$y(arr, i) || _non_iterable_rest$u();
 }
-function _unsupported_iterable_to_array$x(o, minLen) {
+function _unsupported_iterable_to_array$y(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$x(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$y(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$x(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$y(o, minLen);
 }
 function _ts_generator$l(thisArg, body) {
     var f, y, t, _ = {
@@ -8870,9 +8965,9 @@ function useRoomPlatformPrivateRoom() {
     var _useRoomPlatformPrivateRoomContext = useRoomPlatformPrivateRoomContext(), projectedPrivateRoom = _useRoomPlatformPrivateRoomContext.privateRoom, projectedPrivateRoomConnection = _useRoomPlatformPrivateRoomContext.privateRoomConnection;
     var privateRoom = isValidPrivateRoomProjection(projectedPrivateRoom) ? projectedPrivateRoom : undefined;
     var privateRoomConnection = privateRoom && isValidPrivateRoomConnection(projectedPrivateRoomConnection, privateRoom) ? projectedPrivateRoomConnection : undefined;
-    var _useState = _sliced_to_array$t(useState(false), 2), isAcceptingPrivateRoom = _useState[0], setIsAcceptingPrivateRoom = _useState[1];
-    var _useState1 = _sliced_to_array$t(useState(false), 2), isEndingPrivateRoom = _useState1[0], setIsEndingPrivateRoom = _useState1[1];
-    var _useState2 = _sliced_to_array$t(useState(), 2), privateRoomReturnedNoticeId = _useState2[0], setPrivateRoomReturnedNoticeId = _useState2[1];
+    var _useState = _sliced_to_array$u(useState(false), 2), isAcceptingPrivateRoom = _useState[0], setIsAcceptingPrivateRoom = _useState[1];
+    var _useState1 = _sliced_to_array$u(useState(false), 2), isEndingPrivateRoom = _useState1[0], setIsEndingPrivateRoom = _useState1[1];
+    var _useState2 = _sliced_to_array$u(useState(), 2), privateRoomReturnedNoticeId = _useState2[0], setPrivateRoomReturnedNoticeId = _useState2[1];
     var actorExternalId = externalActorIdFromMetadata$1(room === null || room === void 0 ? void 0 : room.localParticipant.metadata);
     var isCaller = Boolean(actorExternalId && (privateRoom === null || privateRoom === void 0 ? void 0 : privateRoom.callerExternalActorId) === actorExternalId);
     var isStudent = Boolean(actorExternalId && (privateRoom === null || privateRoom === void 0 ? void 0 : privateRoom.studentExternalActorId) === actorExternalId);
@@ -9123,21 +9218,21 @@ function useRoomPlatformPrivateRoomPendingState() {
     };
 }
 
-function _array_like_to_array$w(arr, len) {
+function _array_like_to_array$x(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$s(arr) {
+function _array_with_holes$t(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$c(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$w(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$x(arr);
 }
 function _iterable_to_array$c(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$s(arr, i) {
+function _iterable_to_array_limit$t(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -9161,29 +9256,29 @@ function _iterable_to_array_limit$s(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$s() {
+function _non_iterable_rest$t() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$c() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$s(arr, i) {
-    return _array_with_holes$s(arr) || _iterable_to_array_limit$s(arr, i) || _unsupported_iterable_to_array$w(arr, i) || _non_iterable_rest$s();
+function _sliced_to_array$t(arr, i) {
+    return _array_with_holes$t(arr) || _iterable_to_array_limit$t(arr, i) || _unsupported_iterable_to_array$x(arr, i) || _non_iterable_rest$t();
 }
 function _to_consumable_array$c(arr) {
-    return _array_without_holes$c(arr) || _iterable_to_array$c(arr) || _unsupported_iterable_to_array$w(arr) || _non_iterable_spread$c();
+    return _array_without_holes$c(arr) || _iterable_to_array$c(arr) || _unsupported_iterable_to_array$x(arr) || _non_iterable_spread$c();
 }
 function _type_of$9(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-function _unsupported_iterable_to_array$w(o, minLen) {
+function _unsupported_iterable_to_array$x(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$w(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$x(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$w(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$x(o, minLen);
 }
 var externalActorIdFromMetadata = function(metadata) {
     if (!metadata) return undefined;
@@ -9231,7 +9326,7 @@ var snapshotPresence = function(room, controlState) {
 };
 function useRoomPresence() {
     var _useRoomPlatform = useRoomPlatform(), controlState = _useRoomPlatform.controlState, room = _useRoomPlatform.room;
-    var _useState = _sliced_to_array$s(useState(function() {
+    var _useState = _sliced_to_array$t(useState(function() {
         return snapshotPresence(room, controlState);
     }), 2), presence = _useState[0], setPresence = _useState[1];
     useEffect(function() {
@@ -9272,15 +9367,15 @@ function useRoomPresence() {
     return presence;
 }
 
-function _array_like_to_array$v(arr, len) {
+function _array_like_to_array$w(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$r(arr) {
+function _array_with_holes$s(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$r(arr, i) {
+function _iterable_to_array_limit$s(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -9304,19 +9399,19 @@ function _iterable_to_array_limit$r(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$r() {
+function _non_iterable_rest$s() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$r(arr, i) {
-    return _array_with_holes$r(arr) || _iterable_to_array_limit$r(arr, i) || _unsupported_iterable_to_array$v(arr, i) || _non_iterable_rest$r();
+function _sliced_to_array$s(arr, i) {
+    return _array_with_holes$s(arr) || _iterable_to_array_limit$s(arr, i) || _unsupported_iterable_to_array$w(arr, i) || _non_iterable_rest$s();
 }
-function _unsupported_iterable_to_array$v(o, minLen) {
+function _unsupported_iterable_to_array$w(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$v(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$w(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$v(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$w(o, minLen);
 }
 function RoomParticipantActions(param) {
     var _param_isActiveSpeaker = param.isActiveSpeaker, isActiveSpeaker = _param_isActiveSpeaker === void 0 ? false : _param_isActiveSpeaker, isLocal = param.isLocal, isOnline = param.isOnline, participant = param.participant, participantIdentity = param.participantIdentity;
@@ -9330,7 +9425,8 @@ function RoomParticipantActions(param) {
     var resolvedIsLocal = (_ref = isLocal !== null && isLocal !== void 0 ? isLocal : mappedPresence === null || mappedPresence === void 0 ? void 0 : mappedPresence.isLocal) !== null && _ref !== void 0 ? _ref : false;
     var resolvedIsOnline = isOnline !== null && isOnline !== void 0 ? isOnline : Boolean(mappedPresence);
     var _useRoomPlatformPrivateRoom = useRoomPlatformPrivateRoom(), cancelPrivateRoom = _useRoomPlatformPrivateRoom.cancelPrivateRoom, currentPrivateRoomOperation = _useRoomPlatformPrivateRoom.currentPrivateRoomOperation;
-    var _useState = _sliced_to_array$r(useState(false), 2), privateCallHovered = _useState[0], setPrivateCallHovered = _useState[1];
+    var roomPlatformToast = useRoomPlatformToast();
+    var _useState = _sliced_to_array$s(useState(false), 2), privateCallHovered = _useState[0], setPrivateCallHovered = _useState[1];
     var actionPayload = resolvedParticipantIdentity ? {
         participantIdentity: resolvedParticipantIdentity
     } : undefined;
@@ -9344,19 +9440,19 @@ function RoomParticipantActions(param) {
     var setActiveSpeaker = function() {
         if (!actionPayload || isSettingActiveSpeakerPending) return;
         void performAction(RoomPlatformAction.SPEAKER_SET, actionPayload).catch(function() {
-            toast.error('Không gọi được học sinh phát biểu. Vui lòng thử lại.');
+            roomPlatformToast.error('Không gọi được học sinh phát biểu. Vui lòng thử lại.');
         });
     };
     var startPrivateRoom = function() {
         if (!canInvitePrivateRoom || !actionPayload || isInvitingPrivateRoom) return;
         void performAction(RoomPlatformAction.PRIVATE_ROOM_INVITE, actionPayload).catch(function() {
-            toast.error('Không thể gọi riêng học sinh này. Vui lòng thử lại.');
+            roomPlatformToast.error('Không thể gọi riêng học sinh này. Vui lòng thử lại.');
         });
     };
     var cancelPrivateRoomCall = function() {
         if (!canCancelPrivateRoom) return;
         void cancelPrivateRoom().catch(function() {
-            toast.error('Không hủy được cuộc gọi riêng. Vui lòng thử lại.');
+            roomPlatformToast.error('Không hủy được cuộc gọi riêng. Vui lòng thử lại.');
         });
     };
     return /*#__PURE__*/ jsxs("div", {
@@ -9680,7 +9776,7 @@ function RoomPlatformVideoTile(param) {
     return /*#__PURE__*/ jsxs("div", {
         "aria-label": resolvedLabel,
         className: [
-            'relative overflow-hidden rounded-lg bg-slate-900 text-white ring-1 ring-white/10',
+            'relative overflow-hidden rounded-lg bg-slate-900 text-white',
             className
         ].filter(Boolean).join(' '),
         "data-kind": kind,
@@ -9724,12 +9820,12 @@ function RoomPlatformActiveSpeaker(param) {
     }) : null;
 }
 
-function _array_like_to_array$u(arr, len) {
+function _array_like_to_array$v(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$q(arr) {
+function _array_with_holes$r(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _instanceof$2(left, right) {
@@ -9739,7 +9835,7 @@ function _instanceof$2(left, right) {
         return left instanceof right;
     }
 }
-function _iterable_to_array_limit$q(arr, i) {
+function _iterable_to_array_limit$r(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -9763,19 +9859,19 @@ function _iterable_to_array_limit$q(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$q() {
+function _non_iterable_rest$r() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$q(arr, i) {
-    return _array_with_holes$q(arr) || _iterable_to_array_limit$q(arr, i) || _unsupported_iterable_to_array$u(arr, i) || _non_iterable_rest$q();
+function _sliced_to_array$r(arr, i) {
+    return _array_with_holes$r(arr) || _iterable_to_array_limit$r(arr, i) || _unsupported_iterable_to_array$v(arr, i) || _non_iterable_rest$r();
 }
-function _unsupported_iterable_to_array$u(o, minLen) {
+function _unsupported_iterable_to_array$v(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$u(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$v(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$u(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$v(o, minLen);
 }
 var IDLE_TIMEOUT_MS = 15000;
 var ROOM_CONTROL_ACTIVITY_SELECTOR = '[data-room-control-activity]';
@@ -9784,10 +9880,10 @@ var isRoomControlActivityTarget = function(target) {
 };
 function RoomPlatformControlAnchor(param) {
     var _param_anchorKind = param.anchorKind, anchorKind = _param_anchorKind === void 0 ? 'main-panel' : _param_anchorKind, children = param.children, controlBar = param.controlBar, _param_anchorScope = param.anchorScope, anchorScope = _param_anchorScope === void 0 ? 'panel' : _param_anchorScope, className = param.className, style = param.style;
-    var _useState = _sliced_to_array$q(useState(true), 2), isVisible = _useState[0], setIsVisible = _useState[1];
-    var _useState1 = _sliced_to_array$q(useState(false), 2), isHovered = _useState1[0], setIsHovered = _useState1[1];
-    var _useState2 = _sliced_to_array$q(useState(false), 2), isFocusWithin = _useState2[0], setIsFocusWithin = _useState2[1];
-    var _useState3 = _sliced_to_array$q(useState(0), 2), activityVersion = _useState3[0], setActivityVersion = _useState3[1];
+    var _useState = _sliced_to_array$r(useState(true), 2), isVisible = _useState[0], setIsVisible = _useState[1];
+    var _useState1 = _sliced_to_array$r(useState(false), 2), isHovered = _useState1[0], setIsHovered = _useState1[1];
+    var _useState2 = _sliced_to_array$r(useState(false), 2), isFocusWithin = _useState2[0], setIsFocusWithin = _useState2[1];
+    var _useState3 = _sliced_to_array$r(useState(0), 2), activityVersion = _useState3[0], setActivityVersion = _useState3[1];
     var anchorRef = useRef(null);
     var timerRef = useRef(null);
     var focusTimerRef = useRef(null);
@@ -9921,15 +10017,15 @@ function RoomPlatformControlAnchor(param) {
     });
 }
 
-function _array_like_to_array$t(arr, len) {
+function _array_like_to_array$u(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$p(arr) {
+function _array_with_holes$q(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$p(arr, i) {
+function _iterable_to_array_limit$q(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -9953,19 +10049,19 @@ function _iterable_to_array_limit$p(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$p() {
+function _non_iterable_rest$q() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$p(arr, i) {
-    return _array_with_holes$p(arr) || _iterable_to_array_limit$p(arr, i) || _unsupported_iterable_to_array$t(arr, i) || _non_iterable_rest$p();
+function _sliced_to_array$q(arr, i) {
+    return _array_with_holes$q(arr) || _iterable_to_array_limit$q(arr, i) || _unsupported_iterable_to_array$u(arr, i) || _non_iterable_rest$q();
 }
-function _unsupported_iterable_to_array$t(o, minLen) {
+function _unsupported_iterable_to_array$u(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$t(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$u(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$t(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$u(o, minLen);
 }
 var ALLOWED_MIME_TYPES = [
     'image/jpeg',
@@ -9990,8 +10086,8 @@ function RoomPlatformBackgroundSettings(param) {
     var state = param.state, presets = param.presets, uploadItems = param.uploadItems, onSelectNoBackground = param.onSelectNoBackground, onSelectBlurLevel = param.onSelectBlurLevel, onSelectPreset = param.onSelectPreset, onSelectUploaded = param.onSelectUploaded, onDeleteUploaded = param.onDeleteUploaded, onUpload = param.onUpload;
     var _ref;
     var _presets_;
-    var _useState = _sliced_to_array$p(useState(null), 2), uploadError = _useState[0], setUploadError = _useState[1];
-    var _useState1 = _sliced_to_array$p(useState(function() {
+    var _useState = _sliced_to_array$q(useState(null), 2), uploadError = _useState[0], setUploadError = _useState[1];
+    var _useState1 = _sliced_to_array$q(useState(function() {
         return backgroundTabFromState(state.mode);
     }), 2), activeTab = _useState1[0], setActiveTab = _useState1[1];
     var fileInputId = useId();
@@ -10414,12 +10510,12 @@ var getSelectedDevice = function(devices, selectedValue) {
     });
 };
 
-function _array_like_to_array$s(arr, len) {
+function _array_like_to_array$t(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$o(arr) {
+function _array_with_holes$p(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$k(gen, resolve, reject, _next, _throw, key, arg) {
@@ -10451,7 +10547,7 @@ function _async_to_generator$k(fn) {
         });
     };
 }
-function _iterable_to_array_limit$o(arr, i) {
+function _iterable_to_array_limit$p(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -10475,19 +10571,19 @@ function _iterable_to_array_limit$o(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$o() {
+function _non_iterable_rest$p() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$o(arr, i) {
-    return _array_with_holes$o(arr) || _iterable_to_array_limit$o(arr, i) || _unsupported_iterable_to_array$s(arr, i) || _non_iterable_rest$o();
+function _sliced_to_array$p(arr, i) {
+    return _array_with_holes$p(arr) || _iterable_to_array_limit$p(arr, i) || _unsupported_iterable_to_array$t(arr, i) || _non_iterable_rest$p();
 }
-function _unsupported_iterable_to_array$s(o, minLen) {
+function _unsupported_iterable_to_array$t(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$s(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$t(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$s(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$t(o, minLen);
 }
 function _ts_generator$k(thisArg, body) {
     var f, y, t, _ = {
@@ -10643,12 +10739,12 @@ function RoomPlatformDeviceSettings(param) {
     var _useRoomPlatform = useRoomPlatform(), activeDevices = _useRoomPlatform.activeDevices, room = _useRoomPlatform.room, switchActiveDevice = _useRoomPlatform.switchActiveDevice;
     var enumerateDevices = (_navigator_mediaDevices = navigator.mediaDevices) === null || _navigator_mediaDevices === void 0 ? void 0 : _navigator_mediaDevices.enumerateDevices;
     var canEnumerateDevices = typeof enumerateDevices === 'function';
-    var _useState = _sliced_to_array$o(useState([]), 2), devices = _useState[0], setDevices = _useState[1];
-    var _useState1 = _sliced_to_array$o(useState(canEnumerateDevices ? (_activeDevices_audioinput = activeDevices.audioinput) !== null && _activeDevices_audioinput !== void 0 ? _activeDevices_audioinput : fallbacks.audioinput.value : fallbacks.audioinput.value), 2), selectedMicrophoneId = _useState1[0], setSelectedMicrophoneId = _useState1[1];
-    var _useState2 = _sliced_to_array$o(useState(canEnumerateDevices ? (_activeDevices_videoinput = activeDevices.videoinput) !== null && _activeDevices_videoinput !== void 0 ? _activeDevices_videoinput : fallbacks.videoinput.value : fallbacks.videoinput.value), 2), selectedCameraId = _useState2[0], setSelectedCameraId = _useState2[1];
-    var _useState3 = _sliced_to_array$o(useState(canEnumerateDevices ? (_activeDevices_audiooutput = activeDevices.audiooutput) !== null && _activeDevices_audiooutput !== void 0 ? _activeDevices_audiooutput : fallbacks.audiooutput.value : fallbacks.audiooutput.value), 2), selectedSpeakerId = _useState3[0], setSelectedSpeakerId = _useState3[1];
-    var _useState4 = _sliced_to_array$o(useState(null), 2), deviceApplyError = _useState4[0], setDeviceApplyError = _useState4[1];
-    var _useState5 = _sliced_to_array$o(useState(false), 2), isApplyingDevices = _useState5[0], setIsApplyingDevices = _useState5[1];
+    var _useState = _sliced_to_array$p(useState([]), 2), devices = _useState[0], setDevices = _useState[1];
+    var _useState1 = _sliced_to_array$p(useState(canEnumerateDevices ? (_activeDevices_audioinput = activeDevices.audioinput) !== null && _activeDevices_audioinput !== void 0 ? _activeDevices_audioinput : fallbacks.audioinput.value : fallbacks.audioinput.value), 2), selectedMicrophoneId = _useState1[0], setSelectedMicrophoneId = _useState1[1];
+    var _useState2 = _sliced_to_array$p(useState(canEnumerateDevices ? (_activeDevices_videoinput = activeDevices.videoinput) !== null && _activeDevices_videoinput !== void 0 ? _activeDevices_videoinput : fallbacks.videoinput.value : fallbacks.videoinput.value), 2), selectedCameraId = _useState2[0], setSelectedCameraId = _useState2[1];
+    var _useState3 = _sliced_to_array$p(useState(canEnumerateDevices ? (_activeDevices_audiooutput = activeDevices.audiooutput) !== null && _activeDevices_audiooutput !== void 0 ? _activeDevices_audiooutput : fallbacks.audiooutput.value : fallbacks.audiooutput.value), 2), selectedSpeakerId = _useState3[0], setSelectedSpeakerId = _useState3[1];
+    var _useState4 = _sliced_to_array$p(useState(null), 2), deviceApplyError = _useState4[0], setDeviceApplyError = _useState4[1];
+    var _useState5 = _sliced_to_array$p(useState(false), 2), isApplyingDevices = _useState5[0], setIsApplyingDevices = _useState5[1];
     var microphones = useMemo(function() {
         return devices.filter(function(param) {
             var kind = param.kind;
@@ -10908,12 +11004,12 @@ function RoomPlatformDeviceSettings(param) {
     });
 }
 
-function _array_like_to_array$r(arr, len) {
+function _array_like_to_array$s(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$n(arr) {
+function _array_with_holes$o(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$j(gen, resolve, reject, _next, _throw, key, arg) {
@@ -10958,7 +11054,7 @@ function _define_property$k(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$n(arr, i) {
+function _iterable_to_array_limit$o(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -10982,7 +11078,7 @@ function _iterable_to_array_limit$n(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$n() {
+function _non_iterable_rest$o() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$g(target) {
@@ -11055,16 +11151,16 @@ function _object_without_properties_loose$5(source, excluded) {
     }
     return target;
 }
-function _sliced_to_array$n(arr, i) {
-    return _array_with_holes$n(arr) || _iterable_to_array_limit$n(arr, i) || _unsupported_iterable_to_array$r(arr, i) || _non_iterable_rest$n();
+function _sliced_to_array$o(arr, i) {
+    return _array_with_holes$o(arr) || _iterable_to_array_limit$o(arr, i) || _unsupported_iterable_to_array$s(arr, i) || _non_iterable_rest$o();
 }
-function _unsupported_iterable_to_array$r(o, minLen) {
+function _unsupported_iterable_to_array$s(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$r(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$s(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$r(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$s(o, minLen);
 }
 function _ts_generator$j(thisArg, body) {
     var f, y, t, _ = {
@@ -11213,9 +11309,10 @@ function IconTooltipButton$1(_0) {
 function RoomPlatformControlBar(param) {
     var cameraBackground = param.cameraBackground, _param_isFullscreen = param.isFullscreen, isFullscreen = _param_isFullscreen === void 0 ? false : _param_isFullscreen, _param_isTheaterMode = param.isTheaterMode, isTheaterMode = _param_isTheaterMode === void 0 ? false : _param_isTheaterMode, onExit = param.onExit, onToggleFullscreen = param.onToggleFullscreen, onToggleTheaterMode = param.onToggleTheaterMode;
     var _useRoomPlatform = useRoomPlatform(), access = _useRoomPlatform.access, controlState = _useRoomPlatform.controlState, hasCapability = _useRoomPlatform.hasCapability, isLocalMediaPending = _useRoomPlatform.isLocalMediaPending, localMedia = _useRoomPlatform.localMedia, performAction = _useRoomPlatform.performAction, room = _useRoomPlatform.room, setLocalMediaEnabled = _useRoomPlatform.setLocalMediaEnabled;
-    var _useState = _sliced_to_array$n(useState(false), 2), settingsOpen = _useState[0], setSettingsOpen = _useState[1];
-    var _useState1 = _sliced_to_array$n(useState(false), 2), isRequestSpeakPending = _useState1[0], setIsRequestSpeakPending = _useState1[1];
-    var _useState2 = _sliced_to_array$n(useState(false), 2), isCancelSpeakPending = _useState2[0], setIsCancelSpeakPending = _useState2[1];
+    var _useState = _sliced_to_array$o(useState(false), 2), settingsOpen = _useState[0], setSettingsOpen = _useState[1];
+    var _useState1 = _sliced_to_array$o(useState(false), 2), isRequestSpeakPending = _useState1[0], setIsRequestSpeakPending = _useState1[1];
+    var _useState2 = _sliced_to_array$o(useState(false), 2), isCancelSpeakPending = _useState2[0], setIsCancelSpeakPending = _useState2[1];
+    var roomPlatformToast = useRoomPlatformToast();
     var currentParticipant = useRoomPresence().find(function(participant) {
         return participant.isLocal;
     });
@@ -11252,7 +11349,7 @@ function RoomPlatformControlBar(param) {
                         ];
                     case 3:
                         _state.sent();
-                        toast.error('Không gửi được yêu cầu phát biểu. Vui lòng thử lại.');
+                        roomPlatformToast.error('Không gửi được yêu cầu phát biểu. Vui lòng thử lại.');
                         return [
                             3,
                             5
@@ -11299,7 +11396,7 @@ function RoomPlatformControlBar(param) {
                         ];
                     case 3:
                         _state.sent();
-                        toast.error('Không hủy được yêu cầu phát biểu. Vui lòng thử lại.');
+                        roomPlatformToast.error('Không hủy được yêu cầu phát biểu. Vui lòng thử lại.');
                         return [
                             3,
                             5
@@ -11465,12 +11562,12 @@ function RoomPlatformControlBar(param) {
     });
 }
 
-function _array_like_to_array$q(arr, len) {
+function _array_like_to_array$r(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$m(arr) {
+function _array_with_holes$n(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$i(gen, resolve, reject, _next, _throw, key, arg) {
@@ -11502,7 +11599,7 @@ function _async_to_generator$i(fn) {
         });
     };
 }
-function _iterable_to_array_limit$m(arr, i) {
+function _iterable_to_array_limit$n(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -11526,19 +11623,19 @@ function _iterable_to_array_limit$m(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$m() {
+function _non_iterable_rest$n() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$m(arr, i) {
-    return _array_with_holes$m(arr) || _iterable_to_array_limit$m(arr, i) || _unsupported_iterable_to_array$q(arr, i) || _non_iterable_rest$m();
+function _sliced_to_array$n(arr, i) {
+    return _array_with_holes$n(arr) || _iterable_to_array_limit$n(arr, i) || _unsupported_iterable_to_array$r(arr, i) || _non_iterable_rest$n();
 }
-function _unsupported_iterable_to_array$q(o, minLen) {
+function _unsupported_iterable_to_array$r(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$q(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$r(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$q(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$r(o, minLen);
 }
 function _ts_generator$i(thisArg, body) {
     var f, y, t, _ = {
@@ -11642,7 +11739,8 @@ function _ts_generator$i(thisArg, body) {
 function RoomPlatformCurrentOperationStrip(param) {
     var activeSpeakerParticipantIdentity = param.activeSpeakerParticipantIdentity, canClearActiveSpeaker = param.canClearActiveSpeaker, isClearingActiveSpeaker = param.isClearingActiveSpeaker, onClearActiveSpeaker = param.onClearActiveSpeaker, currentPrivateRoomOperation = param.currentPrivateRoomOperation, onCancelPrivateRoom = param.onCancelPrivateRoom, participants = param.participants;
     var _ref, _ref1;
-    var _useState = _sliced_to_array$m(useState(false), 2), isCancelingPrivateRoomOperation = _useState[0], setIsCancelingPrivateRoomOperation = _useState[1];
+    var _useState = _sliced_to_array$n(useState(false), 2), isCancelingPrivateRoomOperation = _useState[0], setIsCancelingPrivateRoomOperation = _useState[1];
+    var roomPlatformToast = useRoomPlatformToast();
     var activeSpeaker = activeSpeakerParticipantIdentity ? participants.find(function(participant) {
         return participant.participantIdentity === activeSpeakerParticipantIdentity;
     }) : undefined;
@@ -11680,7 +11778,7 @@ function RoomPlatformCurrentOperationStrip(param) {
                         ];
                     case 3:
                         _state.sent();
-                        toast.error('Không hủy được cuộc gọi riêng. Vui lòng thử lại.');
+                        roomPlatformToast.error('Không hủy được cuộc gọi riêng. Vui lòng thử lại.');
                         return [
                             3,
                             5
@@ -11908,15 +12006,15 @@ function RoomPlatformMonitorSidebarVideoTile(props) {
     return /*#__PURE__*/ jsx(RoomPlatformMonitorVideoTile, _object_spread$f({}, props));
 }
 
-function _array_like_to_array$p(arr, len) {
+function _array_like_to_array$q(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$l(arr) {
+function _array_with_holes$m(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$l(arr, i) {
+function _iterable_to_array_limit$m(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -11940,19 +12038,19 @@ function _iterable_to_array_limit$l(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$l() {
+function _non_iterable_rest$m() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$l(arr, i) {
-    return _array_with_holes$l(arr) || _iterable_to_array_limit$l(arr, i) || _unsupported_iterable_to_array$p(arr, i) || _non_iterable_rest$l();
+function _sliced_to_array$m(arr, i) {
+    return _array_with_holes$m(arr) || _iterable_to_array_limit$m(arr, i) || _unsupported_iterable_to_array$q(arr, i) || _non_iterable_rest$m();
 }
-function _unsupported_iterable_to_array$p(o, minLen) {
+function _unsupported_iterable_to_array$q(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$p(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$q(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$p(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$q(o, minLen);
 }
 var hasAvailableTrackMedia$1 = function(param) {
     var publication = param.publication;
@@ -11965,7 +12063,7 @@ var hasAvailableTrackMedia$1 = function(param) {
 };
 function RoomPlatformMonitorStage(param) {
     var roster = param.roster, _param_pageSize = param.pageSize, pageSize = _param_pageSize === void 0 ? 12 : _param_pageSize;
-    var _useState = _sliced_to_array$l(useState(1), 2), page = _useState[0], setPage = _useState[1];
+    var _useState = _sliced_to_array$m(useState(1), 2), page = _useState[0], setPage = _useState[1];
     var cameraTracks = useTracks([
         Track.Source.Camera
     ]);
@@ -12168,13 +12266,13 @@ function useRoomPlatformMonitorViewer(param) {
     ]);
 }
 
-function _array_like_to_array$o(arr, len) {
+function _array_like_to_array$p(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
 function _array_without_holes$b(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$o(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$p(arr);
 }
 function asyncGeneratorStep$h(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -12266,19 +12364,19 @@ function _object_spread_props$d(target, source) {
     return target;
 }
 function _to_consumable_array$b(arr) {
-    return _array_without_holes$b(arr) || _iterable_to_array$b(arr) || _unsupported_iterable_to_array$o(arr) || _non_iterable_spread$b();
+    return _array_without_holes$b(arr) || _iterable_to_array$b(arr) || _unsupported_iterable_to_array$p(arr) || _non_iterable_spread$b();
 }
 function _type_of$8(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-function _unsupported_iterable_to_array$o(o, minLen) {
+function _unsupported_iterable_to_array$p(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$o(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$p(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$o(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$p(o, minLen);
 }
 function _ts_generator$h(thisArg, body) {
     var f, y, t, _ = {
@@ -13096,12 +13194,12 @@ var saveRoomPlatformUploadAndSelect = function(file) {
     })();
 };
 
-function _array_like_to_array$n(arr, len) {
+function _array_like_to_array$o(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$k(arr) {
+function _array_with_holes$l(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$g(gen, resolve, reject, _next, _throw, key, arg) {
@@ -13146,7 +13244,7 @@ function _define_property$h(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$k(arr, i) {
+function _iterable_to_array_limit$l(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -13170,7 +13268,7 @@ function _iterable_to_array_limit$k(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$k() {
+function _non_iterable_rest$l() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$d(target) {
@@ -13207,16 +13305,16 @@ function _object_spread_props$c(target, source) {
     }
     return target;
 }
-function _sliced_to_array$k(arr, i) {
-    return _array_with_holes$k(arr) || _iterable_to_array_limit$k(arr, i) || _unsupported_iterable_to_array$n(arr, i) || _non_iterable_rest$k();
+function _sliced_to_array$l(arr, i) {
+    return _array_with_holes$l(arr) || _iterable_to_array_limit$l(arr, i) || _unsupported_iterable_to_array$o(arr, i) || _non_iterable_rest$l();
 }
-function _unsupported_iterable_to_array$n(o, minLen) {
+function _unsupported_iterable_to_array$o(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$n(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$o(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$n(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$o(o, minLen);
 }
 function _ts_generator$g(thisArg, body) {
     var f, y, t, _ = {
@@ -13339,7 +13437,7 @@ function useRoomPlatformCameraBackground(param) {
     var _ref, _ref1;
     var _uploadItems_find, _uploadItems_;
     var isSupported = typeof window !== 'undefined' && supportsBackgroundProcessors();
-    var _useState = _sliced_to_array$k(useState(function() {
+    var _useState = _sliced_to_array$l(useState(function() {
         var saved = loadRoomPlatformCameraBackgroundSettings();
         return mapSettingsToState(saved, isSupported);
     }), 2), state = _useState[0], setState = _useState[1];
@@ -13351,7 +13449,7 @@ function useRoomPlatformCameraBackground(param) {
     var activeObjectUrlRef = useRef(null);
     var uploadPreviewUrlsRef = useRef([]);
     var lastAppliedKeyRef = useRef('');
-    var _useState1 = _sliced_to_array$k(useState([]), 2), uploadItems = _useState1[0], setUploadItems = _useState1[1];
+    var _useState1 = _sliced_to_array$l(useState([]), 2), uploadItems = _useState1[0], setUploadItems = _useState1[1];
     var clearActiveObjectUrl = useCallback(function() {
         if (!activeObjectUrlRef.current) return;
         URL.revokeObjectURL(activeObjectUrlRef.current);
@@ -14212,16 +14310,16 @@ function useRoomPlatformCameraBackground(param) {
     };
 }
 
-function _array_like_to_array$m(arr, len) {
+function _array_like_to_array$n(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$j(arr) {
+function _array_with_holes$k(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$a(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$m(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$n(arr);
 }
 function asyncGeneratorStep$f(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -14255,7 +14353,7 @@ function _async_to_generator$f(fn) {
 function _iterable_to_array$a(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$j(arr, i) {
+function _iterable_to_array_limit$k(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -14279,25 +14377,25 @@ function _iterable_to_array_limit$j(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$j() {
+function _non_iterable_rest$k() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$a() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$j(arr, i) {
-    return _array_with_holes$j(arr) || _iterable_to_array_limit$j(arr, i) || _unsupported_iterable_to_array$m(arr, i) || _non_iterable_rest$j();
+function _sliced_to_array$k(arr, i) {
+    return _array_with_holes$k(arr) || _iterable_to_array_limit$k(arr, i) || _unsupported_iterable_to_array$n(arr, i) || _non_iterable_rest$k();
 }
 function _to_consumable_array$a(arr) {
-    return _array_without_holes$a(arr) || _iterable_to_array$a(arr) || _unsupported_iterable_to_array$m(arr) || _non_iterable_spread$a();
+    return _array_without_holes$a(arr) || _iterable_to_array$a(arr) || _unsupported_iterable_to_array$n(arr) || _non_iterable_spread$a();
 }
-function _unsupported_iterable_to_array$m(o, minLen) {
+function _unsupported_iterable_to_array$n(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$m(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$n(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$m(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$n(o, minLen);
 }
 function _ts_generator$f(thisArg, body) {
     var f, y, t, _ = {
@@ -14427,7 +14525,7 @@ function RoomPlatformPrivateRoomConnection(param) {
     var canShareScreen = connection.permissions.includes('media:share_screen');
     var canPublish = connection.permissions.includes('media:publish');
     var baseScopeKey = isEligible ? "".concat(state.id, ":").concat(currentExternalActorId, ":").concat(scopeOf(connection)) : '';
-    var _useState = _sliced_to_array$j(useState(null), 2), room = _useState[0], setRoom = _useState[1];
+    var _useState = _sliced_to_array$k(useState(null), 2), room = _useState[0], setRoom = _useState[1];
     var roomRef = useRef(null);
     var generationRef = useRef(0);
     var scopeRef = useRef(undefined);
@@ -14435,7 +14533,7 @@ function RoomPlatformPrivateRoomConnection(param) {
     var onDisconnectedRef = useRef(onDisconnected);
     var refreshedTokenKeysRef = useRef(new Set());
     var refreshRequestedScopeRef = useRef(undefined);
-    var _useState1 = _sliced_to_array$j(useState(0), 2), generationNonce = _useState1[0], setGenerationNonce = _useState1[1];
+    var _useState1 = _sliced_to_array$k(useState(0), 2), generationNonce = _useState1[0], setGenerationNonce = _useState1[1];
     var scopeKey = baseScopeKey ? "".concat(baseScopeKey, ":").concat(generationNonce) : '';
     // A token refresh must not be a generation key. Pin the token to the scope so
     // ordinary actor-scoped refetches keep the existing LiveKit Room instance.
@@ -14636,12 +14734,12 @@ function RoomPlatformPrivateRoomConnection(param) {
     });
 }
 
-function _array_like_to_array$l(arr, len) {
+function _array_like_to_array$m(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$i(arr) {
+function _array_with_holes$j(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$e(gen, resolve, reject, _next, _throw, key, arg) {
@@ -14673,7 +14771,7 @@ function _async_to_generator$e(fn) {
         });
     };
 }
-function _iterable_to_array_limit$i(arr, i) {
+function _iterable_to_array_limit$j(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -14697,19 +14795,19 @@ function _iterable_to_array_limit$i(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$i() {
+function _non_iterable_rest$j() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$i(arr, i) {
-    return _array_with_holes$i(arr) || _iterable_to_array_limit$i(arr, i) || _unsupported_iterable_to_array$l(arr, i) || _non_iterable_rest$i();
+function _sliced_to_array$j(arr, i) {
+    return _array_with_holes$j(arr) || _iterable_to_array_limit$j(arr, i) || _unsupported_iterable_to_array$m(arr, i) || _non_iterable_rest$j();
 }
-function _unsupported_iterable_to_array$l(o, minLen) {
+function _unsupported_iterable_to_array$m(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$l(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$m(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$l(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$m(o, minLen);
 }
 function _ts_generator$e(thisArg, body) {
     var f, y, t, _ = {
@@ -14812,8 +14910,9 @@ function _ts_generator$e(thisArg, body) {
 }
 function useRoomPlatformPrivateRoomControlActions(param) {
     var canShareScreen = param.canShareScreen, isScreenSharing = param.isScreenSharing, onStartScreenShare = param.onStartScreenShare, onStopScreenShare = param.onStopScreenShare, onEnd = param.onEnd, onScreenSharingChange = param.onScreenSharingChange, setLocalScreenShareEnabled = param.setLocalScreenShareEnabled, onEndingChange = param.onEndingChange, onEnded = param.onEnded;
-    var _useState = _sliced_to_array$i(useState(false), 2), isScreenSharePending = _useState[0], setIsScreenSharePending = _useState[1];
-    var _useState1 = _sliced_to_array$i(useState(false), 2), isEnding = _useState1[0], setIsEnding = _useState1[1];
+    var roomPlatformToast = useRoomPlatformToast();
+    var _useState = _sliced_to_array$j(useState(false), 2), isScreenSharePending = _useState[0], setIsScreenSharePending = _useState[1];
+    var _useState1 = _sliced_to_array$j(useState(false), 2), isEnding = _useState1[0], setIsEnding = _useState1[1];
     var isStartingRef = useRef(false);
     var isStoppingRef = useRef(false);
     var isEndingRef = useRef(false);
@@ -14881,7 +14980,7 @@ function useRoomPlatformPrivateRoomControlActions(param) {
                         ];
                     case 8:
                         _state.sent();
-                        toast.error('Không thể chia sẻ màn hình trong phòng riêng.');
+                        roomPlatformToast.error('Không thể chia sẻ màn hình trong phòng riêng.');
                         return [
                             3,
                             10
@@ -14937,7 +15036,7 @@ function useRoomPlatformPrivateRoomControlActions(param) {
                         ];
                     case 4:
                         _state.sent();
-                        toast.error('Không thể dừng chia sẻ màn hình trong phòng riêng.');
+                        roomPlatformToast.error('Không thể dừng chia sẻ màn hình trong phòng riêng.');
                         return [
                             3,
                             6
@@ -15017,12 +15116,12 @@ function useRoomPlatformPrivateRoomControlActions(param) {
     };
 }
 
-function _array_like_to_array$k(arr, len) {
+function _array_like_to_array$l(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$h(arr) {
+function _array_with_holes$i(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$d(gen, resolve, reject, _next, _throw, key, arg) {
@@ -15067,7 +15166,7 @@ function _define_property$g(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$h(arr, i) {
+function _iterable_to_array_limit$i(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -15091,7 +15190,7 @@ function _iterable_to_array_limit$h(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$h() {
+function _non_iterable_rest$i() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$c(target) {
@@ -15164,16 +15263,16 @@ function _object_without_properties_loose$4(source, excluded) {
     }
     return target;
 }
-function _sliced_to_array$h(arr, i) {
-    return _array_with_holes$h(arr) || _iterable_to_array_limit$h(arr, i) || _unsupported_iterable_to_array$k(arr, i) || _non_iterable_rest$h();
+function _sliced_to_array$i(arr, i) {
+    return _array_with_holes$i(arr) || _iterable_to_array_limit$i(arr, i) || _unsupported_iterable_to_array$l(arr, i) || _non_iterable_rest$i();
 }
-function _unsupported_iterable_to_array$k(o, minLen) {
+function _unsupported_iterable_to_array$l(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$k(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$l(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$k(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$l(o, minLen);
 }
 function _ts_generator$d(thisArg, body) {
     var f, y, t, _ = {
@@ -15380,7 +15479,7 @@ var runAsyncSafely = function(action) {
 function RoomPlatformPrivateRoomControlBar(param) {
     var publishEnabled = param.publishEnabled, permissions = param.permissions, screenShareDisabled = param.screenShareDisabled, onStartScreenShare = param.onStartScreenShare, onStopScreenShare = param.onStopScreenShare, onEnd = param.onEnd, onEndingChange = param.onEndingChange, onEnded = param.onEnded;
     var room = useRoomContext();
-    var _useState = _sliced_to_array$h(useState(false), 2), isScreenSharing = _useState[0], setIsScreenSharing = _useState[1];
+    var _useState = _sliced_to_array$i(useState(false), 2), isScreenSharing = _useState[0], setIsScreenSharing = _useState[1];
     var isScreenSharingRef = useRef(isScreenSharing);
     var isScreenSharePendingRef = useRef(false);
     var isNotifyingExternalStopRef = useRef(false);
@@ -15693,13 +15792,13 @@ var WhiteboardSocketEvent = /*#__PURE__*/ function(WhiteboardSocketEvent) {
     return WhiteboardSocketEvent;
 }({});
 
-function _array_like_to_array$j(arr, len) {
+function _array_like_to_array$k(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
 function _array_without_holes$9(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$j(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$k(arr);
 }
 function _define_property$f(obj, key, value) {
     if (key in obj) {
@@ -15791,15 +15890,15 @@ function _object_without_properties_loose$3(source, excluded) {
     return target;
 }
 function _to_consumable_array$9(arr) {
-    return _array_without_holes$9(arr) || _iterable_to_array$9(arr) || _unsupported_iterable_to_array$j(arr) || _non_iterable_spread$9();
+    return _array_without_holes$9(arr) || _iterable_to_array$9(arr) || _unsupported_iterable_to_array$k(arr) || _non_iterable_spread$9();
 }
-function _unsupported_iterable_to_array$j(o, minLen) {
+function _unsupported_iterable_to_array$k(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$j(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$k(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$j(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$k(o, minLen);
 }
 function createWhiteboardLocalHistory(createOperationId) {
     var state = {
@@ -15942,13 +16041,13 @@ function omitLatestRevision$1(object) {
     return input;
 }
 
-function _array_like_to_array$i(arr, len) {
+function _array_like_to_array$j(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
 function _array_without_holes$8(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$i(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$j(arr);
 }
 function _iterable_to_array$8(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
@@ -15957,15 +16056,15 @@ function _non_iterable_spread$8() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _to_consumable_array$8(arr) {
-    return _array_without_holes$8(arr) || _iterable_to_array$8(arr) || _unsupported_iterable_to_array$i(arr) || _non_iterable_spread$8();
+    return _array_without_holes$8(arr) || _iterable_to_array$8(arr) || _unsupported_iterable_to_array$j(arr) || _non_iterable_spread$8();
 }
-function _unsupported_iterable_to_array$i(o, minLen) {
+function _unsupported_iterable_to_array$j(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$i(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$j(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$i(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$j(o, minLen);
 }
 var STROKE_WIDTHS = {
     xs: 2,
@@ -16308,16 +16407,16 @@ function pointInPolygon(point, polygon) {
     return inside;
 }
 
-function _array_like_to_array$h(arr, len) {
+function _array_like_to_array$i(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$g(arr) {
+function _array_with_holes$h(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$7(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$h(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$i(arr);
 }
 function _define_property$e(obj, key, value) {
     if (key in obj) {
@@ -16335,7 +16434,7 @@ function _define_property$e(obj, key, value) {
 function _iterable_to_array$7(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$g(arr, i) {
+function _iterable_to_array_limit$h(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -16359,7 +16458,7 @@ function _iterable_to_array_limit$g(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$g() {
+function _non_iterable_rest$h() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$7() {
@@ -16399,23 +16498,23 @@ function _object_spread_props$9(target, source) {
     }
     return target;
 }
-function _sliced_to_array$g(arr, i) {
-    return _array_with_holes$g(arr) || _iterable_to_array_limit$g(arr, i) || _unsupported_iterable_to_array$h(arr, i) || _non_iterable_rest$g();
+function _sliced_to_array$h(arr, i) {
+    return _array_with_holes$h(arr) || _iterable_to_array_limit$h(arr, i) || _unsupported_iterable_to_array$i(arr, i) || _non_iterable_rest$h();
 }
 function _to_consumable_array$7(arr) {
-    return _array_without_holes$7(arr) || _iterable_to_array$7(arr) || _unsupported_iterable_to_array$h(arr) || _non_iterable_spread$7();
+    return _array_without_holes$7(arr) || _iterable_to_array$7(arr) || _unsupported_iterable_to_array$i(arr) || _non_iterable_spread$7();
 }
 function _type_of$6(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-function _unsupported_iterable_to_array$h(o, minLen) {
+function _unsupported_iterable_to_array$i(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$h(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$i(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$i(o, minLen);
 }
 function resetSceneState() {
     return {
@@ -16693,7 +16792,7 @@ function applyOperationToScene(state, operation, revision, optimisticRestoreObje
 }
 function sortRecoveredObjects(state) {
     state.recoveredObjects = new Map(_to_consumable_array$7(state.recoveredObjects.entries()).sort(function(param, param1) {
-        var _param = _sliced_to_array$g(param, 2), left = _param[1], _param1 = _sliced_to_array$g(param1, 2), right = _param1[1];
+        var _param = _sliced_to_array$h(param, 2), left = _param[1], _param1 = _sliced_to_array$h(param1, 2), right = _param1[1];
         return left.latestRevision === right.latestRevision ? left.objectId.localeCompare(right.objectId) : left.latestRevision - right.latestRevision;
     }));
 }
@@ -16754,7 +16853,7 @@ function removeExpiredMarkers(state, now) {
     var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
     try {
         for(var _iterator = state.recoveredObjects[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-            var _step_value = _sliced_to_array$g(_step.value, 2), objectId = _step_value[0], object = _step_value[1];
+            var _step_value = _sliced_to_array$h(_step.value, 2), objectId = _step_value[0], object = _step_value[1];
             if (isExpiredMarker(object, now)) state.recoveredObjects.delete(objectId);
         }
     } catch (err) {
@@ -17464,16 +17563,16 @@ function FilledDiamondShapeIcon() {
     });
 }
 
-function _array_like_to_array$g(arr, len) {
+function _array_like_to_array$h(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$f(arr) {
+function _array_with_holes$g(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$6(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$g(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$h(arr);
 }
 function _define_property$c(obj, key, value) {
     if (key in obj) {
@@ -17491,7 +17590,7 @@ function _define_property$c(obj, key, value) {
 function _iterable_to_array$6(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$f(arr, i) {
+function _iterable_to_array_limit$g(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -17515,7 +17614,7 @@ function _iterable_to_array_limit$f(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$f() {
+function _non_iterable_rest$g() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$6() {
@@ -17555,19 +17654,19 @@ function _object_spread_props$8(target, source) {
     }
     return target;
 }
-function _sliced_to_array$f(arr, i) {
-    return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$g(arr, i) || _non_iterable_rest$f();
+function _sliced_to_array$g(arr, i) {
+    return _array_with_holes$g(arr) || _iterable_to_array_limit$g(arr, i) || _unsupported_iterable_to_array$h(arr, i) || _non_iterable_rest$g();
 }
 function _to_consumable_array$6(arr) {
-    return _array_without_holes$6(arr) || _iterable_to_array$6(arr) || _unsupported_iterable_to_array$g(arr) || _non_iterable_spread$6();
+    return _array_without_holes$6(arr) || _iterable_to_array$6(arr) || _unsupported_iterable_to_array$h(arr) || _non_iterable_spread$6();
 }
-function _unsupported_iterable_to_array$g(o, minLen) {
+function _unsupported_iterable_to_array$h(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$g(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$h(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(o, minLen);
 }
 var WHITEBOARD_VIEWPORT_PADDING = 16;
 var WHITEBOARD_DOCK_SNAP_DISTANCE = 64;
@@ -17598,14 +17697,14 @@ var WHITEBOARD_POPOVER_SIZES = {
     }
 };
 function useWhiteboardToolbarLayout() {
-    var _useState = _sliced_to_array$f(useState(function() {
+    var _useState = _sliced_to_array$g(useState(function() {
         return getViewport();
     }), 2), viewport = _useState[0], setViewport = _useState[1];
     var viewportRef = useRef(viewport);
-    var _useState1 = _sliced_to_array$f(useState(false), 2), toolbarOpen = _useState1[0], setToolbarOpen = _useState1[1];
-    var _useState2 = _sliced_to_array$f(useState(null), 2), activePopover = _useState2[0], setActivePopover = _useState2[1];
-    var _useState3 = _sliced_to_array$f(useState(false), 2), hasOpened = _useState3[0], setHasOpened = _useState3[1];
-    var _useState4 = _sliced_to_array$f(useState(function() {
+    var _useState1 = _sliced_to_array$g(useState(false), 2), toolbarOpen = _useState1[0], setToolbarOpen = _useState1[1];
+    var _useState2 = _sliced_to_array$g(useState(null), 2), activePopover = _useState2[0], setActivePopover = _useState2[1];
+    var _useState3 = _sliced_to_array$g(useState(false), 2), hasOpened = _useState3[0], setHasOpened = _useState3[1];
+    var _useState4 = _sliced_to_array$g(useState(function() {
         return getToolbarLayout(getDefaultToolbarPosition(getViewport()), getViewport());
     }), 2), layout = _useState4[0], setLayout = _useState4[1];
     var dragOriginRef = useRef(undefined);
@@ -17831,10 +17930,10 @@ function getOutsideDock(position, orientation, viewport) {
         ]
     ];
     return (_candidates_filter_sort_ = candidates.filter(function(param) {
-        var _param = _sliced_to_array$f(param, 2), distance = _param[1];
+        var _param = _sliced_to_array$g(param, 2), distance = _param[1];
         return distance > 0;
     }).sort(function(param, param1) {
-        var _param = _sliced_to_array$f(param, 2), left = _param[1], _param1 = _sliced_to_array$f(param1, 2), right = _param1[1];
+        var _param = _sliced_to_array$g(param, 2), left = _param[1], _param1 = _sliced_to_array$g(param1, 2), right = _param1[1];
         return left - right;
     })[0]) === null || _candidates_filter_sort_ === void 0 ? void 0 : _candidates_filter_sort_[0];
 }
@@ -17997,12 +18096,12 @@ function TriggerIcon() {
     });
 }
 
-function _array_like_to_array$f(arr, len) {
+function _array_like_to_array$g(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$e(arr) {
+function _array_with_holes$f(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$b(obj, key, value) {
@@ -18018,7 +18117,7 @@ function _define_property$b(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$e(arr, i) {
+function _iterable_to_array_limit$f(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -18042,19 +18141,19 @@ function _iterable_to_array_limit$e(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$e() {
+function _non_iterable_rest$f() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$e(arr, i) {
-    return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$f(arr, i) || _non_iterable_rest$e();
+function _sliced_to_array$f(arr, i) {
+    return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$g(arr, i) || _non_iterable_rest$f();
 }
-function _unsupported_iterable_to_array$f(o, minLen) {
+function _unsupported_iterable_to_array$g(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$f(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$g(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$f(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(o, minLen);
 }
 function WhiteboardToolbar(param) {
     var _param_activeColor = param.activeColor, activeColor = _param_activeColor === void 0 ? DEFAULT_WHITEBOARD_COLOR : _param_activeColor, _param_activeDrawKind = param.activeDrawKind, activeDrawKind = _param_activeDrawKind === void 0 ? DEFAULT_WHITEBOARD_DRAW_KIND : _param_activeDrawKind, _param_activeTool = param.activeTool, activeTool = _param_activeTool === void 0 ? 'draw' : _param_activeTool, _param_activeWidthPreset = param.activeWidthPreset, activeWidthPreset = _param_activeWidthPreset === void 0 ? DEFAULT_WHITEBOARD_WIDTH_PRESET : _param_activeWidthPreset, _param_canRedo = param.canRedo, canRedo = _param_canRedo === void 0 ? false : _param_canRedo, _param_canUndo = param.canUndo, canUndo = _param_canUndo === void 0 ? false : _param_canUndo, onClose = param.onClose, onColorChange = param.onColorChange, onDrawKindChange = param.onDrawKindChange, onOpenChange = param.onOpenChange, onOperation = param.onOperation, onRedo = param.onRedo, onRetry = param.onRetry, onToolChange = param.onToolChange, onUndo = param.onUndo, onWidthPresetChange = param.onWidthPresetChange, permissions = param.permissions, _param_runtimeState = param.runtimeState, runtimeState = _param_runtimeState === void 0 ? 'ready' : _param_runtimeState;
@@ -18067,7 +18166,7 @@ function WhiteboardToolbar(param) {
     var colorButtonRef = useRef(null);
     var drawPopoverRef = useRef(null);
     var colorPopoverRef = useRef(null);
-    var _useState = _sliced_to_array$e(useState(undefined), 2), measuredPopoverStyle = _useState[0], setMeasuredPopoverStyle = _useState[1];
+    var _useState = _sliced_to_array$f(useState(undefined), 2), measuredPopoverStyle = _useState[0], setMeasuredPopoverStyle = _useState[1];
     var interactionDisabled = !canWrite || runtimeState !== 'ready';
     var clearDisabled = !canClear || runtimeState !== 'ready';
     var tooltipSide = getToolbarTooltipSide(dock);
@@ -18565,15 +18664,15 @@ function CloseIcon() {
     });
 }
 
-function _array_like_to_array$e(arr, len) {
+function _array_like_to_array$f(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$d(arr) {
+function _array_with_holes$e(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$d(arr, i) {
+function _iterable_to_array_limit$e(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -18597,23 +18696,23 @@ function _iterable_to_array_limit$d(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$d() {
+function _non_iterable_rest$e() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$d(arr, i) {
-    return _array_with_holes$d(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$e(arr, i) || _non_iterable_rest$d();
+function _sliced_to_array$e(arr, i) {
+    return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$f(arr, i) || _non_iterable_rest$e();
 }
-function _unsupported_iterable_to_array$e(o, minLen) {
+function _unsupported_iterable_to_array$f(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$e(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$f(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$e(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$f(o, minLen);
 }
 function useWhiteboardFrameRect() {
     var frameRef = useRef(null);
-    var _useState = _sliced_to_array$d(useState(undefined), 2), frameRect = _useState[0], setFrameRect = _useState[1];
+    var _useState = _sliced_to_array$e(useState(undefined), 2), frameRect = _useState[0], setFrameRect = _useState[1];
     useEffect(function() {
         var element = frameRef.current;
         if (!element) return;
@@ -18648,16 +18747,16 @@ function useWhiteboardFrameRect() {
     };
 }
 
-function _array_like_to_array$d(arr, len) {
+function _array_like_to_array$e(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$c(arr) {
+function _array_with_holes$d(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$5(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$d(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$e(arr);
 }
 function asyncGeneratorStep$c(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -18704,7 +18803,7 @@ function _define_property$a(obj, key, value) {
 function _iterable_to_array$5(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$c(arr, i) {
+function _iterable_to_array_limit$d(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -18728,7 +18827,7 @@ function _iterable_to_array_limit$c(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$c() {
+function _non_iterable_rest$d() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$5() {
@@ -18804,23 +18903,23 @@ function _object_without_properties_loose$2(source, excluded) {
     }
     return target;
 }
-function _sliced_to_array$c(arr, i) {
-    return _array_with_holes$c(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$c();
+function _sliced_to_array$d(arr, i) {
+    return _array_with_holes$d(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$e(arr, i) || _non_iterable_rest$d();
 }
 function _to_consumable_array$5(arr) {
-    return _array_without_holes$5(arr) || _iterable_to_array$5(arr) || _unsupported_iterable_to_array$d(arr) || _non_iterable_spread$5();
+    return _array_without_holes$5(arr) || _iterable_to_array$5(arr) || _unsupported_iterable_to_array$e(arr) || _non_iterable_spread$5();
 }
 function _type_of$5(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-function _unsupported_iterable_to_array$d(o, minLen) {
+function _unsupported_iterable_to_array$e(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$d(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$e(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$e(o, minLen);
 }
 function _ts_generator$c(thisArg, body) {
     var f, y, t, _ = {
@@ -18942,10 +19041,10 @@ function WhiteboardCanvas(param) {
     if (!localHistoryRef.current) localHistoryRef.current = createWhiteboardLocalHistory(function() {
         return createStableId('annotation-history');
     });
-    var _useState = _sliced_to_array$c(useState(function() {
+    var _useState = _sliced_to_array$d(useState(function() {
         return resetSceneState();
     }), 2), sceneState = _useState[0], setSceneState = _useState[1];
-    var _useState1 = _sliced_to_array$c(useState(function() {
+    var _useState1 = _sliced_to_array$d(useState(function() {
         var _ref;
         var _localHistoryRef_current;
         return (_ref = (_localHistoryRef_current = localHistoryRef.current) === null || _localHistoryRef_current === void 0 ? void 0 : _localHistoryRef_current.getState()) !== null && _ref !== void 0 ? _ref : {
@@ -18953,11 +19052,11 @@ function WhiteboardCanvas(param) {
             undoStack: []
         };
     }), 2), localHistoryState = _useState1[0], setLocalHistoryState = _useState1[1];
-    var _useState2 = _sliced_to_array$c(useState(controlledActiveTool !== null && controlledActiveTool !== void 0 ? controlledActiveTool : 'draw'), 2), uncontrolledActiveTool = _useState2[0], setUncontrolledActiveTool = _useState2[1];
-    var _useState3 = _sliced_to_array$c(useState(DEFAULT_WHITEBOARD_DRAW_KIND), 2), activeDrawKind = _useState3[0], setActiveDrawKind = _useState3[1];
-    var _useState4 = _sliced_to_array$c(useState(DEFAULT_WHITEBOARD_COLOR), 2), activeColor = _useState4[0], setActiveColor = _useState4[1];
-    var _useState5 = _sliced_to_array$c(useState(DEFAULT_WHITEBOARD_WIDTH_PRESET), 2), activeWidthPreset = _useState5[0], setActiveWidthPreset = _useState5[1];
-    var _useState6 = _sliced_to_array$c(useState(false), 2), toolbarOpen = _useState6[0], setToolbarOpen = _useState6[1];
+    var _useState2 = _sliced_to_array$d(useState(controlledActiveTool !== null && controlledActiveTool !== void 0 ? controlledActiveTool : 'draw'), 2), uncontrolledActiveTool = _useState2[0], setUncontrolledActiveTool = _useState2[1];
+    var _useState3 = _sliced_to_array$d(useState(DEFAULT_WHITEBOARD_DRAW_KIND), 2), activeDrawKind = _useState3[0], setActiveDrawKind = _useState3[1];
+    var _useState4 = _sliced_to_array$d(useState(DEFAULT_WHITEBOARD_COLOR), 2), activeColor = _useState4[0], setActiveColor = _useState4[1];
+    var _useState5 = _sliced_to_array$d(useState(DEFAULT_WHITEBOARD_WIDTH_PRESET), 2), activeWidthPreset = _useState5[0], setActiveWidthPreset = _useState5[1];
+    var _useState6 = _sliced_to_array$d(useState(false), 2), toolbarOpen = _useState6[0], setToolbarOpen = _useState6[1];
     var activeTool = controlledActiveTool !== null && controlledActiveTool !== void 0 ? controlledActiveTool : uncontrolledActiveTool;
     var hasWritePermission = permissions.includes('whiteboard:write');
     var submitState = whiteboard === null || whiteboard === void 0 ? void 0 : (_whiteboard_submitStatus = whiteboard.submitStatus) === null || _whiteboard_submitStatus === void 0 ? void 0 : _whiteboard_submitStatus.state;
@@ -19560,19 +19659,28 @@ function getNearestMarkerExpiry(objects) {
     return expiries.length ? (_Math = Math).min.apply(_Math, _to_consumable_array$5(expiries)) : undefined;
 }
 function getNormalizedPoint(event, frameRect) {
-    if (!Number.isFinite(frameRect.left) || !Number.isFinite(frameRect.top)) return undefined;
-    if (!Number.isFinite(frameRect.width) || !Number.isFinite(frameRect.height)) return undefined;
-    if (frameRect.width <= 0 || frameRect.height <= 0) return undefined;
+    var currentFrameRect = getPointerFrameRect(event, frameRect);
+    if (!currentFrameRect) return undefined;
     var clientX = getEventCoordinate(event, 'clientX');
     var clientY = getEventCoordinate(event, 'clientY');
     if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) return undefined;
-    var x = (clientX - frameRect.left) / frameRect.width;
-    var y = (clientY - frameRect.top) / frameRect.height;
+    var x = (clientX - currentFrameRect.left) / currentFrameRect.width;
+    var y = (clientY - currentFrameRect.top) / currentFrameRect.height;
     return {
         x: clamp01(x),
         y: clamp01(y)
     };
 }
+function getPointerFrameRect(event, fallback) {
+    var rect = event.currentTarget.getBoundingClientRect();
+    if (Number.isFinite(rect.left) && Number.isFinite(rect.top) && Number.isFinite(rect.width) && Number.isFinite(rect.height) && rect.width > 0 && rect.height > 0) {
+        return rect;
+    }
+    if (!Number.isFinite(fallback.left) || !Number.isFinite(fallback.top) || !Number.isFinite(fallback.width) || !Number.isFinite(fallback.height) || fallback.width <= 0 || fallback.height <= 0) {
+        return undefined;
+    }
+    return fallback;
+}
 function getEventCoordinate(event, key) {
     var _event_nativeEvent;
     if (Number.isFinite(event[key])) return event[key];
@@ -19592,15 +19700,15 @@ function clamp01(value) {
     return Math.max(0, Math.min(1, value));
 }
 
-function _array_like_to_array$c(arr, len) {
+function _array_like_to_array$d(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$b(arr) {
+function _array_with_holes$c(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$b(arr, i) {
+function _iterable_to_array_limit$c(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -19624,19 +19732,19 @@ function _iterable_to_array_limit$b(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$b() {
+function _non_iterable_rest$c() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$b(arr, i) {
-    return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$b();
+function _sliced_to_array$c(arr, i) {
+    return _array_with_holes$c(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$c();
 }
-function _unsupported_iterable_to_array$c(o, minLen) {
+function _unsupported_iterable_to_array$d(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$c(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$d(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
 }
 function createWhiteboardSubmitQueue(options) {
     var _options_now;
@@ -19758,7 +19866,7 @@ function createWhiteboardSubmitQueue(options) {
             var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
             try {
                 var _loop = function() {
-                    var _step_value = _sliced_to_array$b(_step.value, 2), operationId = _step_value[0], revision = _step_value[1];
+                    var _step_value = _sliced_to_array$c(_step.value, 2), operationId = _step_value[0], revision = _step_value[1];
                     var item = queue.find(function(queuedItem) {
                         return queuedItem.operation.operationId === operationId;
                     });
@@ -19819,16 +19927,16 @@ function createWhiteboardSubmitQueue(options) {
     };
 }
 
-function _array_like_to_array$b(arr, len) {
+function _array_like_to_array$c(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$a(arr) {
+function _array_with_holes$b(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$4(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$b(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$c(arr);
 }
 function asyncGeneratorStep$b(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -19875,7 +19983,7 @@ function _define_property$9(obj, key, value) {
 function _iterable_to_array$4(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$a(arr, i) {
+function _iterable_to_array_limit$b(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -19899,7 +20007,7 @@ function _iterable_to_array_limit$a(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$a() {
+function _non_iterable_rest$b() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$4() {
@@ -19939,23 +20047,23 @@ function _object_spread_props$6(target, source) {
     }
     return target;
 }
-function _sliced_to_array$a(arr, i) {
-    return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$a();
+function _sliced_to_array$b(arr, i) {
+    return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$b();
 }
 function _to_consumable_array$4(arr) {
-    return _array_without_holes$4(arr) || _iterable_to_array$4(arr) || _unsupported_iterable_to_array$b(arr) || _non_iterable_spread$4();
+    return _array_without_holes$4(arr) || _iterable_to_array$4(arr) || _unsupported_iterable_to_array$c(arr) || _non_iterable_spread$4();
 }
 function _type_of$4(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-function _unsupported_iterable_to_array$b(o, minLen) {
+function _unsupported_iterable_to_array$c(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$b(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$c(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
 }
 function _ts_generator$b(thisArg, body) {
     var f, y, t, _ = {
@@ -20161,7 +20269,7 @@ function createWhiteboardRuntime() {
         var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
         try {
             for(var _iterator = bufferedCommittedEvents[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                var _step_value = _sliced_to_array$a(_step.value, 2), eventRevision = _step_value[0], event = _step_value[1];
+                var _step_value = _sliced_to_array$b(_step.value, 2), eventRevision = _step_value[0], event = _step_value[1];
                 if (eventRevision > revision) continue;
                 operationIds.set(event.operation.operationId, eventRevision);
                 bufferedCommittedEvents.delete(eventRevision);
@@ -20776,7 +20884,7 @@ function createWhiteboardRuntime() {
                             _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
                             try {
                                 for(_iterator = reconciliation.recoveredOperationIds[Symbol.iterator](); !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                                    _step_value = _sliced_to_array$a(_step.value, 2), operationId = _step_value[0], revision = _step_value[1];
+                                    _step_value = _sliced_to_array$b(_step.value, 2), operationId = _step_value[0], revision = _step_value[1];
                                     recoveredOperationIds.set(operationId, revision);
                                 }
                             } catch (err) {
@@ -20879,7 +20987,7 @@ function createWhiteboardRuntime() {
                         _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
                         try {
                             for(_iterator = recovery.recoveredOperationIds[Symbol.iterator](); !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                                _step_value = _sliced_to_array$a(_step.value, 2), operationId = _step_value[0], revision = _step_value[1];
+                                _step_value = _sliced_to_array$b(_step.value, 2), operationId = _step_value[0], revision = _step_value[1];
                                 recoveredOperationIds.set(operationId, revision);
                             }
                         } catch (err) {
@@ -21449,16 +21557,16 @@ function sortRecoveryObjects(objects) {
     });
 }
 
-function _array_like_to_array$a(arr, len) {
+function _array_like_to_array$b(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$9(arr) {
+function _array_with_holes$a(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$3(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$a(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$b(arr);
 }
 function asyncGeneratorStep$a(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -21505,7 +21613,7 @@ function _define_property$8(obj, key, value) {
 function _iterable_to_array$3(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$9(arr, i) {
+function _iterable_to_array_limit$a(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -21529,7 +21637,7 @@ function _iterable_to_array_limit$9(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$9() {
+function _non_iterable_rest$a() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$3() {
@@ -21569,19 +21677,19 @@ function _object_spread_props$5(target, source) {
     }
     return target;
 }
-function _sliced_to_array$9(arr, i) {
-    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$9();
+function _sliced_to_array$a(arr, i) {
+    return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$a();
 }
 function _to_consumable_array$3(arr) {
-    return _array_without_holes$3(arr) || _iterable_to_array$3(arr) || _unsupported_iterable_to_array$a(arr) || _non_iterable_spread$3();
+    return _array_without_holes$3(arr) || _iterable_to_array$3(arr) || _unsupported_iterable_to_array$b(arr) || _non_iterable_spread$3();
 }
-function _unsupported_iterable_to_array$a(o, minLen) {
+function _unsupported_iterable_to_array$b(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$a(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$b(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
 }
 function _ts_generator$a(thisArg, body) {
     var f, y, t, _ = {
@@ -21685,20 +21793,20 @@ function _ts_generator$a(thisArg, body) {
 function WhiteboardProvider(param) {
     var controlledAuth = param.auth, children = param.children, _param_createRuntime = param.createRuntime, createRuntime = _param_createRuntime === void 0 ? createWhiteboardRuntime : _param_createRuntime, onDiagnostic = param.onDiagnostic, realtimeEndpoint = param.realtimeEndpoint, recoveryPort = param.recoveryPort, socketFactory = param.socketFactory, controlledShareSessionKey = param.shareSessionKey;
     var _boardState_activeShareSessionKey, _ref;
-    var _useState = _sliced_to_array$9(useState(hasValidWhiteboardAuth(controlledAuth) ? controlledAuth : undefined), 2), auth = _useState[0], setAuthState = _useState[1];
-    var _useState1 = _sliced_to_array$9(useState(controlledShareSessionKey), 2), shareSessionKey = _useState1[0], setShareSessionKey = _useState1[1];
-    var _useState2 = _sliced_to_array$9(useState(hasValidWhiteboardAuth(controlledAuth) ? 'connecting' : 'standby'), 2), status = _useState2[0], setStatus = _useState2[1];
-    var _useState3 = _sliced_to_array$9(useState({
+    var _useState = _sliced_to_array$a(useState(hasValidWhiteboardAuth(controlledAuth) ? controlledAuth : undefined), 2), auth = _useState[0], setAuthState = _useState[1];
+    var _useState1 = _sliced_to_array$a(useState(controlledShareSessionKey), 2), shareSessionKey = _useState1[0], setShareSessionKey = _useState1[1];
+    var _useState2 = _sliced_to_array$a(useState(hasValidWhiteboardAuth(controlledAuth) ? 'connecting' : 'standby'), 2), status = _useState2[0], setStatus = _useState2[1];
+    var _useState3 = _sliced_to_array$a(useState({
         activeShareSessionKey: controlledShareSessionKey,
         confirmedRevision: 0,
         headRevision: 0,
         pendingOperationCount: 0
     }), 2), boardState = _useState3[0], setBoardState = _useState3[1];
-    var _useState4 = _sliced_to_array$9(useState('idle'), 2), recoveryStatus = _useState4[0], setRecoveryStatus = _useState4[1];
-    var _useState5 = _sliced_to_array$9(useState(undefined), 2), recovery = _useState5[0], setRecovery = _useState5[1];
-    var _useState6 = _sliced_to_array$9(useState(undefined), 2), committedEvent = _useState6[0], setCommittedEvent = _useState6[1];
-    var _useState7 = _sliced_to_array$9(useState([]), 2), committedEvents = _useState7[0], setCommittedEvents = _useState7[1];
-    var _useState8 = _sliced_to_array$9(useState({
+    var _useState4 = _sliced_to_array$a(useState('idle'), 2), recoveryStatus = _useState4[0], setRecoveryStatus = _useState4[1];
+    var _useState5 = _sliced_to_array$a(useState(undefined), 2), recovery = _useState5[0], setRecovery = _useState5[1];
+    var _useState6 = _sliced_to_array$a(useState(undefined), 2), committedEvent = _useState6[0], setCommittedEvent = _useState6[1];
+    var _useState7 = _sliced_to_array$a(useState([]), 2), committedEvents = _useState7[0], setCommittedEvents = _useState7[1];
+    var _useState8 = _sliced_to_array$a(useState({
         state: 'idle'
     }), 2), submitStatus = _useState8[0], setSubmitStatus = _useState8[1];
     var authRef = useRef(auth);
@@ -22080,12 +22188,12 @@ function WhiteboardProvider(param) {
     });
 }
 
-function _array_like_to_array$9(arr, len) {
+function _array_like_to_array$a(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$8(arr) {
+function _array_with_holes$9(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$7(obj, key, value) {
@@ -22101,7 +22209,7 @@ function _define_property$7(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$8(arr, i) {
+function _iterable_to_array_limit$9(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -22125,7 +22233,7 @@ function _iterable_to_array_limit$8(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$8() {
+function _non_iterable_rest$9() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$5(target) {
@@ -22162,16 +22270,16 @@ function _object_spread_props$4(target, source) {
     }
     return target;
 }
-function _sliced_to_array$8(arr, i) {
-    return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$8();
+function _sliced_to_array$9(arr, i) {
+    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$9();
 }
-function _unsupported_iterable_to_array$9(o, minLen) {
+function _unsupported_iterable_to_array$a(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$9(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$a(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
 }
 var cameraVideoClassName = 'h-full w-full object-cover -scale-x-100';
 var getTrackSource = function(trackRef) {
@@ -22238,7 +22346,7 @@ function useScreenShareAspectRatio(trackRef) {
     var _trackRef_publication;
     var trackSid = trackRef === null || trackRef === void 0 ? void 0 : (_trackRef_publication = trackRef.publication) === null || _trackRef_publication === void 0 ? void 0 : _trackRef_publication.trackSid;
     var fallbackAspectRatio = getAspectRatio(trackRef);
-    var _useState = _sliced_to_array$8(useState(), 2), intrinsicRatio = _useState[0], setIntrinsicRatio = _useState[1];
+    var _useState = _sliced_to_array$9(useState(), 2), intrinsicRatio = _useState[0], setIntrinsicRatio = _useState[1];
     var aspectRatio = intrinsicRatio && (trackSid !== undefined ? intrinsicRatio.trackSid === trackSid : intrinsicRatio.trackSid === undefined && intrinsicRatio.trackRef === trackRef) ? intrinsicRatio.aspectRatio : fallbackAspectRatio;
     var updateFromVideo = useCallback(function(event) {
         var _event_currentTarget = event.currentTarget, videoWidth = _event_currentTarget.videoWidth, videoHeight = _event_currentTarget.videoHeight;
@@ -22262,12 +22370,12 @@ function useScreenShareAspectRatio(trackRef) {
 function ScreenShareFrame(param) {
     var trackRef = param.trackRef, aspectRatio = param.aspectRatio, onLoadedMetadata = param.onLoadedMetadata, onResize = param.onResize, whiteboard = param.whiteboard;
     var frameRef = useRef(null);
-    var _useState = _sliced_to_array$8(useState(), 2), frameSize = _useState[0], setFrameSize = _useState[1];
+    var _useState = _sliced_to_array$9(useState(), 2), frameSize = _useState[0], setFrameSize = _useState[1];
     useLayoutEffect(function() {
         var _frameRef_current;
         var container = (_frameRef_current = frameRef.current) === null || _frameRef_current === void 0 ? void 0 : _frameRef_current.parentElement;
         if (!container) return;
-        var _aspectRatio_split_map = _sliced_to_array$8(aspectRatio.split('/').map(Number), 2), sourceWidth = _aspectRatio_split_map[0], sourceHeight = _aspectRatio_split_map[1];
+        var _aspectRatio_split_map = _sliced_to_array$9(aspectRatio.split('/').map(Number), 2), sourceWidth = _aspectRatio_split_map[0], sourceHeight = _aspectRatio_split_map[1];
         var ratio = sourceWidth / sourceHeight;
         var updateSize = function() {
             var clientWidth = container.clientWidth, clientHeight = container.clientHeight;
@@ -22320,7 +22428,7 @@ function ScreenShareFrame(param) {
 }
 function RoomPlatformPrivateRoomStage(param) {
     var callerExternalActorId = param.callerExternalActorId, studentExternalActorId = param.studentExternalActorId, activeScreenShareExternalActorId = param.activeScreenShareExternalActorId, controlBar = param.controlBar, whiteboard = param.whiteboard;
-    var _useState = _sliced_to_array$8(useState(true), 2), sidebarOpen = _useState[0], setSidebarOpen = _useState[1];
+    var _useState = _sliced_to_array$9(useState(true), 2), sidebarOpen = _useState[0], setSidebarOpen = _useState[1];
     var previousScreenShareExternalActorIdRef = useRef(activeScreenShareExternalActorId);
     var previousShareSessionKeyRef = useRef(undefined);
     var whiteboardContext = useContext(WhiteboardContext);
@@ -23042,13 +23150,13 @@ var WebSocketRealtimeTransport = /*#__PURE__*/ function() {
     return WebSocketRealtimeTransport;
 }();
 
-function _array_like_to_array$8(arr, len) {
+function _array_like_to_array$9(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
 function _array_without_holes$2(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$8(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$9(arr);
 }
 function _class_call_check$1(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -23088,15 +23196,15 @@ function _non_iterable_spread$2() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _to_consumable_array$2(arr) {
-    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$8(arr) || _non_iterable_spread$2();
+    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$9(arr) || _non_iterable_spread$2();
 }
-function _unsupported_iterable_to_array$8(o, minLen) {
+function _unsupported_iterable_to_array$9(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$9(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
 }
 var ChatClientState = /*#__PURE__*/ function() {
     function ChatClientState() {
@@ -24385,12 +24493,12 @@ function ForwardMessageDialog(param) {
     });
 }
 
-function _array_like_to_array$7(arr, len) {
+function _array_like_to_array$8(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$7(arr) {
+function _array_with_holes$8(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$5(gen, resolve, reject, _next, _throw, key, arg) {
@@ -24422,7 +24530,7 @@ function _async_to_generator$5(fn) {
         });
     };
 }
-function _iterable_to_array_limit$7(arr, i) {
+function _iterable_to_array_limit$8(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -24446,19 +24554,19 @@ function _iterable_to_array_limit$7(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$7() {
+function _non_iterable_rest$8() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$7(arr, i) {
-    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
+function _sliced_to_array$8(arr, i) {
+    return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$8();
 }
-function _unsupported_iterable_to_array$7(o, minLen) {
+function _unsupported_iterable_to_array$8(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
 }
 function _ts_generator$5(thisArg, body) {
     var f, y, t, _ = {
@@ -24561,7 +24669,7 @@ function _ts_generator$5(thisArg, body) {
 }
 function MessageComposer(param) {
     var canSend = param.canSend, className = param.className, onSend = param.onSend;
-    var _useState = _sliced_to_array$7(useState(''), 2), text = _useState[0], setText = _useState[1];
+    var _useState = _sliced_to_array$8(useState(''), 2), text = _useState[0], setText = _useState[1];
     if (!canSend) {
         return /*#__PURE__*/ jsx("div", {
             className: cx('navi-chat__readonly', className),
@@ -24677,16 +24785,16 @@ function MessageComposer(param) {
     });
 }
 
-function _array_like_to_array$6(arr, len) {
+function _array_like_to_array$7(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$6(arr) {
+function _array_with_holes$7(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$1(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$6(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$7(arr);
 }
 function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -24727,7 +24835,7 @@ function _instanceof(left, right) {
 function _iterable_to_array$1(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$6(arr, i) {
+function _iterable_to_array_limit$7(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -24751,25 +24859,25 @@ function _iterable_to_array_limit$6(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$6() {
+function _non_iterable_rest$7() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$1() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$6(arr, i) {
-    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
+function _sliced_to_array$7(arr, i) {
+    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
 }
 function _to_consumable_array$1(arr) {
-    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$6(arr) || _non_iterable_spread$1();
+    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$7(arr) || _non_iterable_spread$1();
 }
-function _unsupported_iterable_to_array$6(o, minLen) {
+function _unsupported_iterable_to_array$7(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
 }
 function _ts_generator$4(thisArg, body) {
     var f, y, t, _ = {
@@ -24878,15 +24986,15 @@ function MessageList(param) {
     var restoreScrollSnapshotRef = useRef(undefined);
     var previousMessageCountRef = useRef(messages.length);
     var previousMessagesRef = useRef(messages);
-    var _useState = _sliced_to_array$6(useState(''), 2), draftText = _useState[0], setDraftText = _useState[1];
-    var _useState1 = _sliced_to_array$6(useState(), 2), editingMessageId = _useState1[0], setEditingMessageId = _useState1[1];
-    var _useState2 = _sliced_to_array$6(useState(), 2), openMenuMessageId = _useState2[0], setOpenMenuMessageId = _useState2[1];
+    var _useState = _sliced_to_array$7(useState(''), 2), draftText = _useState[0], setDraftText = _useState[1];
+    var _useState1 = _sliced_to_array$7(useState(), 2), editingMessageId = _useState1[0], setEditingMessageId = _useState1[1];
+    var _useState2 = _sliced_to_array$7(useState(), 2), openMenuMessageId = _useState2[0], setOpenMenuMessageId = _useState2[1];
     var openMenuRef = useRef(null);
-    var _useState3 = _sliced_to_array$6(useState(function() {
+    var _useState3 = _sliced_to_array$7(useState(function() {
         return now().getTime();
     }), 2), currentTimeMs = _useState3[0], setCurrentTimeMs = _useState3[1];
-    var _useState4 = _sliced_to_array$6(useState(true), 2), isAtLatest = _useState4[0], setIsAtLatest = _useState4[1];
-    var _useState5 = _sliced_to_array$6(useState(false), 2), hasNewMessages = _useState5[0], setHasNewMessages = _useState5[1];
+    var _useState4 = _sliced_to_array$7(useState(true), 2), isAtLatest = _useState4[0], setIsAtLatest = _useState4[1];
+    var _useState5 = _sliced_to_array$7(useState(false), 2), hasNewMessages = _useState5[0], setHasNewMessages = _useState5[1];
     var orderedMessages = useMemo(function() {
         return _to_consumable_array$1(messages).sort(compareMessagesByCreatedAt);
     }, [
@@ -25309,12 +25417,12 @@ var formatTime = function(value) {
     }).format(new Date(value));
 };
 
-function _array_like_to_array$5(arr, len) {
+function _array_like_to_array$6(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$5(arr) {
+function _array_with_holes$6(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, key, arg) {
@@ -25346,7 +25454,7 @@ function _async_to_generator$3(fn) {
         });
     };
 }
-function _iterable_to_array_limit$5(arr, i) {
+function _iterable_to_array_limit$6(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -25370,19 +25478,19 @@ function _iterable_to_array_limit$5(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$5() {
+function _non_iterable_rest$6() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$5(arr, i) {
-    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
+function _sliced_to_array$6(arr, i) {
+    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
 }
-function _unsupported_iterable_to_array$5(o, minLen) {
+function _unsupported_iterable_to_array$6(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
 }
 function _ts_generator$3(thisArg, body) {
     var f, y, t, _ = {
@@ -25487,7 +25595,7 @@ function ChatPanel(param) {
     var className = param.className;
     var _messagesByRoom_activeRoom_roomId, _ref, _ref1, _ref2;
     var _useChatContext = useChatContext(), activeRoomId = _useChatContext.activeRoomId, classNames = _useChatContext.classNames, client = _useChatContext.client, currentSubject = _useChatContext.currentSubject, hasMoreByRoom = _useChatContext.hasMoreByRoom, isLoadingOlderByRoom = _useChatContext.isLoadingOlderByRoom, loadOlderMessages = _useChatContext.loadOlderMessages, messagesByRoom = _useChatContext.messagesByRoom, messageActionWindowMs = _useChatContext.messageActionWindowMs, now = _useChatContext.now, onlineCountsByRoom = _useChatContext.onlineCountsByRoom, rooms = _useChatContext.rooms, sendMessage = _useChatContext.sendMessage, deleteMessage = _useChatContext.deleteMessage, editMessage = _useChatContext.editMessage, setActiveRoomId = _useChatContext.setActiveRoomId, setRoomAtLatest = _useChatContext.setRoomAtLatest, status = _useChatContext.status, unreadCountsByRoom = _useChatContext.unreadCountsByRoom;
-    var _useState = _sliced_to_array$5(useState(), 2), forwardingMessage = _useState[0], setForwardingMessage = _useState[1];
+    var _useState = _sliced_to_array$6(useState(), 2), forwardingMessage = _useState[0], setForwardingMessage = _useState[1];
     var activeRoom = findActiveRoom(rooms, activeRoomId);
     var canRead = hasRoomPermission(activeRoom, 'read');
     var canSend = hasRoomPermission(activeRoom, 'send');
@@ -25630,16 +25738,16 @@ var getRoomDisplayRole = function(room) {
     return hasRoomPermission(room, 'forward') ? 'Quản trị' : 'Thành viên';
 };
 
-function _array_like_to_array$4(arr, len) {
+function _array_like_to_array$5(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$4(arr) {
+function _array_with_holes$5(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$4(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$5(arr);
 }
 function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -25686,7 +25794,7 @@ function _define_property$1(obj, key, value) {
 function _iterable_to_array(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$4(arr, i) {
+function _iterable_to_array_limit$5(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -25710,7 +25818,7 @@ function _iterable_to_array_limit$4(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$4() {
+function _non_iterable_rest$5() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread() {
@@ -25750,23 +25858,23 @@ function _object_spread_props$1(target, source) {
     }
     return target;
 }
-function _sliced_to_array$4(arr, i) {
-    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
+function _sliced_to_array$5(arr, i) {
+    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
 }
 function _to_consumable_array(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$4(arr) || _non_iterable_spread();
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$5(arr) || _non_iterable_spread();
 }
 function _type_of(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-function _unsupported_iterable_to_array$4(o, minLen) {
+function _unsupported_iterable_to_array$5(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$4(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
 }
 function _ts_generator$2(thisArg, body) {
     var f, y, t, _ = {
@@ -25874,15 +25982,15 @@ function ChatProvider(param) {
         return new Date();
     } : _param_now, onError = param.onError, refreshToken = param.refreshToken, refreshTokenExpiresAt = param.refreshTokenExpiresAt, realtimeEndpoint = param.realtimeEndpoint, rooms = param.rooms, token = param.token, tokenExpiresAt = param.tokenExpiresAt, tokens = param.tokens;
     var _rooms_;
-    var _useState = _sliced_to_array$4(useState(currentRoomId !== null && currentRoomId !== void 0 ? currentRoomId : (_rooms_ = rooms[0]) === null || _rooms_ === void 0 ? void 0 : _rooms_.roomId), 2), activeRoomId = _useState[0], setActiveRoomId = _useState[1];
-    var _useState1 = _sliced_to_array$4(useState({}), 2), hasMoreByRoom = _useState1[0], setHasMoreByRoom = _useState1[1];
-    var _useState2 = _sliced_to_array$4(useState({}), 2), historyCursorsByRoom = _useState2[0], setHistoryCursorsByRoom = _useState2[1];
-    var _useState3 = _sliced_to_array$4(useState({}), 2), isLoadingOlderByRoom = _useState3[0], setIsLoadingOlderByRoom = _useState3[1];
-    var _useState4 = _sliced_to_array$4(useState(initialMessages), 2), messagesByRoom = _useState4[0], setMessagesByRoom = _useState4[1];
-    var _useState5 = _sliced_to_array$4(useState({}), 2), onlineCountsByRoom = _useState5[0], setOnlineCountsByRoom = _useState5[1];
-    var _useState6 = _sliced_to_array$4(useState({}), 2), roomLatestStateByRoom = _useState6[0], setRoomLatestStateByRoom = _useState6[1];
-    var _useState7 = _sliced_to_array$4(useState('connecting'), 2), status = _useState7[0], setStatus = _useState7[1];
-    var _useState8 = _sliced_to_array$4(useState({}), 2), unreadCountsByRoom = _useState8[0], setUnreadCountsByRoom = _useState8[1];
+    var _useState = _sliced_to_array$5(useState(currentRoomId !== null && currentRoomId !== void 0 ? currentRoomId : (_rooms_ = rooms[0]) === null || _rooms_ === void 0 ? void 0 : _rooms_.roomId), 2), activeRoomId = _useState[0], setActiveRoomId = _useState[1];
+    var _useState1 = _sliced_to_array$5(useState({}), 2), hasMoreByRoom = _useState1[0], setHasMoreByRoom = _useState1[1];
+    var _useState2 = _sliced_to_array$5(useState({}), 2), historyCursorsByRoom = _useState2[0], setHistoryCursorsByRoom = _useState2[1];
+    var _useState3 = _sliced_to_array$5(useState({}), 2), isLoadingOlderByRoom = _useState3[0], setIsLoadingOlderByRoom = _useState3[1];
+    var _useState4 = _sliced_to_array$5(useState(initialMessages), 2), messagesByRoom = _useState4[0], setMessagesByRoom = _useState4[1];
+    var _useState5 = _sliced_to_array$5(useState({}), 2), onlineCountsByRoom = _useState5[0], setOnlineCountsByRoom = _useState5[1];
+    var _useState6 = _sliced_to_array$5(useState({}), 2), roomLatestStateByRoom = _useState6[0], setRoomLatestStateByRoom = _useState6[1];
+    var _useState7 = _sliced_to_array$5(useState('connecting'), 2), status = _useState7[0], setStatus = _useState7[1];
+    var _useState8 = _sliced_to_array$5(useState({}), 2), unreadCountsByRoom = _useState8[0], setUnreadCountsByRoom = _useState8[1];
     var currentSubject = useMemo(function() {
         return subjectFromToken(token);
     }, [
@@ -26309,7 +26417,7 @@ var isChatRoomPresenceDto = function(event) {
     return Boolean(event && (typeof event === "undefined" ? "undefined" : _type_of(event)) === 'object' && 'roomId' in event && typeof event.roomId === 'string' && 'onlineCount' in event && typeof event.onlineCount === 'number');
 };
 var subjectFromToken = function(token) {
-    var _token_split = _sliced_to_array$4(token.split('.'), 2), payload = _token_split[1];
+    var _token_split = _sliced_to_array$5(token.split('.'), 2), payload = _token_split[1];
     if (!payload) return undefined;
     try {
         var normalized = payload.replace(/-/g, '+').replace(/_/g, '/');
@@ -26321,6 +26429,96 @@ var subjectFromToken = function(token) {
     }
 };
 
+var roomPlatformGeneratedStyles = "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties;\n.room-platform-room {\n  --color-red-50: oklch(97.1% 0.013 17.38);\n  --color-red-100: oklch(93.6% 0.032 17.717);\n  --color-red-300: oklch(80.8% 0.114 19.571);\n  --color-red-500: oklch(63.7% 0.237 25.331);\n  --color-red-600: oklch(57.7% 0.245 27.325);\n  --color-amber-50: oklch(98.7% 0.022 95.277);\n  --color-amber-200: oklch(92.4% 0.12 95.746);\n  --color-amber-700: oklch(55.5% 0.163 48.998);\n  --color-amber-950: oklch(27.9% 0.077 45.635);\n  --color-emerald-50: oklch(97.9% 0.021 166.113);\n  --color-emerald-200: oklch(90.5% 0.093 164.15);\n  --color-emerald-400: oklch(76.5% 0.177 163.223);\n  --color-emerald-950: oklch(26.2% 0.051 172.552);\n  --color-sky-50: oklch(97.7% 0.013 236.62);\n  --color-sky-200: oklch(90.1% 0.058 230.902);\n  --color-sky-950: oklch(29.3% 0.066 243.157);\n  --color-slate-50: oklch(98.4% 0.003 247.858);\n  --color-slate-100: oklch(96.8% 0.007 247.896);\n  --color-slate-200: oklch(92.9% 0.013 255.508);\n  --color-slate-300: oklch(86.9% 0.022 252.894);\n  --color-slate-400: oklch(70.4% 0.04 256.788);\n  --color-slate-500: oklch(55.4% 0.046 257.417);\n  --color-slate-700: oklch(37.2% 0.044 257.287);\n  --color-slate-900: oklch(20.8% 0.042 265.755);\n  --color-slate-950: oklch(12.9% 0.042 264.695);\n  --color-black: #000;\n  --color-white: #fff;\n  --spacing: 0.25rem;\n  --container-xs: 20rem;\n  --container-sm: 24rem;\n  --container-2xl: 42rem;\n  --text-xs: 0.75rem;\n  --text-xs--line-height: calc(1 / 0.75);\n  --text-sm: 0.875rem;\n  --text-sm--line-height: calc(1.25 / 0.875);\n  --text-base: 1rem;\n  --text-base--line-height: calc(1.5 / 1);\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n  --radius-md: 0.375rem;\n  --radius-lg: 0.5rem;\n  --radius-xl: 0.75rem;\n  --radius-2xl: 1rem;\n  --radius-4xl: 2rem;\n  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);\n  --ease-out: cubic-bezier(0, 0, 0.2, 1);\n  --animate-spin: spin 1s linear infinite;\n  --blur-xs: 4px;\n  --aspect-video: 16 / 9;\n  --default-transition-duration: 150ms;\n  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  --color-background: #ffffff;\n  --color-foreground: oklch(0.145 0 0);\n  --color-popover: #ffffff;\n  --color-popover-foreground: oklch(0.145 0 0);\n  --color-primary: #242f62;\n  --color-primary-foreground: #ffffff;\n  --color-secondary: #eb6619;\n  --color-secondary-foreground: #ffffff;\n  --color-muted: oklch(0.97 0 0);\n  --color-muted-foreground: oklch(0.556 0 0);\n  --color-accent: oklch(0.97 0 0);\n  --color-accent-foreground: oklch(0.205 0 0);\n  --color-destructive: oklch(0.577 0.245 27.325);\n  --color-border: oklch(0.922 0 0);\n  --color-input: oklch(0.922 0 0);\n  --color-ring: #9dc2f3;\n  --color-liveclass-orange: #eb6619;\n}\n@property --tw-animation-delay {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0s;\n}\n@property --tw-animation-direction {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: normal;\n}\n@property --tw-animation-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-animation-fill-mode {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: none;\n}\n@property --tw-animation-iteration-count {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-enter-blur {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-enter-opacity {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-enter-rotate {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-enter-scale {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-enter-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-enter-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-exit-blur {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-exit-opacity {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-exit-rotate {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-exit-scale {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-exit-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-exit-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n.room-platform-room .pointer-events-none {\n  pointer-events: none;\n}\n.room-platform-room .visible {\n  visibility: visible;\n}\n.room-platform-room .sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border-width: 0;\n}\n.room-platform-room .absolute {\n  position: absolute;\n}\n.room-platform-room .fixed {\n  position: fixed;\n}\n.room-platform-room .relative {\n  position: relative;\n}\n.room-platform-room .static {\n  position: static;\n}\n.room-platform-room .inset-0 {\n  inset: calc(var(--spacing) * 0);\n}\n.room-platform-room .inset-x-0 {\n  inset-inline: calc(var(--spacing) * 0);\n}\n.room-platform-room .inset-x-3 {\n  inset-inline: calc(var(--spacing) * 3);\n}\n.room-platform-room .start {\n  inset-inline-start: var(--spacing);\n}\n.room-platform-room .end {\n  inset-inline-end: var(--spacing);\n}\n.room-platform-room .top-1\\/2 {\n  top: calc(1 / 2 * 100%);\n}\n.room-platform-room .top-2 {\n  top: calc(var(--spacing) * 2);\n}\n.room-platform-room .top-3 {\n  top: calc(var(--spacing) * 3);\n}\n.room-platform-room .top-4 {\n  top: calc(var(--spacing) * 4);\n}\n.room-platform-room .top-7 {\n  top: calc(var(--spacing) * 7);\n}\n.room-platform-room .right-2 {\n  right: calc(var(--spacing) * 2);\n}\n.room-platform-room .right-4 {\n  right: calc(var(--spacing) * 4);\n}\n.room-platform-room .right-7 {\n  right: calc(var(--spacing) * 7);\n}\n.room-platform-room .bottom-0 {\n  bottom: calc(var(--spacing) * 0);\n}\n.room-platform-room .bottom-1 {\n  bottom: calc(var(--spacing) * 1);\n}\n.room-platform-room .bottom-2 {\n  bottom: calc(var(--spacing) * 2);\n}\n.room-platform-room .bottom-3 {\n  bottom: calc(var(--spacing) * 3);\n}\n.room-platform-room .bottom-4 {\n  bottom: calc(var(--spacing) * 4);\n}\n.room-platform-room .left-0 {\n  left: calc(var(--spacing) * 0);\n}\n.room-platform-room .left-1\\/2 {\n  left: calc(1 / 2 * 100%);\n}\n.room-platform-room .left-2 {\n  left: calc(var(--spacing) * 2);\n}\n.room-platform-room .left-3 {\n  left: calc(var(--spacing) * 3);\n}\n.room-platform-room .left-4 {\n  left: calc(var(--spacing) * 4);\n}\n.room-platform-room .isolate {\n  isolation: isolate;\n}\n.room-platform-room .z-10 {\n  z-index: 10;\n}\n.room-platform-room .z-20 {\n  z-index: 20;\n}\n.room-platform-room .z-30 {\n  z-index: 30;\n}\n.room-platform-room .z-40 {\n  z-index: 40;\n}\n.room-platform-room .z-50 {\n  z-index: 50;\n}\n.room-platform-room .z-\\[70\\] {\n  z-index: 70;\n}\n.room-platform-room .container {\n  width: 100%;\n  @media (width >= 40rem) {\n    max-width: 40rem;\n  }\n  @media (width >= 48rem) {\n    max-width: 48rem;\n  }\n  @media (width >= 64rem) {\n    max-width: 64rem;\n  }\n  @media (width >= 80rem) {\n    max-width: 80rem;\n  }\n  @media (width >= 96rem) {\n    max-width: 96rem;\n  }\n}\n.room-platform-room .m-0 {\n  margin: calc(var(--spacing) * 0);\n}\n.room-platform-room .m-auto {\n  margin: auto;\n}\n.room-platform-room .-mx-1 {\n  margin-inline: calc(var(--spacing) * -1);\n}\n.room-platform-room .-mx-4 {\n  margin-inline: calc(var(--spacing) * -4);\n}\n.room-platform-room .mx-auto {\n  margin-inline: auto;\n}\n.room-platform-room .my-1 {\n  margin-block: calc(var(--spacing) * 1);\n}\n.room-platform-room .mt-3 {\n  margin-top: calc(var(--spacing) * 3);\n}\n.room-platform-room .-mb-4 {\n  margin-bottom: calc(var(--spacing) * -4);\n}\n.room-platform-room .mb-2 {\n  margin-bottom: calc(var(--spacing) * 2);\n}\n.room-platform-room .mb-3 {\n  margin-bottom: calc(var(--spacing) * 3);\n}\n.room-platform-room .flex {\n  display: flex;\n}\n.room-platform-room .grid {\n  display: grid;\n}\n.room-platform-room .hidden {\n  display: none;\n}\n.room-platform-room .inline {\n  display: inline;\n}\n.room-platform-room .inline-flex {\n  display: inline-flex;\n}\n.room-platform-room .inline-grid {\n  display: inline-grid;\n}\n.room-platform-room .aspect-video {\n  aspect-ratio: var(--aspect-video);\n}\n.room-platform-room .size-2\\.5 {\n  width: calc(var(--spacing) * 2.5);\n  height: calc(var(--spacing) * 2.5);\n}\n.room-platform-room .size-3\\.5 {\n  width: calc(var(--spacing) * 3.5);\n  height: calc(var(--spacing) * 3.5);\n}\n.room-platform-room .size-4 {\n  width: calc(var(--spacing) * 4);\n  height: calc(var(--spacing) * 4);\n}\n.room-platform-room .size-5 {\n  width: calc(var(--spacing) * 5);\n  height: calc(var(--spacing) * 5);\n}\n.room-platform-room .size-6 {\n  width: calc(var(--spacing) * 6);\n  height: calc(var(--spacing) * 6);\n}\n.room-platform-room .size-7 {\n  width: calc(var(--spacing) * 7);\n  height: calc(var(--spacing) * 7);\n}\n.room-platform-room .size-8 {\n  width: calc(var(--spacing) * 8);\n  height: calc(var(--spacing) * 8);\n}\n.room-platform-room .size-9 {\n  width: calc(var(--spacing) * 9);\n  height: calc(var(--spacing) * 9);\n}\n.room-platform-room .size-10 {\n  width: calc(var(--spacing) * 10);\n  height: calc(var(--spacing) * 10);\n}\n.room-platform-room .size-12 {\n  width: calc(var(--spacing) * 12);\n  height: calc(var(--spacing) * 12);\n}\n.room-platform-room .h-5 {\n  height: calc(var(--spacing) * 5);\n}\n.room-platform-room .h-6 {\n  height: calc(var(--spacing) * 6);\n}\n.room-platform-room .h-7 {\n  height: calc(var(--spacing) * 7);\n}\n.room-platform-room .h-8 {\n  height: calc(var(--spacing) * 8);\n}\n.room-platform-room .h-9 {\n  height: calc(var(--spacing) * 9);\n}\n.room-platform-room .h-10\\! {\n  height: calc(var(--spacing) * 10) !important;\n}\n.room-platform-room .h-12 {\n  height: calc(var(--spacing) * 12);\n}\n.room-platform-room .h-\\[calc\\(100\\%-1px\\)\\] {\n  height: calc(100% - 1px);\n}\n.room-platform-room .h-auto {\n  height: auto;\n}\n.room-platform-room .h-dvh {\n  height: 100dvh;\n}\n.room-platform-room .h-full {\n  height: 100%;\n}\n.room-platform-room .h-px {\n  height: 1px;\n}\n.room-platform-room .h-screen {\n  height: 100vh;\n}\n.room-platform-room .max-h-\\(--radix-select-content-available-height\\) {\n  max-height: var(--radix-select-content-available-height);\n}\n.room-platform-room .max-h-\\[85vh\\] {\n  max-height: 85vh;\n}\n.room-platform-room .max-h-full {\n  max-height: 100%;\n}\n.room-platform-room .min-h-0 {\n  min-height: calc(var(--spacing) * 0);\n}\n.room-platform-room .min-h-10 {\n  min-height: calc(var(--spacing) * 10);\n}\n.room-platform-room .min-h-18 {\n  min-height: calc(var(--spacing) * 18);\n}\n.room-platform-room .min-h-\\[320px\\] {\n  min-height: 320px;\n}\n.room-platform-room .min-h-dvh {\n  min-height: 100dvh;\n}\n.room-platform-room .w-9 {\n  width: calc(var(--spacing) * 9);\n}\n.room-platform-room .w-48 {\n  width: calc(var(--spacing) * 48);\n}\n.room-platform-room .w-auto {\n  width: auto;\n}\n.room-platform-room .w-dvw {\n  width: 100dvw;\n}\n.room-platform-room .w-fit {\n  width: fit-content;\n}\n.room-platform-room .w-full {\n  width: 100%;\n}\n.room-platform-room .w-full\\! {\n  width: 100% !important;\n}\n.room-platform-room .w-screen {\n  width: 100vw;\n}\n.room-platform-room .max-w-\\[40\\%\\] {\n  max-width: 40%;\n}\n.room-platform-room .max-w-\\[calc\\(100\\%-1\\.5rem\\)\\] {\n  max-width: calc(100% - 1.5rem);\n}\n.room-platform-room .max-w-\\[calc\\(100\\%-1rem\\)\\] {\n  max-width: calc(100% - 1rem);\n}\n.room-platform-room .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n  max-width: calc(100% - 2rem);\n}\n.room-platform-room .max-w-full {\n  max-width: 100%;\n}\n.room-platform-room .max-w-none {\n  max-width: none;\n}\n.room-platform-room .max-w-xs {\n  max-width: var(--container-xs);\n}\n.room-platform-room .min-w-0 {\n  min-width: calc(var(--spacing) * 0);\n}\n.room-platform-room .min-w-36 {\n  min-width: calc(var(--spacing) * 36);\n}\n.room-platform-room .flex-1 {\n  flex: 1;\n}\n.room-platform-room .flex-none {\n  flex: none;\n}\n.room-platform-room .shrink-0 {\n  flex-shrink: 0;\n}\n.room-platform-room .origin-\\(--radix-select-content-transform-origin\\) {\n  transform-origin: var(--radix-select-content-transform-origin);\n}\n.room-platform-room .-translate-x-1\\/2 {\n  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n}\n.room-platform-room .-translate-x-full {\n  --tw-translate-x: -100%;\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n}\n.room-platform-room .-translate-y-1\\/2 {\n  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n}\n.room-platform-room .translate-y-0 {\n  --tw-translate-y: calc(var(--spacing) * 0);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n}\n.room-platform-room .translate-y-\\[calc\\(-50\\%_-_2px\\)\\] {\n  --tw-translate-y: calc(-50% - 2px);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n}\n.room-platform-room .translate-y-\\[calc\\(100\\%-0\\.75rem\\)\\] {\n  --tw-translate-y: calc(100% - 0.75rem);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n}\n.room-platform-room .-scale-x-100 {\n  --tw-scale-x: calc(100% * -1);\n  scale: var(--tw-scale-x) var(--tw-scale-y);\n}\n.room-platform-room .rotate-45 {\n  rotate: 45deg;\n}\n.room-platform-room .transform {\n  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n}\n.room-platform-room .animate-in {\n  animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);\n}\n.room-platform-room .animate-spin {\n  animation: var(--animate-spin);\n}\n.room-platform-room .cursor-default {\n  cursor: default;\n}\n.room-platform-room .cursor-not-allowed {\n  cursor: not-allowed;\n}\n.room-platform-room .cursor-pointer {\n  cursor: pointer;\n}\n.room-platform-room .resize {\n  resize: both;\n}\n.room-platform-room .scroll-my-1 {\n  scroll-margin-block: calc(var(--spacing) * 1);\n}\n.room-platform-room .grid-cols-1 {\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.room-platform-room .grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.room-platform-room .grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.room-platform-room .grid-cols-4 {\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.room-platform-room .grid-rows-\\[auto_1fr\\] {\n  grid-template-rows: auto 1fr;\n}\n.room-platform-room .grid-rows-\\[auto_minmax\\(0\\,1fr\\)\\] {\n  grid-template-rows: auto minmax(0,1fr);\n}\n.room-platform-room .grid-rows-\\[minmax\\(240px\\,45dvh\\)_minmax\\(0\\,1fr\\)\\] {\n  grid-template-rows: minmax(240px,45dvh) minmax(0,1fr);\n}\n.room-platform-room .flex-col {\n  flex-direction: column;\n}\n.room-platform-room .flex-col-reverse {\n  flex-direction: column-reverse;\n}\n.room-platform-room .flex-wrap {\n  flex-wrap: wrap;\n}\n.room-platform-room .place-items-center {\n  place-items: center;\n}\n.room-platform-room .content-start {\n  align-content: flex-start;\n}\n.room-platform-room .items-center {\n  align-items: center;\n}\n.room-platform-room .justify-between {\n  justify-content: space-between;\n}\n.room-platform-room .justify-center {\n  justify-content: center;\n}\n.room-platform-room .justify-end {\n  justify-content: flex-end;\n}\n.room-platform-room .gap-0 {\n  gap: calc(var(--spacing) * 0);\n}\n.room-platform-room .gap-1 {\n  gap: calc(var(--spacing) * 1);\n}\n.room-platform-room .gap-1\\.5 {\n  gap: calc(var(--spacing) * 1.5);\n}\n.room-platform-room .gap-2 {\n  gap: calc(var(--spacing) * 2);\n}\n.room-platform-room .gap-3 {\n  gap: calc(var(--spacing) * 3);\n}\n.room-platform-room .gap-4 {\n  gap: calc(var(--spacing) * 4);\n}\n.room-platform-room .truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.room-platform-room .overflow-auto {\n  overflow: auto;\n}\n.room-platform-room .overflow-hidden {\n  overflow: hidden;\n}\n.room-platform-room .overflow-x-hidden {\n  overflow-x: hidden;\n}\n.room-platform-room .overflow-y-auto {\n  overflow-y: auto;\n}\n.room-platform-room .rounded-2xl {\n  border-radius: var(--radius-2xl);\n}\n.room-platform-room .rounded-4xl {\n  border-radius: var(--radius-4xl);\n}\n.room-platform-room .rounded-\\[2px\\] {\n  border-radius: 2px;\n}\n.room-platform-room .rounded-\\[min\\(var\\(--radius-md\\)\\,10px\\)\\] {\n  border-radius: min(var(--radius-md), 10px);\n}\n.room-platform-room .rounded-\\[min\\(var\\(--radius-md\\)\\,12px\\)\\] {\n  border-radius: min(var(--radius-md), 12px);\n}\n.room-platform-room .rounded-full {\n  border-radius: calc(infinity * 1px);\n}\n.room-platform-room .rounded-lg {\n  border-radius: var(--radius-lg);\n}\n.room-platform-room .rounded-md {\n  border-radius: var(--radius-md);\n}\n.room-platform-room .rounded-none {\n  border-radius: 0;\n}\n.room-platform-room .rounded-xl {\n  border-radius: var(--radius-xl);\n}\n.room-platform-room .rounded-l-lg {\n  border-top-left-radius: var(--radius-lg);\n  border-bottom-left-radius: var(--radius-lg);\n}\n.room-platform-room .rounded-b-xl {\n  border-bottom-right-radius: var(--radius-xl);\n  border-bottom-left-radius: var(--radius-xl);\n}\n.room-platform-room .border {\n  border-style: var(--tw-border-style);\n  border-width: 1px;\n}\n.room-platform-room .border-2 {\n  border-style: var(--tw-border-style);\n  border-width: 2px;\n}\n.room-platform-room .border-t {\n  border-top-style: var(--tw-border-style);\n  border-top-width: 1px;\n}\n.room-platform-room .border-r-0 {\n  border-right-style: var(--tw-border-style);\n  border-right-width: 0px;\n}\n.room-platform-room .border-b {\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: 1px;\n}\n.room-platform-room .border-dashed {\n  --tw-border-style: dashed;\n  border-style: dashed;\n}\n.room-platform-room .border-\\[\\#2563EB\\] {\n  border-color: #2563EB;\n}\n.room-platform-room .border-amber-200 {\n  border-color: var(--color-amber-200);\n}\n.room-platform-room .border-border {\n  border-color: var(--color-border);\n}\n.room-platform-room .border-emerald-200 {\n  border-color: var(--color-emerald-200);\n}\n.room-platform-room .border-input {\n  border-color: var(--color-input);\n}\n.room-platform-room .border-liveclass-orange {\n  border-color: var(--color-liveclass-orange);\n}\n.room-platform-room .border-liveclass-orange\\/30 {\n  border-color: color-mix(in srgb, #eb6619 30%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-liveclass-orange) 30%, transparent);\n  }\n}\n.room-platform-room .border-primary\\/10 {\n  border-color: color-mix(in srgb, #242f62 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-primary) 10%, transparent);\n  }\n}\n.room-platform-room .border-red-300\\/40 {\n  border-color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 40%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-red-300) 40%, transparent);\n  }\n}\n.room-platform-room .border-sky-200 {\n  border-color: var(--color-sky-200);\n}\n.room-platform-room .border-slate-200 {\n  border-color: var(--color-slate-200);\n}\n.room-platform-room .border-slate-300 {\n  border-color: var(--color-slate-300);\n}\n.room-platform-room .border-transparent {\n  border-color: transparent;\n}\n.room-platform-room .border-white {\n  border-color: var(--color-white);\n}\n.room-platform-room .border-white\\/10 {\n  border-color: color-mix(in srgb, #fff 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n  }\n}\n.room-platform-room .border-white\\/20 {\n  border-color: color-mix(in srgb, #fff 20%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n  }\n}\n.room-platform-room .border-white\\/30 {\n  border-color: color-mix(in srgb, #fff 30%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-white) 30%, transparent);\n  }\n}\n.room-platform-room .bg-amber-50 {\n  background-color: var(--color-amber-50);\n}\n.room-platform-room .bg-background {\n  background-color: var(--color-background);\n}\n.room-platform-room .bg-black {\n  background-color: var(--color-black);\n}\n.room-platform-room .bg-black\\/10 {\n  background-color: color-mix(in srgb, #000 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n  }\n}\n.room-platform-room .bg-black\\/20 {\n  background-color: color-mix(in srgb, #000 20%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-black) 20%, transparent);\n  }\n}\n.room-platform-room .bg-border {\n  background-color: var(--color-border);\n}\n.room-platform-room .bg-destructive\\/10 {\n  background-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);\n  }\n}\n.room-platform-room .bg-emerald-50 {\n  background-color: var(--color-emerald-50);\n}\n.room-platform-room .bg-liveclass-orange {\n  background-color: var(--color-liveclass-orange);\n}\n.room-platform-room .bg-liveclass-orange\\/10 {\n  background-color: color-mix(in srgb, #eb6619 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-liveclass-orange) 10%, transparent);\n  }\n}\n.room-platform-room .bg-muted {\n  background-color: var(--color-muted);\n}\n.room-platform-room .bg-muted\\/50 {\n  background-color: color-mix(in srgb, oklch(0.97 0 0) 50%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);\n  }\n}\n.room-platform-room .bg-popover {\n  background-color: var(--color-popover);\n}\n.room-platform-room .bg-primary {\n  background-color: var(--color-primary);\n}\n.room-platform-room .bg-primary\\/10 {\n  background-color: color-mix(in srgb, #242f62 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);\n  }\n}\n.room-platform-room .bg-secondary {\n  background-color: var(--color-secondary);\n}\n.room-platform-room .bg-sky-50 {\n  background-color: var(--color-sky-50);\n}\n.room-platform-room .bg-slate-50 {\n  background-color: var(--color-slate-50);\n}\n.room-platform-room .bg-slate-900 {\n  background-color: var(--color-slate-900);\n}\n.room-platform-room .bg-slate-900\\/45 {\n  background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 45%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-slate-900) 45%, transparent);\n  }\n}\n.room-platform-room .bg-slate-950 {\n  background-color: var(--color-slate-950);\n}\n.room-platform-room .bg-slate-950\\/40 {\n  background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 40%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-slate-950) 40%, transparent);\n  }\n}\n.room-platform-room .bg-slate-950\\/75 {\n  background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 75%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-slate-950) 75%, transparent);\n  }\n}\n.room-platform-room .bg-slate-950\\/80 {\n  background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 80%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-slate-950) 80%, transparent);\n  }\n}\n.room-platform-room .bg-slate-950\\/90 {\n  background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 90%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-slate-950) 90%, transparent);\n  }\n}\n.room-platform-room .bg-transparent {\n  background-color: transparent;\n}\n.room-platform-room .bg-white {\n  background-color: var(--color-white);\n}\n.room-platform-room .bg-white\\/90 {\n  background-color: color-mix(in srgb, #fff 90%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-white) 90%, transparent);\n  }\n}\n.room-platform-room .bg-clip-padding {\n  background-clip: padding-box;\n}\n.room-platform-room .fill-primary {\n  fill: var(--color-primary);\n}\n.room-platform-room .object-contain {\n  object-fit: contain;\n}\n.room-platform-room .object-cover {\n  object-fit: cover;\n}\n.room-platform-room .p-0 {\n  padding: calc(var(--spacing) * 0);\n}\n.room-platform-room .p-1 {\n  padding: calc(var(--spacing) * 1);\n}\n.room-platform-room .p-2 {\n  padding: calc(var(--spacing) * 2);\n}\n.room-platform-room .p-3 {\n  padding: calc(var(--spacing) * 3);\n}\n.room-platform-room .p-4 {\n  padding: calc(var(--spacing) * 4);\n}\n.room-platform-room .p-6 {\n  padding: calc(var(--spacing) * 6);\n}\n.room-platform-room .p-\\[3px\\] {\n  padding: 3px;\n}\n.room-platform-room .px-1\\.5 {\n  padding-inline: calc(var(--spacing) * 1.5);\n}\n.room-platform-room .px-2 {\n  padding-inline: calc(var(--spacing) * 2);\n}\n.room-platform-room .px-2\\.5 {\n  padding-inline: calc(var(--spacing) * 2.5);\n}\n.room-platform-room .px-3 {\n  padding-inline: calc(var(--spacing) * 3);\n}\n.room-platform-room .px-3\\.5 {\n  padding-inline: calc(var(--spacing) * 3.5);\n}\n.room-platform-room .px-4 {\n  padding-inline: calc(var(--spacing) * 4);\n}\n.room-platform-room .py-0\\.5 {\n  padding-block: calc(var(--spacing) * 0.5);\n}\n.room-platform-room .py-1 {\n  padding-block: calc(var(--spacing) * 1);\n}\n.room-platform-room .py-1\\.5 {\n  padding-block: calc(var(--spacing) * 1.5);\n}\n.room-platform-room .py-2 {\n  padding-block: calc(var(--spacing) * 2);\n}\n.room-platform-room .py-3 {\n  padding-block: calc(var(--spacing) * 3);\n}\n.room-platform-room .pr-2 {\n  padding-right: calc(var(--spacing) * 2);\n}\n.room-platform-room .pr-8 {\n  padding-right: calc(var(--spacing) * 8);\n}\n.room-platform-room .pr-20 {\n  padding-right: calc(var(--spacing) * 20);\n}\n.room-platform-room .pb-3 {\n  padding-bottom: calc(var(--spacing) * 3);\n}\n.room-platform-room .pl-1\\.5 {\n  padding-left: calc(var(--spacing) * 1.5);\n}\n.room-platform-room .pl-2\\.5 {\n  padding-left: calc(var(--spacing) * 2.5);\n}\n.room-platform-room .text-center {\n  text-align: center;\n}\n.room-platform-room .text-left {\n  text-align: left;\n}\n.room-platform-room .text-base {\n  font-size: var(--text-base);\n  line-height: var(--tw-leading, var(--text-base--line-height));\n}\n.room-platform-room .text-sm {\n  font-size: var(--text-sm);\n  line-height: var(--tw-leading, var(--text-sm--line-height));\n}\n.room-platform-room .text-xs {\n  font-size: var(--text-xs);\n  line-height: var(--tw-leading, var(--text-xs--line-height));\n}\n.room-platform-room .text-\\[0\\.8rem\\] {\n  font-size: 0.8rem;\n}\n.room-platform-room .leading-5 {\n  --tw-leading: calc(var(--spacing) * 5);\n  line-height: calc(var(--spacing) * 5);\n}\n.room-platform-room .leading-none {\n  --tw-leading: 1;\n  line-height: 1;\n}\n.room-platform-room .font-bold {\n  --tw-font-weight: var(--font-weight-bold);\n  font-weight: var(--font-weight-bold);\n}\n.room-platform-room .font-medium {\n  --tw-font-weight: var(--font-weight-medium);\n  font-weight: var(--font-weight-medium);\n}\n.room-platform-room .font-semibold {\n  --tw-font-weight: var(--font-weight-semibold);\n  font-weight: var(--font-weight-semibold);\n}\n.room-platform-room .text-balance {\n  text-wrap: balance;\n}\n.room-platform-room .whitespace-nowrap {\n  white-space: nowrap;\n}\n.room-platform-room .text-\\[\\#2563EB\\] {\n  color: #2563EB;\n}\n.room-platform-room .text-amber-700 {\n  color: var(--color-amber-700);\n}\n.room-platform-room .text-amber-950 {\n  color: var(--color-amber-950);\n}\n.room-platform-room .text-destructive {\n  color: var(--color-destructive);\n}\n.room-platform-room .text-emerald-950 {\n  color: var(--color-emerald-950);\n}\n.room-platform-room .text-foreground {\n  color: var(--color-foreground);\n}\n.room-platform-room .text-foreground\\/60 {\n  color: color-mix(in srgb, oklch(0.145 0 0) 60%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    color: color-mix(in oklab, var(--color-foreground) 60%, transparent);\n  }\n}\n.room-platform-room .text-liveclass-orange {\n  color: var(--color-liveclass-orange);\n}\n.room-platform-room .text-muted-foreground {\n  color: var(--color-muted-foreground);\n}\n.room-platform-room .text-popover-foreground {\n  color: var(--color-popover-foreground);\n}\n.room-platform-room .text-primary {\n  color: var(--color-primary);\n}\n.room-platform-room .text-primary-foreground {\n  color: var(--color-primary-foreground);\n}\n.room-platform-room .text-red-100 {\n  color: var(--color-red-100);\n}\n.room-platform-room .text-secondary-foreground {\n  color: var(--color-secondary-foreground);\n}\n.room-platform-room .text-sky-950 {\n  color: var(--color-sky-950);\n}\n.room-platform-room .text-slate-200 {\n  color: var(--color-slate-200);\n}\n.room-platform-room .text-slate-300 {\n  color: var(--color-slate-300);\n}\n.room-platform-room .text-slate-400 {\n  color: var(--color-slate-400);\n}\n.room-platform-room .text-slate-500 {\n  color: var(--color-slate-500);\n}\n.room-platform-room .text-slate-700 {\n  color: var(--color-slate-700);\n}\n.room-platform-room .text-slate-950 {\n  color: var(--color-slate-950);\n}\n.room-platform-room .text-white {\n  color: var(--color-white);\n}\n.room-platform-room .text-white\\/55 {\n  color: color-mix(in srgb, #fff 55%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    color: color-mix(in oklab, var(--color-white) 55%, transparent);\n  }\n}\n.room-platform-room .text-white\\/60 {\n  color: color-mix(in srgb, #fff 60%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    color: color-mix(in oklab, var(--color-white) 60%, transparent);\n  }\n}\n.room-platform-room .text-white\\/70 {\n  color: color-mix(in srgb, #fff 70%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    color: color-mix(in oklab, var(--color-white) 70%, transparent);\n  }\n}\n.room-platform-room .uppercase {\n  text-transform: uppercase;\n}\n.room-platform-room .underline-offset-4 {\n  text-underline-offset: 4px;\n}\n.room-platform-room .opacity-70 {\n  opacity: 70%;\n}\n.room-platform-room .opacity-80 {\n  opacity: 80%;\n}\n.room-platform-room .shadow {\n  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.room-platform-room .shadow-lg {\n  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.room-platform-room .shadow-md {\n  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.room-platform-room .shadow-sm {\n  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.room-platform-room .ring {\n  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.room-platform-room .ring-1 {\n  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.room-platform-room .ring-2 {\n  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.room-platform-room .ring-\\[\\#2563EB\\]\\/15 {\n  --tw-ring-color: color-mix(in oklab, #2563EB 15%, transparent);\n}\n.room-platform-room .ring-emerald-400 {\n  --tw-ring-color: var(--color-emerald-400);\n}\n.room-platform-room .ring-foreground\\/10 {\n  --tw-ring-color: color-mix(in srgb, oklch(0.145 0 0) 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    --tw-ring-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);\n  }\n}\n.room-platform-room .ring-white\\/10 {\n  --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n  }\n}\n.room-platform-room .outline-hidden {\n  --tw-outline-style: none;\n  outline-style: none;\n  @media (forced-colors: active) {\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n  }\n}\n.room-platform-room .outline {\n  outline-style: var(--tw-outline-style);\n  outline-width: 1px;\n}\n.room-platform-room .blur {\n  --tw-blur: blur(8px);\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n}\n.room-platform-room .blur-\\[3px\\] {\n  --tw-blur: blur(3px);\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n}\n.room-platform-room .blur-\\[6px\\] {\n  --tw-blur: blur(6px);\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n}\n.room-platform-room .drop-shadow-sm {\n  --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));\n  --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm));\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n}\n.room-platform-room .backdrop-blur-\\[1px\\] {\n  --tw-backdrop-blur: blur(1px);\n  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n}\n.room-platform-room .transition {\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n}\n.room-platform-room .transition-\\[width\\,transform\\,opacity\\] {\n  transition-property: width,transform,opacity;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n}\n.room-platform-room .transition-all {\n  transition-property: all;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n}\n.room-platform-room .transition-colors {\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n}\n.room-platform-room .transition-transform {\n  transition-property: transform, translate, scale, rotate;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n}\n.room-platform-room .duration-100 {\n  --tw-duration: 100ms;\n  transition-duration: 100ms;\n}\n.room-platform-room .duration-200 {\n  --tw-duration: 200ms;\n  transition-duration: 200ms;\n}\n.room-platform-room .ease-out {\n  --tw-ease: var(--ease-out);\n  transition-timing-function: var(--ease-out);\n}\n.room-platform-room .fade-in-0 {\n  --tw-enter-opacity: calc(0/100);\n  --tw-enter-opacity: 0;\n}\n.room-platform-room .outline-none {\n  --tw-outline-style: none;\n  outline-style: none;\n}\n.room-platform-room .select-none {\n  -webkit-user-select: none;\n  user-select: none;\n}\n.room-platform-room .zoom-in-95 {\n  --tw-enter-scale: calc(95*1%);\n  --tw-enter-scale: .95;\n}\n.room-platform-room .paused {\n  animation-play-state: paused;\n}\n.room-platform-room .ring-inset {\n  --tw-ring-inset: inset;\n}\n.room-platform-room .running {\n  animation-play-state: running;\n}\n.room-platform-room .group-data-horizontal\\/tabs\\:h-8 {\n  .room-platform-room &:is(:where(.group\\/tabs)[data-horizontal] *) {\n    height: calc(var(--spacing) * 8);\n  }\n}\n.room-platform-room .group-data-vertical\\/tabs\\:h-fit {\n  .room-platform-room &:is(:where(.group\\/tabs)[data-vertical] *) {\n    height: fit-content;\n  }\n}\n.room-platform-room .group-data-vertical\\/tabs\\:w-full {\n  .room-platform-room &:is(:where(.group\\/tabs)[data-vertical] *) {\n    width: 100%;\n  }\n}\n.room-platform-room .group-data-vertical\\/tabs\\:flex-col {\n  .room-platform-room &:is(:where(.group\\/tabs)[data-vertical] *) {\n    flex-direction: column;\n  }\n}\n.room-platform-room .group-data-vertical\\/tabs\\:justify-start {\n  .room-platform-room &:is(:where(.group\\/tabs)[data-vertical] *) {\n    justify-content: flex-start;\n  }\n}\n.room-platform-room .group-data-\\[size\\=sm\\]\\/alert-dialog-content\\:grid {\n  .room-platform-room &:is(:where(.group\\/alert-dialog-content)[data-size=\"sm\"] *) {\n    display: grid;\n  }\n}\n.room-platform-room .group-data-\\[size\\=sm\\]\\/alert-dialog-content\\:grid-cols-2 {\n  .room-platform-room &:is(:where(.group\\/alert-dialog-content)[data-size=\"sm\"] *) {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n.room-platform-room .group-data-\\[variant\\=line\\]\\/tabs-list\\:bg-transparent {\n  .room-platform-room &:is(:where(.group\\/tabs-list)[data-variant=\"line\"] *) {\n    background-color: transparent;\n  }\n}\n.room-platform-room .after\\:absolute {\n  .room-platform-room &::after {\n    content: var(--tw-content);\n    position: absolute;\n  }\n}\n.room-platform-room .after\\:bg-foreground {\n  .room-platform-room &::after {\n    content: var(--tw-content);\n    background-color: var(--color-foreground);\n  }\n}\n.room-platform-room .after\\:opacity-0 {\n  .room-platform-room &::after {\n    content: var(--tw-content);\n    opacity: 0%;\n  }\n}\n.room-platform-room .after\\:transition-opacity {\n  .room-platform-room &::after {\n    content: var(--tw-content);\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n}\n.room-platform-room .group-data-horizontal\\/tabs\\:after\\:inset-x-0 {\n  .room-platform-room &:is(:where(.group\\/tabs)[data-horizontal] *) {\n    .room-platform-room &::after {\n      content: var(--tw-content);\n      inset-inline: calc(var(--spacing) * 0);\n    }\n  }\n}\n.room-platform-room .group-data-horizontal\\/tabs\\:after\\:bottom-\\[-5px\\] {\n  .room-platform-room &:is(:where(.group\\/tabs)[data-horizontal] *) {\n    .room-platform-room &::after {\n      content: var(--tw-content);\n      bottom: -5px;\n    }\n  }\n}\n.room-platform-room .group-data-horizontal\\/tabs\\:after\\:h-0\\.5 {\n  .room-platform-room &:is(:where(.group\\/tabs)[data-horizontal] *) {\n    .room-platform-room &::after {\n      content: var(--tw-content);\n      height: calc(var(--spacing) * 0.5);\n    }\n  }\n}\n.room-platform-room .group-data-vertical\\/tabs\\:after\\:inset-y-0 {\n  .room-platform-room &:is(:where(.group\\/tabs)[data-vertical] *) {\n    .room-platform-room &::after {\n      content: var(--tw-content);\n      inset-block: calc(var(--spacing) * 0);\n    }\n  }\n}\n.room-platform-room .group-data-vertical\\/tabs\\:after\\:-right-1 {\n  .room-platform-room &:is(:where(.group\\/tabs)[data-vertical] *) {\n    .room-platform-room &::after {\n      content: var(--tw-content);\n      right: calc(var(--spacing) * -1);\n    }\n  }\n}\n.room-platform-room .group-data-vertical\\/tabs\\:after\\:w-0\\.5 {\n  .room-platform-room &:is(:where(.group\\/tabs)[data-vertical] *) {\n    .room-platform-room &::after {\n      content: var(--tw-content);\n      width: calc(var(--spacing) * 0.5);\n    }\n  }\n}\n.room-platform-room .hover\\:border-slate-300 {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      border-color: var(--color-slate-300);\n    }\n  }\n}\n.room-platform-room .hover\\:border-slate-400 {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      border-color: var(--color-slate-400);\n    }\n  }\n}\n.room-platform-room .hover\\:bg-destructive\\/20 {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      background-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 20%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);\n      }\n    }\n  }\n}\n.room-platform-room .hover\\:bg-liveclass-orange\\/90 {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      background-color: color-mix(in srgb, #eb6619 90%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-liveclass-orange) 90%, transparent);\n      }\n    }\n  }\n}\n.room-platform-room .hover\\:bg-muted {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      background-color: var(--color-muted);\n    }\n  }\n}\n.room-platform-room .hover\\:bg-red-50 {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      background-color: var(--color-red-50);\n    }\n  }\n}\n.room-platform-room .hover\\:bg-red-500\\/15 {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 15%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent);\n      }\n    }\n  }\n}\n.room-platform-room .hover\\:bg-secondary\\/80 {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      background-color: color-mix(in srgb, #eb6619 80%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n      }\n    }\n  }\n}\n.room-platform-room .hover\\:bg-slate-100 {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      background-color: var(--color-slate-100);\n    }\n  }\n}\n.room-platform-room .hover\\:bg-slate-900 {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      background-color: var(--color-slate-900);\n    }\n  }\n}\n.room-platform-room .hover\\:bg-white {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      background-color: var(--color-white);\n    }\n  }\n}\n.room-platform-room .hover\\:bg-white\\/10 {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      background-color: color-mix(in srgb, #fff 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n      }\n    }\n  }\n}\n.room-platform-room .hover\\:bg-white\\/15 {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      background-color: color-mix(in srgb, #fff 15%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-white) 15%, transparent);\n      }\n    }\n  }\n}\n.room-platform-room .hover\\:text-foreground {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      color: var(--color-foreground);\n    }\n  }\n}\n.room-platform-room .hover\\:text-muted-foreground {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      color: var(--color-muted-foreground);\n    }\n  }\n}\n.room-platform-room .hover\\:text-red-600 {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      color: var(--color-red-600);\n    }\n  }\n}\n.room-platform-room .hover\\:text-white {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      color: var(--color-white);\n    }\n  }\n}\n.room-platform-room .hover\\:underline {\n  .room-platform-room &:hover {\n    @media (hover: hover) {\n      text-decoration-line: underline;\n    }\n  }\n}\n.room-platform-room .focus\\:bg-accent {\n  .room-platform-room &:focus {\n    background-color: var(--color-accent);\n  }\n}\n.room-platform-room .focus\\:text-accent-foreground {\n  .room-platform-room &:focus {\n    color: var(--color-accent-foreground);\n  }\n}\n.room-platform-room .not-data-\\[variant\\=destructive\\]\\:focus\\:\\*\\*\\:text-accent-foreground {\n  .room-platform-room &:not(*[data-variant=\"destructive\"]) {\n    .room-platform-room &:focus {\n      .room-platform-room :is(& *) {\n        color: var(--color-accent-foreground);\n      }\n    }\n  }\n}\n.room-platform-room .focus-visible\\:border-destructive\\/40 {\n  .room-platform-room &:focus-visible {\n    border-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);\n    }\n  }\n}\n.room-platform-room .focus-visible\\:border-ring {\n  .room-platform-room &:focus-visible {\n    border-color: var(--color-ring);\n  }\n}\n.room-platform-room .focus-visible\\:ring-3 {\n  .room-platform-room &:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n}\n.room-platform-room .focus-visible\\:ring-\\[3px\\] {\n  .room-platform-room &:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n}\n.room-platform-room .focus-visible\\:ring-destructive\\/20 {\n  .room-platform-room &:focus-visible {\n    --tw-ring-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);\n    }\n  }\n}\n.room-platform-room .focus-visible\\:ring-ring\\/50 {\n  .room-platform-room &:focus-visible {\n    --tw-ring-color: color-mix(in srgb, #9dc2f3 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);\n    }\n  }\n}\n.room-platform-room .focus-visible\\:outline-1 {\n  .room-platform-room &:focus-visible {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n}\n.room-platform-room .focus-visible\\:outline-ring {\n  .room-platform-room &:focus-visible {\n    outline-color: var(--color-ring);\n  }\n}\n.room-platform-room .active\\:not-aria-\\[haspopup\\]\\:translate-y-px {\n  .room-platform-room &:active {\n    .room-platform-room &:not(*[aria-haspopup]) {\n      --tw-translate-y: 1px;\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n}\n.room-platform-room .disabled\\:pointer-events-none {\n  .room-platform-room &:disabled {\n    pointer-events: none;\n  }\n}\n.room-platform-room .disabled\\:cursor-not-allowed {\n  .room-platform-room &:disabled {\n    cursor: not-allowed;\n  }\n}\n.room-platform-room .disabled\\:border-white\\/35 {\n  .room-platform-room &:disabled {\n    border-color: color-mix(in srgb, #fff 35%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 35%, transparent);\n    }\n  }\n}\n.room-platform-room .disabled\\:bg-white\\/5 {\n  .room-platform-room &:disabled {\n    background-color: color-mix(in srgb, #fff 5%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n    }\n  }\n}\n.room-platform-room .disabled\\:text-white\\/65 {\n  .room-platform-room &:disabled {\n    color: color-mix(in srgb, #fff 65%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-white) 65%, transparent);\n    }\n  }\n}\n.room-platform-room .disabled\\:opacity-50 {\n  .room-platform-room &:disabled {\n    opacity: 50%;\n  }\n}\n.room-platform-room .in-data-\\[slot\\=button-group\\]\\:rounded-lg {\n  .room-platform-room :where(*[data-slot=\"button-group\"]) & {\n    border-radius: var(--radius-lg);\n  }\n}\n.room-platform-room .has-data-\\[icon\\=inline-end\\]\\:pr-1 {\n  .room-platform-room &:has(*[data-icon=\"inline-end\"]) {\n    padding-right: calc(var(--spacing) * 1);\n  }\n}\n.room-platform-room .has-data-\\[icon\\=inline-end\\]\\:pr-1\\.5 {\n  .room-platform-room &:has(*[data-icon=\"inline-end\"]) {\n    padding-right: calc(var(--spacing) * 1.5);\n  }\n}\n.room-platform-room .has-data-\\[icon\\=inline-end\\]\\:pr-2 {\n  .room-platform-room &:has(*[data-icon=\"inline-end\"]) {\n    padding-right: calc(var(--spacing) * 2);\n  }\n}\n.room-platform-room .has-data-\\[icon\\=inline-end\\]\\:pr-3 {\n  .room-platform-room &:has(*[data-icon=\"inline-end\"]) {\n    padding-right: calc(var(--spacing) * 3);\n  }\n}\n.room-platform-room .has-data-\\[icon\\=inline-start\\]\\:pl-1 {\n  .room-platform-room &:has(*[data-icon=\"inline-start\"]) {\n    padding-left: calc(var(--spacing) * 1);\n  }\n}\n.room-platform-room .has-data-\\[icon\\=inline-start\\]\\:pl-1\\.5 {\n  .room-platform-room &:has(*[data-icon=\"inline-start\"]) {\n    padding-left: calc(var(--spacing) * 1.5);\n  }\n}\n.room-platform-room .has-data-\\[icon\\=inline-start\\]\\:pl-2 {\n  .room-platform-room &:has(*[data-icon=\"inline-start\"]) {\n    padding-left: calc(var(--spacing) * 2);\n  }\n}\n.room-platform-room .has-data-\\[icon\\=inline-start\\]\\:pl-3 {\n  .room-platform-room &:has(*[data-icon=\"inline-start\"]) {\n    padding-left: calc(var(--spacing) * 3);\n  }\n}\n.room-platform-room .has-data-\\[slot\\=alert-dialog-media\\]\\:grid-rows-\\[auto_auto_1fr\\] {\n  .room-platform-room &:has(*[data-slot=\"alert-dialog-media\"]) {\n    grid-template-rows: auto auto 1fr;\n  }\n}\n.room-platform-room .has-data-\\[slot\\=alert-dialog-media\\]\\:gap-x-4 {\n  .room-platform-room &:has(*[data-slot=\"alert-dialog-media\"]) {\n    column-gap: calc(var(--spacing) * 4);\n  }\n}\n.room-platform-room .aria-expanded\\:bg-muted {\n  .room-platform-room &[aria-expanded=\"true\"] {\n    background-color: var(--color-muted);\n  }\n}\n.room-platform-room .aria-expanded\\:bg-secondary {\n  .room-platform-room &[aria-expanded=\"true\"] {\n    background-color: var(--color-secondary);\n  }\n}\n.room-platform-room .aria-expanded\\:text-foreground {\n  .room-platform-room &[aria-expanded=\"true\"] {\n    color: var(--color-foreground);\n  }\n}\n.room-platform-room .aria-expanded\\:text-secondary-foreground {\n  .room-platform-room &[aria-expanded=\"true\"] {\n    color: var(--color-secondary-foreground);\n  }\n}\n.room-platform-room .aria-invalid\\:border-destructive {\n  .room-platform-room &[aria-invalid=\"true\"] {\n    border-color: var(--color-destructive);\n  }\n}\n.room-platform-room .aria-invalid\\:ring-3 {\n  .room-platform-room &[aria-invalid=\"true\"] {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n}\n.room-platform-room .aria-invalid\\:ring-destructive\\/20 {\n  .room-platform-room &[aria-invalid=\"true\"] {\n    --tw-ring-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);\n    }\n  }\n}\n.room-platform-room .data-active\\:bg-background {\n  .room-platform-room &[data-active] {\n    background-color: var(--color-background);\n  }\n}\n.room-platform-room .data-active\\:text-foreground {\n  .room-platform-room &[data-active] {\n    color: var(--color-foreground);\n  }\n}\n.room-platform-room .group-data-\\[variant\\=default\\]\\/tabs-list\\:data-active\\:shadow-sm {\n  .room-platform-room &:is(:where(.group\\/tabs-list)[data-variant=\"default\"] *) {\n    .room-platform-room &[data-active] {\n      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n}\n.room-platform-room .group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:bg-transparent {\n  .room-platform-room &:is(:where(.group\\/tabs-list)[data-variant=\"line\"] *) {\n    .room-platform-room &[data-active] {\n      background-color: transparent;\n    }\n  }\n}\n.room-platform-room .group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:shadow-none {\n  .room-platform-room &:is(:where(.group\\/tabs-list)[data-variant=\"line\"] *) {\n    .room-platform-room &[data-active] {\n      --tw-shadow: 0 0 #0000;\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n}\n.room-platform-room .group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:after\\:opacity-100 {\n  .room-platform-room &:is(:where(.group\\/tabs-list)[data-variant=\"line\"] *) {\n    .room-platform-room &[data-active] {\n      .room-platform-room &::after {\n        content: var(--tw-content);\n        opacity: 100%;\n      }\n    }\n  }\n}\n.room-platform-room .data-closed\\:animate-out {\n  .room-platform-room &[data-closed] {\n    animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);\n  }\n}\n.room-platform-room .data-closed\\:fade-out-0 {\n  .room-platform-room &[data-closed] {\n    --tw-exit-opacity: calc(0/100);\n    --tw-exit-opacity: 0;\n  }\n}\n.room-platform-room .data-closed\\:zoom-out-95 {\n  .room-platform-room &[data-closed] {\n    --tw-exit-scale: calc(95*1%);\n    --tw-exit-scale: .95;\n  }\n}\n.room-platform-room .data-disabled\\:pointer-events-none {\n  .room-platform-room &[data-disabled] {\n    pointer-events: none;\n  }\n}\n.room-platform-room .data-disabled\\:opacity-50 {\n  .room-platform-room &[data-disabled] {\n    opacity: 50%;\n  }\n}\n.room-platform-room .data-horizontal\\:flex-col {\n  .room-platform-room &[data-horizontal] {\n    flex-direction: column;\n  }\n}\n.room-platform-room .data-open\\:animate-in {\n  .room-platform-room &[data-open] {\n    animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);\n  }\n}\n.room-platform-room .data-open\\:fade-in-0 {\n  .room-platform-room &[data-open] {\n    --tw-enter-opacity: calc(0/100);\n    --tw-enter-opacity: 0;\n  }\n}\n.room-platform-room .data-open\\:zoom-in-95 {\n  .room-platform-room &[data-open] {\n    --tw-enter-scale: calc(95*1%);\n    --tw-enter-scale: .95;\n  }\n}\n.room-platform-room .data-placeholder\\:text-muted-foreground {\n  .room-platform-room &[data-placeholder] {\n    color: var(--color-muted-foreground);\n  }\n}\n.room-platform-room .data-\\[align-trigger\\=true\\]\\:animate-none {\n  .room-platform-room &[data-align-trigger=\"true\"] {\n    animation: none;\n  }\n}\n.room-platform-room .data-\\[lk-enabled\\=true\\]\\:border-white {\n  .room-platform-room &[data-lk-enabled=\"true\"] {\n    border-color: var(--color-white);\n  }\n}\n.room-platform-room .data-\\[lk-enabled\\=true\\]\\:bg-white {\n  .room-platform-room &[data-lk-enabled=\"true\"] {\n    background-color: var(--color-white);\n  }\n}\n.room-platform-room .data-\\[lk-enabled\\=true\\]\\:text-slate-950 {\n  .room-platform-room &[data-lk-enabled=\"true\"] {\n    color: var(--color-slate-950);\n  }\n}\n.room-platform-room .data-\\[lk-enabled\\=true\\]\\:hover\\:bg-white {\n  .room-platform-room &[data-lk-enabled=\"true\"] {\n    .room-platform-room &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-white);\n      }\n    }\n  }\n}\n.room-platform-room .data-\\[position\\=popper\\]\\:h-\\(--radix-select-trigger-height\\) {\n  .room-platform-room &[data-position=\"popper\"] {\n    height: var(--radix-select-trigger-height);\n  }\n}\n.room-platform-room .data-\\[position\\=popper\\]\\:w-full {\n  .room-platform-room &[data-position=\"popper\"] {\n    width: 100%;\n  }\n}\n.room-platform-room .data-\\[position\\=popper\\]\\:min-w-\\(--radix-select-trigger-width\\) {\n  .room-platform-room &[data-position=\"popper\"] {\n    min-width: var(--radix-select-trigger-width);\n  }\n}\n.room-platform-room .data-\\[side\\=bottom\\]\\:translate-y-1 {\n  .room-platform-room &[data-side=\"bottom\"] {\n    --tw-translate-y: calc(var(--spacing) * 1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.room-platform-room .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n  .room-platform-room &[data-side=\"bottom\"] {\n    --tw-enter-translate-y: calc(2*var(--spacing)*-1);\n  }\n}\n.room-platform-room .data-\\[side\\=left\\]\\:-translate-x-1 {\n  .room-platform-room &[data-side=\"left\"] {\n    --tw-translate-x: calc(var(--spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.room-platform-room .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n  .room-platform-room &[data-side=\"left\"] {\n    --tw-enter-translate-x: calc(2*var(--spacing));\n  }\n}\n.room-platform-room .data-\\[side\\=right\\]\\:translate-x-1 {\n  .room-platform-room &[data-side=\"right\"] {\n    --tw-translate-x: calc(var(--spacing) * 1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.room-platform-room .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n  .room-platform-room &[data-side=\"right\"] {\n    --tw-enter-translate-x: calc(2*var(--spacing)*-1);\n  }\n}\n.room-platform-room .data-\\[side\\=top\\]\\:-translate-y-1 {\n  .room-platform-room &[data-side=\"top\"] {\n    --tw-translate-y: calc(var(--spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.room-platform-room .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n  .room-platform-room &[data-side=\"top\"] {\n    --tw-enter-translate-y: calc(2*var(--spacing));\n  }\n}\n.room-platform-room .data-\\[size\\=default\\]\\:h-8 {\n  .room-platform-room &[data-size=\"default\"] {\n    height: calc(var(--spacing) * 8);\n  }\n}\n.room-platform-room .data-\\[size\\=default\\]\\:max-w-xs {\n  .room-platform-room &[data-size=\"default\"] {\n    max-width: var(--container-xs);\n  }\n}\n.room-platform-room .data-\\[size\\=sm\\]\\:h-7 {\n  .room-platform-room &[data-size=\"sm\"] {\n    height: calc(var(--spacing) * 7);\n  }\n}\n.room-platform-room .data-\\[size\\=sm\\]\\:max-w-xs {\n  .room-platform-room &[data-size=\"sm\"] {\n    max-width: var(--container-xs);\n  }\n}\n.room-platform-room .data-\\[size\\=sm\\]\\:rounded-\\[min\\(var\\(--radius-md\\)\\,10px\\)\\] {\n  .room-platform-room &[data-size=\"sm\"] {\n    border-radius: min(var(--radius-md), 10px);\n  }\n}\n.room-platform-room .\\*\\:data-\\[slot\\=select-value\\]\\:line-clamp-1 {\n  .room-platform-room :is(& > *) {\n    .room-platform-room &[data-slot=\"select-value\"] {\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 1;\n    }\n  }\n}\n.room-platform-room .\\*\\:data-\\[slot\\=select-value\\]\\:flex {\n  .room-platform-room :is(& > *) {\n    .room-platform-room &[data-slot=\"select-value\"] {\n      display: flex;\n    }\n  }\n}\n.room-platform-room .\\*\\:data-\\[slot\\=select-value\\]\\:items-center {\n  .room-platform-room :is(& > *) {\n    .room-platform-room &[data-slot=\"select-value\"] {\n      align-items: center;\n    }\n  }\n}\n.room-platform-room .\\*\\:data-\\[slot\\=select-value\\]\\:gap-1\\.5 {\n  .room-platform-room :is(& > *) {\n    .room-platform-room &[data-slot=\"select-value\"] {\n      gap: calc(var(--spacing) * 1.5);\n    }\n  }\n}\n.room-platform-room .data-\\[variant\\=line\\]\\:rounded-none {\n  .room-platform-room &[data-variant=\"line\"] {\n    border-radius: 0;\n  }\n}\n.room-platform-room .supports-backdrop-filter\\:backdrop-blur-xs {\n  @supports (backdrop-filter: var(--tw)) {\n    --tw-backdrop-blur: blur(var(--blur-xs));\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n}\n.room-platform-room .sm\\:max-w-2xl {\n  @media (width >= 40rem) {\n    max-width: var(--container-2xl);\n  }\n}\n.room-platform-room .sm\\:max-w-none {\n  @media (width >= 40rem) {\n    max-width: none;\n  }\n}\n.room-platform-room .sm\\:max-w-sm {\n  @media (width >= 40rem) {\n    max-width: var(--container-sm);\n  }\n}\n.room-platform-room .sm\\:grid-cols-3 {\n  @media (width >= 40rem) {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n}\n.room-platform-room .sm\\:flex-row {\n  @media (width >= 40rem) {\n    flex-direction: row;\n  }\n}\n.room-platform-room .sm\\:justify-end {\n  @media (width >= 40rem) {\n    justify-content: flex-end;\n  }\n}\n.room-platform-room .sm\\:p-4 {\n  @media (width >= 40rem) {\n    padding: calc(var(--spacing) * 4);\n  }\n}\n.room-platform-room .sm\\:text-sm {\n  @media (width >= 40rem) {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n}\n.room-platform-room .sm\\:group-data-\\[size\\=default\\]\\/alert-dialog-content\\:row-span-2 {\n  @media (width >= 40rem) {\n    .room-platform-room &:is(:where(.group\\/alert-dialog-content)[data-size=\"default\"] *) {\n      grid-row: span 2 / span 2;\n    }\n  }\n}\n.room-platform-room .sm\\:group-data-\\[size\\=default\\]\\/alert-dialog-content\\:place-items-start {\n  @media (width >= 40rem) {\n    .room-platform-room &:is(:where(.group\\/alert-dialog-content)[data-size=\"default\"] *) {\n      place-items: start;\n    }\n  }\n}\n.room-platform-room .sm\\:group-data-\\[size\\=default\\]\\/alert-dialog-content\\:text-left {\n  @media (width >= 40rem) {\n    .room-platform-room &:is(:where(.group\\/alert-dialog-content)[data-size=\"default\"] *) {\n      text-align: left;\n    }\n  }\n}\n.room-platform-room .sm\\:group-data-\\[size\\=default\\]\\/alert-dialog-content\\:group-has-data-\\[slot\\=alert-dialog-media\\]\\/alert-dialog-content\\:col-start-2 {\n  @media (width >= 40rem) {\n    .room-platform-room &:is(:where(.group\\/alert-dialog-content)[data-size=\"default\"] *) {\n      .room-platform-room &:is(:where(.group\\/alert-dialog-content):has(*[data-slot=\"alert-dialog-media\"]) *) {\n        grid-column-start: 2;\n      }\n    }\n  }\n}\n.room-platform-room .sm\\:group-data-\\[size\\=default\\]\\/alert-dialog-content\\:has-data-\\[slot\\=alert-dialog-media\\]\\:grid-rows-\\[auto_1fr\\] {\n  @media (width >= 40rem) {\n    .room-platform-room &:is(:where(.group\\/alert-dialog-content)[data-size=\"default\"] *) {\n      .room-platform-room &:has(*[data-slot=\"alert-dialog-media\"]) {\n        grid-template-rows: auto 1fr;\n      }\n    }\n  }\n}\n.room-platform-room .data-\\[size\\=default\\]\\:sm\\:max-w-sm {\n  .room-platform-room &[data-size=\"default\"] {\n    @media (width >= 40rem) {\n      max-width: var(--container-sm);\n    }\n  }\n}\n.room-platform-room .md\\:block {\n  @media (width >= 48rem) {\n    display: block;\n  }\n}\n.room-platform-room .md\\:inline-flex {\n  @media (width >= 48rem) {\n    display: inline-flex;\n  }\n}\n.room-platform-room .md\\:max-w-\\[300px\\] {\n  @media (width >= 48rem) {\n    max-width: 300px;\n  }\n}\n.room-platform-room .md\\:grid-cols-1 {\n  @media (width >= 48rem) {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n}\n.room-platform-room .md\\:grid-cols-\\[minmax\\(0\\,1fr\\)_minmax\\(12rem\\,16rem\\)\\] {\n  @media (width >= 48rem) {\n    grid-template-columns: minmax(0,1fr) minmax(12rem,16rem);\n  }\n}\n.room-platform-room .md\\:grid-cols-\\[minmax\\(0\\,1fr\\)_minmax\\(260px\\,300px\\)\\] {\n  @media (width >= 48rem) {\n    grid-template-columns: minmax(0,1fr) minmax(260px,300px);\n  }\n}\n.room-platform-room .md\\:grid-rows-1 {\n  @media (width >= 48rem) {\n    grid-template-rows: repeat(1, minmax(0, 1fr));\n  }\n}\n.room-platform-room .md\\:justify-self-end {\n  @media (width >= 48rem) {\n    justify-self: flex-end;\n  }\n}\n.room-platform-room .md\\:border-l {\n  @media (width >= 48rem) {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n}\n.room-platform-room .md\\:border-white\\/10 {\n  @media (width >= 48rem) {\n    border-color: color-mix(in srgb, #fff 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n    }\n  }\n}\n.room-platform-room .md\\:text-pretty {\n  @media (width >= 48rem) {\n    text-wrap: pretty;\n  }\n}\n.room-platform-room .lg\\:grid-cols-2 {\n  @media (width >= 64rem) {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n.room-platform-room .dark\\:border-input {\n  @media (prefers-color-scheme: dark) {\n    border-color: var(--color-input);\n  }\n}\n.room-platform-room .dark\\:bg-destructive\\/20 {\n  @media (prefers-color-scheme: dark) {\n    background-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);\n    }\n  }\n}\n.room-platform-room .dark\\:bg-input\\/30 {\n  @media (prefers-color-scheme: dark) {\n    background-color: color-mix(in srgb, oklch(0.922 0 0) 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-input) 30%, transparent);\n    }\n  }\n}\n.room-platform-room .dark\\:text-muted-foreground {\n  @media (prefers-color-scheme: dark) {\n    color: var(--color-muted-foreground);\n  }\n}\n.room-platform-room .dark\\:hover\\:bg-destructive\\/30 {\n  @media (prefers-color-scheme: dark) {\n    .room-platform-room &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 30%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);\n        }\n      }\n    }\n  }\n}\n.room-platform-room .dark\\:hover\\:bg-input\\/50 {\n  @media (prefers-color-scheme: dark) {\n    .room-platform-room &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, oklch(0.922 0 0) 50%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-input) 50%, transparent);\n        }\n      }\n    }\n  }\n}\n.room-platform-room .dark\\:hover\\:bg-muted\\/50 {\n  @media (prefers-color-scheme: dark) {\n    .room-platform-room &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, oklch(0.97 0 0) 50%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);\n        }\n      }\n    }\n  }\n}\n.room-platform-room .dark\\:hover\\:text-foreground {\n  @media (prefers-color-scheme: dark) {\n    .room-platform-room &:hover {\n      @media (hover: hover) {\n        color: var(--color-foreground);\n      }\n    }\n  }\n}\n.room-platform-room .dark\\:focus-visible\\:ring-destructive\\/40 {\n  @media (prefers-color-scheme: dark) {\n    .room-platform-room &:focus-visible {\n      --tw-ring-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);\n      }\n    }\n  }\n}\n.room-platform-room .dark\\:aria-invalid\\:border-destructive\\/50 {\n  @media (prefers-color-scheme: dark) {\n    .room-platform-room &[aria-invalid=\"true\"] {\n      border-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 50%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);\n      }\n    }\n  }\n}\n.room-platform-room .dark\\:aria-invalid\\:ring-destructive\\/40 {\n  @media (prefers-color-scheme: dark) {\n    .room-platform-room &[aria-invalid=\"true\"] {\n      --tw-ring-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);\n      }\n    }\n  }\n}\n.room-platform-room .dark\\:data-active\\:border-input {\n  @media (prefers-color-scheme: dark) {\n    .room-platform-room &[data-active] {\n      border-color: var(--color-input);\n    }\n  }\n}\n.room-platform-room .dark\\:data-active\\:bg-input\\/30 {\n  @media (prefers-color-scheme: dark) {\n    .room-platform-room &[data-active] {\n      background-color: color-mix(in srgb, oklch(0.922 0 0) 30%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);\n      }\n    }\n  }\n}\n.room-platform-room .dark\\:data-active\\:text-foreground {\n  @media (prefers-color-scheme: dark) {\n    .room-platform-room &[data-active] {\n      color: var(--color-foreground);\n    }\n  }\n}\n.room-platform-room .dark\\:group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:border-transparent {\n  @media (prefers-color-scheme: dark) {\n    .room-platform-room &:is(:where(.group\\/tabs-list)[data-variant=\"line\"] *) {\n      .room-platform-room &[data-active] {\n        border-color: transparent;\n      }\n    }\n  }\n}\n.room-platform-room .dark\\:group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:bg-transparent {\n  @media (prefers-color-scheme: dark) {\n    .room-platform-room &:is(:where(.group\\/tabs-list)[data-variant=\"line\"] *) {\n      .room-platform-room &[data-active] {\n        background-color: transparent;\n      }\n    }\n  }\n}\n.room-platform-room .\\[\\&_svg\\]\\:pointer-events-none {\n  .room-platform-room & svg {\n    pointer-events: none;\n  }\n}\n.room-platform-room .\\[\\&_svg\\]\\:shrink-0 {\n  .room-platform-room & svg {\n    flex-shrink: 0;\n  }\n}\n.room-platform-room .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-3 {\n  .room-platform-room & svg:not([class*='size-']) {\n    width: calc(var(--spacing) * 3);\n    height: calc(var(--spacing) * 3);\n  }\n}\n.room-platform-room .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-3\\.5 {\n  .room-platform-room & svg:not([class*='size-']) {\n    width: calc(var(--spacing) * 3.5);\n    height: calc(var(--spacing) * 3.5);\n  }\n}\n.room-platform-room .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n  .room-platform-room & svg:not([class*='size-']) {\n    width: calc(var(--spacing) * 4);\n    height: calc(var(--spacing) * 4);\n  }\n}\n.room-platform-room .\\*\\:\\[a\\]\\:underline {\n  .room-platform-room :is(& > *) {\n    .room-platform-room &:is(a) {\n      text-decoration-line: underline;\n    }\n  }\n}\n.room-platform-room .\\*\\:\\[a\\]\\:underline-offset-3 {\n  .room-platform-room :is(& > *) {\n    .room-platform-room &:is(a) {\n      text-underline-offset: 3px;\n    }\n  }\n}\n.room-platform-room .\\[a\\]\\:hover\\:bg-destructive\\/20 {\n  .room-platform-room &:is(a) {\n    .room-platform-room &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 20%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);\n        }\n      }\n    }\n  }\n}\n.room-platform-room .\\[a\\]\\:hover\\:bg-muted {\n  .room-platform-room &:is(a) {\n    .room-platform-room &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-muted);\n      }\n    }\n  }\n}\n.room-platform-room .\\[a\\]\\:hover\\:bg-primary\\/80 {\n  .room-platform-room &:is(a) {\n    .room-platform-room &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #242f62 80%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);\n        }\n      }\n    }\n  }\n}\n.room-platform-room .\\[a\\]\\:hover\\:bg-secondary\\/80 {\n  .room-platform-room &:is(a) {\n    .room-platform-room &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #eb6619 80%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n}\n.room-platform-room .\\[a\\]\\:hover\\:text-muted-foreground {\n  .room-platform-room &:is(a) {\n    .room-platform-room &:hover {\n      @media (hover: hover) {\n        color: var(--color-muted-foreground);\n      }\n    }\n  }\n}\n.room-platform-room .\\*\\:\\[a\\]\\:hover\\:text-foreground {\n  .room-platform-room :is(& > *) {\n    .room-platform-room &:is(a) {\n      .room-platform-room &:hover {\n        @media (hover: hover) {\n          color: var(--color-foreground);\n        }\n      }\n    }\n  }\n}\n.room-platform-room .\\*\\:\\[span\\]\\:last\\:flex {\n  .room-platform-room :is(& > *) {\n    .room-platform-room &:is(span) {\n      .room-platform-room &:last-child {\n        display: flex;\n      }\n    }\n  }\n}\n.room-platform-room .\\*\\:\\[span\\]\\:last\\:items-center {\n  .room-platform-room :is(& > *) {\n    .room-platform-room &:is(span) {\n      .room-platform-room &:last-child {\n        align-items: center;\n      }\n    }\n  }\n}\n.room-platform-room .\\*\\:\\[span\\]\\:last\\:gap-2 {\n  .room-platform-room :is(& > *) {\n    .room-platform-room &:is(span) {\n      .room-platform-room &:last-child {\n        gap: calc(var(--spacing) * 2);\n      }\n    }\n  }\n}\n.room-platform-room .\\*\\:\\[svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-6 {\n  .room-platform-room :is(& > *) {\n    .room-platform-room &:is(svg:not([class*='size-'])) {\n      width: calc(var(--spacing) * 6);\n      height: calc(var(--spacing) * 6);\n    }\n  }\n}\n.room-platform-room .\\[\\&\\>svg\\]\\:pointer-events-none {\n  .room-platform-room &>svg {\n    pointer-events: none;\n  }\n}\n.room-platform-room .\\[\\&\\>svg\\]\\:size-3\\! {\n  .room-platform-room &>svg {\n    width: calc(var(--spacing) * 3) !important;\n    height: calc(var(--spacing) * 3) !important;\n  }\n}\n.room-platform-room .navi-chat__panel {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  border: 1px solid var(--navi-chat-color-border, #d8e0ea);\n  border-radius: var(--navi-chat-radius, 10px);\n  background: var(--navi-chat-color-surface, #ffffff);\n  color: var(--navi-chat-color-text, #111827);\n  font-family: var(--navi-chat-font-family, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n.room-platform-room .navi-chat__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  flex: 0 0 auto;\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--navi-chat-color-border, #d8e0ea);\n  background: #f8fafc;\n}\n.room-platform-room .navi-chat__header-main {\n  min-width: 0;\n}\n.room-platform-room .navi-chat__title {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  margin: 0;\n  overflow: hidden;\n  color: var(--navi-chat-color-text, #111827);\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 1.25;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.room-platform-room .navi-chat__online-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  border-radius: 999px;\n  background: #eff6ff;\n  color: var(--navi-chat-color-primary, #2563eb);\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 0 6px;\n}\n.room-platform-room .navi-chat__header-meta {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: 8px;\n}\n.room-platform-room .navi-chat__role-badge {\n  border-radius: 999px;\n  background: #eff6ff;\n  color: var(--navi-chat-color-primary, #2563eb);\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  padding: 5px 8px;\n}\n.room-platform-room .navi-chat__rooms {\n  display: flex;\n  flex: 0 0 auto;\n  gap: 6px;\n  overflow-x: auto;\n  padding: 10px;\n  border-bottom: 1px solid var(--navi-chat-color-border, #d8e0ea);\n}\n.room-platform-room .navi-chat__room-tab, .room-platform-room .navi-chat__send-button, .room-platform-room .navi-chat__message-action, .room-platform-room .navi-chat__message-menu-trigger, .room-platform-room .navi-chat__message-menu-item, .room-platform-room .navi-chat__message-edit-button, .room-platform-room .navi-chat__message-edit-input {\n  font: inherit;\n}\n.room-platform-room .navi-chat__room-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  max-width: 160px;\n  border: 0;\n  border-radius: 8px;\n  background: #f1f5f9;\n  color: #475569;\n  cursor: pointer;\n  padding: 7px 10px;\n}\n.room-platform-room .navi-chat__room-tab--active {\n  background: var(--navi-chat-color-primary, #2563eb);\n  color: #ffffff;\n}\n.room-platform-room .navi-chat__room-tab-label {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.room-platform-room .navi-chat__unread-badge {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  border-radius: 999px;\n  background: #eff6ff;\n  color: var(--navi-chat-color-primary, #2563eb);\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 0 5px;\n}\n.room-platform-room .navi-chat__room-tab--active .navi-chat__unread-badge {\n  background: rgba(255, 255, 255, 0.18);\n  color: #ffffff;\n}\n.room-platform-room .navi-chat__messages {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 14px;\n  background: #fbfdff;\n}\n.room-platform-room .navi-chat__messages-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-top: auto;\n}\n.room-platform-room .navi-chat__empty {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  padding: 24px;\n  background: #fbfdff;\n  color: #64748b;\n  text-align: center;\n}\n.room-platform-room .navi-chat__empty strong {\n  margin-top: 8px;\n  color: #334155;\n  font-size: 14px;\n}\n.room-platform-room .navi-chat__empty span {\n  margin-top: 4px;\n  font-size: 13px;\n}\n.room-platform-room .navi-chat__empty-icon {\n  color: var(--navi-chat-color-primary, #2563eb);\n  font-size: 22px;\n  line-height: 1;\n}\n.room-platform-room .navi-chat__message {\n  display: flex;\n}\n.room-platform-room .navi-chat__message-group {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.room-platform-room .navi-chat__loading-older {\n  align-self: center;\n  color: #64748b;\n  font-size: 12px;\n  font-weight: 600;\n  padding: 4px 0;\n}\n.room-platform-room .navi-chat__message--own {\n  justify-content: flex-end;\n}\n.room-platform-room .navi-chat__message-row {\n  position: relative;\n  display: flex;\n  align-items: flex-end;\n  gap: 6px;\n  min-width: 0;\n  max-width: min(82%, 560px);\n}\n.room-platform-room .navi-chat__message-row--own {\n  flex-direction: row-reverse;\n}\n.room-platform-room .navi-chat__message-bubble {\n  min-width: 0;\n  max-width: 100%;\n  border: 1px solid var(--navi-chat-color-border, #d8e0ea);\n  border-radius: 10px;\n  background: #ffffff;\n  padding: 9px 11px;\n  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);\n}\n.room-platform-room .navi-chat__message--grouped .navi-chat__message-bubble {\n  padding-top: 8px;\n}\n.room-platform-room .navi-chat__message--own .navi-chat__message-bubble {\n  border-color: var(--navi-chat-own-message-border, #bfdbfe);\n  background: var(--navi-chat-own-message-background, #eff6ff);\n}\n.room-platform-room .navi-chat__message--deleted .navi-chat__message-bubble {\n  background: #f8fafc;\n  color: #64748b;\n  font-style: italic;\n}\n.room-platform-room .navi-chat__message-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  margin-bottom: 4px;\n}\n.room-platform-room .navi-chat__message-author {\n  overflow: hidden;\n  color: #334155;\n  font-size: 12px;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.room-platform-room .navi-chat__message-time {\n  color: #94a3b8;\n  font-size: 11px;\n  white-space: nowrap;\n}\n.room-platform-room .navi-chat__message-text {\n  margin: 0;\n  color: var(--navi-chat-color-text, #111827);\n  font-size: 13px;\n  line-height: 1.45;\n  overflow-wrap: anywhere;\n  white-space: pre-wrap;\n}\n.room-platform-room .navi-chat__message-action {\n  margin-top: 8px;\n  border: 0;\n  background: transparent;\n  color: var(--navi-chat-color-primary, #2563eb);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: 600;\n  padding: 0;\n}\n.room-platform-room .navi-chat__message-menu {\n  position: absolute;\n  right: -30px;\n  bottom: 2px;\n  z-index: 3;\n  display: inline-flex;\n  flex: 0 0 auto;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 120ms ease, transform 120ms ease;\n  transform: translateY(2px);\n  vertical-align: middle;\n}\n.room-platform-room .navi-chat__message-row--own .navi-chat__message-menu {\n  right: auto;\n  left: -30px;\n}\n.room-platform-room .navi-chat__message:hover .navi-chat__message-menu, .room-platform-room .navi-chat__message:focus-within .navi-chat__message-menu, .room-platform-room .navi-chat__message-menu--open {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateY(0);\n}\n.room-platform-room .navi-chat__message-menu-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: 1px solid var(--navi-chat-color-border, #d8e0ea);\n  border-radius: 999px;\n  background: #ffffff;\n  color: #64748b;\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 0;\n  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);\n}\n.room-platform-room .navi-chat__message-menu-trigger:hover, .room-platform-room .navi-chat__message-menu-trigger:focus-visible {\n  border-color: #bfdbfe;\n  background: #eff6ff;\n  color: var(--navi-chat-color-primary, #2563eb);\n}\n.room-platform-room .navi-chat__message-menu-popover {\n  position: absolute;\n  right: 0;\n  bottom: 32px;\n  z-index: 2;\n  display: flex;\n  min-width: 82px;\n  flex-direction: column;\n  overflow: hidden;\n  border: 1px solid var(--navi-chat-color-border, #d8e0ea);\n  border-radius: 8px;\n  background: #ffffff;\n  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);\n}\n.room-platform-room .navi-chat__message-row--own .navi-chat__message-menu-popover {\n  right: auto;\n  left: 0;\n}\n.room-platform-room .navi-chat__message-menu-item {\n  border: 0;\n  background: transparent;\n  color: var(--navi-chat-color-text, #111827);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  padding: 8px 10px;\n  text-align: left;\n}\n.room-platform-room .navi-chat__message-menu-item:hover, .room-platform-room .navi-chat__message-menu-item:focus-visible {\n  background: #f1f5f9;\n  color: var(--navi-chat-color-primary, #2563eb);\n}\n.room-platform-room .navi-chat__message-edit {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.room-platform-room .navi-chat__message-edit-input {\n  box-sizing: border-box;\n  width: min(280px, 100%);\n  min-height: 64px;\n  resize: vertical;\n  border: 1px solid #cbd5e1;\n  border-radius: 8px;\n  background: #ffffff;\n  color: var(--navi-chat-color-text, #111827);\n  font-size: 13px;\n  line-height: 1.4;\n  padding: 8px 9px;\n}\n.room-platform-room .navi-chat__message-edit-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 6px;\n}\n.room-platform-room .navi-chat__message-edit-button {\n  border: 1px solid var(--navi-chat-color-border, #d8e0ea);\n  border-radius: 7px;\n  background: #ffffff;\n  color: #334155;\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 7px 9px;\n}\n.room-platform-room .navi-chat__message-edit-button--primary {\n  border-color: var(--navi-chat-color-primary, #2563eb);\n  background: var(--navi-chat-color-primary, #2563eb);\n  color: #ffffff;\n}\n.room-platform-room .navi-chat__latest-overlay {\n  position: sticky;\n  bottom: 8px;\n  align-self: stretch;\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n  pointer-events: none;\n}\n.room-platform-room .navi-chat__new-message-notice {\n  grid-column: 2;\n  border: 1px solid var(--navi-chat-color-border, #d8e0ea);\n  border-radius: 999px;\n  background: #ffffff;\n  color: var(--navi-chat-color-primary, #2563eb);\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 8px 12px;\n  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);\n}\n.room-platform-room .navi-chat__scroll-latest {\n  grid-column: 3;\n  justify-self: end;\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  margin-right: 4px;\n  border: 1px solid var(--navi-chat-color-border, #d8e0ea);\n  border-radius: 50%;\n  background: #ffffff;\n  color: var(--navi-chat-color-primary, #2563eb);\n  cursor: pointer;\n  padding: 0;\n  pointer-events: auto;\n  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);\n}\n.room-platform-room .navi-chat__scroll-latest-icon {\n  width: 18px;\n  height: 18px;\n  fill: currentColor;\n}\n.room-platform-room .navi-chat__composer {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: flex-end;\n  gap: 8px;\n  padding: 10px;\n  border-top: 1px solid var(--navi-chat-color-border, #d8e0ea);\n  background: #ffffff;\n}\n.room-platform-room .navi-chat__composer-main {\n  display: flex;\n  flex: 1 1 auto;\n  min-width: 0;\n  flex-direction: column;\n  gap: 4px;\n}\n.room-platform-room .navi-chat__composer-input {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 38px;\n  max-height: 84px;\n  resize: vertical;\n  border: 1px solid #cbd5e1;\n  border-radius: 8px;\n  color: var(--navi-chat-color-text, #111827);\n  font: inherit;\n  font-size: 13px;\n  line-height: 1.4;\n  padding: 9px 10px;\n}\n.room-platform-room .navi-chat__composer-tip {\n  margin: 0;\n  color: #64748b;\n  font-size: 11px;\n  line-height: 1.3;\n}\n.room-platform-room .navi-chat__send-button {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  width: 44px;\n  height: 44px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--navi-chat-color-primary, #2563eb);\n  color: #ffffff;\n  cursor: pointer;\n  padding: 0;\n}\n.room-platform-room .navi-chat__send-button:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n.room-platform-room .navi-chat__send-icon {\n  width: 18px;\n  height: 18px;\n  fill: currentColor;\n}\n.room-platform-room .navi-chat__readonly {\n  flex: 0 0 auto;\n  border-top: 1px solid var(--navi-chat-color-border, #d8e0ea);\n  background: #f8fafc;\n  color: #64748b;\n  font-size: 13px;\n  padding: 12px 14px;\n}\n.room-platform-room .navi-chat__status {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n}\n.room-platform-room .navi-chat__status-dot {\n  width: 9px;\n  height: 9px;\n  border-radius: 999px;\n  background: #94a3b8;\n}\n.room-platform-room .navi-chat__status--connected .navi-chat__status-dot {\n  background: #16a34a;\n}\n.room-platform-room .navi-chat__status--muted .navi-chat__status-dot {\n  background: #94a3b8;\n}\n.room-platform-room .navi-chat__status--error .navi-chat__status-dot {\n  background: #dc2626;\n}\n.room-platform-room .whiteboard-react-canvas {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.room-platform-room .whiteboard-react-canvas__scene {\n  position: relative;\n  height: 100%;\n  min-height: 100%;\n}\n.room-platform-room .whiteboard-react-canvas__layer {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n}\n.room-platform-room .whiteboard-react-canvas__layer--scene {\n  z-index: 10;\n  pointer-events: none;\n}\n.room-platform-room .whiteboard-react-canvas__layer--interaction {\n  z-index: 11;\n  touch-action: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.room-platform-room .whiteboard-react-trigger, .room-platform-room .whiteboard-react-toolbar, .room-platform-room .whiteboard-react-toolbar__popover {\n  --whiteboard-overlay-bg: rgb(255 255 255 / 0.94);\n  --whiteboard-overlay-border: rgb(148 163 184 / 0.32);\n  --whiteboard-overlay-shadow: 0 18px 40px rgb(15 23 42 / 0.24);\n  --whiteboard-overlay-text: #0f172a;\n  --whiteboard-overlay-muted: #475569;\n  --whiteboard-overlay-accent: #0f766e;\n  --whiteboard-overlay-accent-soft: rgb(15 118 110 / 0.12);\n  --whiteboard-overlay-danger: #dc2626;\n  position: fixed;\n  border: 1px solid var(--whiteboard-overlay-border);\n  border-radius: 1.125rem;\n  background: var(--whiteboard-overlay-bg);\n  color: var(--whiteboard-overlay-text);\n  box-shadow: var(--whiteboard-overlay-shadow);\n  backdrop-filter: blur(16px);\n}\n.room-platform-room .whiteboard-react-trigger {\n  z-index: 60;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  padding: 0;\n  border: 0;\n  border-radius: 999px;\n  background: #252627;\n  color: #00ff9d;\n  cursor: pointer;\n  transition: background 140ms ease, color 140ms ease;\n}\n.room-platform-room .whiteboard-react-trigger:hover {\n  background: #00ff9d;\n  color: #000;\n}\n.room-platform-room .whiteboard-react-toolbar__tooltip-trigger {\n  display: inline-flex;\n}\n.room-platform-room .whiteboard-react-trigger:focus-visible, .room-platform-room .whiteboard-react-toolbar__button:focus-visible, .room-platform-room .whiteboard-react-toolbar__drag-handle:focus-visible, .room-platform-room .whiteboard-react-toolbar__option-chip:focus-visible, .room-platform-room .whiteboard-react-toolbar__width-chip:focus-visible, .room-platform-room .whiteboard-react-color-popover__swatch:focus-visible, .room-platform-room .whiteboard-react-toolbar__status-action:focus-visible {\n  outline: 2px solid rgb(15 118 110 / 0.45);\n  outline-offset: 2px;\n}\n.room-platform-room .whiteboard-react-trigger__icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex: none;\n}\n.room-platform-room .whiteboard-react-toolbar__icon {\n  width: 1.35rem;\n  height: 1.35rem;\n  flex: none;\n}\n.room-platform-room .whiteboard-react-toolbar__icon.ColorSvg {\n  width: 2rem;\n}\n.room-platform-room .whiteboard-react-trigger__label {\n  white-space: nowrap;\n}\n.room-platform-room .whiteboard-react-trigger__status-dot, .room-platform-room .whiteboard-react-toolbar__status-dot {\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 999px;\n  background: var(--whiteboard-overlay-accent);\n  box-shadow: 0 0 0 4px rgb(15 118 110 / 0.14);\n  flex: none;\n}\n.room-platform-room .whiteboard-react-trigger[data-runtime-state='failed'] .whiteboard-react-trigger__status-dot {\n  background: var(--whiteboard-overlay-danger);\n  box-shadow: 0 0 0 4px rgb(220 38 38 / 0.12);\n}\n.room-platform-room .whiteboard-react-toolbar {\n  z-index: 61;\n  border: 0.15rem solid rgb(226 232 240 / 0.72);\n  border-radius: 0.5rem;\n  background: #292a2c;\n  color: #f8fafc;\n  box-shadow: 0 12px 28px rgb(15 23 42 / 0.3);\n  transition: transform 140ms ease, box-shadow 140ms ease;\n  transform-origin: center;\n  animation: whiteboard-toolbar-orientation-vertical 180ms ease-in-out;\n}\n@keyframes whiteboard-toolbar-orientation-vertical {\n  from {\n    transform: scaleX(1.2);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n@keyframes whiteboard-toolbar-orientation-horizontal {\n  from {\n    transform: scaleX(1.2);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .room-platform-room .whiteboard-react-toolbar {\n    animation: none;\n    transition: none;\n  }\n}\n.room-platform-room .whiteboard-react-toolbar__chrome {\n  display: flex;\n  flex-direction: column;\n  gap: 0.3rem;\n  padding: 0.4rem;\n}\n.room-platform-room .whiteboard-react-toolbar[data-orientation='horizontal'] .whiteboard-react-toolbar__chrome {\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0.4rem;\n}\n.room-platform-room .whiteboard-react-toolbar[data-orientation='horizontal'] {\n  animation-name: whiteboard-toolbar-orientation-horizontal;\n}\n.room-platform-room .whiteboard-react-toolbar__drag-handle {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 0.75rem;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 0.65rem;\n  background: transparent;\n  color: rgb(226 232 240 / 0.84);\n  cursor: grab;\n  transition: color 120ms ease, border-color 120ms ease;\n}\n.room-platform-room .whiteboard-react-toolbar__drag-handle::before {\n  position: absolute;\n  top: -0.5rem;\n  right: 0;\n  left: 0;\n  height: 1px;\n  content: '';\n  background: rgb(226 232 240 / 0.45);\n}\n.room-platform-room .whiteboard-react-toolbar__drag-handle:hover {\n  color: #fff;\n  background: rgb(255 255 255 / 0.1);\n}\n.room-platform-room .whiteboard-react-toolbar__drag-handle:active {\n  cursor: grabbing;\n}\n.room-platform-room .whiteboard-react-toolbar__status {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  max-width: 16rem;\n  padding: 0.625rem 0.75rem;\n  border-radius: 0.875rem;\n  background: rgb(248 250 252 / 0.96);\n  color: var(--whiteboard-overlay-muted);\n  font-size: 0.8125rem;\n  font-weight: 500;\n}\n.room-platform-room .whiteboard-react-toolbar__status[data-state='failed'] {\n  color: var(--whiteboard-overlay-danger);\n  background: rgb(254 242 242 / 0.96);\n}\n.room-platform-room .whiteboard-react-toolbar__status[data-state='busy'] {\n  color: var(--whiteboard-overlay-accent);\n  background: rgb(240 253 250 / 0.96);\n}\n.room-platform-room .whiteboard-react-toolbar__status-action {\n  margin-left: 0.25rem;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font-weight: 700;\n  text-decoration: underline;\n}\n.room-platform-room .whiteboard-react-toolbar__rail {\n  display: flex;\n  gap: 0.5rem;\n}\n.room-platform-room .whiteboard-react-toolbar[data-orientation='vertical'] .whiteboard-react-toolbar__rail {\n  flex-direction: column;\n}\n.room-platform-room .whiteboard-react-toolbar[data-orientation='horizontal'] .whiteboard-react-toolbar__rail {\n  flex-direction: row;\n  align-items: center;\n}\n.room-platform-room .whiteboard-react-toolbar[data-orientation='horizontal'] .whiteboard-react-toolbar__drag-handle::before {\n  top: 0;\n  right: auto;\n  bottom: 0;\n  left: -0.15rem;\n  width: 1px;\n  height: auto;\n}\n.room-platform-room .whiteboard-react-toolbar__button {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  border: 0;\n  border-radius: 0.65rem;\n  margin-top: 0.75rem;\n  background: transparent;\n  color: #f8fafc;\n  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;\n}\n.room-platform-room .whiteboard-react-toolbar[data-orientation='horizontal'] .whiteboard-react-toolbar__button, .room-platform-room .whiteboard-react-toolbar[data-orientation='horizontal'] .whiteboard-react-toolbar__drag-handle {\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-left: 0.75rem;\n}\n.room-platform-room .whiteboard-react-toolbar__button:hover:not(:disabled) {\n  cursor: pointer;\n  background: rgb(255 255 255 / 0.1);\n}\n.room-platform-room .whiteboard-react-toolbar__button[data-active='true'] {\n  background: #0878f7;\n  color: #fff;\n}\n.room-platform-room .whiteboard-react-toolbar__button[data-active='true']:hover:not(:disabled) {\n  background: #0878f7;\n}\n.room-platform-room .whiteboard-react-toolbar__button[aria-label='Color'] .whiteboard-react-toolbar__icon {\n  display: none;\n}\n.room-platform-room .whiteboard-react-toolbar__button[aria-label='Color'] .whiteboard-react-toolbar__button-swatch {\n  position: static;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 0;\n}\n.room-platform-room .whiteboard-react-toolbar__button[aria-label='Close whiteboard tools'] {\n  margin-bottom: 0.75rem;\n  background: #ef1111;\n  color: #fff;\n}\n.room-platform-room .whiteboard-react-toolbar__button[aria-label='Close whiteboard tools']:hover:not(:disabled) {\n  background: #dc0d0d;\n}\n.room-platform-room .whiteboard-react-toolbar[data-orientation='horizontal'] span:last-child .whiteboard-react-toolbar__button {\n  margin-bottom: 0;\n  margin-right: 0.75rem;\n}\n.room-platform-room .whiteboard-react-toolbar__button:disabled, .room-platform-room .whiteboard-react-toolbar__option-chip:disabled, .room-platform-room .whiteboard-react-toolbar__width-chip:disabled, .room-platform-room .whiteboard-react-color-popover__swatch:disabled {\n  cursor: not-allowed;\n  opacity: 0.46;\n}\n.room-platform-room .whiteboard-react-toolbar__button-swatch {\n  position: absolute;\n  right: 0.34rem;\n  bottom: 0.34rem;\n  width: 0.6rem;\n  height: 0.6rem;\n  border: 1px solid rgb(255 255 255 / 0.8);\n  border-radius: 999px;\n  background: var(--whiteboard-color);\n  box-shadow: 0 0 0 1px rgb(15 23 42 / 0.12);\n}\n.room-platform-room .whiteboard-react-toolbar__popover {\n  z-index: 62;\n  padding: 0.65rem;\n  border: 0.15rem solid rgb(226 232 240 / 0.72);\n  border-radius: 0.5rem;\n  background: #292a2c;\n  color: #f8fafc;\n  box-shadow: 0 12px 28px rgb(15 23 42 / 0.3);\n}\n.room-platform-room .whiteboard-react-draw-popover {\n  max-width: 15.5rem;\n}\n.room-platform-room .whiteboard-react-color-popover {\n  width: 12.5rem;\n}\n.room-platform-room .whiteboard-react-toolbar__popover-section {\n  display: flex;\n  flex-direction: column;\n  gap: 0.35rem;\n}\n.room-platform-room .whiteboard-react-toolbar__popover-section + .whiteboard-react-toolbar__popover-section {\n  margin-top: 0.55rem;\n}\n.room-platform-room .whiteboard-react-toolbar__popover-label {\n  margin: 0;\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: rgb(226 232 240 / 0.82);\n}\n.room-platform-room .whiteboard-react-toolbar__option-grid, .room-platform-room .whiteboard-react-toolbar__width-grid {\n  display: grid;\n  gap: 0.35rem;\n}\n.room-platform-room .whiteboard-react-toolbar__option-grid {\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.room-platform-room .whiteboard-react-toolbar__option-grid--shapes {\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.room-platform-room .whiteboard-react-toolbar__option-chip, .room-platform-room .whiteboard-react-toolbar__width-chip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.25rem;\n  height: 2.25rem;\n  border: 1px solid transparent;\n  border-radius: 0.65rem;\n  background: transparent;\n  color: #f8fafc;\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1;\n  padding: 0;\n  cursor: pointer;\n}\n.room-platform-room .whiteboard-react-toolbar__option-chip[data-active='true'], .room-platform-room .whiteboard-react-toolbar__width-chip[data-active='true'] {\n  border-color: transparent;\n  background: #0878f7;\n  color: #fff;\n}\n.room-platform-room .whiteboard-react-toolbar__option-chip:hover:not(:disabled):not([data-active='true']), .room-platform-room .whiteboard-react-toolbar__width-chip:hover:not(:disabled):not([data-active='true']) {\n  color: #fff;\n}\n.room-platform-room .whiteboard-react-toolbar__width-grid {\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.room-platform-room .whiteboard-react-toolbar__option-icon {\n  flex: none;\n}\n.room-platform-room .whiteboard-react-toolbar__width-sample {\n  display: inline-flex;\n  width: 1.35rem;\n  height: 1.35rem;\n  border-radius: 999px;\n  background: currentColor;\n  flex: none;\n}\n.room-platform-room .whiteboard-react-toolbar__width-sample[data-width='xs'] {\n  width: 0.3rem;\n  height: 0.3rem;\n}\n.room-platform-room .whiteboard-react-toolbar__width-sample[data-width='sm'] {\n  width: 0.45rem;\n  height: 0.45rem;\n}\n.room-platform-room .whiteboard-react-toolbar__width-sample[data-width='md'] {\n  width: 0.65rem;\n  height: 0.65rem;\n}\n.room-platform-room .whiteboard-react-toolbar__width-sample[data-width='lg'] {\n  width: 0.9rem;\n  height: 0.9rem;\n}\n.room-platform-room .whiteboard-react-color-popover__grid {\n  display: grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  gap: 0.5rem;\n}\n.room-platform-room .whiteboard-react-color-popover__swatch {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  border: 1px solid rgb(148 163 184 / 0.28);\n  border-radius: 999px;\n  background: rgb(255 255 255 / 0.9);\n  cursor: pointer;\n}\n.room-platform-room .whiteboard-react-color-popover__swatch-fill {\n  width: 1.35rem;\n  height: 1.35rem;\n  border-radius: 999px;\n  background: var(--whiteboard-color);\n  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.08);\n}\n.room-platform-room .whiteboard-react-color-popover__swatch[data-active='true'] {\n  border-color: rgb(15 118 110 / 0.45);\n  box-shadow: 0 0 0 4px rgb(15 118 110 / 0.12);\n}\n.room-platform-room .whiteboard-react-color-popover__swatch[data-light='true'] .whiteboard-react-color-popover__swatch-fill {\n  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.12), 0 0 0 1px rgb(226 232 240 / 0.8);\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-scale-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: \"*\";\n  initial-value: \"\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity,1);\n    transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n    filter: blur(var(--tw-enter-blur,0));\n  }\n}\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity,1);\n    transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n    filter: blur(var(--tw-exit-blur,0));\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    .room-platform-room *, .room-platform-room ::before, .room-platform-room ::after, .room-platform-room ::backdrop {\n      --tw-animation-delay: 0s;\n      --tw-animation-direction: normal;\n      --tw-animation-duration: initial;\n      --tw-animation-fill-mode: none;\n      --tw-animation-iteration-count: 1;\n      --tw-enter-blur: 0;\n      --tw-enter-opacity: 1;\n      --tw-enter-rotate: 0;\n      --tw-enter-scale: 1;\n      --tw-enter-translate-x: 0;\n      --tw-enter-translate-y: 0;\n      --tw-exit-blur: 0;\n      --tw-exit-opacity: 1;\n      --tw-exit-rotate: 0;\n      --tw-exit-scale: 1;\n      --tw-exit-translate-x: 0;\n      --tw-exit-translate-y: 0;\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-content: \"\";\n    }\n  }\n}\n/* @naviedu/room-platform-react bundled tailwind utilities */\n.room-platform-host {\n    box-sizing: border-box;\n    display: block;\n    height: 100%;\n    min-height: 0;\n    min-width: 0;\n}\n\n:host(.room-platform-host) {\n    box-sizing: border-box;\n    display: block;\n    height: 100%;\n    min-height: 0;\n    min-width: 0;\n}\n\n[data-room-platform-app-root] {\n    box-sizing: border-box;\n    display: block;\n    height: 100%;\n    min-height: 0;\n    min-width: 0;\n}\n\n.room-platform-room {\n    --room-platform-navy: #242f62;\n    --room-platform-orange: #eb6619;\n    --room-platform-border: #dbe3ef;\n    --room-platform-surface: #ffffff;\n    --room-platform-muted: #f8fafc;\n    background: var(--room-platform-muted);\n    color: #172033;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    overflow: hidden;\n    width: 100%;\n}\n\n.room-platform-room[data-sizing='viewport'] {\n    height: 100dvh;\n    min-height: 100dvh;\n}\n\n.room-platform-room[data-sizing='container'] {\n    height: 100%;\n    min-height: 0;\n    width: 100%;\n}\n\n.room-platform-room.room-platform-portal-root {\n    background: transparent;\n    display: block;\n    height: auto;\n    min-height: 0;\n    overflow: visible;\n    width: auto;\n}\n\n.room-platform-surface {\n    box-sizing: border-box;\n}\n\n.room-platform-panel {\n    background: var(--room-platform-surface);\n    border: 1px solid var(--room-platform-border);\n    border-radius: 8px;\n}\n\n.room-platform-button {\n    align-items: center;\n    border: 1px solid transparent;\n    border-radius: 8px;\n    cursor: pointer;\n    display: inline-flex;\n    font: inherit;\n    gap: 0.375rem;\n    justify-content: center;\n    min-height: 2rem;\n    padding: 0.375rem 0.75rem;\n}\n\n.room-platform-button:focus-visible,\n.room-platform-tab:focus-visible {\n    outline: 3px solid color-mix(in srgb, var(--room-platform-orange), transparent 65%);\n    outline-offset: 2px;\n}\n\n.room-platform-button:disabled {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.room-platform-button--default {\n    background: var(--room-platform-navy);\n    color: #fff;\n}\n\n.room-platform-button--quiet {\n    background: #edf2f7;\n    color: var(--room-platform-navy);\n}\n\n.room-platform-button--danger {\n    background: #fff1f2;\n    color: #b42318;\n}\n\n.room-platform-shell {\n    background: #020617;\n    color: #fff;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-height: 0;\n    min-width: 0;\n    overflow: hidden;\n}\n\n.room-platform-shell-top-bar--hidden {\n    display: none;\n}\n\n.room-platform-shell-body {\n    display: grid;\n    flex: 1;\n    grid-template-columns: minmax(0, 1fr);\n    min-height: 0;\n    position: relative;\n}\n\n.room-platform-shell-body--sidebar {\n    grid-template-columns: minmax(0, 1fr) minmax(16.25rem, 18.75rem);\n}\n\n.room-platform-shell-main {\n    display: flex;\n    min-height: 0;\n    min-width: 0;\n    overflow: hidden;\n    position: relative;\n}\n\n.room-platform-shell-sidebar {\n    display: flex;\n    min-height: 0;\n    position: relative;\n    width: 100%;\n}\n\n.room-platform-shell-sidebar-content {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.room-platform-shell-sidebar-open,\n.room-platform-shell-sidebar-close {\n    position: absolute;\n    z-index: 40;\n}\n\n.room-platform-shell-sidebar-open {\n    right: 1rem;\n    top: 1rem;\n}\n\n.room-platform-shell-sidebar-close {\n    left: 0;\n    top: 0.75rem;\n    transform: translateX(-100%);\n}\n\n.room-platform-top-bar {\n    align-items: center;\n    background: #0f172a;\n    border-bottom: 1px solid rgb(255 255 255 / 10%);\n    color: #fff;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.75rem;\n    justify-content: space-between;\n    min-height: 4.5rem;\n    padding: 0.75rem 1rem;\n}\n\n.room-platform-top-bar h1,\n.room-platform-top-bar p {\n    margin: 0;\n}\n\n.room-platform-top-bar h1 {\n    color: #fff;\n    font-size: 1.125rem;\n}\n\n.room-platform-eyebrow {\n    color: #cbd5e1;\n    font-size: 0.75rem;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.room-platform-top-bar-heading,\n.room-platform-top-bar-trailing {\n    align-items: center;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n}\n\n.room-platform-top-bar-trailing {\n    justify-content: flex-end;\n}\n\n.room-platform-media-controls {\n    align-items: center;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.375rem;\n}\n\n.room-platform-media-controls .room-platform-button {\n    font-size: 0.8125rem;\n}\n\n.room-platform-status {\n    border-radius: 999px;\n    font-size: 0.8rem;\n    font-weight: 600;\n    padding: 0.25rem 0.625rem;\n}\n\n.room-platform-status[data-status='connected'] {\n    background: #dcfae6;\n    color: #166534;\n}\n\n.room-platform-status[data-status='error'] {\n    background: #fee2e2;\n    color: #b42318;\n}\n\n.room-platform-status[data-status='connecting'],\n.room-platform-status[data-status='reconnecting'] {\n    background: #fff3d6;\n    color: #9a4f00;\n}\n\n.room-platform-main {\n    display: flex;\n    flex: 1;\n    gap: 1rem;\n    min-height: 0;\n    min-width: 0;\n    padding: 1rem;\n    position: relative;\n}\n\n.room-platform-stage-area {\n    flex: 1;\n    min-height: 26rem;\n    min-width: 0;\n    position: relative;\n}\n\n.room-platform-stage {\n    align-items: center;\n    background: linear-gradient(135deg, #1e2a5b, #3c4b89);\n    color: #fff;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    overflow: hidden;\n    padding: 1rem;\n    position: relative;\n}\n\n.room-platform-stage-title {\n    font-size: 1.125rem;\n    font-weight: 700;\n}\n\n.room-platform-workspace-overlay {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    overflow: auto;\n    width: 100%;\n}\n\n.room-platform-workspace-alongside {\n    min-width: 18rem;\n    width: 35%;\n}\n\n.room-platform-sidebar {\n    background: var(--room-platform-surface);\n    border: 1px solid var(--room-platform-border);\n    border-radius: 8px;\n    min-width: 0;\n    overflow: hidden;\n    width: 100%;\n}\n\n.room-platform-control-anchor {\n    align-items: stretch;\n    display: flex;\n    flex: 1;\n    justify-content: center;\n    min-height: 0;\n    min-width: 0;\n    overflow: hidden;\n    position: relative;\n}\n\n.room-platform-control-bar {\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    margin: auto;\n    padding: 0 0.75rem 0.75rem;\n    position: absolute;\n    right: 0;\n    transition: transform 200ms ease;\n    width: fit-content;\n    z-index: 40;\n}\n\n.room-platform-control-bar--hidden {\n    transform: translateY(calc(100% - 0.75rem));\n}\n\n.room-platform-control-reveal {\n    bottom: 0.25rem;\n    left: 50%;\n    position: absolute;\n    transform: translateX(-50%);\n    z-index: 30;\n}\n\n.room-platform-side-media {\n    display: grid;\n    gap: 0.75rem;\n    padding: 0.75rem;\n}\n\n.room-platform-video-tile {\n    background: #0f172a;\n    border-radius: 8px;\n    color: #fff;\n    min-height: 0;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n}\n\n.room-platform-video-tile--preview,\n.room-platform-video-tile--active-speaker {\n    aspect-ratio: 16 / 9;\n}\n\n.room-platform-video-tile--stage,\n.room-platform-video-tile--overlay {\n    height: 100%;\n}\n\n.room-platform-video-tile-media {\n    display: block;\n    height: 100%;\n    object-fit: cover;\n    width: 100%;\n}\n\n.room-platform-video-tile--stage .room-platform-video-tile-media {\n    object-fit: contain;\n}\n\n.room-platform-video-tile-media--mirrored {\n    transform: scaleX(-1);\n}\n\n.room-platform-video-tile-label {\n    background: rgb(15 23 42 / 75%);\n    border-radius: 999px;\n    bottom: 0.5rem;\n    font-size: 0.75rem;\n    font-weight: 700;\n    left: 0.5rem;\n    max-width: calc(100% - 1rem);\n    overflow: hidden;\n    padding: 0.25rem 0.5rem;\n    position: absolute;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    z-index: 15;\n}\n\n.room-platform-video-tile-empty {\n    align-items: center;\n    display: flex;\n    font-size: 0.8125rem;\n    height: 100%;\n    justify-content: center;\n    margin: 0;\n    min-height: 8rem;\n    padding: 1rem;\n    text-align: center;\n}\n\n.room-platform-tabs {\n    border-bottom: 1px solid var(--room-platform-border);\n    display: flex;\n    gap: 0.25rem;\n    overflow-x: auto;\n    padding: 0.5rem;\n}\n\n.room-platform-tab {\n    background: transparent;\n    border: 0;\n    border-radius: 6px;\n    color: #475569;\n    cursor: pointer;\n    font: inherit;\n    font-size: 0.875rem;\n    padding: 0.4rem 0.6rem;\n    white-space: nowrap;\n}\n\n.room-platform-tab[aria-selected='true'] {\n    background: #e9edf9;\n    color: var(--room-platform-navy);\n    font-weight: 700;\n}\n\n.room-platform-tab-panel {\n    padding: 0.75rem;\n}\n\n.room-platform-participant-list {\n    display: grid;\n    gap: 0.5rem;\n}\n\n.room-platform-participant-row {\n    align-items: center;\n    display: flex;\n    gap: 0.5rem;\n    justify-content: space-between;\n    padding: 0.625rem;\n}\n\n.room-platform-participant-name,\n.room-platform-participant-subtitle {\n    margin: 0;\n}\n\n.room-platform-participant-name {\n    font-size: 0.875rem;\n    font-weight: 700;\n}\n\n.room-platform-participant-subtitle {\n    color: #64748b;\n    font-size: 0.75rem;\n}\n\n.room-platform-participant-presence {\n    color: #64748b;\n    font-size: 0.75rem;\n    font-weight: 500;\n    margin: 0.25rem 0 0;\n}\n\n.room-platform-participant-presence[data-online='true'] {\n    color: #16a34a;\n}\n\n.room-platform-participant-row-trailing,\n.room-platform-participant-actions {\n    align-items: center;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.375rem;\n    justify-content: flex-end;\n}\n\n.room-platform-participant-actions .room-platform-button {\n    font-size: 0.75rem;\n    min-height: 1.75rem;\n    padding: 0.25rem 0.5rem;\n}\n\n.room-platform-action-error {\n    color: #b42318;\n    font-size: 0.8125rem;\n    margin: 0.5rem 0 0;\n}\n\n.room-platform-error {\n    color: #fca5a5;\n    font-size: 0.8125rem;\n    margin: 0.5rem 0 0;\n}\n\n.room-platform-empty {\n    color: #64748b;\n    font-size: 0.875rem;\n    margin: 0;\n    padding: 1rem 0;\n    text-align: center;\n}\n\n.room-platform-whiteboard {\n    height: 100%;\n    width: 100%;\n}\n\n.room-platform-surface-error {\n    align-items: center;\n    background: rgb(15 23 42 / 88%);\n    color: #fff;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    margin: 0;\n    padding: 1rem;\n    text-align: center;\n    width: 100%;\n}\n\n.room-platform-start-audio {\n    background: #242f62;\n    border: 0;\n    border-radius: 8px;\n    color: #fff;\n    cursor: pointer;\n    left: 50%;\n    padding: 0.625rem 1rem;\n    position: fixed;\n    top: 1rem;\n    transform: translateX(-50%);\n    z-index: 50;\n}\n\n.room-platform-start-audio:focus-visible {\n    outline: 3px solid #eb6619;\n    outline-offset: 2px;\n}\n\n.room-platform-stage-frame {\n    align-items: center;\n    background: #0f172a;\n    border-radius: 8px;\n    display: flex;\n    justify-content: center;\n    max-height: 100%;\n    max-width: 100%;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n}\n\n.room-platform-stage-frame > video {\n    display: block;\n    height: 100%;\n    object-fit: contain;\n    width: 100%;\n}\n\n.room-platform-stage-content {\n    inset: 0;\n    position: absolute;\n    z-index: 10;\n}\n\n.room-platform-stage-camera-overlay {\n    aspect-ratio: 16 / 9;\n    left: 1rem;\n    max-width: 40%;\n    overflow: hidden;\n    position: absolute;\n    top: 1rem;\n    width: 12rem;\n    z-index: 20;\n}\n\n.room-platform-stage-camera-overlay video {\n    height: 100%;\n    object-fit: cover;\n    width: 100%;\n}\n\n.room-platform-stage-status {\n    background: rgb(15 23 42 / 80%);\n    border-radius: 999px;\n    color: #dbeafe;\n    left: 50%;\n    margin: 0;\n    padding: 0.375rem 0.75rem;\n    position: absolute;\n    top: 1.5rem;\n    transform: translateX(-50%);\n    z-index: 30;\n}\n\n@keyframes private-live-room-bell-ring {\n    0%,\n    52%,\n    100% {\n        transform: rotate(0deg);\n    }\n    6% {\n        transform: rotate(14deg);\n    }\n    12% {\n        transform: rotate(-14deg);\n    }\n    18% {\n        transform: rotate(12deg);\n    }\n    24% {\n        transform: rotate(-10deg);\n    }\n    30% {\n        transform: rotate(8deg);\n    }\n    38% {\n        transform: rotate(-5deg);\n    }\n    46% {\n        transform: rotate(3deg);\n    }\n}\n\n.private-live-room-ringing-bell {\n    display: inline-flex;\n    animation: private-live-room-bell-ring 2.2s ease-in-out infinite;\n    transform-box: fill-box;\n    transform-origin: 50% 0%;\n    will-change: transform;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .private-live-room-ringing-bell {\n        animation: none;\n    }\n}\n\n@media (max-width: 900px) {\n    .room-platform-stage-area {\n        min-height: 20rem;\n    }\n}\n\n@media (max-width: 767px) {\n    .room-platform-shell-body {\n        grid-template-columns: 1fr;\n        grid-template-rows: minmax(15rem, 45dvh) minmax(0, 1fr);\n    }\n\n    .room-platform-shell-body > .room-platform-shell-main:only-child {\n        grid-row: 1 / -1;\n    }\n\n    .room-platform-shell-sidebar {\n        max-width: none;\n    }\n\n    .room-platform-top-bar {\n        align-items: flex-start;\n        flex-direction: column;\n        gap: 0.75rem;\n    }\n\n    .room-platform-top-bar-heading,\n    .room-platform-top-bar-trailing {\n        justify-content: flex-start;\n        width: 100%;\n    }\n\n    .room-platform-main {\n        flex-direction: column;\n        padding: 0.5rem;\n    }\n\n    .room-platform-workspace-alongside {\n        min-width: 0;\n        width: 100%;\n    }\n}\n";
+
+function _array_like_to_array$4(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$4(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$4(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$4() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array$4(arr, i) {
+    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
+}
+function _unsupported_iterable_to_array$4(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$4(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
+}
+function RoomPlatformShadowHost(param) {
+    var children = param.children;
+    var hostRef = useRef(null);
+    var _useState = _sliced_to_array$4(useState(null), 2), surface = _useState[0], setSurface = _useState[1];
+    useLayoutEffect(function() {
+        var _host_shadowRoot;
+        var host = hostRef.current;
+        if (!host) return;
+        var shadowRoot = (_host_shadowRoot = host.shadowRoot) !== null && _host_shadowRoot !== void 0 ? _host_shadowRoot : host.attachShadow({
+            mode: 'open'
+        });
+        var style = host.ownerDocument.createElement('style');
+        var appRoot = host.ownerDocument.createElement('div');
+        var portalRoot = host.ownerDocument.createElement('div');
+        style.setAttribute('data-room-platform-style', '');
+        style.textContent = roomPlatformGeneratedStyles;
+        appRoot.setAttribute('data-room-platform-app-root', '');
+        portalRoot.className = 'room-platform-room room-platform-portal-root';
+        portalRoot.setAttribute('data-room-platform-portal-root', '');
+        shadowRoot.append(style, appRoot, portalRoot);
+        setSurface({
+            appRoot: appRoot,
+            portalRoot: portalRoot
+        });
+        return function() {
+            setSurface(null);
+            style.remove();
+            appRoot.remove();
+            portalRoot.remove();
+        };
+    }, []);
+    return /*#__PURE__*/ jsx("div", {
+        ref: hostRef,
+        "data-room-platform-host": true,
+        className: "room-platform-host",
+        children: surface ? /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(PortalContainerProvider, {
+            container: surface.portalRoot,
+            children: children
+        }), surface.appRoot) : null
+    });
+}
+
 function _array_like_to_array$3(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -26672,7 +26870,7 @@ function _ts_generator$1(thisArg, body) {
     }
 }
 function RoomPlatformSpeakQueue(param) {
-    var activeSpeakerParticipantIdentity = param.activeSpeakerParticipantIdentity, activeSpeakerSlot = param.activeSpeakerSlot, canApproveSpeak = param.canApproveSpeak, canClearActiveSpeaker = param.canClearActiveSpeaker, canRejectSpeak = param.canRejectSpeak, isClearingActiveSpeaker = param.isClearingActiveSpeaker, _param_isPracticeMode = param.isPracticeMode, isPracticeMode = _param_isPracticeMode === void 0 ? false : _param_isPracticeMode, onApproveSpeakRequest = param.onApproveSpeakRequest, onClearActiveSpeaker = param.onClearActiveSpeaker, onRejectSpeakRequest = param.onRejectSpeakRequest, participants = param.participants, raisedHandParticipantIdentities = param.raisedHandParticipantIdentities;
+    var activeSpeakerParticipantIdentity = param.activeSpeakerParticipantIdentity, activeSpeakerSlot = param.activeSpeakerSlot, canApproveSpeak = param.canApproveSpeak, canClearActiveSpeaker = param.canClearActiveSpeaker, canRejectSpeak = param.canRejectSpeak, isClearingActiveSpeaker = param.isClearingActiveSpeaker, onApproveSpeakRequest = param.onApproveSpeakRequest, onClearActiveSpeaker = param.onClearActiveSpeaker, onRejectSpeakRequest = param.onRejectSpeakRequest, participants = param.participants, raisedHandParticipantIdentities = param.raisedHandParticipantIdentities;
     var participantsByIdentity = new Map(participants.map(function(participant) {
         return [
             participant.participantIdentity,
@@ -26684,6 +26882,7 @@ function RoomPlatformSpeakQueue(param) {
     var canShowApprove = canApproveSpeak && onApproveSpeakRequest;
     var canShowReject = canRejectSpeak && onRejectSpeakRequest;
     var _useState = _sliced_to_array$2(useState(null), 2), pendingSpeakAction = _useState[0], setPendingSpeakAction = _useState[1];
+    var roomPlatformToast = useRoomPlatformToast();
     var runSpeakAction = function(participantIdentity, action) {
         return _async_to_generator$1(function() {
             var handler;
@@ -26718,7 +26917,7 @@ function RoomPlatformSpeakQueue(param) {
                         ];
                     case 3:
                         _state.sent();
-                        toast.error(action === 'approve' ? 'Không duyệt được học sinh phát biểu.' : 'Không từ chối được yêu cầu phát biểu.');
+                        roomPlatformToast.error(action === 'approve' ? 'Không duyệt được học sinh phát biểu.' : 'Không từ chối được yêu cầu phát biểu.');
                         return [
                             3,
                             5
@@ -26751,11 +26950,11 @@ function RoomPlatformSpeakQueue(param) {
                             "Bục giảng"
                         ]
                     }),
-                    !isPracticeMode ? /*#__PURE__*/ jsx(Badge, {
+                    /*#__PURE__*/ jsx(Badge, {
                         variant: "outline",
                         className: "border-liveclass-orange/30 text-liveclass-orange",
                         children: raisedHandParticipantIdentities.length
-                    }) : null
+                    })
                 ]
             }),
             hasActiveSpeaker ? /*#__PURE__*/ jsxs("div", {
@@ -26856,7 +27055,7 @@ function RoomPlatformSpeakQueue(param) {
                 }, participantIdentity);
             }) : /*#__PURE__*/ jsx("p", {
                 className: "text-sm text-muted-foreground",
-                children: isPracticeMode ? 'Danh sách chờ phát biểu sẽ được đồng bộ theo trạng thái phòng.' : 'Không có học sinh chờ phát biểu.'
+                children: "Kh\xf4ng c\xf3 học sinh chờ ph\xe1t biểu."
             })
         ]
     });
@@ -26937,6 +27136,24 @@ function _unsupported_iterable_to_array$1(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
 }
+var cameraOverlayClassName = 'absolute left-4 top-4 z-30 aspect-video w-48 max-w-[40%]';
+function RoomPlatformCameraOverlay(param) {
+    var trackRef = param.trackRef, status = param.status, testId = param.testId;
+    return /*#__PURE__*/ jsx("div", {
+        "data-identity": trackRef === null || trackRef === void 0 ? void 0 : trackRef.participant.identity,
+        "data-status": status,
+        "data-testid": testId,
+        className: cameraOverlayClassName,
+        style: {
+            aspectRatio: getTrackAspectRatio(trackRef)
+        },
+        children: trackRef ? /*#__PURE__*/ jsx(RoomPlatformVideoTile, {
+            kind: "overlay",
+            mediaClassName: "h-full w-full overflow-hidden",
+            trackRef: trackRef
+        }) : 'Đang chờ tín hiệu lớp học'
+    });
+}
 function getTrackAspectRatio(trackRef) {
     var _ref, _ref1;
     var _publication_track, _publication_track_mediaStreamTrack_getSettings, _publication_track_mediaStreamTrack, _publication_track1;
@@ -26974,17 +27191,10 @@ function RoomPlatformStage(param) {
     var resolvedOverlayTrack = overlayTrack !== null && overlayTrack !== void 0 ? overlayTrack : isScreenShare ? model.cameraOverlay : undefined;
     var frameClassName = model.primary ? 'relative flex h-full min-h-0 w-full items-center justify-center overflow-hidden rounded-lg text-white ring-1 ring-white/10' : 'relative flex h-full min-h-0 w-full items-center justify-center overflow-hidden rounded-lg bg-slate-950 p-4 text-sm text-slate-300 ring-1 ring-white/10';
     if (layout === 'camera-overlay') {
-        return /*#__PURE__*/ jsx("div", {
-            className: "absolute left-4 top-4 z-10 aspect-video w-48 max-w-[40%] overflow-hidden rounded-lg bg-slate-950 text-white ring-1 ring-white/20",
-            "data-status": status,
-            "data-testid": "room-platform-stage",
-            style: frameStyle,
-            children: cameraOverlayTrack ? /*#__PURE__*/ jsx(RoomPlatformVideoTile, {
-                className: "h-full w-full",
-                kind: "overlay",
-                mediaClassName: "h-full w-full overflow-hidden",
-                trackRef: cameraOverlayTrack
-            }) : 'Đang chờ tín hiệu lớp học'
+        return /*#__PURE__*/ jsx(RoomPlatformCameraOverlay, {
+            status: status,
+            testId: "room-platform-stage",
+            trackRef: cameraOverlayTrack
         });
     }
     return /*#__PURE__*/ jsxs("div", {
@@ -27021,15 +27231,9 @@ function RoomPlatformStage(param) {
                     }) : 'Đang chờ tín hiệu lớp học'
                 })
             }),
-            resolvedOverlayTrack ? /*#__PURE__*/ jsx("div", {
-                "data-identity": resolvedOverlayTrack.participant.identity,
-                "data-testid": "room-platform-camera-overlay",
-                className: "absolute left-4 top-4 z-30 aspect-video w-48 max-w-[40%] ring-1 ring-white/20",
-                children: /*#__PURE__*/ jsx(RoomPlatformVideoTile, {
-                    kind: "overlay",
-                    mediaClassName: "h-full w-full overflow-hidden",
-                    trackRef: resolvedOverlayTrack
-                })
+            resolvedOverlayTrack ? /*#__PURE__*/ jsx(RoomPlatformCameraOverlay, {
+                testId: "room-platform-camera-overlay",
+                trackRef: resolvedOverlayTrack
             }) : null
         ]
     });
@@ -27066,22 +27270,29 @@ function RoomPlatformTopBar(param) {
     });
 }
 
-var isSpeakingRemote = function(param) {
-    var participant = param.participant;
-    return !participant.isLocal && participant.isSpeaking;
-};
-var isRemote = function(param) {
-    var participant = param.participant;
-    return !participant.isLocal;
-};
 var hasAvailableTrackMedia = function(param) {
     var publication = param.publication;
     var state = publication;
     return !state.isMuted && state.isSubscribed !== false && state.track !== null;
 };
+var capabilitiesFromMetadata = function(metadata) {
+    if (!metadata) return [];
+    try {
+        var capabilities = JSON.parse(metadata).capabilities;
+        return Array.isArray(capabilities) && capabilities.every(function(value) {
+            return typeof value === 'string' && isRoomPlatformCapability(value);
+        }) ? capabilities : [];
+    } catch (unused) {
+        return [];
+    }
+};
+var isModeratorCamera = function(param, localCapabilities) {
+    var participant = param.participant;
+    return (participant.isLocal ? localCapabilities : capabilitiesFromMetadata(participant.metadata)).includes(RoomPlatformCapability.ROOM_MODERATE);
+};
 function selectRoomPlatformStage(tracks) {
-    var _ref = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, activeSpeakerParticipantIdentity = _ref.activeSpeakerParticipantIdentity, primaryCameraSelector = _ref.primaryCameraSelector;
-    var _ref1, _cameras_find, _cameras_find1, _ref2, _shares_;
+    var _ref = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, activeSpeakerParticipantIdentity = _ref.activeSpeakerParticipantIdentity, localCapabilities = _ref.localCapabilities;
+    var _ref1, _shares_;
     var availableTracks = tracks.filter(hasAvailableTrackMedia);
     var shares = availableTracks.filter(function(param) {
         var source = param.source;
@@ -27091,13 +27302,10 @@ function selectRoomPlatformStage(tracks) {
         var source = param.source;
         return source === Track.Source.Camera;
     });
-    var genericPrimaryCamera = (_ref1 = (_cameras_find = cameras.find(isSpeakingRemote)) !== null && _cameras_find !== void 0 ? _cameras_find : cameras.find(isRemote)) !== null && _ref1 !== void 0 ? _ref1 : cameras[0];
-    var selectedPrimaryCamera = primaryCameraSelector ? primaryCameraSelector(cameras, activeSpeakerParticipantIdentity) : shares[0] ? (_cameras_find1 = cameras.find(function(param) {
-        var participant = param.participant;
-        var _shares_;
-        return participant.identity === ((_shares_ = shares[0]) === null || _shares_ === void 0 ? void 0 : _shares_.participant.identity);
-    })) !== null && _cameras_find1 !== void 0 ? _cameras_find1 : genericPrimaryCamera : genericPrimaryCamera;
-    var primary = (_ref2 = (_shares_ = shares[0]) !== null && _shares_ !== void 0 ? _shares_ : selectedPrimaryCamera) !== null && _ref2 !== void 0 ? _ref2 : undefined;
+    var selectedPrimaryCamera = cameras.find(function(camera) {
+        return isModeratorCamera(camera, localCapabilities !== null && localCapabilities !== void 0 ? localCapabilities : []);
+    });
+    var primary = (_ref1 = (_shares_ = shares[0]) !== null && _shares_ !== void 0 ? _shares_ : selectedPrimaryCamera) !== null && _ref1 !== void 0 ? _ref1 : undefined;
     var cameraOverlay = shares[0] ? selectedPrimaryCamera !== null && selectedPrimaryCamera !== void 0 ? selectedPrimaryCamera : undefined : undefined;
     var localPreview = cameras.find(function(param) {
         var participant = param.participant;
@@ -27125,8 +27333,9 @@ function selectRoomPlatformStage(tracks) {
     };
 }
 
-function useRoomPlatformStage(primaryCameraSelector) {
-    var controlState = useRoomPlatform().controlState;
+function useRoomPlatformStage() {
+    var _ref;
+    var _useRoomPlatform = useRoomPlatform(), access = _useRoomPlatform.access, controlState = _useRoomPlatform.controlState;
     return selectRoomPlatformStage(useTracks([
         Track.Source.Camera,
         Track.Source.ScreenShare
@@ -27134,7 +27343,7 @@ function useRoomPlatformStage(primaryCameraSelector) {
         onlySubscribed: true
     }), {
         activeSpeakerParticipantIdentity: controlState === null || controlState === void 0 ? void 0 : controlState.activeSpeakerParticipantIdentity,
-        primaryCameraSelector: primaryCameraSelector
+        localCapabilities: (_ref = access === null || access === void 0 ? void 0 : access.capabilities) !== null && _ref !== void 0 ? _ref : []
     });
 }
 
@@ -27411,6 +27620,32 @@ var emptyStageModel = {
     },
     primary: undefined
 };
+function RoomPlatformPracticeModeMediaPolicy(param) {
+    var isPracticeMode = param.isPracticeMode;
+    var _useRoomPlatform = useRoomPlatform(), localMedia = _useRoomPlatform.localMedia, setLocalMediaEnabled = _useRoomPlatform.setLocalMediaEnabled;
+    var previousIsPracticeModeRef = useRef(isPracticeMode);
+    var shouldStopScreenShareRef = useRef(false);
+    useEffect(function() {
+        if (!previousIsPracticeModeRef.current && isPracticeMode) {
+            shouldStopScreenShareRef.current = true;
+        }
+        previousIsPracticeModeRef.current = isPracticeMode;
+        if (!isPracticeMode) {
+            shouldStopScreenShareRef.current = false;
+            return;
+        }
+        if (!shouldStopScreenShareRef.current || !localMedia.screenShare) return;
+        shouldStopScreenShareRef.current = false;
+        void setLocalMediaEnabled('screenShare', false).catch(function() {
+            return undefined;
+        });
+    }, [
+        isPracticeMode,
+        localMedia.screenShare,
+        setLocalMediaEnabled
+    ]);
+    return null;
+}
 function getShareSessionKey(trackSid) {
     return trackSid ? "livekit:".concat(trackSid) : undefined;
 }
@@ -27447,13 +27682,14 @@ function RoomPlatformWhiteboardShareLifecycle(param) {
     return null;
 }
 var RoomPlatformWorkspaceContent = function(param) {
-    var cameraBackground = param.cameraBackground, integrations = param.integrations, extensions = param.extensions, isPracticeMode = param.isPracticeMode, onExit = param.onExit; param.primaryCameraSelector; var showLocalPreview = param.showLocalPreview, sizing = param.sizing, stageModel = param.stageModel;
-    var _ref, _ref1;
-    var _resolvedStageModel_primary, _extensions_sidebarTabs;
+    var cameraBackground = param.cameraBackground, integrations = param.integrations, extensions = param.extensions; param.isPracticeMode; var onExit = param.onExit, sizing = param.sizing, stageModel = param.stageModel;
+    var _resolvedStageModel_cameraOverlay, _ref, _ref1;
+    var _resolvedStageModel_primary, _resolvedStageModel_primary1, _extensions_sidebarTabs;
     var _useRoomPlatform = useRoomPlatform(), access = _useRoomPlatform.access, controlState = _useRoomPlatform.controlState, error = _useRoomPlatform.error, hasCapability = _useRoomPlatform.hasCapability, isActionPending = _useRoomPlatform.isActionPending, localPreviewTrack = _useRoomPlatform.localPreviewTrack, performAction = _useRoomPlatform.performAction, status = _useRoomPlatform.status;
     var _useRoomPlatformPrivateRoom = useRoomPlatformPrivateRoom(), cancelPrivateRoom = _useRoomPlatformPrivateRoom.cancelPrivateRoom, currentPrivateRoomOperation = _useRoomPlatformPrivateRoom.currentPrivateRoomOperation;
     var resolvedStageModel = stageModel !== null && stageModel !== void 0 ? stageModel : emptyStageModel;
-    var shareSessionKey = ((_resolvedStageModel_primary = resolvedStageModel.primary) === null || _resolvedStageModel_primary === void 0 ? void 0 : _resolvedStageModel_primary.source) === Track.Source.ScreenShare ? getShareSessionKey(resolvedStageModel.primary.publication.trackSid) : undefined;
+    var selectedHostCamera = (_resolvedStageModel_cameraOverlay = resolvedStageModel.cameraOverlay) !== null && _resolvedStageModel_cameraOverlay !== void 0 ? _resolvedStageModel_cameraOverlay : ((_resolvedStageModel_primary = resolvedStageModel.primary) === null || _resolvedStageModel_primary === void 0 ? void 0 : _resolvedStageModel_primary.source) === Track.Source.Camera ? resolvedStageModel.primary : undefined;
+    var shareSessionKey = ((_resolvedStageModel_primary1 = resolvedStageModel.primary) === null || _resolvedStageModel_primary1 === void 0 ? void 0 : _resolvedStageModel_primary1.source) === Track.Source.ScreenShare ? getShareSessionKey(resolvedStageModel.primary.publication.trackSid) : undefined;
     var participants = useRoomPresence();
     var currentParticipantPresence = participants.find(function(participant) {
         return participant.isLocal;
@@ -27497,11 +27733,14 @@ var RoomPlatformWorkspaceContent = function(param) {
     };
     var participantTab = extensions === null || extensions === void 0 ? void 0 : extensions.participantTab;
     var monitor = extensions === null || extensions === void 0 ? void 0 : extensions.monitor;
-    var canUseMonitor = Boolean((monitor === null || monitor === void 0 ? void 0 : monitor.roomEligible) && hasCapability('monitor:manage'));
+    var canUseMonitor = hasCapability('monitor:manage');
+    var roomPlatformToast = useRoomPlatformToast();
     var handleMonitorStartError = useCallback(function() {
         setStageView('teaching');
-        toast.error('Không thể bật Monitor. Vui lòng thử lại.');
-    }, []);
+        roomPlatformToast.error('Không thể bật Monitor. Vui lòng thử lại.');
+    }, [
+        roomPlatformToast
+    ]);
     useEffect(function() {
         if (!canUseMonitor) setStageView('teaching');
     }, [
@@ -27602,10 +27841,10 @@ var RoomPlatformWorkspaceContent = function(param) {
     var activeSpeakerSlot = resolvedStageModel.activeSpeaker && !isSelfActiveSpeaker ? /*#__PURE__*/ jsx(RoomPlatformActiveSpeaker, {
         trackRef: resolvedStageModel.activeSpeaker
     }) : undefined;
-    var localMediaSlot = showLocalPreview ? /*#__PURE__*/ jsx(RoomPlatformLocalPreview, {
+    var localMediaSlot = (selectedHostCamera === null || selectedHostCamera === void 0 ? void 0 : selectedHostCamera.participant.isLocal) ? undefined : /*#__PURE__*/ jsx(RoomPlatformLocalPreview, {
         localPreviewTrack: localPreviewTrack,
         trackRef: resolvedStageModel.localPreview
-    }) : undefined;
+    });
     var activeSpeakerMediaSlot = hasActiveSpeaker && !canModerate ? activeSpeakerSlot : undefined;
     var isClearingActiveSpeaker = isActionPending(RoomPlatformAction.SPEAKER_CLEAR);
     var clearActiveSpeaker = function() {
@@ -27648,7 +27887,6 @@ var RoomPlatformWorkspaceContent = function(param) {
                 canClearActiveSpeaker: true,
                 canRejectSpeak: true,
                 isClearingActiveSpeaker: isClearingActiveSpeaker,
-                isPracticeMode: isPracticeMode,
                 onApproveSpeakRequest: approveSpeakRequest,
                 onClearActiveSpeaker: clearActiveSpeaker,
                 onRejectSpeakRequest: rejectSpeakRequest,
@@ -27828,7 +28066,7 @@ var RoomPlatformWorkspaceContent = function(param) {
     });
 };
 var RoomPlatformConnectedWorkspace = function(props) {
-    var stageModel = useRoomPlatformStage(props.primaryCameraSelector);
+    var stageModel = useRoomPlatformStage();
     return /*#__PURE__*/ jsx(RoomPlatformWorkspaceContent, _object_spread_props(_object_spread({}, props), {
         stageModel: stageModel
     }));
@@ -27858,6 +28096,7 @@ function RoomPlatformPrivateRoomRuntime(param) {
         privateRoomId: privateRoomState.privateRoom.id
     }));
     var pending = acceptPending || declinePending || privateRoomState.isAcceptingPrivateRoom;
+    var roomPlatformToast = useRoomPlatformToast();
     var whiteboard = integrations === null || integrations === void 0 ? void 0 : integrations.whiteboard;
     var whiteboardAuth = (whiteboard === null || whiteboard === void 0 ? void 0 : whiteboard.joinState.available) ? whiteboard.joinState.auth : undefined;
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -27890,7 +28129,7 @@ function RoomPlatformPrivateRoomRuntime(param) {
                                     disabled: pending,
                                     onClick: function() {
                                         return void privateRoomState.declinePrivateRoom().catch(function() {
-                                            toast.error('Không thể từ chối phòng riêng. Vui lòng thử lại.');
+                                            roomPlatformToast.error('Không thể từ chối phòng riêng. Vui lòng thử lại.');
                                         });
                                     },
                                     children: [
@@ -27929,7 +28168,7 @@ function RoomPlatformPrivateRoomRuntime(param) {
                                                         ];
                                                     case 3:
                                                         _state.sent();
-                                                        toast.error('Không thể vào phòng riêng. Vui lòng thử lại.');
+                                                        roomPlatformToast.error('Không thể vào phòng riêng. Vui lòng thử lại.');
                                                         return [
                                                             3,
                                                             5
@@ -27999,34 +28238,42 @@ function RoomPlatformPrivateRoomRuntime(param) {
         ]
     });
 }
-function RoomPlatformRoom(_0) {
-    var children = _0.children, extensions = _0.extensions, integrations = _0.integrations, isPracticeMode = _0.isPracticeMode, onExit = _0.onExit, primaryCameraSelector = _0.primaryCameraSelector, _0_showLocalPreview = _0.showLocalPreview, showLocalPreview = _0_showLocalPreview === void 0 ? true : _0_showLocalPreview, _0_sizing = _0.sizing, sizing = _0_sizing === void 0 ? 'viewport' : _0_sizing, providerProps = _object_without_properties(_0, [
+function RoomPlatformRuntime(_0) {
+    var children = _0.children, extensions = _0.extensions, integrations = _0.integrations, isPracticeMode = _0.isPracticeMode, onExit = _0.onExit, _0_sizing = _0.sizing, sizing = _0_sizing === void 0 ? 'viewport' : _0_sizing, providerProps = _object_without_properties(_0, [
         "children",
         "extensions",
         "integrations",
         "isPracticeMode",
         "onExit",
-        "primaryCameraSelector",
-        "showLocalPreview",
         "sizing"
     ]);
-    return /*#__PURE__*/ jsx(RoomPlatformProvider, _object_spread_props(_object_spread({}, providerProps), {
-        children: /*#__PURE__*/ jsx(RoomPlatformMediaRuntime, {
-            children: /*#__PURE__*/ jsx(RoomPlatformPrivateRoomRuntime, {
-                integrations: integrations,
-                children: children !== null && children !== void 0 ? children : /*#__PURE__*/ jsx(RoomPlatformWorkspace, {
-                    extensions: extensions,
+    return /*#__PURE__*/ jsxs(RoomPlatformProvider, _object_spread_props(_object_spread({}, providerProps), {
+        children: [
+            /*#__PURE__*/ jsx(RoomPlatformPracticeModeMediaPolicy, {
+                isPracticeMode: isPracticeMode
+            }),
+            /*#__PURE__*/ jsx(RoomPlatformMediaRuntime, {
+                children: /*#__PURE__*/ jsx(RoomPlatformPrivateRoomRuntime, {
                     integrations: integrations,
-                    isPracticeMode: isPracticeMode,
-                    onExit: onExit,
-                    primaryCameraSelector: primaryCameraSelector,
-                    showLocalPreview: showLocalPreview,
-                    sizing: sizing
+                    children: children !== null && children !== void 0 ? children : /*#__PURE__*/ jsx(RoomPlatformWorkspace, {
+                        extensions: extensions,
+                        integrations: integrations,
+                        isPracticeMode: isPracticeMode,
+                        onExit: onExit,
+                        sizing: sizing
+                    })
                 })
             })
-        })
+        ]
     }));
 }
+function RoomPlatformRoom(props) {
+    return /*#__PURE__*/ jsx(RoomPlatformShadowHost, {
+        children: /*#__PURE__*/ jsx(RoomPlatformToastProvider, {
+            children: /*#__PURE__*/ jsx(RoomPlatformRuntime, _object_spread({}, props))
+        })
+    });
+}
 
 function RoomPlatformVideoTracks(param) {
     var _param_status = param.status, status = _param_status === void 0 ? 'connected' : _param_status;