/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./styles/participants.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/

.participants-panel {
  position: relative;
  width: 320px;
  height: calc(100% - 20px);
  margin: 10px 10px 10px 0;
  background: #232e6a;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1001;
}

/* Hide LiveKit chat completely */
.lk-chat-container {
  display: none !important;
}

.participants-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--lk-border-color);
  background: white;
}

.participants-header h3 {
  margin: 0;
  color: #ff8c42;
  font-size: 1rem;
}

.close-btn {
  background: #dc3545;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.participants-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.participant-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  border-radius: 8px;
  margin-bottom: 0.25rem;
}

.participant-item:hover {
  background: transparent;
}

.participant-name {
  color: #fff;
  font-size: 0.875rem;
}

.participant-controls {
  display: flex;
  gap: 0.5rem;
}

.status-icon {
  color: var(--lk-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.status-icon.on {
  color: #ffffff;
}

.status-icon.on svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.status-icon.off {
  color: #dc3545;
  opacity: 1;
}

.status-icon.off svg {
  color: #dc3545 !important;
  fill: #dc3545 !important;
}

.status-icon.off button {
  color: #dc3545 !important;
}

.status-icon.off button svg {
  color: #dc3545 !important;
  fill: #dc3545 !important;
}

.participants-footer {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--lk-border-color);
}

.invite-btn {
  background: transparent;
  color: #ffc107;
  border: 2px solid #ffc107;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.invite-btn:hover {
  background: #ffc107;
  color: #000;
}

.mute-all-btn {
  background: transparent;
  color: #dc3545;
  border: 2px solid #dc3545;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.mute-all-btn:hover {
  background: #dc3545;
  color: #fff;
}

.transcript-btn {
  background: #f18917;
  color: #fff;
  border: none;
  padding: 12px;
  margin: 1rem auto;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: calc(50% - 1rem);
  transition: opacity 0.2s;
  display: block;
}

.transcript-btn:hover {
  opacity: 0.8;
}

/* SIP Participant Styles */
.sip-pending-section {
  border-bottom: 1px solid rgba(255, 193, 7, 0.3);
  margin-bottom: 4px;
  padding-bottom: 4px;
}

.sip-pending-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 4px;
  color: #ffc107;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sip-pending-item {
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.2);
  border-radius: 8px;
  margin: 4px 4px;
  animation: sipPulse 2s ease-in-out infinite;
}

@keyframes sipPulse {
  0%, 100% { border-color: rgba(255, 193, 7, 0.2); }
  50% { border-color: rgba(255, 193, 7, 0.5); }
}

.sip-action-buttons {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.sip-accept-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #4caf50;
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.sip-accept-btn:hover {
  background: #45a049;
  transform: scale(1.1);
}

.sip-accept-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.sip-reject-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #ef4444;
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.sip-reject-btn:hover {
  background: #dc2626;
  transform: scale(1.1);
}

.sip-reject-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.sip-badge {
  display: inline-block;
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sip-badge.accepted {
  background: rgba(76, 175, 80, 0.15);
  color: #66bb6a;
}

.sip-participant-item {
  border-left: 2px solid #4caf50;
}

.participant-name.clickable-name:hover {
  color: #ffc107 !important;
}

.panel-open {
  margin-right: 320px;
}

@media (max-width: 768px) {
  .panel-open {
    margin-right: 0 !important;
  }

  .participants-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    z-index: 100;
  }

  .app-chat-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 100;
  }
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./styles/MeetingHeader.module.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
.meeting-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 70px;
  background: rgba(15, 23, 42, 0.85);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
  position: fixed;
}

@media (max-width: 768px) {
  .meeting-header {
    height: auto;
    padding: 10px 15px;
  }
  
  .meeting-header-right {
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
    gap: 6px !important;
  }

  .end-meeting-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
    height: 32px !important;
  }
}

.meeting-header-left {
  display: flex;
  align-items: center;
}

.meeting-header-center {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  overflow: hidden;
  padding: 0 10px;
}

.meeting-title {
  color: #f18917;
  font-size: 18px;
  font-weight: 500;
}

.meeting-header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* .live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #d32f2f; 
  padding: 4px 10px;
  border-radius: 14px;
} */
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(145deg, #b71c1c, #7f0000);
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}


