From: <Saved by Blink>
Snapshot-Content-Location: http://127.0.0.1:44699/index.html
Subject: Webex Bot Meeting Recorder
Date: Wed, 22 Apr 2026 08:13:11 +0000
MIME-Version: 1.0
Content-Type: multipart/related;
	type="text/html";
	boundary="----MultipartBoundary--LmYgKep1ddo9xa3hKkU3wv5oK5fz366KvzuR216trz----"


------MultipartBoundary--LmYgKep1ddo9xa3hKkU3wv5oK5fz366KvzuR216trz----
Content-Type: text/html
Content-ID: <frame-3D7109D3EECA068887C45DF77B160E2D@mhtml.blink>
Content-Transfer-Encoding: quoted-printable
Content-Location: http://127.0.0.1:44699/index.html

<!DOCTYPE html><html lang=3D"en"><head><meta http-equiv=3D"Content-Type" co=
ntent=3D"text/html; charset=3DUTF-8"><link rel=3D"stylesheet" type=3D"text/=
css" href=3D"cid:css-ffedd641-ef37-4444-9c56-8db628a6883f@mhtml.blink" />
   =20
    <meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=
=3D1.0">
    <title>Webex Bot Meeting Recorder</title>
   =20
</head>
<body>
    <!-- Login Screen -->
    <div class=3D"login-screen" id=3D"login-screen" style=3D"display: none;=
">
        <div class=3D"login-panel">
            <h1 class=3D"webex-logo">Webex Bot</h1>
            <p>Join and record meeting with multi-stream audio capture</p>
           =20
            <div class=3D"form-group">
                <label>Access Token</label>
                <input type=3D"password" id=3D"access-token" placeholder=3D=
"Your Webex bot access token">
            </div>
           =20
            <div class=3D"form-group">
                <label>Meeting URL or Number</label>
                <input type=3D"text" id=3D"meeting-destination" placeholder=
=3D"https://meet.webex.com/... or meeting number">
            </div>
           =20
            <div class=3D"form-group">
                <label>Meeting Password (Optional)</label>
                <input type=3D"password" id=3D"meeting-password" placeholde=
r=3D"Meeting password if required">
            </div>

            <div class=3D"form-group">
                <label>WebSocket Server URL (Optional)</label>
                <input type=3D"text" id=3D"websocket-url" placeholder=3D"ws=
://localhost:8080">
            </div>
           =20
            <button class=3D"btn btn-primary" id=3D"btn-join" disabled=3D""=
>Joining...</button>
           =20
            <div class=3D"status-msg success show" id=3D"login-status">Join=
ed meeting successfully!</div>
        </div>
    </div>

    <!-- Meeting Screen -->
    <div class=3D"meeting-screen active" id=3D"meeting-screen">

        <!-- Main Content -->
        <div class=3D"meeting-content">
            <!-- Video Container -->
            <div class=3D"video-container">
                <!-- Screen Share View -->
                <div class=3D"screenshare-view" id=3D"screenshare-view">
                    <video id=3D"screenshare-video" autoplay=3D"" playsinli=
ne=3D""></video>
                </div>

                <!-- Participants Grid -->
                <div class=3D"participants-grid" id=3D"participants-grid" d=
ata-count=3D"1"><div class=3D"participant-tile" id=3D"participant-a8beee95-=
471c-3a03-a072-939c8f9630a9" data-no-video=3D"true" data-member-id=3D"a8bee=
e95-471c-3a03-a072-939c8f9630a9"><video autoplay=3D"" playsinline=3D""></vi=
deo><div class=3D"no-video-placeholder"><div class=3D"avatar">M</div></div>=
<div class=3D"participant-info">
        <svg class=3D"mic-icon mic-active" width=3D"16" height=3D"16" viewB=
ox=3D"0 0 24 24" fill=3D"currentColor">
            <path d=3D"M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 =
9 5v6c0 1.66 1.34 3 3 3z"></path>
            <path d=3D"M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6=
.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"></path>
        </svg>
        <span class=3D"participant-name">Mahdar.ai</span>
    </div></div></div>
            </div>
        </div>

        <!-- Controls -->
        <!-- <div class=3D"meeting-controls">
            <button class=3D"control-btn" id=3D"btn-mute" title=3D"Mute">
                <svg width=3D"24" height=3D"24" viewBox=3D"0 0 24 24" fill=
