/* Indigo design system — classic Licode call screen (mirrors agora-call callview tokens) */

:root {
  --hype-stage: radial-gradient(130% 100% at 50% 0%, #2a2860, #16142f 70%);
  --hype-topbar: linear-gradient(90deg, rgba(67, 56, 202, 0.92), rgba(99, 102, 241, 0.92));
  --hype-tile-bg: #1c1a3a;
  --hype-modal: linear-gradient(180deg, #262357, #1a1838);
  --hype-modal-border: rgba(129, 140, 248, 0.22);
  --hype-input: rgba(255, 255, 255, 0.05);
  --hype-accent: #818cf8;
  --hype-accent-strong: #6366f1;
  --hype-accent-soft: rgba(129, 140, 248, 0.18);
  --hype-btn: linear-gradient(135deg, #4f46e5, #6366f1);
  --hype-text: #fff;
  --hype-muted: #9aa0c8;
  --hype-faint: #6f74a0;
  --hype-link: #a5b4fc;
  --hype-glass: rgba(20, 18, 40, 0.72);
  --hype-ok: #34d399;
  --hype-danger: #e11d48;
  --hype-danger-2: #f43f5e;
  --hype-shadow-lg: rgba(22, 16, 36, 0.5);
  --hype-font: 'Figtree', system-ui, sans-serif;
}

/* ── Invite landing interstitial (guest.html, shown until the SPA guest page paints) ── */
#initialLoadingScreen {
  background: var(--hype-stage) !important;
}

#initialLoadingScreen .hype-initial-loader {
  width: 40px;
  height: 40px;
  border: 3px solid var(--hype-accent-soft);
  border-top-color: var(--hype-accent-strong);
  border-radius: 50%;
  animation: hype-initial-loader-spin 0.75s linear infinite;
}

@keyframes hype-initial-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Top bar ── */
#callview-navbar,
#callview-navbar.navbar,
#callview-navbar.top-nav-bar,
.top-nav-bar,
nav#callview-navbar {
  background: var(--hype-topbar) !important;
  background-image: var(--hype-topbar) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--hype-text) !important;
  font-family: var(--hype-font);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

#callview-navbar a,
#callview-navbar .callview-text-navbar,
#callview-navbar .navbar-left-items,
#callview-navbar span,
#callview-navbar .recording-dropdown,
.callview-li {
  color: var(--hype-text) !important;
}

#callview-navbar .callview-li:hover,
#callview-navbar .callview-icon-btn:hover,
#callview-navbar li:hover > a,
#callview-navbar .barIcon:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

#callview-navbar .dropdown-menu,
#callview-navbar .recordingListCallViewTopBar {
  background: linear-gradient(180deg, #2a2860, #1e1c42) !important;
  border: 1px solid var(--hype-modal-border) !important;
  border-radius: 12px !important;
  color: var(--hype-text) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45) !important;
}

#callview-navbar .dropdown-menu > li > a,
#callview-navbar .dropdown-menu span,
#callview-navbar .local-recording-text,
#callview-navbar .local-section-header {
  color: var(--hype-muted) !important;
}

#callview-navbar .dropdown-menu > li > a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--hype-text) !important;
}

.callview-hype-gradient-right {
  background: transparent !important;
}

/* ── Stage / video area ── */
#licodeDiv {
  background: var(--hype-stage) !important;
}

#licodeVideosDiv,
#licodeVideosDivFullScreen {
  background: transparent !important;
}

#noParticipantSpan,
.no-participant-span,
#noParticipantDiv {
  color: var(--hype-muted) !important;
  font-family: var(--hype-font);
}

/* Tile name bars */
[id^="subbarStream_"],
[id^="subbar_"],
.callViewUserNameContainer {
  background: rgba(20, 18, 40, 0.72) !important;
  border-bottom: 1px solid rgba(129, 140, 248, 0.12);
}