.live-dot {
  width: 8px;
  height: 8px;
  background: #f8f7f7; /* slightly brighter red */
  border-radius: 50%;
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.live-text {
  color: #ffffff; /* white text */
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.recording-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(145deg, #1b5e20, #0a3d0a);
  padding: 4px 10px;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.recording-dot {
  width: 8px;
  height: 8px;
  background: #f8f7f7; /* same as live dot */
  border-radius: 50%;
  animation: pulse 1.6s infinite;
}

.recording-text {
  color: #ffffff; /* white text */
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.participants-header-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 10px 14px;
  color: white;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s;
}

.participants-header-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Adjust video conference to account for header */
/* .lk-video-conference {
  padding-top: 50px;
} */

.lk-room-container {
  padding-top: 70px;
}

@media (max-width: 768px) {
  .lk-room-container {
    padding-top: 120px;
  }
}
/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./styles/InviteModal.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.invite-modal {
  background: white;
  border-radius: 12px;
  width: 500px;
  max-width: 90vw;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
  padding: 20px 24px 16px;
}

.modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #f18917;
}

.modal-content {
  padding: 10px 24px 20px;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.input-with-copy {
  display: flex;
  gap: 8px;
}

.input-with-copy input {
  flex: 1 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: #f8f9fa;
  color: black;
}

.copy-btn {
  padding: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.copy-btn:hover {
  opacity: 0.8;
}

.copy-btn.orange {
  background: #f18917;
  color: white;
}

.copy-btn.green {
  background: #28a745;
  color: white;
}

.info-box {
  background: #d1ecf1;
  border: 1px solid #bee5eb;
  border-radius: 6px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #0c5460;
  font-size: 14px;
  line-height: 1.4;
}

.modal-footer {
  padding: 8px 24px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.close-btn-modal {
  background: transparent;
  color: #ffc107;
  border: 2px solid #ffc107;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.close-btn-modal:hover {
  background: #ffc107;
  color: #000;
}

.copy-close-btn {
  background: #232e6a;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.copy-close-btn:hover {
  opacity: 0.8;
}
/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./styles/globals.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************/
* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  background-color: #111;
}

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0px;
}

body:has(.custom-prejoin-container) {
  overflow-y: auto;
  height: auto;
}

.webinar-skeleton {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: webinar-skeleton-loading 1.5s infinite;
  border-radius: 20px;
}

@keyframes webinar-skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

body {
  display: flex;
  flex-direction: column;
}

.header {
  max-width: 500px;
  padding-inline: 2rem;
}

.header>img {
  display: block;
  margin: auto;
  max-width: 100%;
}

.header>h2 {
  font-family: 'TWK Everett', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 144%;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

footer {
  width: 100%;
  padding: 1.5rem 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  background-color: var(--lk-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

footer a,
h2 a {
  color: #ff6352;
  -webkit-text-decoration-color: #a33529;
          text-decoration-color: #a33529;
  text-underline-offset: 0.125em;
}

footer a:hover,
h2 a {
  -webkit-text-decoration-color: #ff6352;
          text-decoration-color: #ff6352;
}

h2 a {
  text-decoration: none;
}

/* Hide control bar by default and show on hover */
.lk-room-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.lk-room-container .lk-control-bar {
  /* opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; */
  opacity: 1;
  pointer-events: auto;
  background: #2c313c !important;
  border-radius: 12px !important;
  padding: 6px !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  margin: 0 auto !important;
  gap: 4px !important;
}

/* .lk-room-container:hover .lk-control-bar {
  opacity: 1;
  pointer-events: auto;
} */

.lk-control-bar .lk-button-group>button:not(.lk-button-menu),
.lk-control-bar>button:not(.lk-button-menu),
.lk-control-bar .lk-disconnect-button,
.reaction-button {
  font-size: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

.lk-control-bar .lk-disconnect-button {
  border: 1px solid #f91f31 !important;
  color: #f91f31 !important;
  border-radius: 8px !important;
}

.lk-control-bar .lk-button-group>button:hover,
.lk-control-bar>button:hover,
.reaction-button:hover {
  /* background: rgba(27, 180, 240, 0.897) !important; */
  background: #f18917 !important;
}

/* .lk-control-bar [data-lk-source="microphone"][aria-pressed="true"] {
  background: linear-gradient(145deg, #f18917 0%, #d95f14 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(241, 137, 23, 0.28) !important;
}

.lk-control-bar [data-lk-source="camera"][aria-pressed="true"] {
  background: linear-gradient(145deg, #4ba8f0 0%, #000053 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(75, 168, 240, 0.28) !important;
} */

.lk-control-bar [data-lk-source="microphone"][aria-pressed="false"],
.lk-control-bar [data-lk-source="camera"][aria-pressed="false"] {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  /* border: 1px solid rgba(255, 255, 255, 0.2) !important; */
}

.lk-control-bar [data-lk-source="microphone"].permission-denied,
.lk-control-bar [data-lk-source="camera"].permission-denied {
  background: rgba(249, 31, 49, 0.16) !important;
  color: #ffb4bc !important;
  border: 1px solid rgba(249, 31, 49, 0.34) !important;
}

.lk-control-bar [data-lk-source="microphone"][aria-pressed="false"]:hover,
.lk-control-bar [data-lk-source="camera"][aria-pressed="false"]:hover {
  background: #f18917 !important;
  color: #ffffff !important;
}

.lk-control-bar [data-lk-source="microphone"].permission-denied:hover,
.lk-control-bar [data-lk-source="camera"].permission-denied:hover {
  background: #f91f31 !important;
  color: #ffffff !important;
}


.lk-control-bar .lk-button-group>button:not(.lk-button-menu) svg,
.lk-control-bar>button:not(.lk-button-menu) svg,
.lk-control-bar .lk-disconnect-button svg,
.reaction-button svg {
  margin: auto !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.lk-control-bar .lk-disconnect-button:hover svg path {
  fill: white !important;
}

[data-lk-source="microphone"] svg,
[data-lk-source="camera"] svg,
[data-lk-source="screen_share"] svg,
.lk-settings-toggle svg {
  transform: translateY(2px) !important;
}


.lk-control-bar .lk-disconnect-button~*:not(:has(svg)) {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.lk-control-bar .lk-button-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 24px !important;
  height: 40px !important;
  padding: 0 4px !important;
  margin: 0 !important;
  border-radius: 0 8px 8px 0 !important;
  background: transparent !important;
}

.lk-control-bar .lk-button-menu svg {
  margin: auto !important;
}

/* Reduce spacing in button groups (mic/video with dropdown) */
.lk-control-bar .lk-button-group {
  gap: 0px !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: 40px !important;
  background: #2c313c !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.lk-control-bar .lk-button-group>button:not(.lk-button-menu) {
  border-radius: 8px 0 0 8px !important;
}

.lk-control-bar .lk-button-group>button:hover {
  background: #f18917 !important;
}

.lk-control-bar .lk-button-group>button {
  background: transparent !important;
}

.lk-control-bar .lk-button-group>button:hover {
  background: #f18917 !important;
}

.lk-control-bar .lk-button-group>button {
  background: transparent !important;
}

.lk-grid-layout {
  background: transparent;
}

.lk-video-conference-inner {
  background: transparent;
}

/* Restore default user icon */
.lk-participant-tile .lk-participant-placeholder svg {
  visibility: visible !important;
}

/* Default placeholder styling */
.lk-participant-tile .lk-participant-placeholder {
  /* background: #1c2438 !important; */
  background: #2c313c !important;

}

/* Base tile styling */
.lk-participant-tile {
  background: #2c313c !important;
  /* background: linear-gradient(
    145deg,
    #1f1f23,
    #2a2a2f
  ) !important; */
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  overflow: hidden !important;

}

/* 
@media (min-width: 1024px) and (max-width: 1440px) {
  .lk-participant-tile {
    background: #2c313c !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    overflow: hidden !important;
    max-height: 322px;
    height: 100%;
  }
}
*/

/* Hide the default user icon SVG */
.lk-participant-tile .lk-participant-placeholder svg {
  display: none !important;
}

/* Capitalize participant names */
.lk-participant-name,
.participant-name {
  text-transform: capitalize;
}

/* Show participant initials in placeholder */
.lk-participant-tile .lk-participant-placeholder::before {
  content: attr(data-lk-initials);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: 600;
  color: white;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

/* Different colors for each participant */
.lk-participant-tile:nth-child(12n+1) .lk-participant-placeholder::before {
  /* background: #755B4B; */
  background: linear-gradient(135deg, #fab982, #634226);
}

.lk-participant-tile:nth-child(12n+2) .lk-participant-placeholder::before {
  /* background: #736C52; */
  background: linear-gradient(180deg, #eacc64, #897012);
}

.lk-participant-tile:nth-child(12n+3) .lk-participant-placeholder::before {
  /* background: #6A5D5A; */
  background: linear-gradient(180deg, #9f8b86, #6A5D5A);
}

.lk-participant-tile:nth-child(12n+4) .lk-participant-placeholder::before {
  /* background: #3C4257; */
  background: linear-gradient(180deg, #9f8b86, #6A5D5A);
}

.lk-participant-tile:nth-child(12n+5) .lk-participant-placeholder::before {
  /* background: #5E5246; */
  background: linear-gradient(180deg, #af957c, #5E5246);
}

.lk-participant-tile:nth-child(12n+6) .lk-participant-placeholder::before {
  /* background: #7D5D42; */
  background: linear-gradient(180deg, #edac75, #7D5D42);
}

.lk-participant-tile:nth-child(12n+7) .lk-participant-placeholder::before {
  /* background: #3B5A63; */
  background: linear-gradient(180deg, #96d0e1, #3B5A63);
}

.lk-participant-tile:nth-child(12n+8) .lk-participant-placeholder::before {
  /* background: #254460; */
  background: linear-gradient(180deg, #61b1fa, #254460);
}

.lk-participant-tile:nth-child(12n+9) .lk-participant-placeholder::before {
  /* background: #6A6E70; */
  background: linear-gradient(180deg, #cedae1, #6A6E70);
}

.lk-participant-tile:nth-child(12n+10) .lk-participant-placeholder::before {
  /* background: #6D6866; */
  background: linear-gradient(180deg, #d3d3d3, #6D6866);
}

.lk-participant-tile:nth-child(12n+11) .lk-participant-placeholder::before {
  /* background: #6F4A39; */
  background: linear-gradient(180deg, #f0c38e, #6F4A39);
}

.lk-participant-tile:nth-child(12n+12) .lk-participant-placeholder::before {
  /* background: #5B4F48; */
  background: linear-gradient(180deg, #c8b6a6, #5B4F48);
}

/* Settings Menu */
.lk-settings-menu-modal {
  max-height: 90vh !important;
  height: auto !important;
  width: min(900px, 95vw) !important;
  z-index: 1500 !important;
}

.settings-menu .lk-participant-media-video {
  max-width: 350px !important;
  width: 350px !important;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* half + half */
  grid-gap: 24px;
  gap: 24px;
}

.media-column h3 {
  margin-bottom: 8px;
}

.media-tab {
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Notification animations */
/* Toast container */
.toast-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
}

/* Toast */
.toast {
  background: rgba(60, 60, 60, 0.95);
  color: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  min-width: 220px;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: toast-in 0.25s ease-out forwards;
  pointer-events: none;
}

/* Exit state */
.toast.exit {
  animation: toast-out 0.2s ease-in forwards;
}

/* Animations */
@keyframes toast-in {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(-20px);
    opacity: 0;
  }
}

/* Pulse animation for waiting overlay */
@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* Hand raise animations */
@keyframes handRaisePulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(235, 185, 37, 0.7);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(235, 185, 37, 0);
  }
}

@keyframes handWave {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-15deg);
  }

  75% {
    transform: rotate(15deg);
  }
}

@keyframes handBounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-8px);
  }

  60% {
    transform: translateY(-4px);
  }
}

.hand-raise-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hand-raise-button:hover {
  transform: scale(1.1);
}

.hand-raise-button.raised {
  animation: handRaisePulse 2s infinite;
}

.hand-raise-button.raised .hand-emoji {
  animation: handWave 1s ease-in-out infinite, handBounce 0.6s ease-in-out infinite;
}





@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

/* Sidebar Toggle */
.sidebar-toggle-btn {
  position: absolute;
  left: 0;
  top: 90px;

  width: 24px;
  height: 48px;
  /* background: rgba(0, 0, 0, 0.5); */
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  background: #f8f4ff;
  border: 1px solid #f8f4ff;
  border-left: none;
  border-radius: 0 8px 8px 0;
  /* color: white; */
  color: #111;
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}

.sidebar-toggle-btn:hover {
  /* background: rgba(0, 0, 0, 0.8); */
  background: rgba(250, 245, 245, 0.6);
  width: 32px;
}

.sidebar-toggle-btn svg {
  width: 16px;
  height: 16px;
}

/* Hide sidebar when toggled */
.video-conference-container {
  width: 100%;
  height: 100%;
}

.video-conference-container.sidebar-hidden .lk-carousel {
  display: none !important;
}

.video-conference-container.sidebar-hidden .lk-focus-layout {
  grid-template-columns: 1fr !important;
}

.video-conference-container.sidebar-hidden .lk-grid-layout {
  /* Preserve the computed conference grid instead of stretching tiles into narrow columns. */
  grid-template-columns: repeat(var(--lk-col-count), minmax(0, 1fr)) !important;
}

.lk-chat {
  border: none !important;
  border-radius: 12px !important;
  margin: 10px 10px 10px 0 !important;
  height: calc(100% - 20px) !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .lk-chat {
    position: fixed !important;
    top: 120px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100% - 120px) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 1001 !important;
    background: #111 !important;
  }

  .lk-chat-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .lk-chat .lk-close-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* Increase speaking indicator border radius */
.lk-participant-tile[data-lk-speaking] {
  --lk-speaking-indicator-width: 3px;
}

.lk-participant-tile[data-lk-speaking]::after {
  border-color: #f18917 !important;
  border-radius: 12px;
}


/* .lk-participant-tile[data-lk-speaking="true"]
.lk-participant-placeholder::before {
  box-shadow:
    0 0 12px rgba(59, 130, 246, 0.9),
    0 0 30px rgba(59, 130, 246, 0.7);
} */

/* Orange glow only when participant is speaking */
.lk-participant-tile[data-lk-speaking="true"] .lk-participant-placeholder::before {
  box-shadow:
    0 0 12px rgba(255, 140, 66, 0.9),
    0 0 30px rgba(255, 140, 66, 0.7);
}

/* Disconnect button hover - red background */
.lk-control-bar .lk-disconnect-button:hover {
  background: #d32f2f !important;
  border: 1px solid #d32f2f !important;
}

.lk-button,
.lk-button-menu {
  background-color: #2c313c !important;
}

/* Highlight active buttons (like Mic/Cam when ON) - Restricted to control bar and media toggles */
/* .lk-control-bar .lk-button[aria-pressed="true"], */
.lk-control-bar .lk-button[data-lk-active="true"],
/* .lk-button[aria-pressed="true"][data-lk-source], */
.lk-button[data-lk-active="true"][data-lk-source] {
  background-color: #f18917 !important;
  color: #ffffff !important;
}

/* Highlight selected device in menu */
.lk-device-menu li[data-lk-active="true"],
.lk-device-menu li[aria-selected="true"],
.lk-device-menu li[aria-current="true"],
.lk-device-menu li.lk-active,
.lk-device-menu li[data-lk-active="true"] button,
.lk-device-menu li[aria-selected="true"] button,
.lk-device-menu li[aria-current="true"] button,
.lk-device-menu li.lk-active button,
.lk-device-menu [role="menuitemcheckbox"][aria-checked="true"],
.lk-device-menu [role="menuitem"][aria-selected="true"],
.lk-device-menu [role="menuitem"][aria-current="true"],
.lk-device-menu [role="option"][aria-selected="true"],
.lk-device-menu [role="option"][aria-current="true"],
.lk-device-menu [role="option"][data-lk-active="true"],
.lk-device-menu [role="option"][aria-selected="true"] button,
.lk-device-menu [role="option"][data-lk-active="true"] button,
.lk-device-menu [role="menuitem"][data-lk-active="true"] {
  background-color: #f18917 !important; /* Brand orange */
  color: #ffffff !important;
  font-weight: bold !important;
}

.lk-device-menu li[data-lk-active="true"] button::before,
.lk-device-menu li[aria-selected="true"] button::before,
.lk-device-menu li[aria-current="true"] button::before,
.lk-device-menu [role="option"][aria-selected="true"] button::before,
.lk-device-menu [role="option"][data-lk-active="true"] button::before,
.lk-device-menu [role="menuitemcheckbox"][aria-checked="true"]::before,
.lk-device-menu [role="menuitem"][aria-selected="true"]::before,
.lk-device-menu [role="menuitem"][data-lk-active="true"]::before {
  content: '✓ ';
  display: inline-block;
  margin-right: 5px;
}

@media (max-width: 768px) {
  .lk-room-container .lk-control-bar {
    max-width: calc(100vw - 16px) !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    padding: 4px !important;
  }

  .lk-control-bar .lk-button-group>button:not(.lk-button-menu),
  .lk-control-bar>button:not(.lk-button-menu),
  .lk-control-bar .lk-disconnect-button,
  .reaction-button {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
  }

  .lk-control-bar .lk-button-group>button:not(.lk-button-menu) svg,
  .lk-control-bar>button:not(.lk-button-menu) svg,
  .lk-control-bar .lk-disconnect-button svg,
  .reaction-button svg {
    width: 18px !important;
    height: 18px !important;
  }

  .lk-control-bar .lk-button-menu {
    min-width: 18px !important;
    padding: 0 2px !important;
    height: 32px !important;
  }

  .lk-control-bar .lk-button-group {
    height: 32px !important;
  }
}

.custom-prejoin-container {
  display: flex;
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  /* background-color: #f8f9fb; */
      background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  flex-direction: row;
  justify-content: center;
}

.prejoin-left {
  flex: 0 0 50%;
  /* background: #3d6cd5; */
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
  /* padding: 12vh 2rem 2rem 2rem; */
  position: relative;
  overflow: hidden;
}

.prejoin-right {
  flex: 0 0 40%;
  /* background: #ffffff; */
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 2rem;
}

.join-card {
  /* background: white; */
  padding: 3rem 2.5rem;
  border-radius: 24px;
  /* box-shadow: 0 30px 60px rgba(0, 0, 0, 0.06); */
  width: 90%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border: 1px solid #f8fafc; */
}

@media (max-width: 767px) {
  .custom-prejoin-container {
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .prejoin-form{
    flex-direction: column !important;
  }

  .prejoin-left {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 1.5rem 1rem 1rem 1rem !important;
    min-height: auto !important;
    align-items: center !important;
  }


  .prejoin-right {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 1rem !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: auto !important;
  }

  .video-preview-container {
    width: 90% !important;
    max-width: 360px !important;
    aspect-ratio: 4/3 !important;
  }

  .logo-container {
    margin-bottom: 1rem !important;
  }

  .logo-container img {
    height: 70px !important;
    margin-bottom: 0.75rem !important;
  }

  .logo-container p {
    font-size: 0.85rem !important;
    padding: 0 0.5rem !important;
  }

  .watermark-decoration {
    display: none;
  }

  .join-card {
    padding: 1.5rem 1rem !important;
    width: 100% !important;
    max-width: 400px !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    margin-top: 0 !important;
  }

  .join-button {
    padding: 0.875rem !important;
    font-size: 0.95rem !important;
    margin-top: 1rem !important;
  }
}

@media (max-width: 480px) {
  .custom-prejoin-container {
    min-height: 100vh !important;
    height: auto !important;
  }

  .prejoin-left {
    padding: 1.5rem 1rem 0.5rem 1rem !important;
    min-height: 40vh !important;
  }

  .prejoin-right {
    padding: 0.5rem 1rem 2rem 1rem !important;
    min-height: 60vh !important;
  }

  .video-preview-container {
    max-width: 300px !important;
  }

  .join-card {
    padding: 1rem 0.75rem !important;
    max-width: 100% !important;
  }

  .join-input {
    padding: 0.75rem 1rem 0.75rem 2.5rem !important;
    font-size: 0.9rem !important;
  }

  .join-button {
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .video-controls-btn {
    width: 40px !important;
    height: 40px !important;
  }

  .video-controls-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  .video-controls-overlay {
    bottom: 1rem !important;
    gap: 0.75rem !important;
  }
}

@media (max-height: 700px) and (min-width: 1025px) {
  .prejoin-left {
    padding: 6vh 2rem 2rem 2rem !important;
  }

  .logo-container {
    margin-bottom: 1.5rem !important;
  }
}

.logo-container {
  margin-bottom: 2.5rem;
  text-align: center;
  z-index: 1;
  padding: 0 2rem;
}

.logo-container img {
  height: 105px;
  margin-bottom: 1.5rem;
}

.logo-container p {
  color: #333;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 auto;
}

.prejoin-right .join-button
 {
    width: 100%;
    padding: 1rem !important;
    border-radius: 10px !important;
    background: #000053 !important;
    color: white !important;
    border: none !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    box-shadow: 0 4px 12px rgba(75, 168, 240, 0.2);
    transition: all 0.2s ease !important;
}

.video-preview-container {
  width: 75%;
  max-width: 720px;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); */
  z-index: 1;
}

.is-webinar-participant .video-preview-container {
  background: transparent !important;
}

.permission-warning-badge {
  position: absolute;
  top: -4px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #f18917;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(241, 137, 23, 0.38);
}

.permission-warning-badge-btn {
  border: none;
  cursor: pointer;
  padding: 0;
}

.permission-control-floating-badge {
  position: fixed;
  z-index: 1200;
}

.prejoin-control-wrapper {
  position: relative;
  display: inline-flex;
}

.permission-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 46, 0.34);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.permission-modal-card {
  position: relative;
  width: min(980px, 100%);
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  border-radius: 28px;
  padding: 28px 32px;
  border: 1px solid rgba(0, 0, 83, 0.08);
  box-shadow: 0 32px 80px rgba(0, 0, 83, 0.18);
  overflow: hidden;
}

.permission-modal-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, #000053 0%, #4ba8f0 55%, #f18917 100%);
}

.permission-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #000053;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.permission-modal-layout {
  display: flex;
  align-items: center;
  gap: 18px;
}

.permission-modal-visual,
.permission-modal-content {
  flex: 1 1 50%;
}

.permission-modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  color: #4a4f6b;
}

.permission-modal-content h2 {
  margin: 0;
  color: #000053;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 2.2vw, 2.65rem);
  font-weight: 600;
  line-height: 1.2;
}

.permission-modal-content p {
  margin: 0;
  color: #5f6787;
  font-size: 1rem;
  line-height: 1.55;
}

.permission-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  max-width: 280px;
}

.permission-primary-btn,
.permission-secondary-btn {
  min-height: 56px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.permission-primary-btn {
  border: none;
  background: linear-gradient(135deg, #000053 0%, #153f9f 100%);
  color: #fff;
  box-shadow: 0 16px 30px rgba(0, 0, 83, 0.22);
}

.permission-secondary-btn {
  border: 1.5px solid #000053;
  background: rgba(255, 255, 255, 0.92);
  color: #000053;
}

.permission-primary-btn:hover,
.permission-secondary-btn:hover,
.permission-modal-close:hover {
  transform: translateY(-1px);
}

.permission-secondary-btn:hover {
  background: rgba(241, 137, 23, 0.08);
}

.permission-modal-close:hover {
  background: rgba(0, 0, 83, 0.06);
}

.permission-primary-btn:disabled,
.permission-secondary-btn:disabled {
  cursor: wait;
  opacity: 0.72;
}

.permission-instruction-list {
  margin: 0;
  padding-left: 1.4rem;
  color: #4a4f6b;
  font-size: 1.15rem;
  line-height: 1.7;
}

.permission-art {
  position: relative;
  width: 100%;
  min-height: 330px;
}

.permission-art-backdrop {
  position: absolute;
  inset: 14px 18px 24px;
  border-radius: 34px;
  background:
    radial-gradient(circle at top left, rgba(75, 168, 240, 0.22), transparent 38%),
    radial-gradient(circle at top right, rgba(241, 137, 23, 0.16), transparent 34%),
    linear-gradient(180deg, #f7f9ff 0%, #eef3ff 100%);
  border: 1px solid rgba(0, 0, 83, 0.06);
}

.browser-backdrop {
  inset: 18px 12px 28px;
  border-radius: 36px;
}

.permission-art-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
}

.permission-art-kicker {
  position: absolute;
  top: 18px;
  left: 34px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 83, 0.08);
  color: #000053;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 28px rgba(0, 0, 83, 0.1);
}

.permission-art-kicker-blocked {
  background: rgba(255, 244, 232, 0.96);
  color: #9a4b07;
  border-color: rgba(241, 137, 23, 0.2);
}

.permission-art-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(8px);
}

.permission-art-glow-left {
  width: 210px;
  height: 210px;
  left: 42px;
  top: 42px;
  background: radial-gradient(circle, rgba(75, 168, 240, 0.22) 0%, transparent 68%);
}

.permission-art-glow-right {
  width: 180px;
  height: 180px;
  right: 52px;
  top: 30px;
  background: radial-gradient(circle, rgba(241, 137, 23, 0.18) 0%, transparent 70%);
}

.permission-art-window {
  position: absolute;
  left: 62px;
  right: 72px;
  top: 38px;
  bottom: 48px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 83, 0.08);
  box-shadow: 0 28px 54px rgba(0, 0, 83, 0.14);
  overflow: hidden;
}

.permission-art-window-bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  background: linear-gradient(90deg, rgba(238, 240, 255, 0.95) 0%, rgba(247, 250, 255, 0.95) 100%);
  border-bottom: 1px solid rgba(0, 0, 83, 0.06);
}

.permission-art-window-bar span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 83, 0.22);
}

.permission-art-window-body {
  position: relative;
  height: calc(100% - 34px);
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(75, 168, 240, 0.12), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
}

.permission-art-window-label {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 2;
  color: rgba(0, 0, 83, 0.7);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.permission-art-main-tile {
  position: absolute;
  inset: 42px 96px 46px 18px;
  border-radius: 24px;
  background: linear-gradient(145deg, #000053 0%, #163f98 100%);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.permission-art-main-tile::before {
  content: '';
  position: absolute;
  inset: auto auto -24px -24px;
  width: 130px;
  height: 130px;
  border-radius: 999px;
  background: rgba(75, 168, 240, 0.22);
}

.permission-art-screen-indicator {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.permission-art-screen-indicator-main {
  top: 16px;
  right: 16px;
}

.permission-art-screen-indicator-side {
  top: 10px;
  right: 10px;
  padding: 5px 7px;
}

.permission-art-screen-indicator-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.permission-art-screen-indicator-side .permission-art-screen-indicator-icon {
  width: 22px;
  height: 22px;
}

.permission-art-main-avatar {
  position: absolute;
  left: 28px;
  top: 26px;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #dbe7ff 100%);
}

.permission-art-main-avatar-ring {
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: linear-gradient(145deg, #4ba8f0 0%, #f18917 100%);
}

.permission-art-main-lines {
  position: absolute;
  left: 28px;
  right: 30px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.permission-art-main-lines span {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}

.permission-art-main-lines span:last-child {
  width: 68%;
}

.permission-art-device-pill {
  position: absolute;
  left: 24px;
  top: 122px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.permission-art-side-tile {
  position: absolute;
  top: 42px;
  right: 18px;
  width: 92px;
  height: 112px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff4e8 0%, #ffffff 100%);
  border: 1px solid rgba(241, 137, 23, 0.18);
  box-shadow: 0 16px 28px rgba(0, 0, 83, 0.08);
}

.permission-art-side-avatar {
  position: absolute;
  inset: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f18917 0%, #d95f14 100%);
}

.permission-art-bottom-bar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.permission-art-bottom-bar span {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 83, 0.08);
  box-shadow: 0 8px 18px rgba(0, 0, 83, 0.08);
}

.permission-art-control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6a728f;
}

.permission-art-control-btn.active-camera,
.permission-art-control-btn.active-microphone {
  color: #ffffff;
  border-color: transparent;
}

.permission-art-control-btn.active-camera {
  background: linear-gradient(145deg, #4ba8f0 0%, #000053 100%);
}

.permission-art-control-btn.active-microphone {
  background: linear-gradient(145deg, #f18917 0%, #d95f14 100%);
}

.permission-art-control-btn-neutral {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #000053;
}

.permission-art-status-card {
  position: absolute;
  left: 28px;
  bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 214px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 83, 0.08);
  box-shadow: 0 20px 34px rgba(0, 0, 83, 0.12);
}

.permission-art-status-card-title {
  color: #000053;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
}

.permission-art-status-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
  color: #000053;
  background: rgba(238, 242, 255, 0.82);
  font-size: 0.9rem;
  font-weight: 600;
}

.permission-art-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0, 0, 83, 0.8);
  color: #000053;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(0, 0, 83, 0.12);
}

.permission-art-status-chip.active {
  background: linear-gradient(90deg, rgba(255, 244, 232, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
  box-shadow: inset 0 0 0 1px rgba(241, 137, 23, 0.2);
}

.permission-art-status-note {
  color: #66708f;
  font-size: 0.78rem;
  line-height: 1.45;
}

.permission-art-icon.active-camera {
  background: linear-gradient(145deg, #4ba8f0 0%, #000053 100%);
  color: #ffffff;
}

.permission-art-icon.active-microphone {
  background: linear-gradient(145deg, #f18917 0%, #d95f14 100%);
  color: #ffffff;
}

.permission-art-floating-badge {
  position: absolute;
  padding: 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 83, 0.08);
  box-shadow: 0 18px 30px rgba(0, 0, 83, 0.12);
}

.permission-art-floating-badge-primary {
  top: 24px;
  right: 26px;
}

.permission-art-floating-badge-secondary {
  right: 34px;
  bottom: 40px;
}

.permission-art-permission-sheet {
  position: absolute;
  right: 18px;
  bottom: 24px;
  z-index: 3;
  width: 220px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 83, 0.08);
  box-shadow: 0 20px 34px rgba(0, 0, 83, 0.14);
}

.permission-art-permission-sheet-label {
  margin-bottom: 10px;
  color: #5f6787;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.permission-art-permission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.permission-art-permission-device {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000053;
  font-size: 0.88rem;
  font-weight: 600;
}

.permission-art-permission-allow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #167c43;
  font-size: 0.8rem;
  font-weight: 700;
}

.permission-art-browser {
  display: flex;
  align-items: center;
  justify-content: center;
}

.permission-browser-helper-card {
  position: absolute;
  top: 64px;
  left: 26px;
  z-index: 4;
  width: 190px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(241, 137, 23, 0.18);
  box-shadow: 0 18px 32px rgba(0, 0, 83, 0.1);
}

.permission-browser-helper-title {
  margin-bottom: 6px;
  color: #000053;
  font-size: 0.98rem;
  font-weight: 700;
}

.permission-browser-helper-text {
  color: #5f6787;
  font-size: 0.82rem;
  line-height: 1.5;
}

.permission-browser-frame {
  position: relative;
  width: 360px;
  height: 228px;
  border: 2px solid rgba(0, 0, 83, 0.62);
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 44px rgba(0, 0, 83, 0.12);
  z-index: 2;
}

.permission-browser-step-badge {
  position: absolute;
  top: 122px;
  left: 236px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #000053;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0, 0, 83, 0.16);
  z-index: 5;
}

.permission-browser-step-badge-two {
  top: 188px;
  left: 346px;
  background: #f18917;
}

.permission-browser-toolbar {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 2px solid rgba(0, 0, 83, 0.2);
}

.permission-browser-toolbar span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.permission-browser-toolbar span:nth-child(1) {
  background: #f18917;
}

.permission-browser-toolbar span:nth-child(2) {
  background: #4ba8f0;
}

.permission-browser-toolbar span:nth-child(3) {
  background: #000053;
}

.permission-browser-address {
  position: relative;
  height: 44px;
  border-bottom: 2px solid rgba(75, 168, 240, 0.22);
  background: linear-gradient(90deg, #fff 0%, #fff 22%, #eef0ff 22%, #eef0ff 100%);
}

.permission-browser-lock-line {
  position: absolute;
  left: 18px;
  top: 14px;
  width: 92px;
  height: 12px;
  border-radius: 999px;
  background: rgba(0, 0, 83, 0.09);
}

.permission-browser-page-info {
  position: absolute;
  top: -10px;
  left: 132px;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(0, 0, 83, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 34px rgba(0, 0, 83, 0.12);
}

.permission-browser-settings {
  padding: 32px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.permission-browser-setting {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 83, 0.08);
}

.permission-browser-setting.active {
  border-color: rgba(241, 137, 23, 0.42);
  box-shadow: 0 10px 24px rgba(241, 137, 23, 0.12);
  background: linear-gradient(90deg, rgba(255, 244, 232, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.setting-icon {
  width: 28px;
  color: #f18917;
  flex-shrink: 0;
}

.setting-label {
  min-width: 92px;
  color: #000053;
  font-size: 0.92rem;
  font-weight: 600;
}

.setting-toggle {
  width: 54px;
  height: 18px;
  border-radius: 999px;
  background: rgba(75, 168, 240, 0.24);
  position: relative;
}

.setting-toggle::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -2px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff4e8;
  border: 1px solid rgba(0, 0, 83, 0.24);
}

.setting-status {
  color: #1e8e5a;
  font-size: 0.82rem;
  font-weight: 700;
  margin-left: auto;
}

.permission-browser-callout {
  position: absolute;
  top: 52px;
  left: 230px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 83, 0.14);
  color: #000053;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(0, 0, 83, 0.08);
  white-space: nowrap;
  z-index: 6;
}

.permission-browser-callout::after {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-left: 1px solid rgba(0, 0, 83, 0.14);
  border-bottom: 1px solid rgba(0, 0, 83, 0.14);
  transform: translateY(-50%) rotate(45deg);
}

.permission-browser-pointer {
  position: absolute;
  left: 205px;
  top: 96px;
  width: 92px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 0, 83, 0.18) 0%, rgba(0, 0, 83, 0.62) 28%, rgba(0, 0, 83, 0.62) 100%);
  z-index: 5;
}

.permission-browser-pointer::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid rgba(0, 0, 83, 0.62);
  border-right: 2px solid rgba(0, 0, 83, 0.62);
  transform: translateY(-50%) rotate(45deg);
}

.permission-browser-pointer::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(0, 0, 83, 0.22);
  box-shadow: 0 8px 18px rgba(0, 0, 83, 0.08);
  transform: translateY(-50%);
}

.permission-browser-highlight {
  position: absolute;
  top: 98px;
  left: 228px;
  width: 138px;
  height: 138px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(241, 137, 23, 0.18) 0%, rgba(75, 168, 240, 0.08) 42%, transparent 70%);
  z-index: 1;
}

.permission-browser-status-card {
  position: absolute;
  right: 24px;
  bottom: 18px;
  z-index: 4;
  width: 204px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 83, 0.08);
  box-shadow: 0 18px 32px rgba(0, 0, 83, 0.1);
}

.permission-browser-status-title {
  margin-bottom: 8px;
  color: #000053;
  font-size: 0.9rem;
  font-weight: 700;
}

.permission-browser-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5f6787;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
}

.permission-browser-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.12);
  flex: 0 0 auto;
}

.permission-modal-overlay .permission-primary-btn {
  width: 100%;
}

@media (max-width: 900px) {
  .permission-modal-card {
    padding: 22px 20px;
  }

  .permission-modal-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .permission-modal-content {
    align-items: center;
    text-align: center;
  }

  .permission-modal-actions {
    width: 100%;
    max-width: 320px;
  }

  .permission-instruction-list {
    text-align: left;
  }

  .permission-art {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: auto;
  }

  .permission-art-status-card,
  .permission-art-permission-sheet,
  .permission-browser-helper-card,
  .permission-browser-status-card {
    position: static;
    width: 100%;
  }

  .permission-art-window {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-height: 260px;
  }

  .permission-art-floating-badge-primary {
    top: 62px;
    right: 18px;
  }

  .permission-art-floating-badge-secondary {
    right: 24px;
    bottom: 112px;
  }

  .permission-browser-step-badge {
    top: 146px;
    left: 214px;
  }

  .permission-browser-step-badge-two {
    top: 212px;
    left: 282px;
  }

  .permission-browser-highlight {
    top: 122px;
    left: 192px;
  }
}

@media (max-width: 640px) {
  .permission-modal-overlay {
    padding: 12px;
  }

  .permission-modal-card {
    border-radius: 20px;
    padding: 18px 16px;
  }

  .permission-modal-content h2 {
    font-size: 1.7rem;
  }

  .permission-modal-content p,
  .permission-instruction-list {
    font-size: 1rem;
  }

  .permission-art {
    min-height: 250px;
  }

  .permission-browser-frame {
    width: 300px;
    height: 210px;
  }

  .permission-art-kicker {
    left: 18px;
  }

  .permission-browser-step-badge {
    top: 142px;
    left: 180px;
  }

  .permission-browser-step-badge-two {
    top: 198px;
    left: 246px;
  }

  .permission-art-main-tile {
    inset: 42px 76px 46px 14px;
  }

  .permission-art-side-tile {
    width: 74px;
    right: 14px;
  }

  .permission-art-device-pill {
    left: 16px;
    right: 16px;
    top: 116px;
    justify-content: center;
  }

  .permission-art-floating-badge-primary {
    right: 12px;
  }

  .permission-art-floating-badge-secondary {
    right: 16px;
    bottom: 108px;
  }

  .permission-browser-page-info {
    left: 108px;
  }

  .setting-label {
    min-width: 72px;
    font-size: 0.84rem;
  }

  .setting-status {
    font-size: 0.75rem;
  }

  .permission-browser-callout {
    top: 54px;
    left: 176px;
    font-size: 0.72rem;
  }

  .permission-browser-pointer {
    left: 160px;
    top: 88px;
    width: 70px;
  }
}


.permission-art {
  position: relative;
  overflow: hidden;
}

/* 👇 your image container */
.permission-art-backdrop-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.permission-art-backdrop-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* or contain based on your image */
  opacity: 0.9; /* tweak for softness */
}

/* 👇 make sure all other elements are above */
.permission-art > *:not(.permission-art-backdrop-img) {
  position: relative;
  z-index: 1;
}

/* .permission-art-backdrop-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.7),
    rgba(255,255,255,0.2)
  );
} */

.join-input {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  font-size: 0.95rem;
  outline: none;
  color: #1e293b;
  background-color: #ffffff;
  transition: border-color 0.2s;
}

.join-input:focus {
  border-color: #4ba8f0 !important;
}

.join-button {
  width: 100%;
  padding: 1rem !important;
  border-radius: 10px !important;
  background: #4ba8f0 !important;
  color: white !important;
  border: none !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  box-shadow: 0 4px 12px rgba(75, 168, 240, 0.2);
  transition: all 0.2s ease !important;
}

.join-button:hover {
  background: #3997df !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(75, 168, 240, 0.25) !important;
}

.security-text {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #94a3b8;
  font-size: 0.75rem;
  text-align: center;
  justify-content: center;
  flex-wrap: wrap;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .security-text {
    font-size: 0.7rem !important;
    margin-top: 1rem !important;
    gap: 0.25rem !important;
    padding: 0 0.5rem !important;
  }

  .security-text svg {
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .security-text {
    font-size: 0.65rem !important;
    margin-top: 0.75rem !important;
    padding: 0 !important;
  }
}

/* Custom injected chat and recording buttons — match built-in control bar button style */
#custom-chat-btn,
#custom-recording-btn {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: white !important;
  flex-shrink: 0 !important;
}

#custom-chat-btn:hover,
#custom-recording-btn:hover {
  background: #f18917 !important;
}