=3D"currentColor">
                    <path d=3D"M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3=
S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
                    <path d=3D"M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.5=
3 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
                </svg>
            </button>
           =20
            <button class=3D"control-btn" id=3D"btn-video" title=3D"Stop Vi=
deo">
                <svg width=3D"24" height=3D"24" viewBox=3D"0 0 24 24" fill=
=3D"currentColor">
                    <path d=3D"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 =
1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
                </svg>
            </button>
           =20
            <button class=3D"control-btn danger" id=3D"btn-leave" title=3D"=
Leave Meeting">
                <svg width=3D"24" height=3D"24" viewBox=3D"0 0 24 24" fill=
=3D"currentColor">
                    <path d=3D"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.=
48 10-10S17.52 2 12 2zm5 11H8v-2h9v2z"/>
                </svg>
            </button>
        </div> -->
    </div>

    <!-- Debug Panel -->
    <div class=3D"debug-panel" id=3D"debug-panel">
        <h3>Debug Log</h3>
        <div class=3D"debug-log" id=3D"debug-log"><div class=3D"debug-entry=
">[8:13:11 AM] [Audio] Stopped stream recording | {
  "streamId": "cc46500d-fd1e-42f7-aaba-d42e113ec17c"
}</div><div class=3D"debug-entry">[8:13:11 AM] [Audio] Stopped stream recor=
ding | {
  "streamId": "ad0e5125-ec37-4568-81f9-ad2cb092b9fc"
}</div><div class=3D"debug-entry">[8:13:11 AM] [Audio] Stopped stream recor=
ding | {
  "streamId": "78547dc2-8de9-476b-91e2-fbb89128af50"
}</div><div class=3D"debug-entry">[8:13:11 AM] =E2=9A=A0=EF=B8=8F Media sen=
ding disabled</div><div class=3D"debug-entry">[8:12:11 AM] Added participan=
t: Mahdar.ai | {
  "participantId": "a8beee95-471c-3a03-a072-939c8f9630a9"
}</div><div class=3D"debug-entry">[8:12:11 AM] Roster grid refresh | {
  "count": 1
}</div><div class=3D"debug-entry">[8:12:11 AM] =F0=9F=93=A4 Sent UsersUpdat=
e | {
  "new": 0,
  "removed": 0,
  "updated": 1
}</div><div class=3D"debug-entry">[8:12:11 AM] Members updated | {
  "fullCount": 2,
  "added": 0,
  "updated": 2,
  "removed": 0
}</div><div class=3D"debug-entry">[8:12:10 AM] Video sources changed | {
  "live": 0
}</div><div class=3D"debug-entry">[8:12:09 AM] Added participant: oussama |=
 {
  "participantId": "0ce25287-c86e-304d-8adf-371df1641425"
}</div><div class=3D"debug-entry">[8:12:09 AM] Added participant: Mahdar.ai=
 | {
  "participantId": "a8beee95-471c-3a03-a072-939c8f9630a9"
}</div><div class=3D"debug-entry">[8:12:09 AM] Roster grid refresh | {
  "count": 2
}</div><div class=3D"debug-entry">[8:12:09 AM] Members updated | {
  "fullCount": 2,
  "added": 0,
  "updated": 2,
  "removed": 0
}</div><div class=3D"debug-entry">[8:11:56 AM] Added participant: oussama |=
 {
  "participantId": "0ce25287-c86e-304d-8adf-371df1641425"
}</div><div class=3D"debug-entry">[8:11:56 AM] Added participant: Mahdar.ai=
 | {
  "participantId": "a8beee95-471c-3a03-a072-939c8f9630a9"
}</div><div class=3D"debug-entry">[8:11:56 AM] Roster grid refresh | {
  "count": 2
}</div><div class=3D"debug-entry">[8:11:56 AM] Members updated | {
  "fullCount": 2,
  "added": 0,
  "updated": 1,
  "removed": 0
}</div><div class=3D"debug-entry">[8:11:55 AM] Audio sources changed | {
  "live": 3
}</div><div class=3D"debug-entry">[8:11:55 AM] Video sources changed | {
  "live": 0
}</div><div class=3D"debug-entry success">[8:11:55 AM] [SUCCESS] Joined mee=
ting successfully!</div><div class=3D"debug-entry success">[8:11:55 AM] =E2=
=9C=85 Media added successfully | {
  "disableVideo": false
}</div><div class=3D"debug-entry">[8:11:53 AM] =E2=9C=85 Media sending enab=
led</div><div class=3D"debug-entry">[8:11:53 AM] Roster grid: all in-meetin=
g participants | {
  "count": 2
}</div><div class=3D"debug-entry">[8:11:53 AM] Added participant: oussama |=
 {
  "participantId": "0ce25287-c86e-304d-8adf-371df1641425"
}</div><div class=3D"debug-entry">[8:11:53 AM] Added participant: Mahdar.ai=
 | {
  "participantId": "a8beee95-471c-3a03-a072-939c8f9630a9"
}</div><div class=3D"debug-entry">[8:11:53 AM] Roster grid refresh | {
  "count": 2
}</div><div class=3D"debug-entry">[8:11:53 AM] Video layout changed | {
  "layoutId": "AllEqual",
  "activeSpeakers": 1,
  "memberPanes": 0,
  "hasScreenShare": false
}</div><div class=3D"debug-entry">[8:11:53 AM] =E2=9C=85 Audio recording in=
itialized for all streams</div><div class=3D"debug-entry">[8:11:53 AM] [Aud=
io] Stream recording started for slot 2</div><div class=3D"debug-entry">[8:=
11:53 AM] [Audio] Starting continuous streaming for slot 2, CSI: undefined<=
/div><div class=3D"debug-entry">[8:11:53 AM] =F0=9F=94=A7 Setting up audio =
slot 2 | {
  "csi": "undefined",
  "memberId": "N/A",
  "sourceState": "no source",
  "hasStream": true
}</div><div class=3D"debug-entry">[8:11:53 AM] [Audio] Stream recording sta=
rted for slot 1</div><div class=3D"debug-entry">[8:11:53 AM] [Audio] Starti=
ng continuous streaming for slot 1, CSI: undefined</div><div class=3D"debug=
-entry">[8:11:53 AM] =F0=9F=94=A7 Setting up audio slot 1 | {
  "csi": "undefined",
  "memberId": "N/A",
  "sourceState": "no source",
  "hasStream": true
}</div><div class=3D"debug-entry">[8:11:53 AM] [Audio] Stream recording sta=
rted for slot 0</div><div class=3D"debug-entry">[8:11:53 AM] [Audio] Starti=
ng continuous streaming for slot 0, CSI: undefined</div><div class=3D"debug=
-entry">[8:11:53 AM] =F0=9F=94=A7 Setting up audio slot 0 | {
  "csi": "undefined",
  "memberId": "N/A",
  "sourceState": "no source",
  "hasStream": true
}</div><div class=3D"debug-entry">[8:11:53 AM] =F0=9F=8E=A7 Remote audio cr=
eated | {
  "count": 3
}</div><div class=3D"debug-entry">[8:11:53 AM] Added participant: oussama |=
 {
  "participantId": "0ce25287-c86e-304d-8adf-371df1641425"
}</div><div class=3D"debug-entry">[8:11:53 AM] Added participant: Mahdar.ai=
 | {
  "participantId": "a8beee95-471c-3a03-a072-939c8f9630a9"
}</div><div class=3D"debug-entry">[8:11:53 AM] Roster grid refresh | {
  "count": 2
}</div><div class=3D"debug-entry">[8:11:53 AM] =F0=9F=93=A4 Sent UsersUpdat=
e | {
  "new": 0,
  "removed": 0,
  "updated": 1
}</div><div class=3D"debug-entry">[8:11:53 AM] Members updated | {
  "fullCount": 2,
  "added": 0,
  "updated": 1,
  "removed": 0
}</div><div class=3D"debug-entry">[8:11:53 AM] =F0=9F=8E=AF Setting up mult=
istream listeners</div><div class=3D"debug-entry success">[8:11:53 AM] =F0=
=9F=93=A4 Sent MeetingStatusChange: joined</div><div class=3D"debug-entry">=
[8:11:53 AM] [INFO] Admitted! Adding media...</div><div class=3D"debug-entr=
y">[8:11:53 AM] =E2=9C=85 Admitted from lobby, adding media now</div><div c=
lass=3D"debug-entry">[8:11:50 AM] Added participant: oussama | {
  "participantId": "0ce25287-c86e-304d-8adf-371df1641425"
}</div><div class=3D"debug-entry">[8:11:50 AM] Roster grid refresh | {
  "count": 1
}</div><div class=3D"debug-entry">[8:11:50 AM] =F0=9F=93=A4 Sent UsersUpdat=
e | {
  "new": 2,
  "removed": 0,
  "updated": 0
}</div><div class=3D"debug-entry">[8:11:50 AM] Members updated | {
  "fullCount": 2,
  "added": 2,
  "updated": 0,
  "removed": 0
}</div><div class=3D"debug-entry">[8:11:50 AM] [INFO] =E2=8F=B3 Waiting in =
lobby - host will admit you...</div><div class=3D"debug-entry">[8:11:50 AM]=
 =F0=9F=9A=AA Bot waiting in lobby for admission | {
  "payload": {
    "deviceUrl": "https://wdm-r.wbx2.com/wdm/api/v1/devices/fbf25fd0-5e2e-4=
5b9-b3d8-56d4df4858fc",
    "alertHint": {
      "action": "NONE"
    },
    "alertType": {
      "action": "NONE"
    },
    "callbackInfo": {
      "callbackAddress": "pr26504161834@meet1753323438208-2958.webex.com",
      "callbackType": "SIPURI"
    },
    "lookUpInfo": {
      "lookupLink": "https://locus-t.wbx2.com/locus/api/v1/loci/meetingInfo=
/e3559ca9-3c49-3c3d-9a46-518a2d085d53?type=3DLOCUS_ID&amp;useUriLookup=3Dfa=
lse",
      "type": "MEETING"
    },
    "isCreator": false,
    "identity": "8b827069-ecb4-446b-b4a6-84856c72ee17",
    "url": "https://locus-t.wbx2.com/locus/api/v1/loci/e3559ca9-3c49-3c3d-9=
a46-518a2d085d53/participant/a8beee95-471c-3a03-a072-939c8f9630a9",
    "state": "IDLE",
    "type": "USER",
    "isSiteInternal": false,
    "annotatorAssignmentNotAllowed": true,
    "person": {
      "id": "8b827069-ecb4-446b-b4a6-84856c72ee17",
      "name": "Mahdar.ai",
      "isExternal": false,
      "orgId": "678c37cb-4403-40e9-9380-03932010235d",
      "incomingCallProtocols": []
    },
    "devices": [
      {
        "url": "https://wdm-r.wbx2.com/wdm/api/v1/devices/fbf25fd0-5e2e-45b=
9-b3d8-56d4df4858fc",
        "deviceType": "WEB",
        "state": "IDLE",
        "intents": [
          {
            "id": "662a9850-0f99-442d-87bb-93e9498b2dc8",
            "type": "WAIT",
            "associatedWith": "https://locus-t.wbx2.com/locus/api/v1/loci/e=
3559ca9-3c49-3c3d-9a46-518a2d085d53/participant/a8beee95-471c-3a03-a072-939=
c8f9630a9",
            "reason": "SECURED_MEETING_LOBBY"
          }
        ],
        "keepAliveUrl": "https://locus-t.wbx2.com/locus/api/v1/loci/e3559ca=
9-3c49-3c3d-9a46-518a2d085d53/keepAlive?device_url=3DaHR0cHM6Ly93ZG0tci53Yn=
gyLmNvbS93ZG0vYXBpL3YxL2RldmljZXMvZmJmMjVmZDAtNWUyZS00NWI5LWIzZDgtNTZkNGRmN=
Dg1OGZj&amp;timestamp=3De9e6e733-3e22-11f1-a3d1-5e6002d90b3a&amp;timeout=3D=
300",
        "keepAliveSecs": 300,
        "callLegId": "367ffa6a-9407-464c-a56b-7fae2bd90cc3",
        "correlationId": "a032b44c-672c-4c9b-b700-6f10b64f8097",
        "isVideoCallback": false,
        "csis": [],
        "serverTranscoded": false,
        "serverComposed": false,
        "replaces": [],
        "intent": {
          "id": "662a9850-0f99-442d-87bb-93e9498b2dc8",
          "type": "WAIT",
          "associatedWith": "https://locus-t.wbx2.com/locus/api/v1/loci/e35=
59ca9-3c49-3c3d-9a46-518a2d085d53/participant/a8beee95-471c-3a03-a072-939c8=
f9630a9",
          "reason": "SECURED_MEETING_LOBBY"
        }
      }
    ],
    "status": {
      "audioStatus": "UNKNOWN",
      "videoStatus": "UNKNOWN",
      "csis": []
    },
    "suggestedMedia": [
      {
        "mediaType": "audio",
        "mediaContent": "main",
        "direction": "sendrecv"
      },
      {
        "mediaType": "video",
        "mediaContent": "main",
        "direction": "sendrecv"
      },
      {
        "mediaType": "video",
        "mediaContent": "slides",
        "direction": "sendrecv"
      }
    ],
    "controls": {
      "audio": {
        "muted": false,
        "requestedToUnmute": false,
        "disallowUnmute": false,
        "meta": {}
      },
      "video": {
        "muted": false,
        "meta": {}
      }
    },
    "presenterAssignmentNotAllowed": true,
    "doesNotSupportBreakouts": true,
    "doesNotSupportSiInterpreter": true,
    "doesNotSupportSignInterpreter": true,
    "identityTrustLevel": "EXTERNAL",
    "doesNotSupportSingleUserAutoEndMeeting": true,
    "captionerRoleNotAllowed": true,
    "enableDTMF": true,
    "id": "a8beee95-471c-3a03-a072-939c8f9630a9",
    "guest": false,
    "resourceGuest": false,
    "moderator": false,
    "panelist": false,
    "moveToLobbyNotAllowed": true,
    "mediaBaseUrl": "https://locus-t.wbx2.com/locus/api/v1/loci/e3559ca9-3c=
49-3c3d-9a46-518a2d085d53/participant/a8beee95-471c-3a03-a072-939c8f9630a9/=
media"
  }
}</div><div class=3D"debug-entry">[8:11:50 AM] Meeting state changed | {
  "botAdmitted": false
}</div><div class=3D"debug-entry">[8:11:47 AM] Joining meeting without medi=
a (will add after admission if needed)</div><div class=3D"debug-entry">[8:1=
1:47 AM] [INFO] Joining meeting...</div><div class=3D"debug-entry">[8:11:47=
 AM] Meeting created | {
  "id": "a032b44c-672c-4c9b-b700-6f10b64f8097"
}</div><div class=3D"debug-entry">[8:11:44 AM] =E2=9C=85 Media sending enab=
led</div><div class=3D"debug-entry">[8:11:44 AM] =E2=9C=85 WebSocket CONNEC=
TED and READY | {
  "readyState": 1,
  "url": "ws://localhost:8766"
}</div><div class=3D"debug-entry">[8:11:44 AM] Creating meeting | {
  "destination": "https://meet1753323438208-2958.webex.com/meet/pr265041618=
34"
}</div><div class=3D"debug-entry">[8:11:44 AM] [INFO] Creating meeting...</=
div><div class=3D"debug-entry">[8:11:44 AM] =F0=9F=94=8C Connecting to WebS=
ocket... | {
  "url": "ws://localhost:8766"
}</div><div class=3D"debug-entry success">[8:11:44 AM] [SUCCESS] SDK initia=
lized successfully!</div><div class=3D"debug-entry">[8:11:44 AM] Registered=
 with Webex meetings service</div><div class=3D"debug-entry">[8:11:39 AM] W=
