/* Moderate Politics — Jitsi inner theme (Figma-aligned overrides for all.css)
 * Deploy: scp to /opt/jitsi/css/moderate-theme.css and bump ?v= in index.html
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');

:root {
  --mp-bg: #000000;
  --mp-purple: #741975;
  --mp-purple-deep: #741975;
  --mp-name-bg: rgba(116, 25, 117, 0.9);
  --mp-host-border: #741975;
  --mp-toolbox-gradient: linear-gradient(
    90deg,
    #00aef3 0%,
    #751975 40%,
    #751975 60%,
    #e91d2e 100%
  );
  --mp-toolbox-radius: 10px;
  /* Space reserved under Meet layout for the floating action bar */
  --mp-toolbox-space: 100px;
  --mp-toolbox-bottom-gap: 12px;
  --mp-hangup: #e11d2e;
  --mp-hangup-hover: #f04352;
  --mp-muted: #6b4dff;
  --mp-tile-radius: 14px;
  /* Side panels (chat + participants) — softer than tiles */
  --mp-pane-radius: 8px;
  /* Inset from filmstrip top so rounded corners + top controls aren't clipped */
  --mp-tile-top-inset: 12px;
  --mp-videocontainer-margin: 2px;
  /* Participants pane — match #localVideoContainer outer box (not toolbox layout reserve) */
  --mp-pane-top-gap: calc(var(--mp-tile-top-inset) + var(--mp-videocontainer-margin));
  --mp-pane-bottom-gap: calc(var(--mp-videocontainer-margin) * 2);
  --mp-pane-side-gap: 8px;
}

/* -------------------------------------------------------------------------- */
/* Stage / prejoin                                                            */
/* -------------------------------------------------------------------------- */

body,
#videoconferenceContainer,
#videospace,
#largeVideoContainer,
.videocontainer,
.premeeting-screen,
.premeeting-screen .content {
  background: var(--mp-bg) !important;
}

.premeeting-screen {
  background: var(--mp-bg) !important;
}

.premeeting-screen .content {
  background: transparent !important;
}