.caller-id,
.callViewUserNameContainer .caller-id,
.vadTalkingLbl {
  color: var(--hype-text) !important;
  font-family: var(--hype-font);
}

/* ── Bottom control dock (legacy Licode only — not React .agora-call-controls) ── */
#licodeCallControlPanel.licode-call-controls {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  float: none !important;
  width: fit-content !important;
  max-width: fit-content !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 6px 22px 28px !important;
  background: var(--hype-glass) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 14px 40px var(--hype-shadow-lg) !important;
  color: var(--hype-text);
  box-sizing: border-box !important;
}

#licodeCallControlPanel.licode-call-controls .toDoIcons-check {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  width: fit-content !important;
  max-width: fit-content !important;
  height: auto !important;
  float: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#licodeCallControlPanel.licode-call-controls .one-icon-licode,
#licodeCallControlPanel.licode-call-controls .toDoIcons-check .col-sm-2,
#licodeCallControlPanel.licode-call-controls .toDoIcons-check > div {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 52px !important;
  max-width: 96px !important;
  flex: 0 1 auto !important;
  float: none !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Legacy sprites: label sits inside .callviewControls — anchor below the chip */
#licodeCallControlPanel.licode-call-controls .callviewControls {
  position: relative !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
  line-height: 0 !important;
}

#licodeCallControlPanel.licode-call-controls .padding-top-30,
#licodeCallControlPanel.licode-call-controls .control-label,
#licodeCallControlPanel.licode-call-controls .toDoIcons-check .padding-top-30 {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: 80px !important;
  min-width: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 6px 0 0 !important;
  color: #c7cae6 !important;
  font-family: var(--hype-font);
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Kill legacy main.css margin-left: 26–35% on .licode-call-controls */
@media (min-width: 768px) {
  #licodeCallControlPanel.licode-call-controls {
    margin-left: 0 !important;
    width: fit-content !important;
  }
}

@media (min-width: 992px) {
  #licodeCallControlPanel.licode-call-controls {
    margin-left: 0 !important;
    width: fit-content !important;
  }
}

@media (min-width: 1200px) {
  #licodeCallControlPanel.licode-call-controls {
    margin-left: 0 !important;
    width: fit-content !important;
  }
}

@media (min-width: 2550px) {
  #licodeCallControlPanel.licode-call-controls {
    margin-left: 0 !important;
    width: fit-content !important;
  }
}

/* Beat RTL legacy label nudges so icons stay centered under chips */
.languageRTL #licodeCallControlPanel.licode-call-controls .padding-top-30,
.languageRTL #licodeCallControlPanel.licode-call-controls #muteAllStreams .padding-top-30,
.languageRTL #licodeCallControlPanel.licode-call-controls #muteAllStreams .translation_callViewBottomBarMute {
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
}

#licodeCallControlPanel.licode-call-controls .callHangup:hover {
  filter: brightness(1.1);
}

#licodeCallControlPanel.licode-call-controls .tooltip-inner {
  background: linear-gradient(180deg, #2a2860, #1e1c42) !important;
  color: var(--hype-text) !important;
  border: 1px solid var(--hype-modal-border);
  font-family: var(--hype-font);
}

/* ── Page controller / greens → indigo ── */
.background-green,
#licodePageController.background-green,
#licodePageController {
  background-color: var(--hype-accent-strong) !important;
  background: var(--hype-btn) !important;
  color: var(--hype-text) !important;
}

.background-blue {
  background-color: #312e81 !important;
}

/* ── Side rail (call actions) ── */
#callview_side_menu.side-menu,
.side-menu#callview_side_menu {
  background: linear-gradient(180deg, rgba(40, 37, 82, 0.96), rgba(22, 20, 48, 0.98)) !important;
  border: 1px solid var(--hype-modal-border);
  color: var(--hype-text);
}

#callview_side_menu .call-action-span,
#callview_side_menu .sidebar-list-items {
  color: var(--hype-muted) !important;
  font-family: var(--hype-font);
}