ebex SDK ready</div><div class=3D"debug-entry">[8:11:39 AM] Initializing We=
bex SDK</div><div class=3D"debug-entry">[8:11:39 AM] [INFO] Initializing We=
bex SDK...</div><div class=3D"debug-entry">[8:11:39 AM] =E2=9C=85 Media sen=
ding enabled</div><div class=3D"debug-entry">[8:11:39 AM] =E2=9C=85 WebSock=
et CONNECTED and READY | {
  "readyState": 1,
  "url": "ws://localhost:8766"
}</div><div class=3D"debug-entry">[8:11:39 AM] =F0=9F=94=8C Connecting to W=
ebSocket... | {
  "url": "ws://localhost:8766"
}</div><div class=3D"debug-entry">[8:11:39 AM] =F0=9F=A4=96 Auto-join mode =
detected - initializing from Python adapter | {
  "accessToken": "NjRkYmM5NTctNjcwMy00NTI1LWJhNmItNTc5YTM3YTU1NDdhNWM0YTE1O=
TYtYWQ2_P0A1_678c37cb-4403-40e9-9380-03932010235d",
  "meetingDestination": "https://meet1753323438208-2958.webex.com/meet/pr26=
504161834",
  "meetingPassword": "",
  "websocketUrl": "ws://localhost:8766",
  "websocketPort": 8766,
  "enableTranscription": true,
  "botName": "mahdar.ai",
  "disableIncomingVideo": false
}</div><div class=3D"debug-entry">[8:11:39 AM] Multistream support enabled =
for individual participant streams</div><div class=3D"debug-entry">[8:11:39=
 AM] Application loaded and ready</div></div>
    </div>
    <audio id=3D"multistream-remote-audio-0" class=3D"multistream-remote-au=