/* Hide leftover Jitsi branding / home orb */
.leftwatermark,
.rightwatermark,
.watermark,
.welcome .header,
#new-watermark,
.poweredby {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* In-iframe conference header — outer React header already shows room/host */
div[class*="subject"],
.subject-info-container,
.subject-text,
.details-container {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Tile view — Figma: photo fills rounded rectangle (not circle on gray)      */
/* -------------------------------------------------------------------------- */

.tile-view .videocontainer,
.tile-view .filmstrip__videos .videocontainer {
  border-radius: var(--mp-tile-radius) !important;
  /* visible so top hover controls (connection + …) are not clipped on resize */
  overflow: visible !important;
  border: 2px solid transparent !important;
  box-shadow: none !important;
  background: #0a0a0a !important;
}

/* Rounded clip on media only — not on the tile chrome (top indicators) */
/* Rounded clip on media only — not on the tile chrome (top indicators) */
.tile-view .videocontainer video,
.tile-view .videocontainer .avatar-container,
.tile-view .videocontainer [class*="containerBackground"] {
  border-radius: calc(var(--mp-tile-radius) - 2px) !important;
  overflow: hidden !important;
}

/*
 * Default participant avatar (no upload) — purple #741975, not Jitsi blue IconUser.
 * Complements dynamicBranding IconUser + avatarUrl from getJitsiAvatarUrl().
 */
.videocontainer .avatar-container .avatar,
.videocontainer .userAvatar,
#videoNotAvailableScreen #avatarContainer .avatar,
.participants_pane .avatar,
.participants-pane .avatar,
.participants_pane-content .avatar,
[class*="participantsPane"] .avatar {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.videocontainer .avatar-container .avatar .jitsi-icon svg,
.videocontainer .avatar-container .avatar .jitsi-icon-default svg,
.videocontainer .userAvatar,
.participants_pane .avatar .jitsi-icon svg,
.participants_pane .avatar .jitsi-icon-default svg,
.participants-pane .avatar .jitsi-icon svg,
.participants_pane-content .avatar .jitsi-icon svg,
[class*="participantsPane"] .avatar .jitsi-icon svg,
[class*="participantsPane"] .avatar .jitsi-icon-default svg,
#videoNotAvailableScreen #avatarContainer .avatar .jitsi-icon svg {
  fill: #741975 !important;
  color: #741975 !important;
}

.videocontainer .avatar-container .avatar img,
.participants_pane .avatar img,
.participants_pane-content .avatar img {
  object-fit: contain !important;
}

/* Host / local highlight — purple border (moderator or local self) */
.tile-view .videocontainer.local,
.tile-view .videocontainer.moderator,
.tile-view .videocontainer.videoContainerFocused,
.tile-view .videocontainer.active-speaker {
  border-color: var(--mp-host-border) !important;
}

/* Keep names always visible — purple pill, bottom-left */
.videocontainer .displayname,
.videocontainer .editdisplayname,
.displayNameContainer,
.displayname {
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  left: 10px !important;
  bottom: 10px !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
  max-width: calc(100% - 72px) !important;
  padding: 5px 10px !important;
  margin: 0 !important;
  border-radius: 5px !important;
  background: var(--mp-name-bg) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  color: #ffffff !important;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 25px !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: none !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  z-index: 3 !important;
}

.display-video .displayNameContainer,
.display-name-on-video .avatar-container,
.display-avatar-only .displayNameContainer {
  visibility: visible !important;
}

/* Status indicators — bottom-right circular mute/cam chips (not top connection/menu) */
.videocontainer .indicators,
.tile-view .videocontainer .indicators {
  top: auto !important;
  bottom: 8px !important;
  right: 8px !important;
  left: auto !important;
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}

/* Top tile hover controls — connection (green) + remote menu (blue) */
.videocontainer [class*="indicatorsTopContainer"],
.videocontainer [class*="indicatorsContainer"][class*="tile-view"],
.videocontainer .top-indicators {
  top: 8px !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
  z-index: 12 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.videocontainer [class*="indicatorsTopContainer"] > *,
.videocontainer [class*="indicatorsTopContainer"] button {
  opacity: 1 !important;
  visibility: visible !important;
}

.videocontainer .indicators > span,
.videocontainer .indicators .audio-muted,
.videocontainer .indicators .video-muted,
.videocontainer .toolbar-icon,
.videocontainer .connection-indicator {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

.videocontainer .indicators .audio-muted,
.videocontainer .indicators .video-muted,
.videocontainer .audioMuted,
.videocontainer .videoMuted {
  background: var(--mp-muted) !important;
  color: #fff !important;
}

/* Dominant-speaker / focus ring off when not tile-host treatment */
.videocontainer:not(.local):not(.moderator):hover {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* -------------------------------------------------------------------------- */
/* Keep tiles above toolbox — shrink the CARD (.videocontainer)               */
/* Meet sets tile height via JS inline styles; override with !important.      */
/* -------------------------------------------------------------------------- */

#videoconference_page.tile-view {
  position: relative !important;
  height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: var(--mp-bg) !important;
}

#videoconference_page.tile-view #videoconferenceContainer,
.tile-view #videoconferenceContainer,
#videoconference_page.tile-view #videospace,
.tile-view #videospace,
#videoconference_page.tile-view .filmstrip__videos,
.tile-view .filmstrip__videos {
  overflow: visible !important;
}

#videoconference_page:not(.tile-view) {
  height: 100% !important;
  box-sizing: border-box !important;
  background: var(--mp-bg) !important;
}

/* Filmstrip stops above the action bar — top-align grid (Meet defaults to center) */
#videoconference_page.tile-view .filmstrip,
.tile-view .filmstrip,
.tile-view .filmstrip[class*="jss"] {
  height: calc(100% - var(--mp-toolbox-space)) !important;
  max-height: calc(100% - var(--mp-toolbox-space)) !important;
  top: 0 !important;
  bottom: auto !important;
  padding-top: var(--mp-tile-top-inset) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

#videoconference_page.tile-view .filmstrip #remoteVideos,
.tile-view #remoteVideos,
.tile-view #filmstripLocalVideo,
.tile-view .filmstrip__videos.remote-videos {
  height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* react-window FixedSizeGrid sets inline overflow:auto — override on grid wrapper */
.tile-view #remoteVideos div[style*="will-change"],
.tile-view .remote-videos div[style*="will-change"],
.tile-view .filmstrip__videos.remote-videos[style*="overflow"] {
  overflow: visible !important;
}

.tile-view .remote-videos,
.tile-view .filmstrip.collapse .remote-videos {
  overflow: visible !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Top-align tile rows inside the grid */
.tile-view .remote-videos > div,
#videoconference_page.tile-view #remoteVideos > div {
  align-items: flex-start !important;
  align-content: flex-start !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Gray card — cap height with vh (parent % often ineffective vs JS inline height) */
#videoconference_page.tile-view .videocontainer,
.tile-view .filmstrip .videocontainer,
.tile-view #localVideoContainer,
.tile-view .videocontainer[style] {
  max-height: calc(100vh - var(--mp-toolbox-space) - var(--mp-tile-top-inset) - 16px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Non–tile-view stage */
#videoconference_page:not(.tile-view) #largeVideoContainer,
#videoconference_page:not(.tile-view) #videospace {
  max-height: calc(100% - var(--mp-toolbox-space)) !important;
  box-sizing: border-box !important;
}

/* -------------------------------------------------------------------------- */
/* Bottom toolbox — below the shortened card                                  */
/* -------------------------------------------------------------------------- */

.new-toolbox,
.new-toolbox.visible {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 250 !important;
}

.new-toolbox .toolbox-content {
  margin-bottom: var(--mp-toolbox-bottom-gap) !important;
}

.new-toolbox .toolbox-content-wrapper,
.toolbox-content .toolbox-content-wrapper {
  background: transparent !important;
  border-radius: var(--mp-toolbox-radius) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.new-toolbox .toolbox-content-items,
.toolbox-content-items {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 8px 14px !important;
  border-radius: var(--mp-toolbox-radius) !important;
  background: var(--mp-toolbox-gradient) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
  border: none !important;
}

/* Default toolbox icon buttons */
.new-toolbox .toolbox-icon,
.toolbox-content-items .toolbox-icon,
.toolbox-content-items button {
  background: transparent !important;
  border-radius: 50% !important;
  color: #fff !important;
}

.new-toolbox .toolbox-icon:hover,
.toolbox-content-items .toolbox-icon:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

.new-toolbox .toolbox-icon.toggled,
.toolbox-content-items .toolbox-icon.toggled {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Hangup — large red circle (approximate Figma center treatment) */
.new-toolbox .hangup-button,
.new-toolbox .toolbox-button-wth-dialog.hangup-button,
.hangup-button .toolbox-icon,
button[aria-label*="Leave"],
button[aria-label*="hang"],
.toolbox-content-items .hangup-button .toolbox-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 50% !important;
  background: var(--mp-hangup) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(225, 29, 46, 0.55) !important;
}

.new-toolbox .hangup-button:hover .toolbox-icon,
.hangup-button .toolbox-icon:hover,
button[aria-label*="Leave"]:hover {
  background: var(--mp-hangup-hover) !important;
}

/* Try to pull hangup toward center when flex order is available */
.toolbox-content-items .hangup-button,
.toolbox-content-items .toolbox-button-wth-dialog.hangup-button {
  order: 0;
  margin: 0 6px !important;
}

/* Raise-hand etc. already removed via toolbarButtons; hide if still present */
.raisehand-button,
button[aria-label*="Raise your hand"] {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Filmstrip thumbnail (non–tile-view) — quieter                              */
/* -------------------------------------------------------------------------- */

.vertical-filmstrip .filmstrip,
.filmstrip__videos {
  background: transparent !important;
}

/* Non–tile-view filmstrip thumbnails only — must not override tile-view overflow */
#videoconference_page:not(.tile-view) .filmstrip .videocontainer {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Reinforce tile cards after non-tile rule (Meet filmstrip wraps all videocontainers) */
#videoconference_page.tile-view .filmstrip .videocontainer,
.tile-view .filmstrip__videos .videocontainer,
.tile-view #localVideoContainer {
  border-radius: var(--mp-tile-radius) !important;
}

#videoconference_page.tile-view .participants_pane,
#videoconference_page.tile-view .participants-pane,
#videoconference_page.tile-view .optional-panel.participants_pane,
#videoconference_page.tile-view [class*="participantsPane"],
#videoconference_page.tile-view .chat-panel,
#videoconference_page.tile-view #chat-panel,
#videoconference_page.tile-view #sideToolbarContainer {
  border-radius: var(--mp-pane-radius) !important;
}

#videoconference_page.tile-view .filmstrip .videocontainer,
.tile-view .filmstrip__videos .videocontainer,
.tile-view #localVideoContainer {
  overflow: visible !important;
}

/* Top tile controls above active-speaker overlay (jss30 is z-index 9) */
.tile-view #participant-connection-indicator,
.tile-view [class*="indicatorsTopContainer"],
.tile-view [class*="tile-view-mode"] {
  z-index: 12 !important;
}

/* -------------------------------------------------------------------------- */
/* Side panels                                                                */
/* -------------------------------------------------------------------------- */

/* Chat — stay in Meet layout (shrink tiles, no overlay). Match participants height via gaps. */
.chat-panel,
#chat-panel,
#sideToolbarContainer,
.sideToolbarContainer {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  height: calc(100% - var(--mp-pane-top-gap) - var(--mp-pane-bottom-gap)) !important;
  max-height: calc(100% - var(--mp-pane-top-gap) - var(--mp-pane-bottom-gap)) !important;
  margin-top: var(--mp-pane-top-gap) !important;
  margin-bottom: var(--mp-pane-bottom-gap) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  color: #000000 !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: var(--mp-pane-radius) !important;
}
.chat-panel .chat-dialog,
#chat-panel .chat-dialog,
#sideToolbarContainer .chat-dialog {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

.chat-panel *,
#sideToolbarContainer *,
.sideToolbarContainer * {
  box-sizing: border-box;
}

/* Header stays at top */
.chat-dialog-header {
  flex-shrink: 0 !important;
}

/* Messages grow; input stays at bottom */
#chat-conversation-container,
#chatconversation {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

.chat-input-container {
  flex-shrink: 0 !important;
  margin-top: auto !important;
}

/* Chat header ("Chat" title + close) */
.chat-dialog-header,
.chat-panel [class*="header"],
.chat-panel [class*="Header"],
#sideToolbarContainer [class*="header"],
#sideToolbarContainer [class*="Header"],
[class*="chat-panel"] [class*="header"],
[class*="ChatPanel"] [class*="header"] {
  color: #741975 !important;
  background: #ffffff !important;
}

.chat-dialog-header,
.chat-panel [class*="header"] > *,
#sideToolbarContainer [class*="header"] > * {
  color: #741975 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
}

.chat-dialog-header .jitsi-icon svg,
.chat-panel [class*="close"] .jitsi-icon svg,
.chat-panel [class*="closeButton"] .jitsi-icon svg,
.chat-panel [class*="header"] .jitsi-icon svg,
#sideToolbarContainer [class*="close"] .jitsi-icon svg,
#sideToolbarContainer [class*="header"] .jitsi-icon svg,
[class*="chat-panel"] [class*="close"] .jitsi-icon svg,
[class*="ChatPanel"] .jitsi-icon svg {
  fill: #741975 !important;
  color: #741975 !important;
}

/* Conversation / messages area */
#chat-conversation-container,
#chatconversation,
.chat-conversation,
[class*="chatConversation"],
[class*="ChatConversation"] {
  background: #ffffff !important;
  color: #000000 !important;
}

#chatconversation,
#chatconversation a,
#chatconversation a:link,
#chatconversation a:visited {
  color: #741975 !important;
}

/* Conversation area stays white — do NOT paint wrappers purple */
#chat-conversation-container,
#chatconversation,
.chat-message-group,
.chat-panel #chatconversation,
[class*="messageGroup"],
[class*="groupContainer"],
[class*="chatMessageWrapper"],
[class*="ChatMessageWrapper"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* ONLY the original per-message bubble (.chatmessage) — light purple */
#chatconversation .chatmessage,
.chat-panel .chatmessage,
#chat-panel .chatmessage,
.chatmessage {
  color: #000000 !important;
  background: #f3e8f3 !important;
  background-color: #f3e8f3 !important;
  box-shadow: none !important;
}

#chatconversation .chatmessage.local,
.chat-panel .chatmessage.local,
.chatmessage.local {
  background: #f3e8f3 !important;
  background-color: #f3e8f3 !important;
}

.chatmessage .usermessage,
.chat-message .usermessage {
  color: #000000 !important;
}

/* No avatars in chat */
#chatconversation .avatar,
.chat-message-group .avatar,
.chat-panel .avatar,
#chat-panel .avatar {
  display: none !important;
}

.chat-message-group .display-name,
.chatmessage .display-name,
[class*="displayName"],
[class*="DisplayName"],
[class*="sender"],
[class*="Sender"] {
  color: #741975 !important;
}

/* Message input — light purple like participants search */
.chat-input-container,
#chat-input,
.chat-input,
.usrmsg-form,
[class*="chat-input"],
[class*="ChatInput"],
[class*="chatInput"] {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove outer blue/gray field border around input + send */
#chat-input,
.chat-input-container,
.chat-input-container > div,
#chat-input > div,
#chat-input .usrmsg-form,
[class*="chat-input"] > div {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#chat-input:focus,
#chat-input:focus-within,
.chat-input-container:focus,
.chat-input-container:focus-within,
#chat-input .usrmsg-form:focus,
#chat-input .usrmsg-form:focus-within {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hide emoji/smiley so typing area can use full left width */
#smileys,
.smiley-input,
#chat-input .smiley-input,
.chat-input-container .smiley-input,
#smileysContainer {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.chat-input-container {
  padding: 0 16px 24px !important;
}

#chat-input {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Typing area (.usrmsg-form) expands left into freed space */
#chat-input .usrmsg-form,
.chat-input-container .usrmsg-form,
.chat-input,
#chat-input .chat-input {
  flex: 1 1 auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-left: 0 !important;
}

.chat-input-container textarea,
.chat-input-container input,
.chat-input textarea,
.chat-input input,
#chat-input textarea,
#chat-input input,
#chat-input .usrmsg-form textarea,
#chat-input .usrmsg-form input,
.chat-panel textarea,
.chat-panel input[type="text"],
#sideToolbarContainer textarea,
#sideToolbarContainer input[type="text"],
[class*="chat-panel"] textarea,
[class*="ChatPanel"] textarea {
  background: #f3e8f3 !important;
  background-color: #f3e8f3 !important;
  color: #000000 !important;
  border: 1px solid rgba(116, 25, 117, 0.25) !important;
  border-radius: 10px !important;
  caret-color: #741975 !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 12px !important;
}

.chat-input-container textarea::placeholder,
.chat-input-container input::placeholder,
.chat-input textarea::placeholder,
.chat-input input::placeholder,
#chat-input textarea::placeholder,
.chat-panel textarea::placeholder,
#sideToolbarContainer textarea::placeholder {
  color: rgba(116, 25, 117, 0.55) !important;
  opacity: 1 !important;
}

.chat-input-container textarea:focus,
.chat-input-container input:focus,
.chat-input textarea:focus,
#chat-input textarea:focus,
.chat-panel textarea:focus,
#sideToolbarContainer textarea:focus {
  outline: none !important;
  border-color: #741975 !important;
  box-shadow: 0 0 0 1px #741975 !important;
}

/* Send is div.send-button (not <button>) — purple #741975 */
#chat-input .send-button-container .send-button,
.chat-input-container .send-button,
div.send-button[aria-label="chat.sendButton"],
div.send-button[role="button"] {
  background: #741975 !important;
  background-color: #741975 !important;
  border: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}

#chat-input .send-button-container .send-button:hover,
.chat-input-container .send-button:hover,
div.send-button[aria-label="chat.sendButton"]:hover {
  background: #5c145e !important;
  background-color: #5c145e !important;
}

/* Paper-plane icon white on purple */
#chat-input .send-button .jitsi-icon svg,
#chat-input .send-button .jitsi-icon svg path,
.chat-input-container .send-button .jitsi-icon svg,
.chat-input-container .send-button .jitsi-icon svg path,
div.send-button[aria-label="chat.sendButton"] .jitsi-icon svg,
div.send-button[aria-label="chat.sendButton"] .jitsi-icon svg path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Meeting participants pane — white (Figma); avoid color !important on root (blocks title token) */
#layout_wrapper,
#react > div {
  background: var(--mp-bg) !important;
}

#layout_wrapper {
  position: relative !important;
  align-items: flex-start !important;
}