#right-menu-callview {
  background: linear-gradient(180deg, rgba(40, 37, 82, 0.96), rgba(22, 20, 48, 0.98)) !important;
  border: 1px solid var(--hype-modal-border);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

/* ── In-call chat chrome hooks (panel itself themed by chat-panel-indigo) ── */
.chat-panel-full-callview {
  border-color: var(--hype-modal-border) !important;
}

/* ── Legacy green accents in call chrome ── */
#callview-navbar .glyphicon-triangle-top,
#callview-navbar .recording-icon {
  color: var(--hype-accent) !important;
}

/* Meeting / status text in top bar */
#callview-navbar #callview_meeting_id,
#callview-navbar .callview-meeting-title,
#callview-navbar .callview-duration {
  color: var(--hype-text) !important;
}

/* Guest join / fill shells that reuse classic teal while call chrome is up */
#callview-navbar ~ #licodeDiv,
body.in-call #licodeDiv {
  background: var(--hype-stage) !important;
}

/* Mobile / compact tweaks — keep indigo top bar */
@media (max-width: 767px) {
  #callview-navbar,
  .top-nav-bar {
    background: var(--hype-topbar) !important;
    background-image: var(--hype-topbar) !important;
  }
}

/* RTL: keep indigo colors; layout handled by lang-right.css */
.languageRTL #callview-navbar,
.languageRTL .top-nav-bar {
  background: var(--hype-topbar) !important;
  background-image: var(--hype-topbar) !important;
}

.languageRTL #licodeCallControlPanel.licode-call-controls {
  background: var(--hype-glass) !important;
}

/* Mobile call side rail */
.nav-bar-for-mob {
  /* background: linear-gradient(180deg, rgba(67, 56, 202, 0.95), rgba(30, 27, 75, 0.98)) !important; */
  border-right: 1px solid var(--hype-modal-border);
}

/* PTT / secondary call chrome */
#ptt_Action,
.ptt-action {
  background: var(--hype-btn) !important;
  color: var(--hype-text) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
}

/* Hide Poll / YouTube / Transcript from Licode call chrome (removed from DOM; keep rule for stale caches) */
#callview-navbar #createNewPoll,
#callview-navbar #urlStreamBtn,
#callview-navbar #transScriptButton,
#sideMenu #createNewPoll,
#sideMenu #urlStreamBtn,
#sideMenu #transScriptButton,
.nav-bar-for-mob #createNewPoll,
.nav-bar-for-mob #urlStreamBtn,
.nav-bar-for-mob #transScriptButton,
#licodeCallControlPanel #enableMeetingTranscript {
  display: none !important;
}

/* Hide VAD / Hold / Record from legacy call control bar (Mute kept visible) */
#licodeCallControlPanel.licode-call-controls #vadDiv,
#licodeCallControlPanel.licode-call-controls #callHoldButton,
#licodeCallControlPanel.licode-call-controls #licodeRecordingIcon {
  display: none !important;
}

/* Drop legacy mic cell padding so the compact dock stays even */
#licodeCallControlPanel.licode-call-controls #localAudioOff {
  padding-right: 0 !important;
}

/* Nudge mic device caret slightly right of the mic icon */
#licodeCallControlPanel.licode-call-controls #micDropdownCallView {
  left: 40px;
}

#licodeCallControlPanel.licode-call-controls .mic-arrow-icon {
  margin-left: 30px;
}

/* ── Call-view dropdowns / popovers / modals (white text on purple) ── */
#callview-navbar .dropdown-menu,
#callview-navbar .meeting-info-dropdown,
#sideMenu .dropdown-menu,
#licodeCallControlPanel.licode-call-controls .dropdown-menu,
#micDropdownCallView .dropdown-menu,
.licode-video-dropdown-menu .dropdown-menu,
.localVideoPublishingOptDropdown,
.remoteStreamDropdown,
#settingsDropdown,
#changeRLDropdown,
.dropDownMoreButtonNavBar,
.callinvite-raisehand-container,
.cam-device-error-help-dropdown-menu {
  background: var(--hype-modal) !important;
  background-color: #1e1c42 !important;
  border: 1px solid var(--hype-modal-border) !important;
  color: var(--hype-text) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45) !important;
}