dio" autoplay=3D""></audio>
    <audio id=3D"multistream-remote-audio-1" class=3D"multistream-remote-au=
dio" autoplay=3D""></audio>
    <audio id=3D"multistream-remote-audio-2" class=3D"multistream-remote-au=
dio" autoplay=3D""></audio>


   =20
   =20

</body></html>
------MultipartBoundary--LmYgKep1ddo9xa3hKkU3wv5oK5fz366KvzuR216trz----
Content-Type: text/css
Content-Transfer-Encoding: quoted-printable
Content-Location: cid:css-ffedd641-ef37-4444-9c56-8db628a6883f@mhtml.blink

@charset "utf-8";

* { margin: 0px; padding: 0px; box-sizing: border-box; }

body { font-family: CiscoSansTT, -apple-system, BlinkMacSystemFont, "Segoe =
UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: rgb(24, 24,=
 24); color: rgb(255, 255, 255); overflow: hidden; }

.login-screen { display: flex; align-items: center; justify-content: center=
; min-height: 100vh; background: linear-gradient(135deg, rgb(4, 159, 217) 0=
%, rgb(11, 122, 184) 100%); padding: 20px; }

.login-panel { background: white; padding: 48px; border-radius: 16px; box-s=
hadow: rgba(0, 0, 0, 0.3) 0px 24px 64px; max-width: 480px; width: 100%; }