/* Pin pane to same outer box as tile (.videocontainer margins, not toolbox reserve) */
.participants_pane,
.participants-pane,
.optional-panel.participants_pane,
[class*="participantsPane"] {
  position: absolute !important;
  top: var(--mp-pane-top-gap) !important;
  right: 0 !important;
  bottom: var(--mp-pane-bottom-gap) !important;
  left: auto !important;
  width: 315px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  color: #000000;
  display: flex !important;
  flex-direction: column !important;
  border-radius: var(--mp-pane-radius) !important;
  z-index: 5 !important;
}

.participants_pane-content,
.participants-pane-content,
[class*="participantsPane"] .participants_pane-content {
  color: #000000;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
  background: transparent !important;
}

/*
 * "Meeting participants (N)" title — Figma purple #741975.
 * DOM: .participants_pane-content
 *        > div.jss54 (close) — 1st child
 *        > div.jss52 (body)  — 2nd child
 *            > br
 *            > div.jss66     — title (before search)
 *            > div.jss67 > input
 */
.participants_pane-content > div:nth-child(2) > div:has(+ div > input[placeholder*="Search participants"]),
.participants_pane .participants_pane-content > div:nth-child(2) > div:has(+ div > input[placeholder*="Search participants"]),
.participants-pane .participants_pane-content > div:nth-child(2) > div:has(+ div > input[placeholder*="Search participants"]),
[class*="participantsPane"] .participants_pane-content > div:nth-child(2) > div:has(+ div > input[placeholder*="Search participants"]),
.participants_pane-content > div:nth-child(2) > div:nth-of-type(1),
.participants_pane .participants_pane-content > div:nth-child(2) > div:nth-of-type(1),
[class*="participantsPane"] .participants_pane-content > div:nth-child(2) > div:nth-of-type(1),
.participants_pane-content div:has(+ div > input[placeholder*="Search participants"]):not([role="button"]):not([id^="participant-item-"]),
.participants_pane .participants_pane-content div:has(+ div > input[placeholder*="Search participants"]):not([role="button"]):not([id^="participant-item-"]),
[class*="participantsPane"] .participants_pane-content div:has(+ div > input[placeholder*="Search participants"]):not([role="button"]):not([id^="participant-item-"]),
.participants_pane-content > [class*="heading"],
.participants_pane-content [class*="heading"]:first-of-type,
.participants-pane [class*="heading"]:first-of-type,
[class*="participantsPane"] [class*="heading"]:first-of-type {
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 16px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
  color: #741975 !important;
}