#callview-navbar .dropdown-menu,
#callview-navbar .dropdown-menu li,
#callview-navbar .dropdown-menu a,
#callview-navbar .dropdown-menu span,
#callview-navbar .dropdown-menu p,
#callview-navbar .dropdown-menu h5,
#callview-navbar .dropdown-menu div,
#callview-navbar .dropdown-menu .list-group-item-heading,
#callview-navbar .dropdown-menu .user-name-main,
#callview-navbar .dropdown-menu .galleryViewTxt,
#callview-navbar .dropdown-menu .changeLayoutClass,
#callview-navbar .dropdown-menu .more-meeting-navbar-button-text,
#callview-navbar .dropdown-menu .fitting-button-text,
.licode-video-dropdown-menu .dropdown-menu,
.licode-video-dropdown-menu .dropdown-menu li,
.licode-video-dropdown-menu .dropdown-menu span,
.licode-video-dropdown-menu .dropdown-menu a,
.localVideoPublishingOptDropdown li,
.localVideoPublishingOptDropdown span,
.remoteStreamDropdown li,
.remoteStreamDropdown span,
.streamDropdownLi,
.fitting-button-text,
.localVideoFitingLbl,
.more-meeting-navbar-button-text {
  color: var(--hype-text) !important;
}

#callview-navbar .dropdown-menu > li > a:hover,
#callview-navbar .dropdown-menu li:hover,
.licode-video-dropdown-menu .dropdown-menu > li:hover,
.localVideoPublishingOptDropdown > li:hover,
.remoteStreamDropdown > li:hover,
.streamDropdownLi:hover,
.dropDownMoreButtonNavBar > li:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--hype-text) !important;
}

#callview-navbar .dropdown-menu .list-group-item,
#callview-navbar .meeting-info-dropdown .list-group-item,
#userJoinedInfoList .list-group-item,
.callInvitePopOverDiv .list-group-item,
.raiseHandPopDownList .list-group-item,
.raiseHandListDivGuestNormal .raiseHandPopDownList {
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--hype-text) !important;
}

/* Participant dropdown inner panels were still #f7f7f7 / #fff and hid the purple shell */
#liItemMeetingInfo .meeting-info-dropdown,
#liItemMeetingInfo .meeting-info-dropdown-title,
#liItemMeetingInfo .meeting-info-dropdown-title.popover-title,
#liItemMeetingInfo .meeting-info-dropdown-callinvite,
#liItemMeetingInfo .meeting-info-dropdown-raisehand,
#liItemMeetingInfo .callInvitePopOverDiv,
#liItemMeetingInfo .list-group,
#liItemMeetingInfo .list-group-item,
#liItemMeetingInfo .raiseHandInit,
#liItemMeetingInfo .no-joined-member-li,
#allParticipantInfoList,
#allParticipantInfoListSpecial,
.raiseHandPopDownList,
.raiseHandPopDownListSpecialRoom {
  background: #1e1c42 !important;
  background-color: #1e1c42 !important;
  background-image: none !important;
  color: var(--hype-text) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

#userJoinedInfoList .list-group-item-heading,
#userJoinedInfoList .user-name-main,
#userJoinedInfoList .user-name-main span,
#userJoinedInfoList .meetingInfoListMessage,
.callInvitePopOverDiv,
.meeting-info-dropdown-title,
.meeting-info-dropdown-title.popover-title,
.meeting-info-dropdown-callinvite,
.meetingInfoListMessage {
  background: transparent !important;
  color: var(--hype-text) !important;
}

#userJoinedInfoList .meetingInfoListMessage,
#userJoinedInfoList .user-alt-name,
#userJoinedInfoList .user-sub-name,
#userJoinedInfoList .participantAliasName {
  color: var(--hype-muted) !important;
}