#custom-chat-btn svg,
#custom-recording-btn svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

button.lk-chat-toggle,
button.lk-chat-toggle:hover,
button.lk-chat-toggle:focus,
button.lk-chat-toggle:active {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  clip: rect(0,0,0,0) !important;
}

/* Hide the Next.js Dev Indicator "N" badge on mobile screens */
@media (max-width: 768px) {
  nextjs-portal {
    display: none !important;
  }
}




/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./node_modules/@livekit/components-styles/dist/general/index.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
[data-lk-theme]{font-size:var(--lk-font-size);font-family:var(--lk-font-family);color:var(--lk-fg)}[data-lk-theme] .lk-list{list-style:none;margin:0;padding:0}[data-lk-theme] .lk-form-control{font-family:var(--lk-font-family);padding:.625rem 1rem;background-color:var(--lk-control-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius)}[data-lk-theme=default]{color-scheme:dark;--lk-bg: #111;--lk-bg2: rgb(29.75, 29.75, 29.75);--lk-bg3: rgb(42.5, 42.5, 42.5);--lk-bg4: rgb(55.25, 55.25, 55.25);--lk-bg5: #444444;--lk-fg: #fff;--lk-fg2: rgb(244.8, 244.8, 244.8);--lk-fg3: rgb(234.6, 234.6, 234.6);--lk-fg4: rgb(224.4, 224.4, 224.4);--lk-fg5: rgb(214.2, 214.2, 214.2);--lk-border-color: rgba(255, 255, 255, 0.1);--lk-accent-fg: #fff;--lk-accent-bg: #1f8cf9;--lk-accent2: rgb(50.867826087, 150.2, 249.532173913);--lk-accent3: rgb(70.7356521739, 160.4, 250.0643478261);--lk-accent4: rgb(90.6034782609, 170.6, 250.5965217391);--lk-danger-fg: #fff;--lk-danger: #f91f31;--lk-danger2: rgb(249.532173913, 50.867826087, 67.2713043478);--lk-danger3: rgb(250.0643478261, 70.7356521739, 85.5426086957);--lk-danger4: rgb(250.5965217391, 90.6034782609, 103.8139130435);--lk-success-fg: #fff;--lk-success: #1ff968;--lk-success2: rgb(50.867826087, 249.532173913, 117.3930434783);--lk-success3: rgb(70.7356521739, 250.0643478261, 130.7860869565);--lk-success4: rgb(90.6034782609, 250.5965217391, 144.1791304348);--lk-control-fg: var(--lk-fg);--lk-control-bg: var(--lk-bg2);--lk-control-hover-bg: var(--lk-bg3);--lk-control-active-bg: var(--lk-bg4);--lk-control-active-hover-bg: var(--lk-bg5);--lk-connection-excellent: #06db4d;--lk-connection-good: #f9b11f;--lk-connection-poor: #f91f31;--lk-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--lk-font-size: 16px;--lk-line-height: 1.5;--lk-border-radius: 0.5rem;--lk-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);--lk-drop-shadow: rgba(255, 255, 255, 0.2) 0px 0px 24px;--lk-grid-gap: 0.5rem;--lk-control-bar-height: 69px;--lk-chat-header-height: 69px}.lk-button,.lk-start-audio-button,.lk-chat-toggle,.lk-disconnect-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1rem;color:var(--lk-control-fg);background-image:none;background-color:var(--lk-control-bg);border:0;border-radius:var(--lk-border-radius);cursor:pointer;white-space:nowrap;font-size:inherit;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lk-button:not(:disabled):hover,.lk-start-audio-button:not(:disabled):hover,.lk-chat-toggle:not(:disabled):hover,.lk-disconnect-button:not(:disabled):hover{background-color:var(--lk-control-hover-bg)}.lk-button>svg,.lk-start-audio-button>svg,.lk-chat-toggle>svg,.lk-disconnect-button>svg{overflow:visible}.lk-button[aria-pressed=true],[aria-pressed=true].lk-start-audio-button,[aria-pressed=true].lk-chat-toggle,[aria-pressed=true].lk-disconnect-button{background-color:var(--lk-control-active-bg)}.lk-button[aria-pressed=true]:hover,[aria-pressed=true].lk-start-audio-button:hover,[aria-pressed=true].lk-chat-toggle:hover,[aria-pressed=true].lk-disconnect-button:hover{background-color:var(--lk-control-active-hover-bg)}.lk-button[data-lk-source=screen_share][data-lk-enabled=true],[data-lk-source=screen_share][data-lk-enabled=true].lk-start-audio-button,[data-lk-source=screen_share][data-lk-enabled=true].lk-chat-toggle,[data-lk-source=screen_share][data-lk-enabled=true].lk-disconnect-button{background-color:var(--lk-accent-bg)}.lk-button[data-lk-source=screen_share][data-lk-enabled=true]:hover,[data-lk-source=screen_share][data-lk-enabled=true].lk-start-audio-button:hover,[data-lk-source=screen_share][data-lk-enabled=true].lk-chat-toggle:hover,[data-lk-source=screen_share][data-lk-enabled=true].lk-disconnect-button:hover{background-color:var(--lk-accent2)}.lk-button:disabled,.lk-start-audio-button:disabled,.lk-chat-toggle:disabled,.lk-disconnect-button:disabled{opacity:.5}.lk-button-group{display:inline-flex;align-items:stretch;height:100%}.lk-button-group>.lk-button:first-child,.lk-button-group>.lk-start-audio-button:first-child,.lk-button-group>.lk-chat-toggle:first-child,.lk-button-group>.lk-disconnect-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.lk-button-group-menu{position:relative;flex-shrink:0}.lk-button-group-menu>.lk-button,.lk-button-group-menu>.lk-start-audio-button,.lk-button-group-menu>.lk-chat-toggle,.lk-button-group-menu>.lk-disconnect-button{height:100%;border-top-left-radius:0;border-bottom-left-radius:0}.lk-button-group-menu>.lk-button::after,.lk-button-group-menu>.lk-start-audio-button::after,.lk-button-group-menu>.lk-chat-toggle::after,.lk-button-group-menu>.lk-disconnect-button::after{margin-left:0}.lk-button-menu::after{display:inline-block;content:"";width:.5em;height:.5em;margin-top:-0.25rem;margin-left:.5rem;border-left:.125em solid;border-bottom:.125em solid;transform:rotate(-45deg);transform-origin:center center}.lk-disconnect-button{font-weight:600;color:var(--lk-danger);border:1px solid var(--lk-danger)}.lk-disconnect-button:not(:disabled):hover{--lk-control-hover-bg: var(--lk-danger2);color:var(--lk-danger-fg)}.lk-disconnect-button:not(:disabled):active{--lk-control-hover-bg: var(--lk-danger3);color:var(--lk-danger-fg)}.lk-chat-toggle{position:relative}.lk-chat-toggle[data-lk-unread-msgs]:not([data-lk-unread-msgs="0"]):after{content:attr(data-lk-unread-msgs);position:absolute;top:0;left:0;padding:.25rem;margin-left:.25rem;margin-top:.25rem;border-radius:50%;font-size:.5rem;line-height:.75;background:var(--lk-accent-bg)}.lk-media-device-select:not(:last-child){padding-bottom:.5rem;margin-bottom:.75rem;border-bottom:1px solid var(--lk-border-color)}.lk-media-device-select li:not(:last-child){margin-bottom:.25rem}.lk-media-device-select li>.lk-button{width:100%;justify-content:start;padding-block:.5rem}.lk-media-device-select li:not([data-lk-active=true])>.lk-button:not(:disabled):hover{background-color:var(--lk-bg3)}.lk-media-device-select [data-lk-active=false]>.lk-button:hover{cursor:pointer;background-color:rgba(0,0,0,.05)}.lk-media-device-select [data-lk-active=true]>.lk-button{color:var(--lk-accent-fg);background-color:var(--lk-accent-bg)}.lk-device-menu{width:max-content;position:absolute;top:0;left:0;z-index:5;min-width:10rem;padding:.5rem;margin-bottom:.25rem;white-space:nowrap;background-color:var(--lk-bg2);border:1px solid var(--lk-border-color);border-radius:.75rem;box-shadow:var(--lk-box-shadow)}.lk-device-menu-heading{padding:.25rem .5rem;font-weight:bold;opacity:.65}.lk-start-audio-button{color:var(--lk-accent-fg);background-color:var(--lk-accent-bg)}@media screen and (max-width: 600px){.lk-start-audio-button{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%)}}.lk-pagination-control{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;background-color:var(--lk-control-bg);border-radius:var(--lk-border-radius);transition:opacity ease-in-out .15s;opacity:0}.lk-pagination-control:hover{opacity:1}.lk-pagination-control>.lk-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.lk-pagination-control>.lk-button:first-child>svg{transform:rotate(180deg)}.lk-pagination-control>.lk-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.lk-pagination-count{padding:.5rem .875rem;border-inline:1px solid var(--lk-bg)}[data-lk-user-interaction=true].lk-pagination-control{opacity:1}.lk-pagination-indicator{position:absolute;height:var(--lk-grid-gap);background-color:var(--lk-bg2);width:-moz-fit-content;width:fit-content;padding:.2rem .5rem;bottom:calc(var(--lk-grid-gap)/2);left:50%;transform:translateX(-50%);border-radius:2rem;opacity:1;display:flex;gap:.2rem;align-items:center}.lk-pagination-indicator span{display:inline-block;width:.4rem;height:.4rem;border-radius:9999999px;background-color:var(--lk-fg);opacity:.35;transition:opacity linear .2s}.lk-pagination-indicator span[data-lk-active]{opacity:.9}.lk-grid-layout{--lk-col-count: 1;--lk-row-count: 1;display:grid;grid-template-columns:repeat(var(--lk-col-count), minmax(0, 1fr));grid-auto-rows:minmax(0, 1fr);grid-gap:var(--lk-grid-gap);width:100%;height:100%;max-width:100%;max-height:100%;padding:var(--lk-grid-gap)}.lk-grid-layout[data-lk-pagination=true]{padding-bottom:calc(var(--lk-grid-gap)*2)}.lk-focus-layout{display:grid;grid-template-columns:1fr 5fr;grid-gap:var(--lk-grid-gap);gap:var(--lk-grid-gap);width:100%;max-height:100%;padding:var(--lk-grid-gap)}.lk-focused-participant{position:relative}.lk-focused-participant .lk-pip-track{position:absolute;top:10px;right:10px;width:20%;height:auto}@media(max-width: 600px){.lk-focus-layout{grid-template-columns:1fr;grid-template-rows:5fr 1fr}.lk-carousel{order:1}}.lk-carousel{max-height:100%;display:flex;gap:var(--lk-grid-gap)}.lk-carousel>*{flex-shrink:0;aspect-ratio:16/10;scroll-snap-align:start}.lk-carousel[data-lk-orientation=vertical]{flex-direction:column;scroll-snap-type:y mandatory;overflow-y:auto;overflow-x:hidden}.lk-carousel[data-lk-orientation=vertical]>*{--lk-height-minus-gaps: calc(100% - calc(var(--lk-grid-gap) * calc(var(--lk-max-visible-tiles) - 1)));height:calc(var(--lk-height-minus-gaps)/var(--lk-max-visible-tiles))}.lk-carousel[data-lk-orientation=horizontal]{scroll-snap-type:x mandatory;overflow-y:hidden;overflow-x:auto}.lk-carousel[data-lk-orientation=horizontal]>*{--lk-width-minus-gaps: calc(100% - var(--lk-grid-gap) * (var(--lk-max-visible-tiles) - 1));width:calc(var(--lk-width-minus-gaps)/var(--lk-max-visible-tiles))}.lk-connection-quality{width:1.5rem;height:1.5rem}.lk-track-muted-indicator-camera,.lk-track-muted-indicator-microphone{position:relative;width:var(--lk-indicator-size, 1rem);height:var(--lk-indicator-size, 1rem);-webkit-margin-end:.25rem;margin-inline-end:.25rem;transition:opacity .25s ease-in-out}.lk-track-muted-indicator-camera[data-lk-muted=true]{opacity:.5}.lk-track-muted-indicator-microphone{--lk-bg: var(--lk-icon-mic)}.lk-track-muted-indicator-microphone[data-lk-muted=true]{opacity:.5}.lk-participant-name{font-size:.875rem}.lk-participant-media-video{width:100%;height:100%;object-fit:cover;object-position:center;background-color:#000}.lk-participant-media-video[data-lk-orientation=landscape]{object-fit:cover}.lk-participant-media-video[data-lk-orientation=portrait],.lk-participant-media-video[data-lk-source=screen_share]{object-fit:contain;background-color:var(--lk-bg2)}.lk-participant-media-audio{width:auto}[data-lk-facing-mode=user] .lk-participant-media-video[data-lk-local-participant=true][data-lk-source=camera]{transform:rotateY(180deg)}.lk-audio-visualizer{width:100%;height:100%;min-height:160px;background:var(--lk-bg-control);aspect-ratio:16/9;border-radius:.5rem;display:flex;justify-content:space-around;align-items:center}.lk-audio-visualizer>rect{fill:var(--lk-accent-bg);transition:transform 100ms cubic-bezier(0.19, 0.02, 0.09, 1)}.lk-audio-visualizer>path{stroke:var(--lk-accent-bg);transition:100ms cubic-bezier(0.19, 0.02, 0.09, 1)}.lk-audio-bar-visualizer{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--lk-bg);gap:var(--lk-va-bar-gap, 24px)}.lk-audio-bar-visualizer>.lk-audio-bar{transform-origin:"center";height:100%;width:var(--lk-va-bar-width, 12px);border-radius:var(--lk-va-bar-border-radius, 32px);background-color:var(--lk-va-bar-bg, rgba(136, 136, 136, 0.2));transition:background-color .25s ease-out}.lk-audio-bar-visualizer[data-lk-va-state=speaking]>.lk-audio-bar,.lk-audio-bar-visualizer>.lk-audio-bar.lk-highlighted,.lk-audio-bar-visualizer>[data-lk-highlighted=true]{background-color:var(--lk-fg, rgb(136, 136, 136));transition:none}.lk-audio-bar-visualizer[data-lk-va-state=thinking]{transition:background-color .15s ease-out}.lk-participant-tile{--lk-speaking-indicator-width: 2.5px;position:relative;display:flex;flex-direction:column;gap:.375rem;overflow:hidden;border-radius:var(--lk-border-radius)}.lk-participant-tile::after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;border-radius:var(--lk-border-radius);border:0px solid var(--lk-accent-bg);transition-property:border opacity;transition-delay:.5s;transition-duration:.4s;pointer-events:none}.lk-participant-tile[data-lk-speaking=true]:not([data-lk-source=screen_share])::after{transition-delay:0s;transition-duration:.2s;border-width:var(--lk-speaking-indicator-width)}.lk-participant-tile .lk-focus-toggle-button{position:absolute;top:.25rem;right:.25rem;padding:.25rem;background-color:rgba(0,0,0,.5);border-radius:calc(var(--lk-border-radius)/2);opacity:0;transition:opacity .2s ease-in-out;transition-delay:.2s}.lk-participant-tile:hover .lk-focus-toggle-button,.lk-participant-tile:focus .lk-focus-toggle-button{opacity:1;transition-delay:0}.lk-participant-tile .lk-connection-quality{opacity:0;transition:opacity .2s ease-in-out;transition-delay:.2s}.lk-participant-tile .lk-connection-quality[data-lk-quality=poor]{opacity:1;transition-delay:0}.lk-participant-tile:hover .lk-connection-quality,.lk-participant-tile:focus .lk-connection-quality{opacity:1;transition-delay:0}.lk-participant-tile .lk-participant-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--lk-bg2);opacity:0;transition:opacity .2s ease-in-out;pointer-events:none;border-radius:var(--lk-border-radius)}.lk-participant-tile .lk-participant-placeholder svg{height:100%;width:auto;padding:10%}.lk-participant-tile[data-lk-video-muted=true][data-lk-source=camera] .lk-participant-placeholder{opacity:1}.lk-participant-metadata{position:absolute;right:.25rem;bottom:.25rem;left:.25rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;line-height:1}.lk-participant-metadata-item{display:flex;align-items:center;padding:.25rem;background-color:rgba(0,0,0,.5);border-radius:calc(var(--lk-border-radius)/2)}.lk-toast{position:fixed;top:.75rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background-color:var(--lk-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius);box-shadow:var(--lk-box-shadow)}.lk-spinner{animation:lk-rotate 2s infinite linear}@keyframes lk-rotate{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.lk-room-container{background-color:var(--lk-bg);line-height:var(--lk-line-height)}[data-lk-theme]{font-size:var(--lk-font-size);font-family:var(--lk-font-family);color:var(--lk-fg)}[data-lk-theme] .lk-list{list-style:none;margin:0;padding:0}[data-lk-theme] .lk-form-control{font-family:var(--lk-font-family);padding:.625rem 1rem;background-color:var(--lk-control-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius)}.lk-room-container{position:relative;width:100%;height:100%;--lk-has-imported-styles: "true"}.lk-room-container *[class^=lk-],.lk-room-container *[class*=" lk-"]{box-sizing:border-box}.lk-audio-conference{position:relative;width:100%;height:100%}.lk-audio-conference-stage{width:100%;height:100%;display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:10px;gap:10px}.lk-chat{display:grid;grid-template-rows:var(--lk-chat-header-height) 1fr var(--lk-control-bar-height);width:clamp(200px,55ch,60ch);background-color:var(--lk-bg2);border-left:1px solid var(--lk-border-color);align-items:end}.lk-chat-header{height:var(--lk-chat-header-height);padding:.75rem;position:relative;display:flex;align-items:center;justify-content:center}.lk-chat-header .lk-close-button{position:absolute;right:0;transform:translateX(-50%);background-color:rgba(0,0,0,0)}.lk-chat-header .lk-close-button:hover{background-color:var(--lk-control-active-hover-bg)}.lk-chat-messages{display:flex;width:100%;max-height:100%;flex-direction:column;gap:.25rem;overflow:auto}.lk-chat-entry{display:flex;flex-direction:column;gap:.25rem;margin:0 .25rem}.lk-chat-entry .lk-meta-data{font-size:.75rem;color:var(--lk-fg5);white-space:nowrap;padding:0 .3rem;display:flex}.lk-chat-entry .lk-meta-data .lk-participant-name{margin-top:1rem}.lk-chat-entry .lk-meta-data .lk-timestamp{margin-left:auto;align-self:flex-end}.lk-chat-entry .lk-edit-button{background:none;float:right;margin:0;padding:0 .25rem;border-radius:0;font-size:12px}.lk-chat-entry .lk-message-body{display:inline-block;border-radius:15px;padding:.25rem .75rem;word-break:break-word;width:-moz-fit-content;width:fit-content;max-width:calc(100% - 32px)}.lk-chat-entry[data-lk-message-origin=local] .lk-message-body{background-color:var(--lk-bg5)}.lk-chat-entry[data-lk-message-origin=remote] .lk-message-body{background-color:var(--lk-accent4)}.lk-chat-entry a{text-decoration:underline;color:inherit}.lk-chat-entry *{-webkit-margin-before:.25em;margin-block-start:.25em;-webkit-margin-after:.25em;margin-block-end:.25em}.lk-chat-entry:last-child{margin-bottom:.25rem}.lk-chat-form{display:flex;gap:.75rem;padding:.75rem;border-top:1px solid var(--lk-border-color);max-height:var(--lk-control-bar-height)}.lk-chat-form-input{font-size:inherit;line-height:inherit;width:100%}@media(max-width: 600px){.lk-chat{position:fixed;top:0;right:0;max-width:100%;bottom:var(--lk-control-bar-height)}}.lk-control-bar,.lk-agent-control-bar{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:.75rem;border-top:1px solid var(--lk-border-color);max-height:var(--lk-control-bar-height)}.lk-agent-control-bar{height:var(--lk-control-bar-height);--lk-bg: transparent;--lk-va-bar-width: 2px;--lk-va-bar-gap: 4px;--lk-va-bar-border-radius: 1px}.lk-agent-control-bar .lk-audio-bar-visualizer .lk-audio-bar.lk-highlighted{filter:none}.lk-prejoin{background-color:var(--lk-bg);line-height:var(--lk-line-height)}[data-lk-theme]{font-size:var(--lk-font-size);font-family:var(--lk-font-family);color:var(--lk-fg)}[data-lk-theme] .lk-list{list-style:none;margin:0;padding:0}[data-lk-theme] .lk-form-control{font-family:var(--lk-font-family);padding:.625rem 1rem;background-color:var(--lk-control-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius)}.lk-prejoin{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding:1rem;gap:1rem;margin-inline:auto;background-color:var(--lk-bg);width:min(100%,480px);align-items:stretch}.lk-prejoin .lk-video-container{position:relative;width:100%;height:auto;aspect-ratio:16/10;background-color:#000;border-radius:var(--lk-border-radius);overflow:hidden}.lk-prejoin .lk-video-container video,.lk-prejoin .lk-video-container .lk-camera-off-note{display:block;width:100%;height:100%;object-fit:cover}.lk-prejoin .lk-video-container video[data-lk-facing-mode=user]{transform:rotateY(180deg)}.lk-prejoin .lk-video-container .lk-camera-off-note{position:absolute;top:0px;left:0px;width:100%;aspect-ratio:16/10;background-color:#000;display:grid;place-items:center}.lk-prejoin .lk-video-container .lk-camera-off-note>*{height:70%;max-width:100%}.lk-prejoin .lk-audio-container{display:none}.lk-prejoin .lk-audio-container audio{width:100%;height:auto}.lk-prejoin .lk-button-group-container{display:flex;flex-wrap:nowrap;gap:1rem}.lk-prejoin .lk-button-group-container>.lk-button-group{width:50%}.lk-prejoin .lk-button-group-container>.lk-button-group>.lk-button{justify-content:left}.lk-prejoin .lk-button-group-container>.lk-button-group>.lk-button:first-child{width:100%}@media(max-width: 400px){.lk-prejoin .lk-button-group-container{flex-wrap:wrap}.lk-prejoin .lk-button-group-container>.lk-button-group{width:100%}}.lk-prejoin .lk-username-container{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:100%}.lk-prejoin .lk-join-button{--lk-control-fg: var(--lk-accent-fg);--lk-control-bg: var(--lk-accent-bg);--lk-control-hover-bg: var(--lk-accent2);--lk-control-active-bg: var(--lk-accent3);--lk-control-active-hover-bg: var(--lk-accent4);background-color:var(--lk-control-bg)}.lk-prejoin .lk-join-button:hover{background-color:var(--lk-control-hover-bg)}.lk-focus-layout-wrapper,.lk-grid-layout-wrapper{position:relative;display:flex;justify-content:center;width:100%;height:calc(100% - var(--lk-control-bar-height))}.lk-grid-layout-wrapper{flex-direction:column;align-items:center}.lk-focus-layout-wrapper{align-items:stretch}.lk-video-conference{position:relative;display:flex;align-items:stretch;height:100%}.lk-video-conference-inner{display:flex;flex-direction:column;align-items:stretch;width:100%}.lk-settings-menu-modal{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background:var(--lk-bg);padding:1rem;border-radius:var(--lk-border-radius);display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background-color:var(--lk-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius);box-shadow:var(--lk-box-shadow);min-width:50vw;min-height:50vh;max-width:100%;max-height:100%;overflow-y:auto}

/*# sourceMappingURL=index.css.map */
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./node_modules/@livekit/components-styles/dist/general/prefabs/index.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/
.lk-audio-conference{position:relative;width:100%;height:100%}.lk-audio-conference-stage{width:100%;height:100%;display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:10px;gap:10px}.lk-chat{display:grid;grid-template-rows:var(--lk-chat-header-height) 1fr var(--lk-control-bar-height);width:clamp(200px,55ch,60ch);background-color:var(--lk-bg2);border-left:1px solid var(--lk-border-color);align-items:end}.lk-chat-header{height:var(--lk-chat-header-height);padding:.75rem;position:relative;display:flex;align-items:center;justify-content:center}.lk-chat-header .lk-close-button{position:absolute;right:0;transform:translateX(-50%);background-color:rgba(0,0,0,0)}.lk-chat-header .lk-close-button:hover{background-color:var(--lk-control-active-hover-bg)}.lk-chat-messages{display:flex;width:100%;max-height:100%;flex-direction:column;gap:.25rem;overflow:auto}.lk-chat-entry{display:flex;flex-direction:column;gap:.25rem;margin:0 .25rem}.lk-chat-entry .lk-meta-data{font-size:.75rem;color:var(--lk-fg5);white-space:nowrap;padding:0 .3rem;display:flex}.lk-chat-entry .lk-meta-data .lk-participant-name{margin-top:1rem}.lk-chat-entry .lk-meta-data .lk-timestamp{margin-left:auto;align-self:flex-end}.lk-chat-entry .lk-edit-button{background:none;float:right;margin:0;padding:0 .25rem;border-radius:0;font-size:12px}.lk-chat-entry .lk-message-body{display:inline-block;border-radius:15px;padding:.25rem .75rem;word-break:break-word;width:-moz-fit-content;width:fit-content;max-width:calc(100% - 32px)}.lk-chat-entry[data-lk-message-origin=local] .lk-message-body{background-color:var(--lk-bg5)}.lk-chat-entry[data-lk-message-origin=remote] .lk-message-body{background-color:var(--lk-accent4)}.lk-chat-entry a{text-decoration:underline;color:inherit}.lk-chat-entry *{-webkit-margin-before:.25em;margin-block-start:.25em;-webkit-margin-after:.25em;margin-block-end:.25em}.lk-chat-entry:last-child{margin-bottom:.25rem}.lk-chat-form{display:flex;gap:.75rem;padding:.75rem;border-top:1px solid var(--lk-border-color);max-height:var(--lk-control-bar-height)}.lk-chat-form-input{font-size:inherit;line-height:inherit;width:100%}@media(max-width: 600px){.lk-chat{position:fixed;top:0;right:0;max-width:100%;bottom:var(--lk-control-bar-height)}}.lk-control-bar,.lk-agent-control-bar{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:.75rem;border-top:1px solid var(--lk-border-color);max-height:var(--lk-control-bar-height)}.lk-agent-control-bar{height:var(--lk-control-bar-height);--lk-bg: transparent;--lk-va-bar-width: 2px;--lk-va-bar-gap: 4px;--lk-va-bar-border-radius: 1px}.lk-agent-control-bar .lk-audio-bar-visualizer .lk-audio-bar.lk-highlighted{filter:none}.lk-prejoin{background-color:var(--lk-bg);line-height:var(--lk-line-height)}[data-lk-theme]{font-size:var(--lk-font-size);font-family:var(--lk-font-family);color:var(--lk-fg)}[data-lk-theme] .lk-list{list-style:none;margin:0;padding:0}[data-lk-theme] .lk-form-control{font-family:var(--lk-font-family);padding:.625rem 1rem;background-color:var(--lk-control-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius)}.lk-prejoin{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding:1rem;gap:1rem;margin-inline:auto;background-color:var(--lk-bg);width:min(100%,480px);align-items:stretch}.lk-prejoin .lk-video-container{position:relative;width:100%;height:auto;aspect-ratio:16/10;background-color:#000;border-radius:var(--lk-border-radius);overflow:hidden}.lk-prejoin .lk-video-container video,.lk-prejoin .lk-video-container .lk-camera-off-note{display:block;width:100%;height:100%;object-fit:cover}.lk-prejoin .lk-video-container video[data-lk-facing-mode=user]{transform:rotateY(180deg)}.lk-prejoin .lk-video-container .lk-camera-off-note{position:absolute;top:0px;left:0px;width:100%;aspect-ratio:16/10;background-color:#000;display:grid;place-items:center}.lk-prejoin .lk-video-container .lk-camera-off-note>*{height:70%;max-width:100%}.lk-prejoin .lk-audio-container{display:none}.lk-prejoin .lk-audio-container audio{width:100%;height:auto}.lk-prejoin .lk-button-group-container{display:flex;flex-wrap:nowrap;gap:1rem}.lk-prejoin .lk-button-group-container>.lk-button-group{width:50%}.lk-prejoin .lk-button-group-container>.lk-button-group>.lk-button{justify-content:left}.lk-prejoin .lk-button-group-container>.lk-button-group>.lk-button:first-child{width:100%}@media(max-width: 400px){.lk-prejoin .lk-button-group-container{flex-wrap:wrap}.lk-prejoin .lk-button-group-container>.lk-button-group{width:100%}}.lk-prejoin .lk-username-container{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:100%}.lk-prejoin .lk-join-button{--lk-control-fg: var(--lk-accent-fg);--lk-control-bg: var(--lk-accent-bg);--lk-control-hover-bg: var(--lk-accent2);--lk-control-active-bg: var(--lk-accent3);--lk-control-active-hover-bg: var(--lk-accent4);background-color:var(--lk-control-bg)}.lk-prejoin .lk-join-button:hover{background-color:var(--lk-control-hover-bg)}.lk-focus-layout-wrapper,.lk-grid-layout-wrapper{position:relative;display:flex;justify-content:center;width:100%;height:calc(100% - var(--lk-control-bar-height))}.lk-grid-layout-wrapper{flex-direction:column;align-items:center}.lk-focus-layout-wrapper{align-items:stretch}.lk-video-conference{position:relative;display:flex;align-items:stretch;height:100%}.lk-video-conference-inner{display:flex;flex-direction:column;align-items:stretch;width:100%}.lk-settings-menu-modal{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background:var(--lk-bg);padding:1rem;border-radius:var(--lk-border-radius);display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background-color:var(--lk-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius);box-shadow:var(--lk-box-shadow);min-width:50vw;min-height:50vh;max-width:100%;max-height:100%;overflow-y:auto}

/*# sourceMappingURL=index.css.map */