/* Participant row labels — black without pane-wide * wildcard */
.participants_pane [id^="participant-item-"],
.participants-pane [id^="participant-item-"],
[class*="participantsPane"] [id^="participant-item-"] {
  color: #000000 !important;
}

/*
 * Search participants — light purple instead of black bar.
 * Meet paints field01 on the parent wrapper (e.g. div.jssXX); input is
 * transparent. Target parent via :has(> input) and use an opaque tint
 * (rgba 0.12 over black still looks black).
 */
.participants_pane-content div:has(> input),
.participants_pane div:has(> input),
.participants-pane div:has(> input),
[class*="participantsPane"] div:has(> input),
.participants_pane [class*="search"],
.participants-pane [class*="search"],
[class*="participantsPane"] [class*="search"],
.participants_pane [class*="Search"],
[class*="participantsPane"] [class*="Search"],
.participants_pane [class*="inputContainer"],
.participants-pane [class*="inputContainer"],
[class*="participantsPane"] [class*="inputContainer"],
.participants_pane [class*="InputContainer"],
[class*="participantsPane"] [class*="InputContainer"],
.participants_pane [class*="input-container"],
[class*="participantsPane"] [class*="input-container"],
.participants_pane [class*="field"],
.participants-pane [class*="field"],
[class*="participantsPane"] [class*="field"],
.participants_pane [class*="Field"],
[class*="participantsPane"] [class*="Field"],
.participants_pane form,
.participants-pane form,
[class*="participantsPane"] form {
  background: #f3e8f3 !important;
  background-color: #f3e8f3 !important;
  color: #000000 !important;
  border-color: rgba(116, 25, 117, 0.35) !important;
  box-shadow: none !important;
}