.callinvite-raisehanddropdown-arrowhead,
.callinvite-raisehanddropdown-arrowhead i,
.more-button-nav-bar-dropdown-arrowhead,
.more-button-nav-bar-dropdown-arrowhead i,
.guru-dropdown-top-icon,
.guru-dropdown-top-icon i {
  color: #262357 !important;
}

#settingsDropdown.dropdown-menu:after,
ul#settingsDropdown:after {
  border-bottom-color: #262357 !important;
}

.meeting-info-dropdown-raisehand {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}

/* Participant popover (legacy bootstrap popover, if still used) */
.popover,
.popover-title,
.popover-content,
.callInvitePopOverDiv {
  background: var(--hype-modal) !important;
  background-color: #1e1c42 !important;
  color: var(--hype-text) !important;
  border-color: var(--hype-modal-border) !important;
}

.popover.bottom > .arrow:after,
.popover > .arrow:after {
  border-bottom-color: #262357 !important;
  border-top-color: #262357 !important;
}

/* Bootstrap / alert modals on the Licode call page */
.modal-content {
  background: var(--hype-modal) !important;
  background-color: #1e1c42 !important;
  border: 1px solid var(--hype-modal-border) !important;
  border-radius: 14px !important;
  color: var(--hype-text) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55) !important;
}

.modal-header,
.modal-footer {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  color: var(--hype-text) !important;
}

.modal-title,
.modal-body,
.modal-body label,
.modal-body b,
.modal-body span,
.modal-body p,
.modal-body td,
.modal-body h4,
.modal-body h5,
.modal-body strong {
  color: var(--hype-text) !important;
}

.modal-content .close,
.modal-header .close {
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.modal-content .close:hover,
.modal-header .close:hover {
  color: #fff !important;
}

.modal-body .form-control,
.modal-body select.form-control,
#devicePreferenceSettingsModal select.form-control,
#devicePreferenceSettingsModal .form-control {
  background: var(--hype-input) !important;
  background-color: rgba(30, 28, 66, 0.95) !important;
  border: 1px solid rgba(129, 140, 248, 0.28) !important;
  color: var(--hype-text) !important;
  border-radius: 10px !important;
}

.modal-body .form-control:focus,
#devicePreferenceSettingsModal select.form-control:focus {
  border-color: var(--hype-accent) !important;
  box-shadow: 0 0 0 3px var(--hype-accent-soft) !important;
}

.modal-body select.form-control option,
#devicePreferenceSettingsModal select option {
  background: #1e1c42;
  color: #fff;
}

#devicePreferenceSettingsModal .modal-content {
  background: var(--hype-modal) !important;
  color: var(--hype-text) !important;
}

#devicePreferenceSettingsModal .modal-header .modal-title,
#devicePreferenceSettingsModal label,
#devicePreferenceSettingsModal .micMsgLbl {
  color: var(--hype-text) !important;
}

#devicePreferenceSettingsModal .checkMicIcon {
  color: var(--hype-accent) !important;
}

/* Unable-to-join / media-error alert modal */
.hype-alert-modal .modal-content {
  background: var(--hype-modal) !important;
  color: var(--hype-text) !important;
}

.hype-alert-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.hype-alert-message,
.hype-alert-modal-title,
.hype-alert-details-value {
  color: var(--hype-text) !important;
}

.hype-alert-details-key,
.hype-alert-details .panel-heading,
.hype-alert-details .panel-heading strong {
  color: var(--hype-muted) !important;
}

.hype-alert-details {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.hype-alert-details .panel-heading {
  background: rgba(255, 255, 255, 0.06) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.hype-alert-details-table td {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.hype-alert-ok-btn,
#btnDevicePreferenceSetting {
  color: #fff !important;
}