.login-panel h1 { color: rgb(24, 24, 24); margin-bottom: 8px; font-size: 32=
px; font-weight: 600; }

.login-panel p { color: rgb(90, 90, 90); margin-bottom: 32px; font-size: 15=
px; }

.form-group { margin-bottom: 24px; }

.form-group label { display: block; color: rgb(24, 24, 24); font-weight: 60=
0; margin-bottom: 10px; font-size: 14px; letter-spacing: 0.2px; }

.form-group input { width: 100%; padding: 14px 16px; border: 1px solid rgb(=
212, 212, 212); border-radius: 8px; font-size: 15px; transition: 0.2s; back=
ground: rgb(247, 247, 247); }

.form-group input:focus { outline: none; border-color: rgb(4, 159, 217); ba=
ckground: white; box-shadow: rgba(4, 159, 217, 0.1) 0px 0px 0px 3px; }

.btn { padding: 16px 28px; border: none; border-radius: 28px; font-size: 16=
px; font-weight: 600; cursor: pointer; transition: 0.2s; width: 100%; lette=
r-spacing: 0.3px; }

.btn-primary { background: rgb(4, 159, 217); color: white; }

.btn-primary:hover:not(:disabled) { background: rgb(11, 122, 184); transfor=
m: translateY(-1px); box-shadow: rgba(4, 159, 217, 0.3) 0px 8px 16px; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.status-msg { padding: 14px 18px; border-radius: 8px; margin-top: 20px; fon=
t-size: 14px; display: none; font-weight: 500; }

.status-msg.show { display: block; }

.status-info { background: rgb(232, 245, 254); color: rgb(11, 122, 184); bo=
rder-left: 4px solid rgb(4, 159, 217); }

.status-success { background: rgb(230, 247, 237); color: rgb(0, 136, 74); b=
order-left: 4px solid rgb(0, 168, 84); }

.status-error { background: rgb(253, 236, 234); color: rgb(196, 23, 12); bo=
rder-left: 4px solid rgb(224, 58, 45); }

.meeting-screen { display: none; height: 100vh; flex-direction: column; }

.meeting-screen.active { display: flex; }

.meeting-header { background: rgb(31, 31, 31); padding: 16px 24px; display:=
 flex; justify-content: space-between; align-items: center; border-bottom: =
1px solid rgb(42, 42, 42); }

.meeting-info { display: flex; align-items: center; gap: 16px; }

.meeting-title { font-size: 17px; font-weight: 600; letter-spacing: 0.2px; =
}

.participant-count { background: rgba(255, 255, 255, 0.08); padding: 6px 14=
px; border-radius: 14px; font-size: 13px; color: rgb(224, 224, 224); font-w=
eight: 500; }

.recording-indicator { display: none; align-items: center; gap: 10px; backg=
round: rgb(224, 58, 45); padding: 8px 16px; border-radius: 20px; font-size:=
 13px; font-weight: 600; letter-spacing: 0.3px; }

.recording-indicator.active { display: flex; }

.recording-dot { width: 9px; height: 9px; background: white; border-radius:=
 50%; animation: 1.5s ease 0s infinite normal none running pulse; }

@keyframes pulse {=20
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.meeting-content { flex: 1 1 0%; display: flex; position: relative; overflo=
w: hidden; background: rgb(13, 13, 13); }

.video-container { flex: 1 1 0%; display: flex; flex-direction: column; pos=
ition: relative; padding: 10px; }

.screenshare-view { display: none; width: 100%; height: calc(100% - 120px);=
 background: rgb(0, 0, 0); border-radius: 8px; overflow: hidden; margin-bot=
tom: 10px; }

.screenshare-view.active { display: block; }

.screenshare-view video { width: 100%; height: 100%; object-fit: contain; }

.participants-grid { display: grid; gap: 8px; height: 100%; padding: 5px; }

.screenshare-view.active ~ .participants-grid { height: 110px; grid-auto-fl=
ow: column; grid-auto-columns: 180px; overflow: auto hidden; }

.participants-grid.screenshare-strip { height: 110px; grid-auto-flow: colum=
n; grid-auto-columns: 160px; overflow: auto hidden; padding: 8px; gap: 8px;=
 align-items: stretch; }

.participants-grid.screenshare-strip .participant-tile { min-width: 160px; =
min-height: 90px; flex-shrink: 0; }

.participants-grid.screenshare-strip .avatar { width: 40px; height: 40px; f=
ont-size: 18px; }

.participants-grid.screenshare-strip .participant-info { padding: 4px 8px; =
font-size: 12px; }

.participants-grid.screenshare-strip .participant-name { overflow: hidden; =
text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }

.participants-grid.screenshare-strip .participant-tile.speaking { border-co=
lor: rgb(76, 175, 80); box-shadow: rgba(76, 175, 80, 0.5) 0px 0px 0px 2px; =
}

.participants-grid[data-count=3D"1"] { grid-template-columns: 1fr; }

.participants-grid[data-count=3D"2"] { grid-template-columns: repeat(2, 1fr=
); }

.participants-grid[data-count=3D"3"], .participants-grid[data-count=3D"4"] =
{ grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr)=
; }

.participants-grid[data-count=3D"5"], .participants-grid[data-count=3D"6"] =
{ grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr)=
; }