/* Input sits inside the field wrapper — no second border */
.participants_pane input,
.participants-pane input,
[class*="participantsPane"] input {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #000000 !important;
  caret-color: #000000 !important;
}

.participants_pane input::placeholder,
.participants-pane input::placeholder,
[class*="participantsPane"] input::placeholder {
  color: rgba(0, 0, 0, 0.45) !important;
  opacity: 1 !important;
}

/* Search focus ring — #741975 instead of Meet's default blue (focus01) */
.participants_pane-content div:has(> input):focus-within,
.participants_pane div:has(> input):focus-within,
.participants-pane div:has(> input):focus-within,
[class*="participantsPane"] div:has(> input):focus-within {
  outline: none !important;
  border: 1px solid #741975 !important;
  box-shadow: 0 0 0 2px #741975 !important;
}

.participants_pane input:focus,
.participants-pane input:focus,
[class*="participantsPane"] input:focus,
.participants_pane input:focus-visible,
.participants-pane input:focus-visible,
[class*="participantsPane"] input:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* All participants-pane buttons (Mute all, …, Add breakout room, close X) */
.participants_pane button,
.participants-pane button,
[class*="participantsPane"] button {
  background: #ffffff !important;
  color: #741975 !important;
  border: 1px solid #741975 !important;
  box-shadow: none !important;
}

