@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

.custom-control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* Added for Safari compatibility */
}

.room-name-box {
  background: rgba(144, 155, 170, 0.1);
  border-radius: 8px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.room-name {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #909baa;
}

.copy-link-button {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 5px;
  padding: 0;
}

.copy-link-button .material-symbols-outlined {
  font-size: 20px;
  color: #909baa;
}

.control-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-grow: 1;
}

.control-button {
  width: 40px;
  height: 40px;
  background: rgba(144, 155, 170, 0.1);
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Status Disabled */
.material-symbols-outlined[button-state='inactive'] {
  color: #ed7473;
}

/* Mic button */
.mic-button[data-lk-audio-enabled='false'] {
  background: rgba(255, 82, 82, 0.2);
}

.mic-button[data-lk-audio-enabled='true'] .material-symbols-outlined {
  color: #ffffff;
}

.mic-button[data-lk-audio-enabled='false'] .material-symbols-outlined {
  color: #ff6f6f;
}

/* Camera btn */
.camera-button[data-lk-video-enabled='false'] {
  background: rgba(255, 82, 82, 0.2);
}

.camera-button[data-lk-video-enabled='true'] .material-symbols-outlined {
  color: #ffffff;
}

.camera-button[data-lk-video-enabled='false'] .material-symbols-outlined {
  color: #ff6f6f;
}

/* Screen share btn */
.screen-share-button[data-lk-screen-share-enabled='true'] .material-symbols-outlined {
  color: #49c998;
}

.screen-share-button[data-lk-screen-share-enabled='false'] .material-symbols-outlined {
  color: #ffffff;
}

/* Record */
.record-sign .material-symbols-outlined {
  color: #ff6f6f;
  animation: pulse 1.5s infinite;
}

.record-sign.disabled .material-symbols-outlined {
  color: #ffffff;
  animation: none;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

/* End call */
.end-call-button {
  width: 5rem;
  height: 2.4rem;
  background: #ff5252;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.end-call-button .material-symbols-outlined {
  color: #ffffff;
}

.top-right-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.participant-box {
  background-color: rgba(144, 155, 170, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  gap: 8px;
}

.participant-box .material-symbols-outlined {
  font-size: 20px;
  color: white;
}

.participant-count {
  font-size: 16px;
  font-weight: 500;
  color: white;
  font-family: 'Roboto', sans-serif;
}

.settings-box {
  background-color: rgba(144, 155, 170, 0.1);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.settings-box .material-symbols-outlined {
  font-size: 20px;
  color: white;
}

/* Fix for video layout */
.lk-grid-layout {
  height: calc(100vh - 60px) !important;
}