.participants-grid[data-count=3D"7"], .participants-grid[data-count=3D"8"],=
 .participants-grid[data-count=3D"9"] { grid-template-columns: repeat(3, 1f=
r); grid-template-rows: repeat(3, 1fr); }

.participant-tile { position: relative; background: rgb(31, 31, 31); border=
-radius: 12px; overflow: hidden; border: 3px solid transparent; transition:=
 0.2s; }

.participant-tile.speaking { border-color: rgb(0, 168, 84); box-shadow: rgb=
a(0, 168, 84, 0.25) 0px 0px 0px 3px; }

.participant-tile video { width: 100%; height: 100%; object-fit: cover; bac=
kground: rgb(0, 0, 0); }

.participant-info { position: absolute; bottom: 12px; left: 12px; backgroun=
d: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); padding: 8px 14px; bor=
der-radius: 8px; display: flex; align-items: center; gap: 8px; font-size: 1=
4px; font-weight: 500; max-width: calc(100% - 24px); }

.participant-name { overflow: hidden; text-overflow: ellipsis; white-space:=
 nowrap; }

.mic-icon { width: 18px; height: 18px; flex-shrink: 0; }

.mic-muted { color: rgb(224, 58, 45); }

.mic-active { color: rgb(0, 168, 84); }

.no-video-placeholder { display: none; align-items: center; justify-content=
: center; width: 100%; height: 100%; background: linear-gradient(135deg, rg=
b(42, 42, 42) 0%, rgb(31, 31, 31) 100%); flex-direction: column; gap: 12px;=
 }