.participants_pane button:hover,
.participants-pane button:hover,
[class*="participantsPane"] button:hover {
  background: rgba(116, 25, 117, 0.06) !important;
}

/*
 * Search clear (×) — sibling of the input inside the field wrapper
 * (DevTools: div > input.jssXX + button.jssXX). Strip Mute-all chrome;
 * keep purple icon only.
 */
.participants_pane div:has(> input) > button,
.participants-pane div:has(> input) > button,
.participants_pane-content div:has(> input) > button,
[class*="participantsPane"] div:has(> input) > button {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
}

.participants_pane div:has(> input) > button:hover,
.participants-pane div:has(> input) > button:hover,
.participants_pane-content div:has(> input) > button:hover,
[class*="participantsPane"] div:has(> input) > button:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

.participants_pane div:has(> input) > button svg,
.participants-pane div:has(> input) > button svg,
[class*="participantsPane"] div:has(> input) > button svg {
  fill: #741975 !important;
  color: #741975 !important;
  stroke: none !important;
}

.participants_pane button svg,
.participants_pane button [class*="icon"],
.participants-pane button svg,
[class*="participantsPane"] button svg,
[class*="participantsPane"] button [class*="icon"] {
  fill: #741975 !important;
  color: #741975 !important;
  stroke: #741975 !important;
  stroke-width: 1 !important;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
}