.participant-tile[data-no-video=3D"true"] .no-video-placeholder { display: =
flex; }

.participant-tile[data-no-video=3D"true"] video { display: none; }

.avatar { width: 96px; height: 96px; border-radius: 50%; background: linear=
-gradient(135deg, rgb(4, 159, 217) 0%, rgb(11, 122, 184) 100%); display: fl=
ex; align-items: center; justify-content: center; font-size: 40px; font-wei=
ght: 600; color: white; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px; }

.meeting-controls { background: rgb(31, 31, 31); padding: 24px; display: fl=
ex; justify-content: center; align-items: center; gap: 16px; border-top: 1p=
x solid rgb(42, 42, 42); }

.control-btn { width: 64px; height: 64px; border-radius: 50%; border: none;=
 background: rgba(255, 255, 255, 0.08); color: white; cursor: pointer; disp=
lay: flex; align-items: center; justify-content: center; transition: 0.2s; =
position: relative; }

.control-btn:hover { background: rgba(255, 255, 255, 0.12); transform: scal=
e(1.08); }

.control-btn.active { background: rgb(0, 168, 84); }

.control-btn.active:hover { background: rgb(0, 146, 74); }

.control-btn.danger { background: rgb(224, 58, 45); width: 72px; height: 72=
px; }