/*
 * Beat Jitsi .jitsi-icon-default svg { fill: #fff } on the white panel.
 * Applies to close (X) and other non-indicator icons in the pane.
 */
.participants_pane .jitsi-icon-default svg,
.participants-pane .jitsi-icon svg,
.participants-pane [class*="header"] .jitsi-icon-default svg,
.participants-pane [class*="closeButton"] .jitsi-icon-default svg,
.participants-pane [class*="close"] .jitsi-icon-default svg,
[class*="participantsPane"] .jitsi-icon-default svg,
[class*="participantsPane"] .jitsi-icon svg,
[class*="participantsPane"] [class*="header"] .jitsi-icon-default svg,
[class*="participantsPane"] [class*="closeButton"] .jitsi-icon-default svg,
[class*="participantsPane"] [class*="close"] .jitsi-icon-default svg {
  fill: #741975 !important;
  color: #741975 !important;
  stroke: #741975 !important;
  stroke-width: 1 !important;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
}

.participants_pane [class*="close"],
.participants_pane [class*="header"] [class*="close"],
.participants_pane [class*="closeButton"],
[class*="participantsPane"] [class*="close"],
[class*="participantsPane"] [class*="closeButton"],
[class*="participantsPane"] [class*="header"] [role="button"] {
  color: #741975 !important;
}

/*
 * Participant list mute indicators (mic/cam off).
 * videoMuted has id="videoMuted"; mic often has no id — target .indicators svg.
 * Must come AFTER the jitsi-icon-default purple rule so muted icons stay black.
 */
.participants_pane .indicators svg,
.participants-pane .indicators svg,
[class*="participantsPane"] .indicators svg,
.participants_pane .indicators .jitsi-icon svg,
.participants_pane .indicators .jitsi-icon-default svg,
[class*="participantsPane"] .indicators .jitsi-icon svg,
[class*="participantsPane"] .indicators .jitsi-icon-default svg,
.participants_pane #videoMuted,
[class*="participantsPane"] #videoMuted,
.participants_pane svg#videoMuted,
[class*="participantsPane"] svg#videoMuted {
  fill: #000000 !important;
  color: #000000 !important;
  stroke: #000000 !important;
  stroke-width: 1 !important;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
}

/* Participant row hover / menu-open — light purple instead of dark gray.
 * Meet keeps a dark participantItemHover while the "…" menu is open
 * (not only CSS :hover). Cover :focus-within and :has(.ignore-child). */
.participants_pane [id^="participant-item-"]:hover,
.participants-pane [id^="participant-item-"]:hover,
[class*="participantsPane"] [id^="participant-item-"]:hover,
.participants_pane [id^="participant-item-"]:focus-within,
.participants-pane [id^="participant-item-"]:focus-within,
[class*="participantsPane"] [id^="participant-item-"]:focus-within,
.participants_pane [id^="participant-item-"]:has(.ignore-child),
.participants-pane [id^="participant-item-"]:has(.ignore-child),
[class*="participantsPane"] [id^="participant-item-"]:has(.ignore-child),
.participants_pane [class*="participant-item"]:hover,
.participants-pane [class*="participant-item"]:hover,
[class*="participantsPane"] [class*="participant-item"]:hover,
.participants_pane [class*="listItem"]:hover,
.participants-pane [class*="listItem"]:hover,
[class*="participantsPane"] [class*="listItem"]:hover,
.participants_pane [class*="ListItem"]:hover,
[class*="participantsPane"] [class*="ListItem"]:hover {
  background: rgba(116, 25, 117, 0.12) !important;
  background-color: rgba(116, 25, 117, 0.12) !important;
}