.control-btn.danger:hover { background: rgb(196, 23, 12); transform: scale(=
1.08); }

.debug-panel { position: fixed; bottom: 120px; right: 24px; width: 420px; m=
ax-height: 320px; background: rgba(0, 0, 0, 0.95); border: 1px solid rgb(42=
, 42, 42); border-radius: 12px; padding: 18px; font-size: 11px; font-family=
: "SF Mono", Monaco, "Courier New", monospace; overflow-y: auto; display: n=
one; z-index: 1000; backdrop-filter: blur(20px); box-shadow: rgba(0, 0, 0, =
0.5) 0px 8px 32px; }

.debug-panel.show { display: block; }

.debug-panel h3 { margin-bottom: 12px; font-size: 14px; color: rgb(0, 168, =
84); font-weight: 600; letter-spacing: 0.5px; }

.debug-log { color: rgb(176, 176, 176); line-height: 1.7; }

.debug-entry { margin-bottom: 6px; padding: 5px 5px 5px 10px; border-left: =
3px solid rgb(4, 159, 217); }

.debug-entry.error { border-left-color: rgb(224, 58, 45); color: rgb(255, 2=
05, 210); }

.debug-entry.success { border-left-color: rgb(0, 168, 84); color: rgb(200, =
240, 220); }

.sidebar { width: 340px; background: rgb(31, 31, 31); border-left: 1px soli=
d rgb(42, 42, 42); display: flex; flex-direction: column; overflow: hidden;=
 }

.sidebar-header { padding: 18px 24px; border-bottom: 1px solid rgb(42, 42, =
42); font-weight: 600; font-size: 16px; letter-spacing: 0.2px; }

.sidebar-content { flex: 1 1 0%; overflow-y: auto; padding: 18px; }

.speaker-item { background: rgba(255, 255, 255, 0.04); padding: 14px 16px; =
border-radius: 10px; margin-bottom: 12px; border-left: 3px solid transparen=
t; transition: 0.2s; }

.speaker-item.speaking { border-left-color: rgb(0, 168, 84); background: rg=
ba(0, 168, 84, 0.12); }

.speaker-name { font-weight: 600; margin-bottom: 5px; font-size: 14px; }

.speaker-status { font-size: 13px; color: rgb(153, 153, 153); }

.hidden { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: content-box rgba(255, 255, 255, 0.1=
5); border-radius: 6px; border: 2px solid transparent; }

::-webkit-scrollbar-thumb:hover { background: content-box rgba(255, 255, 25=
5, 0.25); }

.webex-logo { display: inline-flex; align-items: center; gap: 8px; font-wei=
ght: 700; font-size: 18px; }

.webex-logo::before { content: ""; width: 28px; height: 28px; background: l=
inear-gradient(135deg, rgb(4, 159, 217) 0%, rgb(11, 122, 184) 100%); border=
-radius: 6px; display: inline-block; }
------MultipartBoundary--LmYgKep1ddo9xa3hKkU3wv5oK5fz366KvzuR216trz------