/*
 * Hover quick-actions ("Ask to unmute", …) — Meet paints a dark fade/gradient
 * on the actions strip (dark UI). Kill that and match Mute all / bottom ….
 */
.participants_pane [id^="participant-item-"] [class*="actions"],
.participants-pane [id^="participant-item-"] [class*="actions"],
[class*="participantsPane"] [id^="participant-item-"] [class*="actions"],
.participants_pane [id^="participant-item-"] [class*="Actions"],
[class*="participantsPane"] [id^="participant-item-"] [class*="Actions"],
.participants_pane [id^="participant-item-"] [class*="actions"]::before,
.participants-pane [id^="participant-item-"] [class*="actions"]::before,
[class*="participantsPane"] [id^="participant-item-"] [class*="actions"]::before,
.participants_pane [id^="participant-item-"] [class*="Actions"]::before,
[class*="participantsPane"] [id^="participant-item-"] [class*="Actions"]::before,
.participants_pane [id^="participant-item-"] [class*="participantActions"],
[class*="participantsPane"] [id^="participant-item-"] [class*="participantActions"],
.participants_pane [id^="participant-item-"] div:has(> button),
.participants-pane [id^="participant-item-"] div:has(> button),
[class*="participantsPane"] [id^="participant-item-"] div:has(> button) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.participants_pane [id^="participant-item-"] button,
.participants-pane [id^="participant-item-"] button,
[class*="participantsPane"] [id^="participant-item-"] button {
  background: #ffffff !important;
  color: #741975 !important;
  border: 1px solid #741975 !important;
  box-shadow: none !important;
}

.participants_pane [id^="participant-item-"] button:hover,
.participants-pane [id^="participant-item-"] button:hover,
[class*="participantsPane"] [id^="participant-item-"] button:hover {
  background: rgba(116, 25, 117, 0.06) !important;
}

/*
 * Participant "…" dropdown — DevTools: container is div.ignore-child
 * with background-color #292929 (ui03) and heavy box-shadow. JSS class
 * names are hashed (jss111), so target .ignore-child, not "contextMenu".
 */
.participants_pane .ignore-child,
.participants-pane .ignore-child,
[class*="participantsPane"] .ignore-child,
.participants_pane-content .ignore-child {
  background: #f3e8f3 !important;
  background-color: #f3e8f3 !important;
  border: 1px solid #741975 !important;
  box-shadow: 0 4px 16px rgba(116, 25, 117, 0.18) !important;
  color: #000000 !important;
}

.participants_pane .ignore-child *,
.participants-pane .ignore-child *,
[class*="participantsPane"] .ignore-child *,
.participants_pane-content .ignore-child * {
  color: #000000 !important;
}

.participants_pane .ignore-child svg,
.participants-pane .ignore-child svg,
[class*="participantsPane"] .ignore-child svg,
.participants_pane-content .ignore-child svg {
  fill: #741975 !important;
  color: #741975 !important;
  stroke: #741975 !important;
}

/* Menu item hover (e.g. Kick out / Send private message) */
.participants_pane .ignore-child > div:hover,
.participants-pane .ignore-child > div:hover,
[class*="participantsPane"] .ignore-child > div:hover,
.participants_pane .ignore-child [aria-label]:hover,
.participants_pane-content .ignore-child [aria-label]:hover,
.participants_pane .ignore-child > div > div:hover,
.participants_pane-content .ignore-child > div > div:hover {
  background: rgba(116, 25, 117, 0.12) !important;
  background-color: rgba(116, 25, 117, 0.12) !important;
}

/* -------------------------------------------------------------------------- */
/* Mobile                                                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 699px) {
  :root {
    --mp-toolbox-space: 88px;
    --mp-toolbox-bottom-gap: 8px;
  }

  .videocontainer .displayname,
  .displayname {
    font-size: 13px !important;
    line-height: 20px !important;
    padding: 5px 10px !important;
    left: 6px !important;
    bottom: 6px !important;
  }

  .new-toolbox .toolbox-content-items,
  .toolbox-content-items {
    padding: 6px 10px !important;
    border-radius: var(--mp-toolbox-radius) !important;
    gap: 2px !important;
  }

  .new-toolbox .hangup-button .toolbox-icon,
  .hangup-button .toolbox-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .participants_pane,
  .participants-pane,
  .optional-panel.participants_pane,
  [class*="participantsPane"] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 20 !important;
  }
}